/* ============================================================
   Familia en Práctica · home
   Marca: morado #5E3B9E · amarillo #F5C542 · crema #FBF3E2
   Tipografía: Corben (display) · Grand Hotel (script) · Archivo (texto)
   ============================================================ */
:root{
  --morado:#5E3B9E; --morado-prof:#402568; --morado-clar:#8160C9;
  --amarillo:#F5C542; --amarillo-cl:#FBD96B;
  --crema:#FBF3E2; --crema-prof:#F1E6CC; --tinta:#3A2566;
  --display:'Corben', Georgia, 'Times New Roman', serif;
  --script:'Grand Hotel', 'Brush Script MT', cursive;
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --max:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--crema); color:var(--tinta); font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word}
/* textura de papel de la marca */
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
@media(min-width:760px){.wrap{padding:0 40px}}
:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px}
.saltar{position:absolute; left:-9999px; top:8px; z-index:200; background:var(--amarillo); color:var(--tinta);
  font:700 14px/1 var(--sans); padding:12px 16px; text-decoration:none}
.saltar:focus{left:8px}

/* ---------- barra superior ---------- */
.barra{position:sticky; top:0; z-index:50; background:var(--morado); color:var(--crema);
  border-bottom:2px solid var(--morado-prof)}
.barra .wrap{display:flex; align-items:center; gap:14px; min-height:64px}
.lockup{display:flex; flex-direction:column; text-decoration:none; margin-right:auto; padding:6px 0}
.lockup .l1{font:700 24px/.88 var(--display); color:var(--crema)}
.lockup .l2{font:700 13px/1 var(--display); color:var(--amarillo); margin-top:3px}
.barra nav{display:flex; align-items:center; gap:2px}
.barra nav a{text-decoration:none; font:600 14.5px/1 var(--sans); color:var(--crema); padding:12px 12px; opacity:.88}
.barra nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
.nav-d{display:none!important}
@media(min-width:780px){.nav-d{display:inline-block!important}}
.barra nav .nav-menu{opacity:1; background:var(--amarillo); color:var(--tinta); font-weight:700;
  border:2px solid var(--morado-prof); box-shadow:3px 3px 0 var(--morado-prof); padding:10px 15px; margin-left:8px}
.barra nav .nav-menu:hover{text-decoration:none}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  font:700 16px/1 var(--sans); letter-spacing:.005em; padding:17px 24px; min-height:56px;
  border:2px solid var(--morado-prof); transition:transform .12s ease, box-shadow .12s ease}
.btn.amarillo{background:var(--amarillo); color:var(--tinta); box-shadow:4px 4px 0 var(--morado-prof)}
.btn.morado{background:var(--morado); color:var(--crema); box-shadow:4px 4px 0 var(--morado-prof)}
.btn.linea{background:transparent; color:var(--crema); border-color:rgba(251,243,226,.75)}
.btn:hover{transform:translate(-1px,-1px)}
.btn.amarillo:hover,.btn.morado:hover{box-shadow:6px 6px 0 var(--morado-prof)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--morado-prof)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- hero con el emblema ---------- */
.hero{position:relative; overflow:hidden; background:var(--morado); color:var(--crema); text-align:center}
.hero::before{content:""; position:absolute; inset:0; opacity:.13;
  background-image:radial-gradient(rgba(251,243,226,.9) 1.3px, transparent 1.4px); background-size:22px 22px}
.hero-in{position:relative; max-width:920px; margin:0 auto; padding:30px 18px 54px}
.emblema{display:flex; flex-direction:column; align-items:center; font-weight:400; margin:0}
.emblema img{height:clamp(236px,66vw,410px); width:auto; margin-bottom:14px}
/* logotipo tipografico: "Familia" manda y "en practica" se acomoda justo debajo */
.em-title{display:block; font:700 clamp(48px,13.6vw,112px)/.8 var(--display); color:var(--crema); letter-spacing:-.012em}
.em-sub{display:block; font:700 clamp(28px,7.9vw,65px)/.92 var(--display); color:var(--crema); letter-spacing:-.006em}
.em-slogan{display:block; margin-top:.3em; font:400 clamp(18px,5.3vw,42px)/1.1 var(--script); color:var(--amarillo); white-space:nowrap}
.em-est{margin-top:20px; font:700 clamp(10.5px,2.7vw,13px)/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(251,243,226,.62)}
.hero-texto{max-width:36ch; margin:26px auto 0; font:400 17.5px/1.62 var(--sans); color:rgba(251,243,226,.9)}
.hero-cta{display:flex; flex-direction:column; gap:14px; max-width:380px; margin:28px auto 0}
@media(min-width:560px){.hero-cta{flex-direction:row; justify-content:center; max-width:none}}
.hero-url{margin-top:38px; font:600 clamp(9.5px,2.5vw,12px)/1.5 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(251,243,226,.5)}

/* ---------- estructura de secciones ---------- */
.seccion{padding:68px 0}
@media(min-width:760px){.seccion{padding:100px 0}}
.sec-tag{display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font:700 11.5px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--morado)}
.sec-tag .num{font:700 30px/1 var(--display); letter-spacing:0; color:var(--amarillo); -webkit-text-stroke:1.2px var(--morado)}
.sec-tag .linea{flex:1; min-width:24px; height:2px; opacity:.35;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 11px)}
.sec-tag.en-morado{color:var(--amarillo)}
.sec-tag.en-morado .num{-webkit-text-stroke:1.2px var(--crema)}
.titulo{font:700 clamp(33px,8.8vw,52px)/1.05 var(--display); color:var(--morado); letter-spacing:-.012em; text-wrap:balance}
.titulo em{font:400 1.14em/1 var(--script); font-style:normal}
.lead{margin-top:18px; max-width:50ch; font:400 17px/1.7 var(--sans); color:rgba(58,37,102,.86)}
.grid-2{display:grid; gap:36px; align-items:center}
@media(min-width:880px){.grid-2{grid-template-columns:1fr 1fr; gap:68px}}
.poster{width:100%; max-width:440px; justify-self:center; border:2px solid var(--morado); box-shadow:9px 9px 0 var(--amarillo)}

/* ---------- 01 · menús (recetario gratis) ---------- */
.menus{background:var(--crema)}
.menus .titulo em{color:var(--morado)}
.datos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px}
.datos li{background:var(--crema); border:2px solid var(--morado); box-shadow:3px 3px 0 var(--amarillo);
  padding:13px 6px 12px; text-align:center; font:600 12.5px/1.3 var(--sans); color:rgba(58,37,102,.78)}
.datos b{display:block; margin-bottom:5px; font:700 28px/1.05 var(--display); color:var(--morado)}
.checks{display:grid; gap:11px; margin-top:24px}
.checks li{display:flex; gap:11px; font:500 16px/1.45 var(--sans); color:var(--tinta)}
.checks li::before{content:"\2713"; flex:0 0 auto; font-weight:700; color:var(--morado)}
.menus .btn{margin-top:30px}
.nota{margin-top:14px; font:500 13.5px/1.45 var(--sans); color:rgba(58,37,102,.6)}

/* ---------- 02 · concepto ---------- */
.emblema-ilus{width:100%; max-width:460px; justify-self:center}
.pilares{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px}
.pilar{background:var(--crema); border:2px solid var(--morado); box-shadow:4px 4px 0 var(--amarillo); padding:15px 16px}
.pilar b{display:block; font:700 19px/1.15 var(--display); color:var(--morado)}
.pilar span{display:block; margin-top:5px; font:400 13.5px/1.45 var(--sans); color:rgba(58,37,102,.72)}

/* ---------- cursos ---------- */
.cursos{background:var(--crema-prof)}
.deslizar{margin-top:12px; font:600 13px/1.3 var(--sans); color:rgba(58,37,102,.6)}
@media(min-width:980px){.deslizar{display:none}}
.carrusel{display:flex; gap:18px; margin:28px -20px 0; padding:6px 20px 22px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.carrusel::-webkit-scrollbar{display:none}
.curso{flex:0 0 min(78vw,300px); scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--crema); border:2px solid var(--morado); box-shadow:6px 6px 0 var(--amarillo)}
.c-img{position:relative; margin:0; overflow:hidden; border-bottom:2px solid var(--morado)}
.c-img img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.c-mod{position:absolute; left:10px; top:10px; padding:6px 9px 5px; background:var(--crema); color:var(--morado);
  border:1.5px solid var(--morado); font:700 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
.c-cuerpo{display:flex; flex-direction:column; gap:4px; flex:1; padding:18px 20px 20px}
.curso h3{font:700 24px/1.1 var(--display); color:var(--morado); letter-spacing:-.01em}
.c-hook{font:400 23px/1.1 var(--script); color:var(--morado-clar)}
.c-desc{margin-top:8px; font:400 14.5px/1.55 var(--sans); color:rgba(58,37,102,.76)}
.c-link{margin-top:auto; padding-top:16px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font:700 15px/1.2 var(--sans); color:var(--morado); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.c-link svg{width:18px; height:18px; flex:0 0 auto}
@media(min-width:980px){
  .carrusel{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:44px 0 0; padding:0; overflow:visible}
  .curso{flex:none}
}

/* ---------- 02 · próximamente (amarillo) ---------- */
.proximo{background:var(--amarillo); overflow:hidden}
.proximo .sec-tag{color:var(--morado-prof)}
.proximo .sec-tag .num{color:var(--crema); -webkit-text-stroke:1.2px var(--morado-prof)}
.proximo .titulo{color:var(--morado-prof)}
.proximo .titulo em{color:var(--morado)}
.proximo .lead{color:rgba(64,37,104,.9)}
.proximo .nota{color:rgba(64,37,104,.72)}
.proximo .poster{position:relative; border-color:var(--morado-prof); box-shadow:9px 9px 0 var(--morado-prof)}
.sello{position:absolute; top:-20px; right:-10px; width:104px; height:104px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-10deg);
  background:var(--crema); border:3px solid var(--morado-prof); box-shadow:4px 4px 0 var(--morado-prof)}
.sello b{font:700 23px/.9 var(--display); color:var(--morado)}
.sello i{font:400 27px/.95 var(--script); font-style:normal; color:var(--morado-prof)}
.etiquetas{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.etiquetas span{border:2px solid var(--morado-prof); padding:8px 11px; font:700 12px/1 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; color:var(--morado-prof)}
.proximo .btn{margin-top:28px}

/* ---------- 05 · comunidad (morado) ---------- */
.comunidad{background:var(--morado); color:var(--crema)}
.comunidad .titulo{color:var(--crema)}
.comunidad .titulo em{color:var(--amarillo)}
.comunidad .lead{color:rgba(251,243,226,.88)}
.comunidad .poster{border-color:var(--crema); box-shadow:9px 9px 0 var(--amarillo)}
.comunidad .etiquetas span{border-color:rgba(251,243,226,.6); color:var(--crema)}
.comunidad .btn{margin-top:28px}

/* ---------- 05 · inscríbete ---------- */
.inscribete{text-align:center}
.inscribete .sec-tag{justify-content:center}
.inscribete .lead{margin-left:auto; margin-right:auto}
.pasos{display:grid; gap:14px; max-width:960px; margin:36px auto 0; text-align:left}
@media(min-width:760px){.pasos{grid-template-columns:repeat(3,1fr); gap:18px}}
.paso{background:var(--crema); border:2px solid var(--morado); box-shadow:4px 4px 0 var(--amarillo); padding:22px 20px}
.paso .n{font:700 36px/1 var(--display); color:var(--amarillo); -webkit-text-stroke:1.2px var(--morado)}
.paso b{display:block; margin-top:10px; font:700 20px/1.2 var(--display); color:var(--morado)}
.paso p{margin-top:6px; font:400 15px/1.55 var(--sans); color:rgba(58,37,102,.78)}
.inscribete .btn{margin-top:36px}
.inscribete .nota{color:rgba(58,37,102,.6)}

/* ---------- pie ---------- */
.pie{background:var(--morado-prof); color:var(--crema); text-align:center; padding:60px 0 44px}
.pie .emblema img{height:118px; margin-bottom:12px}
.pie .em-title{font-size:58px}
.pie .em-sub{font-size:33.5px}
.pie .em-slogan{font-size:25px}
.pie .em-est{margin-top:16px; font-size:10.5px}
.pie-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin-top:28px}
.pie-links a{font:600 15px/1 var(--sans); color:var(--crema); text-underline-offset:5px; padding:10px 2px}
.pie small{display:block; max-width:62ch; margin:24px auto 0; font:500 12.5px/1.6 var(--sans); color:rgba(251,243,226,.6)}

/* ---------- ajustes finales ---------- */
/* el remate manuscrito va en su propia linea, como en el logotipo */
.titulo em{display:block; margin-top:.06em}
/* la linea del dominio se parte limpia en movil */
.hero-url span{display:block}
.hero-url .sep{display:none}
@media(min-width:560px){.hero-url span,.hero-url .sep{display:inline}}

/* ============================================================
   MOVIMIENTO · aparición, paralaje, hover y carrusel fijado
   ============================================================ */
:root{--barra:66px}

/* entrada del hero al cargar */
@keyframes fp-sube{from{opacity:0; translate:0 26px}to{opacity:1; translate:0 0}}
@keyframes fp-aparece{from{opacity:0}to{opacity:1}}
@keyframes fp-escribe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fp-menea{0%,100%{rotate:0deg}25%{rotate:6deg}50%{rotate:-5deg}75%{rotate:3deg}}
.hero .emblema img{animation:fp-sube 1s cubic-bezier(.2,.7,.2,1) both; will-change:transform}
.hero .em-title{animation:fp-sube .8s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .em-sub{animation:fp-sube .8s .42s cubic-bezier(.2,.7,.2,1) both}
.hero .em-slogan{animation:fp-escribe 1.2s .75s cubic-bezier(.6,0,.2,1) both}
.hero .em-est{animation:fp-aparece .8s 1.3s both}
.hero-texto{animation:fp-sube .8s 1.05s cubic-bezier(.2,.7,.2,1) both}
.hero-cta{animation:fp-sube .8s 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-url{animation:fp-aparece 1s 1.5s both}

/* aparición al hacer scroll (las clases las pone home.js) */
.rev{opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .75s ease, transform .85s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d,0) * 90ms)}
.rev.visto{opacity:1; transform:none}
.rev-poster{transform:translate3d(0,36px,0) rotate(-2.5deg) scale(.96)}
.sec-tag.rev .linea{transform:scaleX(0); transform-origin:left center; transition:transform 1.1s .25s cubic-bezier(.2,.7,.2,1)}
.sec-tag.rev.visto .linea{transform:scaleX(1)}
.poster.rev .sello{transform:rotate(-45deg) scale(0)}
.poster.rev.visto .sello{transform:rotate(-10deg) scale(1); transition:transform .75s .5s cubic-bezier(.34,1.56,.64,1)}

/* barra superior */
.barra{transition:box-shadow .25s ease}
.barra.con-sombra{box-shadow:0 8px 20px -10px rgba(40,20,70,.6)}
.barra-progreso{position:absolute; left:0; bottom:-2px; width:100%; height:3px; background:var(--amarillo);
  transform:scaleX(0); transform-origin:left center; pointer-events:none}
.barra nav a.nav-d{background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;
  background-size:0 2px; background-position:12px calc(100% - 7px); transition:background-size .25s ease, opacity .2s}
.barra nav a.nav-d:hover{text-decoration:none; background-size:calc(100% - 24px) 2px}

/* ilustraciones con marco y paralaje */
.poster{--sp:var(--amarillo); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.proximo .poster{--sp:var(--morado-prof)}
.marco{display:block; overflow:hidden}
.marco img{transform:translate3d(0,var(--py,0px),0) scale(1.08); will-change:transform}
.poster:hover{transform:translate(-4px,-4px); box-shadow:14px 14px 0 var(--sp)}
.sello:hover{animation:fp-menea .6s ease}

/* tarjetas */
.curso{overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1)}
.curso img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.curso:hover{transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--amarillo)}
.curso:hover img{transform:scale(1.05)}
.pilar,.paso,.datos li{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1), background-color .25s}
.pilar:hover,.paso:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--amarillo); background-color:#FFF8E6}
.datos li:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--amarillo)}
.etiquetas span{transition:background-color .2s, color .2s}
.proximo .etiquetas span:hover{background:var(--morado-prof); color:var(--amarillo)}
.comunidad .etiquetas span:hover{background:var(--crema); color:var(--morado)}
.btn span[aria-hidden="true"]{display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover span[aria-hidden="true"]{transform:translateX(5px)}
.c-link,.pie-links a{transition:text-underline-offset .2s}
.c-link:hover,.pie-links a:hover{text-underline-offset:9px}

/* cursos en móvil: la sección se fija y las tarjetas avanzan con el scroll */
.d-scroll{display:none}
.cursos-avance{display:none}
.cursos-avance span{display:block; height:100%; background:var(--morado); transform:scaleX(.06); transform-origin:left center}
/* el modo fijado solo existe en móvil: aunque la clase quedara puesta, el escritorio no se altera */
@media (max-width:979px){
  .cursos.pin{padding:0}
  .cursos.pin .cursos-sticky{position:sticky; top:var(--barra); height:calc(100vh - var(--barra)); height:calc(100svh - var(--barra));
    display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:14px 0 12px}
  .cursos.pin .lead{display:none}
  .cursos.pin .titulo{font-size:clamp(28px,7.6vw,42px)}
  .cursos.pin .d-swipe{display:none}
  .cursos.pin .d-scroll{display:inline}
  .cursos.pin .carrusel{overflow:visible; scroll-snap-type:none; margin-top:14px; padding-bottom:10px; will-change:transform}
  .cursos.pin .curso{flex-basis:var(--card-w,min(76vw,300px))}
  .cursos.pin .curso h3{font-size:22px}
  .cursos.pin .c-hook{font-size:21px}
  .cursos.pin .cursos-avance{display:block; height:4px; margin-top:8px; background:rgba(94,59,158,.18)}
}
@media (max-width:979px) and (max-height:700px){.cursos.pin .c-desc{display:none}}
@media (min-width:980px){.cursos-pin{height:auto!important}}

/* quien pide menos movimiento, lo recibe */
@media (prefers-reduced-motion:reduce){
  .hero *,.hero-texto,.hero-cta,.hero-url{animation:none!important}
  .rev,.rev-poster{opacity:1!important; transform:none!important; transition:none!important}
  .poster,.curso,.curso img,.pilar,.paso,.datos li,.btn,.btn span,.barra{transition:none!important}
  .poster:hover,.curso:hover,.pilar:hover,.paso:hover,.datos li:hover,.curso:hover img{transform:none}
  .marco img{transform:none}
  .sello:hover{animation:none}
  .barra-progreso{display:none}
}

/* en el modo fijado, el contenedor mide exactamente el ancho de la pantalla
   (con margin:auto dentro de una columna flex dejaria de estirarse y creceria al ancho de las 4 tarjetas) */
@media (max-width:979px){.cursos.pin .cursos-sticky > .wrap{width:100%; min-width:0}}

/* ---------- contacto ---------- */
.btn svg{width:20px; height:20px; flex:0 0 auto}
.btn.crema{background:var(--crema); color:var(--morado); border-color:var(--morado); box-shadow:4px 4px 0 var(--amarillo)}
.btn.crema:hover{box-shadow:6px 6px 0 var(--amarillo)}
.cta-par{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px}
.inscribete .cta-par .btn{margin-top:0}
@media(max-width:559px){.cta-par .btn{flex:1 1 100%}}

/* WhatsApp flotante: aparece al dejar atrás el hero */
.wa-flotante{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--amarillo); color:var(--morado-prof); border:2px solid var(--morado-prof); box-shadow:4px 4px 0 var(--morado-prof);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.wa-flotante svg{width:28px; height:28px}
.wa-flotante:hover{box-shadow:6px 6px 0 var(--morado-prof)}
.js-listo .wa-flotante:not(.visible){opacity:0; transform:translateY(18px) scale(.9); pointer-events:none}
@media (prefers-reduced-motion:reduce){.wa-flotante{transition:none}}

/* ============================================================
   RECETARIO · TÍTULOS ANIMADOS · FORMULARIO
   ============================================================ */
[hidden]{display:none!important}

/* logo del recetario */
.menus-logo{width:156px; height:auto; margin:2px 0 14px}

/* títulos: palabras que suben, remate que se escribe y marcador */
.titulo em{position:relative; z-index:0; isolation:isolate; width:fit-content}
.inscribete .titulo em{margin-left:auto; margin-right:auto}
.titulo em::after{content:""; position:absolute; left:0; right:0; bottom:.1em; height:.3em; z-index:-1;
  background:var(--resalte,var(--amarillo)); opacity:.6; transform-origin:left center}
.proximo{--resalte:var(--crema)}
.comunidad{--resalte:var(--morado-prof)}
.tit-anim .pal{display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .03em .14em; margin:0 -.03em -.14em}
.tit-anim .pal > span{display:inline-block; transform:translateY(112%);
  transition:transform .85s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--k,0) * 75ms)}
.tit-anim.visto .pal > span{transform:none}
.tit-anim em{clip-path:inset(-20% 100% -30% 0); transition:clip-path 1.1s cubic-bezier(.6,0,.2,1);
  transition-delay:calc(var(--k,0) * 75ms + 200ms)}
.tit-anim.visto em{clip-path:inset(-20% 0 -30% 0)}
.tit-anim em::after{transform:scaleX(0); transition:transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--k,0) * 75ms + 1000ms)}
.tit-anim.visto em::after{transform:scaleX(1)}

/* formulario emergente */
html.modal-abierto{overflow:hidden}
.modal[open]{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%;
  max-width:100%; max-height:100%; margin:0; padding:0; border:0; background:transparent; overflow:hidden}
.modal::backdrop{background:rgba(40,20,70,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.modal[open]::backdrop{animation:fp-aparece .3s ease}
.f-caja{position:relative; width:100%; max-width:540px; max-height:92vh; max-height:92svh; overflow:auto;
  background:var(--crema); color:var(--tinta); border:2px solid var(--morado); border-bottom:0;
  box-shadow:0 -8px 0 var(--amarillo); padding:28px 22px calc(22px + env(safe-area-inset-bottom,0px));
  animation:f-sube .4s cubic-bezier(.2,.8,.2,1)}
@media(min-width:640px){
  .modal[open]{align-items:center}
  .f-caja{border-bottom:2px solid var(--morado); box-shadow:10px 10px 0 var(--amarillo); max-height:88vh; padding:36px 36px 30px; animation-name:f-aparece}
}
@keyframes f-sube{from{transform:translateY(48px); opacity:.3}to{transform:none; opacity:1}}
@keyframes f-aparece{from{transform:translateY(18px) scale(.97); opacity:0}to{transform:none; opacity:1}}
.f-cerrar{position:absolute; top:8px; right:8px; width:46px; height:46px; border:0; background:none; cursor:pointer;
  font:400 32px/1 var(--sans); color:var(--morado); transition:transform .2s}
.f-cerrar:hover{transform:rotate(90deg)}
.f-form,.f-exito{display:grid; gap:14px}
.f-eyebrow{font:700 11px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--morado-clar)}
.f-titulo{margin-top:-6px; padding-right:40px; font:700 clamp(28px,7.2vw,38px)/1.04 var(--display); color:var(--morado); letter-spacing:-.01em}
.f-titulo em{display:block; font:400 1.1em/1.05 var(--script); font-style:normal; color:var(--morado-clar)}
.f-intro{margin-top:-4px; font:400 15.5px/1.55 var(--sans); color:rgba(58,37,102,.82)}
.f-campo{display:grid; gap:6px}
.f-campo > span{font:700 13px/1.2 var(--sans); color:var(--morado)}
.f-campo i{font-style:normal; font-weight:500; color:rgba(58,37,102,.6)}
.f-campo input,.f-campo select,.f-campo textarea{width:100%; min-height:50px; padding:12px 13px; border-radius:0;
  font:500 16px/1.4 var(--sans); color:var(--tinta); background:#FFFDF7; border:2px solid rgba(94,59,158,.45);
  -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s}
.f-campo select{padding-right:40px; background-repeat:no-repeat; background-position:right 13px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E3B9E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.f-campo textarea{min-height:78px; resize:vertical}
.f-campo input:focus,.f-campo select:focus,.f-campo textarea:focus{outline:0; border-color:var(--morado); box-shadow:3px 3px 0 var(--amarillo)}
.f-campo [aria-invalid="true"]{border-color:#B3261E}
.f-error{padding:10px 12px; background:#FDECEA; border:2px solid #B3261E; color:#8C1D18; font:600 14px/1.4 var(--sans)}
.f-enviar{width:100%}
.f-nota{font:500 12.5px/1.5 var(--sans); color:rgba(58,37,102,.6); text-align:center}
.f-exito .btn{margin-top:6px}
.f-texto{justify-self:center; padding:12px; border:0; background:none; cursor:pointer;
  font:600 14.5px/1 var(--sans); color:var(--morado); text-decoration:underline; text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .tit-anim .pal > span,.tit-anim em,.tit-anim em::after{transition:none!important; transform:none!important; clip-path:none!important}
  .f-caja,.modal[open]::backdrop{animation:none}
  .f-cerrar{transition:none}
}

/* ---------- ajustes: botón del recetario, títulos de tarjeta, móvil fijado ---------- */
/* el botón "Recetario gratuito" cabe junto al logotipo en pantallas angostas */
@media(max-width:400px){.barra nav .nav-menu{font-size:13px; padding:9px 11px; margin-left:4px}}

/* guiones en lugar de cortes a media palabra */
.curso h3{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:normal}
@media(min-width:980px){
  .c-cuerpo{padding:18px 18px 20px}
  .curso h3{font-size:21px}
  .c-hook{font-size:21px}
}

/* móvil fijado: tarjeta compacta para que la ilustración quepa completa */
@media (max-width:979px){
  .cursos.pin .c-desc{display:none}
  .cursos.pin .c-cuerpo{padding:14px 16px 16px; gap:2px}
  .cursos.pin .c-link{padding-top:10px}
}
@media (max-width:979px) and (max-height:720px){
  .cursos.pin .deslizar{display:none}
  .cursos.pin .titulo{font-size:26px}
}