/* Lenguaje visual institucional inspirado en la referencia solicitada: azul, dorado y navegación académica. */
:root {
  --ink: #14284c;
  --yellow: #b88600;
  --coral: #c97735;
  --sky: #2f799a;
  --cream: #f7f7f5;
  --green: #5d8b63;
}

body { font-family: Arial, Helvetica, sans-serif; }
.page-noise { opacity: .025; }

.institutional-strip {
  min-height: 46px;
  background: var(--yellow);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.institutional-strip-inner {
  width: min(1240px, 88vw);
  min-height: 46px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.institutional-quick-links { display: flex; align-items: center; gap: 18px; }
.institutional-quick-links a { color: #fff; text-decoration: none; transition: opacity .2s ease; }
.institutional-quick-links a:last-child,
.institutional-quick-links a:nth-last-child(2) { font-size: 15px; line-height: 1; }
.institutional-quick-links a:hover { opacity: .7; }

.topbar {
  height: 92px;
  padding: 0 max(6vw, 42px);
  background: #fff;
  border-bottom: 1px solid #12284b17;
  box-shadow: 0 2px 7px rgba(20, 40, 76, .06);
}
.brand { gap: 11px; color: var(--ink); max-width: 270px; }
.brand img { width: 54px; height: 64px; mix-blend-mode: normal; }
.brand span { font-size: 8px; letter-spacing: .2px; line-height: 1.25; }
.brand strong { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; letter-spacing: 0; }
.topbar nav { display: flex; position: static; width: auto; padding: 0; margin-left: auto; background: transparent; box-shadow: none; border: 0; flex-direction: row; gap: clamp(12px, 1.65vw, 27px); }
.topbar nav a { padding: 36px 0 33px; border: 0; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; position: relative; }
.topbar nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a:hover::after { transform: scaleX(1); }
.mini-cta { display: none; }
.menu-toggle { display: none; }

.admissions-banner { min-height: 570px; background: var(--ink); }
.banner-slider { display: block; isolation: isolate; }
.banner-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; }
.banner-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 40, 76, .9), rgba(20, 40, 76, .5) 55%, rgba(20, 40, 76, .15)); }
.banner-slide img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: saturate(.82) contrast(1.04); }
.banner-slide:nth-child(2) img { object-position: center 42%; }
.banner-slide:nth-child(3) img { object-position: center 38%; }
.banner-slider-controls { position: absolute; z-index: 3; right: 6vw; bottom: 28px; display: flex; align-items: center; gap: 14px; color: #fff; }
.banner-arrow { display: grid; width: 39px; height: 39px; padding: 0; place-items: center; border: 1px solid #ffffff8c; background: #14284c52; color: #fff; cursor: pointer; font-size: 19px; transition: background .2s ease, border-color .2s ease; }
.banner-arrow:hover, .banner-arrow:focus-visible { border-color: var(--yellow); background: var(--yellow); outline: none; }
.banner-dots { display: flex; align-items: center; gap: 8px; }
.banner-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; transition: width .2s ease, background .2s ease; }
.banner-dots button.is-active { width: 27px; border-radius: 9px; background: var(--yellow); border-color: var(--yellow); }
.admissions-banner-content { width: min(1160px, 86vw); padding: 90px 0; }
.admissions-banner-content p { color: #edc84b; font-family: Arial, Helvetica, sans-serif; }
.admissions-banner h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(53px, 6.6vw, 88px); letter-spacing: -2.5px; }
.admissions-banner h1 em { color: #fff; }
.banner-button { border-radius: 0; background: var(--yellow); color: #fff; padding: 16px 21px; }

.hero h1, .section-heading h2, .family-copy h2, .academic h2, .numbers h2, .admission-copy h2, .faq h2, footer h2, .manual-convivencia h2, .moments-gallery-heading h2 { font-family: Georgia, 'Times New Roman', serif; }
.eyebrow, .button, .photo-label span { font-family: Arial, Helvetica, sans-serif; }
.hero h1 em, .section-heading em, .family-copy em, .moments-gallery-heading h2 em { color: var(--yellow); }
.button, .banner-button, .manual-link { border-radius: 0; }
.button-primary { background: var(--ink); }
.essence, .numbers { background: var(--ink); }
.pillar { background: var(--ink); }
.academic-card { border-top-color: var(--yellow); }
.academic-card:nth-child(2) { border-top-color: var(--sky); }
.academic-card:nth-child(3) { border-top-color: var(--green); }
.academic-card:nth-child(4) { border-top-color: var(--coral); }
.manual-link { background: var(--ink); }

.video-showcase { padding: 105px 7vw 115px; background: #eef3f2; }
.video-showcase-heading { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(230px, 340px); align-items: end; gap: 34px; margin: 0 auto 48px; max-width: 1180px; }
.video-showcase-heading .eyebrow { align-self: start; margin-top: 9px; }
.video-showcase-heading h2 { margin: 0; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(39px, 4.3vw, 58px); font-weight: 400; line-height: .96; letter-spacing: -1.6px; }
.video-showcase-heading h2 em { color: var(--yellow); font-style: normal; }
.video-showcase-heading > p:last-child { margin: 0; color: #4e6674; font-size: 15px; line-height: 1.65; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1180px; margin: auto; }
.video-card { background: #fff; box-shadow: 0 10px 30px rgba(20, 40, 76, .08); }
.video-placeholder { position: relative; display: grid; min-height: 315px; place-items: center; overflow: hidden; background: linear-gradient(#14284c80, #14284c80), var(--video-poster) center / cover; }
.video-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 40, 76, .55), transparent 55%); pointer-events: none; }
.video-play { position: relative; z-index: 1; display: grid; width: 70px; height: 70px; padding-left: 4px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 23px; line-height: 1; }
.video-tag { position: absolute; z-index: 1; top: 18px; left: 18px; padding: 8px 10px; background: var(--yellow); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.video-card-copy { padding: 25px 28px 28px; }
.video-card-copy p { margin: 0 0 7px; color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.video-card-copy h3 { margin: 0 0 10px; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 400; }
.video-card-copy span { color: #5e717c; font-size: 13px; }

.admissions-popup { width: min(880px, calc(100vw - 38px)); max-width: none; padding: 0; border: 0; background: #fff; box-shadow: 0 24px 70px rgba(5, 18, 38, .45); overflow: visible; }
.admissions-popup::backdrop { background: rgba(6, 24, 48, .72); backdrop-filter: blur(3px); }
.admissions-popup[open] { display: grid; grid-template-columns: 1.05fr .95fr; animation: admissions-popup-in .45s ease both; }
.admissions-popup-image { min-height: 440px; overflow: hidden; }
.admissions-popup-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 62%; filter: saturate(.84) contrast(1.03); }
.admissions-popup-content { position: relative; display: flex; min-height: 440px; padding: 62px 52px 46px; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--ink); color: #fff; }
.admissions-popup-content > p { margin: 0 0 14px; color: #edc84b; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.admissions-popup-content h2 { margin: 0 0 20px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(48px, 5vw, 70px); font-weight: 400; line-height: .9; letter-spacing: -2px; }
.admissions-popup-content h2 em { color: #edc84b; font-style: normal; }
.admissions-popup-content > span { margin-bottom: 28px; color: #dce5ed; font-size: 12px; }
.admissions-popup-close { position: absolute; top: -18px; right: -18px; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--yellow); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }
.admissions-popup-close:hover, .admissions-popup-close:focus-visible { background: #926b00; outline: none; }
@keyframes admissions-popup-in { from { opacity: 0; transform: translateY(15px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .topbar { padding: 0 28px; }
  .topbar nav { gap: 13px; }
  .topbar nav a { font-size: 9px; }
  .brand { max-width: 208px; }
  .brand span { display: none; }
}
@media (max-width: 800px) {
  .institutional-strip { min-height: 38px; }
  .institutional-strip-inner { width: calc(100% - 36px); min-height: 38px; font-size: 8px; }
  .institutional-strip-inner > span { display: none; }
  .institutional-quick-links { width: 100%; justify-content: flex-end; gap: 16px; }
  .topbar { height: 76px; padding: 0 18px; }
  .brand { max-width: 245px; }
  .brand span { display: inline; font-size: 7px; }
  .brand img { width: 46px; height: 54px; }
  .brand strong { font-size: 13px; }
  .mini-cta { display: none; }
  .menu-toggle { display: block; order: 3; width: 43px; height: 43px; border-radius: 0; background: var(--ink); color: #fff; }
  .topbar nav { display: none; position: absolute; top: 100%; right: 18px; left: 18px; width: auto; padding: 8px 18px; background: #fff; box-shadow: 0 16px 28px rgba(20, 40, 76, .2); border-top: 4px solid var(--yellow); flex-direction: column; gap: 0; }
  .topbar nav.is-open { display: flex; }
  .topbar nav a { padding: 14px 0; border-bottom: 1px solid #14284c1c; font-size: 10px; }
  .topbar nav a::after { display: none; }
  .admissions-banner { min-height: 470px; }
  .admissions-banner-content { padding: 65px 0; }
  .banner-slider-controls { right: 25px; bottom: 20px; gap: 10px; }
  .banner-arrow { width: 34px; height: 34px; font-size: 16px; }
  .video-showcase { padding: 75px 25px; }
  .video-showcase-heading { display: block; margin-bottom: 30px; }
  .video-showcase-heading .eyebrow { margin-bottom: 17px; }
  .video-showcase-heading h2 { font-size: 42px; }
  .video-showcase-heading > p:last-child { margin-top: 17px; }
  .video-grid { grid-template-columns: 1fr; gap: 18px; }
  .video-placeholder { min-height: 250px; }
  .admissions-popup[open] { grid-template-columns: 1fr; }
  .admissions-popup-image { min-height: 210px; max-height: 250px; }
  .admissions-popup-content { min-height: 315px; padding: 43px 31px 35px; }
  .admissions-popup-content h2 { font-size: 52px; }
  .admissions-popup-close { top: -15px; right: 15px; }
}