:root{
  --crema:#FBF8F3; --blanco:#FFFFFF; --cielo:#E3F1F6; --cielo2:#CFE6EF; --azul:#5E9DBD; --azul-osc:#3F7896;
  --turquesa:#6BB5BE; --turquesa-cl:#BFE3E6; --salvia:#9DBB97; --salvia-cl:#E5EFE2; --arena:#F3ECE1;
  --texto:#2C3C44; --suave:#566871; --linea:#E5E9EA; --aviso:#FFF6E5; --aviso-borde:#EBCB8B;
  --radio:22px; --sombra:0 6px 24px rgba(60,100,120,.08), 0 1px 3px rgba(60,100,120,.06);
  --fuente:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --titulos:"Fraunces",Georgia,"Times New Roman",serif;
  --max:1120px; --nav-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);font-size:18px;line-height:1.65;color:var(--texto);background:var(--crema);min-height:100vh}
img,svg{max-width:100%}
a{color:var(--azul-osc);text-underline-offset:3px}
h1,h2,h3{font-family:var(--titulos);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#22343C}
h1{font-size:clamp(2rem,5.5vw,3.4rem);margin:.2em 0 .4em}
h2{font-size:clamp(1.45rem,3.4vw,2.1rem);margin:1.6em 0 .6em}
h3{font-size:1.2rem;margin:1.3em 0 .4em}
p{margin:.5em 0 1em}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:200}
.saltar:focus{left:8px}
.contenedor{max-width:var(--max);margin:0 auto;padding:0 20px}
.angosto{max-width:760px;margin:0 auto}
main{padding-bottom:calc(var(--nav-h) + 90px)}
@media(min-width:900px){main{padding-bottom:60px}}

/* ---- Navegación ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.04)}
.topbar .contenedor{display:flex;align-items:center;justify-content:space-between;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);font-weight:800;letter-spacing:.06em;font-size:.95rem}
.marca svg{width:34px;height:34px}
.nav-escritorio{display:none;gap:4px}
.nav-escritorio a{text-decoration:none;color:var(--suave);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.95rem}
.nav-escritorio a:hover{background:var(--cielo)}
.nav-escritorio a[aria-current="page"]{background:var(--cielo2);color:var(--azul-osc)}
@media(min-width:900px){.nav-escritorio{display:flex}.nav-movil{display:none!important}}
.nav-movil{position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--linea);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.nav-movil a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--suave);font-size:.72rem;font-weight:700;padding:6px 0;border-radius:14px;min-height:52px;justify-content:center}
.nav-movil a svg{width:24px;height:24px}
.nav-movil a[aria-current="page"]{color:var(--azul-osc);background:var(--cielo)}
.nav-movil a.calma-tab{color:#2f7a83}

/* ---- Botón flotante ---- */
.flotante{position:fixed;right:16px;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#7CC2C9,#5E9DBD);color:#fff;text-decoration:none;font-weight:800;font-size:.86rem;letter-spacing:.04em;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:0 10px 26px rgba(70,130,150,.35)}
.flotante.oculto{opacity:0;pointer-events:none;transform:translateY(10px)}
.flotante{transition:opacity .4s, transform .4s}
.flotante .punto{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center}
.flotante .punto i{display:block;width:10px;height:10px;border-radius:50%;background:#fff;animation:latir 6s ease-in-out infinite}
@media(min-width:900px){.flotante{bottom:24px;right:24px}}
@keyframes latir{0%,100%{transform:scale(.7)}40%{transform:scale(1.15)}}
body.modo-calma .flotante,body.modo-calma .nav-movil,body.modo-calma .topbar,body.modo-calma footer{display:none}
body.modo-calma main{padding-bottom:40px}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;font-size:1rem;letter-spacing:.02em;border:0;border-radius:999px;padding:15px 26px;min-height:52px;cursor:pointer;text-decoration:none;transition:transform .25s ease, box-shadow .25s ease, background .25s}
.btn:hover{transform:translateY(-1px)}
.btn-primario{background:var(--azul);color:#fff;box-shadow:0 8px 20px rgba(94,157,189,.3)}
.btn-primario:hover{background:var(--azul-osc)}
.btn-calma{background:linear-gradient(135deg,#86CBD0,#62AAB8);color:#fff;box-shadow:0 8px 22px rgba(98,170,184,.35)}
.btn-suave{background:#fff;color:var(--azul-osc);box-shadow:var(--sombra)}
.btn-linea{background:transparent;color:var(--azul-osc);border:2px solid var(--cielo2)}
.btn-chico{padding:9px 16px;min-height:44px;font-size:.92rem;white-space:nowrap}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-grande{width:100%;font-size:1.06rem;padding:20px 24px;border-radius:26px}
.fila-botones{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Hero cielo ---- */
.cielo{position:relative;overflow:hidden;background:linear-gradient(180deg,#9FCDE0 0%,#BFE0EC 38%,#DDEFF5 70%,#EEF6F8 100%);padding:60px 0 210px;margin-top:-1px}
@media(min-width:900px){.cielo{padding:90px 0 260px}}
.sol{position:absolute;top:-80px;right:12%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0,rgba(255,255,255,.75) 14%,rgba(255,250,235,.35) 32%,rgba(255,255,255,0) 62%);pointer-events:none}
.nubes{position:absolute;left:0;bottom:-2px;width:100%;height:260px;pointer-events:none}
@media(min-width:900px){.nubes{height:330px}}
.nube{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0,rgba(255,255,255,.85) 40%,rgba(255,255,255,0) 70%);filter:blur(2px)}
.nubes .capa{animation:derivar 80s ease-in-out infinite alternate}
.nubes .capa.b{animation-duration:140s;animation-direction:alternate-reverse;opacity:.9}
@keyframes derivar{from{transform:translateX(-25px)}to{transform:translateX(25px)}}
.cielo .contenedor{position:relative;z-index:2}
.cielo h1{max-width:12ch;color:#1F3640}
.cielo .bajada{max-width:58ch;font-size:1.12rem;color:#2D4650}
.hero-botones{display:grid;gap:12px;margin-top:26px;max-width:560px}
@media(min-width:640px){.hero-botones{grid-template-columns:1fr 1fr}.hero-botones .btn-grande{grid-column:1/-1}}
.etiqueta{display:inline-block;line-height:1.4;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-osc);background:rgba(255,255,255,.6);padding:6px 12px;border-radius:999px}

/* ---- Tarjetas y grillas ---- */
.seccion{padding:30px 0}
.tarjeta{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:24px}
.tarjeta h3{margin-top:0}
.grilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grilla-2{display:grid;gap:16px}
@media(min-width:760px){.grilla-2{grid-template-columns:1fr 1fr}}
a.tarjeta{display:block;text-decoration:none;color:inherit;transition:transform .3s ease, box-shadow .3s ease}
a.tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(60,100,120,.12)}
.tarjeta .meta{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--salvia)}
.tarjeta p{color:var(--suave);margin-bottom:0}
.icono-circ{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--cielo);color:var(--azul-osc);margin-bottom:12px}
.icono-circ svg{width:24px;height:24px}
.icono-circ.salvia{background:var(--salvia-cl);color:#5D8257}
.icono-circ.arena{background:var(--arena);color:#9B7A4C}

.frase-rotativa{position:relative;min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--titulos);font-size:clamp(1.3rem,3.6vw,1.9rem);color:#2E4C59;padding:30px 24px;background:linear-gradient(135deg,#F0F8FA,#F5F1E9);border-radius:28px}
.frase-rotativa span{transition:opacity 1.2s ease}
.miles{background:linear-gradient(135deg,var(--salvia-cl),#F2F7F1);border-radius:30px;padding:34px 26px}
.cita{font-family:var(--titulos);font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.45;text-align:center;color:#2C4A57;padding:40px 20px;max-width:900px;margin:0 auto}

/* ---- Avisos ---- */
.aviso{background:var(--aviso);border:1px solid var(--aviso-borde);border-radius:18px;padding:16px 18px;font-size:.95rem;color:#5A4A2A}
.aviso strong{color:#4A3B1C}
.aviso-medico{border-left:6px solid #D9A94E}
.nota-ficticia{background:#EEF4F7;border-radius:14px;padding:10px 14px;font-size:.88rem;color:var(--suave)}

/* ---- Artículos ---- */
.migas{font-size:.9rem;color:var(--suave);margin:18px 0 0}
.migas a{color:var(--suave)}
.articulo h2{font-size:1.35rem;margin-top:1.8em}
.articulo .resumen{font-size:1.15rem;color:var(--suave)}
.bloque{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:22px 24px;margin:18px 0}
.bloque h2{margin-top:0;font-size:1.15rem;font-family:var(--fuente);font-weight:800;color:var(--azul-osc);display:flex;gap:10px;align-items:center}
.bloque h2 .num{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--cielo);font-size:.9rem}
.bloque ul{padding-left:1.2em;margin:0}
.frase-destacada{background:linear-gradient(135deg,#E6F3F5,#EEF4EA);border-radius:var(--radio);padding:26px;text-align:center;font-family:var(--titulos);font-size:1.4rem;color:#2C4A57;margin:22px 0}
.fuentes{font-size:.88rem;color:var(--suave)}
.fuentes li{margin:.3em 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9rem;font-weight:700;border:2px solid var(--cielo2);background:#fff;color:var(--azul-osc);border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.chip[aria-pressed="true"],.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.buscador{display:flex;gap:10px;align-items:center;background:#fff;border-radius:999px;box-shadow:var(--sombra);padding:6px 6px 6px 18px}
.buscador input{flex:1;border:0;font:inherit;font-size:1.05rem;padding:10px 4px;background:transparent;min-width:0}
.buscador input:focus{outline:none}
.buscador:focus-within{box-shadow:0 0 0 3px var(--cielo2),var(--sombra)}
.fav{background:none;border:2px solid var(--cielo2);border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;color:var(--azul-osc);cursor:pointer}
.fav[aria-pressed="true"]{background:var(--salvia-cl);border-color:var(--salvia);color:#3F6A39}

/* ---- Calma ---- */
.calma{min-height:100vh;background:radial-gradient(ellipse at top,#EAF6F8 0,#F8FBFB 45%,var(--crema) 100%);padding:16px 0 40px}
.calma-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0 10px}
.calma .bienvenida{text-align:center;font-family:var(--titulos);font-size:clamp(1.35rem,4vw,1.9rem);color:#2C4A57;max-width:22ch;margin:20px auto 8px}
.calma-menu{display:grid;gap:14px;max-width:520px;margin:24px auto}
.calma-menu a{display:flex;align-items:center;gap:16px;background:#fff;border-radius:24px;padding:20px;box-shadow:var(--sombra);text-decoration:none;color:var(--texto);font-weight:700;font-size:1.08rem;min-height:84px}
.calma-menu a small{display:block;font-weight:500;color:var(--suave);font-size:.92rem}
.mensaje-calma{text-align:center;color:var(--suave);font-size:1.05rem;min-height:3.2em;max-width:34ch;margin:20px auto;transition:opacity 1.2s}
.respira{display:flex;flex-direction:column;align-items:center;text-align:center}
.anillo{position:relative;width:min(78vw,340px);aspect-ratio:1;display:grid;place-items:center;margin:20px auto}
.anillo .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(107,181,190,.18) 0,rgba(107,181,190,.06) 55%,rgba(107,181,190,0) 70%)}
.anillo .onda{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:rgba(150,205,212,.28);transform:scale(.72)}
.anillo .onda.o2{width:56%;background:rgba(120,190,200,.35)}
.anillo .nucleo{position:relative;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9AD3D8,#5FAAB6);box-shadow:0 0 0 10px rgba(255,255,255,.55),0 10px 40px rgba(95,170,182,.45);display:grid;place-items:center;color:#fff;transform:scale(.72)}
.anillo .nucleo .accion{font-size:.8rem;font-weight:800;letter-spacing:.2em}
.anillo .nucleo .seg{font-size:2.6rem;font-weight:300;line-height:1}
.progreso{width:min(80vw,360px);height:6px;background:var(--linea);border-radius:99px;overflow:hidden;margin:10px auto}
.progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--turquesa),var(--azul));transition:width 1s linear}
.tiempo-restante{color:var(--suave);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.selector-min{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 18px}
.paso-5{background:#fff;border-radius:28px;box-shadow:var(--sombra);padding:28px;max-width:560px;margin:20px auto;text-align:center}
.paso-5 .grande{font-family:var(--titulos);font-size:4rem;color:var(--turquesa);line-height:1}
.puntos{display:flex;gap:10px;justify-content:center;margin:18px 0}
.puntos button{width:44px;height:44px;border-radius:50%;border:2px solid var(--turquesa-cl);background:#fff;cursor:pointer;font:inherit;font-weight:800;color:var(--turquesa)}
.puntos button[aria-pressed="true"]{background:var(--turquesa);color:#fff;border-color:var(--turquesa)}
.pasos-indicador{display:flex;gap:6px;justify-content:center}
.pasos-indicador i{width:28px;height:6px;border-radius:9px;background:var(--linea)}
.pasos-indicador i.ok{background:var(--turquesa)}

/* ---- Formularios ---- */
label{font-weight:700;display:block;margin:14px 0 6px}
.ayuda-campo{font-weight:400;color:var(--suave);font-size:.88rem;display:block}
input[type=text],input[type=search],input[type=password],input[type=date],textarea,select{width:100%;font:inherit;font-size:1rem;border:2px solid var(--linea);border-radius:14px;padding:12px 14px;background:#fff;color:var(--texto)}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--azul)}
.opciones{display:grid;gap:8px}
.opcion{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--linea);border-radius:14px;padding:12px 14px;font-weight:600;cursor:pointer;margin:0}
.opcion input{margin-top:5px;width:20px;height:20px;accent-color:var(--azul)}
.estado-envio{margin-top:14px;font-weight:700}
.estado-envio.ok{color:#3F6A39}.estado-envio.error{color:#9A5B22}

/* ---- Tabs ---- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}

/* ---- Registro ---- */
.registro{border-left:4px solid var(--salvia);padding:4px 0 4px 16px;margin:16px 0}
.registro .fecha{font-size:.85rem;color:var(--suave);font-weight:700}
.registro dl{margin:6px 0}
.registro dt{font-weight:700;font-size:.9rem;color:var(--azul-osc)}
.registro dd{margin:0 0 6px}

/* ---- Pie ---- */
footer{background:#F1EEE7;margin-top:40px;padding:30px 0 calc(var(--nav-h) + 90px);font-size:.92rem;color:var(--suave)}
@media(min-width:900px){footer{padding-bottom:40px}}
footer a{color:var(--suave)}
.recuperacion-svg{width:100%;height:auto;background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:10px}
.vacio{text-align:center;color:var(--suave);padding:30px}
.cargando{text-align:center;padding:80px 20px;color:var(--suave)}
.entrar{animation:aparecer .6s ease both}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 90px);transform:translateX(-50%);background:#2C4A57;color:#fff;padding:12px 20px;border-radius:999px;z-index:100;font-weight:700;font-size:.95rem;box-shadow:var(--sombra)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}