/* Tokens visuales de Kunturo. Mismos valores que apps/app/constants/tema.ts: si cambias uno aquí, cámbialo allá. */
:root{
  /* Paleta Kunturo (docs/marca/variables.css). Los nombres viejos se conservan para no tocar cada regla. */
  --tinta:#0A2230; --texto-2:#0A2B36; --gris:#5B6470; --azul:#063B4A; --azul-osc:#0A2B36; --celeste:#E6FAF7; --celeste-2:#C5EAE5;
  --fondo:#FBF6EC; --sol:#0A8D80; --acento:#0A8D80; --acento-osc:#19D3C5; --aviso:#9a4b00; --aviso-fondo:#fff3df;
  --borde:rgba(10,34,48,.12); --borde-2:rgba(10,34,48,.24);
  --panel:#063B4A; --claro:#FBF6EC; --blanco:#fff; --wa:#25d366; --wa-tinta:#0b2e1a;
  --titulos:'Bricolage Grotesque',system-ui,sans-serif;
  --cuerpo:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --radio-s:10px; --radio-m:14px; --radio-l:16px;
  --sombra:0 4px 10px rgba(10,34,48,.06);
  --ancho:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--cuerpo);color:var(--tinta);background:var(--blanco);line-height:1.45}
h1,h2,h3,p,ol{margin:0}
a{color:var(--azul)}
a:hover{color:var(--azul-osc)}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.saltar:focus{left:8px;color:#fff}
.mascota{width:40px;height:40px;flex:none;border-radius:50%}
.mascota-grande{width:72px;height:72px}

/* Cabecera */
.cabecera{max-width:var(--ancho);margin:0 auto;padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.marca:hover{color:var(--tinta)}
.marca .logo{display:block;height:42px;width:auto}
.logo-vertical{display:block;height:100px;width:auto;margin:0 auto}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;font-size:16px}
.menu a{text-decoration:none;padding:10px 4px;font-weight:600}
.acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;text-align:center;text-decoration:none;padding:12px 18px;border-radius:var(--radio-m);font-weight:700;font-family:inherit;font-size:16px;border:1px solid transparent;cursor:pointer}
.boton-borde{border-color:var(--borde-2);color:var(--tinta);background:var(--blanco)}
.boton-borde:hover{color:var(--tinta);background:var(--fondo)}
.boton-azul{background:var(--azul);color:#fff}
.boton-azul:hover{background:var(--azul-osc);color:#fff}
.boton-grande{padding:16px 24px;font-size:18px}
.boton-celeste{background:var(--celeste);color:var(--azul)}
.boton-celeste:hover{background:var(--celeste-2);color:var(--azul-osc)}
.boton-inactivo{display:inline-flex;align-items:center;justify-content:center;min-height:50px;background:var(--fondo);color:var(--gris);border:1px solid var(--borde);padding:12px 20px;border-radius:var(--radio-m);font-weight:600}
.fila-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Hero: el mensaje central y la conversación que lo demuestra */
.hero{max-width:var(--ancho);margin:0 auto;padding-block:32px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:center}
.hero-texto{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.sobretitulo{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
h1{font-family:var(--titulos);font-weight:800;font-size:clamp(32px,5.6vw,56px);line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word;text-wrap:balance;max-width:15ch}
h1 em{font-style:normal;color:var(--acento)}
.entradilla{font-size:clamp(18px,2.4vw,20px);line-height:1.5;color:var(--texto-2);max-width:580px;text-wrap:pretty}
.nota{font-size:14px;color:var(--gris);text-align:center;max-width:580px;margin:0 auto;text-wrap:pretty}
.intro{font-size:18px;color:var(--texto-2);text-align:center;max-width:620px;margin:0 auto;text-wrap:pretty}
.boton-wa{background:var(--wa);color:var(--wa-tinta);gap:10px}
.boton-wa:hover{background:#1fbd5b;color:var(--wa-tinta)}
.boton-wa svg{width:22px;height:22px;flex:none}
.boton-oscuro{background:var(--tinta);color:#fff}
.boton-oscuro:hover{background:var(--panel);color:#fff}

/* Conversación de ejemplo */
.hero-movil{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.telefono{width:350px;max-width:100%;border-radius:36px;background:var(--tinta);padding:10px;box-shadow:0 30px 60px rgba(12,26,58,.28)}
.chat{border-radius:28px;background:var(--fondo);overflow:hidden;display:flex;flex-direction:column}
.chat-cab{background:var(--azul);color:#fff;display:flex;align-items:center;gap:10px;padding:16px 16px 12px}
.chat-cab .mascota{width:34px;height:34px;border-radius:50%}
.chat-cab strong{font-size:16px;display:block}
.chat-cab span{font-size:12px;color:var(--celeste)}
.chat-cuerpo{display:flex;flex-direction:column;gap:10px;padding:16px 12px 18px;font-size:14px;line-height:1.4}
.globo{max-width:86%;border-radius:14px;padding:9px 12px;box-shadow:0 1px 1px rgba(12,26,58,.08)}
.globo-yo{align-self:flex-end;background:#d9f7e3;border-bottom-right-radius:4px}
.globo-kunturo{align-self:flex-start;background:var(--blanco);border-bottom-left-radius:4px}
.globo .hora{display:block;text-align:right;font-size:11px;color:var(--gris);margin-top:2px;font-variant-numeric:tabular-nums}
.globo b{font-variant-numeric:tabular-nums}
.hecho{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--azul);background:var(--celeste);border-radius:999px;padding:3px 9px;margin-bottom:5px}
.hecho svg{width:12px;height:12px}
.dia{align-self:center;font-size:11px;font-weight:700;color:var(--gris);background:var(--blanco);border-radius:8px;padding:3px 10px}

/* Secciones */
.seccion{padding-block:64px}
.seccion-fondo{background:var(--fondo);padding-block:64px}
.seccion-oscura{background:var(--tinta);color:#fff;padding-block:64px}
.bloque{max-width:var(--ancho);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:28px}
h2{font-family:var(--titulos);font-weight:800;font-size:clamp(24px,3.8vw,34px);text-align:center;line-height:1.15;text-wrap:balance}
h3{font-family:var(--cuerpo);font-weight:800;font-size:20px;line-height:1.2;text-wrap:balance}
.rejilla{display:grid;gap:16px;width:100%}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rejilla-planes{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* Resultados: qué entrega Kunturo y cuándo lo da por hecho */
.resultado{background:var(--blanco);border-radius:var(--radio-l);padding:24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;box-shadow:var(--sombra);min-width:0}
.resultado p{color:var(--texto-2);text-wrap:pretty}
.glifo{width:52px;height:52px;border-radius:16px;background:var(--celeste);display:flex;align-items:center;justify-content:center;color:var(--azul)}
.glifo svg{width:26px;height:26px}
.cuenta{margin-top:auto;width:100%;border-top:1px dashed var(--borde-2);padding-top:12px;font-size:14px;color:var(--tinta)}
.cuenta b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);margin-bottom:2px}
.pronto{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aviso);background:var(--aviso-fondo);border-radius:999px;padding:3px 10px}
.tambien{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tambien span{background:var(--blanco);border:1px solid var(--borde);border-radius:999px;padding:8px 14px;font-weight:600;font-size:15px}
.tambien .pronto-chip{border-style:dashed;color:var(--gris);font-weight:600}

/* Cómo funciona */
.pasos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.pasos li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 12px}
.pasos strong{font-size:18px}
.pasos li>span:last-child{color:var(--texto-2);text-wrap:pretty}
.paso-n{width:44px;height:44px;border-radius:50%;background:var(--azul);color:#fff;font-family:var(--titulos);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.dos-salidas{background:var(--aviso-fondo);border:1px solid var(--sol);border-radius:var(--radio-l);padding:16px 20px;text-align:center;max-width:640px;margin:0 auto;color:var(--tinta)}

/* Precios */
.plan{position:relative;background:var(--panel);border-radius:var(--radio-l);padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0}
.plan strong{font-size:20px}
.plan .cifra{font-family:var(--titulos);font-size:30px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.plan .cifra small{font-size:16px;font-weight:400}
.plan .cifra .lista{font-size:18px;font-weight:400;opacity:.7}
.plan .promo{font-size:14px;font-weight:600}
.plan p{color:var(--claro);text-wrap:pretty}
.plan-destacado{background:var(--sol);color:var(--tinta)}
.plan-destacado .cifra,.plan-destacado p{color:var(--tinta)}
.plan-marca{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--tinta);color:#fff;border-radius:999px;padding:4px 10px}
.plan .pronto{background:var(--tinta);color:var(--sol)}
.pie-precios{text-align:center;color:var(--claro);font-size:14px;text-wrap:pretty}

/* Lo que Kunturo cuida */
.cuida{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.cuida div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px}
.cuida strong{font-size:17px}
.cuida span{color:var(--texto-2);text-wrap:pretty}

.cierre{max-width:var(--ancho);margin:0 auto;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}

/* Pie */
.pie{border-top:1px solid var(--borde)}
.pie-dentro{max-width:var(--ancho);margin:0 auto;padding-block:28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:14px;color:var(--gris)}
.pie-enlaces{display:flex;gap:20px}
.pie-enlaces a{padding:8px 0}

/* Entrar, términos y privacidad */
.entrar{min-height:100vh;background:var(--fondo);display:flex;align-items:center;justify-content:center;padding:32px 16px}
.entrar-caja{width:100%;max-width:390px;display:flex;flex-direction:column;gap:14px}
.entrar-cab{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:12px}
.entrar-cab .mascota{width:72px;height:72px}
.entrar-cab h1{font-size:26px;letter-spacing:0;line-height:1.2;max-width:none}
.entrar-cab p{color:var(--gris)}
.entrar form{display:flex;flex-direction:column;gap:14px}
.entrar label{font-weight:600;margin-top:6px;text-align:center}
.entrar input{min-height:50px;padding:14px 16px;border-radius:var(--radio-m);border:1px solid var(--borde-2);font-size:16px;font-family:inherit;background:var(--blanco);color:var(--tinta);width:100%;text-align:center}
.entrar input:focus-visible{outline:3px solid var(--sol);outline-offset:2px}
.entrar .boton{width:100%;padding:15px;font-size:16px}
.b-wa{background:var(--wa);color:var(--wa-tinta);font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}
.b-wa:hover{background:#1fbd5b;color:var(--wa-tinta)}
.b-apple{background:#000;color:#fff;padding:14px}
.b-apple:hover{background:#222;color:#fff}
.b-google{background:var(--blanco);color:var(--tinta);border-color:var(--borde);padding:14px}
.b-google:hover{background:var(--fondo);color:var(--tinta)}
.separador{display:flex;align-items:center;gap:10px;color:var(--gris);font-size:14px;margin:6px 0}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--borde)}
.legal{text-align:center;font-size:13px;color:var(--gris);line-height:1.5;margin-top:18px}
.volver{text-align:center;font-size:14px}

@media (prefers-reduced-motion:no-preference){.boton{transition:background-color .15s}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.pie-precios a{color:inherit}
.resultado .pronto{margin-top:-4px}
.pronto-centro{align-self:center}