/* EL SITIO DE NIMU (70.5.0, b2-sitio). El mismo sistema de diseño que la app:
   theme/tokens.ts (paleta clara y oscura, azul rey único primario, estados),
   theme/funcion.ts (el color por función) y movimiento (120/200/320/700 ms).
   Lo comparten la portada y /support. Oscuro = gris al 88 %, nunca negro. */

:root{
  --fondo:#FFFFFF; --texto:#111318; --sec:#5B6270; --mudo:#8A909B;
  --borde:rgba(17,24,39,.08); --suave:#F3F6FD; --vidrio:rgba(255,255,255,.86);
  --pri:#1E5BFF; --priS:#EAF0FF; --sobrePri:#FFFFFF;
  --exito:#15803D; --exitoS:#E7F7EC; --aviso:#9A6A00; --avisoS:#FFF4DC;
  --destacado:#EA6A0C; --destacadoS:#FFF1E6;
  --sombra:0 3px 10px rgba(17,19,24,.05); --sombraAlta:0 10px 22px rgba(0,0,0,.18);
  /* El color por función (theme/funcion.ts, CLARA). */
  --f-dinero:#1B8A3E; --f-compartir:#1E6FD9; --f-tiempo:#D9730D; --f-documentos:#3F51B5;
  --f-cupones:#D6263C; --f-tarjeta:#6B4FA8; --f-perfil:#4A5A6A; --f-cerca:#0B84C6;
  --f-contacto:#0F8C7E; --f-archivos:#7A5A2E; --f-notas:#B8860B; --f-peligro:#C0392B;
  --f-ajustes:#5F6B76; --f-estrella:#E0A100;
  --pastel:10%; --f:var(--pri);
  --r:16px; --rBoton:12px;
  --toque:120ms; --rapido:200ms; --medio:320ms; --momento:700ms;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fondo:#1C1E22; --texto:#F2F4F7; --sec:#A3AAB5; --mudo:#7E8591;
  --borde:rgba(255,255,255,.10); --suave:#262A31; --vidrio:rgba(28,30,34,.86);
  --pri:#5B8CFF; --priS:#1E2A48; --sobrePri:#1C1E22;
  --exito:#4ADE80; --exitoS:#163323; --aviso:#F2C14E; --avisoS:#3A2E12;
  --destacado:#FB923C; --destacadoS:#3A2616;
  --sombra:0 3px 10px rgba(0,0,0,.25);
  --f-dinero:#4CC56F; --f-compartir:#5EA3FF; --f-tiempo:#FFA048; --f-documentos:#8C9BFF;
  --f-cupones:#FF6B7D; --f-tarjeta:#B39DFF; --f-perfil:#A9B7C6; --f-cerca:#4DC3FF;
  --f-contacto:#3FD1BF; --f-archivos:#D9B27A; --f-notas:#FFD24D; --f-peligro:#FF7B6B;
  --f-ajustes:#B0BAC4; --f-estrella:#FFD24D;
  --pastel:18%;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --fondo:#1C1E22; --texto:#F2F4F7; --sec:#A3AAB5; --mudo:#7E8591;
  --borde:rgba(255,255,255,.10); --suave:#262A31; --vidrio:rgba(28,30,34,.86);
  --pri:#5B8CFF; --priS:#1E2A48; --sobrePri:#1C1E22;
  --exito:#4ADE80; --exitoS:#163323; --aviso:#F2C14E; --avisoS:#3A2E12;
  --destacado:#FB923C; --destacadoS:#3A2616;
  --sombra:0 3px 10px rgba(0,0,0,.25);
  --f-dinero:#4CC56F; --f-compartir:#5EA3FF; --f-tiempo:#FFA048; --f-documentos:#8C9BFF;
  --f-cupones:#FF6B7D; --f-tarjeta:#B39DFF; --f-perfil:#A9B7C6; --f-cerca:#4DC3FF;
  --f-contacto:#3FD1BF; --f-archivos:#D9B27A; --f-notas:#FFD24D; --f-peligro:#FF7B6B;
  --f-ajustes:#B0BAC4; --f-estrella:#FFD24D;
  --pastel:18%;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--texto);line-height:1.6;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--pri);color:var(--sobrePri);padding:8px 14px;border-radius:var(--rBoton);z-index:50}
.saltar:focus{left:16px}

/* El idioma: un solo HTML con los dos textos; manda html[lang]. */
html[lang="en"] [data-es],html:not([lang="en"]) [data-en]{display:none!important}

/* Iconos de función: el cuadrito pastel de la app (<IconoF cuadrito/>). */
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cuadrito{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  color:var(--f);background:color-mix(in srgb,var(--f) var(--pastel),transparent)}
.f-dinero{--f:var(--f-dinero)}.f-compartir{--f:var(--f-compartir)}.f-tiempo{--f:var(--f-tiempo)}
.f-documentos{--f:var(--f-documentos)}.f-cupones{--f:var(--f-cupones)}.f-tarjeta{--f:var(--f-tarjeta)}
.f-perfil{--f:var(--f-perfil)}.f-cerca{--f:var(--f-cerca)}.f-contacto{--f:var(--f-contacto)}
.f-archivos{--f:var(--f-archivos)}.f-notas{--f:var(--f-notas)}.f-peligro{--f:var(--f-peligro)}
.f-ajustes{--f:var(--f-ajustes)}.f-estrella{--f:var(--f-estrella)}

/* La barra */
.barra{position:sticky;top:0;z-index:30;background:var(--vidrio);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--borde)}
.barra .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.marca{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:3px;font-size:17px}
.marca img{width:28px;height:28px;border-radius:8px}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{font-size:14px;color:var(--sec);transition:color var(--rapido)}
.nav a:hover{color:var(--texto)}
.ajustes{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav+.ajustes{margin-left:16px}
.idioma{display:flex;border:1px solid var(--borde);border-radius:999px;overflow:hidden}
.idioma button{border:0;background:none;font-size:12px;font-weight:700;letter-spacing:.5px;padding:7px 12px;color:var(--sec)}
.idioma button[aria-pressed="true"]{background:var(--pri);color:var(--sobrePri)}
.tema{border:1px solid var(--borde);background:none;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;color:var(--sec)}
.tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:none}:root[data-theme="dark"] .tema .luna{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tema .sol{display:none}:root:not([data-theme="light"]) .tema .luna{display:block}}
@media (max-width:900px){.nav{display:none}}

/* Botones (Pulsable: se hunden al toque y vuelven) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--rBoton);
  padding:12px 18px;font-weight:700;font-size:15px;border:1px solid transparent;
  transition:transform var(--toque) ease-out,box-shadow var(--rapido),background var(--rapido)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--pri);color:var(--sobrePri)}
.btn.linea{background:var(--fondo);border-color:var(--borde);color:var(--texto)}
.btn.linea:hover{background:var(--suave)}
.tienda{background:#111318;color:#fff;border-radius:var(--rBoton);padding:9px 16px 9px 14px;display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.18);transition:transform var(--toque) ease-out}
.tienda:active{transform:scale(.97)}
.tienda svg{width:24px;height:24px;fill:currentColor}
.tienda small{display:block;font-size:10.5px;line-height:1.2;opacity:.85}
.tienda strong{display:block;font-size:16px;line-height:1.2;font-weight:700}
.tiendas{display:flex;flex-wrap:wrap;gap:12px}

/* La portada */
.hero{padding:40px 0 24px}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.kicker{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--pri)}
h1{font-size:clamp(32px,7.4vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.8px;margin-top:10px}
.lead{font-size:16px;color:var(--sec);margin-top:14px;max-width:560px}
.hero .tiendas{margin-top:22px}
.nota{font-size:13px;color:var(--sec);margin-top:12px}
@media (min-width:900px){.lead{font-size:18px}.hero{padding:64px 0 40px}.hero .wrap{grid-template-columns:1.1fr .9fr;gap:48px}}

/* Las funciones en chips de color */
.funciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px 6px 8px;font-size:13px;font-weight:600;
  color:var(--texto);background:color-mix(in srgb,var(--f) var(--pastel),transparent);transition:transform var(--toque)}
.chip .ico{width:16px;height:16px;color:var(--f)}
.chip:active{transform:scale(.97)}

/* EL TELÉFONO: las pantallas reales de la app, en secuencia */
.telefono{display:flex;flex-direction:column;align-items:center;gap:14px}
.marco{position:relative;width:min(300px,78vw);aspect-ratio:720/1564;border-radius:44px;padding:10px;background:#0E0F12;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 24px 48px rgba(17,19,24,.22)}
.pantalla{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--suave)}
.pantalla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;
  transform:translateX(6%) scale(.985);transition:opacity var(--momento) cubic-bezier(.2,.8,.2,1),transform var(--momento) cubic-bezier(.2,.8,.2,1)}
.pantalla img.activa{opacity:1;transform:none}
.pantalla img.sale{opacity:0;transform:translateX(-6%) scale(.985)}
.isla{position:absolute;top:18px;left:50%;width:30%;height:22px;margin-left:-15%;border-radius:999px;background:#0E0F12;z-index:2}
.pie-tel{max-width:320px;text-align:center;min-height:44px}
.pie-tel strong{display:block;font-size:15px}
.pie-tel span{font-size:13px;color:var(--sec)}
.mandos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:340px}
.play{width:40px;height:40px;border-radius:999px;border:1px solid var(--borde);background:var(--fondo);display:grid;place-items:center;color:var(--texto);flex:none}
.play .pausa{display:none}.play[aria-pressed="true"] .pausa{display:block}.play[aria-pressed="true"] .reproducir{display:none}
.puntos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.puntos button{width:28px;height:28px;border:0;background:none;display:grid;place-items:center;border-radius:999px}
.puntos button::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--mudo);opacity:.45;transition:all var(--medio)}
.puntos button[aria-current="true"]::after{width:20px;background:var(--pri);opacity:1}

/* Secciones */
section{padding:48px 0;border-top:1px solid var(--borde)}
.encabezado{max-width:720px}
.seccion-kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--sec)}
h2{font-size:clamp(26px,5vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.4px;margin-top:10px}
.bajada{font-size:16px;color:var(--sec);margin-top:10px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:24px}
.tarjeta{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);padding:18px;box-shadow:var(--sombra);
  display:flex;gap:14px;align-items:flex-start;transition:transform var(--rapido) ease-out,box-shadow var(--rapido)}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombraAlta)}
.tarjeta h3{font-size:16px;font-weight:700;line-height:1.35}
.tarjeta p{font-size:14.5px;color:var(--sec);margin-top:4px}
.dos{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
@media (min-width:860px){.dos{grid-template-columns:1fr 1fr}}
.producto{border-radius:20px;padding:22px;border:1px solid var(--borde);background:
  linear-gradient(160deg,color-mix(in srgb,var(--f) var(--pastel),transparent),transparent 70%);box-shadow:var(--sombra)}
.producto .nombre{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:1.5px}
.producto h3{font-size:22px;line-height:1.25;margin-top:12px}
.producto p{color:var(--sec);margin-top:8px;font-size:15px}
.lista{display:grid;gap:8px;margin-top:14px;list-style:none}
.lista li{display:flex;gap:10px;font-size:14.5px;color:var(--sec)}
.lista li .ico{width:18px;height:18px;margin-top:3px;color:var(--exito)}
.aviso-pro{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--suave);font-size:14px;color:var(--sec)}
.aviso-pro .ico{color:var(--pri);margin-top:2px}
.pro{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--pri);background:var(--priS);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}

/* Office: la retícula de herramientas, como en Mi NIMU */
.office{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:24px}
.herr{border:1px solid var(--borde);border-radius:var(--r);padding:14px;background:var(--fondo);display:flex;flex-direction:column;gap:10px;
  transition:transform var(--rapido) ease-out,box-shadow var(--rapido)}
.herr:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.herr strong{font-size:14.5px;line-height:1.3}
.herr>span:last-child{font-size:13px;color:var(--sec);line-height:1.4}

/* Planes, sin cifras: los precios viven en las tiendas (ley 82) */
.planes{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
@media (min-width:860px){.planes{grid-template-columns:repeat(3,1fr)}}
.plan{border:1px solid var(--borde);border-radius:20px;padding:22px;background:var(--fondo);box-shadow:var(--sombra)}
.plan.fuerte{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri) inset,var(--sombra)}
.plan h3{font-size:18px}
.plan .quien{font-size:13px;color:var(--sec);margin-top:2px}
.plan .precio{margin-top:12px;font-weight:700;font-size:15px;color:var(--pri)}

/* Preguntas */
.faq{max-width:780px;margin-top:20px}
details{border:1px solid var(--borde);border-radius:var(--r);padding:16px 18px;background:var(--fondo)}
details+details{margin-top:10px}
summary{font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--mudo);font-weight:400;flex:none;transition:transform var(--rapido)}
details[open] summary::after{transform:rotate(45deg)}
details p{font-size:15px;color:var(--sec);margin-top:10px}

/* Cierre y pie */
.cierre{text-align:center}
.cierre .tiendas{justify-content:center;margin-top:20px}
.cierre .bajada{margin-left:auto;margin-right:auto;max-width:560px}
footer{border-top:1px solid var(--borde);padding:32px 0 40px;font-size:13px;color:var(--sec)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--sec)}
footer a:hover{color:var(--texto)}

/* Entrada de secciones: suben una vez al verse (320 ms), nunca en bucle. */
.js .aparece{opacity:0;transform:translateY(12px);transition:opacity var(--medio) ease-out,transform var(--medio) ease-out}
.js .aparece.visto{opacity:1;transform:none}

/* Reducir movimiento: nada se anima; el teléfono queda quieto. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .aparece{opacity:1;transform:none}
  .pantalla img{transform:none}
}

/* Páginas de texto (soporte) */
.texto{max-width:760px;padding-top:32px;padding-bottom:48px}
.texto h1{font-size:clamp(28px,6vw,40px)}
.texto h2{font-size:22px;margin-top:32px}
.texto p,.texto li{color:var(--sec);margin-top:10px}
.texto ul{padding-left:20px}
.texto a{color:var(--pri);font-weight:600}
.contacto{margin-top:20px;border:1px solid var(--borde);border-radius:var(--r);padding:18px;display:flex;gap:14px;align-items:center;background:var(--fondo);box-shadow:var(--sombra)}
.contacto a{word-break:break-all}