/* lulú · web (Typers, nov 2026). Paleta aprobada y letras de Ana Lucía: Fredoka (títulos y detalles; la eligió Ana Lucía el 5 nov 2026 para todo lo suyo), Poppins (texto), Questrial (apoyo web). */
:root {
  --noche: #662482; --noche-2: #662482; --violeta: #662482; --orquidea: #C78BBC; --menta: #7CBFBD; --pizarra: #5E738D;
  --cielo: #9BB7CF; --lavanda: #AE9FBD; --durazno: #F0D7B8; --crema: #FFF7F1;
  --tinta: #662482; --tinta-2: #597472; --linea: #E6DEEE;
  --f-tit: 'Fredoka', 'Poppins', system-ui, sans-serif; --f-txt: 'Poppins', system-ui, sans-serif; --f-ui: 'Questrial', 'Poppins', system-ui, sans-serif; --f-mano: 'Fredoka', 'Poppins', sans-serif;
  --ancho: 1120px; --r: 28px;
}
* { box-sizing: border-box; }
html { font-synthesis: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 18px/1.65 var(--f-txt); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--noche); }
:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 3px; border-radius: 6px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.aviso-muestra { background: var(--noche-2); color: var(--durazno); text-align: center; font: 700 13px/1.4 var(--f-txt); letter-spacing: .04em; padding: 7px 16px; }
.aviso-muestra b { color: var(--crema); }

/* Encabezado */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(255, 247, 241, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.cabecera.con-borde { border-color: var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.cabecera .logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { text-decoration: none; font-weight: 700; color: var(--tinta); font-size: 16px; }
.menu a:hover { color: var(--violeta); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 800 16px var(--f-txt); text-decoration: none; cursor: pointer; border: 0; transition: transform .25s ease, box-shadow .25s ease, background .25s; }
.btn:hover { transform: translateY(-2px); }
.btn-principal { background: var(--menta); color: var(--noche-2); box-shadow: 0 10px 24px rgba(102, 36, 130, .18); }
.btn-principal:hover { box-shadow: 0 16px 30px rgba(102, 36, 130, .24); }
.btn-borde { background: transparent; color: var(--noche); border: 2px solid var(--noche); }
.btn-claro { background: var(--crema); color: var(--noche); }
.menu-movil { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-movil span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--noche); margin: 5px 0; }
@media (max-width: 900px) {
  .menu { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--crema); padding: 8px 20px 20px; border-bottom: 1px solid var(--linea); transform: translateY(-16px); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility 0s .3s; }
  .menu.abierto { transform: none; opacity: 1; visibility: visible; transition: transform .3s ease, opacity .3s ease; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .menu .btn { margin-top: 14px; }
  .menu-movil { display: block; }
}

/* Portada: noche que amanece */
.portada { position: relative; overflow: hidden; color: var(--crema); background: radial-gradient(120% 90% at 50% 10%, #662482 0%, var(--noche) 50%, var(--noche-2) 100%); padding: 96px 0 150px; }
.portada .envoltura { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 247, 241, .12); color: var(--durazno); font: 800 14px var(--f-txt); letter-spacing: .03em; }
.portada h1 { margin: 18px 0 16px; font: 800 clamp(42px, 6.2vw, 74px)/1.02 var(--f-tit); letter-spacing: -.01em; }
.portada h1 em { font-style: normal; color: var(--durazno); }
.portada .bajada { margin: 0 0 30px; max-width: 34ch; font-size: clamp(18px, 2vw, 21px); color: rgba(255, 247, 241, .9); }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.portada .btn-borde { color: var(--crema); border-color: rgba(255, 247, 241, .7); }
.confianza { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; font: 700 15px var(--f-txt); color: rgba(255, 247, 241, .85); }
.confianza span::before { content: "✦"; color: var(--durazno); margin-right: 8px; }
.escena { position: relative; aspect-ratio: 5 / 6; max-width: 500px; justify-self: center; width: 100%; }
.escena svg { position: absolute; z-index: 0; width: 92%; right: -10%; top: -6%; height: auto; overflow: visible; }
/* Foto real recortada en estudio: vive dentro del mundo de acuarela, sin marcos. Las nubes de adelante tapan la sombra del piso. */
.foto-ella { position: absolute; z-index: 2; left: 4%; bottom: 7%; width: 86%; height: auto; filter: drop-shadow(0 22px 34px rgba(34, 8, 54, .38)); }
.escena::after { content: ""; position: absolute; z-index: 3; left: 2%; right: 2%; bottom: -3%; height: 20%; background: radial-gradient(closest-side, rgba(255, 247, 241, .97) 45%, rgba(255, 247, 241, 0)); pointer-events: none; }
.nube-frente { position: absolute; z-index: 4; height: auto; pointer-events: none; filter: brightness(1.12) saturate(1.15); }
.n1 { width: 62%; left: -10%; bottom: -5%; }
.n2 { width: 56%; right: -10%; bottom: -3%; }
.colgante { position: absolute; z-index: 1; top: -40px; width: 12%; transform-origin: 50% 0; animation: mece 5.5s ease-in-out infinite alternate; }
.colgante::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: var(--hilo); background: rgba(240, 215, 184, .5); }
.colgante img { display: block; width: 100%; height: auto; margin-top: var(--hilo); }
.c1 { left: 0; --hilo: 120px; }
.c2 { left: 16%; width: 8%; --hilo: 60px; animation-duration: 4.6s; animation-delay: -2s; }
@keyframes mece { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .colgante { animation: none; } }
.estrella { animation: titila 3.2s ease-in-out infinite; }
@keyframes titila { 50% { opacity: .25; } }
.nubes-borde { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; line-height: 0; }
.nubes-borde svg { width: 100%; height: 120px; }
@media (max-width: 900px) {
  .portada { padding: 56px 0 120px; }
  .portada .envoltura { grid-template-columns: 1fr; }
  .escena { max-width: 340px; order: -1; }
  .c1 { --hilo: 70px; }
}

/* Secciones */
.seccion { padding: 96px 0; }
.seccion.suave { background: #FFF7F1; }
.seccion.cielo { background: linear-gradient(180deg, #E1EFEE, var(--crema)); }
.ante { font: 400 22px var(--f-mano); color: var(--menta); margin: 0; }
.seccion h2 { margin: 6px 0 14px; font: 800 clamp(32px, 4.4vw, 50px)/1.08 var(--f-tit); color: var(--noche); text-wrap: balance; }
.seccion .intro { max-width: 60ch; color: var(--tinta-2); margin: 0 0 40px; }
.centro { text-align: center; } .centro .intro { margin-left: auto; margin-right: auto; }

.dolores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.dolor { position: relative; padding: 26px 24px; border-radius: 30px 30px 30px 8px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(102, 36, 130, .06); }
.dolor b { display: block; font: 800 21px/1.25 var(--f-tit); color: var(--noche); margin-bottom: 6px; }
.dolor span { color: var(--tinta-2); font-size: 16px; }
.dolor::before { content: ""; position: absolute; top: 22px; right: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--orquidea); opacity: .7; }

.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.servicio { display: flex; flex-direction: column; gap: 10px; padding: 30px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--linea); transition: transform .3s ease, box-shadow .3s ease; }
.servicio:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(102, 36, 130, .12); }
.servicio .icono { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; }
.servicio h3 { margin: 6px 0 0; font: 800 24px/1.15 var(--f-tit); color: var(--noche); }
.servicio p { margin: 0; color: var(--tinta-2); font-size: 16px; flex: 1; }
.servicio .precio { font: 800 15px var(--f-txt); color: var(--violeta); }
.servicio a.mas { font-weight: 800; text-decoration: none; }
.servicio a.mas::after { content: " →"; }
.servicio.destacado { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.servicio.destacado h3 { color: var(--durazno); } .servicio.destacado p { color: rgba(255, 247, 241, .85); } .servicio.destacado .precio { color: var(--menta); } .servicio.destacado a.mas { color: var(--crema); }
.gratis { display: inline-block; align-self: flex-start; padding: 3px 12px; border-radius: 999px; background: var(--menta); color: var(--noche-2); font: 800 13px var(--f-txt); }

/* Curso */
.curso { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.lunas16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 34px; border-radius: 36px; background: var(--noche); }
.lunas16 i { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(174, 159, 188, .5); display: grid; place-items: center; font: 800 14px var(--f-txt); font-style: normal; color: var(--lavanda); transition: background .4s, color .4s, border-color .4s, box-shadow .4s; }
.lunas16 i.llena { background: var(--durazno); color: var(--noche); border-color: var(--durazno); box-shadow: 0 0 22px rgba(240, 215, 184, .45); }
.temario { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.temario li { display: flex; gap: 14px; align-items: flex-start; }
.temario li::before { content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--crema) 0 30%, var(--durazno) 31%); box-shadow: 0 0 0 4px rgba(240, 215, 184, .35); }
.guia-grid { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 900px) { .curso, .guia-grid { grid-template-columns: 1fr; } .lunas16 { padding: 22px; gap: 10px; } }

/* Método */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; counter-reset: paso; }
.paso { padding: 30px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--linea); position: relative; }
.paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--orquidea); color: #fff; font: 800 24px var(--f-tit); margin-bottom: 14px; }
.paso h3 { margin: 0 0 6px; font: 800 22px var(--f-tit); color: var(--noche); }
.paso p { margin: 0; color: var(--tinta-2); font-size: 16px; }

/* Sobre mí */
.sobre { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
.foto { aspect-ratio: 4 / 5; border-radius: 200px 200px 36px 36px; background: radial-gradient(90% 70% at 50% 30%, var(--violeta), var(--noche)); display: grid; place-items: center; color: var(--durazno); text-align: center; padding: 30px; position: relative; overflow: hidden; }
.foto small { display: block; color: var(--lavanda); font-weight: 700; margin-top: 10px; }
.firma { font: 400 30px var(--f-mano); color: var(--violeta); margin-top: 6px; }
@media (max-width: 900px) { .sobre { grid-template-columns: 1fr; } .foto { max-width: 360px; } }
/* Sobre mí: sus niñas sentadas en el borde de un arco de acuarela lila, con la luna dormida y una nota a mano */
.foto-ninas { position: relative; margin: 0; aspect-ratio: 5 / 6; width: 100%; }
.foto-ninas .arco { position: absolute; inset: 0 4% 2% 4%; border-radius: 999px 999px 32px 32px; overflow: hidden; background: url(img/acuarela/fondo-lila.webp) center / cover, #E6DEEE; }
.luna-arco { position: absolute; width: 34%; height: auto; top: 9%; right: 12%; }
.ninas { position: absolute; z-index: 2; width: 94%; height: auto; left: 3%; bottom: 3%; }
.nube-arco { display: none; }
#sobre { overflow-x: clip; }
.foto-ninas figcaption { position: absolute; z-index: 4; top: 15%; left: 11%; max-width: 52%; font: 400 clamp(19px, 2.2vw, 24px)/1.15 var(--f-mano, "Gochi Hand", cursive); color: var(--noche); transform: rotate(-4deg); }
.foto-ninas figcaption svg { display: block; width: 46px; height: auto; margin: 6px 0 0 34%; color: #C78BBC; }
@media (max-width: 900px) { .foto-ninas { max-width: 380px; justify-self: center; } }

/* Testimonios (placeholders: no se inventan) */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.testimonio { padding: 28px; border-radius: var(--r); border: 2px dashed var(--lavanda); background: rgba(255, 255, 255, .6); color: var(--tinta-2); font-size: 16px; }
.testimonio b { color: var(--noche); }

/* Blog */
.articulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.articulo { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--linea); text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s; }
.articulo:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(102, 36, 130, .12); }
.articulo .tapa { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.articulo .tapa span { font: 800 28px/1.1 var(--f-tit); text-align: center; padding: 0 24px; }
.articulo .cuerpo { padding: 22px 24px 26px; }
.articulo h3 { margin: 0 0 8px; font: 800 21px/1.25 var(--f-tit); color: var(--noche); }
.articulo p { margin: 0; color: var(--tinta-2); font-size: 15px; }
.pronto { font: 800 12px var(--f-txt); letter-spacing: .06em; text-transform: uppercase; color: var(--orquidea); }

/* Preguntas */
.preguntas { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.preguntas details { border-radius: 22px; background: #fff; border: 1px solid var(--linea); padding: 4px 24px; }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 0; font: 800 19px/1.3 var(--f-tit); color: var(--noche); display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--orquidea); font-size: 26px; line-height: 1; transition: transform .3s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 0 0 20px; color: var(--tinta-2); }

/* Llamado final y pie */
.final { position: relative; overflow: hidden; text-align: center; color: var(--noche); background: linear-gradient(180deg, var(--crema) 0%, #E6DEEE 38%, #E1EFEE 72%, #C0DBE5 100%); padding: 110px 0 0; }
/* Luna de acuarela que sale entre nubes (reemplaza el sol, pedido de Ana Lucía el 5 nov 2026) */
.luna-sale { position: relative; width: min(520px, 92vw); height: 250px; margin: 40px auto 0; }
.luna-sube { position: absolute; left: 50%; bottom: 10px; width: 210px; height: auto; margin-left: -105px; opacity: .95; }
.nube-sale { position: absolute; bottom: -40px; width: 62%; height: auto; }
.nube-sale.s1 { left: -8%; opacity: .9; }
.nube-sale.s2 { right: -10%; bottom: -54px; }
.final h2 { color: var(--noche); margin: 0 auto 16px; max-width: 18ch; font: 800 clamp(34px, 5vw, 58px)/1.05 var(--f-tit); }
.final p { max-width: 46ch; margin: 0 auto 30px; color: var(--tinta-2); }
.final .btn-claro { background: var(--noche); color: var(--crema); box-shadow: 0 12px 28px rgba(102, 36, 130, .25); }
.pie { background: var(--noche-2); color: rgba(255, 247, 241, .8); padding: 54px 0 30px; font-size: 15px; }
.pie .envoltura { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.pie img { height: 72px; width: auto; margin-bottom: 14px; }
.pie h4 { margin: 0 0 10px; color: var(--durazno); font: 800 16px var(--f-txt); }
.pie a { color: var(--crema); text-decoration: none; display: block; margin: 6px 0; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255, 247, 241, .14); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255, 247, 241, .6); }
@media (max-width: 760px) { .pie .envoltura { grid-template-columns: 1fr; } }

/* Botón flotante de WhatsApp (zona segura en celular) */
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; background: var(--menta); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(102, 36, 130, .3); }
.wa svg { width: 30px; height: 30px; }

/* Pendientes de confirmar con ella (solo en la muestra) */
.pend { display: inline-block; padding: 1px 8px; margin-left: 6px; border-radius: 6px; background: #FFF1C9; color: #7A5300; font: 800 12px var(--f-txt); vertical-align: middle; }

/* Revelado suave al hacer scroll (lo activa GSAP; sin JS todo se ve) */
.js .aparece { opacity: 0; transform: translateY(26px); }

/* Página del curso */
.curso-cabeza { background: radial-gradient(120% 90% at 50% 0%, #662482, var(--noche) 60%); color: var(--crema); padding: 80px 0 120px; position: relative; overflow: hidden; }
.curso-cabeza h1 { font: 800 clamp(40px, 6vw, 68px)/1.02 var(--f-tit); margin: 14px 0; }
.curso-cabeza p { max-width: 52ch; color: rgba(255, 247, 241, .9); }
.compra { position: sticky; top: 96px; padding: 30px; border-radius: 30px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 20px 50px rgba(102, 36, 130, .12); }
.compra .valor { font: 800 44px var(--f-tit); color: var(--noche); }
.compra ul { padding-left: 20px; color: var(--tinta-2); font-size: 16px; }
.dos-col { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } .compra { position: static; } }
.modulos { display: grid; gap: 14px; }
.modulo { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.modulo .n { width: 60px; height: 60px; border-radius: 50%; background: var(--noche); color: var(--durazno); display: grid; place-items: center; font: 800 22px var(--f-tit); }
.modulo h3 { margin: 0; font: 800 19px var(--f-tit); color: var(--noche); }
.modulo p { margin: 2px 0 0; color: var(--tinta-2); font-size: 15px; }
dialog { border: 0; border-radius: 28px; padding: 34px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(102, 36, 130, .35); }
dialog::backdrop { background: rgba(102, 36, 130, .55); backdrop-filter: blur(3px); }
dialog h3 { margin: 0 0 10px; font: 800 26px var(--f-tit); color: var(--noche); }

/* Intro «La noche de lulú»: solo en el inicio, una vez por sesión, nunca con movimiento reducido (patrón DAG/Typers) */
.telon, .intro-luna, .saltar-intro { display: none; }
html.con-intro body { overflow: hidden; }
html.con-intro .telon { display: block; position: fixed; inset: 0; z-index: 500; color: var(--crema); background: radial-gradient(120% 90% at 50% 30%, #662482 0%, var(--noche) 50%, var(--noche-2) 100%); animation: introFalla .6s ease 9s forwards; will-change: transform; }
html.con-intro .intro-luna { display: block; position: fixed; z-index: 501; left: 50%; top: 40%; width: min(340px, 62vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; animation: introFalla .6s ease 9s forwards; }
html.con-intro .saltar-intro { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 502; min-height: 48px; padding: 8px 20px; border-radius: 999px; border: 1.5px solid rgba(240, 215, 184, .7); background: rgba(102, 36, 130, .4); color: var(--crema); font: 700 15px var(--f-txt); cursor: pointer; animation: introFalla .6s ease 9s forwards; }
.saltar-intro kbd { font: 700 11px var(--f-txt); padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(240, 215, 184, .5); color: var(--durazno); }
@keyframes introFalla { to { opacity: 0; visibility: hidden; } }
.telon > svg.cielo-intro { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-texto { position: absolute; left: 0; right: 0; top: calc(40% + min(130px, 24vw)); text-align: center; padding: 0 20px; }
.intro-shh { position: absolute; left: 0; right: 0; top: calc(40% + min(120px, 22vw)); margin: 0; text-align: center; font: 400 clamp(30px, 4.4vw, 44px) var(--f-mano); color: var(--menta); opacity: 0; }
.intro-frase { opacity: 0; margin: 0; font: 800 clamp(32px, 5.2vw, 62px)/1.05 var(--f-tit); letter-spacing: -.01em; }
.intro-frase span { display: block; }
.intro-frase em { display: block; font-style: normal; color: var(--durazno); }
.intro-frase i { display: inline-block; font-style: normal; opacity: 0; }
.intro-logo { height: clamp(44px, 6vw, 60px); width: auto; margin: 22px auto 0; opacity: 0; }
.intro-z { position: absolute; font: 400 26px var(--f-mano); color: var(--durazno); opacity: 0; }
.intro-nubes { position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 120px; line-height: 0; transform: scaleY(-1); }
.intro-nubes svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .telon, .intro-luna, .saltar-intro { display: none !important; } }
.enlace-boton { background: none; border: 0; padding: 0; margin: 6px 0; display: block; color: var(--crema); font: inherit; cursor: pointer; text-align: left; }
.enlace-boton:hover, .pie a:hover { color: var(--durazno); }

/* Pie con columna Legal (patrón DAG) */
.pie .envoltura { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie .aviso-pie { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: rgba(255, 247, 241, .6); }
.pie .legal .der { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.pie .legal a, .pie .legal .enlace-boton { display: inline; margin: 0; color: rgba(255, 247, 241, .75); font-size: 13px; }
@media (max-width: 900px) { .pie .envoltura { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie .envoltura { grid-template-columns: 1fr; } }

/* Aviso de cookies (patrón DAG) */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin-inline: auto; background: var(--noche-2); color: var(--crema); border: 1px solid rgba(240, 215, 184, .25); border-radius: 22px; padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: 0 16px 44px rgba(102, 36, 130, .4); font-size: 15px; line-height: 1.5; }
.cookies p { margin: 0; flex: 1 1 280px; }
.cookies a { color: var(--durazno); text-decoration: underline; }
.cookies .botones { display: flex; gap: 10px; }
.cookies .btn { min-height: 44px; padding: 8px 20px; font-size: 15px; }
.cookies .btn-borde { color: var(--crema); border-color: rgba(255, 247, 241, .7); }
@media (max-width: 560px) { .cookies { bottom: 88px; } }
.pie .red-ig { display: inline-flex; align-items: center; gap: 10px; }
.pie .red-ig svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: rgba(255, 247, 241, .1); color: var(--durazno); transition: background .25s, color .25s, transform .25s; }
.pie .red-ig:hover svg { background: var(--durazno); color: var(--noche-2); transform: translateY(-2px); }

/* Ulú, la lechucita de lulú (chat guiado, sin IA). Va encima del botón de WhatsApp. */
.ulu-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ulu { position: fixed; right: 18px; bottom: 92px; z-index: 58; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--f-txt); }
html.con-intro .ulu { display: none; }
.ulu-boton { display: flex; align-items: center; padding: 5px 5px 5px 18px; border-radius: 999px; border: 2px solid var(--durazno); background: linear-gradient(135deg, var(--violeta), var(--noche-2)); color: var(--crema); cursor: pointer; text-align: left; box-shadow: 0 14px 32px rgba(102, 36, 130, .35), 0 0 22px rgba(240, 215, 184, .25); transition: transform .25s ease; }
.ulu-boton:hover { transform: translateY(-2px); }
.ulu-etiqueta { display: flex; flex-direction: column; line-height: 1.15; padding-right: 12px; max-width: 200px; overflow: hidden; white-space: nowrap; animation: uluEtiqueta .5s cubic-bezier(.2, .8, .2, 1) 1.2s both; }
.ulu-etiqueta strong { font: 800 17px var(--f-tit); }
.ulu-etiqueta span { font-size: 12.5px; color: var(--durazno); }
.ulu-cara { position: relative; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #662482, var(--noche)); border: 2px solid var(--crema); display: grid; place-items: center; flex: none; animation: uluSalto 6s ease-in-out 3s infinite; }
.ulu-cara svg { width: 46px; height: 46px; margin-top: 4px; }
.ulu-cara::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--durazno); opacity: 0; animation: uluPulso 6s ease-out 3s infinite; }
.ulu-ojos { transform-box: fill-box; transform-origin: center; animation: uluParpadeo 4.5s infinite; }
.ulu-piensa .ulu-cabeza .ulu-ojos, .ulu-piensa .fila:last-child .ulu-ojos { animation: uluMira 1s ease-in-out infinite; }
.ulu-abierto .ulu-etiqueta { display: none; }
.ulu-abierto .ulu-boton { padding: 5px; }
@keyframes uluEtiqueta { from { max-width: 0; opacity: 0; } to { max-width: 200px; opacity: 1; } }
@keyframes uluSalto { 0%, 74%, 100% { transform: none; } 78% { transform: translateY(-7px) rotate(-8deg); } 82% { transform: none; } 86% { transform: translateY(-3px) rotate(6deg); } 90% { transform: none; } }
@keyframes uluPulso { 0%, 72% { opacity: 0; transform: scale(1); } 76% { opacity: .9; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes uluParpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes uluMira { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-1.6px); } 70% { transform: translateX(1.6px); } }

.ulu-globo { position: relative; max-width: 250px; margin: 0; padding: 12px 34px 12px 14px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--noche); font-size: 14.5px; line-height: 1.4; box-shadow: 0 14px 34px rgba(102, 36, 130, .22); border: 1px solid var(--linea); animation: uluGlobo .45s cubic-bezier(.2, .8, .2, 1); }
.ulu-globo-txt { cursor: pointer; }
.ulu-globo-x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--tinta-2); font-size: 20px; cursor: pointer; }
@keyframes uluGlobo { from { opacity: 0; transform: translateY(10px) scale(.96); } }

.ulu-panel { width: min(392px, calc(100vw - 24px)); height: min(600px, calc(100vh - 200px)); height: min(600px, calc(100dvh - 200px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--crema); color: var(--tinta); box-shadow: 0 30px 80px rgba(102, 36, 130, .4); border: 1px solid var(--linea); animation: uluPanel .35s cubic-bezier(.2, .8, .2, 1); }
.ulu-panel[hidden] { display: none; }
@keyframes uluPanel { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ulu-cabeza { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 10px 14px 14px; color: var(--crema); background: radial-gradient(120% 140% at 15% 0%, #662482, var(--noche) 55%, var(--noche-2)); }
.ulu-cabeza::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 62% 28%, #FFF7F1, transparent), radial-gradient(1px 1px at 78% 66%, #FFF7F1, transparent), radial-gradient(1.2px 1.2px at 44% 74%, #F0D7B8, transparent), radial-gradient(1px 1px at 90% 20%, #FFF7F1, transparent); opacity: .8; }
.ulu-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 247, 241, .12); border: 2px solid var(--durazno); display: grid; place-items: center; flex: none; }
.ulu-avatar svg { width: 40px; height: 40px; margin-top: 3px; }
.ulu-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ulu-quien strong { font: 800 22px/1.1 var(--f-tit); }
.ulu-quien span { font-size: 12.5px; color: rgba(255, 247, 241, .8); display: flex; align-items: center; gap: 6px; }
.ulu-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px rgba(125, 191, 189, .25); flex: none; }
.ulu-icono { position: relative; min-width: 44px; min-height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--crema); display: grid; place-items: center; cursor: pointer; }
.ulu-icono:hover { background: rgba(255, 247, 241, .12); }
.ulu-mensajes { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.fila { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; animation: uluMsj .3s ease-out; }
.fila.sigue .ulu-mini { visibility: hidden; }
.ulu-mini { width: 28px; height: 28px; border-radius: 50%; background: var(--noche); display: grid; place-items: center; flex: none; }
.ulu-mini svg { width: 24px; height: 24px; margin-top: 2px; }
@keyframes uluMsj { from { opacity: 0; transform: translateY(6px); } }
.ulu .msj { font-size: 15px; line-height: 1.5; }
.ulu .msj p { margin: 0; }
.ulu .msj p + p { margin-top: 6px; }
.msj-ulu { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--linea); }
.msj-persona { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--noche); color: var(--crema); animation: uluMsj .25s ease-out; }
.pensando .puntos { display: inline-flex; gap: 4px; padding: 5px 0; }
.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--lavanda); animation: uluPunto 1s infinite; }
.pensando i:nth-child(2) { animation-delay: .15s; } .pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes uluPunto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.ulu-lista { margin: 6px 0 0; padding-left: 18px; }
.ulu-lista li { margin: 3px 0; }
.ulu-enlace { color: var(--violeta); font-weight: 800; }
.ulu-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: var(--menta); color: var(--noche-2); font-weight: 800; text-decoration: none; }
.ulu-wa:hover { filter: brightness(1.05); }
.ulu-pie { padding: 10px 12px 12px; border-top: 1px solid var(--linea); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.ulu-opciones { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow-y: auto; }
.ulu .opcion { min-height: 38px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--linea); background: #fff; color: var(--noche); font: 700 14px var(--f-txt); cursor: pointer; transition: border-color .2s, background .2s; }
.ulu .opcion:hover { border-color: var(--orquidea); background: #FFF7F1; }
.ulu .opcion.principal { background: var(--menta); border-color: var(--menta); color: var(--noche-2); }
.ulu-escribir { display: flex; gap: 8px; }
.ulu-escribir input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1.5px solid var(--linea); padding: 0 16px; font: 400 16px var(--f-txt); background: var(--crema); }
.ulu-escribir input:focus { outline: 3px solid var(--orquidea); outline-offset: 0; }
.ulu-enviar { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--noche); color: var(--crema); display: grid; place-items: center; cursor: pointer; flex: none; }
.ulu-nota { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--tinta-2); }
.ulu-nota a { color: var(--tinta-2); }
@media (max-width: 600px) {
  .ulu { right: 12px; bottom: 88px; }
  .ulu-panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ulu-abierto { overflow: hidden; }
  .ulu-abierto .ulu-boton, .ulu-abierto .ulu-globo, .ulu-abierto .wa { display: none; }
  .ulu-etiqueta { animation: uluEtiqueta .5s cubic-bezier(.2, .8, .2, 1) 1.2s both, uluEtiquetaSale .5s ease-in 12s forwards; }
}
@keyframes uluEtiquetaSale { to { max-width: 0; opacity: 0; padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .ulu-cara, .ulu-cara::after, .ulu-etiqueta, .ulu-ojos, .fila, .msj-persona, .ulu-panel, .ulu-globo, .pensando i { animation: none !important; } }

/* Scroll «de la noche al amanecer» (lo activa el JS con html.cielo-vivo; sin JS o con movimiento reducido la página queda como antes) */
.cielo-estrellas, .luna-guia { display: none; }
html.cielo-vivo body { transition: none; }
html.cielo-vivo main > .seccion { background: transparent; }
html.cielo-vivo main > section { position: relative; z-index: 1; }
html.cielo-vivo .cielo-estrellas { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cielo-estrellas svg { width: 100%; height: 100%; }
html.cielo-vivo .luna-guia { display: block; position: fixed; left: 26px; top: 0; width: 76px; height: 76px; z-index: 2; pointer-events: none; opacity: 0; }
@media (max-width: 1239px) { html.cielo-vivo .luna-guia { display: none; } }
/* Dudas como mensajes de WhatsApp de madrugada */
.dolor .escribe { display: none; }
.dolor.escribiendo > b, .dolor.escribiendo > span:not(.escribe), .dolor.escribiendo .hora { visibility: hidden; }
.dolor.escribiendo .escribe { display: inline-flex; gap: 5px; position: absolute; left: 26px; top: 30px; }
.dolor .escribe i { width: 9px; height: 9px; border-radius: 50%; background: var(--lavanda); animation: uluPunto 1s infinite; }
.dolor .escribe i:nth-child(2) { animation-delay: .15s; } .dolor .escribe i:nth-child(3) { animation-delay: .3s; }
.dolor .hora { display: block; margin-top: 10px; text-align: right; font: 700 12px var(--f-txt); color: var(--tinta-2); opacity: .8; }
.dolor .hora b { display: inline; font: 800 12px var(--f-txt); color: var(--lavanda); margin: 0; transition: color .4s .5s; }
.dolor.leido .hora b { color: var(--menta); }
.dolor.leido > b, .dolor.leido > span:not(.escribe) { animation: uluMsj .4s ease-out; }
/* Camino de estrellas entre los pasos del método */
.pasos { position: relative; }
.pasos .camino { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.paso::before { transition: background .4s, box-shadow .4s, transform .4s; }
.paso.alcanzado::before { background: var(--noche); box-shadow: 0 0 0 6px rgba(240, 215, 184, .55), 0 0 24px rgba(240, 215, 184, .8); transform: scale(1.06); }
/* Semanas del curso */
.lunas16 .semana-actual { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font: 400 22px var(--f-mano); color: var(--lavanda); }
.lunas16 .semana-actual b { font: 800 26px var(--f-tit); color: var(--durazno); }
/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .dolor .escribe i { animation: none !important; } }

/* ===== Fondo aqua (pedido de Ana Lucía, 3 nov 2026: «me identifico muchísimo más con ese color») =====
   Los fondos grandes pasan de morado a aqua #A1D8D5 (el de su logo). Sobre aqua el texto va en morado (6,2:1)
   y el acento en orquídea oscura #7A3A72 (5:1). El pie y la barra de muestra siguen en morado. */
:root { --fondo: #A1D8D5; --fondo-luz: #C9EAE7; --fondo-hondo: #94D1CD; --acento-aqua: #7A3A72; }
.portada, html.con-intro .telon { background: radial-gradient(120% 90% at 50% 10%, var(--fondo-luz) 0%, var(--fondo) 55%, var(--fondo-hondo) 100%); color: var(--noche); }
.curso-cabeza { background: radial-gradient(120% 90% at 50% 0%, var(--fondo-luz), var(--fondo) 60%); color: var(--noche); }
.curso-cabeza p, .portada .bajada, .confianza { color: var(--noche); }
.portada h1 em, .intro-frase em { color: var(--acento-aqua); }
.etiqueta { background: rgba(255, 255, 255, .55); color: var(--noche); }
.confianza span::before { color: var(--acento-aqua); }
.portada .btn-principal, .curso-cabeza .btn-principal { background: var(--noche); color: var(--crema); }
.curso-cabeza .btn-borde { color: var(--noche); border-color: var(--noche); }
.portada .btn-borde { color: var(--noche); border-color: var(--noche); }
.foto-ella { filter: drop-shadow(0 22px 30px rgba(47, 96, 93, .35)); }
.colgante::before { background: rgba(102, 36, 130, .35); }
.intro-shh, .intro-z { color: var(--acento-aqua); }
html.con-intro .saltar-intro { border-color: rgba(102, 36, 130, .5); background: rgba(255, 255, 255, .5); color: var(--noche); }
.saltar-intro kbd { border-color: rgba(102, 36, 130, .4); color: var(--noche); }
.servicio.destacado { background: var(--fondo); color: var(--noche); border-color: var(--fondo); }
.servicio.destacado h3, .servicio.destacado a.mas { color: var(--noche); } .servicio.destacado p { color: var(--noche); } .servicio.destacado .precio { color: var(--acento-aqua); }
.lunas16 { background: var(--fondo); }
.lunas16 i { border-color: rgba(102, 36, 130, .3); color: var(--noche); }
.lunas16 i.llena { background: var(--crema); border-color: var(--crema); box-shadow: 0 0 22px rgba(255, 247, 241, .8); }
.lunas16 .semana-actual { color: var(--noche); } .lunas16 .semana-actual b { color: var(--acento-aqua); }

/* Movimientos de lulú en acuarela (movimientos.js; los eligió Ana Lucía el 3 nov 2026) */
.mov { position: relative; overflow: hidden; container-type: inline-size; pointer-events: none; }
.mov img { will-change: transform; }
.mov-colg { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; }
.mov-colg i { flex: 1; width: 2px; background: #AE9FBD; }
.mov-ov { position: absolute; left: -26%; top: 44%; width: 23%; aspect-ratio: 1; z-index: 2; }
.mov-contador { position: absolute; top: 5%; right: 5%; z-index: 3; font: 400 7.5cqw/1 var(--f-mano); color: var(--noche); opacity: .85; }
.mov-movil { position: absolute; z-index: 1; left: -18%; top: -16%; width: 74%; aspect-ratio: 16 / 10; overflow: visible; }
/* Escenas sueltas sobre el papel: sin fondo ni marco; los bordes se disuelven (pedido de Cami, 4 nov). */
.mov-luna, .mov-globo, .mov-ulu, .mov-ovejas {
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.con-escena { position: relative; overflow: hidden; }
.con-escena > .envoltura { position: relative; z-index: 1; }
.mov-luna { position: absolute; z-index: 0; top: 24px; right: max(-40px, calc(50% - 700px)); width: min(520px, 44vw); aspect-ratio: 16 / 10; }
.mov-puntada { width: min(340px, 80%); height: 26px; margin: -4px 0 18px; overflow: visible; }
.centro .mov-puntada, .final .mov-puntada { margin-inline: auto; }
.con-nubes { position: relative; overflow: hidden; }
.con-nubes > .envoltura { position: relative; z-index: 1; }
.mov-nubes { position: absolute; inset: 0; opacity: .75; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 72%, transparent 96%); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 72%, transparent 96%); }
.mov-globo { position: absolute; z-index: 0; top: 0; right: max(-40px, calc(50% - 720px)); width: min(420px, 34vw); aspect-ratio: 4 / 5; }
.mov-ulu { width: 220px; aspect-ratio: 1; margin: -30px auto -14px; }
@media (max-width: 760px) {
  .mov-luna { top: 0; right: -18%; width: 82vw; opacity: .5; }
  .mov-globo { top: 0; right: -14%; width: 54vw; opacity: .55; }
  .mov-movil { left: -10%; top: -12%; width: 70%; }
}
.mov-pieza { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.curso-cabeza > .envoltura { position: relative; z-index: 1; }
.mov-ovejas { width: calc(100% + 60px); aspect-ratio: 16 / 10; margin: -30px -30px 4px; }

/* Carrito sin cuenta (6 nov 2026): botón en el encabezado, panel lateral en papel crema y hoja desde abajo en celular. */
.carrito-boton { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border: 2px solid var(--noche); border-radius: 999px; background: var(--crema); color: var(--noche); cursor: pointer; transition: transform .25s ease, background .25s; }
.carrito-boton:hover { background: #fff; transform: translateY(-2px); }
.carrito-boton[hidden] { display: none; }
.cabecera .envoltura:has(> .carrito-boton:not([hidden])) .menu { margin-left: auto; }
.carrito-cuenta { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--menta); color: var(--noche); font: 800 13px/22px var(--f-txt); text-align: center; }
.carrito-boton.salta { animation: carrito-salta .5s ease; }
@keyframes carrito-salta { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.95); } }
.servicio .mas-dos { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.servicio a.mas.en-carrito::after, a.en-carrito::after { content: " ✓"; }
html.carrito-abierto { overflow: hidden; }
.carrito-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(102, 36, 130, .28); backdrop-filter: blur(2px); }
.carrito-panel { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--crema); box-shadow: -20px 0 60px rgba(102, 36, 130, .18); transform: translateX(100%); transition: transform .25s ease; font-size: 16px; }
.carrito-panel.visible { transform: none; }
.carrito-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.carrito-cab h2 { margin: 0; font: 600 26px var(--f-tit); color: var(--noche); }
.carrito-cerrar { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--noche); font: 400 32px/1 var(--f-txt); cursor: pointer; }
.carrito-cerrar:hover { background: #fff; }
.carrito-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 28px; }
.carrito-vacio { color: var(--tinta-2); }
.carrito-lineas { list-style: none; margin: 0; padding: 0; }
.carrito-lineas li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px dashed var(--linea); }
.carrito-nombre { font-weight: 700; color: var(--noche); }
.carrito-precio { color: var(--tinta-2); white-space: nowrap; }
.carrito-quitar { grid-column: 1; justify-self: start; padding: 0; border: 0; background: none; color: var(--pizarra); font: 600 14px var(--f-txt); text-decoration: underline; cursor: pointer; min-height: 32px; }
.carrito-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; font-weight: 700; color: var(--noche); }
.carrito-total b { font: 600 28px var(--f-tit); }
.carrito-ante { margin: 18px 0 8px; font: 700 13px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--pizarra); }
.carrito-sumar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.carrito-sumar button { width: 100%; min-height: 48px; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; color: var(--noche); font: 600 15px var(--f-txt); text-align: left; cursor: pointer; transition: border-color .2s; }
.carrito-sumar button:hover { border-color: var(--menta); }
.carrito-form { display: grid; gap: 12px; margin-top: 8px; }
.carrito-campo { display: grid; gap: 4px; font-weight: 600; color: var(--noche); font-size: 15px; }
.carrito-campo input { min-height: 48px; padding: 0 14px; border: 1px solid #C3D7D6; border-radius: 14px; background: #fff; color: var(--noche); font: 16px var(--f-txt); }
.carrito-campo input:focus { outline: 3px solid var(--orquidea); outline-offset: 1px; }
.carrito-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.carrito-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--noche); }
.carrito-error { margin: 0; min-height: 1em; color: #A3324F; font-weight: 600; font-size: 14px; }
.carrito-error:empty { display: none; }
.carrito-pagar { width: 100%; }
.carrito-pagar:disabled { opacity: .65; cursor: progress; transform: none; }
.carrito-nota { margin: 0; font-size: 13px; color: var(--tinta-2); }
@media (max-width: 900px) { .carrito-boton { width: 44px; height: 44px; margin-left: auto; } .cabecera .envoltura:has(> .carrito-boton:not([hidden])) .menu { margin-left: 0; } }
@media (max-width: 600px) {
  .carrito-panel { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); box-shadow: 0 -20px 60px rgba(102, 36, 130, .2); }
}

/* Carrito y Ulú sin chocar (6 nov 2026): con el carrito abierto no hay flotantes; en celular se apartan si un botón de compra está a la vista. */
html.carrito-abierto .ulu, html.carrito-abierto .wa { opacity: 0; visibility: hidden; pointer-events: none; }
.ulu, .wa { transition: opacity .3s ease, transform .3s ease, visibility 0s; }
.carrito-ulu { margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--linea); font-size: 14px; color: var(--tinta-2); }
.carrito-ulu button { min-height: 32px; padding: 0; border: 0; background: none; color: var(--violeta); font: 700 14px var(--f-txt); text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) {
  html.compra-a-la-vista body:not(.ulu-abierto) .ulu, html.compra-a-la-vista .wa { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
}
@media (prefers-reduced-motion: reduce) { .ulu, .wa { transition: none; } }

/* Botón de carrito con «+» en cada servicio (7 nov 2026, pedido de Cami): sin texto, al lado del precio; ✓ cuando ya está en el carrito. */
.servicio .compra-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.carrito-mas { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 999px; background: var(--menta); color: var(--noche); text-decoration: none; transition: transform .25s ease, background .25s, color .25s, box-shadow .25s; }
.carrito-mas:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 22px rgba(102, 36, 130, .18); }
.carrito-mas:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 3px; }
.carrito-mas .cm-ok { display: none; }
.carrito-mas.en-carrito { background: var(--noche); color: var(--crema); }
.carrito-mas.en-carrito .cm-mas { display: none; }
.carrito-mas.en-carrito .cm-ok { display: inline; }
.carrito-mas.en-carrito::after { content: none; }
.carrito-mas.salta { animation: carrito-salta .5s ease; }
@media (prefers-reduced-motion: reduce) { .carrito-mas, .carrito-mas.salta { transition: none; animation: none; } }
.servicio.destacado .carrito-mas { background: var(--noche); color: var(--crema); }
.servicio.destacado .carrito-mas.en-carrito { background: #fff; color: var(--noche); }

/* Tarjetas estilo A «Noche estrellada» (elegidas por Lulú el 9 nov 2026) */
.servicio.tarjeta-a { padding: 0; gap: 0; overflow: hidden; text-align: center; border: 0; box-shadow: 0 14px 34px rgba(59, 26, 92, .14); }
.tarjeta-a .ta-cielo { position: relative; padding: 26px 22px 64px; background: radial-gradient(120% 90% at 80% 0%, #7A3A9A 0%, #662482 40%, #3B1A5C 100%); overflow: hidden; }
.tarjeta-a .ta-luna { position: absolute; right: 14px; top: 12px; width: 58px; height: auto; filter: drop-shadow(0 0 16px rgba(240, 215, 184, .45)); }
.tarjeta-a .ta-est { position: absolute; left: 22px; top: 20px; width: 14px; height: auto; opacity: .9; }
.tarjeta-a .ta-edad { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(240, 215, 184, .18); color: var(--durazno); font: 600 13.5px var(--f-tit); }
.servicio.tarjeta-a :is(h3, h4) { margin: 12px 0 0; font: 700 32px/1.08 var(--f-tit); color: var(--durazno); }
.tarjeta-a .ta-colina { position: absolute; left: -14%; bottom: -60px; width: 128%; height: 104px; border-radius: 50%; background: #A1D8D5; }
.tarjeta-a .ta-ilus { position: relative; width: 100px; height: auto; margin: -60px auto 0; z-index: 1; }
.tarjeta-a .ta-cuerpo { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 4px 24px 26px; }
.servicio.tarjeta-a p { flex: none; }
.tarjeta-a .ta-bajada { margin: 8px 0 12px; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.tarjeta-a ul { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; align-self: stretch; }
.tarjeta-a li { position: relative; padding: 9px 0 9px 28px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); border-top: 1px solid #F1EAF5; }
.tarjeta-a li:first-child { border-top: 0; }
.tarjeta-a li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 14px; height: 14px; background: url('img/acuarela/estrella.webp') center/contain no-repeat; }
.tarjeta-a li.dest { color: var(--violeta); font-weight: 700; }
.tarjeta-a .ta-nota { margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; background: #EFE8F4; color: var(--violeta); font-size: 13.5px; }
.tarjeta-a .ta-mano { margin: 10px 0 0; font: 500 19px/1.25 var(--f-mano); color: var(--orquidea); }
.tarjeta-a .ta-precio { margin: auto 0 2px; padding-top: 18px; font: 700 34px/1 var(--f-tit); color: #3B1A5C; }
.tarjeta-a .ta-usd { font-size: 14px; color: var(--tinta-2); }
.tarjeta-a .ta-boton { display: inline-block; margin-top: 16px; padding: 14px 28px; border-radius: 999px; background: #A1D8D5; color: #3B1A5C; font: 600 16px var(--f-tit); text-decoration: none; box-shadow: 0 8px 18px rgba(124, 191, 189, .45); transition: transform .25s ease; }
.tarjeta-a .ta-boton:hover { transform: translateY(-2px); }
.tarjeta-a .ta-boton:focus-visible { outline: 3px solid var(--orquidea); outline-offset: 3px; }
.tarjeta-a .ta-boton.en-carrito { background: #3B1A5C; color: var(--crema); }
.tarjeta-a .ta-ver { margin-top: 12px; font-weight: 800; text-decoration: none; color: var(--violeta); }
.tarjeta-a .ta-ver::after { content: " →"; }
.servicios:has(.tarjeta-a) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 26px; }
.tarjeta-a .ta-cuerpo > .ta-boton:only-of-type:not([data-carrito]) { margin-top: auto; }

/* Testimonios estilo A «Libreta de noches» (elegido por Lulú el 10 nov 2026; HTML lo arma testimonios/armar-web.mjs) */
.testimonios-a.seccion.suave { background: #FFF7F1 url('img/acuarela/fondos/papel.webp') center/cover; }
.testimonios-nota { margin: 10px 0 40px; color: var(--tinta-2); font-size: 16px; }
.libreta { columns: 3 300px; column-gap: 28px; }
.hoja { break-inside: avoid; display: inline-block; vertical-align: top; width: 100%; margin: 14px 0 16px; position: relative; background: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, #E7EEF2 31px 32px);
  border-radius: 4px 4px 14px 4px; padding: 34px 24px 22px 40px; box-shadow: 0 14px 30px rgba(59, 26, 92, .08); }
.hoja[hidden] { display: none; }
.hoja::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: #F2C7C2; }
.hoja:nth-child(3n+1) { transform: rotate(-1.2deg); } .hoja:nth-child(3n+2) { transform: rotate(.8deg); } .hoja:nth-child(3n) { transform: rotate(-.4deg); }
.hoja .cinta { position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(161, 216, 213, .75); border-radius: 2px; }
.hoja:nth-child(even) .cinta { background: rgba(199, 139, 188, .55); transform: translateX(-50%) rotate(4deg); }
.hoja .noche-n { position: absolute; top: 8px; right: 16px; font: 500 16px var(--f-tit); color: var(--menta); }
.hoja blockquote { margin: 0; font-size: 16px; line-height: 32px; color: var(--tinta-2); }
.hoja mark { background: linear-gradient(transparent 55%, rgba(240, 215, 184, .9) 55%); color: inherit; padding: 0 2px; }
.hoja .quien { margin: 10px 0 0; font: 600 17px/1.4 var(--f-tit); color: #662482; }
.libreta-mas { text-align: center; margin: 10px 0 0; }
.boton-mas { font: 600 17px var(--f-tit); color: #fff; background: #662482; border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer; box-shadow: 0 10px 24px rgba(102, 36, 130, .22); }
.boton-mas:hover { background: #7A3696; }
.boton-mas:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; }
@media (max-width: 560px) { .hoja { padding: 30px 18px 20px 34px; } .hoja::before { left: 22px; } }

/* Testimonios en slide (10 nov 2026, pedido de Lulú): 3 fichas en fila que se deslizan; «Ver las 46» vuelve a la libreta completa */
.testi-ventana { overflow: hidden; margin: 0 -14px; padding: 6px 14px 10px; }
.testi-ventana.abierta { overflow: visible; }
.libreta.slide { columns: auto; display: flex; gap: 28px; align-items: flex-start; transition: transform .8s cubic-bezier(.45, .05, .25, 1); will-change: transform; }
.libreta.slide .hoja { flex: 0 0 calc((100% - (var(--n, 3) - 1) * 28px) / var(--n, 3)); display: block; margin: 14px 0 16px; }
.testi-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; }
.testi-controles[hidden] { display: none; }
.testi-flecha { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #662482; background: #fff; color: #662482; font: 600 24px/1 var(--f-tit); cursor: pointer; display: inline-grid; place-items: center; }
.testi-flecha:hover { background: #F5EEF7; }
.testi-flecha:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; }
.testi-pausa { font-size: 15px; }
.testi-controles .boton-mas { margin-left: 8px; }
@media (max-width: 640px) { .testi-controles .boton-mas { margin: 6px 0 0; flex-basis: 100%; max-width: 280px; } }
@media (prefers-reduced-motion: reduce) { .libreta.slide { transition: none; } }
/* Servicios por edad del bebé (pedido de Lulú, 10 nov 2026): arriba 0 a 4 meses, abajo 5 meses o más */
.grupo-edad + .grupo-edad { margin-top: 64px; }
.grupo-edad .grupo-tit { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 clamp(24px, 3vw, 30px)/1.15 var(--f-tit); color: var(--violeta); }
.grupo-edad .grupo-tit::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #D9C6E6, transparent); }
.grupo-edad .grupo-bajada { margin: 6px 0 26px; color: var(--tinta-2); }
.edad-0-4 .servicios:has(.tarjeta-a) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 780px; }
.edad-5 .servicios:has(.tarjeta-a) { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.edad-5 .servicio.tarjeta-a h4 { font-size: 26px; }
.edad-5 .tarjeta-a .ta-cuerpo { padding: 4px 18px 24px; }
@media (max-width: 1080px) { .edad-5 .servicios:has(.tarjeta-a) { grid-template-columns: repeat(2, 1fr); gap: 26px; } .edad-5 .servicio.tarjeta-a h4 { font-size: 30px; } }
@media (max-width: 640px) { .edad-5 .servicios:has(.tarjeta-a) { grid-template-columns: 1fr; } .grupo-edad + .grupo-edad { margin-top: 48px; } }

/* Aviso suave del carrito cuando se mezclan edades */
.carrito-edad, .aviso-edad { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFF1E3; color: #7A4A1E; font-size: 14px; line-height: 1.45; }
.carrito-edad-tag, .casilla .edad-tag { display: block; font-size: 12.5px; color: var(--tinta-2); font-weight: 400; }