/* ============================================================
   Composiciones de página.
   Paleta: #FF620B, #0F4C82, #BFD94B, blanco y neutros claros.
   Se alternan composiciones — editorial, fotográfica, recorrido,
   paneles escalonados — para que nada se resuelva con rejillas de
   tarjetas repetidas.
   ============================================================ */

/* ============================================================
   HERO — texto a la izquierda, fotografía real a la derecha.
   Sin velo oscuro encima de la imagen.
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(191, 217, 75, .16) 0%, transparent 55%),
    radial-gradient(90% 80% at 4% 100%, rgba(255, 98, 11, .09) 0%, transparent 60%),
    var(--c-surface);
  overflow: hidden;
}
.hero__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); }
}

.hero__copy { max-width: 40rem; }
.hero__title {
  /* ~62px en pantallas grandes: tres líneas en una columna de ~600px,
     sin gritar ni dejar huecos. */
  font-size: clamp(2.05rem, 1.05rem + 3.9vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}
/* Texto grande (>=24px): 3.00:1 cumple el umbral AA de texto grande,
   así que aquí sí va el naranja del logotipo. */
.hero__title em { font-style: normal; color: var(--c-orange-500); }
.hero__lead { font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--s-8); }

/* Marco orgánico: la foto se apoya en una forma de marca. */
.hero__media { position: relative; justify-self: center; width: 100%; max-width: 30rem; }
.hero__figure { position: relative; margin: 0; }
.hero__figure::before {
  content: "";
  position: absolute; inset: -6% -4% -4% -6%;
  background: linear-gradient(150deg, var(--c-navy-800) 0%, var(--c-navy-700) 55%, var(--c-orange-500) 160%);
  border-radius: 48% 52% 44% 56% / 40% 38% 62% 60%;
  z-index: 0;
}
.hero__figure::after {
  content: "";
  position: absolute; right: -2%; bottom: 6%;
  width: 30%; aspect-ratio: 1;
  border: 4px solid var(--c-lime-500);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.hero__figure img {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 22%;
  border-radius: 46% 54% 42% 58% / 38% 36% 64% 62%;
}
@media (max-width: 899px) { .hero__media { max-width: 22rem; } }

/* ============================================================
   ENROLLMENT — composición asimétrica con foto pequeña
   ============================================================ */
.enrol { padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.enrol__inner {
  display: grid; gap: var(--s-6);
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--c-navy-50);
  border: 1px solid var(--c-navy-200);
  position: relative;
  overflow: hidden;
}
.enrol__inner::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--c-orange-500), var(--c-lime-500));
}
@media (min-width: 760px) {
  .enrol__inner { grid-template-columns: auto 1fr auto; gap: var(--s-8); padding: var(--s-6) var(--s-8); }
}
.enrol__media { margin: 0; }
.enrol__media img {
  width: 108px; height: 108px;
  object-fit: cover; object-position: center 20%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 759px) { .enrol__media img { width: 88px; height: 88px; } }
.enrol__copy h2 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.enrol__copy p { font-size: var(--fs-sm); margin-bottom: var(--s-4); max-width: 52ch; }
.enrol__actions { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 480px) and (max-width: 759px) {
  .enrol__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   SELLO DE ADMISIONES — tres elementos fijos, con icono
   ============================================================ */
.stamp { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; }
.stamp li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0;
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700;
}
.stamp svg { width: 18px; height: 18px; flex: none; }
.stamp--light li { color: var(--c-navy-900); }
.stamp--light svg { color: var(--c-orange-500); }
.stamp--dark li { color: #fff; }
.stamp--dark svg { color: var(--c-lime-500); }

/* ============================================================
   CABECERA DE PÁGINA INTERIOR
   ============================================================ */
.page-head {
  background: var(--surface-dark);
  color: #fff;
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 98, 11, .22), transparent 60%);
}
.page-head > .container { position: relative; }
.page-head__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .page-head__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-10); }
}
.page-head h1 { color: #fff; max-width: 20ch; margin-bottom: var(--s-4); }
.page-head .lead { color: var(--text-on-dark-subtle); max-width: 56ch; }
.page-head .stamp { margin-top: var(--s-6); }
.page-head__media { margin: 0; }
.page-head__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 899px) { .page-head__media { display: none; } }

/* Migas */
.crumbs { margin-bottom: var(--s-5); font-size: var(--fs-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--text-on-dark-subtle); }
.crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .45); }
.crumbs a { color: var(--text-on-dark-subtle); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* En páginas claras las migas van sobre blanco. */
.enquiry .crumbs li { color: var(--text-subtle); }
.enquiry .crumbs a { color: var(--c-navy-800); }
.enquiry .crumbs li + li::before { color: var(--c-line-strong); }
.enquiry .crumbs [aria-current="page"] { color: var(--text-strong); }

/* ============================================================
   SPLIT + PAR DE IMÁGENES + LISTA CON ICONO
   ============================================================ */
.split { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.media-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.media-pair img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 4; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.media-pair__b { margin-top: var(--s-10); }
@media (max-width: 620px) { .media-pair__b { margin-top: 0; } }

.figure-card { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.figure-card img { width: 100%; height: auto; display: block; }

.ticks { list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.ticks li { display: flex; gap: var(--s-4); margin: 0 0 var(--s-5); align-items: flex-start; }
.ticks li:last-child { margin-bottom: 0; }
.ticks__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: var(--c-orange-50); color: var(--c-orange-500);
}
.section--sunk .ticks__icon { background: #fff; }
.ticks__icon svg { width: 22px; height: 22px; }
.ticks strong {
  display: block; font-family: var(--font-head); font-size: var(--fs-body);
  color: var(--text-strong); margin-bottom: 2px;
}
.ticks span { font-size: var(--fs-sm); color: var(--text-base); }
.ticks--compact li { margin-bottom: var(--s-4); }
.ticks--compact .ticks__icon { width: 36px; height: 36px; }
.ticks--compact .ticks__icon svg { width: 19px; height: 19px; }

/* ============================================================
   MODALIDADES — ritmo semanal, no dos tarjetas grandes
   ============================================================ */
.models { display: grid; gap: var(--s-6); }
@media (min-width: 700px)  { .models { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .models { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.model {
  display: flex; flex-direction: column;
  padding: var(--s-6) 0 0;
  border-top: 3px solid var(--c-navy-800);
}
.model__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.model__head h3 { margin: 0; font-size: var(--fs-h3); }
.model__icon { display: inline-flex; color: var(--c-orange-500); }
.model__icon svg { width: 26px; height: 26px; }
.model__summary { font-size: var(--fs-sm); margin: var(--s-5) 0 0; }
.model__meta { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.model__meta li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); margin: 0 0 var(--s-2); }
.model__meta svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-lime-700); }

/* Semana representada: cuatro días en la academia, uno en casa. */
.week { display: flex; gap: 6px; }
.week__day { flex: 1; height: 44px; border-radius: var(--r-sm); }
.week__day--campus { background: var(--c-navy-800); }
.week__day--home { background: var(--c-lime-500); }
.week--home .week__day--home { opacity: .5; }
.week--home .week__day--home:first-child { opacity: 1; }
.week__key {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--text-subtle);
}
.week__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 4px; }
.week__swatch--campus { background: var(--c-navy-800); }
.week__swatch--home { background: var(--c-lime-500); }

.models__media { margin: 0; display: none; }
@media (min-width: 1040px) {
  .models__media { display: block; }
  .models__media img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  }
}

/* ============================================================
   RECORRIDO — etapas y pasos conectados
   ============================================================ */
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 760px)  { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .journey { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

.journey__step { position: relative; margin: 0; padding-top: var(--s-3); }
@media (min-width: 1040px) {
  .journey__step::before {
    content: "";
    position: absolute; top: calc(var(--s-3) + 27px); left: 54px; right: -1rem;
    height: 2px; background: var(--c-navy-200);
  }
  .journey__step:last-child::before { display: none; }
}
.journey__marker { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.journey__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: none;
  border-radius: 50%;
  background: var(--c-navy-800); color: #fff;
  position: relative; z-index: 1;
}
.journey__icon svg { width: 26px; height: 26px; }
.journey__num {
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; color: var(--c-orange-700);
  background: var(--c-surface); padding-right: var(--s-2); position: relative; z-index: 1;
}
.section--sunk .journey__num { background: var(--c-surface-sunk); }
.journey__body h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.journey__body p { font-size: var(--fs-sm); margin: 0; }
.journey__foot { margin-top: var(--s-8); }
.journey--flow .journey__icon { background: var(--c-orange-500); color: var(--on-orange); }

/* ============================================================
   ÁREAS ACADÉMICAS — composición editorial
   ============================================================ */
.learn__grid { display: grid; gap: var(--s-8); }
@media (min-width: 940px) {
  .learn__grid {
    grid-template-columns: minmax(300px, .82fr) 1.18fr;
    grid-template-areas: "media head" "media areas";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    row-gap: var(--s-8);
    align-items: start;
  }
  .learn__head  { grid-area: head; }
  .learn__media { grid-area: media; align-self: start; }
  .learn__areas { grid-area: areas; }
}
.learn__head { max-width: 46ch; }
.learn__head h2 { margin-bottom: var(--s-4); }
.learn__head .lead { margin-bottom: 0; }

.learn__media { position: relative; margin: 0; }
.learn__media::before {
  content: "";
  position: absolute; inset: auto auto -12px -12px;
  width: 44%; height: 40%;
  border-left: 4px solid var(--c-lime-500);
  border-bottom: 4px solid var(--c-lime-500);
  border-bottom-left-radius: var(--r-xl);
  z-index: 0;
}
.learn__media img {
  position: relative; z-index: 1;
  width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center 38%;
  border-radius: var(--r-xl);
}
@media (max-width: 939px) {
  .learn__media img { aspect-ratio: 4 / 3; object-position: center 42%; }
  .learn__media::before { inset: auto auto -10px -10px; width: 40%; height: 46%; }
}

/* Base del modelo: azul de marca #0F4C82, texto blanco, icono naranja
   y un acento lima discreto. Contraste verificado en QA. */
.learn__foundation {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-navy-800);
  border-left: 5px solid var(--c-lime-500);
  margin-bottom: var(--s-6);
}
.learn__foundation h3 { font-size: var(--fs-h4); color: #fff; margin: 0 0 var(--s-1); }
.learn__foundation p { margin: 0; font-size: var(--fs-sm); color: var(--text-on-dark-subtle); max-width: 46ch; }
.learn__foundation .learn__icon { color: var(--c-orange-500); }
.learn__foundation .learn__icon svg { width: 26px; height: 26px; }

.learn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
@media (min-width: 560px) {
  .learn__list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: clamp(1.5rem, .8rem + 2vw, 3rem);
  }
}
.learn__list li {
  display: flex; align-items: center; gap: var(--s-4);
  margin: 0; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.learn__icon { display: inline-flex; flex: none; color: var(--c-orange-500); }
.learn__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.learn__name {
  font-family: var(--font-head); font-size: var(--fs-body); font-weight: 600;
  letter-spacing: -.01em; color: var(--c-navy-900); line-height: 1.3;
}

/* ============================================================
   PILARES — paneles fotográficos escalonados
   ============================================================ */
.pillars { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .pillar:nth-child(2) { margin-top: var(--s-10); }
  .pillar:nth-child(3) { margin-top: var(--s-16); }
}
.pillar__media { margin: 0 0 var(--s-5); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.pillar__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-orange-50); color: var(--c-orange-500);
}
.section--sunk .pillar__icon { background: #fff; }
.pillar__icon svg { width: 21px; height: 21px; }
.pillar__body h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.pillar__body p { font-size: var(--fs-sm); margin: 0; }

/* ============================================================
   MISIÓN Y VISIÓN (About)
   ============================================================ */
.mv { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .mv { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }
.mv__item {
  margin: 0; padding: var(--s-6);
  border: 1px solid rgba(255, 255, 255, .2);
  border-left: 4px solid var(--c-lime-500);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
}
.mv__item h3 {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-lime-500); margin-bottom: var(--s-3);
}
.mv__item p { color: #fff; font-size: var(--fs-lead); line-height: 1.55; margin: 0; }

/* ============================================================
   DOS HECHOS (Our Grades)
   ============================================================ */
.two-facts { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .two-facts { grid-template-columns: repeat(2, 1fr); } }
.two-facts__item {
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
}
.two-facts__item--accent { border-color: var(--c-orange-300); background: var(--c-orange-50); }
.two-facts__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s-4);
  border-radius: var(--r-md); background: var(--c-navy-800); color: #fff;
}
.two-facts__item--accent .two-facts__icon { background: var(--c-orange-500); color: var(--on-orange); }
.two-facts__icon svg { width: 22px; height: 22px; }
.two-facts__item h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.two-facts__item p { font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.two-facts__item p:last-child { margin-bottom: 0; }

/* ============================================================
   RECORRIDO DE ETAPAS (Our Grades)
   ============================================================ */
.stage-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-10); }
.stage-flow__item { display: grid; gap: var(--s-6); align-items: center; margin: 0; }
@media (min-width: 800px) {
  .stage-flow__item { grid-template-columns: .9fr 1.1fr; gap: var(--s-10); }
  .stage-flow__item:nth-child(even) .stage-flow__media { order: 2; }
}
.stage-flow__media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.stage-flow__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.stage-flow__step { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.stage-flow__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: var(--c-navy-800); color: #fff;
}
.stage-flow__icon svg { width: 23px; height: 23px; }
.stage-flow__num {
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-orange-700);
}
.stage-flow__body h3 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.stage-flow__move {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--text-subtle);
}
.stage-flow__move svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-lime-700); }


/* ============================================================
   VIDA ESCOLAR
   ============================================================ */
.life-grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .life-grid { grid-template-columns: repeat(3, 1fr); } }
.life-figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.life-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* ============================================================
   EQUIPO
   ============================================================ */
.people { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px)  { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .people { grid-template-columns: repeat(3, 1fr); } }
.people li { margin: 0; }
.person {
  display: flex; gap: var(--s-4); align-items: center; height: 100%;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.person__photo {
  width: 60px; height: 60px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center;
  background: var(--c-navy-100);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-navy-200);
}
.people--lg .person__photo { width: 72px; height: 72px; }
.person__name { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); margin: 0 0 2px; font-size: var(--fs-body); }
.person__role { font-size: var(--fs-sm); color: var(--text-subtle); margin: 0; }

/* ============================================================
   CIERRE — CTA asimétrico con fotografía real
   ============================================================ */
.closing__inner {
  display: grid; gap: 0;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface-dark);
}
@media (min-width: 900px) { .closing__inner { grid-template-columns: .82fr 1.18fr; } }
/* La altura de la banda la marca el texto, no la foto: con una imagen
   vertical la columna azul se quedaba medio vacía. */
.closing__media { margin: 0; overflow: hidden; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .closing__inner { align-items: stretch; }
  .closing__media { height: 100%; }
  .closing__media img { aspect-ratio: auto; height: 100%; min-height: 0; }
}
.closing__copy { padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); position: relative; }
.closing__copy::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 98, 11, .26), transparent 62%);
  pointer-events: none;
}
.closing__copy > * { position: relative; }
.closing__copy .eyebrow { color: var(--c-lime-500); }
.closing__copy .eyebrow::before { background: var(--c-lime-500); }
.closing__copy h2 { color: #fff; margin-bottom: var(--s-3); max-width: 22ch; }
.closing__copy p { color: var(--text-on-dark-subtle); margin-bottom: var(--s-6); max-width: 52ch; }
.closing__copy .stamp { margin-bottom: var(--s-6); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-cards { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px)  { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-card {
  margin: 0; padding: var(--s-6);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff;
}
.contact-card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s-4);
  border-radius: var(--r-md); background: var(--c-orange-50); color: var(--c-orange-500);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.contact-card p { font-size: var(--fs-sm); margin: 0 0 var(--s-2); }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card__link { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-body); }

/* Dirección y mapa, lado a lado. El panel no depende del embebido. */
.locate { display: grid; gap: var(--s-6); align-items: stretch; }
@media (min-width: 860px) { .locate { grid-template-columns: .8fr 1.2fr; gap: var(--s-8); } }
.locate__panel {
  padding: var(--s-6);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-orange-500);
  border-radius: var(--r-lg); background: #fff;
}
.locate__label {
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-orange-700); margin-bottom: var(--s-2);
}
.locate__address {
  font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700;
  color: var(--text-strong); margin: 0;
}
.map-frame {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--shadow-md);
  background: var(--c-navy-50);
  min-height: clamp(280px, 34vw, 420px);
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: clamp(280px, 34vw, 420px); border: 0; }

/* ============================================================
   REQUEST INFORMATION
   ============================================================ */
.enquiry { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem); }
.enquiry__grid { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) {
  .enquiry__grid { grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
}
.enquiry__aside h1 { font-size: var(--fs-h1); margin-bottom: var(--s-4); }
.enquiry__aside .lead { margin-bottom: var(--s-6); }
.enquiry__media { margin: var(--s-8) 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.enquiry__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; }
@media (max-width: 899px) { .enquiry__media { max-width: 22rem; } }

.form-section { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem); }
.form-aside { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-subtle); }

/* ============================================================
   THANK YOU
   ============================================================ */
.ty { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.ty__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .ty__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-16); } }
.ty__mark {
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 0 var(--s-6);
  border-radius: 50%; background: var(--c-success-bg); border: 3px solid var(--c-success);
}
.ty__mark svg { width: 34px; height: 34px; color: var(--c-success); }
.ty__copy h1 { margin-bottom: var(--s-4); }
.ty__next {
  margin-top: var(--s-8); padding: var(--s-6);
  background: var(--c-surface-sunk); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.ty__next h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.ty__steps { list-style: none; margin: 0; padding: 0; counter-reset: ty; }
.ty__steps li { display: flex; gap: var(--s-4); align-items: flex-start; margin: 0 0 var(--s-5); font-size: var(--fs-sm); }
.ty__steps li:last-child { margin-bottom: 0; }
.ty__steps li::before {
  counter-increment: ty; content: counter(ty);
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--c-navy-100); color: var(--c-navy-800);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
}
.ty__steps strong { display: block; font-family: var(--font-head); font-size: var(--fs-body); margin-bottom: 2px; }
.ty__status {
  margin-top: var(--s-8); padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-orange-500); background: var(--c-orange-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm); color: #4A2400;
}
.ty__media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.ty__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .ty__media { display: none; } }

/* ============================================================
   PROSA (páginas legales)
   ============================================================ */
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-10); margin-bottom: var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { max-width: 70ch; }
.prose ul { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }

/* ============================================================
   SISTEMA VISUAL (referencia interna)
   ============================================================ */
.ds-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-bottom: var(--s-8); }
.swatch { width: 132px; }
.swatch__chip { height: 68px; border-radius: var(--r-md); border: 1px solid rgba(0, 0, 0, .08); }
.swatch__meta { font-size: var(--fs-xs); margin-top: var(--s-2); }
.swatch__meta strong { display: block; font-family: var(--font-head); }
.swatch__meta code { font-size: 11px; color: var(--text-subtle); }