:root{
  --papel:#F4F6F8;
  --blanco:#FFFFFF;
  --tinta:#0B111A;
  --tinta-2:#4A5563;
  --niebla:#E3E8ED;
  --verde:#067A22;      /* texto y bordes sobre claro */
  --verde-marca:#02A92C;
  --verde-vivo:#7EFD04; /* solo sobre tinta */
  --radio:20px;
  --titulo:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --texto:"Figtree","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--verde-marca);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* cabecera fija */
header{position:sticky;top:0;z-index:20;background:rgba(244,246,248,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--niebla)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
header img{height:32px;width:auto}
nav{display:flex;align-items:center;gap:22px;font-weight:500}
nav a{text-decoration:none}
nav a.enlace:hover{text-decoration:underline}
nav .secciones{display:none;gap:22px}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:600 1rem var(--texto);text-decoration:none;border:2px solid var(--tinta);transition:transform .15s,background .15s;white-space:nowrap}
.boton:hover{transform:translateY(-1px)}
.boton.primario{background:var(--tinta);color:var(--blanco)}
.boton.primario:hover{background:#1b2636}
.boton.claro{background:transparent;color:var(--tinta)}
.boton.claro:hover{background:var(--blanco)}
.boton.vivo{background:var(--verde-vivo);border-color:var(--verde-vivo);color:var(--tinta)}

/* hero */
.hero{padding:40px 0 64px}
.hero .wrap{display:grid;gap:48px;align-items:center}
h1{font:800 clamp(2.4rem,7vw,4.4rem)/1.02 var(--titulo);letter-spacing:-.025em;max-width:13ch}
.hero p.sub{margin-top:20px;font-size:1.2rem;color:var(--tinta-2);max-width:44ch}
.puertas{display:grid;gap:12px;margin-top:32px;max-width:520px}
.puerta{display:block;text-decoration:none;background:var(--blanco);border:2px solid var(--niebla);border-radius:16px;padding:16px 20px;transition:border-color .15s,transform .15s}
.puerta:hover{border-color:var(--tinta);transform:translateY(-2px)}
.puerta b{display:block;font:700 1.15rem var(--titulo)}
.puerta span{color:var(--tinta-2);font-size:.95rem}
.puerta.negra{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.puerta.negra span{color:#B8C2CF}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sin-costo{margin-top:14px;font-size:.92rem;color:var(--tinta-2)}

/* escena: tarjeta que se acerca al teléfono */
.escena{position:relative;height:520px;margin-bottom:24px;max-width:420px;width:100%;margin-inline:auto}
.telefono{position:absolute;right:0;top:0;width:250px;height:490px;border-radius:38px;background:var(--tinta);padding:10px;box-shadow:0 30px 60px -20px rgba(11,17,26,.45)}
.pantalla{height:100%;border-radius:30px;background:var(--blanco);overflow:hidden;position:relative}
.perfil{position:absolute;inset:0;padding:26px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(24px);animation:perfilA 15s ease infinite}
.pantalla img.perfil{width:100%;height:100%;padding:0;object-fit:cover;object-position:top}
.espera{position:absolute;inset:0;display:grid;place-items:center;color:var(--tinta-2);font-size:.9rem;animation:espera 15s ease infinite}
.espera img{width:64px;height:64px;opacity:.18}
@keyframes perfilA{0%,22%{opacity:0;transform:translateY(24px)}26%,45%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateY(24px)}}
@keyframes perfilB{0%,72%{opacity:0;transform:translateY(24px)}76%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:translateY(24px)}}
.pantalla img.perfil.dos{animation-name:perfilB}
@keyframes espera{0%,20%{opacity:1}24%,47%{opacity:0}52%,70%{opacity:1}74%,97%{opacity:0}100%{opacity:1}}
.tarjeta{position:absolute;left:0;bottom:-34px;width:240px;height:152px;border-radius:16px;overflow:hidden;color:var(--blanco);padding:16px;background:radial-gradient(120% 100% at 0% 0%,rgba(126,253,4,.22),transparent 55%),linear-gradient(150deg,#1A2636,#0B111A 65%);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -16px rgba(11,17,26,.55);transform:rotate(-8deg);animation:toque 15s cubic-bezier(.5,0,.2,1) infinite}
.tarjeta .marca{position:absolute;right:-30px;top:-34px;width:150px;height:150px;opacity:.14}
.tarjeta .logo{position:relative;height:17px;width:auto}
.tarjeta .lineas{position:absolute;left:16px;top:56px;display:grid;gap:7px}
.tarjeta .lineas i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
.tarjeta .lineas i:first-child{width:92px}
.tarjeta .lineas i:last-child{width:62px;background:rgba(255,255,255,.16)}
.tarjeta .nfc{position:absolute;left:16px;bottom:15px;display:flex;align-items:center;gap:8px;font-size:.66rem;color:#B8C2CF}
.tarjeta .nfcico{width:22px;height:22px}
.tarjeta .qr{position:absolute;right:14px;bottom:14px;width:62px;height:62px;border-radius:8px}
.onda{position:absolute;right:-6px;top:50%;width:40px;height:40px;margin-top:-20px;border:2px solid var(--verde-vivo);border-radius:50%;opacity:0;animation:onda 15s ease-out infinite}
@keyframes toque{0%,3%{transform:translate(0,0) rotate(-8deg)}15%,26%{transform:translate(150px,-110px) rotate(-2deg)}38%,53%{transform:translate(0,0) rotate(-8deg)}65%,76%{transform:translate(150px,-110px) rotate(-2deg)}88%,100%{transform:translate(0,0) rotate(-8deg)}}
@keyframes onda{0%,16%{opacity:0;transform:scale(.4)}18%{opacity:.9}22%{opacity:0;transform:scale(2.2)}23%,24%{opacity:0;transform:scale(.4)}25%{opacity:.9}28%{opacity:0;transform:scale(2.2)}29%,66%{opacity:0}68%{opacity:.9;transform:scale(.4)}72%{opacity:0;transform:scale(2.2)}73%,74%{opacity:0;transform:scale(.4)}75%{opacity:.9}78%{opacity:0;transform:scale(2.2)}100%{opacity:0}}

/* títulos de sección */
.seccion{padding:72px 0}
.seccion h2,.regalo h2,.cierre h2{font:800 clamp(1.8rem,4.5vw,2.8rem)/1.08 var(--titulo);letter-spacing:-.02em;max-width:20ch}
.seccion .intro{margin-top:14px;color:var(--tinta-2);max-width:52ch}

/* cómo funciona: sí es una secuencia */
.pasos{display:grid;gap:16px;margin-top:36px;padding:0;list-style:none;counter-reset:paso}
.pasos li{counter-increment:paso;background:var(--blanco);border:2px solid var(--niebla);border-radius:var(--radio);padding:26px 24px}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tinta);color:var(--verde-vivo);font:800 1.1rem var(--titulo);margin-bottom:14px}
.pasos b{display:block;font:700 1.25rem/1.2 var(--titulo)}
.pasos span{display:block;margin-top:6px;color:var(--tinta-2)}

/* líneas de producto */
.linea{border-radius:28px;padding:40px 24px}
.linea.connect{background:var(--blanco);border:2px solid var(--niebla)}
.linea.business{background:var(--tinta);color:var(--blanco)}
.linea .para{margin-top:10px;font-weight:600;color:var(--verde)}
.linea.business .para{color:var(--verde-vivo)}
.linea h2{max-width:none}
.tarjetas{display:grid;gap:14px;margin-top:30px}
.func{border-radius:16px;padding:20px;background:var(--papel);border:2px solid var(--niebla)}
.business .func{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.func b{display:block;font:700 1.12rem/1.2 var(--titulo)}
.func span{display:block;margin-top:6px;font-size:.98rem;color:var(--tinta-2)}
.business .func span{color:#B8C2CF}
.func .pronto{display:inline-block;margin:0 0 0 8px;padding:2px 10px;border-radius:999px;background:var(--tinta);color:var(--verde-vivo);font:600 .75rem var(--texto);vertical-align:middle}
.ejemplos{display:grid;gap:14px;margin-top:28px}
.ej{display:flex;align-items:center;gap:16px;background:var(--papel);border:2px solid var(--niebla);border-radius:16px;padding:16px}
.ej img{width:80px;height:80px;flex:none;border-radius:50%;object-fit:cover}
.ej b{display:block;font:700 1.2rem/1.2 var(--titulo)}
.ej span{display:block;color:var(--tinta-2)}
.ej small{display:block;margin-top:4px;color:var(--verde);font-weight:600;font-size:.8rem}
.vitrinas{display:grid;gap:16px;margin-top:28px}
.vitrinas figure{margin:0;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.16);background:var(--blanco)}
.vitrinas img{width:100%;height:auto}
.vitrinas figcaption{padding:10px 14px;background:rgba(255,255,255,.06);color:#B8C2CF;font-size:.9rem}
.formas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.formas span{padding:8px 16px;border-radius:999px;background:var(--papel);border:2px solid var(--niebla);font-weight:600;font-size:.95rem}

/* regalo */
.regalo{padding:0 0 72px}
.regalo .caja{border-radius:var(--radio);background:linear-gradient(120deg,#E9FBD7,#F4F6F8 70%);border:2px solid var(--niebla);padding:36px 28px;display:grid;gap:28px}
.regalo p{max-width:52ch;color:var(--tinta-2)}
.objetos{display:grid;gap:12px;align-content:start}
.objeto{background:var(--blanco);border-radius:14px;padding:16px 18px;font-weight:600;border:2px solid var(--niebla)}
.objeto small{display:block;font-weight:400;color:var(--tinta-2)}

/* preguntas */
.preguntas{max-width:760px;margin-top:30px}
details{background:var(--blanco);border:2px solid var(--niebla);border-radius:14px;padding:0 20px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;font:700 1.08rem/1.3 var(--titulo)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:600 1.5rem var(--texto);color:var(--verde)}
details[open] summary::after{content:"−"}
details p{padding:0 0 20px;color:var(--tinta-2);max-width:60ch}
details a{color:var(--verde)}

/* cierre */
.cierre{background:var(--tinta);color:var(--blanco);padding:72px 0}
.cierre p{margin-top:14px;color:#B8C2CF;max-width:46ch}
.cierre .acciones .boton.claro{color:var(--blanco);border-color:var(--blanco)}
.cierre .acciones .boton.claro:hover{background:rgba(255,255,255,.1)}

footer{padding:32px 0 96px;font-size:.92rem;color:var(--tinta-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{text-decoration:underline}

/* barra inferior fija en celular: la misma promesa en todo el recorrido */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(244,246,248,.96);border-top:1px solid var(--niebla);display:flex;gap:10px}
.barra .boton{flex:1;min-height:46px;padding:0 12px}

@media(min-width:860px){
  .hero{padding:72px 0 96px}
  .hero .wrap{grid-template-columns:1.1fr .9fr}
  .puertas{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .linea{padding:56px 48px}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .vitrinas{grid-template-columns:repeat(2,1fr)}
  .ejemplos{grid-template-columns:repeat(2,1fr)}
  .regalo .caja{grid-template-columns:1.2fr 1fr;padding:48px}
  nav .secciones{display:flex}
  .barra{display:none}
  footer{padding-bottom:44px}
}
@media(max-width:859px){.hero .acciones{display:none}}
@media(max-width:520px){
  header img{height:26px}
  nav{gap:12px}
  nav .boton{min-height:42px;padding:0 16px;font-size:.95rem}
  .hero{padding-top:24px}
  .hero .wrap{gap:32px}
}
@media(max-width:380px){.telefono{width:220px}.tarjeta{width:200px}}
@media(prefers-reduced-motion:reduce){
  .perfil{animation:none;opacity:1;transform:none}
  .perfil.dos{display:none}
  .espera{display:none}
  .tarjeta{animation:none}
  .onda{display:none}
  html{scroll-behavior:auto}
  .boton,.puerta{transition:none}
}
/* menú principal: visible en computador; en celular, una fila que se desliza */
nav .secciones a{padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap}
nav .secciones{gap:18px}
nav .enlace{white-space:nowrap}
nav .secciones a[aria-current="page"]{border-bottom-color:var(--verde-marca);font-weight:600}
.menu-movil{display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none;border-bottom:1px solid var(--niebla);background:rgba(244,246,248,.92)}
.menu-movil::-webkit-scrollbar{display:none}
.menu-movil a{flex:none;text-decoration:none;padding:8px 16px;border-radius:999px;border:2px solid var(--niebla);background:var(--blanco);font-weight:600;font-size:.95rem}
.menu-movil a[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
@media(min-width:860px){.menu-movil{display:none}}

/* páginas interiores */
.portada{padding:56px 0 24px}
.portada h1{max-width:18ch}
.portada p.sub{margin-top:16px;font-size:1.2rem;color:var(--tinta-2);max-width:56ch}
.texto{max-width:62ch}
.texto h2{font:800 clamp(1.6rem,4vw,2.2rem)/1.1 var(--titulo);letter-spacing:-.02em;margin:40px 0 14px}
.texto p{margin-top:14px;color:var(--tinta-2)}
.texto p strong{color:var(--tinta)}

/* propuesta de valor */
.valor{background:var(--tinta);color:var(--blanco);padding:72px 0}
.valor .etiqueta{color:var(--verde-vivo);font:600 .9rem var(--texto);letter-spacing:.02em}
.valor h2{margin-top:10px;font:800 clamp(1.8rem,4.5vw,2.8rem)/1.08 var(--titulo);letter-spacing:-.02em;max-width:18ch}
.valor .lead{margin-top:16px;color:#B8C2CF;max-width:52ch}
.verbos{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.verbos span{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font:700 1.05rem var(--titulo)}
.promesas{display:grid;gap:14px;margin-top:36px}
.promesa{padding:22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.promesa b{display:block;font:700 1.2rem/1.2 var(--titulo)}
.promesa span{display:block;margin-top:6px;color:#B8C2CF}
@media(min-width:860px){.promesas{grid-template-columns:repeat(3,1fr)}}

/* contacto */
.canales{display:grid;gap:14px;margin-top:32px;max-width:640px}
.canal{display:block;text-decoration:none;background:var(--blanco);border:2px solid var(--niebla);border-radius:var(--radio);padding:22px 24px;transition:border-color .15s,transform .15s}
.canal:hover{border-color:var(--tinta);transform:translateY(-2px)}
.canal b{display:block;font:700 1.2rem var(--titulo)}
.canal span{display:block;margin-top:4px;color:var(--tinta-2)}