@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/worksans-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --text: #111111;
  --text-soft: #777777;
  --border: #e5e5e5;
  --brand: #b3262d;
  --brand-dark: #921d23;
  --black: #000000;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  --radius-card: 12px;
  --radius-soft: 8px;
  --radius-pill: 999px;
  --container: 1380px;
  --header-height: 120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin: 0 auto;
}

/* Header */
.site-header {
  background: #efefef;
  border-bottom: 1px solid #dcdcdc;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  transition:
    top .28s ease,
    left .28s ease,
    right .28s ease,
    width .28s ease,
    border-radius .28s ease,
    box-shadow .28s ease,
    transform .28s ease,
    opacity .28s ease;
}
:root {
  --header-height: 120px;
  --nav-height: 72px;
}

/* base */
:root {
  --header-height: 76px;
  --header-height-compact: 56px;
  --logo-height: 54px;
  --logo-height-compact: 40px;
  --nav-height: 72px;
}

body {
  padding-top: calc(var(--header-height) + var(--nav-height));
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.78) 100%),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height .28s ease, padding .28s ease;
}

.brand,
.brand picture { display: block; }

.brand img {
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  transition: height .28s ease;
}

/* Logo CPA (izquierda) y logo del colegio (derecha) */
.brand-cpa img { height: var(--logo-height); }
.brand-school img { height: 46px; }

/* Escudo del colegio: solo en móvil */
.brand-crest { display: none; }
.brand-crest img { height: 40px; }

.brand-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

/* desktop: retraer header al bajar */
body.nav-hidden .header-inner {
  min-height: var(--header-height-compact);
}

body.nav-hidden .brand-cpa img {
  height: var(--logo-height-compact);
}

body.nav-hidden .brand-school img {
  height: 36px;
}


body.nav-hidden .site-header {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.header-actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.menu-toggle {
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.menu-icon {
  width: 28px;
  display: grid;
  gap: 5px;
}

.menu-icon span {
  display: block;
  height: 4px;
  background: #111;
  border-radius: 999px;
}

/* nav desktop */
.main-nav {
  background: #f7f7f7;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  max-height: var(--nav-height);
  overflow: hidden;
  transition:
    max-height .28s ease,
    opacity .28s ease,
    transform .28s ease,
    border-color .28s ease;
}

.main-nav .container {
  display: flex;
  align-items: center;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* desktop: ocultar solo nav al bajar */
body.nav-hidden .main-nav {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: #222;
  transition: .2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  background: #111;
  color: #fff;
}

.main-nav a.becas-link {
  background: #0f2a44;
  color: #fff;
}

/* Link "Tienda" (12-ago-2026): solo se imprime en el HTML cuando el CPA
   abrió la tienda al público (tienda_estado.abierta, ver header.php) — acá
   solo el estilo. Negro sólido para separarlo del resto (mismo criterio
   que ya usaba .becas-link) + una etiqueta tipo "tag" con la punta de
   marcador de libro (el notch triangular abajo). En mobile la etiqueta
   queda en línea, no flotando encima, para no chocar con el recorte del
   menú desplegable. */
.main-nav a.nav-tienda-abierta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #12151b;
  color: #fff;
}
.main-nav a.nav-tienda-abierta:hover {
  background: #000;
}
.nav-tienda-tag {
  display: inline-block;
  background: #b9925a;
  color: #12151b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
@media (min-width: 901px) {
  .main-nav a.nav-tienda-abierta {
    position: relative;
    padding-right: 22px;
  }
  .nav-tienda-tag {
    position: absolute;
    top: -9px;
    right: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  .nav-tienda-tag::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #b9925a;
  }
}
@media (max-width: 900px) {
  .main-nav a.nav-tienda-abierta {
    justify-content: space-between;
  }
}

/* Link "Convenios" del header (19-ago-2026): mismo tratamiento que Tienda
   arriba (pill + etiqueta flotante con la puntita de marcador), pero con
   la paleta roja de marca en vez del pill oscuro — es beneficios, no una
   sección "abierta/cerrada". */
.main-nav a.nav-convenios {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
}
.main-nav a.nav-convenios:hover {
  background: var(--brand-dark);
}
.nav-convenios-tag {
  display: inline-block;
  background: #fff;
  color: var(--brand);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
@media (min-width: 901px) {
  .main-nav a.nav-convenios {
    position: relative;
    padding-right: 22px;
  }
  .nav-convenios-tag {
    position: absolute;
    top: -9px;
    right: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  .nav-convenios-tag::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
  }
}
@media (max-width: 900px) {
  .main-nav a.nav-convenios {
    justify-content: space-between;
  }
}

/* Link "Corrida" del header (21-ago-2026): mismo tratamiento en pill +
   etiqueta flotante que Tienda/Convenios arriba, pero con su propio color
   (dorado/brass) para que no se confunda con ninguna de las otras dos —
   negro sólido = Tienda, rojo de marca = Convenios, dorado = Corrida. */
.main-nav a.nav-corrida {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brass);
  color: #12151b;
}
.main-nav a.nav-corrida:hover {
  background: #a37e46;
}
.nav-corrida-tag {
  display: inline-block;
  background: #12151b;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
@media (min-width: 901px) {
  .main-nav a.nav-corrida {
    position: relative;
    padding-right: 22px;
  }
  .nav-corrida-tag {
    position: absolute;
    top: -9px;
    right: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  .nav-corrida-tag::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #12151b;
  }
}
@media (max-width: 900px) {
  .main-nav a.nav-corrida {
    justify-content: space-between;
  }
}


/* mobile */
@media (max-width: 900px) {
  /* 4-sep-2026: el header en móvil siempre queda en su vista compacta (antes
     solo se achicaba al bajar, vía body.nav-hidden) — mismos valores que ya
     usaba esa versión compacta (54px / logo 38px), ahora de entrada.
     Se redefine también la variable para que index.html/contacto.html
     (que la usan directo para separar su contenido del header) calcen. */
  :root{ --header-height: 54px; }
  body {
    padding-top: 54px;
  }

  .header-inner {
    min-height: 54px;
  }

  .brand-cpa img {
    height: 38px;
  }

  /* En móvil: se oculta el logo ancho y también el escudo del colegio (solo queda el logo CPA) */
  .brand-school {
    display: none;
  }

  .brand-crest {
    display: none;
  }

  /* móvil: encoger header + logos al bajar (igual que escritorio) */
  body.nav-hidden .header-inner {
    min-height: 54px;
  }

  body.nav-hidden .brand-cpa img {
    height: 38px;
  }

  .brand-right {
    gap: 12px;
  }

  .header-actions {
    display: flex;
  }

  /* Selector de idioma en móvil: en la misma fila, a la izquierda del botón hamburguesa
     (el orden en el HTML ya lo pone antes que header-actions). Ancho
     ajustado al contenido (no estira a lo ancho). Overrides de tamaño/banderas
     están junto a las reglas base de .lang-switch, más abajo, para ganar la cascada. */

  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    width: auto;
    max-width: 360px;
    margin-left: auto;
    /* anula el recorte de 72px del header de escritorio: el menú debe
       mostrarse completo, no solo el primer ítem */
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s ease;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav .container {
    width: 100%;
    margin: 0;
    padding: 0 14px;
    display: block;
  }

  .main-nav ul {
    display: block;
    gap: 0;
    padding: 8px;
  }

  .main-nav li + li {
    margin-top: 2px;
  }

  .main-nav a {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.2;
  }

  .main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* un menú abierto siempre se ve, aunque el header esté encogido al scrollear */
  body.nav-hidden .main-nav.is-open {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    border-color: #e6e6e6;
  }
}

/* Hero */
.hero {
  padding: 22px 0 28px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items: stretch;
}

.hero-card,
.panel,
.news-card,
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.hero-media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.hero-copy {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: #111;
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.hero-copy h1,
.page-hero-copy h1 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  margin: 0 0 18px;
}

.hero-copy p,
.page-hero-copy p {
  font-size: 20px;
  color: var(--text-soft);
  margin: 0 0 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-secondary {
  background: #fff;
  color: #111;
  border-color: #d8d8d8;
}

.btn-secondary:hover {
  background: #f8f8f8;
}

.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sections */
.section {
  padding: 10px 0 34px;
}

.section-head {
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: 34px;
  margin: 0 0 8px;
}

.section-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 18px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.info-card .card-image,
.news-card .card-image {
  position: relative;
}

.info-card .card-image img,
.news-card .card-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.pill {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #000;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 14px;
}

.card-body {
  padding: 30px 34px;
}

.card-body h3 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 18px;
}

.card-body p {
  margin: 0 0 26px;
  color: var(--text-soft);
  font-size: 18px;
}

.read-more {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.card-date {
  border-top: 1px solid var(--border);
  padding: 18px 34px;
  font-size: 14px;
  color: #a0a0a0;
}

/* Interior pages */
.page-hero {
  padding: 24px 0 16px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.page-hero-copy,
.page-hero-media {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.page-hero-copy {
  padding: 34px;
}

.page-hero-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.content-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 34px;
}

.content-panel h2 {
  font-size: 30px;
  margin: 0 0 18px;
}

.content-panel p,
.content-panel li {
  color: var(--text-soft);
  font-size: 18px;
}

.content-panel ul {
  margin: 0;
  padding-left: 22px;
}

.document-list {
  display: grid;
  gap: 14px;
}

.document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  background: #fafafa;
}

.document-item strong {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.document-item span {
  color: var(--text-soft);
  font-size: 15px;
}

/* Footer: mismo estilo "vidrio esmerilado" que el header, en todo el sitio.
   z-index explícito y por encima de TODAS las capas fijas de la página
   (.hero-bg z:0, .vignette-global z:55, .grain z:60): en móvil, con el
   fondo fijo (position:fixed) cubriendo todo el viewport, el footer debe
   quedar garantizado por encima sin depender del orden del DOM. */
.site-footer {
  position: relative;
  z-index: 100;
  margin-top: 34px;
  padding: 18px 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.78) 100%),
    linear-gradient(0deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid transparent;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 14px;
}

.site-footer h3 {
  margin: 0 0 3px;
  font-size: 13px;
  color: #12151b;
}

.site-footer p,
.site-footer li,
.site-footer a {
  color: rgba(18,21,27,.75);
  font-size: 12.5px;
  line-height: 1.35;
  margin: 0;
}

.site-footer a:hover { color: #12151b; }

.footer-org { text-align: left; }
.footer-copyright { text-align: center; }
.footer-copyright p { color: rgba(18,21,27,.65); font-size: 12px; }
.footer-contact { text-align: right; }

/* Correo · Instagram · Colegio en una sola línea, separados por su propio ícono */
.footer-contact .contact-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px 16px;
}
.footer-contact .contact-list a { display: inline-flex; align-items: center; gap: 6px; }

/* Espacio para que el selector de idioma flotante (abajo a la derecha) no quede
   montado sobre el contacto del footer en escritorio */
@media (min-width: 901px) {
  .site-footer { padding-bottom: 58px; }
}

/* Footer en móvil: se apilan las 3 columnas centradas.
   4-sep-2026: quedaba muy alto en pantallas chicas (3 bloques de texto
   apilados con harto aire entre ellos) — se compacta el espaciado y el
   tamaño de letra, sin sacar ningún dato. */
@media (max-width: 900px) {
  .site-footer{ margin-top:10px; padding:10px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 4px; }
  .footer-org, .footer-copyright, .footer-contact { text-align: center; }
  .footer-contact .contact-list { justify-content: center; }
  .site-footer h3{ font-size:11.5px; margin-bottom:1px; }
  .site-footer p, .site-footer li, .site-footer a{ font-size:11px; line-height:1.25; }
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-grid,
  .page-hero-grid,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .hero-media img,
  .page-hero-media img {
    height: 320px;
  }

  .card-body,
  .content-panel,
  .hero-copy,
  .page-hero-copy {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .brand-copy span {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .hero-copy p,
  .page-hero-copy p,
  .section-head p,
  .card-body p,
  .content-panel p,
  .content-panel li {
    font-size: 16px;
  }

  .card-body h3 {
    font-size: 24px;
  }

  .document-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.contact-form-fields {
  display: grid;
  gap: 14px;
}

.form-control {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

textarea.form-control {
  height: auto;
  padding: 14px;
  resize: vertical;
}


.menu-toggle {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.team-list,
.event-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

/* la lista de integrantes fluye en columnas según el ancho de pantalla */
.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 32px;
}

.team-list li,
.event-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* Próximas actividades (13-ago-2026): cada ítem ahora trae fecha + hora
   (antes era solo el título, texto suelto). */
.event-list__fecha {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #b9925a;
  margin-bottom: 2px;
}
.event-list__desc {
  display: block;
  font-size: .88rem;
  color: #666;
  margin-top: 3px;
}
.event-list--vacio {
  color: #888;
  font-size: .92rem;
}

.cta-block {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.main-nav a.becas-link {
  background: #0f2a44; /* azul colegio */
  color: #fff;
}
.content-panel strong {
  color: var(--text);
}

.content-panel a {
  color: var(--text);
}

.content-panel a:hover {
  text-decoration: underline;
}

:root {
  --compact-offset: 12px;
}

.instagram-carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.instagram-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.instagram-carousel-header h3 {
  margin: 0;
  font-size: 22px;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.instagram-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(25% - 8px);
  gap: 10px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.ig-slide {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.ig-slide img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform .25s ease;
}

.ig-slide:hover img {
  transform: scale(1.04);
}

.ig-cta {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .instagram-carousel {
    grid-auto-columns: calc(50% - 6px);
  }
}

@media (max-width: 640px) {
  .instagram-carousel {
    grid-auto-columns: 100%;
  }
}

.instagram-feed-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.instagram-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.instagram-feed-header h3 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.1;
}

.instagram-feed-header p {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ig-post {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #eee;
  aspect-ratio: 1 / 1;
}

.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.ig-post:hover img {
  transform: scale(1.04);
}

@media (max-width: 1100px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .instagram-feed-panel {
    padding: 18px;
  }

  .instagram-feed-header {
    flex-direction: column;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Formulario: avisos, honeypot y modal de contacto (global) ===== */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
}
.form-msg { display: none; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.form-msg--ok  { display: block; background: #e7f6ec; color: #12622f; border: 1px solid #b6e3c4; }
.form-msg--err { display: block; background: #fdecec; color: #8a1c1c; border: 1px solid #f3c2c2; }

.cmodal {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.cmodal.is-open { display: flex; opacity: 1; }
.cmodal__panel {
  background: #fff; width: 100%; max-width: 480px;
  border-radius: 16px; padding: 26px 24px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transform: translateY(8px) scale(.98); transition: transform .2s ease;
  max-height: 90vh; overflow-y: auto;
}
.cmodal.is-open .cmodal__panel { transform: none; }
.cmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
/* Color explícito: el modal se inyecta en document.body de cualquier página,
   incluida la portada (que pone el <body> en un color claro para su hero
   oscuro) — sin esto el título heredaba ese color claro y quedaba invisible
   sobre el panel blanco/esmerilado del modal. */
.cmodal__head h3 { margin: 0; font-size: 22px; color: #12151b; }
.cmodal__sub { margin: 0 0 16px; color: var(--text-soft); font-size: 14px; }
.cmodal__close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: #666; padding: 2px 6px; border-radius: 8px;
}
.cmodal__close:hover { background: rgba(0,0,0,.06); color: #111; }
.cmodal .contact-form-fields { display: grid; gap: 12px; }

/* Checkboxes de consentimiento (Newsletter y auto-registro de credencial):
   nunca tuvieron color explícito. En páginas "cine" (index, convenios, etc,
   class="cine-page") el <body> pone color claro (--parchment) para su hero
   oscuro — como el modal se inyecta en ese mismo <body>, el texto here-
   daba ese color claro y quedaba casi invisible sobre el panel blanco del
   modal. Mismo bug ya documentado para .cmodal__head h3, acá nunca se
   había corregido. Enlace/frase clave en rojo de marca para resaltarlos. */
.nl-check { color: #12151b; }
.nl-check a { color: var(--brand); font-weight: 700; }
.nl-check strong { color: var(--brand); }

/* Estado de éxito del modal de Newsletter (12-ago-2026): reemplaza el
   formulario entero (antes el mensaje "Ya estás suscrito" quedaba arriba
   del formulario, que seguía visible — confuso). El logo (mismo
   assets/img/LogoCorreo.png que ya usan los correos salientes) da la
   bienvenida con la propia marca del CPA en vez de un ícono genérico. */
.nl-success { text-align: center; padding: 4px 2px 2px; }
.nl-success__logo {
  display: block; margin: 0 auto 18px; border-radius: 14px;
  box-shadow: 0 12px 28px -10px rgba(179,38,45,.4);
}
.nl-success__title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem;
  color: #12151b; margin: 0 0 12px;
}
.nl-success__body {
  color: #555; font-size: .95rem; line-height: 1.65;
  margin: 0 auto 24px; max-width: 360px;
}
.nl-success__btn { min-width: 140px; }

/* Modal de auto-registro de credencial (19-ago-2026, convenios.html/en/) —
   mismo patrón .cmodal/.nl-success que el de Newsletter, con el panel en
   "vidrio esmerilado" (mismo tratamiento que ya usaba el modal ancho de
   Política de Privacidad, partials/footer.php: fondo translúcido +
   backdrop-filter, deja pasar algo del fondo detrás). */
.cmodal__panel--credencial {
  max-width: 520px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.cmodal__panel--credencial .nl-success__logo { box-shadow: 0 12px 28px -10px rgba(202,33,38,.35); }

/* ===== Selector de idioma: se saca del header y queda fijo abajo a la derecha,
   viaja con el usuario sin importar el scroll ni la página (todo el sitio) ===== */
.lang-switch--header { display: none !important; }
.lang-switch--floating {
  display: inline-flex;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}

/* ===== Selector de idioma (segmentado, en la zona de los logos) ===== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.lang-switch__opt {
  padding: 7px 11px;
  color: #6a6a6a;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__opt + .lang-switch__opt { border-left: 1px solid #ececec; }
.lang-switch__opt:hover { background: #f3f3f3; color: #111; }
.lang-switch__opt.is-active { background: #CA2126; color: #fff; cursor: default; }

/* ===== Banderas en el selector de idioma ===== */
@media (min-width: 901px) {
  .lang-switch { margin-right: 16px; } /* separa del logo del colegio para que quepa la bandera (solo escritorio) */
}
.lang-switch__opt.opt-es::before,
.lang-switch__opt.opt-en::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 13px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  vertical-align: -2px;
}
.lang-switch__opt.opt-es::before { margin-right: 6px; background-image: url("../img/flag-cl.svg"); }
.lang-switch__opt.opt-en::after  { margin-left: 6px;  background-image: url("../img/flag-gb.svg"); }

/* Selector de idioma en móvil: en la misma fila, a la izquierda del botón hamburguesa.
   Más chico, solo banderas. Va DESPUÉS de las reglas base de arriba para ganar la
   cascada (misma especificidad). */
@media (max-width: 900px) {
  .lang-switch {
    margin: 0;
    box-shadow: none;
    border-color: #e2e2e2;
  }
  .lang-switch__opt {
    padding: 4px 7px;
    font-size: 0; /* oculta el texto "ES"/"EN"; las banderas tienen ancho/alto fijo y siguen visibles */
  }
  .lang-switch__opt.opt-es::before,
  .lang-switch__opt.opt-en::after {
    width: 17px;
    height: 11px;
    margin: 0;
  }
}

/* ===== Escritorio: menú integrado en la fila del header (§ cambio ago-2026) ===== */
@media (min-width: 901px) {
  body { padding-top: var(--header-height); } /* ya no hay barra de nav aparte */
  .main-nav {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    max-height: none;
    overflow: visible;
    margin: 0 10px 0 24px;
    display: flex;
    align-items: center;
  }
  .main-nav ul { padding: 0; gap: 4px; flex-wrap: nowrap; }
  .main-nav a { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  /* la nav ya vive en el header: no desaparece al hacer scroll */
  body.nav-hidden .main-nav {
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
}
/* Escritorio angosto: usar el escudo compacto para que quepa el menú en una línea */
@media (min-width: 901px) and (max-width: 1100px) {
  .brand-school { display: none; }
  .brand-crest { display: block; }
  .main-nav a { padding: 7px 10px; }
  .main-nav ul { gap: 2px; }
}

/* ===== Íconos junto a correo/Instagram en el footer ===== */
.site-footer .contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: contain;
}

/* ============================================================
   TEMA CINEMATOGRÁFICO — compartido por las páginas rediseñadas
   (fondo fijo en parallax + tarjetas de vidrio esmerilado).
   index.html trae su propia copia inline de estas mismas reglas
   (por eso no se ve afectado); las páginas nuevas heredan de acá.
   ============================================================ */
:root{
  --ink:        #12151b;
  --brick:      #7c3826;
  --brass:      #b9925a;
  --brass-dim:  #7d6a4c;
  --parchment:  #f2ede2;
  --parchment-dim: #cfc7b8;
  --stone:      #8a8378;
  --display: 'Fraunces', serif;
  --cine-body: 'Work Sans', sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
}

body.cine-page{
  margin:0; background: var(--ink); color: var(--parchment);
  font-family: var(--cine-body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-top: 0 !important;
}
body.cine-page ::selection{ background: var(--brass); color: var(--ink); }

.grain{
  position: fixed; inset:0; z-index: 60; pointer-events:none; opacity:.05; mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette-global{
  /* 4-sep-2026: desactivado a pedido del CPA — oscurecía de más los bordes
     en todas las páginas "cine" (Quiénes Somos, Becas, Contacto,
     Información, etc.). El div sigue en el HTML de esas páginas pero ya
     no pinta nada. */
  display:none;
}
.brandmark{
  position: fixed; top: 28px; left: 28px; z-index: 70;
  display:flex; align-items:center; gap:12px;
  opacity:0; transform: translateY(-8px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  pointer-events:none;
}
.brandmark.show{ opacity:1; transform: translateY(0); }
.brandmark svg{ width:24px; height:24px; }
.brandmark span{ font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--parchment-dim); }

/* 4-sep-2026, a pedido del CPA: antes quedaba `position:fixed` ("parallax" —
   la misma imagen se mantenía detrás de TODA la página, sin despegarse
   nunca del scroll). Se sentía como un velo que te persigue. Ahora
   `absolute`, relativo al `.cine-hero`/`.hero` que lo contiene (ya son
   `position:relative`): la foto de portada queda solo dentro de su propio
   hero, como en cualquier sitio — al scrollear a las secciones de abajo,
   simplemente desaparece. Aplica a TODAS las páginas (ES/EN) de una vez. */
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: center 75%;
  filter: saturate(.9) brightness(.62);
  transform-origin: 55% 40%;
  transform: scale(1.06); /* estado final: fondo estático por defecto (ver .intro-on más abajo) */
}
/* El mismo fondo (misma foto, misma clase .hero-bg) se repite en todas las
   páginas rediseñadas — sin esto, el zoom de entrada se reproducía de nuevo
   cada vez que se navegaba a Becas, Quiénes Somos, Información o Contacto,
   aunque ya se hubiera visto en la portada. Ahora solo se anima la primera
   vez por sesión (misma sessionStorage 'cpaIntroSeen' que usa la portada;
   script "decide antes de pintar" en el <head> de cada página). */
.intro-on .hero-bg img{
  animation: heroZoomIn 4.2s var(--ease-out) both;
}
@keyframes heroZoomIn{
  0%{ transform: scale(1.22); filter: saturate(.9) brightness(.4); }
  100%{ transform: scale(1.06); filter: saturate(.9) brightness(.62); }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(18,21,27,.55) 0%, rgba(18,21,27,.25) 26%, rgba(18,21,27,.35) 55%, rgba(18,21,27,.9) 100%);
}
@media (max-width: 680px){
  .hero-bg img{ object-position: center 92%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation:none; transform:scale(1.06); }
}

/* Tipografía de títulos sobre el fondo oscuro. ".cine-eyebrow" (no ".eyebrow": esa
   clase ya la usa el badge clásico en las páginas sin rediseñar, ej. becas.html) */
.cine-eyebrow{
  font-size: 11px; letter-spacing:.28em; text-transform:uppercase; color: var(--brass);
  margin: 0 0 18px; font-weight:500;
}
.title-xl{
  font-family: var(--display); font-weight:400; font-size: clamp(1.9rem, 6.4vmin, 4.2rem);
  line-height:1.05; letter-spacing:-.01em; margin:0 0 18px; color: var(--parchment);
}
.body-copy{
  font-family: var(--cine-body); font-weight:400; font-size: clamp(.92rem, 1.6vmin, 1.08rem);
  color: var(--parchment-dim); line-height:1.65; margin: 0 0 18px; max-width: 34em;
}
.lede{
  font-family: var(--display); font-style: italic; font-weight:400;
  font-size: clamp(1rem, 2.2vmin, 1.28rem); color: var(--parchment-dim); line-height:1.5; margin:0; max-width: 32em;
}
@keyframes riseIn{ to{ opacity:1; transform: translateY(0); } }
.rise-in{ opacity:0; transform: translateY(18px); animation: riseIn 1s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce){ .rise-in{ animation:none !important; opacity:1 !important; transform:none !important; } }

/* Encabezado corto de página interior (sin el reel de la portada).
   Nombre distinto de .page-hero (usado por el layout claro de dos columnas
   en becas/misión/reglamentos/etc.) para no chocar con esas páginas. */
.cine-hero{
  position: relative; width:100%; min-height: 46vh;
  display:flex; align-items:flex-end; overflow:hidden;
  padding: 16vh 8vw 8vh; z-index:5;
}
@media (max-width: 680px){ .cine-hero{ padding: 15vh 7vw 7vh; min-height:40vh; } }

/* Tarjetas y paneles de vidrio esmerilado */
.glass-section{ position:relative; z-index:5; padding: 8vh 8vw 14vh; }
.glass-head{
  max-width:640px; margin:0 auto 44px; text-align:center;
  padding: 28px 34px; border-radius:14px;
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.5);
}
.glass-head h2{
  font-family: var(--display); font-weight:400; font-size: clamp(1.6rem, 3.6vmin, 2.3rem);
  color:#12151b; margin:0 0 12px;
}
.glass-head p{ color: rgba(18,21,27,.72); font-size:1rem; line-height:1.6; margin:0; }

.glass-panel{
  border-radius:14px; overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.5);
  padding: 30px;
  color: rgba(18,21,27,.78);
}
.glass-panel h2, .glass-panel h3{ font-family: var(--display); font-weight:500; color:#12151b; }
.glass-panel ul, .glass-panel ol{ margin: 0; padding-left: 1.2em; }
.glass-panel li + li{ margin-top: 8px; }
.glass-panel a{ color: var(--brick); }
.glass-panel a:hover{ color:#12151b; }

.glass-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
  max-width:1200px; margin:0 auto;
}
.glass-grid.cols-2{ grid-template-columns: repeat(2, 1fr); max-width: 1000px; }
.glass-card{
  display:flex; flex-direction:column; justify-content:space-between;
  border-radius:14px; overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.5);
}
.glass-card-body{ padding: 28px 26px 8px; }
.glass-card-body h3{ font-family: var(--display); font-weight:500; font-size:1.35rem; color:#12151b; margin:0 0 12px; }
.glass-card-body p{ font-size:.92rem; line-height:1.6; color: rgba(18,21,27,.72); margin:0 0 18px; }
.glass-card .read-more{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--brick);
}
.glass-card .read-more:hover{ color:#12151b; }
.glass-card-tag{
  border-top: 1px solid rgba(18,21,27,.12);
  padding: 14px 26px; font-size:12.5px; color: rgba(18,21,27,.5);
}
@media (max-width: 900px){
  .glass-section{ padding: 6vh 7vw 10vh; }
  .glass-grid, .glass-grid.cols-2{ grid-template-columns: 1fr; gap:18px; }
}

/* ============================================================
   TRANSICIÓN ENTRE PÁGINAS (View Transitions API nativa del navegador).
   Header, footer, fondo fijo y selector de idioma quedan "congelados"
   (no hacen cross-fade); el contenido central (<main>) se desliza.
   Solo funciona en navegadores Chromium (Chrome/Edge/Opera/Brave) — en
   Safari/Firefox el navegador ignora esta regla y la navegación sigue
   siendo instantánea, normal, sin ningún error.
   ============================================================ */
@view-transition {
  navigation: auto;
}

.site-header{ view-transition-name: site-header; }
.site-footer{ view-transition-name: site-footer; }
.hero-bg{ view-transition-name: hero-bg; }
.lang-switch--floating{ view-transition-name: lang-switch-floating; }
main{ view-transition-name: page-main; }

/* elementos "congelados": sin cross-fade, se mantienen fijos en su lugar */
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(site-footer), ::view-transition-new(site-footer),
::view-transition-old(hero-bg), ::view-transition-new(hero-bg),
::view-transition-old(lang-switch-floating), ::view-transition-new(lang-switch-floating){
  animation: none;
}

/* .hero (portada) y .cine-hero (páginas interiores) tienen alturas muy distintas;
   sin esto, el contenedor de la transición "estira" su tamaño de una altura a la
   otra en vez de solo deslizar — se desactiva ese morph, el deslizamiento de
   old/new de abajo se encarga de todo el movimiento visual. */
::view-transition-group(page-main){
  animation-duration: 0s;
}

/* contenido central: deslizamiento horizontal según la dirección de navegación
   (definida por assets/js/main.js vía el atributo data-vt-direction en <html>) */
@keyframes vt-slide-out-left{ to{ transform: translateX(-100%); } }
@keyframes vt-slide-in-right{ from{ transform: translateX(100%); } }
@keyframes vt-slide-out-right{ to{ transform: translateX(100%); } }
@keyframes vt-slide-in-left{ from{ transform: translateX(-100%); } }

:root[data-vt-direction="forward"]::view-transition-old(page-main){
  animation: vt-slide-out-left .42s cubic-bezier(.4,0,.2,1) both;
}
:root[data-vt-direction="forward"]::view-transition-new(page-main){
  animation: vt-slide-in-right .42s cubic-bezier(.4,0,.2,1) both;
}
:root[data-vt-direction="back"]::view-transition-old(page-main){
  animation: vt-slide-out-right .42s cubic-bezier(.4,0,.2,1) both;
}
:root[data-vt-direction="back"]::view-transition-new(page-main){
  animation: vt-slide-in-left .42s cubic-bezier(.4,0,.2,1) both;
}