:root {
  --rosa: #fcf1f0; --rosa-2: #f8e3e4; --rosa-3: #f3d3d8; --lila: #d39aee; --lila-suave: #f1e2fa; --violeta: #9a5cc6;
  --ciruela: #4b2366; --texto: #3b3142; --gris: #6e6377; --beige: #ead9c6; --oro: #c39a5c; --blanco: #ffffff;
  --display: "Playfair Display", Georgia, serif;
  --etiqueta: "Montserrat", "Segoe UI", sans-serif;
  --cuerpo: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --firma: "Parisienne", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--rosa); color: var(--texto); font: 17px/1.65 var(--cuerpo); }
/* las estrellitas de la web de la escuela, de fondo */
.estrellado {
  background-color: var(--rosa);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23e6cfba' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M40 30 L44 46 L60 50 L44 54 L40 70 L36 54 L20 50 L36 46 Z'/%3E%3Cpath d='M190 80 L192 90 L202 92 L192 94 L190 104 L188 94 L178 92 L188 90 Z'/%3E%3Cpath d='M120 170 L125 190 L145 195 L125 200 L120 220 L115 200 L95 195 L115 190 Z'/%3E%3Cpath d='M228 200 L230 208 L238 210 L230 212 L228 220 L226 212 L218 210 L226 208 Z'/%3E%3C/g%3E%3Cg fill='%23e6cfba'%3E%3Ccircle cx='100' cy='60' r='2'/%3E%3Ccircle cx='230' cy='150' r='1.6'/%3E%3Ccircle cx='60' cy='190' r='1.8'/%3E%3Ccircle cx='170' cy='245' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
a { color: var(--violeta); }
img, svg { max-width: 100%; }
.contenedor { width: min(1120px, 100% - 32px); margin-inline: auto; }
.completar { background: #fff1a8; border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── barra de arriba (como la de la web) ── */
.aviso { background: var(--rosa-2); font-size: .92rem; }
.aviso .contenedor { display: flex; align-items: center; justify-content: center; gap: 16px; padding-block: 10px; flex-wrap: wrap; text-align: center; }
.aviso a { font: 600 .82rem var(--etiqueta); letter-spacing: .06em; color: var(--ciruela); border: 1px solid var(--ciruela); border-radius: 6px; padding: 6px 14px; text-decoration: none; white-space: nowrap; }
.aviso a:hover { background: var(--blanco); }
header.nav { background: var(--lila); }
header.nav .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ciruela); }
.marca svg { width: 38px; height: 38px; flex: none; }
.marca span { font: clamp(1.15rem, 3.2vw, 1.7rem)/1.1 var(--firma); color: var(--ciruela); }
header.nav nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
header.nav nav a { color: #2a1838; text-decoration: none; font: 500 .9rem var(--etiqueta); }
header.nav nav a:hover { text-decoration: underline; }

/* ── portada ── */
.portada { padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.portada .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.antetitulo { font: 600 .8rem/1.4 var(--etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--violeta); margin: 0 0 14px; }
h1, h2, h3 { font-family: var(--display); color: var(--ciruela); margin: 0; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); font-weight: 700; letter-spacing: -.01em; }
h1 em { display: block; font-style: italic; font-weight: 500; font-size: .48em; color: var(--violeta); margin-top: 10px; letter-spacing: 0; }
.bajada { font-size: 1.15rem; margin: 22px 0 0; max-width: 34rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chips li { background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 999px; padding: 5px 13px; font: 500 .85rem var(--etiqueta); color: var(--ciruela); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.boton { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 28px; font: 600 1rem var(--etiqueta); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.boton.principal { background: var(--ciruela); color: var(--blanco); box-shadow: 0 8px 22px rgb(75 35 102 / .25); }
.boton.principal:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(75 35 102 / .32); }
.boton.secundario { color: var(--ciruela); border: 1.5px solid var(--ciruela); background: transparent; }
.boton.secundario:hover { background: var(--blanco); }
.boton:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; }
.cuando { margin-top: 18px; font-size: .95rem; color: var(--gris); }
.cuando b { color: var(--ciruela); }
.rueda-caja { position: relative; aspect-ratio: 1; max-width: 460px; justify-self: center; width: 100%; }
.rueda-caja::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgb(211 154 238 / .35), transparent 70%); filter: blur(20px); }
.rueda { position: relative; width: 100%; height: auto; animation: girar 240s linear infinite; }
.rueda .signo { font-size: 15px; fill: var(--ciruela); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.rueda .casa { font: 600 8px var(--etiqueta); fill: var(--lila); }
.rueda .planeta text { font-size: 14px; fill: var(--oro); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.rueda .aspecto { stroke-width: 1.1; }
.rueda .trino, .rueda .sextil { stroke: #7fb3a6; }
.rueda .oposicion, .rueda .cuadratura { stroke: #d98c9c; }
.rueda .centro { font-size: 22px; fill: var(--oro); }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rueda { animation: none; } html { scroll-behavior: auto; } }

/* ── secciones ── */
section { padding-block: clamp(56px, 8vw, 96px); }
.titulo-seccion { text-align: center; max-width: 46rem; margin: 0 auto clamp(32px, 5vw, 48px); }
.titulo-seccion h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.titulo-seccion p { margin: 14px 0 0; color: var(--gris); font-size: 1.08rem; }
.blanco { background: var(--blanco); }
.franja { background: var(--rosa-2); }

/* el gancho: Sol, Luna y Ascendente */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.astro { background: var(--rosa); border: 1px solid var(--rosa-3); border-radius: 20px; padding: 28px 24px; text-align: center; }
.astro .glifo { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--oro); color: var(--oro); font: 30px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", serif; }
.astro h3 { font-size: 1.35rem; }
.astro .que { font: 600 .78rem var(--etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--violeta); margin: 6px 0 10px; }
.astro p { margin: 0; }
.remate { text-align: center; margin: 36px auto 0; max-width: 40rem; font: italic 500 1.25rem/1.5 var(--display); color: var(--ciruela); }

/* ¿es para vos? */
.para-vos { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.para-vos h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.para-vos .intro { margin: 16px 0 0; color: var(--gris); }
.lista-si { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-si li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: var(--blanco); border-radius: 16px; padding: 14px 18px; box-shadow: 0 2px 10px rgb(75 35 102 / .06); }
.lista-si li::before { content: "✓"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lila-suave); color: var(--violeta); font-weight: 700; }
.cierre-lista { margin: 18px 0 0; font-weight: 600; color: var(--ciruela); }

/* el programa */
.encuentros { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 18px; max-width: 900px; counter-reset: enc; }
.encuentro { display: grid; grid-template-columns: 92px 1fr; gap: 22px; background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 22px; padding: 24px 28px; align-items: start; }
.encuentro .num { text-align: center; }
.encuentro .num small { display: block; font: 600 .7rem var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--violeta); }
.encuentro .num b { display: block; font: 700 2.6rem/1.1 var(--display); color: var(--lila); }
.encuentro h3 { font-size: 1.4rem; }
.encuentro p { margin: 8px 0 0; }
.encuentro .temas { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.encuentro .temas li { font: 500 .8rem var(--etiqueta); color: var(--ciruela); background: var(--rosa); border-radius: 999px; padding: 4px 11px; }
.encuentro.bonus { background: linear-gradient(135deg, var(--lila-suave), var(--blanco)); border-style: dashed; border-color: var(--lila); }

/* qué te llevás */
.lleva { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.item { background: var(--blanco); border-radius: 18px; padding: 24px; border: 1px solid var(--rosa-3); }
.item .ico { font-size: 1.7rem; line-height: 1; }
.item h3 { font-size: 1.15rem; margin-top: 12px; }
.item p { margin: 8px 0 0; color: var(--gris); font-size: .97rem; }

/* cómo es la cursada */
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rosa-3); border: 1px solid var(--rosa-3); border-radius: 22px; overflow: hidden; max-width: 960px; margin: 0 auto; }
.dato { background: var(--blanco); padding: 22px 24px; }
.dato dt { font: 600 .74rem var(--etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--violeta); }
.dato dd { margin: 6px 0 0; font-size: 1.05rem; color: var(--ciruela); font-weight: 600; }
.dato dd span { display: block; font-weight: 400; color: var(--gris); font-size: .92rem; }

/* la escuela */
.escuela { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.escuela h2 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.escuela p { margin: 14px 0 0; }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cifra { background: var(--rosa); border-radius: 18px; padding: 22px; text-align: center; }
.cifra b { display: block; font: 700 2.2rem/1.1 var(--display); color: var(--ciruela); }
.cifra span { color: var(--gris); font-size: .95rem; }
.pilares { margin-top: 18px; display: grid; gap: 10px; }
.pilares div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.pilares div::before { content: "💜"; }

/* preguntas */
.preguntas { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
details { background: var(--blanco); border-radius: 16px; border: 1px solid var(--rosa-3); }
summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font: 600 1.05rem var(--cuerpo); color: var(--violeta); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 1.6rem var(--etiqueta); color: var(--lila); transition: transform .2s ease; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { margin: 0; padding: 0 22px 20px; }

/* inscripción */
.final { background: linear-gradient(160deg, var(--ciruela), #6b3591); color: var(--blanco); text-align: center; }
.final .lema { font: italic 500 clamp(1.4rem, 3.4vw, 2rem)/1.35 var(--display); max-width: 36rem; margin: 0 auto; color: #f6ddff; }
.final h2 { color: var(--blanco); font-size: clamp(2rem, 4.6vw, 3rem); margin-top: 22px; }
.final p { margin: 14px auto 0; max-width: 36rem; color: #eedcf7; }
.final .boton.principal { background: var(--blanco); color: var(--ciruela); margin-top: 28px; font-size: 1.08rem; }
.final .completar { color: var(--ciruela); }
.final small { display: block; margin-top: 16px; color: #e3c9f2; font-size: .9rem; }
footer { background: var(--rosa-2); padding-block: 28px; text-align: center; color: var(--gris); font-size: .92rem; }
footer .redes { display: flex; justify-content: center; gap: 14px 26px; flex-wrap: wrap; margin-bottom: 10px; }
footer .redes a { display: inline-flex; align-items: center; gap: 8px; }
footer .redes svg { width: 26px; height: 26px; flex: none; }
footer a { color: var(--ciruela); font-weight: 600; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* el botón de WhatsApp que acompaña (en el teléfono) */


@media (max-width: 900px) {
  .portada .contenedor, .para-vos, .escuela { grid-template-columns: 1fr; }
  .rueda-caja { max-width: 300px; }
  .trio, .lleva { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr 1fr; }
  header.nav nav { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .datos { grid-template-columns: 1fr; }
  .encuentro { grid-template-columns: 1fr; gap: 6px; padding: 20px; }
  .encuentro .num { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .encuentro .num b { font-size: 2rem; }
  .boton { width: 100%; justify-content: center; }
  .flotante { display: inline-flex; }
  .aviso a { display: none; }
}

/* ════ EL SITIO (16-oct): menú, pie y piezas nuevas ════ */
header.nav { position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 14px rgb(75 35 102 / .14); }
header.nav nav { align-items: center; }
header.nav nav a.activo { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
header.nav nav a.escribinos { background: var(--ciruela); color: var(--blanco); border-radius: 999px; padding: 8px 16px; }
header.nav nav a.escribinos:hover { text-decoration: none; background: #6b3591; }
.menu-movil { display: none; position: relative; background: none; border: 0; }
.menu-movil summary { padding: 4px 8px; font-size: 1.7rem; line-height: 1; color: var(--ciruela); }
.menu-movil summary::after { content: none; }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--blanco); border-radius: 18px; box-shadow: 0 14px 34px rgb(75 35 102 / .22); padding: 10px; display: grid !important; min-width: 250px; }
.menu-movil nav a { padding: 11px 14px; border-radius: 12px; color: var(--ciruela); text-decoration: none; font: 500 1rem var(--etiqueta); text-align: left; }
.menu-movil nav a:hover { background: var(--rosa); }

.hero-pagina { padding-block: clamp(40px, 6vw, 76px) clamp(32px, 5vw, 56px); }
.hero-pagina .contenedor { max-width: 920px; text-align: center; }
.hero-pagina h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.hero-pagina .bajada { margin-inline: auto; max-width: 44rem; }
.hero-pagina .chips, .hero-pagina .acciones { justify-content: center; }
.acciones .aviso-cerrado { flex-basis: 100%; margin: 2px 0 0; font-size: .88rem; color: var(--gris); text-align: center; }
.glifo-grande { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--oro); color: var(--oro); font: 40px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", serif; }

/* el curso destacado */
.destacado { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(120deg, var(--ciruela), #7a3ea3); color: var(--blanco); border-radius: 24px; padding: 26px 30px; box-shadow: 0 14px 34px rgb(75 35 102 / .25); }
.destacado .glifo-grande { margin: 0; width: 70px; height: 70px; font-size: 32px; background: rgb(255 255 255 / .1); border-color: #e7c99b; color: #f3d9ae; }
.destacado .antetitulo { color: #f1cfff; margin-bottom: 6px; }
.destacado h2 { color: var(--blanco); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.destacado p { margin: 6px 0 0; color: #f0def9; }
.destacado .boton.principal { background: var(--blanco); color: var(--ciruela); }

/* por dónde empezar */
.caminos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.camino { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 22px; padding: 26px 22px; text-decoration: none; color: var(--texto); transition: transform .15s ease, box-shadow .15s ease; }
.camino:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(75 35 102 / .12); }
.camino .ico { font-size: 2.2rem; line-height: 1; }
.camino h3 { font-size: 1.25rem; margin-top: 14px; }
.camino p { margin: 8px 0 14px; color: var(--gris); font-size: .97rem; flex: 1; }
.camino .ir { font: 600 .9rem var(--etiqueta); color: var(--violeta); }

/* las formaciones */
.formaciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.formacion { display: flex; flex-direction: column; background: var(--blanco); border-radius: 24px; border: 1px solid var(--rosa-3); padding: 30px 26px; text-align: center; }
.formacion .glifo-grande { width: 72px; height: 72px; font-size: 34px; }
.formacion h3 { font-size: 1.55rem; }
.formacion .lema { font: 600 .74rem/1.4 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--violeta); margin: 8px 0 12px; }
.formacion p { margin: 0; color: var(--gris); }
.formacion ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 6px; text-align: left; font-size: .95rem; flex: 1; }
.formacion ul li::before { content: "✦ "; color: var(--oro); }
.formacion .boton { justify-content: center; }

/* cómo cursamos */
.pasos { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: paso; }
.pasos li { counter-increment: paso; background: var(--blanco); border-radius: 20px; padding: 22px 18px; border: 1px solid var(--rosa-3); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lila-suave); color: var(--violeta); font: 700 1.05rem var(--display); margin-bottom: 10px; }
.pasos b { display: block; color: var(--ciruela); font-family: var(--display); font-size: 1.12rem; }
.pasos span { color: var(--gris); font-size: .95rem; }

/* testimonios */
.testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonio { margin: 0; background: var(--blanco); border-radius: 22px; padding: 26px; border: 1px solid var(--rosa-3); }
.testimonio p { margin: 0; font: italic 500 1.05rem/1.55 var(--display); color: var(--ciruela); }
.testimonio footer { all: unset; display: block; margin-top: 14px; font: 600 .85rem var(--etiqueta); color: var(--violeta); }

/* precios */
.precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
.precio { display: flex; flex-direction: column; background: var(--blanco); border-radius: 22px; padding: 26px 24px; border: 1px solid var(--rosa-3); }
.precio.recomendado { border: 2px solid var(--violeta); box-shadow: 0 12px 30px rgb(154 92 198 / .18); }
.precio .tipo { font: 600 .74rem var(--etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--violeta); }
.precio .monto { font: 700 2rem/1.15 var(--display); color: var(--ciruela); margin: 10px 0 2px; }
.precio .monto small { font: 500 .95rem var(--cuerpo); color: var(--gris); }
.precio ul { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 6px; font-size: .95rem; color: var(--gris); flex: 1; }
.precio ul li::before { content: "✓ "; color: var(--violeta); font-weight: 700; }
.precio .boton { justify-content: center; padding: 12px 20px; font-size: .95rem; }
.sin-matricula { text-align: center; margin: 22px auto 0; max-width: 46rem; color: var(--gris); }

/* tarjetas de lecturas, niveles y servicios */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.tarjeta { display: flex; flex-direction: column; background: var(--blanco); border-radius: 22px; padding: 26px 24px; border: 1px solid var(--rosa-3); }
.tarjeta .ico { font-size: 1.9rem; line-height: 1; }
.tarjeta h3 { font-size: 1.28rem; margin-top: 12px; }
.tarjeta p { margin: 8px 0 0; color: var(--gris); font-size: .97rem; }
.tarjeta ul { margin: 10px 0 0; padding-left: 18px; color: var(--gris); font-size: .95rem; }
.tarjeta .pie-tarjeta { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tarjeta .valor { font: 700 1.25rem var(--display); color: var(--ciruela); }
.tarjeta .valor small { font: 500 .85rem var(--cuerpo); color: var(--gris); display: block; }
.tarjeta .boton { padding: 10px 18px; font-size: .9rem; }

/* catálogo de talleres */
.catalogo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1000px; margin: 0 auto; }
.catalogo a, .catalogo span { background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 999px; padding: 9px 16px; color: var(--ciruela); text-decoration: none; font: 500 .92rem var(--etiqueta); transition: background .15s ease; }
.catalogo a:hover { background: var(--lila-suave); }
.grupo-catalogo + .grupo-catalogo { margin-top: 44px; }
.grupo-catalogo h3 { text-align: center; font-size: 1.5rem; margin-bottom: 18px; }

/* tabla de inicios */
.tabla { width: 100%; max-width: 960px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 22px; overflow: hidden; }
.tabla th, .tabla td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rosa-2); vertical-align: top; }
.tabla th { font: 600 .74rem var(--etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); background: var(--rosa); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td b { color: var(--ciruela); }

/* el equipo */
.equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.foto-persona { display: block; width: 96px; height: 96px; margin: 0 auto 12px; object-fit: contain; }
.equipo.mini { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.equipo.mini .persona { padding: 18px 14px; }
.equipo.mini .persona h3 { font-size: 1rem; }
.equipo.mini .persona p { font-size: .84rem; }
.persona { background: var(--blanco); border-radius: 20px; padding: 22px 20px; border: 1px solid var(--rosa-3); text-align: center; }
.avatar { display: grid; place-items: center; width: 84px; height: 84px; margin: 6px auto 18px; border-radius: 50%; font: 600 1.4rem var(--display); color: var(--blanco); }
.persona h3 { font-size: 1.08rem; }
.persona .rol { font: 600 .72rem var(--etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); margin: 4px 0 6px; }
.persona p { margin: 0; color: var(--gris); font-size: .9rem; line-height: 1.5; }

/* programas en desplegables */
.programa { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.programa details p, .programa details ul { margin: 0; padding: 0 22px 20px; }
.programa details ul { padding-left: 42px; }
.programa details li { margin: 3px 0; }
.programa .modulo { font-weight: 700; color: var(--ciruela); list-style: none; margin: 12px 0 4px -20px; }

.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: start; }
.columnas h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.columnas p { margin: 14px 0 0; }
.nota { max-width: 860px; margin: 26px auto 0; background: var(--lila-suave); border-radius: 18px; padding: 18px 22px; color: var(--ciruela); }
.centro { text-align: center; }
.mt { margin-top: 28px; }

/* el pie */
.pie { background: var(--ciruela); color: #e9d8f3; padding-block: 48px 28px; font-size: .95rem; text-align: left; }
.pie .columnas-pie { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
.pie .marca span { color: var(--blanco); }
.pie h4 { margin: 0 0 12px; font: 600 .78rem var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: #f1cfff; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .redes-pie { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pie .redes-pie a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanco); color: var(--ciruela); }
.pie .redes-pie svg { width: 24px; height: 24px; }
.pie .legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .15); text-align: center; color: #cdb3de; font-size: .85rem; }

/* el WhatsApp que acompaña siempre */
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; border-radius: 999px; padding: 12px 20px 12px 14px; font: 600 .95rem var(--etiqueta); text-decoration: none; box-shadow: 0 10px 24px rgb(0 0 0 / .22); }
.wa-flotante svg { width: 26px; height: 26px; }
.wa-flotante svg path:first-child { fill: #fff; }
.wa-flotante svg path:last-child { fill: #25d366; }


/* 🌸 (16-oct) el logo de la escuela: menú blanco con un filo lila */
header.nav { background: var(--blanco); border-bottom: 3px solid var(--lila); }
.marca img.logo { display: block; height: 56px; width: auto; }
.pie .marca img.logo { height: 64px; }
@media (max-width: 560px) { .marca img.logo { height: 46px; } }

/* 📄 (16-oct) las páginas de detalle (detalles.mjs) */
.migas { margin: 0 0 14px; font: 600 .85rem var(--etiqueta); }
.migas a { color: var(--violeta); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.datos-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; }
.datos-detalle .dato { background: var(--blanco); border-radius: 18px; padding: 16px 18px; box-shadow: 0 4px 16px rgb(75 35 102 / .07); }
.datos-detalle .ico { font-size: 1.4rem; }
.datos-detalle dt { font: 600 .74rem var(--etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); margin-top: 6px; }
.datos-detalle dd { margin: 4px 0 0; color: var(--texto); }
.detalle { max-width: 820px; }
.intro-detalle p { font-size: 1.08rem; }
.seccion-detalle { background: var(--blanco); border-radius: 22px; padding: 22px 26px; margin-top: 18px; box-shadow: 0 4px 18px rgb(75 35 102 / .06); }
.seccion-detalle h2 { font-size: 1.45rem; margin-bottom: 10px; }
.seccion-detalle p { margin: 8px 0; }
.lista-detalle { margin: 8px 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.lista-detalle li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.lista-detalle li::before { content: "✦"; color: var(--lila); }
.video-detalle, .hijos-detalle { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* 🔢 el número de cada página (solo en la versión para revisar) y el índice */
.num-rev { display: inline-block; font: 700 .72rem var(--etiqueta); background: #fff1a8; color: var(--ciruela); border-radius: 6px; padding: 1px 6px; vertical-align: middle; letter-spacing: 0; }
.indice-rev { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 6px; }
.indice-rev li { background: var(--blanco); border-radius: 12px; padding: 9px 14px; display: flex; gap: 10px; align-items: center; }
.indice-rev li a { color: var(--ciruela); text-decoration: none; font-weight: 600; flex: 1; }
.indice-rev li.nivel-3 { margin-left: 28px; } .indice-rev li.nivel-4 { margin-left: 56px; }
.indice-rev li.indice-sec { background: transparent; font: 700 1rem var(--display); color: var(--ciruela); margin-top: 14px; }
.indice-rev li.revisada { background: #eefbf1; }
.indice-rev .estado-rev { font-size: 1.05rem; }
/* ════ ▶ (17-oct) videos EMBEBIDOS, chicos y con «⤢ Ampliar» (solo CSS: la casilla pasa el marco a pantalla, sin recargar) ════ */
.video-emb { position: relative; margin-top: 14px; }
.video-ampliar { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.video-caja { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1d1027; box-shadow: 0 10px 26px rgb(75 35 102 / .18); }
.video-caja iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-boton { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 .8rem var(--etiqueta); color: var(--ciruela); background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 999px; padding: 6px 14px; cursor: pointer; user-select: none; }
.video-boton:hover { background: var(--lila-suave); }
.video-boton .cerrar, .video-fondo { display: none; }
.video-ampliar:focus-visible ~ .video-marco .video-boton { outline: 3px solid var(--lila); outline-offset: 3px; }
.video-ampliar:checked ~ .video-fondo { display: block; position: fixed; inset: 0; z-index: 90; background: rgb(29 16 39 / .84); cursor: zoom-out; }
.video-ampliar:checked ~ .video-marco { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw, calc((88vh - 70px) * 16 / 9)); text-align: center; }
.video-ampliar:checked ~ .video-marco .abrir { display: none; }
.video-ampliar:checked ~ .video-marco .cerrar { display: inline; }
.video-solo { max-width: 620px; margin: 0 auto; text-align: center; }
.tarjeta .video-emb { margin-top: auto; padding-top: 14px; }
/* ════ 📄 (17-oct) las PÁGINAS DE DETALLE con las piezas de la landing de Carta Natal (detalles-diseno.mjs) ════ */
.detalle-portada h1.largo { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.detalle-portada .migas { margin-bottom: 18px; }
.ilustra { position: relative; width: 100%; height: auto; }
.ilustra.gira { animation: girar 300s linear infinite; }
.ilustra .num-carta { font: 600 13px var(--display); fill: var(--violeta); letter-spacing: .12em; }
.ilustra .nombre-carta { font: 600 8.5px var(--etiqueta); fill: var(--lila); letter-spacing: .16em; }
@media (prefers-reduced-motion: reduce) { .ilustra.gira { animation: none; } }
.texto-detalle { max-width: 46rem; margin: 0 auto; font-size: 1.08rem; }
.texto-detalle p { margin: 0 0 16px; }
.texto-detalle > :last-child { margin-bottom: 0; }
.tarjeta-texto { background: var(--blanco); border: 1px solid var(--rosa-3); border-radius: 24px; padding: clamp(24px, 4vw, 40px) clamp(22px, 5vw, 52px); box-shadow: 0 6px 24px rgb(75 35 102 / .06); }
.blanco .tarjeta-texto { background: var(--rosa); box-shadow: none; }
.tarjeta-texto p.lead { font: 500 1.22rem/1.55 var(--display); color: var(--ciruela); }
.lista-estrellas { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 10px; }
.lista-estrellas li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.lista-estrellas li::before { content: "✦"; color: var(--oro); }
.programa-antes { margin-bottom: 28px; text-align: center; color: var(--gris); }
.programa-pasos { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 980px; counter-reset: pp; }
.programa-pasos.uno { grid-template-columns: 1fr; max-width: 820px; }
.programa-paso { counter-increment: pp; display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; background: var(--rosa); border: 1px solid var(--rosa-3); border-radius: 18px; padding: 16px 22px; }
.programa-paso::before { content: counter(pp, decimal-leading-zero); font: 700 1.7rem/1 var(--display); color: var(--lila); }
.programa-paso p { margin: 0; color: var(--ciruela); font-weight: 600; }
.estrellado .programa-paso { background: var(--blanco); }
.programa-pie { max-width: 46rem; margin: 28px auto 0; }
.pagina-detalle .blanco .item { background: var(--rosa); }
.pagina-detalle .blanco .lista-si li { background: var(--rosa); box-shadow: none; }
.lleva.dos { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
.lleva.uno { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.lleva.incluye .item { padding: 20px 22px; }
.lleva.incluye .item h3 { font-size: 1.05rem; }
.datos.n1 { grid-template-columns: 1fr; max-width: 520px; } .datos.n2, .datos.n4 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.datos.n5 { grid-template-columns: repeat(6, 1fr); } .datos.n5 .dato { grid-column: span 2; } .datos.n5 .dato:nth-child(n+4) { grid-column: span 3; }
.datos.con-tarjetas { margin-top: 28px; }
.centrado { text-align: center; margin: 0; }
.siguiente { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .programa-pasos, .lleva.dos { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
  .caminos { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .pie .columnas-pie { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .menu-movil { display: block; }
  .formaciones, .testimonios, .columnas { grid-template-columns: 1fr; }
  .destacado { grid-template-columns: 1fr; text-align: center; }
  .destacado .glifo-grande { margin: 0 auto; }
}
@media (max-width: 560px) {
  .caminos, .pasos, .pie .columnas-pie { grid-template-columns: 1fr; }
  .wa-flotante span { display: none; }
  .wa-flotante { padding: 13px; }
  .tabla th:nth-child(4), .tabla td:nth-child(4) { display: none; }
}

/* 🎨 (17-oct) lo que cuelga se hamaca, como un péndulo: va en el <g> de lo que cuelga (su borde de arriba es de donde cuelga) */
.balancea { transform-box: fill-box; transform-origin: 50% 0; animation: balancear 3.6s ease-in-out infinite alternate; }
@keyframes balancear { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .balancea { animation: none; } }