/* ============================================================
   FUNDACIÓN — consumido verbatim de la maqueta Mystica by Naad
   (tokens/*.css + base.css). Rutas de fuente ajustadas a /static/fonts/.
   ============================================================ */
/* =====================================================================
   MYSTICA BY NAAD — @font-face declarations (self-hosted webfonts)
   Three voices: Wild Mango (display) · EB Garamond (body) · Montserrat (labels)
   November Starlight lives ONLY inside the logo PNG — never a UI webfont.
   ===================================================================== */

/* DISPLAY — Wild Mango · "la voz que proclama" (títulos grandes, números) */
@font-face{
  font-family:'Wild Mango';
  src:url('/static/fonts/WildMango.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* BODY — EB Garamond · "la voz que narra" (texto, subtítulos itálicos) */
@font-face{
  font-family:'EB Garamond';
  src:url('/static/fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('/static/fonts/EBGaramond-Italic.ttf') format('truetype');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('/static/fonts/EBGaramond-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('/static/fonts/EBGaramond-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}

/* LABELS — Montserrat · "la voz que señala" (eyebrows, botones, datos) */
@font-face{
  font-family:'Montserrat';
  src:url('/static/fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/static/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/static/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
/* =====================================================================
   MYSTICA BY NAAD — COLOR TOKENS
   11 colores exactos — nada fuera de esta lista.
   Roles cromáticos no negociables (ver readme §Visual Foundations):
     navy  = ESTRUCTURA (títulos de sección, h2, tablas)
     gold  = ACENTO + ACCIÓN (CTAs, números, viñetas, marcos) — escaso
     rosa  = SOLO negritas del cuerpo (<strong>)
     mid   = subtítulos itálicos, etiquetas, enlaces, botón "Alumnas"
     cream = texto sobre fondos oscuros
   ===================================================================== */
:root{
  /* ---------- PALETA BASE ---------- */
  --deep:#2A1A4A;    /* morado profundo — texto principal sobre claro */
  --mid:#6E4CB8;     /* morado medio — subtítulos itálicos, etiquetas, enlaces */
  --lilac:#B8A4E3;   /* lila — bordes suaves, texto secundario sobre oscuro */
  --pink:#D4A8D4;    /* rosa malva — acento suave */
  --navy:#23235C;    /* azul estructura — títulos de sección, h2, tablas */
  --navy2:#1B1B4A;   /* azul profundo — fondos oscuros, footer */
  --cream:#FBF7EF;   /* crema — texto sobre oscuro; fondos cálidos */
  --gold:#B88A3A;    /* oro — acento + CTA (único por sección). nunca texto largo */
  --gold-lt:#D9B566; /* oro claro — hover y oro sobre oscuro */
  --rosa:#B23A6B;    /* rosa fuerte — EXCLUSIVO de negritas del cuerpo */
  --bg1:#F3F1FA;     /* fondo de página claro (PLANO, sin degradado) */
  --bg3:#D8D0EA;     /* lavanda — bordes y rellenos suaves */
  --malva:#E6DCF2;   /* malva — fondo de secciones tipo "frase" */
  --white:#FFFFFF;   /* blanco — superficie de tarjetas */

  /* ---------- SEMÁNTICOS — TEXTO ---------- */
  --text-body:var(--deep);        /* cuerpo sobre claro */
  --text-heading:var(--navy);     /* estructura: títulos, h2, h3 */
  --text-muted:var(--mid);        /* subtítulos itálicos, metadatos */
  --text-on-dark:var(--cream);    /* texto sobre fondos oscuros */
  --text-on-dark-soft:var(--lilac);
  --text-strong:var(--rosa);      /* negritas del cuerpo */
  --text-link:var(--mid);
  --text-accent:var(--gold);      /* numerales, viñetas, eyebrows */

  /* ---------- SEMÁNTICOS — SUPERFICIE ---------- */
  --surface-page:var(--bg1);      /* fondo de página (plano) */
  --surface-card:var(--white);    /* tarjetas */
  --surface-soft:var(--malva);    /* secciones tipo "frase" */
  --surface-fill:var(--bg3);      /* rellenos lavanda */
  --surface-dark:var(--navy2);    /* footer, bloques oscuros */

  /* ---------- SEMÁNTICOS — LÍNEA / BORDE ---------- */
  --border-soft-color:rgba(184,164,227,.55);  /* lila tenue (cards) */
  --border-gold-color:rgba(184,138,58,.45);   /* oro hairline (chips) */
  --border-on-dark:rgba(251,247,239,.6);      /* crema sobre oscuro */

  /* ---------- SEMÁNTICOS — ESTADO ---------- */
  --state-open:#1f7a4d;                  /* "inscripciones abiertas" */
  --state-open-bg:rgba(31,122,77,.12);
  --action:var(--navy);                  /* CTA principal (azul de estructura) */
  --action-hover:#33347D;                /* azul levantado para hover */
  --action-text:var(--cream);            /* texto sobre azul */
  --access:var(--mid);                   /* botón "Alumnas" (login) */
  --access-hover:#5a3ca0;
}
/* =====================================================================
   MYSTICA BY NAAD — TYPOGRAPHY TOKENS
   Tres voces, una jerarquía editorial.
   Reglas: Wild Mango desborda → line-height ≥ 1.12 y título/subtítulo
   nunca se enciman. Eyebrows en Montserrat UPPERCASE muy tracked.
   ===================================================================== */
:root{
  /* ---------- FAMILIAS ---------- */
  --font-display:'Wild Mango','EB Garamond',serif;  /* títulos grandes, números */
  --font-serif:'EB Garamond',Georgia,serif;         /* cuerpo, subtítulos itálicos */
  --font-label:'Montserrat',sans-serif;             /* eyebrows, etiquetas, botones */

  /* ---------- ESCALA (desktop) ---------- */
  --fs-hero:80px;
  --fs-h1:64px;
  --fs-h2:42px;
  --fs-h3:28px;
  --fs-h4:21px;
  --fs-lead:21px;
  --fs-body:18px;
  --fs-small:15px;
  --fs-eyebrow:12px;
  --fs-micro:10px;     /* etiquetas de dato, labels de celda */

  /* ---------- LINE HEIGHT ---------- */
  --lh-display:1.1;    /* @kind other */ /* Wild Mango — proclama */
  --lh-heading:1.14;   /* @kind other */ /* h2 / h3 serif */
  --lh-body:1.66;      /* @kind other */ /* cuerpo — aire generoso */
  --lh-lead:1.7;       /* @kind other */

  /* ---------- WEIGHTS ---------- */
  --fw-display:400;       /* @kind font */ /* Wild Mango sólo trae regular */
  --fw-body:400;          /* @kind font */
  --fw-body-strong:600;   /* @kind font */
  --fw-label:600;         /* @kind font */
  --fw-label-bold:700;    /* @kind font */

  /* ---------- TRACKING ---------- */
  --track-eyebrow:.32em;   /* @kind other */ /* eyebrow UPPERCASE */
  --track-label:.18em;     /* @kind other */ /* botones */
  --track-nav:.12em;       /* @kind other */ /* navegación */
  --track-micro:.14em;     /* @kind other */ /* labels de celda */
}
/* =====================================================================
   MYSTICA BY NAAD — SPACING & LAYOUT TOKENS
   Jerarquía de aire: la cabecera (eyebrow→título→subtítulo) respira
   más que el cuerpo. Ancho de contenido máx ~1180px.
   ===================================================================== */
:root{
  /* ---------- ESPACIADO BASE (px) ---------- */
  --sp-xs:8px;
  --sp-sm:14px;
  --sp-md:22px;
  --sp-lg:34px;
  --sp-xl:54px;

  /* ---------- RITMO DE SECCIÓN ---------- */
  --sp-section:92px;   /* padding vertical de sección */
  --sp-gutter:64px;    /* padding horizontal de sección */
  --maxw:1180px;       /* ancho máximo de contenido */
  --nav-pad-y:20px;    /* altura del header */
  --nav-pad-x:54px;

  /* ---------- RADIOS ---------- */
  --r-card:8px;
  --r-pill:30px;
  --r-btn:1px;                          /* botones casi rectos */
  --r-arch:180px 180px 12px 12px;       /* @kind radius */ /* marco "arco/portal" */
  --r-vesica:50% / 42%;                 /* @kind radius */ /* marco "vesica" (óvalo apuntado) */
}
/* =====================================================================
   MYSTICA BY NAAD — EFFECTS TOKENS (gradientes, sombras, bordes, glow)
   Degradados AUTORIZADOS (los únicos). Los fondos de contenido son
   PLANOS (--bg1); los degradados sólo en hero, separadores y CTAs.
   ===================================================================== */
:root{
  /* ---------- DEGRADADOS AUTORIZADOS ---------- */
  --grad-principal:linear-gradient(135deg,#23235C 0%,#311f6b 48%,#160f33 100%);  /* @kind color */ /* hero / marca */
  --grad-oscuro:linear-gradient(180deg,#2A2A66 0%,#1A1A40 60%,#121230 100%);     /* @kind color */ /* separador / CTA de decisión */
  --grad-claro:linear-gradient(160deg,#F1ECF9 0%,#E5DBF1 60%,#DCCFEC 100%);      /* @kind color */ /* secciones suaves */
  --grad-freespirit:linear-gradient(150deg,#21144A 0%,#3A1E6E 55%,#140E2A 100%); /* @kind color */ /* Free Spirit (sub-marca) */

  /* velos sobre imagen (legibilidad de hero/umbral) */
  --veil-hero:linear-gradient(180deg,rgba(20,14,42,.58),rgba(20,14,42,.42) 40%,rgba(13,10,31,.88));  /* @kind color */
  --veil-umbral:linear-gradient(180deg,rgba(13,10,31,.78),rgba(13,10,31,.85));   /* @kind color */

  /* relleno de la barra de cupos */
  --grad-cupos:linear-gradient(90deg,#B88A3A,#D9B566);   /* @kind color */

  /* ---------- SOMBRAS ---------- */
  --shadow-card:0 18px 44px rgba(42,26,74,.09);   /* tarjeta en reposo */
  --shadow-float:0 26px 60px rgba(42,26,74,.22);  /* imagen enmarcada / dropdown */
  --shadow-drop:0 20px 44px rgba(42,26,74,.20);   /* menú desplegable */

  /* ---------- GLOW (detrás de marcos de imagen) ---------- */
  --glow-gold:radial-gradient(closest-side,rgba(217,181,102,.30),rgba(110,76,184,0) 74%);  /* @kind color */

  /* ---------- BORDES COMPUESTOS ---------- */
  --border-soft:1px solid rgba(184,164,227,.55);  /* @kind other */ /* card */
  --border-gold-hair:1px solid rgba(184,138,58,.45);   /* @kind other */
  --border-frame:2.5px solid #B88A3A;             /* @kind other */ /* filete de marco de imagen */
  --border-frame-inner:1px solid rgba(247,228,184,.62);   /* @kind other */

  /* ---------- TRANSICIONES ---------- */
  --ease:.25s ease;         /* @kind other */ /* hover de botones/enlaces (suave, sin bounce) */
  --ease-soft:.4s ease;     /* @kind other */ /* aparición de menús */
}
/* =====================================================================
   MYSTICA BY NAAD — BASE ELEMENTS & CORE CLASSES
   Reglas de oro aplicadas: negritas SIEMPRE en rosa; fondo de página
   plano; navy para estructura; oro escaso. Estas clases son el reflejo
   en CSS plano de los componentes React (para uso en HTML directo).
   ===================================================================== */

/* ---------- RESET ---------- */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-serif);
  color:var(--text-body);
  background:var(--surface-page);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:var(--text-link);text-decoration:none;}
strong,b{font-weight:var(--fw-body-strong);color:var(--text-strong);} /* regla de oro */

/* ---------- TIPOGRAFÍA ---------- */
.display{font-family:var(--font-display);font-weight:var(--fw-display);
  line-height:var(--lh-display);color:var(--text-body);}
h1,.h1{font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-h1);line-height:var(--lh-display);color:var(--text-heading);margin:0;}
.hero-title{font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-hero);line-height:var(--lh-display);}
h2,.h2{font-family:var(--font-serif);font-weight:var(--fw-body-strong);
  font-size:var(--fs-h2);line-height:var(--lh-heading);color:var(--text-heading);margin:0;}
h3,.h3{font-family:var(--font-serif);font-weight:var(--fw-body-strong);
  font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--text-heading);margin:0;}
h4,.h4{font-family:var(--font-serif);font-weight:var(--fw-body-strong);
  font-size:var(--fs-h4);color:var(--text-heading);margin:0;}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-body);}
.secsub{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-lead);
  color:var(--text-muted);line-height:1.5;}
.eyebrow{font-family:var(--font-label);font-weight:var(--fw-label);font-size:var(--fs-eyebrow);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-accent);}
.numeral{font-family:var(--font-display);color:var(--text-accent);line-height:1;}

/* ---------- BOTONES (oro = sólo acción principal, uno por sección) ---------- */
.btn{font-family:var(--font-label);font-weight:var(--fw-label-bold);font-size:12px;
  letter-spacing:var(--track-label);text-transform:uppercase;padding:14px 28px;
  display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;transition:background var(--ease),color var(--ease);
  text-decoration:none;}
.btn-gold{background:linear-gradient(105deg,var(--navy) 0%,var(--mid) 76%,var(--malva) 128%);
  color:var(--action-text);border-color:var(--navy);}
.btn-gold:hover{background:linear-gradient(105deg,var(--action-hover) 0%,var(--mid) 70%,var(--malva) 122%);}
.btn-purple{background:var(--access);color:var(--cream);border-color:var(--access);}
.btn-purple:hover{background:var(--access-hover);}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--border-on-dark);}
.btn-ghost:hover{background:rgba(251,247,239,.10);}
.btn-ghost-d{background:transparent;color:var(--navy);border-color:rgba(35,35,92,.5);}
.btn-ghost-d:hover{background:rgba(35,35,92,.06);}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* ---------- LAYOUT ---------- */
.section{padding:var(--sp-section) var(--sp-gutter);}
.section.dark{background:var(--grad-oscuro);color:var(--cream);}
.section.soft{background:var(--grad-claro);}
.section.cream{background:var(--cream);}
.wrap{max-width:var(--maxw);margin:0 auto;}
.center-head{text-align:center;margin-bottom:var(--sp-xl);}
.center-head .eyebrow{display:block;margin-bottom:var(--sp-sm);}
.center-head .secsub{margin-top:10px;}

/* ---------- MARCOS DE IMAGEN — doble filete oro + glow + ornamentos ---------- */
.frame-arch,.frame-vesica,.frame-circle,.frame-rect{position:relative;}
.frame-arch::before,.frame-vesica::before,.frame-circle::before,.frame-rect::before{
  content:'';position:absolute;inset:-44px;z-index:0;background:var(--glow-gold);}
.frame-arch .pic,.frame-vesica .pic,.frame-circle .pic,.frame-rect .pic{
  position:relative;z-index:1;width:100%;height:100%;background-size:cover;background-position:center;
  border:var(--border-frame);box-shadow:var(--shadow-float);}
.frame-arch::after,.frame-vesica::after,.frame-circle::after,.frame-rect::after{
  content:'';position:absolute;inset:9px;z-index:2;border:var(--border-frame-inner);pointer-events:none;}
.frame-arch  .pic{border-radius:50% 50% 8px 8px / 42% 42% 3% 3%;}
.frame-arch::after{border-radius:47% 47% 6px 6px / 39% 39% 2% 2%;}
.frame-vesica .pic{border-radius:50%;}
.frame-vesica::after{border-radius:50%;}
.frame-circle .pic{border-radius:50%;}
.frame-circle::after{border-radius:50%;border-style:dotted;}
.frame-rect   .pic{border-radius:5px;}
.frame-rect::after{border-radius:3px;}
.orn-moon{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:42px;z-index:3;}
.orn-stars-tr{position:absolute;top:-22px;right:-24px;width:74px;z-index:3;opacity:.92;}
.orn-stars-bl{position:absolute;bottom:-20px;left:-20px;width:60px;z-index:3;opacity:.85;}
.mcap{text-align:center;margin-top:18px;}
.mcap .l{font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-muted);}

/* ---------- COMPONENTES ---------- */
.card{background:var(--surface-card);border:var(--border-soft);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:26px;}

.bul{list-style:none;padding:0;margin:var(--sp-md) 0;}
.bul li{position:relative;padding-left:24px;margin-bottom:9px;}
.bul li::before{content:'\2726';position:absolute;left:0;top:2px;color:var(--gold);font-size:11px;}

.callout{margin:var(--sp-md) 0;padding:20px 28px;border-left:3px solid var(--gold);
  background:linear-gradient(160deg,rgba(110,76,184,.10),rgba(110,76,184,.02));}
.callout p{margin:0;font-style:italic;color:var(--text-muted);}

.chip{display:inline-block;background:var(--surface-card);border:var(--border-gold-hair);
  border-radius:var(--r-pill);padding:9px 18px;font-family:var(--font-label);font-weight:600;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}

.badge{font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);display:inline-block;}
.badge-open{color:var(--state-open);background:var(--state-open-bg);}

/* ---------- PRICEGATE (precio detrás de un clic / click-to-reveal) ---------- */
.pricegate{display:inline-flex;align-items:center;}
.pricegate .pg-btn{font-family:var(--font-label);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;color:var(--gold);border:1px solid var(--gold);
  border-radius:var(--r-btn);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background var(--ease),color var(--ease);font-size:11px;padding:9px 16px;line-height:1;}
.pricegate .pg-btn:hover{background:rgba(184,138,58,.10);color:var(--gold);}
.pricegate .pg-btn .pg-eye{font-size:12px;}
.pricegate.pg-sm .pg-btn{font-size:9.5px;letter-spacing:.12em;padding:6px 11px;}
.pricegate .pg-price{animation:pg-reveal .28s ease;}
@keyframes pg-reveal{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.badge-gold{color:var(--action-text);background:var(--gold);}

/* BARRA DE CICLO (componente clave de la Escuela) */
.ciclo{background:var(--surface-card);border:var(--border-soft);border-radius:var(--r-card);
  padding:24px 28px;box-shadow:var(--shadow-card);}
.ciclo .ciclo-top{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #EadFF4;padding-bottom:14px;margin-bottom:16px;}
.ciclo .ciclo-top .lbl{font-family:var(--font-label);font-weight:700;font-size:10px;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);}
.ciclo .ciclo-grid{display:flex;flex-wrap:wrap;gap:16px 0;}
.ciclo .cell{width:50%;}
.ciclo .cell .k{font-family:var(--font-label);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;}
.ciclo .cell .v{font-family:var(--font-serif);font-weight:600;font-size:18px;color:var(--navy);}
.ciclo .cell .v small{font-weight:400;font-style:italic;font-size:14px;color:var(--mid);}
.ciclo .cupos .bar{height:7px;background:#EadFF4;border-radius:6px;overflow:hidden;margin-top:7px;}
.ciclo .cupos .fill{height:100%;background:var(--grad-cupos);}

/* ---------- FRAME TAG (overlay caption on a framed image) ---------- */
.frame-tag{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:rgba(35,35,92,.95);padding:7px 14px;
  border-radius:2px;white-space:nowrap;}

/* =====================================================================
   SITE CHROME — Header (nav + dropdown) & Footer
   ===================================================================== */
.topbar{background:var(--malva);border-bottom:1px solid rgba(184,138,58,.3);position:relative;z-index:60;}
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:var(--nav-pad-y) var(--nav-pad-x);max-width:var(--maxw);margin:0 auto;}
.nav .logo{height:46px;width:auto;}
.navlinks{display:flex;gap:26px;align-items:center;font-family:var(--font-label);font-weight:500;
  font-size:12.5px;letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--navy);}
.navlinks a{color:var(--navy);}
.navlinks .navitem{position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color var(--ease);}
.navlinks .navitem:hover{color:var(--gold);}
.navlinks .navitem.is-active{color:var(--gold);}
.navlinks .caret{color:var(--gold);font-size:10px;}
.hasdrop{position:relative;}
.drop{display:none;position:absolute;top:30px;left:-18px;min-width:290px;background:#fff;
  border:1px solid rgba(184,138,58,.5);border-radius:8px;box-shadow:var(--shadow-drop);
  padding:8px;z-index:80;text-align:left;}
.hasdrop:hover .drop{display:block;}
.drop a{display:block;padding:11px 14px;border-radius:6px;font-family:var(--font-serif);font-weight:600;
  font-size:15.5px;text-transform:none;letter-spacing:0;color:var(--navy);}
.drop a .s{display:block;font-family:var(--font-label);font-weight:600;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-top:3px;}
.drop a:hover{background:var(--bg1);}

.foot{background:var(--surface-dark);color:var(--lilac);padding:62px var(--sp-gutter) 34px;}
.foot .foot-wrap{max-width:var(--maxw);margin:0 auto;}
.foot .top{display:flex;justify-content:space-between;gap:36px;padding-bottom:38px;
  border-bottom:1px solid rgba(184,138,58,.28);}
.foot .brandcol img{height:30px;width:auto;}
.foot .brandcol p{font-style:italic;color:#BDB0DD;margin:14px 0 0;font-size:15px;}
.foot .col h5{font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lt);margin:0 0 15px;}
.foot .col a{display:block;color:#C8BCE6;font-size:14.5px;margin-bottom:9px;text-decoration:none;
  transition:color var(--ease);}
.foot .col a:hover{color:var(--cream);}
.foot .legal{padding-top:24px;font-family:var(--font-label);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(184,164,227,.6);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* =====================================================================
   RESPONSIVE — móvil (≤640px). Capa 1: reescala tokens globales y apila
   los layouts CSS-based (secciones, header, barra de ciclo, footer).
   Los layouts con anchos fijos inline (hero, cruce de caminos, rueda del
   Mapa, columnas de Free Spirit) se adaptan en sus componentes con las
   clases .rc-* / hooks correspondientes.
   ===================================================================== */
@media (max-width:640px){
  :root{
    --fs-hero:42px;
    --fs-h1:38px;
    --fs-h2:29px;
    --fs-h3:23px;
    --fs-h4:19px;
    --fs-lead:18px;
    --fs-body:16px;
    --sp-section:56px;
    --sp-gutter:22px;
    --nav-pad-y:14px;
    --nav-pad-x:20px;
  }
  /* marcos: el glow -44px se sale en pantallas chicas */
  .frame-arch::before,.frame-vesica::before,.frame-circle::before,.frame-rect::before{inset:-20px;}
  .orn-stars-tr{width:52px;right:-12px;}
  .orn-stars-bl{width:44px;left:-12px;}

  /* header: colapsa a logo + acción Alumnas (maqueta); menú completo = producción #6 */
  .nav{gap:12px;}
  .nav .logo{height:36px;}
  .navlinks{display:none;}

  /* barra de ciclo: la rejilla de datos a una columna */
  .ciclo{padding:20px 20px;}
  .ciclo .cell{width:100%;}
  .ciclo .ciclo-grid{gap:14px 0;}

  /* footer: apila columnas */
  .foot{padding:44px var(--sp-gutter) 28px;}
  .foot .top{flex-direction:column;gap:26px;padding-bottom:28px;}
  .foot .legal{flex-direction:column;gap:8px;}

  /* dropdown del header no aplica en móvil */
  .drop{display:none!important;}

  /* helpers para filas con anchos fijos inline (hero, cruce, teasers…):
     apilar en columna y neutralizar los flex:0 0 Npx / maxWidth inline */
  .rc-stack{flex-direction:column!important;align-items:stretch!important;}
  .rc-stack > *{flex:1 1 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  .rc-stack.rc-center > *{align-self:center!important;}
  .rc-gap-lg{gap:34px!important;}
  .rc-gap-md{gap:24px!important;}
  .rc-wrap{flex-wrap:wrap!important;}
}
/* ---- compat: nombres de token viejos del repo → nuevos de la maqueta ---- */
:root{
  --display:var(--font-display);
  --serif:var(--font-serif);
  --label:var(--font-label);
  --gold-hair:var(--border-gold-hair);
}