/* ==================================================
   HOME — cartografía del futuro
   ================================================== */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-height) + 3rem) 0 3.5rem; overflow: hidden; background: var(--color-primary); color: white; isolation: isolate; }
.hero::before { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 83% 20%, rgba(25,185,197,.24), transparent 28%), linear-gradient(110deg, #04172c 0%, #082d54 66%, #0a4262 100%); content: ""; }
.hero::after { position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(to bottom, black, transparent 90%); content: ""; }
.hero__route { position: absolute; inset: 12% -6% auto auto; width: min(46rem, 75vw); height: min(46rem, 75vw); border: 1px solid rgba(126,227,234,.28); border-radius: 50%; z-index: -1; }
.hero__route::before, .hero__route::after { position: absolute; border: 1px solid rgba(126,227,234,.18); border-radius: 50%; content: ""; }
.hero__route::before { inset: 16%; }
.hero__route::after { inset: 33%; }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; }
.hero h1 { max-width: 9ch; color: white; }
.hero h1 span { color: #79e0e7; }
.hero__copy > p { color: #cfdae3; font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 38rem; }
.hero__media { position: relative; width: min(100%, 42rem); justify-self: end; }
.hero__media .media-frame { aspect-ratio: 16 / 10; border: 1px solid rgba(255,255,255,.28); box-shadow: 1.2rem 1.2rem 0 rgba(25,185,197,.13); }
.hero__media::before { position: absolute; top: -1.4rem; right: -1.4rem; width: 5rem; height: 5rem; border-top: 2px solid #79e0e7; border-right: 2px solid #79e0e7; content: ""; }
.hero__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.75rem; }
.hero__meta div { padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.28); }
.hero__meta strong { display: block; color: white; font: 700 1.2rem/1 var(--font-display); }
.hero__meta span { color: #aebfcd; font-size: .82rem; }
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; width: 1px; height: 2.5rem; background: linear-gradient(#79e0e7, transparent); }

.campus-switch { border-bottom: 1px solid var(--color-border); background: #e7f2f6; }
.campus-switch__inner { display: grid; gap: 1rem; align-items: center; padding-block: 1.25rem; }
.campus-switch__copy { display: grid; gap: .15rem; }
.campus-switch__copy strong { color: var(--color-primary); font: 700 1.12rem/1.2 var(--font-display); }
.campus-switch__copy span { color: var(--color-text-muted); font-size: .9rem; }

.intro-grid { display: grid; gap: 2rem; }
.intro-grid__statement { font: 700 clamp(2rem, 5vw, 4.4rem)/1.04 var(--font-display); letter-spacing: -.045em; color: var(--color-primary); max-width: 15ch; }
.intro-grid__statement em { color: var(--color-accent); font-style: normal; }
.intro-grid__body { display: grid; gap: 1.25rem; align-content: start; }

.identity-strip { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.identity-item { padding: 2rem 1.4rem; background: white; }
.identity-item strong { display: block; margin-bottom: .4rem; color: var(--color-primary); font: 700 1.25rem/1.1 var(--font-display); }
.identity-item span { color: var(--color-text-muted); }

.program-feature { display: grid; gap: 2rem; }

.section--program-next { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.program-feature__index { color: #7ee3ea; font: 700 clamp(3rem, 8vw, 7rem)/.8 var(--font-display); opacity: .45; }
.program-feature__body { display: grid; gap: 1.25rem; }
.program-feature__body p { color: #bfd0dd; }
.program-tracks { display: grid; gap: .75rem; list-style: none; }
.program-tracks li { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.16); color: white; }

.experience-layout { display: grid; gap: 1.5rem; }
.experience-layout--single { grid-template-columns: minmax(0, 1fr); }
.experience-layout__media { min-height: 24rem; }
.experience-layout__copy { display: grid; align-content: center; gap: 1.2rem; padding: clamp(1.5rem, 5vw, 4rem); background: #e7f0f5; }
.experience-points { display: grid; gap: .75rem; list-style: none; }
.experience-points li { display: grid; grid-template-columns: 1.8rem 1fr; align-items: start; gap: .75rem; }
.experience-points li::before { content: attr(data-step); color: var(--color-accent); font: 700 .78rem/1.7 var(--font-body); }

.stats { display: grid; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.stat { padding: 2rem 1.4rem; background: #071f3d; }
.stat strong { display: block; color: #79e0e7; font: 700 clamp(2.3rem, 5vw, 4.4rem)/1 var(--font-display); }
.stat span { color: #bfd0dd; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.gallery-item { position: relative; min-height: 12rem; padding: 0; overflow: hidden; background: #dbe6ec; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item::after { position: absolute; right: .7rem; bottom: .7rem; width: 2rem; height: 2rem; display: grid; place-items: center; background: white; color: var(--color-primary); content: "+"; font-size: 1.2rem; }
.gallery-dialog { width: min(92vw, 70rem); padding: 0; border: 0; background: #061b33; color: white; box-shadow: var(--shadow-lift); }
.gallery-dialog::backdrop { background: rgba(2,11,22,.86); backdrop-filter: blur(5px); }
.gallery-dialog img { width: 100%; max-height: 78vh; object-fit: contain; }
.gallery-dialog__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; }
.gallery-dialog__close { width: 2.6rem; height: 2.6rem; background: white; color: var(--color-primary); cursor: pointer; }

.cta-band { position: relative; overflow: hidden; background: var(--color-accent); color: white; }
.cta-band::after { position: absolute; top: -12rem; right: -7rem; width: 28rem; height: 28rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; }
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.cta-band h2 { color: white; max-width: 14ch; }
.cta-band p { color: #eaf2ff; }

/* ==================================================
   INTERIOR PAGES
   ================================================== */
.inner-hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 var(--space-xl); overflow: hidden; }
.inner-hero::after { position: absolute; right: -8rem; top: -8rem; width: 25rem; height: 25rem; border: 1px solid #bed3df; border-radius: 50%; content: ""; z-index: -1; }
.inner-hero__grid { display: grid; gap: 1.5rem; }
.inner-hero h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); max-width: 12ch; }
.inner-hero p { color: var(--color-text-muted); font-size: 1.15rem; }
.inner-hero__code { color: var(--color-accent); font: 700 .78rem/1 var(--font-body); letter-spacing: .16em; }
.inner-hero--center { background: linear-gradient(120deg, #eef6f8 0%, #f8fbfc 55%, #e1f2f4 100%); }

.branch-quicknav { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.branch-quicknav a { display: grid; gap: .25rem; padding: 1.35rem; background: white; transition: background var(--transition), color var(--transition); }
.branch-quicknav a:hover { background: var(--color-primary); color: white; }
.branch-quicknav strong { font: 700 1.05rem/1.2 var(--font-display); }
.branch-quicknav span { color: var(--color-text-muted); font-size: .86rem; }
.branch-quicknav a:hover span { color: #c7d7e1; }

.sigeduc-panel { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(2rem, 6vw, 5rem); overflow: hidden; background: #0b345c; color: #c9d9e3; }
.sigeduc-panel::after { position: absolute; right: -9rem; bottom: -12rem; width: 28rem; height: 28rem; border: 1px solid rgba(126,227,234,.25); border-radius: 50%; content: ""; }
.sigeduc-panel h2 { color: white; }
.sigeduc-panel__actions { position: relative; z-index: 1; display: grid; gap: .75rem; justify-items: start; }
.sigeduc-panel__note { max-width: 42rem; font-size: .88rem; color: #aebfcb; }
.sigeduc-panel .text-link--on-dark { color: #ffffff; border-bottom-color: #7ee3ea; }
.sigeduc-panel .text-link--on-dark:hover, .sigeduc-panel .text-link--on-dark:focus-visible { color: #7ee3ea; }
#admisiones.section--navy, #sigeduc .sigeduc-panel { background: #0b5f97; }

.story-grid { display: grid; gap: 2rem; align-items: start; }
.story-year { color: var(--color-accent); font: 800 clamp(5rem, 15vw, 11rem)/.85 var(--font-display); letter-spacing: -.06em; }
.story-copy { display: grid; gap: 1.2rem; }
.timeline { display: grid; gap: 0; }
.timeline__item { position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 0 0 2.2rem 1.4rem; border-left: 1px solid #a9c4d4; }
.timeline__item::before { position: absolute; top: .15rem; left: -.35rem; width: .65rem; height: .65rem; background: var(--color-accent); border-radius: 50%; content: ""; }
.timeline__year { color: var(--color-accent); font: 700 1rem/1.3 var(--font-display); }
.timeline__item p { color: var(--color-text-muted); }
.archive-note { padding: 1rem 1.2rem; border-left: 3px solid var(--color-sand); background: #fff8e8; color: #5f4b22; font-size: .9rem; }

.track-list { display: grid; gap: 1rem; }
.track { display: grid; gap: 1rem; padding: 1.5rem; border-top: 3px solid var(--color-accent); background: white; }
.track__meta { color: var(--color-accent); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.subject-cloud { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; }
.subject-cloud li { padding: .45rem .65rem; background: #edf3f7; color: var(--color-secondary); font-size: .86rem; }

.steps { counter-reset: process; display: grid; gap: 1rem; }
.step { counter-increment: process; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--color-border); }
.step::before { content: "0" counter(process); color: var(--color-accent); font: 700 1rem/1.4 var(--font-display); }
.step p { color: var(--color-text-muted); }

.uniforms-intro { margin-bottom: 1.15rem; }
.uniform-grid { display: grid; gap: 1.5rem; }
.uniform-set { padding: 1.2rem; border: 1px solid var(--color-border); background: #f7fafb; }
.uniform-photo { margin: 0 0 1rem; overflow: hidden; background: #dbe6ec; }
.uniform-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.uniform-set h4 { margin-bottom: .8rem; color: var(--color-primary); font: 650 1.1rem/1.3 var(--font-display); }
.uniform-list { display: grid; gap: .45rem; padding-left: 1.1rem; }
.uniform-list li::marker { color: var(--color-accent); }

.requirements-list, .observations-list { display: grid; gap: .55rem; padding-left: 1.2rem; }
.requirements-list li::marker, .observations-list li::marker { color: var(--color-accent); }
.source-note { margin-top: 1rem; color: var(--color-text-muted); font-size: .9rem; }
.cost-table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--color-border); }
.cost-table { width: 100%; min-width: 46rem; border-collapse: collapse; color: var(--color-primary); font-size: .84rem; }
.cost-table caption { padding: 1rem; color: var(--color-primary); text-align: left; font: 650 1rem/1.35 var(--font-display); }
.cost-table th, .cost-table td { padding: .7rem .8rem; border-top: 1px solid var(--color-border); text-align: right; white-space: nowrap; }
.cost-table thead th { border-top: 0; background: var(--color-primary); color: white; font-weight: 700; }
.cost-table th:first-child, .cost-table th[scope="row"] { text-align: left; white-space: normal; }
.cost-table__group th { background: #e7f0f5; color: var(--color-primary); text-align: left; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.cost-table tfoot th, .cost-table tfoot td { background: #f2f7f9; font-weight: 700; }

.contact-layout { display: grid; gap: 2rem; }
.contact-panel { display: grid; gap: 1.3rem; align-content: start; padding: 1.5rem; background: var(--color-primary); color: #c9d8e2; }
.contact-panel h2, .contact-panel h3 { color: white; }
.contact-detail { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
.contact-detail strong { display: block; color: #79e0e7; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }