/* Modo oscuro fijo para todos los visitantes: no sigue la preferencia
     de sistema del navegador, una sola paleta. */
  /* Las variables de color (--paper, --ink, --gold, etc.) NO se definen acá:
     viven una sola vez en maqueta-home-imae.html. En el sitio real llegan
     heredadas desde estilos.css, que siempre carga antes que la hoja propia
     de esta página (ver layout.js, pagina()). Si esta maqueta se abre sola
     (fuera del generador, ej. publicada como Artifact), se va a ver sin
     colores: es la maqueta de home la que hay que abrir para eso. */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
  h1, h2, h3, .brand-word strong { font-family: Cambria, Constantia, Georgia, "Times New Roman", serif; text-wrap: balance; margin: 0; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  a { color: inherit; text-decoration: none; }
  .section-eyebrow, .eyebrow, .footer-heading { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 0 0 10px; }
  .text-link { color: var(--gold-deep); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
  .text-link:hover { color: var(--gold); }

  .site-header { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--line); }
  .llamados-bar { background: var(--gold); color: var(--navy-deep); }
  .llamados-inner { display: flex; align-items: center; gap: 12px; padding: 9px 28px; font-size: 0.86rem; flex-wrap: wrap; }
  .llamados-tag { font-weight: 800; letter-spacing: 0.02em; }
  .llamados-detail { opacity: 0.85; }
  .llamados-link { margin-left: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

  .header-inner { display: flex; align-items: center; gap: 24px; padding: 18px 28px; transition: padding 0.25s ease; }
  .site-header.is-scrolled .header-inner { padding: 12px 28px; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-mark { width: 46px; height: 46px; flex: none; transition: width 0.25s ease, height 0.25s ease; }
  .site-header.is-scrolled .brand-mark { width: 34px; height: 34px; }
  .brand-word { display: flex; flex-direction: column; line-height: 1.2; }
  .brand-word strong { font-size: 1.2rem; letter-spacing: 0.02em; transition: font-size 0.25s ease; }
  .brand-word em { font-style: normal; font-size: 0.7rem; color: var(--ink-soft); max-width: 260px; transition: font-size 0.25s ease, max-width 0.25s ease; }
  .site-header.is-scrolled .brand-word strong { font-size: 1.04rem; }
  .site-header.is-scrolled .brand-word em { font-size: 0.62rem; max-width: 220px; }
  .main-nav { display: flex; gap: 4px; margin-left: auto; }
  .main-nav a { padding: 8px 14px; font-size: 0.92rem; font-weight: 600; border-radius: 2px; color: var(--ink-soft); transition: font-size 0.25s ease; }
  .main-nav a:hover { color: var(--ink); }
  .main-nav a.active { color: var(--ink); box-shadow: inset 0 -2px var(--gold); }
  .site-header.is-scrolled .main-nav a { font-size: 0.85rem; }
  .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }

  .breadcrumb { border-bottom: 1px solid var(--line); }
  .breadcrumb-inner { display: flex; gap: 8px; align-items: center; padding: 14px 28px; font-size: 0.82rem; color: var(--ink-soft); }
  .breadcrumb-inner a:hover { color: var(--gold-deep); }
  .breadcrumb-inner span[aria-current] { color: var(--ink); font-weight: 600; }

  .escuela-hero { position: relative; min-height: 40vh; overflow: hidden; isolation: isolate; }
  .escuela-hero-media { position: absolute; inset: -10% 0 -10% 0; background: radial-gradient(ellipse at 70% 20%, rgba(214,172,102,0.3), transparent 55%), linear-gradient(155deg, #232c3a 0%, #141922 55%, #0b0e13 100%); }
  .escuela-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,16,0.9) 0%, rgba(10,12,16,0.3) 60%, rgba(10,12,16,0.05) 100%); }
  .escuela-hero-content { position: absolute; left: 0; right: 0; bottom: 0; color: #f3f1ea; padding: 48px 28px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .escuela-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: #fff; line-height: 1.15; }
  .escuela-hero .eyebrow { color: var(--gold-bright); margin: 0; }

  .escuela-tabs { position: sticky; top: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--line); }
  .escuela-tabs-inner { display: flex; gap: 4px; overflow-x: auto; }
  .escuela-tabs a { padding: 16px 18px; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid transparent; }
  .escuela-tabs a:hover { color: var(--ink); }
  .escuela-tabs a.active { color: var(--ink); border-color: var(--gold); }

  .e-section { padding: 64px 0; scroll-margin-top: 108px; }
  .e-section--alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .e-section h2 { font-size: 1.7rem; margin-bottom: 20px; }
  .e-wrap-narrow > *, .e-wrap-narrow .e-list, .e-wrap-narrow .e-autoridad { max-width: 1040px; }
  .e-section p { color: var(--ink-soft); max-width: 68ch; }

  /* timeline: centrada, alterna izquierda/derecha */
  .timeline { position: relative; max-width: 900px; margin: 48px auto 0; }
  .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); transform: translateX(-50%); }
  .timeline-fill { position: absolute; top: 0; left: 50%; width: 2px; height: 0%; background: var(--gold-bright); box-shadow: 0 0 10px rgba(214,172,102,0.6); transform: translateX(-50%); transition: height 0.1s linear; z-index: 1; }
  .timeline-item { position: relative; width: 50%; padding-bottom: 48px; }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item::before { content: ""; position: absolute; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--line); z-index: 2; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
  .timeline-item:nth-child(odd) { left: 0; padding-right: 44px; text-align: right; }
  .timeline-item:nth-child(odd)::before { right: -9px; }
  .timeline-item:nth-child(even) { left: 50%; padding-left: 44px; text-align: left; }
  .timeline-item:nth-child(even)::before { left: -9px; }
  .timeline-card { display: inline-block; text-align: left; max-width: 380px; }
  .timeline-year { font-family: Cambria, Constantia, Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-soft); margin-bottom: 8px; line-height: 1; transition: color 0.3s ease, text-shadow 0.3s ease; }
  /* is-passed: la línea de progreso ya llegó a este punto, queda prendido de forma permanente */
  .timeline-item.is-passed::before { background: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright); }
  /* is-active: además, es el más cercano al centro ahora mismo, año con brillo, punto más grande */
  .timeline-item.is-active .timeline-year { color: var(--gold-bright); text-shadow: 0 0 24px rgba(214,172,102,0.55); }
  .timeline-item.is-active::before { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 14px 4px rgba(214,172,102,0.5); transform: scale(1.15); }
  .timeline-date { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
  .timeline-subtitle { margin: 0 0 8px; font-weight: 600; color: var(--ink); font-size: 0.96rem; }
  .timeline-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .timeline-card > p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.94rem; }
  .timeline-item--pending::before,
  .timeline-item--pending.is-passed::before,
  .timeline-item--pending.is-active::before { background: var(--panel); box-shadow: 0 0 0 2px var(--line); border-color: var(--paper); }
  .timeline-item--pending.is-active::before { transform: scale(1.1); }
  .timeline-item--pending.is-active .timeline-year { color: var(--ink-soft); text-shadow: none; }
  .timeline-item--pending .timeline-year { font-style: italic; }
  .timeline-item--pending .timeline-card { opacity: 0.82; }
  .timeline-item--pending .timeline-card h3 { color: var(--ink-soft); }

  /* misión */
  .mision-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
  .mision-list li { position: relative; padding-left: 22px; color: var(--ink-soft); }
  .mision-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--gold); }

  /* organigrama: placeholder de imagen, a la espera del archivo vectorizado */
  .orgchart-placeholder { aspect-ratio: 1024 / 674; max-width: 900px; margin: 24px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--panel); border: 2px dashed var(--line); color: var(--ink-soft); }
  .orgchart-placeholder-icon { width: 56px; height: 56px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
  .orgchart-placeholder p { margin: 0; font-weight: 700; }
  .orgchart-placeholder-note { font-weight: 400; font-size: 0.86rem; }

  .site-footer { background: var(--navy-deep); color: #cfd3d6; padding-top: 60px; }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
  .footer-col a { color: #cfd3d6; }
  .footer-col a:hover { color: var(--gold-bright); }
  .footer-col p { margin: 0; color: #9099a1; }
  .footer-heading { color: var(--gold-bright); }
  .footer-col--brand p { color: #cfd3d6; font-family: Cambria, Georgia, serif; font-size: 1rem; margin-top: 14px; }
  .map-placeholder { position: relative; height: 130px; background: #1b212b; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
  .map-placeholder iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
  .footer-bottom { padding: 20px 28px 26px; font-size: 0.78rem; color: #7a828a; }

  @media (max-width: 860px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .timeline::before, .timeline-fill { left: 15px; }
    .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding-left: 40px; padding-right: 0; }
    .timeline-item::before, .timeline-item:nth-child(odd)::before, .timeline-item:nth-child(even)::before { left: 9px; right: auto; }
    .timeline-card { text-align: left; max-width: none; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .timeline-year, .timeline-item::before, .timeline-fill { transition: none; }
    .timeline-item.is-active::before { transform: none; }
  }
  .logo-real { background-image: url("/img/maqueta-institucion-imae-1.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }