/* Ajuste de arte y composición · 14 septiembre 2026.
   Se carga exclusivamente en Inicio, /2/, Contacto, Historia, Manifiesto
   y Metodología. La referencia es la V5 definitiva de Organización y
   Dirección. Los estilos originales, programas y coreografías se conservan.
   Esta hoja no define animaciones, transiciones ni estados de revelado. */

:root {
  --paper: #f4f1eb;
  --v5-line: #d9d5ce;
  --v5-muted: #62605b;
  --gutter: clamp(1.25rem, 3.34vw, 3rem);
  --text-display-1: clamp(2.5rem, 1.8rem + 3vw, 4.125rem);
  --text-display-2: clamp(2rem, 1.4rem + 2vw, 3rem);
  --text-display-3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --text-body-base: 1rem;
  --text-body-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
}

body { line-height: 1.65; }
.t-display-1 { font-weight: 500; line-height: 1.04; letter-spacing: -.045em; }
.t-display-2 { font-weight: 500; line-height: 1.1; }
.t-display-3 { line-height: 1.2; letter-spacing: -.025em; }
.t-eyebrow, .doc-eyebrow, .doc-label {
  font-family: var(--font-display);
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .14em;
}
.btn { border-radius: 3px; font-weight: 500; min-height: 48px; line-height: 1.45; }
.menu-toggle, .nav-overlay__close { min-height: 44px; }
.global-nav { font-size: .875rem; }
.global-nav ul { font-size: inherit; gap: 12px 24px; }
.overlay-nav a { font-weight: 500; }
.nav-overlay__bar { gap: 20px; }
.nav-overlay__logo { max-width: calc(100% - 90px); height: auto; max-height: 60px; }
.site-foot__tagline, .site-foot__next { font-weight: 500; line-height: 1.2; }
.site-foot__since { font-size: .75rem; }
.site-foot__act, .site-foot__id, .site-foot__dinamai { min-width: 0; }
.site-foot__mail { max-width: 100%; font-size: 1rem; }
.site-foot__legal { padding-bottom: calc(var(--wa-inset-block) + 72px); }
.site-foot__dinamai img { flex-shrink: 0; }
.site-foot__nav a, .site-foot__legal-nav a, .site-foot__social a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-foot__social, .site-foot__nav, .site-foot__legal-nav { row-gap: 4px; }
.programs-float, .wa-float { border-radius: 3px; min-height: 52px; line-height: 1.5; }
.programs-float {
  bottom: var(--wa-inset-block);
  right: calc(var(--wa-inset-inline) + 156px);
  padding: 11px 12px;
  background: var(--white);
  border: 1px solid var(--hairline-light);
}
.page--1 .programs-float {
  background: var(--black); color: #ddd; border-color: var(--border-dark);
}
.page--1 .programs-float:hover { color: var(--white); }
.wa-float { font-weight: 500; }

/* La misma voz editorial, conservando las palabras y sus énfasis. */
.scene--01 .opening-emphasis .strong,
.scene--02 .s02-thesis,
.scene--03 .s03-t1,
.scene--04 .ritmo-now,
.scene--05 .materia-lead,
.scene--06 .asi-head,
.scene--07 .ia-q,
.scene--08 .decidir-thesis { font-weight: 500; line-height: 1.1; }
.scene--01 .opening-permanece { line-height: 1.1; }
.scene-control { line-height: 1.5; }
.scene-control__mode { min-height: 44px; text-align: left; }
.s01-next, .s02-next, .s03-next, .s04-next, .s05-next, .s06-next, .s07-next {
  min-height: 44px;
}

/* Historia y Metodología: medida de lectura y superficies de la V5. */
.hist-wrap, .meto-wrap, .doc-wrap {
  max-width: calc(1160px + var(--gutter) * 2);
}
.hist-hero, .meto-hero { padding-top: clamp(3rem, 6vw, 5rem); }
.hist-hero h1 { max-width: 22ch; }
.meto-hero h1 { max-width: 20ch; }
.meto-section:not(.meto-pillars) > h2 { color: var(--black); }
.era--tint, .evidence { background: var(--paper); }
.era, .hist-detail, .meto-section, .counter { border-color: var(--v5-line); }
.era--dark { border-color: var(--hairline-dark); }
.counter__num, .stat__num { font-weight: 500; letter-spacing: -.035em; }
.era__body p, .meto-hero__sub, .hist-hero__sub { line-height: 1.7; }
.era__aside, .stats__since, .hist-detail__table thead th,
.hist-detail__jornadas th span { color: var(--v5-muted); }
.era--dark .era__aside { color: #c7c5c1; }
.hist-detail__table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.hist-detail__table { font-size: .9375rem; }
.hist-detail__table thead th { font-size: .75rem; line-height: 1.5; }
.era-video { text-align: left; border-radius: 3px; }
.era-video__label { min-width: 0; }
.era-video-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.era-video-dialog__close { min-height: 44px; padding-inline: 10px; }
.method-grid, .doors { border-color: var(--v5-line); background: var(--v5-line); }
.method-card, .door { min-width: 0; }
.door__method { color: var(--red); }
.meto-index a { display: inline-flex; align-items: center; min-height: 44px; }
.spine__item { min-width: 0; }
.spine__desc { max-width: 25ch; }
/* Altura suficiente para que la descripción revelada nunca corte palabras.
   Se conserva la transición de max-height y su tiempo originales. */
.spine.is-drawn .spine__desc { max-height: 12em; }

/* Contacto y Manifiesto comparten las dos familias locales de la V5. */
body.page--doc {
  --f-doc: var(--font-body);
  --f-doc-script: var(--font-display);
  --doc-measure: 44rem;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
}
.doc-head h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-display-1); line-height: 1.04; letter-spacing: -.045em;
}
.doc-head .doc-tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  line-height: 1.3; letter-spacing: -.025em;
}
.doc-head { padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.doc-section { border-color: var(--v5-line); }
.doc-section > h2 {
  max-width: 30ch; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.035em; margin-bottom: 1.2rem;
}
.doc-lede { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.7; }
.doc-roles__item h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; }
.doc-roles__item p { font-size: 1rem; line-height: 1.7; }
.doc-roles__item { border-top: 2px solid var(--gold); padding-top: 20px; }
.doc-quote q {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  line-height: 1.15; letter-spacing: -.035em; max-width: 28ch;
}
.doc-sign { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1.2; letter-spacing: -.03em; }
.doc-label, .chan__label, .callform .opt { color: var(--v5-muted); }
.doc-num { color: var(--red); }
.page--doc main .doc-toc a:not(.btn) { min-height: 44px; }
.contacto-page .doc-head h1 { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.chan__value, .chan--sub .chan__value { font-size: 1rem; line-height: 1.65; max-width: 100%; overflow-wrap: anywhere; }
.chan__note { font-size: .875rem; line-height: 1.6; }
.callform input, .callform textarea { border-radius: 3px; min-width: 0; }
.callform fieldset { min-width: 0; }
.callform .opts label { min-height: 44px; }
.callform ::placeholder { color: var(--v5-muted); }
.contacto-form > summary { max-width: 100%; }

/* Grillas intermedias: el contenido determina cuántas columnas caben. */
@media (min-width: 720px) and (max-width: 1100px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { border-bottom: 1px solid var(--hairline-dark); padding: 24px; }
  .pillar:first-child { padding-left: 24px; }
  .pillar:nth-child(even) { border-right: 0; }
  .pillar:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .spine__node span { font-size: 1.125rem; }
  .spine__desc { padding-inline: 8px; font-size: .9375rem; }
}

@media (max-width: 899.98px) {
  .scene--01 .s01-frame, .scene--02 .s02-frame,
  .scene--03 .s03-frame, .scene--04 .s04-frame,
  .scene--05 .s05-frame, .scene--06 .s06-frame,
  .scene--07 .s07-frame, .scene--08 .s08-frame {
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(2.5rem, 7vw, 4rem) 6rem;
  }
  .spine__desc { margin-left: clamp(2rem, 5vw, 2.75rem); max-width: 32ch; }
  /* Controles de modo de recorrido · el modo «Ver como película» sólo existe
     en escritorio (portal.js, eligible(): >=900px y movimiento normal). Bajo
     ese ancho los dos botones no hacen nada, así que no se ofrecen: el par
     completo se retira, no sólo el rojo — «Explorar / scrollear a tu ritmo»
     es el apagado de la película, sin ella no significa nada. */
  .scene-control { display: none; }
}

@media (max-width: 700px) {
  :root {
    --wa-inset-inline: max(16px, env(safe-area-inset-right));
    --wa-inset-block: calc(12px + env(safe-area-inset-bottom));
  }
  .hist-close__actions, .meto-close__actions { flex-direction: column; }
  .programs-float, .wa-float { min-height: 44px; }
  .hist-close__actions .btn, .meto-close__actions .btn { width: 100%; justify-content: center; }
  .programs-float { left: max(16px, env(safe-area-inset-left)); right: auto; bottom: var(--wa-inset-block); padding: 11px 12px; font-size: .75rem; }
  .wa-float { padding: 11px 14px; font-size: .8125rem; }
  .site-foot__wa { max-width: 100%; font-size: .875rem; }
  .hist-stickystats { justify-content: space-between; gap: 8px; font-size: .6875rem; line-height: 1.4; padding-block: 10px; }
  .hist-stickystats span:nth-child(2) { display: block; }
  .hist-stickystats strong { display: block; font-size: .9375rem; margin: 0 0 3px; }
  .counter { gap: 24px; }
  .counter__item { flex: 1 1 125px; }
  .doc-quote figcaption { font-size: .6875rem; }
  .doc-head { padding-bottom: 2rem; }
  .doc-roles { gap: 2rem; }
  .era-video__thumb { width: 64px; height: 50px; }
}

/* Alto mínimo editorial: los marcos no recortan el texto al bajar el
   alto de ventana, girar una tablet o aumentar el zoom. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js-motion .scene--01 .s01-frame { min-height: 640px; }
  .js-motion .scene--02 .s02-frame { min-height: 780px; }
  .js-motion .scene--03 .s03-frame { min-height: 780px; }
  .js-motion .scene--04 .s04-frame,
  .js-motion .scene--05 .s05-frame,
  .js-motion .scene--06 .s06-frame,
  .js-motion .scene--07 .s07-frame,
  .js-motion .scene--08 .s08-frame {
    display: grid; place-items: center; height: auto;
    min-height: max(640px, 100dvh); padding-block: 124px 156px;
  }
  .js-motion .scene--04 .s04-frame {
    min-height: max(640px, calc(100dvh - var(--header-h)));
    padding-bottom: 220px;
  }
  .js-motion .scene--04 .ritmo,
  .js-motion .scene--05 .materia,
  .js-motion .scene--06 .asi,
  .js-motion .scene--07 .ia,
  .js-motion .scene--08 .decidir {
    position: relative; inset: auto; transform: none;
  }
  /* En 900px coincidían las reglas del eje vertical y el horizontal. */
  .scene--03 .s03-seq { height: 72px; display: block; }
  .scene--03 .s03-track { display: block; }
  .scene--03 .s03-stop { position: absolute; flex-direction: column; align-items: flex-start; }
  .scene--03 .s03-stop--result { align-items: flex-end; }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .opening-controls, .ritmo-controls { max-width: 340px; gap: 8px 16px; }
}

/* Mismo criterio en escritorio con movimiento reducido: la película tampoco
   corre, así que los controles tampoco se ofrecen. */
@media (prefers-reduced-motion: reduce) {
  .scene-control { display: none; }
}

/* Las anclas dejan a la vista el título bajo las barras persistentes. */
main [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.page--historia main [id] { scroll-margin-top: calc(var(--header-h) + 90px); }

/* En la lectura con movimiento reducido, los hijos de las dos columnas
   de apertura también vuelven al flujo: heredaban anclajes absolutos. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .scene--01 .s01-left h1,
  .js-motion .scene--01 .opening-permanece,
  .js-motion .scene--01 .opening-emphasis .lead,
  .js-motion .scene--01 .opening-emphasis .strong {
    position: static; inset: auto; white-space: normal;
  }
  .js-motion .scene--01 .term-field { display: none; }
}

/* =============================================================================
   Menú institucional · aprobado por Ignacio el 16/09/2026
   Desde 900 px la navegación queda siempre visible (antes sólo en la apertura):
   cuatro destinos principales + Contacto como botón, y a la derecha, más
   apagados, los accesos por público (Alumnos ↗ · Antiguos alumnos).
   Bajo 900 px sigue el botón MENÚ con overlay. El header se esconde al bajar
   y reaparece al subir (portal.js). Criterio en DISEÑO-PORTAL-2026.md §11.
   ========================================================================== */
.site-header { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.site-header.site-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

.global-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.global-nav ul { flex-wrap: nowrap; align-items: center; gap: 0 clamp(1.1rem, 2vw, 1.75rem); }
.global-nav a { white-space: nowrap; }
.global-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.site-header--dark .global-nav a[aria-current="page"] { color: var(--white); }
.site-header--light .global-nav a[aria-current="page"] { color: var(--black); }

.global-nav .nav-contact { border: 1px solid currentColor; padding: 7px 15px; border-radius: 2px; }
.global-nav .nav-contact[aria-current="page"] { box-shadow: none; }
.site-header--dark .global-nav .nav-contact:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }
.site-header--light .global-nav .nav-contact { color: var(--red-dark); }
.site-header--light .global-nav .nav-contact:hover { color: var(--white); background: var(--red-dark); border-color: var(--red-dark); }

.global-nav__utility {
  font-size: .8125rem;
  padding-left: clamp(1.25rem, 2.4vw, 2.5rem);
  border-left: 1px solid var(--hairline-dark);
  gap: 0 18px !important;
}
.site-header--dark .global-nav__utility a { color: rgba(255, 255, 255, .56); }
.site-header--dark .global-nav__utility a:hover { color: var(--white); }
.site-header--light .global-nav__utility { border-left-color: var(--hairline-light); }
.site-header--light .global-nav__utility a { color: #6b6b6b; }

@media (min-width: 900px) {
  .site-header:not(.site-header--opening) .global-nav { display: flex; }
  .site-header .menu-toggle { display: none; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .global-nav, .global-nav ul { gap: 0 1rem; }
  .global-nav__utility { padding-left: 1rem; }
}
@media (max-width: 899.98px) {
  .site-header .global-nav { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
}

/* Overlay (celular): principal grande · WhatsApp · accesos · legales. */
.overlay-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .16em; }
.overlay-aside {
  border-right: 2px solid var(--gold);
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  text-align: right;
}
.overlay-wa { font-size: var(--text-body-lg); color: var(--gold); }
.overlay-wa:hover { color: var(--white); }
.overlay-utility, .overlay-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.overlay-utility { font-size: var(--text-body-base); color: rgba(255, 255, 255, .72); }
.overlay-legal { font-size: .8125rem; color: rgba(255, 255, 255, .5); }
.overlay-utility a:hover, .overlay-legal a:hover { color: var(--white); }
.overlay-utility a, .overlay-legal a, .overlay-wa { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .overlay-aside {
    border-right: 0;
    border-top: 2px solid var(--gold);
    padding: 20px 0 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }
  .overlay-utility, .overlay-legal { justify-content: flex-start; }
}

/* Barras fijas que dependen del header: acompañan su ocultamiento. */
.hist-stickystats { top: var(--header-offset, var(--header-h)); transition: top .28s cubic-bezier(.2, .7, .2, 1); }
body.header-hidden { --header-offset: 0px; }
@media (prefers-reduced-motion: reduce) { .hist-stickystats { transition: none; } }

/* Footer institucional: los legales, más legibles. */
.site-foot__legal-nav a { color: rgba(255, 255, 255, .86); font-weight: 500; }