/* 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; }
  .e-wrap-narrow > *, .e-wrap-narrow .e-list, .e-wrap-narrow .e-autoridad { max-width: 1040px; }
  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); }

  /* header (compartido con inicio) */
  .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; }
  .site-header.is-scrolled .main-nav a { font-size: 0.85rem; }
  .main-nav a:hover { color: var(--ink); }
  .main-nav a.active { color: var(--ink); box-shadow: inset 0 -2px var(--gold); }
  .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: mismo padding que maqueta-noticia.html, antes eran 26px acá
     contra 14px ahí (quedó desalineado cuando el de noticia se achicó como
     parte del ajuste del hero, sin repetir el mismo cambio acá). El borde va
     en el <nav> exterior, sin la clase "wrap" (ancho completo de la
     pantalla, mismo patrón que .escuela-tabs), no en .breadcrumb-inner
     (esa sí tiene "wrap", ancho limitado y centrado): así la línea llega de
     punta a punta, no solo hasta donde llega el texto. */
  .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; }

  /* banner de escuela */
  .escuela-hero { position: relative; min-height: 46vh; 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: 24px; }
  .escuela-hero .circle-badge--lg { width: 150px; height: 150px; font-size: 0.85rem; }
  .escuela-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: #fff; line-height: 1.1; }
  .escuela-hero .eyebrow { color: var(--gold-bright); margin: 0; }

  /* tabs de escuela */
  .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); }

  /* secciones */
  .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; }
  /* Texto ceremonial tipo "Ser Capitán" (ver generador/paginas/escuela.js,
     generarPaginaEscuela()): misma fuente que los títulos, un poco menor,
     dorado, centrado. */
  .pagina-verso { font-family: Cambria, Constantia, Georgia, "Times New Roman", serif; font-size: 1.35rem; line-height: 1.85; color: var(--gold-deep); text-align: center; }
  .e-lead { font-family: Cambria, Constantia, Georgia, serif; font-size: 1.25rem; line-height: 1.55; color: var(--ink); margin: 0; }
  .e-subhead { font-size: 1.1rem; margin: 34px 0 14px; }
  .e-section p { color: var(--ink-soft); }
  .e-section p a, .e-section li a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
  /* Imagen intercalada en el cuerpo de una página propia (ver ![alt](archivo)
     en generador/contenido.js): ancho completo del texto, sin recorte. */
  .pagina-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 2px; margin: 28px 0; }
  /* Banner hero opcional de una página propia (foto_hero en su frontmatter):
     a diferencia del hero de noticia/escuela, el título va DEBAJO, no
     superpuesto, así que no hace falta scrim ni lógica de contain/cover para
     legibilidad, solo mostrar la foto entera recortada a una franja. */
  .pagina-hero-banner { width: 100%; max-height: 46vh; overflow: hidden; }
  .pagina-hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Sin hero, la sección de la página quedaría con el padding-top pensado
     para la transición DESDE un hero (64px), dejando un salto vacío grande
     entre el breadcrumb y el título. Con hero, el padding de siempre alcanza. */
  .pagina-suelta-sin-hero { padding-top: 24px; }
  .e-section p a:hover { color: var(--gold-bright); }

  .e-list { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); }
  .e-list--check { list-style: none; padding-left: 0; }
  .e-list--check li { position: relative; padding-left: 26px; }
  .e-list--check li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }

  .btn-gold-solid { display: inline-flex; margin-top: 26px; padding: 13px 26px; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 0.92rem; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .btn-gold-solid:hover { background: var(--gold-bright); }

  .noticias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .noticias-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .noticia-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); display: block; transition: box-shadow 0.15s, transform 0.15s; }
  .noticia-card:hover { box-shadow: 0 12px 30px rgba(20,24,20,0.14); transform: translateY(-2px); }
  .noticia-card:hover h3 { color: var(--gold-deep); }
  .noticia-media { aspect-ratio: 16/10; background: linear-gradient(140deg, #2a3140, #171b22); position: relative; }
  .noticia-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 30%, rgba(214,172,102,0.3), transparent 60%); }
  .noticia-media--2 { background: linear-gradient(140deg, #33291f, #191510); }
  .noticia-media--3 { background: linear-gradient(140deg, #232c26, #12160f); }
  .noticia-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
  .noticia-meta { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 0.76rem; }
  .noticia-meta span { color: var(--gold-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .noticia-meta time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .noticia-body h3 { font-size: 1.1rem; line-height: 1.3; }
  .noticia-body p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
  .section-head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }

  .doc-list { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .doc-collapse summary { cursor: pointer; color: var(--gold-deep); font-weight: 600; font-size: 0.92rem; margin-bottom: 14px; list-style: none; }
  .doc-collapse summary::-webkit-details-marker { display: none; }
  .doc-collapse summary::before { content: '▸ '; }
  .doc-collapse[open] summary::before { content: '▾ '; }
  .doc-collapse summary:hover { color: var(--gold); }
  .doc-item { background: var(--panel); display: flex; align-items: center; gap: 16px; padding: 18px 20px; transition: background 0.15s; }
  .doc-item:hover { background: var(--paper); }
  .doc-item:hover .doc-cta { color: var(--gold); }
  .doc-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); color: var(--gold-bright); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; }
  .doc-info { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
  .doc-name { font-weight: 600; color: var(--ink); }
  .doc-meta { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .doc-cta { color: var(--gold-deep); font-weight: 700; font-size: 0.88rem; margin-left: 12px; }

  .circle-badge { border-radius: 50%; flex: none; background: var(--navy-deep); border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; letter-spacing: 0.02em; color: var(--gold-bright); padding: 10px; }

  /* margin: 0 auto acá, no solo justify-content: la regla ".e-wrap-narrow > *"
     le pone max-width:1040px pero deja el ancho real (auto) del bloque en
     "pegado a la izquierda" dentro de un padre más ancho (~1124px); sin este
     margen, todo el sobrante quedaba de un solo lado en vez de repartido. */
  .e-autoridad { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto; }
  .e-autoridad h3 { font-size: 1.2rem; }
  .e-autoridad p { margin: 4px 0 0; }
  .e-depende { font-size: 0.85rem; margin-top: 10px !important; }
  .e-depende a { color: var(--gold-deep); font-weight: 600; }
  .e-depende a:hover { color: var(--gold); }
  .placeholder-name { font-style: italic; opacity: 0.6; font-weight: 600; }

  .hex-photo { position: relative; display: block; width: 130px; height: 153px; }
  /* especificidad mayor a propósito: la hoja de estilos compartida (cargada
     después de esta) redefine .hex-photo con "margin: 0 auto", pensado para
     centrar un bloque suelto. Dentro de este flex row, un margen auto absorbe
     todo el espacio libre y empuja la foto lejos del texto. Sin este
     selector más específico, esa regla compartida gana por venir después. */
  .e-autoridad .hex-photo { margin: 0; }
  .hex-photo--sm { width: 130px; height: 153px; }
  .hex-photo svg:first-child { width: 100%; height: 100%; }
  .hex-photo path { fill: #cacaca; stroke: #8f8f8f; stroke-width: 1.5; }
  .hex-photo-icon { position: absolute; inset: 0; width: 42%; height: 42%; margin: auto; fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }

  /* footer (compartido con inicio) */
  .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; }
    .noticias-grid, .noticias-grid--2 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .e-autoridad { flex-direction: column; align-items: center; text-align: center; }
    /* El nombre completo de la escuela como "página actual" del breadcrumb es
       redundante en mobile: el mismo texto aparece de nuevo, grande, en el
       h1 apenas abajo. Se recorta a una sola línea en vez de repetirlo entero
       (mismo tratamiento ya confirmado en la ficha de noticia). */
    .breadcrumb-inner { padding: 12px 28px; flex-wrap: nowrap; }
    .breadcrumb-inner span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
    /* Algunos nombres de escuela son muy largos (89 caracteres la más larga):
       con el escudo+título superpuestos sobre la foto (patrón de desktop),
       min-height:46vh con overflow:hidden podía recortar el nombre en mobile
       en vez de solo apretarlo. Primer intento (dejar la caja crecer con
       position:static + height:auto) mostró un problema real con el inset
       negativo (-10%) de la foto de fondo. Se pasa al mismo patrón ya
       probado en la ficha de noticia: foto con alto fijo separada, texto
       abajo en flujo normal con fondo propio, en vez de superpuesto. */
    .escuela-hero { display: block; min-height: 0; height: auto; overflow: visible; }
    .escuela-hero-media { position: static; inset: auto; width: 100%; height: 200px; }
    .escuela-hero-scrim { display: none; }
    .escuela-hero-content { position: static; padding: 20px 20px 24px; background: var(--navy-deep); }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  .logo-real { background-image: url("/img/maqueta-escuela-1.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }