/* =============================================================================
   Hacia Lo Alto — hoja de estilos del sitio institucional
   Valores tomados del brandbook. Paleta cerrada: no introducir colores nuevos.

   Índice
    1. Tipografías          11. Modelo de aprendizaje (tarjetas)
    2. Design tokens        12. Pilares
    3. Base                 13. Cómo trabajamos
    4. Utilidades           14. Presencia
    5. Botones              15. Testimonios (carrusel)
    6. Header               16. Contacto y formulario
    7. Drawer móvil         17. Footer
    8. Hero                 18. Páginas de texto
    9. Barra de cifras      19. Capa móvil (≤860px / ≤520px)
   10. Quiénes somos        20. Movimiento reducido e impresión
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tipografías (auto-hospedadas, subset latin + latin-ext)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --navy: #151a20;
  --navy-700: #232b34;
  --slate: #585d62;
  --slate-300: #9ca1a6;
  --gold: #a89b7a;
  --gold-600: #8c7f60;
  --gold-200: #dad1b8;
  --ivory: #f0f3e7;
  --white: #ffffff;
  --color-border: #dbddd1;

  /* Texto sobre fondo oscuro */
  --on-dark: rgba(240, 243, 231, 0.78);
  --on-dark-soft: rgba(240, 243, 231, 0.62);

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Marcellus', 'Times New Roman', serif;

  /* Layout */
  --content-max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 140px);
  /* Valor de respaldo. JS lo sobrescribe con la altura real del header. */
  --header-h: 63px;

  /* Formas */
  --radius: 4px;
  --pill: 999px;

  /* Movimiento — un solo ease-out en todo el sitio */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --press: 160ms;
}

/* -----------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Con el drawer abierto el fondo no debe poder desplazarse. */
body.menu-open {
  overflow: hidden;
}

a {
  color: var(--gold-600);
  text-decoration: none;
  transition: color 150ms ease, opacity 0.2s ease, background 0.2s ease;
}
a:hover {
  color: var(--gold);
}

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

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--navy);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reveal al entrar en pantalla. JS añade la transición y el desplazamiento;
   sin JS el <noscript> del HTML los deja visibles. */
[data-reveal] {
  opacity: 0;
}
[data-reveal].is-visible {
  opacity: 1;
}

@keyframes hlaRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hlaFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* -----------------------------------------------------------------------------
   4. Utilidades de composición
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.section {
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.section--ivory {
  background: var(--ivory);
}
.section--white {
  background: var(--white);
  border-top: 1px solid var(--color-border);
}
.section--navy {
  background: var(--navy);
}
.section--media {
  position: relative;
  overflow: hidden;
}

.section__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section__scrim {
  position: absolute;
  inset: 0;
}
.section__inner {
  position: relative;
}

.eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-600);
}
.eyebrow--on-dark {
  color: var(--gold-200);
}
.eyebrow--gold {
  color: var(--gold);
}

.h2 {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.14;
  color: var(--navy);
}
.h2--on-dark {
  color: var(--ivory);
}

.lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--slate);
  max-width: 56ch;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* -----------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform var(--press) var(--ease);
}
.btn:hover {
  opacity: 0.85;
}
/* Feedback de presión: el elemento cede al tacto. */
.btn:active {
  transform: scale(0.97);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
}
.btn--gold:hover {
  color: var(--navy);
}

.btn--navy {
  height: 54px;
  padding: 0 34px;
  background: var(--navy);
  color: var(--ivory);
  letter-spacing: 0.03em;
}
.btn--navy:hover {
  color: var(--ivory);
}

.btn--outline-light {
  border-color: rgba(240, 243, 231, 0.5);
  color: var(--ivory);
}
.btn--outline-light:hover {
  opacity: 1;
  background: rgba(240, 243, 231, 0.1);
  color: var(--ivory);
}

.btn--outline-navy {
  height: 48px;
  padding: 0 26px;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline-navy:hover {
  opacity: 1;
  background: var(--navy);
  color: var(--ivory);
}

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* -----------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  background: rgba(21, 26, 32, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(240, 243, 231, 0.12);
}

/* Sin backdrop-filter el texto necesita un fondo más sólido para contrastar. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header {
    background: rgba(21, 26, 32, 0.96);
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-header__mark {
  height: 34px;
  width: auto;
}
.site-header__wordmark {
  height: 26px;
  width: auto;
  opacity: 0.95;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 30px);
}
.site-nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 243, 231, 0.78);
}
.site-nav a:hover {
  color: var(--ivory);
}
.site-nav a.is-cta {
  color: var(--gold);
  font-weight: 600;
}
.site-nav a.is-cta:hover {
  color: var(--gold-200);
}

/* Hamburguesa de dos líneas: sólo en móvil */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--press) var(--ease);
}
.nav-toggle:active {
  transform: scale(0.94);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
}

/* -----------------------------------------------------------------------------
   7. Drawer móvil a pantalla completa
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 14px clamp(24px, 6vw, 48px) 48px;
  background: var(--navy);
  animation: hlaFade 220ms var(--ease) both;
  overflow-y: auto;
}
.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  flex-shrink: 0;
}
.nav-drawer__mark {
  height: 32px;
  width: auto;
}
.nav-drawer__close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  font-size: 26px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--press) var(--ease);
}
.nav-drawer__close:active {
  transform: scale(0.94);
}
.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(32px, 8vh, 64px);
}
.nav-drawer__links a {
  font-family: var(--font-serif);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.5;
  color: var(--ivory);
}
.nav-drawer__links a:hover {
  color: var(--gold-200);
}
.nav-drawer__foot {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nav-drawer__cta {
  height: 54px;
  width: 100%;
}
.nav-drawer__phone {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 243, 231, 0.6);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  scroll-margin-top: 0;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(21, 26, 32, 0.55) 0%,
    rgba(21, 26, 32, 0.18) 38%,
    rgba(21, 26, 32, 0.82) 100%
  );
}
.hero__content {
  position: relative;
  max-width: 1100px;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(48px, 6vw, 88px);
  animation: hlaRise 800ms var(--ease) both;
}
.hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.hero__sub {
  margin: 26px 0 0;
  max-width: 560px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: rgba(240, 243, 231, 0.82);
}
.hero__eyebrow {
  margin-bottom: 22px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* -----------------------------------------------------------------------------
   9. Barra de cifras
   -------------------------------------------------------------------------- */
.statbar {
  background: var(--navy);
  border-top: 1px solid rgba(240, 243, 231, 0.1);
}
.statbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 26px var(--gutter);
}
.statbar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.statbar__value {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  color: var(--gold);
}
.statbar__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(240, 243, 231, 0.6);
}

/* -----------------------------------------------------------------------------
   10. Quiénes somos
   -------------------------------------------------------------------------- */
.about__text > p + p {
  margin-top: 20px;
}
.about__meta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}
.about__meta dt {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.about__meta dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}
.about__figure {
  margin: 0;
}
.about__figure img {
  width: 100%;
  height: clamp(360px, 46vw, 600px);
  object-fit: cover;
  border-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
   10b. El reto (sección con vídeo)
   -------------------------------------------------------------------------- */
.reto {
  padding: clamp(80px, 10vw, 150px) var(--gutter);
}
/* El vídeo se revela sobre el póster cuando empieza a reproducirse; si el
   autoplay se bloquea o el archivo no carga, queda la imagen de fondo. */
.reto__video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.reto__video.is-playing {
  opacity: 1;
}
.reto .section__scrim {
  background: linear-gradient(
    90deg,
    rgba(21, 26, 32, 0.94) 0%,
    rgba(21, 26, 32, 0.8) 45%,
    rgba(21, 26, 32, 0.5) 100%
  );
}
.reto .h2 {
  max-width: 20ch;
  margin-bottom: 34px;
  font-size: clamp(30px, 4vw, 54px);
}
.reto__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1000px;
}
.reto__col {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(240, 243, 231, 0.25);
  font-size: 17px;
  line-height: 1.7;
  color: var(--on-dark);
}

/* -----------------------------------------------------------------------------
   11. Modelo de aprendizaje — tres tarjetas oscuras
   Son pilares del modelo, no pasos secuenciales: por eso no llevan numeración.
   -------------------------------------------------------------------------- */
.modelo {
  padding: clamp(72px, 9vw, 130px) var(--gutter);
}
.modelo__container {
  max-width: 1120px;
  margin-inline: auto;
}
.modelo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.modelo__head .eyebrow {
  margin-bottom: 14px;
}
.modelo__head .h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
}
.modelo__quote {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--gold-600);
}
/* Rejilla fija de 3: nunca deben quedar dos arriba y una abajo. */
.modelo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mcard {
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(158deg, #1d232c 0%, #151a20 56%, #10141a 100%);
  border: 1px solid rgba(240, 243, 231, 0.08);
  box-shadow: 0 2px 6px rgba(21, 26, 32, 0.06), 0 16px 40px rgba(21, 26, 32, 0.14),
    0 32px 70px rgba(21, 26, 32, 0.08);
  transition: transform 260ms var(--ease), box-shadow 260ms ease;
}
.mcard__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.mcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--ease);
}
/* Funde la foto con la superficie de la tarjeta. */
.mcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(21, 26, 32, 0) 55%,
    rgba(16, 20, 26, 0.92) 100%
  );
}
.mcard__body {
  padding: clamp(20px, 2.2vw, 28px);
}
.mcard__title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.15;
  color: var(--ivory);
}
.mcard__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(240, 243, 231, 0.72);
  text-wrap: pretty;
}

/* El hover sólo tiene sentido con puntero fino: en táctil se queda pegado. */
@media (hover: hover) and (pointer: fine) {
  .mcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(21, 26, 32, 0.1), 0 26px 50px rgba(21, 26, 32, 0.22),
      0 46px 90px rgba(21, 26, 32, 0.12);
  }
  .mcard:hover .mcard__photo img {
    transform: scale(1.06);
  }
}

/* -----------------------------------------------------------------------------
   12. Pilares
   -------------------------------------------------------------------------- */
.pilares__img {
  width: 100%;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover;
  border-radius: var(--radius);
}
.pilares .h2 {
  max-width: 18ch;
  margin-bottom: 44px;
}
.pilares__list {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pilar {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  min-width: 0;
}
.pilar__num {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--gold);
}
.pilar__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
}
.pilar__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}

/* -----------------------------------------------------------------------------
   13. Cómo trabajamos (stepper)
   -------------------------------------------------------------------------- */
.proceso .h2 {
  max-width: 20ch;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.proceso__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.paso__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--pill);
  border: 1px solid rgba(240, 243, 231, 0.35);
  color: rgba(240, 243, 231, 0.8);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
}
.paso--activo .paso__num {
  border-color: var(--gold);
  color: var(--gold);
}
.paso__line {
  flex: 1;
  height: 1px;
  background: rgba(240, 243, 231, 0.2);
}
.paso__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
}
.paso__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(240, 243, 231, 0.7);
}
.badge {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: var(--pill);
  background: rgba(168, 155, 122, 0.18);
  color: var(--gold-200);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}
.proceso__cta {
  margin-top: clamp(40px, 5vw, 64px);
}

/* -----------------------------------------------------------------------------
   14. Presencia
   -------------------------------------------------------------------------- */
.presencia {
  padding: clamp(72px, 9vw, 130px) var(--gutter);
}
.presencia .section__scrim {
  background: rgba(21, 26, 32, 0.72);
}
.presencia .h2 {
  max-width: 22ch;
  margin-bottom: clamp(40px, 5vw, 68px);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.15;
}
/* Sin líneas divisorias: la separación es puramente espacio. */
.presencia__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: clamp(28px, 3.5vw, 64px);
}
.presencia__item {
  min-width: 0;
}
.presencia__value {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  color: var(--gold);
}
.presencia__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* -----------------------------------------------------------------------------
   15. Testimonios — carrusel sobre fotografía a sangre completa
   -------------------------------------------------------------------------- */
.testimonios {
  position: relative;
  overflow: hidden;
  min-height: clamp(540px, 68vh, 700px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.testimonios .section__media {
  object-position: center 45%;
}
.testimonios .section__scrim {
  background: linear-gradient(
    180deg,
    rgba(21, 26, 32, 0.45) 0%,
    rgba(21, 26, 32, 0.3) 45%,
    rgba(21, 26, 32, 0.5) 100%
  );
}
.testimonios__eyebrow {
  position: relative;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

/* Panel de vidrio */
.testi-panel {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 720px;
  padding: clamp(30px, 3.4vw, 48px);
  background: rgba(21, 26, 32, 0.5);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(240, 243, 231, 0.18);
  border-radius: var(--radius);
}
/* Sin blur, el panel necesita más opacidad para que la cita se lea. */
@supports not ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .testi-panel {
    background: rgba(21, 26, 32, 0.82);
  }
}
.testi-quote {
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.45;
  color: var(--ivory);
  text-wrap: pretty;
}
.testi-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(240, 243, 231, 0.2);
}
.testi-author {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.testi-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory);
}
.testi-role {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.testi-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testi-count {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(240, 243, 231, 0.6);
}
.testi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--pill);
  border: 1px solid rgba(240, 243, 231, 0.45);
  background: transparent;
  color: var(--ivory);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
    transform var(--press) var(--ease);
}
.testi-btn:hover {
  background: rgba(240, 243, 231, 0.14);
  border-color: var(--gold);
}
.testi-btn:active {
  transform: scale(0.94);
}

/* -----------------------------------------------------------------------------
   16. Contacto y formulario
   -------------------------------------------------------------------------- */
.contacto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.contacto .h2 {
  margin-bottom: 22px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
}
.contacto__sub {
  margin: 0 0 36px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 44ch;
}
.contacto__direct {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.contacto__label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-300);
}
.contacto__value {
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
}
.contacto__value:hover {
  color: var(--gold-600);
}
.contacto__whatsapp {
  width: fit-content;
  margin-top: 10px;
}

.form-panel {
  background: var(--ivory);
  padding: clamp(32px, 4vw, 64px);
  min-width: 0;
}

.lead-form {
  display: grid;
  /* 180px (y no 200px) para que escuela/correo/teléfono queden en dos columnas
     en el panel de ~440px que resulta en escritorio; por debajo se apilan. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 44px);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.field--full {
  grid-column: 1 / -1;
}
.field__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--slate);
}
.field__optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate-300);
}
/* Campos tipo línea: sin caja, sólo borde inferior. */
.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 6px 0 10px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  outline: none;
  transition: border-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--slate-300);
}
.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--gold);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
/* Marca de error sólo tras intentar enviar (JS añade .was-validated). */
.was-validated .field input:invalid,
.was-validated .field textarea:invalid {
  border-bottom-color: var(--gold-600);
}

/* Trampa antispam: invisible para personas, alcanzable para bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}
.form-legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
  max-width: 30ch;
}
.form-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy);
  padding: 14px 18px;
  background: rgba(168, 155, 122, 0.16);
  border-left: 2px solid var(--gold-600);
}

.form-success {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  min-height: 300px;
}
.form-success__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}
.form-success h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--navy);
}
.form-success p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 44ch;
}

/* -----------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  padding: clamp(56px, 6vw, 84px) var(--gutter) 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(240, 243, 231, 0.14);
}
.site-footer__wordmark {
  height: 44px;
  width: auto;
  margin-bottom: 22px;
}
.site-footer__claim {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.45;
  color: rgba(240, 243, 231, 0.85);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__heading {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__col a {
  font-size: 15px;
  color: rgba(240, 243, 231, 0.72);
}
.site-footer__col a:hover {
  color: var(--ivory);
}
.site-footer__legal {
  margin: 24px 0 0;
  font-size: 13px;
  color: rgba(240, 243, 231, 0.45);
}

/* -----------------------------------------------------------------------------
   18. Páginas de texto legal / 404
   -------------------------------------------------------------------------- */
.page {
  padding: calc(var(--header-h) + clamp(56px, 8vw, 110px)) var(--gutter)
    clamp(72px, 9vw, 130px);
  background: var(--ivory);
}
.prose {
  max-width: 74ch;
}
.prose h1 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.1;
  color: var(--navy);
}
.prose .updated {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-300);
}
.prose h2 {
  margin: clamp(40px, 5vw, 64px) 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--navy);
}
.prose h3 {
  margin: 32px 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--slate);
}
.prose p {
  margin: 0 0 18px;
}
.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.prose li {
  margin-bottom: 10px;
}
.prose li::marker {
  color: var(--gold-600);
}
.prose strong {
  font-weight: 500;
  color: var(--navy);
}
.prose hr {
  margin: clamp(40px, 5vw, 64px) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.prose .callout {
  margin: 0 0 18px;
  padding: 20px 24px;
  background: var(--white);
  border-left: 2px solid var(--gold);
}
.prose .callout p:last-child {
  margin-bottom: 0;
}
.prose__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.page--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}
.page--center .prose {
  max-width: 46ch;
}
.page--center .btn {
  margin-top: 12px;
}

/* -----------------------------------------------------------------------------
   19. Capa móvil
   Los directores suelen abrir el sitio desde el celular, así que cada sección
   tiene un tratamiento explícito en lugar de dejarlo al reflow automático.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Navegación: links → hamburguesa + drawer */
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }

  /* Hero: 100svh evita el salto de la barra del navegador en iOS */
  .hero {
    min-height: 100svh;
  }
  .hero__content {
    padding-bottom: clamp(56px, 12vh, 96px);
  }
  /* Los dos CTAs se apilan a ancho completo para que quepan sin apretarse */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
  }

  /* Splits: la imagen sube primero y se recorta más baja */
  .split {
    gap: 36px;
  }
  .split__media {
    order: -1;
  }
  .about__figure img,
  .pilares__img {
    height: clamp(260px, 55vw, 340px);
  }
  /* Sin esto la persona de la foto queda recortada */
  .about__figure img {
    object-position: center 82%;
  }

  .reto {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  /* Modelo: encabezado apilado y tarjetas horizontales en una columna */
  .modelo__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 28px;
  }
  .modelo__head .h2 {
    font-size: 26px;
  }
  .modelo__quote {
    font-size: 16px;
  }
  .modelo__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .mcard {
    display: flex;
    align-items: stretch;
    height: 140px;
    border-radius: 16px;
  }
  .mcard__photo {
    flex: 0 0 42%;
    aspect-ratio: auto;
    height: 100%;
  }
  /* En horizontal el degradado tiene que ir de izquierda a derecha */
  .mcard__scrim {
    background: linear-gradient(
      90deg,
      rgba(21, 26, 32, 0) 45%,
      rgba(16, 20, 26, 0.9) 100%
    );
  }
  .mcard__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
  }
  .mcard__title {
    font-size: 19px;
    margin-bottom: 5px;
  }
  .mcard__text {
    font-size: 13px;
    line-height: 1.45;
    /* La tarjeta tiene alto fijo: la copia se recorta en lugar de desbordar */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Las líneas conectoras del stepper no significan nada en vertical */
  .paso__line {
    display: none;
  }

  .presencia__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .presencia__value {
    font-size: 38px;
  }

  /* Testimonios: la sección crece con el panel en lugar de forzar alto */
  .testimonios {
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .testi-panel {
    padding: 28px 22px;
  }
  .testi-quote {
    font-size: 20px;
  }

  .site-footer__grid {
    gap: 34px;
  }
}

@media (max-width: 520px) {
  .statbar__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* -----------------------------------------------------------------------------
   20. Preferencias de movimiento e impresión
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Se conservan las opacidades y se eliminan desplazamientos y zooms. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    transform: none !important;
  }
  .hero__content {
    animation-name: hlaFade;
    animation-duration: 400ms;
  }
  .mcard,
  .mcard__photo img {
    transition: none !important;
  }
  .btn:active,
  .nav-toggle:active,
  .testi-btn:active,
  .nav-drawer__close:active {
    transform: none;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .nav-drawer,
  .hero__actions,
  .proceso__cta,
  .form-panel {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  [data-reveal] {
    opacity: 1 !important;
  }
}