:root{
  --bg1:#0b3b8c; --ink:#eaf6ff; --muted:#c9d7ee;
  --card:rgba(17,24,39,.55); --stroke:rgba(255,255,255,.12);
  --brand:#00e18a; --brand-ink:#07121d; --maxw:1180px;
  --radius:18px; --shadow:0 12px 28px rgba(0,0,0,.25)
}

/* Base / Mobile first */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 1200px at 80% -10%, rgba(0,225,138,.22), transparent 60%),
    radial-gradient(800px 800px at -10% 110%, rgba(11,59,140,.32), transparent 60%),
    linear-gradient(135deg,#0b3b8c 0%, #0d204a 40%, #0d1a33 70%, #091321 100%);
}

.container{max-width:var(--maxw);margin:auto;padding:20px}

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0;
}
.logo{height:44px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; text-decoration:none;
  background:var(--brand); color:var(--brand-ink); font-weight:800;
  box-shadow:0 6px 14px rgba(0,225,138,.25); transform:translateY(0); transition:.22s ease;
  border:2px solid transparent; font-size:14px;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,225,138,.35)}
.btn.outline{background:transparent; color:var(--ink); border-color:var(--brand); box-shadow:none}
.btn.outline:hover{background:rgba(0,225,138,.08)}
.mt-12{margin-top:12px} .mt-8{margin-top:8px}

/* Hero (mobile: una columna) */
.hero{
  display:grid; grid-template-columns:1fr; gap:16px; align-items:center; padding:18px 0;
}
.card{
  background:var(--card); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:18px; backdrop-filter:blur(8px);
  box-shadow:var(--shadow)
}
h1{font-size:34px; line-height:1.05; margin:6px 0 10px; font-weight:800; letter-spacing:-.02em}
p.lead{font-size:16px; color:var(--muted); margin:0 0 14px}

/* Badges */
.badges{display:flex; gap:8px; flex-wrap:wrap; row-gap:8px}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(234,246,255,.08); border:1px solid var(--stroke); font-size:12px}

/* QR */
.qrwrap{display:flex; gap:12px; align-items:flex-start; margin-top:12px}
.qr-card{display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff; color:#0b1020; border-radius:14px; padding:8px; box-shadow:0 8px 20px rgba(0,0,0,.25); width:max-content}
.qr-card img{width:96px; height:96px; border-radius:10px}
.qr-note{opacity:.7}
.note{font-size:12px; color:var(--muted)}

/* Imagen hero que cubre 100% con doble envoltura */
.card-wrapper{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
}
.screen.inner{
  position:relative; overflow:hidden; min-height:300px; border-radius:inherit; border:none; background:none;
}
.screen.inner .phone{
   height:calc(50% + 2px); height:calc(100% + 2px);
 
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover; object-position:center;
  border-radius:inherit; animation:none;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.25));
}

/* Secciones */
.steps{display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px}
.steps .card h3{margin:6px 0 4px}
.cols{display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px}
ul{padding-left:18px; margin:8px 0 0}

/* FAQ */
.faq{display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px}
details{background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:14px}
summary{cursor:pointer; font-weight:600}

/* Footer */
footer{
  margin-top:28px; padding:16px 0; border-top:1px solid var(--stroke);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted)
}
footer a{color:var(--muted); text-decoration:none}
.social{display:flex; gap:14px}

/* Marca en header: icono + palabra en blanco, tamaño h1 responsivo */
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-icon{
  height:60px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
/* Texto grande blanco (como h1, pero en el header) */
.brand-wordmark{
  color:#fff;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1;
  /* h1 responsivo: 24–40px según ancho */
  font-size: clamp(24px, 3.2vw, 40px);
}

/* Ajustes en breakpoints si hace falta */
@media (max-width: 600px){
  .brand-icon{ height:60px; }
  .brand-wordmark{ font-size: clamp(22px, 4.5vw, 32px); }
}
@media (min-width: 1024px){
  /* Si querés aún más presencia en desktop, subí el tamaño máximo */
  .brand-wordmark{ font-size: clamp(28px, 3.2vw, 44px); }
}


/* ============== Breakpoint: ≥600px (tablet) ============== */
@media (min-width: 600px){
  h1{font-size:40px}
  .screen.inner{min-height:340px}
  .qr-card img{width:110px; height:110px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:repeat(2,1fr)}
}

/* ============== Breakpoint: ≥1024px (desktop) ============== */
@media (min-width: 1024px){
  /* Header: ocultamos CTAs duplicados (se ven en el héroe) */
  header .cta{display:none}

  .container{padding:24px}
  .hero{
    grid-template-columns:1.15fr 1fr; gap:22px; padding:28px 0;
  }
  .card{padding:22px}
  h1{font-size:48px}
  p.lead{font-size:18px}
  .screen.inner{min-height:380px}
  .hero .card{max-width:620px}
  .steps{grid-template-columns:repeat(3,1fr)}
}