/* Montesión — prototipo de diseño. Tokens */
:root {
  --ultra: #2d31e8;      /* Azul Montesión: superficie protagonista */
  --ultra-deep: #1c1fa8;
  --ink: #0e1340;        /* texto y fondos oscuros */
  --paper: #f5f6fb;      /* fondo claro */
  --mist: #c9cdf2;       /* líneas y texto secundario sobre azul */
  --slate: #565b9c;      /* texto secundario sobre claro */
  --sol: #ffc933;        /* luz de Mallorca: foco, lente, poco más */
  --white: #ffffff;

  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
  --step-4: clamp(3rem, 1.8rem + 6vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--sol); color: var(--ink); padding: 10px 14px; z-index: 100; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Cabecera ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: block; overflow: hidden; max-height: 48px; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a, .nav button.menu-trigger {
  font: 600 0.98rem/1 var(--body); text-decoration: none; color: var(--ink);
  padding: 10px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.menu-trigger:hover { background: color-mix(in srgb, var(--ultra) 9%, transparent); }
.nav a[aria-current="page"] { color: var(--ultra); }
.lang { display: flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; margin-left: 8px; }
.lang button {
  font: 700 0.8rem/1 var(--body); padding: 8px 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.access { position: relative; }
.access-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px;
  background: var(--ink); color: var(--paper); border-radius: 14px; padding: 8px; display: none;
}
.access[data-open="true"] .access-panel { display: block; }
.access-panel a { display: block; color: var(--paper); padding: 10px 12px; border-radius: 8px; }
.access-panel a:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.burger { display: none; margin-left: auto; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 10px 16px; font: 700 0.9rem var(--body); }

@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 16px var(--gutter) 28px; gap: 2px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    display: none; margin: 0;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a, .nav button.menu-trigger { font-size: 1.2rem; padding: 14px 6px; text-align: left; border-radius: 6px; }
  .lang { align-self: flex-start; margin: 12px 0 0; }
  .access-panel { position: static; display: block; background: none; color: var(--ink); padding: 0 0 0 12px; }
  .access-panel a { color: var(--ink); padding: 8px 6px; }
  .access .menu-trigger { display: none; }
}

/* ---------- Héroe: la lente ---------- */
.hero {
  position: relative; min-height: calc(100svh - 72px); background: var(--ultra); color: var(--white);
  overflow: hidden; isolation: isolate; display: grid; cursor: none;
}
.hero-photo, .hero-lens { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-photo { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .85; }
.hero-lens {
  --x: 70%; --y: 40%; --r: clamp(90px, 14vw, 190px);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 98%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 98%, transparent 100%);
  z-index: 1;
}
.lens-ring {
  position: absolute; z-index: 2; width: calc(var(--r, 150px) * 2); height: calc(var(--r, 150px) * 2);
  border: 3px solid var(--sol); border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); left: 70%; top: 40%;
}
.hero-content {
  position: relative; z-index: 3; align-self: end; padding: 0 var(--gutter) clamp(24px, 4vw, 48px);
  max-width: var(--max); width: 100%; margin: 0 auto; pointer-events: none;
}
.hero-content a, .hero-content button { pointer-events: auto; cursor: pointer; }
.hero-word {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(2.6rem, 10.4vw, 11.5rem); line-height: .82; letter-spacing: -0.03em; margin: 0 0 0 -0.04em;
  color: var(--white); text-transform: lowercase;
  animation: open-wide 1.6s cubic-bezier(.2,.7,.1,1) both;
}
@keyframes open-wide {
  from { font-variation-settings: "wdth" 50; letter-spacing: -0.06em; opacity: .0; }
  30% { opacity: 1; }
  to { font-variation-settings: "wdth" 125; letter-spacing: -0.03em; }
}
.hero-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-top: clamp(16px, 2vw, 28px); }
.hero-lede { font-size: var(--step-1); line-height: 1.35; max-width: 34ch; margin: 0; }
.hero-lede strong { font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--body); text-decoration: none;
  padding: 16px 22px; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit;
}
.btn-solid { background: var(--white); color: var(--ultra); border-color: var(--white); }
.btn-solid:hover { background: var(--sol); border-color: var(--sol); color: var(--ink); }
.btn:not(.btn-solid):hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ink:hover { background: var(--ultra); border-color: var(--ultra); }
.hero-switch {
  position: absolute; z-index: 3; top: clamp(16px, 3vw, 32px); right: var(--gutter);
  display: flex; gap: 10px; align-items: center; font-size: var(--step--1); color: var(--white);
}
.hero-switch button {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white); background: transparent;
  color: var(--white); font: 700 .85rem var(--body); cursor: pointer;
}
.hero-switch button[aria-pressed="true"] { background: var(--white); color: var(--ultra); }
.hero-caption { margin-right: 6px; max-width: 26ch; text-align: right; }
@media (max-width: 760px) {
  .hero { cursor: auto; }
  .hero-row { grid-template-columns: 1fr; }
  .hero-actions { justify-content: flex-start; }
  .hero-caption { display: none; }
}

/* ---------- Secciones genéricas ---------- */
.section { padding: clamp(64px, 9vw, 140px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.h2 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 112;
  font-size: var(--step-3); line-height: .95; letter-spacing: -0.02em; margin: 0;
}
.h3 { font-family: var(--display); font-weight: 750; font-variation-settings: "wdth" 105; font-size: var(--step-2); line-height: 1; margin: 0 0 12px; }
.lede { font-size: var(--step-1); line-height: 1.4; max-width: 40ch; margin: 0; color: var(--slate); }
.on-blue { background: var(--ultra); color: var(--white); }
.on-blue .lede { color: var(--mist); }
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .lede { color: var(--mist); }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Cuatro C ---------- */
.four { list-style: none; padding: 0; margin: 0; }
.four li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18ch, 28ch); gap: 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.four li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.four .word { font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 5.6vw, 5.8rem); line-height: .95; letter-spacing: -0.025em; }
.four li:nth-child(1) .word { font-variation-settings: "wdth" 130; }
.four li:nth-child(2) .word { font-variation-settings: "wdth" 110; }
.four li:nth-child(3) .word { font-variation-settings: "wdth" 90; }
.four li:nth-child(4) .word { font-variation-settings: "wdth" 72; }
.four p { margin: 0; color: var(--mist); max-width: 34ch; }
@media (max-width: 760px) { .four li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Regla de edades ---------- */
.ruler { position: relative; margin-top: 8px; }
.ruler-scale { display: grid; grid-template-columns: repeat(13, 1fr); font: 600 var(--step--1) var(--body); color: var(--slate); border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.ruler-scale span { position: relative; }
.ruler-scale span::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 2px; height: 8px; background: var(--ink); }
.ruler-bands { display: grid; grid-template-columns: repeat(13, 1fr); row-gap: 10px; margin-top: 18px; }
.band {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 999px;
  padding: 14px 18px; font: 700 var(--step-0) var(--body); text-align: left; cursor: pointer; min-height: 56px;
}
.band small { font-weight: 600; color: var(--slate); white-space: nowrap; }
.band:hover { background: color-mix(in srgb, var(--ultra) 8%, var(--paper)); }
.band[aria-selected="true"] { background: var(--ultra); border-color: var(--ultra); color: var(--white); }
.band[aria-selected="true"] small { color: var(--mist); }
.b-primaria { grid-column: 1 / 7; }
.b-eso { grid-column: 7 / 11; }
.b-bach { grid-column: 11 / 13; }
.b-fp { grid-column: 11 / 14; }
.b-int { grid-column: 7 / 14; border-style: dashed; }
.stage-panel { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.stage-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: var(--mist); }
.stage-panel p { max-width: 54ch; }
.facts { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 0; }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.facts li span:first-child { color: var(--slate); }
.facts li span:last-child { font-weight: 600; text-align: right; }
@media (max-width: 760px) {
  .ruler-scale { font-size: .7rem; }
  .ruler-scale span:nth-child(even) { visibility: hidden; }
  .ruler-bands { grid-template-columns: 1fr; }
  .b-primaria, .b-eso, .b-bach, .b-fp, .b-int { grid-column: 1 / -1; }
  .stage-panel { grid-template-columns: 1fr; }
}

/* ---------- Declaración 1561 ---------- */
.since { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.year { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 50; font-size: clamp(6rem, 22vw, 20rem); line-height: .8; color: var(--sol); letter-spacing: -0.03em; }
.since p.big { font-size: var(--step-2); line-height: 1.15; font-weight: 600; margin: 0 0 20px; max-width: 24ch; }
@media (max-width: 760px) { .since { grid-template-columns: 1fr; } }

/* ---------- Actualidad ---------- */
.news { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(16px, 2.5vw, 32px); }
.news a { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.news img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--mist); }
.news a:first-child img { aspect-ratio: 16 / 11; }
.news time { font-size: var(--step--1); color: var(--slate); }
.news h3 { font: 700 var(--step-1)/1.2 var(--body); margin: 0; }
.news a:hover h3 { color: var(--ultra); text-decoration: underline; text-underline-offset: 4px; }
.news-empty { padding: 32px; border: 2px dashed var(--mist); border-radius: 18px; color: var(--slate); }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } }

/* ---------- Servicios índice ---------- */
.index { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 5vw, 80px); }
.index li { border-top: 1.5px solid var(--ink); }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0 20px; text-decoration: none; }
.index b { font: 700 var(--step-1)/1.15 var(--body); }
.index span { grid-column: 1; color: var(--slate); font-size: var(--step--1); }
.index i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink); }
.index a:hover i { background: var(--ultra); border-color: var(--ultra); color: var(--white); }
.index a:hover b { color: var(--ultra); }
@media (max-width: 760px) { .index { grid-template-columns: 1fr; } }

/* ---------- Cierre / visita ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.visit .h2 { font-size: var(--step-4); font-variation-settings: "wdth" 130; }
.visit p { font-size: var(--step-1); margin: 0 0 24px; max-width: 32ch; }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.site-foot { background: var(--ink); color: var(--mist); padding: 72px 0 32px; font-size: var(--step--1); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h2 { font: 700 1rem var(--body); color: var(--white); margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--mist); }
.foot-grid a:hover { color: var(--white); text-decoration: underline; }
.foot-logo { background: var(--paper); display: inline-block; padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; }
.foot-logo img { height: 40px; }
.partners { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--mist) 25%, transparent); align-items: center; }
.partners a { background: var(--paper); border-radius: 10px; padding: 8px 12px; }
.partners img { height: 34px; width: auto; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Páginas interiores ---------- */
.page-hero { background: var(--ultra); color: var(--white); padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.page-hero h1 {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 140;
  font-size: clamp(3.2rem, 11vw, 10rem); line-height: .85; letter-spacing: -0.03em; margin: 0 0 24px;
}
.page-hero .lede { color: var(--mist); max-width: 46ch; }
.crumbs { font-size: var(--step--1); color: var(--mist); margin-bottom: 18px; }
.crumbs a { color: var(--white); }

.stage { padding: clamp(56px, 8vw, 110px) 0; border-top: 1.5px solid var(--ink); scroll-margin-top: 80px; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); }
.stage-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; position: sticky; top: 100px; background: var(--mist); }
.age { font: 700 var(--step--1) var(--body); color: var(--ultra); margin: 0 0 8px; }
.stage h2 { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 120; font-size: var(--step-3); line-height: .95; margin: 0 0 20px; letter-spacing: -0.02em; }
.stage p { max-width: 60ch; }
.docs { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; padding: 0; list-style: none; }
.docs a {
  display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 600; font-size: .95rem;
  border: 1.5px solid var(--ink); padding: 10px 14px; border-radius: 999px;
}
.docs a:hover { background: var(--ink); color: var(--paper); }
.docs a .kind { font-size: .72rem; font-weight: 700; color: var(--ultra); }
.docs a:hover .kind { color: var(--sol); }
.subhead { font: 700 var(--step-0) var(--body); margin: 32px 0 8px; }
details.more { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding: 14px 0; }
details.more:last-of-type { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
details.more summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--ultra); }
.on-ink details.more summary::after { color: var(--sol); }
details.more[open] summary::after { content: "–"; }
details.more > div { padding-top: 10px; color: var(--slate); }
.on-ink details.more > div { color: var(--mist); }
.people { columns: 2; column-gap: 32px; padding: 0; list-style: none; margin: 8px 0 0; font-size: var(--step--1); }
.people li { break-inside: avoid; padding: 4px 0; }
.people a { color: var(--slate); }
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: 32px; }
.int-grid h3 { font: 700 var(--step-1)/1.2 var(--body); margin: 0 0 8px; }
.int-grid p { margin: 0; color: var(--mist); font-size: .98rem; }
@media (max-width: 860px) {
  .stage-grid { grid-template-columns: 1fr; }
  .stage-grid img { position: static; aspect-ratio: 16 / 10; }
  .int-grid { grid-template-columns: 1fr; }
  .people { columns: 1; }
}

/* Pastoral: el camino */
.motto { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 70; font-size: var(--step-3); line-height: 1; margin: 0; max-width: 18ch; }
.path { list-style: none; margin: 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 158px; top: 0; bottom: 0; width: 3px; background: var(--ultra); }
.path li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 46px; padding: 0 0 44px; position: relative; }
.path li::before { content: ""; position: absolute; left: 150px; top: 6px; width: 19px; height: 19px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ultra); }
.path .when { font: 800 var(--step-0)/1.2 var(--body); color: var(--ultra); text-align: right; }
.path h3 { font: 700 var(--step-1)/1.2 var(--body); margin: 0 0 6px; }
.path p { margin: 0; color: var(--slate); max-width: 60ch; }
.path .meta { font-size: var(--step--1); color: var(--ink); font-weight: 600; margin-top: 8px; }
@media (max-width: 640px) {
  .path::before { left: 8px; }
  .path li { grid-template-columns: 1fr; gap: 4px; padding-left: 36px; }
  .path li::before { left: 0; }
  .path .when { text-align: left; }
}
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 32px; list-style: none; padding: 0; margin: 0; }
.team li { padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.team b { display: block; color: var(--white); font-size: var(--step-1); }
.team span { color: var(--mist); font-size: var(--step--1); }
.team a { color: var(--mist); font-size: var(--step--1); }
.photo-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.photo-strip img { width: 100%; height: clamp(180px, 26vw, 380px); object-fit: cover; border-radius: 20px; background: var(--mist); }
@media (max-width: 640px) { .photo-strip { grid-template-columns: 1fr 1fr; } .photo-strip img:first-child { grid-column: 1 / -1; } }

.proto-note { background: var(--sol); color: var(--ink); font-size: .85rem; text-align: center; padding: 8px var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-word { animation: none; }
}
.page-hero .ruler-scale span::after { background: var(--white); }

/* Noticias sin imagen destacada: tarjetas tipográficas */
.news img { display: none; }
.news a { border-top: 3px solid var(--ink); padding-top: 18px; }
.news a:first-child h3 { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--step-2); line-height: 1.05; }

/* ---------- Ampliación: El colegio, novedades y redes ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.subnav a { color: var(--white); text-decoration: none; font-weight: 700; border: 2px solid color-mix(in srgb, var(--white) 55%, transparent); border-radius: 999px; padding: 10px 16px; }
.subnav a:hover { background: var(--white); color: var(--ultra); border-color: var(--white); }
.stage h2 { scroll-margin-top: 90px; }
.mvv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.mvv h3 { font: 800 var(--step-0) var(--body); color: var(--ultra); margin: 0 0 6px; }
.mvv p { margin: 0; font-size: .98rem; color: var(--slate); }
.spaces { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.spaces li { border-top: 1.5px solid var(--ink); padding: 16px 0 20px; display: grid; gap: 4px; }
.spaces b { font: 700 var(--step-1)/1.15 var(--body); }
.spaces span { color: var(--slate); font-size: var(--step--1); }
.padel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: 28px; align-items: start; }
.padel img { width: 100%; border-radius: 16px; background: var(--paper); }
.padel .facts li { border-color: color-mix(in srgb, var(--paper) 22%, transparent); }
.padel .facts li span:first-child { color: var(--mist); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.two h2 { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 120; font-size: var(--step-3); line-height: .95; margin: 0 0 20px; letter-spacing: -0.02em; }
.on-blue .facts li { border-color: color-mix(in srgb, var(--white) 25%, transparent); }
.on-blue .facts li span:first-child, .on-blue .int-grid p { color: var(--mist); }
.on-blue .facts a { color: var(--white); }
.steps { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 12px; }
.steps li::marker { font-weight: 800; color: var(--ultra); }
@media (max-width: 860px) {
  .mvv, .spaces, .padel, .two { grid-template-columns: 1fr; }
}

/* Novedades: mosaico visual */
.nov { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 2vw, 24px); }
.nov a { position: relative; display: block; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--white); background: var(--ink); min-height: 240px; isolation: isolate; }
.nov a.nov-big { grid-row: span 2; min-height: 500px; }
.nov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.nov a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,19,64,.92) 0%, rgba(14,19,64,.35) 45%, rgba(14,19,64,0) 70%); }
.nov a:hover img { transform: scale(1.04); }
.nov .tag { position: absolute; top: 16px; left: 16px; background: var(--sol); color: var(--ink); font: 700 .8rem/1 var(--body); padding: 7px 11px; border-radius: 999px; }
.nov h3 { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; font: 700 var(--step-1)/1.2 var(--body); }
.nov a.nov-big h3 { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--step-2); line-height: 1.02; }
.nov a:nth-child(4) { grid-column: 2 / 4; }
@media (max-width: 860px) {
  .nov { grid-template-columns: 1fr; }
  .nov a.nov-big { grid-row: auto; min-height: 380px; }
  .nov a:nth-child(4) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .nov img { transition: none; } }

/* Redes: la pantallita */
.social { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.social .h2 { font-variation-settings: "wdth" 90; overflow-wrap: anywhere; }
.phone { width: min(360px, 86vw); aspect-ratio: 9 / 14; border: 12px solid #05081f; border-radius: 48px; background: var(--white); overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mist) 35%, transparent), 0 40px 80px -30px rgba(0,0,0,.6); position: relative; justify-self: center; }
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #05081f; border-radius: 0 0 14px 14px; z-index: 2; }
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .social { grid-template-columns: 1fr; } }

/* ---------- Servicios, Actualidad, Contacto ---------- */
.note { border-left: 4px solid var(--sol); padding: 6px 0 6px 14px; color: var(--ink); font-weight: 600; max-width: 60ch; }
.route { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 58px; top: 10px; bottom: 10px; width: 3px; background: var(--ultra); }
.route li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 30px; padding: 6px 0; position: relative; font-size: .98rem; }
.route li::before { content: ""; position: absolute; left: 53px; top: 13px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ultra); }
.route time { font-weight: 800; color: var(--ultra); font-variant-numeric: tabular-nums; }
.route li.end span { font-weight: 800; }
.route li.end::before { background: var(--ultra); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.slots > div { border-top: 3px solid var(--ink); padding-top: 18px; }
.slots h3 { font: 700 var(--step-1)/1.1 var(--body); margin: 0; }
.slots .time { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 80; font-size: var(--step-3); line-height: 1; color: var(--ultra); margin: 8px 0 12px; }
.slots .price { font-weight: 700; }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.groups h3 { font: 700 var(--step-1)/1.2 var(--body); margin: 0 0 6px; color: var(--white); }
.groups p { margin: 0; color: var(--mist); }
.centres { display: grid; gap: 20px; align-content: start; }
.centres > div { border: 2px solid var(--ink); border-radius: 22px; padding: 22px 24px; }
.centres h3 { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 105; font-size: var(--step-2); margin: 0 0 8px; }
.centres p { margin: 0; }
.contact-big { display: grid; gap: 6px; }
.contact-big a { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(1.8rem, 5.4vw, 4.6rem); line-height: 1; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.contact-big a:hover { color: var(--sol); }
.form { display: grid; gap: 16px; margin-top: 28px; max-width: 620px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.form input, .form select, .form textarea { font: inherit; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--ink); width: 100%; }
.form [aria-invalid="true"] { border-color: #c81e3a; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.form .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ultra); }
.form-msg { margin: 0; font-weight: 600; min-height: 1.5em; }
.dir { margin-top: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chips button { font: 700 .9rem var(--body); padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.archive { list-style: none; margin: 0; padding: 0; }
.archive a { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); text-decoration: none; }
.archive time { grid-row: span 2; color: var(--slate); font-size: var(--step--1); padding-top: 3px; }
.archive b { font-size: var(--step-1); line-height: 1.25; }
.archive span { color: var(--slate); font-size: .95rem; }
.archive a:hover b { color: var(--ultra); }
.nov-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; margin-top: clamp(14px, 2vw, 24px); }
.nov-row a:nth-child(4) { grid-column: auto; }
@media (max-width: 860px) {
  .slots, .groups, .form .row, .nov-row { grid-template-columns: 1fr; }
  .archive a { grid-template-columns: 1fr; }
  .archive time { grid-row: auto; }
}
@media (max-width: 860px) { .two, .mvv, .spaces, .padel, .slots, .groups, .nov-row, .form .row { grid-template-columns: minmax(0, 1fr); } }
.facts li span:last-child, .dir a { overflow-wrap: anywhere; }
.slots .time { font-size: clamp(2rem, 3.6vw, 3.4rem); white-space: nowrap; }
/* Titulares largos: cortar con guion en vez de invadir la columna vecina */
.h2, .stage h2, .two h2, .page-hero h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.h2 { font-variation-settings: "wdth" 104; }
.team li { display: grid; gap: 2px; align-content: start; }
.team span { order: -1; }
@media (max-width: 760px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================
   KIT DE MARCA Montesión 26-27 — paleta, tipografía y criterios
   ALTA (titulares, mayúsculas) · Poppins (texto) · Satisfy (firmas)
   ========================================================== */
:root {
  --ultra: #015094;      /* Azul institucional (principal) */
  --ultra-deep: #013f75;
  --ink: #01335f;        /* azul institucional oscurecido para superficies profundas */
  --paper: #ffffff;      /* Blanco */
  --silver: #e5e5e5;     /* Gris claro / plateado */
  --slate: #3c75a6;      /* Azul medio */
  --sky: #6c9bc2;        /* Azul claro */
  --mist: #a2c4df;       /* Azul suave */
  --sol: #efda01;        /* Amarillo: llamadas a la acción */
  --text: #4d4d4d;       /* Gris oscuro: cuerpo de texto */
  --on-blue-soft: #d3e3f1;
  --display: "ALTA", "Oswald", "Arial Narrow", sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Satisfy", cursive;
}
body { color: var(--text); line-height: 1.6; text-align: left; }
:focus-visible { outline-color: var(--ultra); }
.on-blue :focus-visible, .on-ink :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .site-foot :focus-visible { outline-color: var(--sol); }

/* Titulares: ALTA en mayúsculas, azul institucional */
.h2, .h3, .stage h2, .page-hero h1, .hero-word, .four .word, .year, .visit .h2, .nov h3, .cura h2 {
  font-family: var(--display); text-transform: uppercase; font-variation-settings: normal;
  letter-spacing: 0; hyphens: manual; -webkit-hyphens: manual;
}
.h2, .stage h2 { font-weight: 700; line-height: 1; }
:where(main) :is(h1, h2, h3, h4) { color: var(--ultra); }
.on-blue :is(h1, h2, h3, h4), .on-ink :is(h1, h2, h3, h4), .page-hero :is(h1, h2, h3, h4), .hero :is(h1, h2, h3, h4), .nov :is(h3) { color: inherit; }
.hero-word { font-weight: 700; line-height: .9; letter-spacing: .01em; font-size: clamp(3.4rem, 18.5vw, 15.5rem); }
.page-hero h1 { font-weight: 700; line-height: .95; }
.four .word { font-weight: 700; letter-spacing: .01em; }
.lede { color: var(--slate); }
.on-blue .lede, .on-ink .lede, .page-hero .lede, .crumbs, .four p { color: var(--on-blue-soft); }
.on-blue .age, .on-ink .age { color: var(--sol); }
.facts li span:first-child, .news time, .index span, .ruler-scale, .band small { color: var(--slate); }
.band[aria-selected="true"] small { color: var(--on-blue-soft); }
.site-foot, .site-foot .foot-grid a { color: var(--on-blue-soft); }

/* Llamadas a la acción en amarillo */
.btn-solid { background: var(--sol); border-color: var(--sol); color: var(--ink); }
.btn-solid:hover { background: var(--white); border-color: var(--white); color: var(--ultra); }
.btn-ink:hover { background: var(--slate); border-color: var(--slate); }

/* Tarjetas y contenedores sobre gris claro */
.news-empty { border-color: var(--silver); }
.note { border-left-color: var(--sol); }

/* Firma manuscrita: sólo detalles breves */
.signature { font-family: var(--script); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; color: var(--sol); margin: 8px 0 0; }

/* ---------- Cura Personalis ---------- */
.cura { padding: clamp(56px, 8vw, 110px) 0; scroll-margin-top: 80px; }
.cura h2 { font-weight: 700; font-size: clamp(2.8rem, 1.6rem + 5vw, 6.6rem); line-height: .92; margin: 0 0 22px; }
.cura .lede { max-width: 46ch; margin-bottom: 18px; }
.cura p { max-width: 60ch; }
.cura-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cura-fees { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cura-fees li { background: var(--white); color: var(--text); border-radius: 22px; padding: 22px 26px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.cura-fees b { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--ultra); }
.cura-fees span { font-weight: 600; color: var(--slate); }
.cura-fees em { grid-column: 1 / -1; font-style: normal; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: var(--step--1); margin-top: 6px; }
.cura-fees .cura-note { display: block; background: transparent; color: var(--white); border-left: 4px solid var(--sol); border-radius: 0; padding: 4px 0 4px 18px; }
.cura-fees .cura-note strong { color: var(--sol); }
.cura-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(48px, 7vw, 88px); }
.cura-group { display: grid; gap: 14px; align-content: start; }
.cura-group h3 { font: 600 var(--step--1)/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--sol); }
.cura-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 22px; border-radius: 20px; background: color-mix(in srgb, var(--white) 9%, transparent); border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); }
.cura-card i { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; background: var(--sol); color: var(--ink); display: grid; place-items: center; font: 700 1.35rem/1 var(--display); font-style: normal; }
.cura-card h4 { margin: 2px 0 6px; font: 600 var(--step-1)/1.2 var(--body); }
.cura-card p { margin: 0; color: var(--on-blue-soft); }
.cura-close { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent); }
.cura-close p:first-child { font-size: var(--step-1); line-height: 1.45; max-width: 58ch; margin: 0; }
@media (max-width: 860px) {
  .cura-top, .cura-groups { grid-template-columns: minmax(0, 1fr); }
}
.dir-wide { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.dir-wide li { break-inside: avoid; }
@media (max-width: 760px) { .dir-wide { columns: 1; } }

/* Logo de Jesuitas (versión en calado) bajo MONTESIÓN */
.hero-word, .mira { width: fit-content; }
.hero-word::after, .mira::after {
  content: ""; display: block; width: 0.95em; aspect-ratio: 320 / 198;
  margin: 0.06em 0 0 auto; background: url("jesuitas-blanco.png") no-repeat center / contain;
  pointer-events: none;
}


/* Regla de edades: en las bandas estrechas (Bachillerato, Ciclos) la edad va debajo del nombre */
.band { min-width: 0; }
.b-bach, .b-fp { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 16px; border-radius: 22px; line-height: 1.15; }
.b-bach span, .b-fp span { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 1200px) { .b-bach, .b-fp { font-size: .92rem; padding-inline: 12px; } }
@media (max-width: 760px) {
  .b-bach, .b-fp { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 999px; font-size: var(--step-0); }
}

/* «estudia con NOSOTROS»: se respeta la combinación de minúsculas y mayúsculas */
body[data-page="oferta"] .page-hero h1 { text-transform: none; }
/* «estudia con» en manuscrita amarilla, encima de NOSOTROS */
.page-hero h1 .script { display: block; font-family: var(--script); font-weight: 400; color: var(--sol); text-transform: none; font-size: .62em; line-height: 1.1; margin-bottom: -.05em; letter-spacing: 0; }

/* Logo de Jesuitas bajo el titular de cada página (como en la portada) */
.page-hero h1 { width: fit-content; max-width: 100%; }
.page-hero h1::after {
  content: ""; display: block; width: clamp(120px, 0.95em, 220px); aspect-ratio: 320 / 198;
  margin: 0.08em 0 0 auto; background: url("jesuitas-blanco.png") no-repeat center / contain;
  pointer-events: none;
}

/* Bachillerato: dos fotos apiladas en lugar de una */
.photo-stack { display: grid; gap: 14px; align-self: start; position: sticky; top: 100px; }
.photo-stack img { position: static; aspect-ratio: 4 / 3; height: auto; }
@media (max-width: 760px) { .photo-stack { position: static; grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Servicios › Orientación: equipo por etapas con su función */
.do-team { display: grid; gap: 26px; }
.do-team h3 { font: 700 var(--step-0)/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ultra); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--sol); }
.do-team ul { list-style: none; margin: 0; padding: 0; }
.do-team li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--silver); }
.do-team li b { font-weight: 600; color: var(--ink); }
.do-team li span { color: var(--slate); font-size: var(--step--1); align-self: center; }
.do-contact { margin: 0; }
.do-contact span { color: var(--slate); margin-right: 8px; }
@media (max-width: 760px) { .do-team li { grid-template-columns: 1fr; } }

/* Primaria › Marco pedagógico (PPI): tabla de dimensiones */
.ppi { margin: 18px 0 8px; border-top: 2px solid var(--ultra); }
.ppi-row { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--silver); }
.ppi-head { font: 600 var(--step--1)/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); padding: 10px 0; }
.ppi dt { font: 700 var(--step-0)/1.3 var(--body); color: var(--ultra); }
.ppi dd { margin: 0; color: var(--text); }
@media (max-width: 760px) { .ppi-row { grid-template-columns: 1fr; } .ppi-head span:last-child { display: none; } }

/* El colegio › Oferta educativa: tríptico */
.oferta-edu { margin-top: clamp(40px, 6vw, 72px); }
.oferta-edu .lede { max-width: 60ch; margin-bottom: 20px; }
.folleto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.folleto img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 24px rgba(1, 51, 95, .14); transition: transform .2s ease; }
.folleto a:hover img { transform: translateY(-3px); }
@media (max-width: 760px) { .folleto { grid-template-columns: minmax(0, 1fr); } }

/* ── Propuestas del Área de Comunicación (oct. 2026) ── */
/* Portada: nombre oficial completo sobre MONTESIÓN */
.hero-kicker { margin: 0 0 .35em; color: var(--white); font: 600 clamp(.95rem, 2.3vw, 2rem)/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
/* Pie: logo sin deformar */
.foot-logo img { width: auto; height: 40px; }
/* Colegio: canal ético dentro de Entorno seguro */
.canal-box { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); }
.canal-box .subhead { margin-top: 0; color: inherit; }
.on-blue .steps li::marker { color: var(--sol); }
.canal-box .subhead { font-size: var(--step-1); }
/* Actualidad · 1. Carrusel de novedades */
.carousel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.car-nav { display: flex; gap: 10px; }
.car-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 1.2rem/1 var(--body); cursor: pointer; }
.car-nav button:hover { background: var(--ink); color: var(--paper); }
.nov-car { list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 28vw, 340px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.nov-car li { scroll-snap-align: start; }
.nov-car a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--white); background: var(--ink); isolation: isolate; }
.nov-car img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.nov-car a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(1,51,95,.92) 0%, rgba(1,51,95,.3) 45%, rgba(1,51,95,0) 70%); }
.nov-car a:hover img { transform: scale(1.04); }
.nov-car .tag { position: absolute; top: 16px; left: 16px; background: var(--sol); color: var(--ink); font: 700 .8rem/1 var(--body); padding: 7px 11px; border-radius: 999px; }
.nov-car h3 { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; font: 700 var(--step-1)/1.2 var(--body); color: inherit; }
@media (prefers-reduced-motion: reduce) { .nov-car img { transition: none; } }
/* Actualidad · 2. Tarjetas de noticias */
.section-tint { background: color-mix(in srgb, var(--mist) 22%, var(--paper)); }
.news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.news-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--paper); border-radius: 22px; padding: 24px; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 18px 40px -28px rgba(1,51,95,.45); transition: transform .2s; }
.news-card:hover { transform: translateY(-3px); }
.news-card time { color: var(--slate); font-size: var(--step--1); font-weight: 600; }
.news-card .tag { align-self: flex-start; background: var(--sol); color: var(--ink); font: 700 .75rem/1 var(--body); padding: 6px 10px; border-radius: 999px; }
.news-card h3 { margin: 0; font: 700 var(--step-1)/1.25 var(--body); text-transform: none; color: var(--ink); }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.news-card p { margin: 0; color: var(--text); font-size: .95rem; flex: 1; }
.news-card .more { color: var(--ultra); font-weight: 700; font-size: .95rem; }
.news-card:hover h3 { color: var(--ultra); }
/* Actualidad · 3. Redes sociales */
.handle { margin: 6px 0 0; font: 700 var(--step-1)/1 var(--body); color: var(--sol); text-transform: none; letter-spacing: 0; }
.social-hub { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 5vw, 72px); }
.hub-col { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.x-box { overflow-y: auto; padding: 40px 10px 10px; }
.x-box > a.twitter-timeline { display: block; padding: 20px; color: var(--ink); font-weight: 700; }
/* Actualidad · 4. Hemeroteca */
.arch-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.arch-tools input, .arch-tools select { font: 500 1rem var(--body); padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.arch-tools input { width: min(360px, 100%); }
.arch-tools label:first-child { flex: 1 1 260px; max-width: 360px; }
/* Comedor: infografía RD 315/2025 */
.infografia { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 760px; }
.infografia figcaption { margin-bottom: 20px; }
.infografia figcaption .subhead { margin-top: 0; font-size: var(--step-1); }
.infografia img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -35px rgba(1,51,95,.5); }
.infografia .info-open { text-align: center; margin: 14px 0 0; font-weight: 600; }
/* Novedades: carteles (se ven enteros, sin recortar) */
.nov-car li.poster a { aspect-ratio: auto; background: transparent; color: var(--ink); display: flex; flex-direction: column; }
.nov-car li.poster a::after { display: none; }
.nov-car .poster-img { display: block; aspect-ratio: 4 / 5; background: var(--silver); border-radius: 22px; overflow: hidden; position: relative; }
.nov-car li.poster img { position: absolute; inset: 0; z-index: 0; object-fit: contain; }
.nov-car li.poster .tag { position: static; align-self: flex-start; margin-top: 12px; }
.nov-car li.poster h3 { position: static; padding: 8px 4px 0; font-size: var(--step-0); line-height: 1.3; }
.nov-car li.poster a:hover h3 { color: var(--ultra); }
/* Novedades: carteles (se ven enteros, sin recortar) */
.nov-car li.poster a { aspect-ratio: auto; background: transparent; color: var(--ink); display: flex; flex-direction: column; }
.nov-car li.poster a::after { display: none; }
.nov-car .poster-img { display: block; aspect-ratio: 4 / 5; background: var(--silver); border-radius: 22px; overflow: hidden; position: relative; }
.nov-car li.poster img { position: absolute; inset: 0; z-index: 0; object-fit: contain; }
.nov-car li.poster .tag { position: static; align-self: flex-start; margin-top: 12px; }
.nov-car li.poster h3 { position: static; padding: 8px 4px 0; font-size: var(--step-0); line-height: 1.3; }
.nov-car li.poster a:hover h3 { color: var(--ultra); }
/* Portada: pertenencia a la Fundación Educativa Jesuitas Centro-Este */
.feje { background: color-mix(in srgb, var(--mist) 22%, var(--paper)); }
.feje-box { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feje .eyebrow { margin: 0 0 6px; font: 700 .85rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.feje .h2 { margin-top: 0; }
.feje p { max-width: 60ch; }
.feje-actions { justify-content: flex-end; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) { .feje-box { grid-template-columns: minmax(0, 1fr); } .feje-actions { justify-content: flex-start; } }
.handle-h { text-transform: none; }
/* Servicios: uniformidad */
.uni-list { margin: 8px 0 16px; padding-left: 1.2em; display: grid; gap: 8px; }
.uni-list li::marker { color: var(--ultra); }
/* Área internacional: acreditación Erasmus+ */
.erasmus-acc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--paper); color: var(--text); border-radius: 22px; padding: clamp(20px, 3vw, 32px); margin: 32px 0 40px; max-width: 900px; }
.erasmus-acc img { width: clamp(180px, 22vw, 260px); height: auto; }
.erasmus-acc p { margin: 0 0 8px; }
.erasmus-acc .erasmus-title { font: 700 var(--step-1)/1.25 var(--body); color: var(--ink); }
.erasmus-acc a { color: var(--ultra); font-weight: 600; }
@media (max-width: 700px) { .erasmus-acc { grid-template-columns: 1fr; } }

/* ── Responsive: texto que nunca se amontona ── */
/* Menú: los enlaces no se parten en dos líneas */
.nav a, .nav button.menu-trigger { white-space: nowrap; }
.lang { flex-shrink: 0; }
/* Titulares de varias líneas: interlineado suficiente para tildes y descendentes */
.h2, .stage h2, .page-hero h1, .cura h2, .visit .h2, .four .word, .nov h3, .nov-car h3 { line-height: 1.02; }
.hero-word { line-height: .92; }
.hero-kicker { margin-bottom: .6em; }
.page-hero h1 .script { margin-bottom: .08em; line-height: 1.2; }
/* Antetítulos y subtítulos separados del titular */
.age, .eyebrow { line-height: 1.3; margin-bottom: 10px; }
.section-head .lede { margin-top: .5em; }
.handle, .social .lede { margin-top: .6em; }
/* Palabras largas (correos, enlaces) bajan de línea en lugar de desbordar */
p, li, dd, dt, .facts span, .lede { overflow-wrap: break-word; }
.facts a, .docs a, .dir a { overflow-wrap: anywhere; }
.docs a { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
.docs li { max-width: 100%; }
/* Títulos grandes en móvil: que quepan sin desbordar */
@media (max-width: 480px) {
  .page-hero h1 { font-size: clamp(2.6rem, 14vw, 4rem); overflow-wrap: anywhere; hyphens: auto; }
  .stage h2, .h2 { overflow-wrap: break-word; hyphens: auto; }
  .facts li { flex-wrap: wrap; gap: 4px 12px; }
}
.hero-kicker { margin-bottom: clamp(12px, 2.2vw, 30px); }
.crumbs { margin-bottom: clamp(12px, 1.6vw, 22px); }
.age + h2, .age + .h2, .eyebrow + h2, .eyebrow + .h2, .feje .eyebrow + .h2 { margin-top: .25em; }
h3, h4 { overflow-wrap: break-word; hyphens: auto; }