/* =========================================================
   OTTERSPORTS · Gestión deportiva
   Identidad: Bodoni Moda (titulares) · Montserrat (texto)
   Paleta: Azul Marino · Negro Tinta · Marfil · Plata
   ========================================================= */

:root {
  /* Paleta de marca */
  --navy: #1B2A41;
  --ink: #0F1216;
  --ivory: #F6F4EF;
  --silver: #AAB0B8;

  /* Derivados */
  --paper: #FAF9F6;              /* fondo de página (manual de marca) */
  --text: #1B2A41;
  --text-muted: #465163;
  --text-light: #F6F4EF;
  --text-light-muted: rgba(246, 244, 239, 0.8);
  --hairline: rgba(27, 42, 65, 0.14);
  --hairline-light: rgba(246, 244, 239, 0.16);

  /* Tipografía */
  --font-serif: "Bodoni Moda", Georgia, serif;
  --font-sans: "Montserrat", system-ui, sans-serif;

  /* Ritmo */
  --gutter: clamp(1rem, 2.6vw, 2.75rem);
  --section-y: clamp(6rem, 12vw, 10rem);
  --header-h: 84px;

  /* Formas */
  --radius: clamp(18px, 2.4vw, 32px);
  --arch-h: clamp(56px, 9vw, 150px);   /* altura de los arcos entre secciones */

  /* Movimiento */
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

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

/* Solo desplazamiento vertical: el recorte lateral se hace en el contenido, NO en html/body
   (en html/body rompe el aviso de scroll en Safari de iPhone y las secciones no aparecen) */
#smooth-content { overflow-x: hidden; overflow-x: clip; }   /* hidden: respaldo para Safari antiguo */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
/* Scroll suave nativo solo como respaldo sin JS (con JS lo gestiona ScrollSmoother) */
html:not(.js) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }

::selection { background: var(--navy); color: var(--ivory); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 100;
  padding: .75rem 1.25rem; background: var(--navy); color: var(--ivory);
  font-size: .9rem; text-decoration: none;
  transform: translateY(-200%);
  transition: transform .4s var(--ease-soft);
}
.skip-link:focus { transform: none; }

/* Contenido a todo el ancho de la pantalla, solo con margen lateral */
.container {
  width: 100%;
  padding-inline: var(--gutter);
}

/* ---------- Tipografía de marca ---------- */
/* Etiqueta de sección: mismo formato en toda la web (tamaño legible, trazo marcado, color sólido) */
.eyebrow {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text);
}
.eyebrow--light { color: var(--ivory); }
/* Excepción: «Gestión deportiva» bajo el logo del pie forma parte del logotipo y se queda discreta */
.footer__brand .eyebrow { font-size: .7rem; font-weight: 400; color: var(--text-light-muted); }

.display,
.hero__title,
.quote__line {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.display { font-size: clamp(3rem, 6.6vw, 6rem); }
.display em,
.hero__title em,
.quote__line em { font-weight: 600; color: var(--text-muted); }
/* Bodoni tiene perfiles muy finos: un trazo del color del texto los hace legibles, sobre todo en cursiva */
.display em,
.hero__title em,
.quote__line em,
.statement em,
.notfound .display em { -webkit-text-stroke: .018em currentColor; }
.display--light { color: var(--text-light); }
.display--light em { color: var(--silver); }

/* Líneas de SplitText: cada línea dentro de su máscara (deja respirar los descendentes de Bodoni) */
.split-line { padding-bottom: .06em; }

.prose {
  max-width: 36rem;
  margin-top: 2.2rem;
  color: var(--text-muted);
}
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--text); }
.prose__lead {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--text);
}
.prose--light { color: var(--text-light-muted); }

.subtitle {
  margin-bottom: 1.2rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.caption {
  margin-bottom: .7rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.btn:active { transform: scale(.98); }
.btn--light { background: var(--ivory); color: var(--navy); }
.btn--light:hover { background: #fff; }
.btn--dark { background: var(--navy); color: var(--ivory); }
.btn--dark:hover { background: var(--ink); }
.btn--ghost-light { border: 1px solid rgba(246, 244, 239, .35); color: var(--ivory); }
.btn--ghost-light:hover { border-color: var(--ivory); background: rgba(246, 244, 239, .08); }

/* ---------- Fotos ----------
   .frame: marco redondeado que recorta la foto.
   .frame--pan: la foto es más grande que el marco para poder desplazarse dentro (parallax). */
.frame {
  overflow: hidden;
  background: var(--navy);
  border-radius: var(--radius);
  clip-path: inset(0 round var(--radius));   /* recorte fiable de esquinas con transformaciones */
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78);
}
.frame--pan img {
  width: 116%;
  height: 116%;
  max-width: none;
  margin: -8% 0 0 -8%;
}

/* =========================================================
   CABECERA
   Fija y sin recuadro visible: su fondo es siempre el mismo color
   que la sección que tiene debajo (main.js pone --header-bg).
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--header-h);
  color: var(--ivory);
  background-color: var(--header-bg, var(--navy));
  transition: color .5s ease, background-color .5s ease;
}
.site-header[data-theme="light"] { color: var(--navy); }

.site-header__inner {
  height: 100%;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logotipo vectorial (assets/logo): toma el color del texto de la cabecera */
.brand {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  transform-origin: left center;   /* crece/encoge desde la izquierda (main.js) */
  transition: opacity .3s var(--ease-soft);
}
.logo { display: block; width: auto; height: 1.15rem; }
/* Con el menú móvil abierto, el logo (que puede estar a tamaño grande) no tapa los enlaces */
.menu-open .brand { opacity: 0; pointer-events: none; }

.nav { position: relative; }
.nav__list { display: flex; gap: 2.4rem; }
.nav__link {
  display: block;
  padding: .5rem 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .7;
  transition: opacity .4s var(--ease-soft);
}
.nav__link:hover,
.nav__link.is-active { opacity: 1; }

/* Indicador de sección activa: un único trazo que se desplaza entre enlaces */
.nav__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .7s var(--ease-soft), opacity .4s;
  pointer-events: none;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.menu-toggle__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-soft), top .6s var(--ease-soft);
}
.menu-toggle__bar:nth-of-type(2) { top: 18px; }
.menu-toggle__bar:nth-of-type(3) { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(2) { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(3) { top: 22px; transform: rotate(-45deg); }

/* Menú móvil a pantalla completa: logo arriba, secciones numeradas con descripción,
   claim y contacto abajo, y el monograma OS de fondo como marca de agua */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) max(1.6rem, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(170, 176, 184, .14), rgba(27, 42, 65, 0) 60%),
    linear-gradient(180deg, var(--navy) 0%, #16223A 100%);
  color: var(--ivory);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__mark {
  position: absolute;
  right: -18%;
  bottom: 14%;
  width: 78%;
  max-width: 420px;
  opacity: .05;
  pointer-events: none;
}
.mobile-menu__logo { display: flex; align-items: center; height: var(--header-h); line-height: 0; }
.mobile-menu__logo .logo { height: 1.15rem; }
.mobile-menu__tag {
  margin-top: 1.4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}
.mobile-menu nav { position: relative; margin-top: 1rem; }
.mobile-menu__list { counter-reset: none; }
.mobile-menu__list li { overflow: hidden; border-bottom: 1px solid var(--hairline-light); }
.mobile-menu__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name arrow" "desc arrow";
  align-items: baseline;
  column-gap: .6rem;
  padding: 1.05rem 0;
  text-decoration: none;
}
.mobile-menu__list a::after {
  content: "→";
  grid-area: arrow;
  align-self: center;
  font-size: 1.1rem;
  color: var(--silver);
  transition: transform .4s var(--ease-soft);
}
.mobile-menu__list a:active::after { transform: translateX(.3rem); }
.mobile-menu__name {
  grid-area: name;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
}
.mobile-menu__desc { grid-area: desc; margin-top: .25rem; font-size: .95rem; color: var(--text-light-muted); }
.mobile-menu__foot { position: relative; display: grid; gap: 1.1rem; margin-top: auto; padding-top: 2rem; }
.mobile-menu__claim { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.25; }
.mobile-menu__claim em { color: var(--silver); }
.mobile-menu__contact { display: grid; gap: .3rem; font-size: 1.02rem; }
.mobile-menu__contact a { color: var(--text-light-muted); text-decoration: none; }
.mobile-menu__cta { width: 100%; }
/* Móviles bajos (iPhone SE, 13, Pro Max...): todo más compacto para que quepan las 5 secciones sin desplazarse */
@media (max-height: 820px) {
  .mobile-menu__tag { margin-top: .4rem; }
  .mobile-menu nav { margin-top: .4rem; }
  .mobile-menu__list a { padding: .6rem 0; }
  .mobile-menu__name { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
  .mobile-menu__desc { font-size: .88rem; }
  .mobile-menu__foot { gap: .7rem; padding-top: 1.2rem; }
  .mobile-menu__claim { font-size: 1.1rem; }
  .mobile-menu__contact { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .92rem; }
}
/* Aún más bajos: menos aire entre filas */
@media (max-height: 680px) {
  .mobile-menu__list a { padding: .45rem 0; }
  .mobile-menu__name { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .mobile-menu__desc { margin-top: .1rem; }
}
/* Los más bajos (iPhone SE de 4"): sin el eslogan, que ya está en la portada */
@media (max-height: 600px) {
  .mobile-menu__claim { display: none; }
}


/* =========================================================
   SECCIONES Y TRANSICIONES ENTRE ELLAS
   ========================================================= */
.section { position: relative; padding-block: var(--section-y); }
.section > .container { position: relative; z-index: 2; }

.hero,
.section--navy,
.footer { background: var(--navy); color: var(--ivory); }
.quote { background: var(--ink); color: var(--ivory); }

/* Arco: semióvalo del color de la sección anterior colgando sobre el borde
   superior; main.js lo aplana al entrar la sección (sin JS se queda curvo). */
.arch {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: var(--arch-h);
  background: var(--arch);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform-origin: top center;
  pointer-events: none;
  z-index: 3;
}

/* ---------- Dos columnas título / contenido ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem var(--gutter);
  align-items: start;
}
.stage__head .eyebrow { margin-bottom: 1.6rem; }
.stage__head .display { font-size: clamp(2.8rem, 5vw, 5.4rem); }
.stage__head .prose { margin-top: 1.8rem; }

/* =========================================================
   HERO
   ========================================================= */
/* Estructura del hero, de arriba abajo:
   logotipo grande (cabecera) → claim → texto + botones.
   El bloque claim + pie se centra en el espacio que queda bajo el logotipo,
   con el mismo hueco arriba y abajo (--hero-gap). */
.hero {
  --hero-gap: clamp(2.5rem, 7vh, 5rem);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  overflow: hidden;
}
/* Vídeo de fondo teñido de navy: el vídeo va en blanco y negro con poca opacidad sobre el
   navy de la sección, y un degradado lo funde con el azul arriba y abajo */
.hero { isolation: isolate; }
.hero__video { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--navy); }
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: grayscale(1) contrast(1.5) brightness(.85);   /* vídeo muy luminoso: más contraste para que se distingan los nadadores */
  mix-blend-mode: luminosity;
}
.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--navy) 0%, rgba(27, 42, 65, .55) 30%, rgba(27, 42, 65, .45) 60%, var(--navy) 100%),
    rgba(27, 42, 65, .25);
}
/* --brand-space: hueco que ocupa el logotipo a todo el ancho (lo calcula main.js) */
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.2rem, 3vh, 2rem);
  padding-top: calc(var(--brand-space, calc(var(--header-h) + 4rem)) + var(--hero-gap) / 2);
  padding-bottom: var(--hero-gap);
}
/* Eslogan: es el titular (h1) de la portada; tamaño contenido para no recargar */
.hero__title {
  max-width: 22ch;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ivory);
}
.hero__title em { color: var(--silver); }
/* Eslogan a la izquierda y botones a la derecha, alineados con su última línea */
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 3rem;
}
@media (max-width: 960px) {
  .hero__foot { grid-template-columns: 1fr; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
/* Móviles con poca altura (p. ej. iPhone SE): portada más compacta para que los botones se vean sin scroll */
@media (max-width: 960px) and (max-height: 700px) {
  .hero { --hero-gap: 1.4rem; }
  .hero__content { gap: .8rem; }
  .hero__title { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .hero__foot { gap: 1.2rem; }
  .hero__actions { gap: .6rem; }
  .hero__actions .btn { padding-block: .85rem; }
}

/* =========================================================
   QUIÉNES SOMOS
   Lectura ordenada de arriba abajo (también para personas mayores):
   foto panorámica con el titular dentro, dos columnas de texto, cuatro pilares y frase final.
   Letra algo mayor y gris más oscuro que el resto para leer sin esfuerzo.
   ========================================================= */
.about { --about-text: #3E4857; }

/* 1. Foto panorámica con el titular encima */
.about__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 40vw, 620px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  isolation: isolate;
}
.about__hero img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8);
}
/* Degradado oscuro abajo para que el titular se lea bien sobre la foto */
.about__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Velo navy en toda la foto, más denso en el centro (donde va el texto) para que se lea bien */
  background:
    radial-gradient(ellipse 70% 75% at 50% 62%, rgba(15, 18, 22, .55), rgba(15, 18, 22, 0) 75%),
    linear-gradient(180deg, rgba(27, 42, 65, .35) 0%, rgba(15, 18, 22, .75) 100%);
}
.about__heroText { width: 100%; padding: clamp(1.6rem, 4vw, 3.5rem); text-align: center; }
.about__heroText .eyebrow { margin-bottom: 1.2rem; }
.about__heroText .eyebrow,
.about__heroText .display { text-shadow: 0 2px 18px rgba(15, 18, 22, .45); }
.about__heroText .display em { color: #D5D9DE; }   /* plata más clara: contrasta mejor sobre la foto */
.about__heroText .display { max-width: 16ch; margin-inline: auto; font-size: clamp(2.6rem, 5.6vw, 5.6rem); }

/* 2. Qué hacemos / Un servicio a medida */
.about__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
/* Todo centrado (petición del cliente) */
.about__cols { justify-items: center; }
.about__text { max-width: 38rem; text-align: center; }
.about__text p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--about-text);
}
.about__text p + p { margin-top: 1.1rem; }
.about__text strong { color: var(--text); }

/* 3. Los cuatro pilares: fila estática separada por líneas finas */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(4.5rem, 9vw, 8rem);
  border-block: 1px solid var(--hairline);
}
.pillars li { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem); text-align: center; }
.pillars li + li { border-left: 1px solid var(--hairline); }
.pillars__name {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
}

/* 5. Frase final */
.statement {
  max-width: 60rem;
  margin: clamp(5rem, 9vw, 8rem) auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}
.statement__brand {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--text-muted);
}
.statement em { font-weight: 600; }

/* =========================================================
   CLIENTES
   ========================================================= */
.section--navy { overflow: hidden; }
.client-list { border-top: 1px solid var(--hairline-light); }
.client {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .3rem 1rem;
  padding: 1.05rem 0;   /* compactas: las 5 caben en pantalla al pulsar «Clientes» */
  border-bottom: 1px solid var(--hairline-light);
}
.client__num {
  grid-row: span 2;
  padding-top: .5rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--silver);
}
.client__name {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.15;
  transition: transform .7s var(--ease-soft);
}
.client__text { max-width: 40rem; color: var(--text-light-muted); font-size: 1.05rem; line-height: 1.6; }
@media (hover: hover) {
  .client:hover .client__name { transform: translateX(.5rem); }
}

/* =========================================================
   ÁREAS
   Por defecto (móvil, movimiento reducido, sin JS): lista vertical.
   .areas--h (escritorio, lo añade main.js): pista horizontal fija.
   ========================================================= */
/* En vertical la pista no genera caja: introducción, índice y áreas se ordenan en una columna */
.areas__pin {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 7rem);
  padding-inline: var(--gutter);
}
.areas__track { display: contents; }
.areas__intro { order: 0; max-width: 40rem; }
.areas__index { order: 1; }
.area { order: 2; }
.areas__intro .eyebrow { margin-bottom: 1.6rem; }
.areas__hint { display: none; }

.area__media { margin-bottom: 2rem; }
.area__media .frame { aspect-ratio: 16 / 10; }
.area__title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: 600;
  line-height: 1.05;
}
.area__tagline {
  margin-top: .7rem;
  max-width: 34rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  color: var(--text-muted);
}
.area__text {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.area__text strong { color: var(--text); }

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  margin-top: 1.4rem;
}
.services li {
  padding: .7rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 1rem;
  font-weight: 500;
}

.area__goal {
  margin-top: 1.4rem;
  padding: 1.2rem 1.5rem;
  background: var(--ivory);
  border-radius: calc(var(--radius) * .6);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.4;
}
.area__goal span {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sub-services { display: grid; gap: 1.2rem; margin: 1.4rem 0 0; }
.sub-services > div { padding-top: 1.1rem; border-top: 1px solid var(--hairline); }
.sub-services dt { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; }
.sub-services dd { margin: .3rem 0 0; font-size: 1.02rem; color: var(--text-muted); }

/* Índice de áreas */
.areas__index {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.areas__index::-webkit-scrollbar { display: none; }
.areas__index ol { display: flex; gap: 2rem; white-space: nowrap; }
.areas__index a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .8rem 0;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  transition: color .5s var(--ease-soft);
}
.areas__index a:hover,
.areas__index a.is-active { color: var(--text); }
.areas__progress { display: block; height: 1px; background: var(--hairline); }
.areas__progress span {
  display: block;
  height: 100%;
  background: var(--navy);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- Áreas en horizontal (escritorio y móvil) ---------- */
.areas--h { padding-block: 0; overflow: hidden; }
.areas--h .areas__pin {
  display: block;
  position: relative;
  height: 100vh;
  padding: var(--header-h) 0 0;
  overflow: hidden;
}
.areas--h .areas__track {
  display: flex;
  gap: 6vw;
  width: max-content;
  height: calc(100% - 6rem);
  padding: clamp(1.5rem, 4vh, 3rem) 6vw 0 var(--gutter);
  will-change: transform;
}
.areas--h .areas__intro {
  flex: none;
  width: min(40vw, 38rem);
  align-self: center;
}
.areas--h .areas__hint {
  display: inline-flex;
  gap: .6rem;
  margin-top: 2.4rem;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.areas--h .area {
  flex: none;
  width: min(78vw, 76rem);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.areas--h .area__media { height: 100%; max-height: 72vh; margin: 0; }
.areas--h .area__media .frame { height: 100%; aspect-ratio: auto; }
.areas--h .area__body { align-self: center; }
.areas--h .area__title { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
.areas--h .areas__index {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.6rem;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Móvil: cada área ocupa una pantalla (foto arriba, texto debajo, todo centrado)
   y la pista se desliza igual que en el ordenador. Para que quepa en una pantalla,
   los servicios van en una línea corrida y se omiten los párrafos largos. */
/* Pantallas de ordenador bajas (portátiles de 768 px o menos de alto): Áreas más compactas
   para que Consultoría y Golf, las de más texto, quepan enteras */
@media (min-width: 961px) and (max-height: 860px) {
  .areas--h .area__title { font-size: clamp(2rem, 3vw, 2.8rem); }
  .areas--h .area__text { margin-top: .6rem; line-height: 1.55; }
  .areas--h .services { margin-top: .9rem; }
  .areas--h .services li { padding: .4rem 0; }
  .areas--h .area__goal { margin-top: .9rem; padding: .8rem 1.2rem; }
  .areas--h .sub-services { gap: .6rem; margin-top: .9rem; }
  .areas--h .sub-services > div { padding-top: .6rem; }
  .areas--h .sub-services dd { line-height: 1.5; }
}
@media (min-width: 961px) and (max-height: 740px) {
  .areas--h .area__text, .areas--h .services li, .areas--h .sub-services dd { font-size: .95rem; }
  .areas--h .area__goal { font-size: 1rem; }
}
@media (max-width: 960px) {
  .areas--h .areas__pin { height: 100vh; height: 100svh; }
  .areas--h .areas__track {
    gap: calc(var(--gutter) * 2);
    height: calc(100% - 3.4rem);
    padding: .8rem var(--gutter) 0;
  }
  .areas--h .areas__intro { width: calc(100vw - var(--gutter) * 2); }
  .areas--h .areas__intro .display { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .areas--h .areas__hint { justify-content: center; }
  .areas--h .area {
    width: calc(100vw - var(--gutter) * 2);
    display: flex;
    flex-direction: column;
    /* arriba y no centrado: así la foto queda a la misma altura en todas las áreas
       aunque cada una tenga más o menos texto */
    justify-content: flex-start;
    padding-top: clamp(.5rem, 7svh, 4rem);
    align-items: stretch;
    gap: 1.1rem;
  }
  .areas--h .area__media { flex: none; height: 26vh; height: 26svh; max-height: none; }
  .areas--h .frame--pan img { height: 100%; margin-top: 0; }
  .areas--h .area__body { align-self: auto; text-align: center; }
  .areas--h .area__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .areas--h .area__tagline { margin-top: .4rem; font-size: 1.08rem; }
  .areas--h .area__text,
  .areas--h .sub-services dd { display: none; }
  .areas--h .services { display: block; margin-top: .9rem; font-size: .98rem; line-height: 1.65; color: var(--text); }
  .areas--h .services li { display: inline; padding: 0; border: 0; font-size: inherit; }
  .areas--h .services li:not(:last-child)::after { content: " · "; color: var(--silver); }
  /* el recuadro de objetivo no cabe en una pantalla de móvil junto a la lista de servicios */
  .areas--h .area__goal { display: none; }
  .areas--h .sub-services { gap: .2rem; margin-top: .8rem; }
  .areas--h .sub-services > div { padding-top: 0; border: 0; }
  .areas--h .sub-services dt { font-size: 1.05rem; }
  /* índice en una sola línea, sin números */
  .areas--h .areas__index { bottom: .6rem; }
  .areas--h .areas__index ol { flex-wrap: nowrap; justify-content: center; gap: 0 .9rem; }
  .areas--h .areas__index a { padding: .5rem 0; font-size: .8rem; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .areas--h .area { padding-top: clamp(.5rem, 3svh, 1.5rem); }
  .areas--h .area__media { height: 20vh; height: 20svh; }
  .areas--h .services { font-size: .94rem; }
}
/* Móviles muy bajos (p. ej. iPhone SE): Consultoría tiene muchos servicios y no cabría */
@media (max-width: 960px) and (max-height: 600px) {
  .areas--h .area { padding-top: 0; gap: .8rem; }
  .areas--h .area__media { height: 18vh; height: 18svh; }
  .areas--h .area__title { font-size: clamp(1.6rem, 7vw, 2rem); }
  .areas--h .area__tagline { font-size: 1rem; }
  .areas--h .services { margin-top: .6rem; font-size: .88rem; line-height: 1.5; }
}

/* =========================================================
   FRASE DE MARCA
   ========================================================= */
.quote {
  position: relative;
  padding-block: clamp(8rem, 16vw, 13rem);
  overflow: hidden;
  text-align: center;
}
/* padding-left compensa el espacio que deja el letter-spacing tras la última letra: centrado exacto */
.quote__eyebrow { position: relative; z-index: 2; margin-bottom: 2.4rem; padding-left: .42em; }
.quote__line {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 1.02;
  will-change: transform;
}
.quote__line--c { margin-top: .2em; }
.quote__line--c em { color: var(--silver); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact__info { display: grid; gap: 1.4rem; margin: 2.4rem 0 0; }
.contact__info dt {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact__info dd {
  margin: .3rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.4;
}
/* Bodoni a tamaño de texto: algo más de peso y trazo para que los perfiles finos no desaparezcan */
.contact__info dd,
.area__tagline,
.area__goal,
.client__num,
.mobile-menu__claim { font-weight: 500; -webkit-text-stroke: .012em currentColor; }
.contact__info a { text-decoration: none; }
.contact__info a:hover { text-decoration: underline; text-underline-offset: 4px; }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  transition: border-color .5s var(--ease-soft);
}
.field select {
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%235B6575' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right center no-repeat;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--navy); }

.check {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--text-muted);
}
.check input { margin-top: .3rem; accent-color: var(--navy); }

/* Errores por campo: línea inferior y mensaje en rojo apagado, bajo cada campo */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: #9A3B32; border-bottom-width: 2px; }
.check.is-invalid input { outline: 2px solid #9A3B32; outline-offset: 2px; }
.field__error { font-size: .88rem; font-weight: 500; line-height: 1.45; color: #9A3B32; }
.check + .field__error { margin-top: -1rem; }   /* compensa el hueco de la rejilla del formulario */

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.form__status { font-size: .95rem; color: var(--text-muted); }
.form__status[data-state="ok"] { color: #2F6B4F; font-weight: 500; }      /* verde sobrio: enviado */
.form__status[data-state="error"] { color: #9A3B32; font-weight: 500; }   /* rojo apagado: error */
.form .btn:disabled { opacity: .6; cursor: wait; }
/* Trampa antispam: fuera de la vista y del teclado */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =========================================================
   PIE
   ========================================================= */
.footer {
  position: relative;
  padding: clamp(7rem, 12vw, 10rem) 0 2rem;
}
.footer > .container { position: relative; z-index: 2; }
.footer__brand { display: grid; justify-items: center; gap: 1.2rem; text-align: center; }
.footer__logo { width: min(86vw, 64rem); }
.footer__logo .logo { width: 100%; height: auto; overflow: hidden; }   /* las letras suben desde abajo (main.js) */
.footer__rule { display: block; width: clamp(6rem, 18vw, 14rem); height: 1px; margin-top: .6rem; background: rgba(246, 244, 239, .3); }
.footer__cols {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: 2rem 3rem;
  margin-top: clamp(4rem, 7vw, 5.5rem);
  padding-top: 2.6rem;
  border-top: 1px solid var(--hairline-light);
}
.footer__label {
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--silver);
}
.footer__cols li { padding: .25rem 0; font-size: 1.02rem; color: var(--text-light-muted); }
.footer__cols a { text-decoration: none; transition: color .4s var(--ease-soft); }
.footer__cols a:hover { color: var(--ivory); }
/* Monograma OS a la izquierda de las columnas */
.footer__mark { width: auto; height: 5.5rem; align-self: center; }
.footer__partner { display: inline-block; opacity: .85; transition: opacity .4s var(--ease-soft); }
.footer__partner:hover { opacity: 1; }
.footer__partner img { width: auto; height: 4.6rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline-light);
  font-size: .85rem;
  color: var(--text-light-muted);
}
.footer__legal { display: flex; gap: 1.6rem; }
.footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; }
/* Crédito «Desarrollado por WofferLab»: logo en blanco para que se vea sobre el navy */
.credit {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-light-muted);
  text-decoration: none;
  opacity: .8;
  transition: opacity .3s var(--ease-soft);
}
.credit img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.credit:hover,
.credit:focus-visible { opacity: 1; color: var(--ivory); }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--ivory); }

/* =========================================================
   PÁGINAS LEGALES (aviso-legal.html, privacidad.html, cookies.html)
   Sobrias y pensadas para leer: columna estrecha, letra grande y buen contraste.
   ========================================================= */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--hairline);
  color: var(--navy);
}
.legal-header__back {
  font-size: .95rem;
  font-weight: 500;
  text-underline-offset: 4px;
}
.legal {
  max-width: calc(46rem + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
.legal .display { margin-top: 1.2rem; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.legal__updated { margin-top: 1rem; font-size: .9rem; color: var(--text-muted); }
.legal__lead { margin-top: 2.4rem; font-size: 1.2rem; line-height: 1.6; color: var(--text); }
.legal h2 {
  margin-top: 2.8rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
}
.legal p,
.legal li { font-size: 1.08rem; line-height: 1.75; color: #3E4857; }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.3rem; list-style: disc; }
.legal li + li { margin-top: .4rem; }
.legal strong { color: var(--text); }
.legal a { color: var(--navy); text-underline-offset: 3px; }
/* Página 404 */
.notfound { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.notfound .display em { font-weight: 600; color: var(--text-muted); }
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 2.4rem; }
.notfound__link { font-weight: 600; color: var(--navy); text-underline-offset: 4px; }
.legal .btn--dark { color: var(--ivory); text-decoration: none; }   /* los enlaces de .legal son navy: el botón mantiene su texto claro */
@media (max-width: 960px) {
  .notfound { text-align: center; align-items: center; }
  .notfound__actions { justify-content: center; }
}
/* Datos pendientes de completar: resaltados para encontrarlos fácilmente */
.todo { padding: 0 .25em; border-radius: 3px; background: #FFF1B8; color: var(--ink); }
.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem var(--gutter);
  background: var(--navy);
  color: var(--text-light-muted);
  font-size: .8rem;
}
.legal-footer [aria-current="page"] { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   BLOG (/blog/ y cada artículo) + bloque de la portada
   Mismo diseño que la portada: cabecera fija, secciones navy / marfil con arcos y titulares animados.
   El texto de los artículos no se anima: columna estrecha y letra grande, pensada para leer.
   ========================================================= */
/* Cabecera de página (listado y artículo): sección navy bajo la cabecera fija */
.page-hero { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); padding-bottom: clamp(5rem, 9vw, 8rem); }
.page-hero .eyebrow { margin-bottom: 1.6rem; }
.page-hero .display { max-width: 18ch; font-size: clamp(2.8rem, 6vw, 5.8rem); }
.page-hero .prose { max-width: 40rem; font-size: 1.1rem; }

/* Listado: «Blog» como etiqueta de sección (algo mayor que las demás) y la frase como titular */
.blog-hero__label { font-size: clamp(.95rem, 1.3vw, 1.15rem); }
.page-hero .blog-hero__title { font-size: clamp(2.6rem, 5.2vw, 5rem); }

.blog-list__empty { font-size: 1.1rem; color: var(--text-muted); }
/* Paginación del listado (más de 8 artículos) */
/* Filtro del blog por Área, encima de los artículos: cada opción en su recuadro;
   la elegida, en azul marino. Cada opción es una página propia. */
.blog-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.blog-filter {
  display: inline-flex; align-items: center;
  padding: .85rem 1.3rem;
  border: 1px solid rgba(27, 42, 65, .22);
  border-radius: 10px;
  background: #fff;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(27, 42, 65, .06);
  transition: border-color .3s var(--ease-soft), background-color .3s var(--ease-soft), color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.blog-filter:hover { border-color: var(--navy); box-shadow: 0 8px 20px -14px rgba(27, 42, 65, .5); }
.blog-filter[aria-current="page"] { border-color: var(--navy); background: var(--navy); color: var(--ivory); }
@media (max-width: 640px) {
  .blog-filters { gap: .5rem; }
  .blog-filter { padding: .7rem 1rem; font-size: .74rem; letter-spacing: .06em; }
}
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--hairline); }
.pagination__pages { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pagination__page { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem; border: 1px solid var(--hairline); border-radius: 999px; font-weight: 600; text-decoration: none; transition: border-color .3s, background-color .3s, color .3s; }
a.pagination__page:hover { border-color: var(--navy); }
.pagination__page.is-current { border-color: var(--navy); background: var(--navy); color: var(--ivory); }
.pagination__step { font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
a.pagination__step:hover { text-decoration: underline; text-underline-offset: 6px; }
.pagination__step.is-disabled { opacity: .3; }
@media (max-width: 640px) {
  .pagination__pages { order: -1; width: 100%; justify-content: center; }
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) var(--gutter);
}

/* ---------- Tarjeta ---------- */
.post-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78);
  transition: transform 1.2s var(--ease-soft);
}
.post-card__link:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding-top: 1.4rem; }
.post-card__cat { font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); }
.post-card__title {
  margin-top: .7rem;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.post-card__link:hover .post-card__title { text-decoration: underline; }
.post-card__excerpt { margin-top: .8rem; font-size: 1rem; line-height: 1.65; color: var(--text-muted); }
.post-card__meta { margin-top: 1rem; font-size: .88rem; color: var(--text-muted); }
.post-card--light .post-card__cat,
.post-card--light .post-card__excerpt,
.post-card--light .post-card__meta { color: var(--text-light-muted); }
.post-card--light .post-card__title { color: var(--ivory); }

/* ---------- Artículo: cabecera navy ---------- */
.breadcrumb { margin-bottom: clamp(2rem, 4vw, 3rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .9rem; color: var(--text-light-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: .6rem; }
.breadcrumb a { text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ivory); }
.page-hero .post-hero__title { max-width: 22ch; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.08; }
.post-hero__lead { max-width: 44rem; margin-top: 2rem; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.6; color: var(--ivory); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: 1.8rem; font-size: .92rem; color: var(--text-light-muted); }

/* ---------- Artículo: texto ---------- */
.post-section { padding-top: clamp(4rem, 8vw, 6.5rem); }
/* Foto principal como fondo de la cabecera: blanco y negro teñido de navy, igual que el vídeo de la portada */
.post-hero { position: relative; isolation: isolate; overflow: hidden; }
.post-hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--navy); }
.post-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: grayscale(1) contrast(1.3) brightness(.9);
  mix-blend-mode: luminosity;
}
.post-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--navy) 0%, rgba(27, 42, 65, .55) 30%, rgba(27, 42, 65, .45) 60%, var(--navy) 100%),
    rgba(27, 42, 65, .25);
}

.post { max-width: 46rem; margin: 0 auto; }
.post__body { margin-top: 0; }
.post__body > :first-child { margin-top: 0; }
.post__body h2 {
  margin-top: 3rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
}
.post__body h3 { margin-top: 2.2rem; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.post__body p,
.post__body li { font-size: 1.12rem; line-height: 1.8; color: #3E4857; }
.post__body p { margin-top: 1.1rem; }
.post__body ul,
.post__body ol { margin-top: 1.1rem; padding-left: 1.4rem; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { padding-left: .3rem; }
.post__body li + li { margin-top: .6rem; }
.post__body li::marker { color: var(--text-muted); }
.post__body strong { color: var(--text); }
.post__body a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.post__body blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--navy);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
}

/* Preguntas frecuentes: desplegables accesibles con teclado */
.post__faq { margin-top: 4rem; border-top: 1px solid var(--hairline); }
.post__faq h2 { margin-top: 2.6rem; margin-bottom: 1.2rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1.2; }
.post__faq details { border-bottom: 1px solid var(--hairline); }
.post__faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.post__faq summary::-webkit-details-marker { display: none; }
.post__faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .4s var(--ease-soft); }
.post__faq details[open] summary::after { transform: rotate(45deg); }
.post__faq details p { padding-bottom: 1.4rem; font-size: 1.08rem; line-height: 1.75; color: #3E4857; }

/* Llamada a la acción al final */
.post__cta {
  margin-top: 4rem;
  padding: clamp(2rem, 5vw, 3.2rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--text-light-muted);
}
.post__cta-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.15; color: var(--ivory); }
.post__cta p:not(.post__cta-title) { margin-top: .9rem; font-size: 1.05rem; line-height: 1.65; }
.post__cta .btn { margin-top: 1.8rem; }

/* ---------- Otros artículos: tarjetas pequeñas bajo las preguntas frecuentes ---------- */
.post-more { margin-top: 3rem; }
.post-more h2 { margin-top: 0; margin-bottom: 1.4rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1.2; }
.post-more__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem 1.6rem; }
.mini-post { display: flex; align-items: center; gap: 1rem; padding: .6rem; margin: -.6rem; border-radius: 14px; text-decoration: none; color: inherit; transition: background-color .4s var(--ease-soft); }
.mini-post:hover { background: rgba(27, 42, 65, .05); }
.mini-post__img { flex: none; width: 96px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--navy); filter: saturate(.78); }
.mini-post__text { display: grid; gap: .2rem; min-width: 0; }
.mini-post__cat { font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted); }
.mini-post__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.mini-post:hover .mini-post__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mini-post__date { font-size: .8rem; color: var(--text-muted); }

/* ---------- Bloque de la portada ---------- */
.blog-teaser__head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
/* Portada: los 4 últimos artículos en una fila (2 en tableta, 1 en móvil) */
.blog-teaser .post-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .blog-teaser .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .blog-teaser .post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blog-teaser .post-card__title { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
/* Tarjetas enmarcadas y todas de la misma altura (la fecha queda alineada abajo), en la portada y en el blog */
.post-grid { grid-auto-rows: 1fr; }
.post-grid > div { display: flex; }
.post-grid .post-card {
  flex: 1;
  padding: .75rem .75rem 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.post-grid .post-card:hover { border-color: rgba(27, 42, 65, .3); box-shadow: 0 18px 40px -28px rgba(27, 42, 65, .45); }
.post-grid .post-card__media { border-radius: calc(var(--radius) - .75rem); }
.post-grid .post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem .75rem 0; }
.post-grid .post-card__meta { margin-top: auto; padding-top: 1.2rem; }
/* Sobre fondo azul marino (portada) */
.post-grid .post-card--light { border-color: var(--hairline-light); background: rgba(246, 244, 239, .035); }
.post-grid .post-card--light:hover { border-color: rgba(246, 244, 239, .34); background: rgba(246, 244, 239, .06); box-shadow: none; }
/* «Ver todos los artículos» abajo a la derecha, tras las tarjetas */
.blog-teaser__foot { display: flex; justify-content: flex-end; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 700px) { .blog-teaser__foot { justify-content: center; } }   /* en móvil, centrado */
.blog-teaser__head .eyebrow { margin-bottom: 1.6rem; }
.blog-teaser__head .display { font-size: clamp(2.8rem, 5vw, 5.4rem); }

/* =========================================================
   ESTADOS INICIALES DE ANIMACIÓN
   Solo si hay JS y el usuario no pide movimiento reducido.
   main.js retira la clase .js si GSAP no carga.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero],
  .js [data-reveal],
  .js [data-split],
  .js [data-letters] { opacity: 0; }   /* main.js los muestra al animarlos */
}
/* Llegada con ancla (/#contacto desde el blog): la portada no se ve hasta estar ya en la sección */
.is-jumping #smooth-content { visibility: hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  :root { --header-h: 68px; }

  .nav { display: none; }
  .menu-toggle { display: block; }

  .stage { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Quiénes somos: columnas de texto apiladas, foto más alta y pilares de dos en dos */
  .about__cols { grid-template-columns: 1fr; }
  .about__hero { min-height: clamp(420px, 110vw, 560px); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars li:nth-child(3) { border-left: 0; }
  .pillars li:nth-child(n+3) { border-top: 1px solid var(--hairline); }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__mark { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 640px) {
  .client { grid-template-columns: 2.2rem minmax(0, 1fr); }
  /* Pie compacto en móvil: menos aire, logo más pequeño, Secciones y Áreas en dos
     columnas y Contacto y Colaboradores debajo a todo el ancho */
  .footer { padding-top: 4.5rem; }
  .footer__brand { gap: .8rem; }
  .footer__logo { width: min(68vw, 22rem); }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; margin-top: 2.6rem; padding-top: 1.8rem; }
  .footer__mark { justify-self: center; height: 4.2rem; }
  .footer__cols > :nth-child(n+4) { grid-column: 1 / -1; }
  .footer__cols > :nth-child(4) ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.2rem; }
  .footer__label { margin-bottom: .6rem; }
  .footer__cols li { padding: .15rem 0; font-size: .98rem; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; margin-top: 2.4rem; padding-top: 1.2rem; gap: .8rem; }
  .footer__end { flex-direction: column; gap: .8rem; }
  .footer__legal { flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; white-space: nowrap; }
  .credit img { height: 24px; }
  .hero__actions .btn { width: 100%; }
  .services { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; }
  .footer__end { justify-content: center; }
  .quote__line { white-space: normal; }
}

/* =========================================================
   MÓVIL Y TABLETA: TODO CENTRADO
   Cabecera con el logo en el centro y el botón de menú a la derecha;
   textos, listas, formularios y pie alineados al centro.
   ========================================================= */
@media (max-width: 960px) {
  /* Cabecera: logo centrado (crece y encoge desde su centro) */
  .site-header__inner { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0; }
  .site-header__inner .brand { grid-column: 2; justify-self: center; transform-origin: center center; }
  .site-header__inner .menu-toggle { grid-column: 3; justify-self: end; }

  /* Menú móvil */
  .mobile-menu { text-align: center; }
  .mobile-menu__logo { justify-content: center; }
  /* nombre y descripción debajo: todo centrado y compacto */
  .mobile-menu__list a { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .55rem; }
  .mobile-menu__desc { flex-basis: 100%; }
  .mobile-menu__list a::after { display: none; }
  .mobile-menu__contact { justify-content: center; justify-items: center; }
  .mobile-menu__mark { right: 50%; transform: translateX(50%); }

  /* Portada */
  .hero__content { text-align: center; align-items: center; }
  .hero__title { margin-inline: auto; }
  .hero__foot { justify-items: center; }
  .hero__actions { justify-content: center; }

  /* Secciones de dos columnas (Clientes, Contacto) */
  .stage__head { text-align: center; }
  .stage__head .prose { margin-inline: auto; }

  /* Clientes: número encima del nombre */
  .client { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .client__num { grid-row: auto; padding-top: 0; }
  .client__text { margin-inline: auto; }
  .client:hover .client__name { transform: none; }

  /* Áreas (lista vertical) */
  .areas__intro { margin-inline: auto; text-align: center; }
  .areas__intro .prose { margin-inline: auto; }
  /* índice de áreas en varias líneas centradas (sin desplazamiento lateral) */
  .areas__index { overflow: visible; }
  .areas__index ol { flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; }
  .area__body { text-align: center; }
  .area__tagline, .area__text { margin-inline: auto; }
  .services { grid-template-columns: 1fr; text-align: center; }
  .area__goal { text-align: center; }

  /* Contacto */
  .contact__info { justify-items: center; }
  .form { text-align: center; }
  .field input, .field select, .field textarea { text-align: center; text-align-last: center; }
  .field select { background-position: right center; }
  .check { justify-content: center; text-align: left; }
  .form__foot { justify-content: center; }

  /* Pie */
  .footer__cols { text-align: center; }
  .footer__end { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .arch { display: none; }
}

/* =========================================================
   PÁGINAS DE LAS ÁREAS (/areas/ y /areas/<área>/)
   ========================================================= */
/* Portada: cada tarjeta de Área es un enlace (el del título se extiende a toda la tarjeta) */
.area--link { position: relative; }
.area__link { color: inherit; text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.area__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.area__link:focus-visible { outline: none; }
.area__link:focus-visible::after { outline: 2px solid var(--navy); outline-offset: 6px; border-radius: var(--radius); }
.area__arrow { display: inline-block; font-family: var(--font-sans); font-size: .55em; font-weight: 400; vertical-align: middle; opacity: .45; transition: transform .5s var(--ease-soft), opacity .5s var(--ease-soft); }
.area--link .frame img { transition: transform 1.2s var(--ease-soft); }
@media (hover: hover) {
  .area--link:hover .area__link { text-decoration: underline; }
  .area--link:hover .area__arrow { opacity: 1; transform: translateX(.35em); }
  .area--link:hover .frame img { transform: scale(1.03); }
}

/* Artículo y blog por Área: enlace a la página del Área */
.eyebrow__link { color: inherit; text-decoration: none; padding-bottom: .2em; border-bottom: 1px solid rgba(246, 244, 239, .35); transition: border-color .3s; }
.eyebrow__link:hover { border-color: var(--ivory); }
.blog-hero__area { margin-top: 1.8rem; }
.blog-hero__area a { font-weight: 600; color: var(--ivory); text-underline-offset: 5px; }
.blog-hero__area a:hover { text-decoration-thickness: 2px; }

/* ---------- Página de un Área: cabecera con su foto ---------- */
.area-hero { padding-bottom: clamp(6rem, 11vw, 10rem); }
.page-hero .area-hero__title { max-width: none; font-size: clamp(3.2rem, 8vw, 7rem); line-height: 1; }
.area-hero__lead {
  max-width: 38rem;
  margin-top: 1.8rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.35;
  color: var(--ivory);
}

/* Texto del documento y servicios */
.area-page__intro { max-width: 46rem; margin: 0 auto clamp(4rem, 8vw, 6rem); text-align: center; }
.area-page__intro p { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.65; }
.area-page__title {
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
}
/* 3 o 4 columnas según el número de servicios, para que no quede una fila con uno suelto */
.service-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * .7);
  background: #fff;
}
.service-card__name { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.service-card__text { margin-top: .7rem; font-size: 1rem; line-height: 1.65; color: var(--text-muted); }
.area-page__goal { max-width: 46rem; margin: clamp(3rem, 6vw, 4rem) auto 0; text-align: center; }
.area-page__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(3rem, 6vw, 4rem); }
.area-extra { padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: calc(var(--radius) * .7); background: var(--navy); color: var(--ivory); }
.area-extra__name { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.15; }
.area-extra__text { margin-top: .9rem; font-size: 1.05rem; line-height: 1.65; color: var(--text-light-muted); }
@media (max-width: 760px) { .area-page__extras { grid-template-columns: 1fr; } }

/* Contacto y otras Áreas (al final; navy, o marfil si el Área no tiene artículos) */
.area-next .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem var(--gutter); align-items: end; }
.area-next__cta .eyebrow { margin-bottom: 1.6rem; }
.area-next__cta .display { font-size: clamp(2.8rem, 5vw, 5.4rem); }
.area-next__cta .btn { margin-top: 2.2rem; }
.area-next__label { margin-bottom: 1rem; font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); }
.area-next__others a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-serif); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 600;
  color: inherit; text-decoration: none;
}
.area-next__others li:last-child a { border-bottom: 1px solid var(--hairline); }
.area-next__others a span:last-child { font-family: var(--font-sans); font-size: 1rem; transition: transform .5s var(--ease-soft); }
.area-next__others a:hover span:last-child { transform: translateX(.4rem); }
.area-next--dark .area-next__label { color: var(--text-light-muted); }
.area-next--dark .area-next__others a,
.area-next--dark .area-next__others li:last-child a { border-color: var(--hairline-light); }
@media (max-width: 960px) { .area-next .container { grid-template-columns: 1fr; } }

/* ---------- /areas/: una fila por Área (foto y texto, alternando lados) ---------- */
.area-rows { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.area-row__link { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; color: inherit; text-decoration: none; }
.area-row:nth-child(even) .area-row__media { order: 2; }
.area-row__media .frame { aspect-ratio: 4 / 3; }
.area-row__media img { transition: transform 1.2s var(--ease-soft); }
.area-row__name { font-family: var(--font-serif); font-size: clamp(2.3rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.05; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.area-row__tagline { margin-top: .9rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; color: var(--text-muted); }
.area-row__services { margin-top: 1.3rem; font-size: .98rem; line-height: 1.7; color: var(--text-muted); }
.area-row__more { display: inline-block; margin-top: 1.8rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.area-row__more span { display: inline-block; transition: transform .5s var(--ease-soft); }
@media (hover: hover) {
  .area-row__link:hover .area-row__name { text-decoration: underline; }
  .area-row__link:hover .area-row__media img { transform: scale(1.03); }
  .area-row__link:hover .area-row__more span { transform: translateX(.4rem); }
}
@media (max-width: 760px) {
  .area-row__link { grid-template-columns: 1fr; }
  .area-row:nth-child(even) .area-row__media { order: 0; }
}
.area-method .btn { margin-top: 1rem; }