/* Club de las Hormonas Indomables · estilos. Ver DESIGN.md. */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --fondo:#FDF5EE; --superficie:#FFFFFF; --suave:#F6E7EE; --ciruela:#57164F; --ciruela-osc:#3F0F3A;
  --tinta:#2E1A2C; --tinta-2:#5E4A5C; --coral:#F37B6A; --lila:#97689C; --linea:rgba(87,22,79,.16);
  --radio:20px; --ancho:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 1.0625rem/1.7 "Nunito",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--ciruela);text-underline-offset:3px;font-weight:700}
a:hover{color:var(--ciruela-osc)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
h1,h2,h3,.h3{font-family:"Fraunces",Georgia,serif;font-weight:700;line-height:1.15;color:var(--ciruela);margin:0 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.3em}
h3,.h3{font-size:1.35rem;margin-top:0}
p{margin:0 0 1em}
.saltar{position:absolute;left:-999px;top:0;background:var(--ciruela);color:#fff;padding:.6em 1em;z-index:10}
.saltar:focus{left:1rem}

.cab{background:rgba(253,245,238,.96);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:.55rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ciruela);font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem;line-height:1.1}
.marca strong{display:block;font-weight:700}
.marca img{border-radius:50%}
.cab ul{list-style:none;margin:0;padding:0;display:flex;gap:1.3rem;align-items:center}
.cab nav a{color:var(--tinta);text-decoration:none;font-weight:700;font-size:.97rem}
.cab nav a[aria-current=page]{color:var(--ciruela);border-bottom:2px solid var(--coral)}
.cab nav a.btn{color:#fff}
.menu{display:none}
.menu summary{cursor:pointer;list-style:none;font-weight:800;padding:.5em .9em;border:1px solid var(--linea);border-radius:999px;color:var(--ciruela)}
.menu summary::-webkit-details-marker{display:none}
@media (max-width:900px){
  .nav-escritorio{display:none}
  .menu{display:block;position:relative}
  .menu[open] nav{position:absolute;right:0;top:calc(100% + .5rem);background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:1rem 1.2rem;box-shadow:0 12px 30px rgba(87,22,79,.14);min-width:240px}
  .menu ul{flex-direction:column;align-items:flex-start;gap:.9rem}
}

.btn{display:inline-block;background:var(--ciruela);color:#fff;text-decoration:none;font-weight:800;padding:.9em 1.5em;border-radius:999px;border:2px solid var(--ciruela);line-height:1.25;transition:background .2s}
.btn:hover{background:var(--ciruela-osc);border-color:var(--ciruela-osc);color:#fff}
.btn-sec{background:transparent;color:var(--ciruela)}
.btn-sec:hover{background:var(--ciruela);color:#fff}
.btn-mini{padding:.55em 1.1em;font-size:.93rem}
.botones{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0 .6rem}
.mini{font-size:.9rem;color:var(--tinta-2)}

.bloque{max-width:var(--ancho);margin:0 auto;padding:3rem 1rem}
.bloque-suave{max-width:none;background:var(--suave)}
.bloque-suave>*{max-width:var(--ancho);margin-left:auto;margin-right:auto}
.estrecho{max-width:760px}
.estrecho-izq{max-width:760px}
.antetitulo{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:var(--ciruela);margin-bottom:.6rem}
.antetitulo::before{content:"♥";color:var(--coral);margin-right:.5em}
.entrada{font-size:1.18rem;color:var(--tinta-2)}
.heroe{max-width:var(--ancho);margin:0 auto;padding:2.5rem 1rem 3rem;display:grid;gap:2rem;align-items:center}
.heroe-logo img{width:min(100%,460px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(87,22,79,.18))}
.dos-col{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.heroe{grid-template-columns:1.2fr .8fr;padding-top:4rem}.dos-col{grid-template-columns:1.2fr .8fr}}

.rejilla{list-style:none;padding:0;margin:1.5rem auto;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem}
.codigo{background:var(--fondo);border:1px dashed var(--ciruela);border-radius:12px;padding:.5em .8em;display:inline-block}
.lista-check{list-style:none;padding:0}
.lista-check li{padding-left:1.7em;position:relative;margin-bottom:.55rem}
.lista-check li::before{content:"✓";position:absolute;left:0;color:var(--ciruela);font-weight:800}
.caja-destacada{background:var(--ciruela);color:#fff;border-radius:50%;aspect-ratio:1;max-width:320px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.5rem}
.caja-destacada p{margin:0;font-size:1.05rem}
.caja-destacada .cifra{font-family:"Fraunces",serif;font-size:5rem;line-height:1;color:#FFD9D3}
.pasos{padding-left:1.3rem}
.pasos li{margin-bottom:.6rem}
.faq details{border-bottom:1px solid var(--linea);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:800}
.faq details p{margin:.6rem 0 0}
.nota{font-size:.92rem;color:var(--tinta-2);border-left:4px solid var(--coral);padding-left:.9rem;margin-top:2rem}
.aviso-caja{background:var(--superficie);border:1px solid var(--linea);border-left:4px solid var(--coral);border-radius:12px;padding:1rem 1.2rem;font-size:.95rem}
.migas{font-size:.9rem;color:var(--tinta-2);margin-bottom:1rem}
.migas a{color:var(--tinta-2);font-weight:400}
.legal mark{background:#ffe08a;padding:0 .3em}

.pie{background:var(--ciruela);color:#F3E6F0;margin-top:3rem;padding:3rem 1rem 1.5rem}
.pie a{color:#fff}
.pie-in{max-width:var(--ancho);margin:0 auto;display:grid;gap:2rem}
@media (min-width:800px){.pie-in{grid-template-columns:1.4fr 1fr 1fr}}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.35rem}
.pie-marca{font-family:"Fraunces",serif;font-size:1.6rem;color:#fff;margin-bottom:.3rem}
.pie-tit{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:#FFD9D3}
.pie-aviso{max-width:var(--ancho);margin:1.2rem auto 0;font-size:.85rem;color:#E6D3E2}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.estrecho-izq{max-width:var(--ancho)!important}.estrecho-izq p{max-width:760px}

/* Portada tipo banner (nov 2026): fondo ciruela con círculos, como el banner de Nerea */
.banner{position:relative;overflow:hidden;background:var(--ciruela);color:#FDF5EE;text-align:center}
.banner::before,.banner::after{content:"";position:absolute;border-radius:50%;background:rgba(151,104,156,.28);pointer-events:none}
.banner::before{width:46vw;height:46vw;max-width:520px;max-height:520px;left:-14vw;top:-18vw}
.banner::after{width:40vw;height:40vw;max-width:460px;max-height:460px;right:-12vw;bottom:-16vw}
.banner-in{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:3rem 1.2rem 3.4rem}
.banner-sello{width:110px;height:110px;margin:0 auto 1.4rem;border-radius:50%}
.banner h1{color:#FDF5EE;font-size:clamp(2.3rem,6vw,3.8rem);margin-bottom:.35em}
.banner h1 .linea2{display:block;color:var(--coral)}
.banner-sub{font-size:clamp(1.1rem,2.2vw,1.3rem);font-weight:700;margin-bottom:1.2rem}
.banner-entrada{color:#EBDCE8;max-width:640px;margin:0 auto}
.banner .botones{justify-content:center}
.btn-claro{background:#FDF5EE;border-color:#FDF5EE;color:var(--ciruela)}
.btn-claro:hover{background:#fff;border-color:#fff;color:var(--ciruela-osc)}
.btn-borde{background:transparent;border-color:#FDF5EE;color:#FDF5EE}
.btn-borde:hover{background:#FDF5EE;border-color:#FDF5EE;color:var(--ciruela)}
.banner a:focus-visible{outline-color:#FFD9D3}

/* Cursos */
.rejilla-cursos{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1.2rem}
@media (min-width:800px){.rejilla-cursos{grid-template-columns:1fr 1fr}}
.tarjeta-curso{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:start}
.tarjeta-curso img{border-radius:12px}
.tarjeta-curso h3 a{text-decoration:none}
.precio{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.5rem;color:var(--ciruela);margin:.4rem 0}
.precio span{font-family:"Nunito",sans-serif;font-size:1rem;font-weight:700;color:var(--tinta-2)}
.curso,.bloque-in.curso{display:grid;gap:2rem;align-items:start}
.curso-portada img{width:min(100%,360px);margin:0 auto;border-radius:16px;box-shadow:0 18px 40px rgba(87,22,79,.18)}
@media (min-width:900px){.curso,.bloque-in.curso{grid-template-columns:360px 1fr;gap:3rem}}
.lema{font-style:italic;font-size:1.15rem;color:var(--tinta-2)}
.cita{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.3rem;color:var(--ciruela);border-left:4px solid var(--coral);padding-left:.9rem}
.centrado{text-align:center}.centrado .botones{justify-content:center}
.alumna .h3{margin-top:0}
.curso h2{margin-top:0}

/* Quién está detrás, con foto */
.quien{display:grid;gap:2rem;align-items:start}
.quien-foto img{width:min(100%,380px);margin:0 auto;border-radius:var(--radio)}
@media (min-width:900px){.quien{grid-template-columns:380px 1fr;gap:3rem}}
.quien h2{margin-top:0}

/* ===== Efectos del catálogo Cerebro Web (módulos 22-23), 8 nov 2026 ===== */
/* D10 · titulares sin huérfanas */
h1,h2,h3,.h3{text-wrap:balance}

/* E3 · empuje físico: el botón se hunde hacia su sombra al pulsarlo */
.btn{box-shadow:0 4px 0 0 rgba(63,15,58,.28);transition:background .2s,transform 75ms ease,box-shadow 75ms ease}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 rgba(63,15,58,.28)}

/* E5 · flecha que avanza en los botones de acción */
.flecha{display:inline-block;margin-left:.15em;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.btn:hover .flecha,.btn:focus-visible .flecha{transform:translateX(.3rem)}

/* D8 · subrayado coral desde el centro en el menú de escritorio */
.nav-escritorio a:not(.btn){position:relative}
.nav-escritorio a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:50%;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.nav-escritorio a:not(.btn):hover::after{transform:scaleX(1)}
.nav-escritorio a[aria-current=page]{border-bottom:0}
.nav-escritorio a[aria-current=page]::after{transform:scaleX(1)}

/* I1 · acordeón de las preguntas frecuentes con altura automática */
.faq .cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.23,1,.32,1)}
.faq details[open] .cuerpo{grid-template-rows:1fr}
.faq .cuerpo>div{overflow:hidden}


/* Movimiento: solo si la persona no ha pedido reducirlo */
@media (prefers-reduced-motion:no-preference){
  /* F9 · flotación suave del sello */
  .banner-sello{animation:flotar 6s ease-in-out infinite}
  /* D6 · el titular aparece palabra a palabra (corto: termina en ~0,55 s) */
  .aparece span[class^="p"]{display:inline-block;animation:aparece-palabra .35s cubic-bezier(.23,1,.32,1) both}
  .aparece .p2{animation-delay:40ms}.aparece .p3{animation-delay:80ms}.aparece .p4{animation-delay:120ms}
  .aparece .p5{animation-delay:160ms}.aparece .p6{animation-delay:200ms}
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes aparece-palabra{from{opacity:0;filter:blur(8px);transform:translateY(.35em) scale(.92)}to{opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Botón flotante de WhatsApp */
.wa-flotante{position:fixed;right:1.1rem;bottom:1.1rem;z-index:6;width:58px;height:58px;border-radius:50%;background:#1E7E45;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .2s}
.wa-flotante:hover{background:#17663A;transform:scale(1.06)}
.wa-flotante:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.wa-flotante svg{width:30px;height:30px;fill:#fff}