/* =============================================================
   Estudio Jurídico BML — styles.css
   Implementación del design handoff (alta fidelidad).

   1. Tokens
   2. Reset & base
   3. Layout
   4. Header / nav
   5. Botones
   6. WhatsApp flotante
   7. Heroes
   8. Inicio
   9. Equipo
   10. Áreas de práctica
   11. Patrocinios
   12. Contacto
   13. Footer
   14. Scroll reveal
   15. Responsive (1100px)
   16. Reduced motion / print
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --navy:            #0C2443;
  --navy-90:         #132C4E;
  --navy-70:         #3D5170;
  --navy-40:         #8792A2;
  --red:             #E13526;
  --red-80:          #C22C1F;
  --cream:           #FFF7E6;
  --cream-80:        #F2E8D2;
  --border-on-cream: rgba(12, 36, 67, .18);
  --border-on-navy:  rgba(255, 247, 230, .25);

  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Helvetica World', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1360px;
  --header-h: 84px;

  /* Botones flotantes del rincón inferior derecho. Viven acá para que el de
     WhatsApp y el del asistente compartan una sola fuente de verdad: si cada
     uno lleva su propia medida, terminan desalineados sin que nada avise. */
  --float-size: 60px;
  --float-right: 26px;
  --float-bottom: 26px;
  --float-gap: 12px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--red-80); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--cream); }

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

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 500;
  background: var(--navy); color: var(--cream);
  padding: 14px 20px; font-size: 14px; font-weight: 600;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 16px; }

.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;
}

/* =============================================================
   3. Layout
   ============================================================= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.section { padding: 110px 0; position: relative; }
/* La primera sección después del hero arranca más cerca de la ola */
.hero + .section { padding-top: 44px; }
.section--cream { background: var(--cream); }
.section--navy  { background: var(--navy); color: var(--cream); }
.section--navy-90 { background: var(--navy-90); color: var(--cream); }
.section--red   { background: var(--red); color: var(--cream); }

.section-title {
  font-size: 38px;
  line-height: 1.15;
  color: var(--navy);
}
.section--navy .section-title,
.section--navy-90 .section-title,
.section--red .section-title,
.stats .section-title,
.testimonials .section-title,
.quick-contact .section-title,
.historia .section-title { color: var(--cream); }

.section-lede {
  font-size: 17px;
  line-height: 1.2;
  color: var(--navy-70);
}
.section--navy .section-lede { color: var(--cream-80); }

/* =============================================================
   4. Header / nav
   ============================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(12, 36, 67, 0);
  transition: background .4s ease, box-shadow .4s ease;
}
.header.is-scrolled {
  background: var(--navy);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 68px; width: 68px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: .03em; color: var(--cream); line-height: 1.2;
}
.brand-sub {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .02em;
  color: var(--cream-80); line-height: 1.3; white-space: nowrap;
}

.nav {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream);
  border-radius: 999px;
  padding: 10px 12px 10px 24px;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 15px; letter-spacing: .02em; font-weight: 600;
  color: var(--navy); opacity: .65;
  transition: opacity .25s ease;
}
.nav-link:hover, .nav-link.is-active { opacity: 1; }

.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  /* El área sensible llega a 44x44 aunque el dibujo mida 24x16 */
  min-width: 44px; min-height: 44px; padding: 10px;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--cream); display: block;
  transition: transform .3s var(--ease), opacity .25s ease, width .3s var(--ease);
}
.nav-toggle span:nth-child(3) { width: 16px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { width: 24px; transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
body.menu-open .nav-mobile { opacity: 1; visibility: visible; }
.nav-mobile a {
  color: var(--cream); font-family: var(--font-display); font-size: 26px;
  /* Zona de toque de 44 sin cambiar el tamaño de la tipografía */
  display: flex; align-items: center; min-height: 44px;
}
.nav-mobile .btn { margin-top: 12px; }
.nav-mobile-close {
  position: absolute; top: 22px; right: 22px;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  color: var(--cream); font-size: 32px; line-height: 1;
}

/* =============================================================
   5. Botones
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 34px;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .3s ease, transform .3s var(--ease), color .3s ease;
}
.btn svg { flex-shrink: 0; }
.btn--red { background: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--red-80); transform: translateY(-2px); }
.btn--cream {
  background: var(--cream); border: 1.5px solid var(--cream); color: var(--navy);
  /* Sobre crema la burbuja de WhatsApp tiene que invertirse: si no, queda
     crema sobre crema y solo se ve el hueco rojo suelto. */
  --wabtn-bubble: var(--navy);
  --wabtn-hole: var(--cream);
}
.btn--cream:hover { background: var(--cream-80); transform: translateY(-2px); }
/* Secundario sobre foto: contorno en vez de bloque macizo, para que el
   botón rojo mande solo y el hero no quede pesado. */
.btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 247, 230, .45);
  color: var(--cream);
  transition: background .35s ease, border-color .35s ease, color .35s ease,
              transform .35s var(--ease);
}
.btn--outline:hover {
  background: var(--cream); border-color: var(--cream); color: var(--navy);
  transform: translateY(-2px);
}
.btn--sm { padding: 12px 24px; font-size: 14px; min-height: 44px; }
.btn--nav { background: var(--red); color: var(--cream); }
.btn--nav:hover { background: var(--red-80); }
.btn--equal { width: 272px; }
.btn--wide { min-width: 260px; }

/* Circular carousel arrows */
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.carousel-btn:hover { opacity: .85; }
.carousel-nav { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }

/* =============================================================
   6. WhatsApp flotante
   ============================================================= */
.wa-float {
  position: fixed; z-index: 150;
  bottom: var(--float-bottom); right: var(--float-right);
  width: var(--float-size); height: var(--float-size); border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(12, 36, 67, .35);
  transition: transform .3s var(--ease);
  --pulse-play: paused;
}
.wa-float:hover { transform: scale(1.08); --pulse-play: running; }
.wa-float::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--red);
  animation: whatsappPulse 1.6s ease-out infinite;
  animation-play-state: var(--pulse-play);
  pointer-events: none;
}
@keyframes whatsappPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* =============================================================
   7. Heroes
   ============================================================= */
.hero {
  position: relative;
  background: var(--navy);
  /* El padding inferior deja libre la altura de la ola (100px) */
  padding: 180px 0 128px;
  overflow: hidden;
  color: var(--cream);
}
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 100px; display: block;
  /* Por encima del velo del hero de Inicio, si no lo pinta encima */
  z-index: 3;
}
.hero-wave path { fill: var(--cream); }

.hero-badge {
  display: inline-block;
  background: var(--red); color: var(--cream);
  font-size: 14px; letter-spacing: .2em; font-weight: 600;
  padding: 8px 18px; border-radius: 999px;
  margin-bottom: 18px;
}
.hero-title {
  font-size: 44px; line-height: 1.15; color: var(--cream);
  max-width: 820px;
  /* Si el título tiene que partirse igual, que elija un corte parejo */
  text-wrap: balance;
}
/* Títulos largos que llevan su propio corte de línea con <br>: sin el ancho
   extra, la primera línea se partía sola en pantallas intermedias y quedaba
   "Estudio Jurídico" separado de "BML en San Antonio Oeste". */
.hero-title--wide {
  max-width: 1100px;
  font-size: clamp(30px, 3.4vw, 44px);
}

/* Hero de Inicio — fondo fotográfico en crossfade */
/* La ola del Inicio cruza por el centro del botón flotante de WhatsApp, que
   está fijo a 26px del borde inferior y mide 60px: su centro queda a 56px del
   fondo de la ventana. La ola mide 100px y se apoya en el pie del hero, así
   que el hero tiene que llegar hasta 6px del fondo. dvh sigue a la barra del
   navegador en mobile, que es donde también vive el botón. */
.hero--home {
  padding: 190px 0 134px;
  isolation: isolate;
  min-height: calc(100vh - 6px);
  min-height: calc(100dvh - 6px);
  display: flex; align-items: center;
}
/* Velo sobre la foto: apaga el centro para que el texto respire y oscurece
   los bordes, así el hero cierra contra la ola sin cortes duros. */
.hero--home::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  /* El navy entra multiplicado y en degradado, no como un bloque plano:
     el centro queda mas limpio para el texto y el color se cierra hacia los
     bordes, enganchando con el header arriba y con la ola abajo. */
  background:
    radial-gradient(125% 95% at 50% 44%,
      rgba(12, 36, 67, .46) 0%, rgba(12, 36, 67, .68) 52%, rgba(12, 36, 67, .90) 100%),
    linear-gradient(180deg,
      rgba(12, 36, 67, .82) 0%, rgba(12, 36, 67, .10) 24%,
      rgba(12, 36, 67, .22) 70%, rgba(12, 36, 67, .92) 100%);
  mix-blend-mode: multiply;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
  opacity: 0;
  animation: heroBgZoom 12s ease-in-out infinite alternate;
  box-shadow: inset 0 0 160px 40px var(--navy);
  filter: grayscale(1) contrast(1.08) brightness(.66);
  transition: opacity 1.6s ease;
}
.hero-bg.is-active { opacity: 1; }
@keyframes heroBgZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.hero--home .container { position: relative; z-index: 2; }
.hero-grid { display: flex; justify-content: center; }
.hero-copy {
  width: 100%; max-width: 900px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Firma del estudio: una sola voz tipográfica (la display) para el nombre,
   y la sans reservada para los datos. Todo en crema; el rojo queda para el
   botón, que es lo único que pide acción. */
/* El H1 envuelve las dos líneas del nombre: una sola voz para el buscador,
   dos renglones para el ojo. No aporta estilo propio. */
.hero-name { margin: 0; font-weight: 400; }
.hero-eyebrow, .hero-surnames { display: block; }
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--cream);
  margin: 0;
}
.hero-surnames {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 1.2;
  color: rgba(255, 247, 230, .86);
  margin: 14px 0 0;
}
.hero-tag {
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(255, 247, 230, .8);
  text-transform: uppercase; font-weight: 500;
  letter-spacing: .3em;
  margin: 30px 0 0;
}
.hero-sub {
  font-size: 17px; line-height: 1.25;
  color: rgba(255, 247, 230, .92);
  max-width: 54ch;
  margin: 22px 0 0;
}
.hero-ctas {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 42px;
}
.hero-ctas .btn { padding: 16px 30px; font-size: 15px; }

/* Página de error: mismo hero navy, centrado y sin foto de fondo */
.hero--404 {
  min-height: calc(100vh - 6px);
  min-height: calc(100dvh - 6px);
  display: flex; align-items: center;
  text-align: center;
}
.hero--404 .container { display: flex; flex-direction: column; align-items: center; }
.error-mark { width: 96px; height: 96px; margin-bottom: 24px; }
.error-lede {
  font-size: 17px; line-height: 1.25;
  color: rgba(255, 247, 230, .9);
  max-width: 52ch; margin: 20px 0 0;
}
.hero--404 .hero-ctas { justify-content: center; }

/* =============================================================
   8. Inicio
   ============================================================= */
.areas-head { max-width: 640px; margin-bottom: 34px; }
/* En el listado completo el encabezado se centra y el cuerpo se justifica */
.areas-head--center {
  max-width: 860px; margin-left: auto; margin-right: auto; text-align: center;
}
.areas-head--center .section-lede { text-align: center; }
/* Frases de invitación a la acción. Mismo tratamiento en todo el sitio:
   display en itálica y en rojo de marca, para que se lean como una invitación
   y no como cuerpo de texto. Cualquier frase nueva de este tipo suma su
   selector acá y hereda el tratamiento. */
.areas-cta,
.cobertura-head p.cue {
  color: var(--red-80);
  font-family: var(--font-display); font-style: italic;
}
.areas-cta { margin-top: 12px; font-size: 16px; line-height: 1.2; }
.areas-head .section-title { margin-bottom: 12px; }

.areas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* Cuatro columnas solo cuando hay ancho para que los títulos entren en un
   renglón. Entre 1100 y 1340 vuelven a ser tres. */
@media (min-width: 1341px) {
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
}
.area-card {
  background: var(--navy);
  padding: 34px 22px 26px;
  color: inherit;
  display: flex; flex-direction: column;
  /* Todo el contenido de la tarjeta va centrado: ilustración, título,
     descripción y flecha sobre un mismo eje */
  align-items: center; text-align: center;
  --icon-color: var(--cream);
  --title-color: var(--cream);
  --bullets-op: 0;
  --bullets-shift: 14px;
  --bullets-max: 0px;
  transition: transform .35s var(--ease);
}
.area-card:hover {
  --icon-color: var(--red);
  --title-color: var(--red);
  --bullets-op: 1;
  --bullets-shift: 0px;
  --bullets-max: var(--bullets-open, 220px);
}
/* El hub suma la descripción arriba de los ítems */
.area-card--detail { --bullets-open: 330px; }
/* La ilustración es un PNG usado como máscara: lo que se ve es el color de
   fondo recortado por la tinta, así el ícono sigue el color del texto y
   conserva el viraje a rojo del hover. */
.area-card-icon {
  display: block;
  width: 54px; height: 54px;
  margin: 0 auto 20px;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color .3s ease;
}
.area-card svg { color: var(--icon-color); transition: color .3s ease; }
.area-card svg [stroke] { stroke: var(--icon-color); }
.area-card h3,
.area-card h2 {
  /* 16px es lo que permite que "Asesoramiento a Particulares" entre en un
     renglón en la columna más angosta */
  font-size: 16px; line-height: 1.25; color: var(--title-color);
  margin-bottom: 14px;
  white-space: nowrap;
  transition: color .3s ease;
}
/* La flecha cierra la tarjeta, centrada bajo el texto */
.area-card-arrow {
  /* Como ítem flex, el SVG resuelve su alto intrínseco en 0: hay que darle
     medidas explícitas y sacarlo del reparto de espacio */
  flex: 0 0 auto;
  width: 20px; height: 11px; box-sizing: content-box;
  margin-top: auto; padding-top: 20px;
  color: var(--icon-color);
  transition: transform .35s var(--ease), color .3s ease;
}
.area-card:hover .area-card-arrow,
.area-card:focus-visible .area-card-arrow { transform: translateX(7px); }
.area-card-bullets {
  min-height: 0;
  max-height: var(--bullets-max);
  opacity: var(--bullets-op);
  transform: translateY(var(--bullets-shift));
  overflow: hidden;
  transition: max-height .45s var(--ease), opacity .35s ease, transform .45s var(--ease);
}
.area-card-bullets p {
  font-size: 15px; line-height: 1.25; color: var(--cream-80); margin: 0 0 7px;
}
.area-card-bullets .area-card-desc {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; line-height: 1.25;
  color: var(--cream);
  margin-bottom: 14px;
}

/* Marquee */
.marquee {
  background: var(--cream);
  padding: 20px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.marquee-track span.m-name {
  font-style: italic;
  /* Regular, no negrita: en bold la cinta se lee pesada y grotesca */
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--navy); white-space: nowrap;
}
.marquee-track span.m-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy); display: inline-block; flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Estadísticas */
.stats { background: var(--navy); padding: 100px 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display); font-size: 52px; font-weight: 700;
  color: var(--red); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 15px; color: var(--cream-80); margin-top: 12px;
  letter-spacing: .02em; text-transform: uppercase;
}

/* Sobre el estudio */
/* Foto a la izquierda, texto a la derecha. Los márgenes exteriores son los
   del contenedor, así que quedan iguales de los dos lados. */
.about-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: stretch;
}
/* La foto manda el alto de la fila; el texto se centra contra ella para que
   no quede colgado arriba con un vacío abajo */
.about-copy { align-self: center; }
.about-copy .section-title { margin-bottom: 22px; }
.about-copy p {
  font-size: 16px; line-height: 1.25; color: var(--navy-70); margin: 0 0 8px;
  /* Justificado, con partición de palabras para que no se abran ríos */
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
}
.about-copy p:last-of-type { margin-bottom: 28px; }
.about-photos {
  position: relative; height: 100%; min-height: 560px; overflow: hidden;
}
.about-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.about-photos img.is-active { opacity: 1; }

/* Testimonios */
/* Cierre de la home: los testimonios y la invitación a contactar comparten
   una sola banda azul, en dos columnas dentro del container de siempre. Los
   dos bloques conservan sus clases, así que el resto de sus reglas sigue
   valiendo: acá sólo dejan de ser secciones con fondo y aire propios. */
.cierre { background: var(--navy); padding: 70px 0 56px; }
.cierre-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start;
}
.testimonials .section-title { margin-bottom: 14px; }
/* Las tarjetas se apilan en la misma celda de grid: el alto se adapta
   a la más larga y nada queda recortado. */
.testimonial-stage {
  display: grid; max-width: 640px; margin: 0 auto; min-height: 260px;
}
.testimonial {
  grid-area: 1 / 1;
  background: var(--cream);
  padding: 36px; border-radius: 28px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.testimonial.is-active { opacity: 1; pointer-events: auto; }
.testimonial-stars {
  color: var(--red); font-size: 48px; letter-spacing: 6px;
  margin-bottom: 16px; text-align: center; line-height: 1;
}
.testimonial-text {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; line-height: 1.25; color: #000;
  margin: 0 0 24px; text-align: center;
}
/* La procedencia de las reseñas es una aclaración, no una invitación: va con
   el mismo tratamiento que la bajada de "Hablemos de tu caso", alineada a la
   izquierda debajo del título y no centrada sobre el carrusel. */
.testimonials-source {
  font-size: 16px; color: var(--cream-80);
  margin: 0 0 32px;
}
.testimonial-author {
  font-size: 14px; font-weight: 600; color: #000; text-align: center;
}

/* Contacto rápido (Inicio) */
.quick-contact-head { max-width: 600px; margin-bottom: 32px; }
.quick-contact-head .section-title { margin-bottom: 14px; }
.quick-contact-head p { font-size: 16px; color: var(--cream-80); margin-bottom: 40px; }
.quick-contact-ctas { display: flex; gap: 20px; flex-wrap: wrap; }
/* En media página los dos botones no siempre entran en un renglón. Se les da
   base flexible para que queden parejos en vez de uno más largo que el otro.
   Sólo mientras la fila es horizontal: en mobile el contenedor pasa a columna
   y ahí flex-basis mediría el alto, no el ancho. */
@media (min-width: 1101px) {
  .quick-contact-ctas .btn { flex: 1 1 240px; }
}
.contact-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding-top: 16px; align-items: start;
}
.contact-cols h3 {
  font-size: 19px; color: var(--red); margin-bottom: 16px;
}
.contact-cols a, .contact-cols p {
  display: block; font-size: 15px; color: var(--cream-80);
  line-height: 1.2; margin: 0 0 2px;
  transition: color .25s ease;
}
/* Cada dato es un destino aparte: se le da alto propio para que en teléfono
   no haya que apuntar a un renglón de 18px. */
.contact-cols a {
  display: flex; align-items: center; min-height: 26px;
}
.contact-cols a:hover { color: var(--red); }
.social-row { display: flex; gap: 14px; margin-top: 14px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  flex: 0 0 38px;
  border: 1.5px solid var(--cream-80);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  transition: border-color .25s ease;
}
.social-row a:hover { border-color: var(--red); }
/* El redondel visible queda en 38px; el área sensible se extiende a 44
   con un pseudoelemento transparente, así el diseño no cambia. */
.social-row a { position: relative; }
.social-row a::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* Los tres glifos vienen en tamaños distintos: se normalizan acá */
.social-row a svg { width: 18px; height: 18px; }

/* =============================================================
   9. Equipo
   ============================================================= */
.team-head { text-align: center; margin-bottom: 40px; }
.team-head .section-title { font-size: 30px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.team-card { perspective: 1400px; }
.team-card-inner {
  position: relative; width: 100%; height: 466px;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.team-card:hover .team-card-inner,
.team-card:focus-within .team-card-inner,
/* Al llegar desde el enlace de otra página, la ficha se muestra dada vuelta */
.team-card.is-flipped .team-card-inner { transform: rotateY(180deg); }
.team-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.team-front { background: var(--navy); }
.team-front .team-photo {
  width: 100%; height: 320px; object-fit: cover; object-position: center 22%;
  display: block;
}
.team-photo-empty {
  width: 100%; height: 320px;
  background: var(--navy-90);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-80); font-size: 14px; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-on-navy);
}
.team-photo-empty span { opacity: .75; }
.team-front-body { padding: 26px 4px; }
.team-front h3 { font-size: 28px; color: var(--cream); margin-bottom: 6px; text-align: center; }
.team-matricula {
  font-size: 13px; color: var(--red); letter-spacing: .03em; text-align: center;
}
.team-back {
  transform: rotateY(180deg);
  background: var(--cream);
  padding: 32px 26px;
  display: flex; flex-direction: column; justify-content: center;
}
/* El dorso repite el nombre, pero no como heading: sería un H3 duplicado
   por cada socio. Va como párrafo con el mismo aspecto. */
.team-back-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--navy); margin-bottom: 12px; text-align: center;
}
.team-back p:not(.team-back-name) {
  font-size: 14px; line-height: 1.25; color: var(--navy-70); text-align: center;
}

/* Historia */
.historia { background: var(--navy-90); padding: 90px 0; }
.historia-inner { max-width: 900px; margin: 0 auto; }
.historia .section-title { font-size: 30px; margin-bottom: 32px; text-align: center; }
.historia p {
  /* Bloque centrado en la página y texto justificado */
  text-align: justify; hyphens: auto;
  font-size: 16px; line-height: 1.25; color: var(--cream-80); margin: 0 0 16px;
}
.historia p:last-child { margin-bottom: 0; }

/* Banda interdisciplinaria */
.interdisciplinaria { background: var(--red); padding: 56px 0; color: var(--cream); }
.interdisciplinaria-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
/* Convergencia interdisciplinaria: primero aparecen las cuatro disciplinas,
   después se dibujan las líneas que bajan hacia el martillo del centro, y el
   martillo late una vez. Se dispara cuando la sección entra en pantalla.
   Las ilustraciones son PNG usados como máscara, así toman el crema de la
   banda igual que los iconos de las tarjetas. */
.inter-figure { max-width: 560px; margin: 0 auto 24px; }
.inter-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.inter-node, .inter-goal {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.inter-ico {
  width: 46px; height: 46px;
  background-color: var(--cream);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.inter-ico--goal { width: 60px; height: 60px; }
.inter-node figcaption {
  font-family: var(--font-body); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream); opacity: .72;
  text-align: center; line-height: 1.2;
}
/* El viewBox coincide con el ancho de la figura, así cada línea nace en el
   centro exacto de su ilustración y todas mueren en el martillo. */
.inter-lines {
  width: 100%; height: auto; display: block;
  stroke: var(--cream); stroke-width: 1.4; stroke-linecap: round;
}

.inter-node, .inter-goal { opacity: 0; transition: opacity .7s ease; }
.inter-node:nth-of-type(1) { transition-delay: .05s; }
.inter-node:nth-of-type(2) { transition-delay: .2s; }
.inter-node:nth-of-type(3) { transition-delay: .35s; }
.inter-node:nth-of-type(4) { transition-delay: .5s; }
.inter-lines path {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  opacity: .55;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.inter-lines path:nth-child(1) { transition-delay: .7s; }
.inter-lines path:nth-child(2) { transition-delay: .85s; }
.inter-lines path:nth-child(3) { transition-delay: 1s; }
.inter-lines path:nth-child(4) { transition-delay: 1.15s; }
.inter-goal { transition-delay: 1.5s; transform-origin: center; }

[data-reveal].is-revealed .inter-node,
[data-reveal].is-revealed .inter-goal { opacity: 1; }
[data-reveal].is-revealed .inter-lines path { stroke-dashoffset: 0; }
[data-reveal].is-revealed .inter-goal { animation: interPulse 1.4s var(--ease) 1.9s 1; }

@keyframes interPulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.09); }
}
.interdisciplinaria h2 { font-size: 30px; color: var(--cream); margin-bottom: 16px; }
.interdisciplinaria p {
  font-size: 16px; line-height: 1.25; color: var(--cream);
  opacity: .92; max-width: 720px; margin: 0 auto;
}

/* Mapa de cobertura */
.cobertura-head { max-width: 900px; margin: 0 auto 34px; text-align: center; }
.cobertura-head .section-title { font-size: 30px; margin-bottom: 14px; }
.cobertura-head p { font-size: 16px; line-height: 1.2; color: var(--navy-70); margin: 0 0 6px; }
.map-frame {
  border: 1px solid var(--border-on-cream);
  height: 540px; overflow: hidden;
  position: relative;
  background: #081B31;                /* igual al océano: sin costuras al alejar */
  touch-action: none;                 /* el gesto lo maneja el mapa */
}
.map-svg {
  width: 100%; height: 100%; display: block;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.map-frame.is-panning .map-svg { cursor: grabbing; }

.map-ocean { fill: #081B31; }
.map-land  { fill: var(--navy); stroke: var(--border-on-navy); stroke-width: 1.2; }

.map-water-label,
.map-land-label {
  font-family: var(--font-display); font-style: italic;
  fill: var(--cream-80); opacity: .38;
  font-size: 15px;
  pointer-events: none;
}
.map-land-label { font-style: normal; font-family: var(--font-body); font-size: 12px; opacity: .3; }

/* --- Provincias --- */
.map-prov {
  fill: var(--navy);
  stroke: rgba(255, 247, 230, .22);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  transition: fill .3s ease;
}
.map-prov--home { fill: #16345C; }
.map-prov-label {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: .14em;
  fill: var(--cream-80); opacity: .42;
  text-anchor: middle;
  pointer-events: none;
}
/* Los nombres de provincia sólo tienen sentido en vista de país/región */
.map-prov-labels { opacity: 1; transition: opacity .3s ease; }
.map-svg.is-near .map-prov-labels { opacity: 0; }
/* Las provincias chicas del norte se amontonan a escala país:
   su nombre aparece recién al acercar. */
.map-prov-label--minor { opacity: 0; transition: opacity .3s ease; }
.map-svg.is-mid .map-prov-label--minor { opacity: .42; }

/* --- Barra de escala --- */
.map-scale {
  position: absolute; right: 16px; bottom: 18px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.map-scale__bar {
  display: block; height: 6px;
  border: 1px solid var(--cream-80);
  border-top: 0;
  opacity: .65;
}
.map-scale__label {
  font-size: 11px; color: var(--cream-80); opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* --- Marcadores --- */
.map-city { cursor: pointer; }
.map-city__halo {
  fill: var(--red); opacity: .18;
  transition: opacity .3s ease;
}
.map-city__dot {
  fill: var(--red);
  transition: fill .3s ease;
}
.map-city__label {
  font-family: var(--font-body); font-size: 13px;
  fill: var(--cream-80);
  paint-order: stroke; stroke: rgba(8, 27, 49, .85); stroke-width: 3px;
  transition: fill .3s ease;
  pointer-events: none;
}
.map-city:hover .map-city__halo,
.map-city:focus .map-city__halo { opacity: .42; }
.map-city:hover .map-city__label,
.map-city:focus .map-city__label { fill: var(--cream); }
.map-city:focus { outline: none; }

.map-city--office .map-city__dot { fill: var(--cream); }
.map-city--office .map-city__label { fill: var(--cream); font-weight: 700; }

.map-city--remote .map-city__dot {
  fill: none; stroke: var(--red); stroke-width: 2;
}
.map-city--remote .map-city__halo { opacity: .1; }
.map-city--remote .map-city__label { opacity: .85; }

/* Etiqueta agrupada: sólo cuando el zoom está lejos */
.map-cluster { pointer-events: none; }
.map-cluster .map-city__dot { fill: var(--cream); }
.map-cluster .map-city__label { fill: var(--cream); font-weight: 700; }

/* Alternancia entre el grupo y las localidades individuales */
.map-svg .map-cluster { opacity: 0; transition: opacity .3s ease; }
.map-svg.is-far .map-cluster { opacity: 1; }
.map-svg.is-far .map-city--local,
.map-svg.is-far .map-city--office { opacity: 0; pointer-events: none; }
.map-city--local, .map-city--office { transition: opacity .3s ease; }

/* --- Controles --- */
.map-controls {
  position: absolute; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
}
.map-btn {
  min-width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 36, 67, .88);
  border: 1px solid var(--border-on-navy);
  color: var(--cream);
  font-size: 20px; line-height: 1;
  font-family: var(--font-body);
  transition: background .25s ease, border-color .25s ease;
}
.map-btn:hover { background: var(--red); border-color: var(--red); }
.map-btn--text { font-size: 12px; letter-spacing: .04em; padding: 0 12px; height: 44px; }

.map-legend {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(12, 36, 67, .86);
  border: 1px solid var(--border-on-navy);
  padding: 12px 16px;
  font-size: 12px; color: var(--cream-80);
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.map-legend span { display: flex; align-items: center; gap: 8px; }
.map-legend i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  display: inline-block; flex-shrink: 0;
}
.map-legend i.office { background: var(--cream); }
.map-legend i.remote { background: none; border: 2px solid var(--red); }

.map-hint {
  position: absolute; left: 20px; top: 18px;
  font-size: 11px; color: var(--cream-80); opacity: .55;
  pointer-events: none;
}

/* =============================================================
   10. Áreas de práctica
   El hub usa las mismas tarjetas que el resumen de Inicio
   (.area-card / .areas-grid, sección 8). Lo que sigue es el
   ritmo vertical de las páginas de detalle: solo tamaños y
   espaciados, con los mismos tokens de color y tipografía.
   ============================================================= */
/* Layout de dos columnas de la ficha. Izquierda: los tres bloques de
   contenido. Derecha: el recuadro azul con las preguntas frecuentes y, debajo,
   las áreas relacionadas. La columna derecha estira hasta igualar el alto de
   la izquierda, y el recuadro absorbe la diferencia. */
.area-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 52px;
  align-items: stretch;
}
.area-main { min-width: 0; }

.area-back {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-bottom: 13px;
  font-size: 14px; font-weight: 600; color: var(--red-80);
  transition: transform .25s var(--ease);
}
.area-back:hover { transform: translateX(-3px); }

.area-prose { max-width: none; }
.area-prose p {
  font-size: 17px; line-height: 1.25; color: var(--navy-70); margin: 0 0 16px;
  text-align: justify; hyphens: auto;
}
.area-prose p:last-child { margin-bottom: 0; }
.area-prose strong { color: var(--navy); font-weight: 700; }

/* Menos aire entre los tres bloques de la columna izquierda */
.area-h2 { font-size: 30px; margin: 38px 0 14px; }
.area-h2--first { margin-top: 0; }

.area-list { max-width: none; }
.area-list li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 16px; line-height: 1.25; color: var(--navy-70);
}
.area-list li:last-child { margin-bottom: 0; }
.area-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* Columna derecha */
.area-aside {
  min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.faq-frame {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  background: var(--navy); color: var(--cream);
  border-radius: 20px;
  padding: 30px 28px;
}
.faq-frame-title {
  font-size: 21px; line-height: 1.2; color: var(--cream);
  margin-bottom: 20px;
}
.area-related h2 { font-size: 21px; line-height: 1.2; margin-bottom: 14px; }
/* Los enlaces a las otras áreas son destinos sueltos, no texto corrido:
   cada uno ocupa un renglón propio de 44px para poder tocarlo sin apuntar. */
.area-related .area-list li { margin-bottom: 0; }
.area-related .area-list a {
  display: flex; align-items: center; min-height: 44px;
}
.area-related .area-list li::before { top: 50%; transform: translateY(-50%); }

/* Preguntas frecuentes en carrusel. Las respuestas se apilan en la misma
   celda de grilla y se alternan por opacidad: en pantalla se ve una por vez,
   pero todas siguen en el HTML para buscadores y modelos de lenguaje. */
.faq-block {
  max-width: none;
  flex: 1 1 auto; display: flex; flex-direction: column;
}
.faq-stage {
  flex: 1 1 auto;
  display: grid;
  border-top: 1px solid var(--border-on-navy);
  border-bottom: 1px solid var(--border-on-navy);
}
.faq-item {
  grid-area: 1 / 1;
  padding: 22px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.faq-item.is-active { opacity: 1; pointer-events: auto; }
.faq-item h3 { font-size: 18px; line-height: 1.25; color: var(--cream); margin-bottom: 10px; }
.faq-item p { font-size: 15px; line-height: 1.25; color: var(--cream-80); }

.faq-nav { display: flex; gap: 12px; margin-top: 20px; }
/* Los tres controles se ven iguales: fondo de marca y glifo crema. La
   inversión queda solo para el estado de pausa, que sí tiene que distinguirse. */
.carousel-btn--pause svg { fill: var(--cream); }
.carousel-btn--pause.is-paused { background: var(--cream); }
.carousel-btn--pause.is-paused svg { fill: var(--red); }

@media (max-width: 1100px) {
  .area-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* La placa roja se centra dentro del bloque azul: mismo aire arriba y abajo */
.section--band { padding: 96px 0; }
.cta-band {
  background: var(--red);
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  max-width: 760px; margin: 0 auto;
}
.cta-band h2 { font-size: 30px; color: var(--cream); margin-bottom: 16px; }
.cta-band p {
  font-size: 16px; line-height: 1.25; color: var(--cream);
  opacity: .92; margin: 0 0 32px;
}
.cta-band .btn--cream { color: var(--red-80); }

/* =============================================================
   11. Patrocinios
   ============================================================= */
.news-stage {
  display: grid; max-width: 1088px; margin: 0 auto;
}
.news-item {
  grid-area: 1 / 1;
  opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.news-item.is-active { opacity: 1; pointer-events: auto; }
.news-img {
  display: block; width: 100%; height: 400px; object-fit: cover;
  background: var(--navy-90);
}
/* En desktop el recuadro es mucho más apaisado que la foto, y el recorte
   centrado dejaba la moto cortada por abajo. En mobile el encuadre centrado
   ya funciona, así que el ajuste va solo acá. */
@media (min-width: 1101px) {
  .news-img--moto { object-position: center 70%; }
}
.news-body { padding: 28px 0 0; }
.news-badge {
  display: inline-block; background: var(--red); color: var(--cream);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 16px;
}
.news-title {
  font-size: 28px; line-height: 1.25; color: var(--navy); margin-bottom: 14px;
}
.news-summary {
  font-size: 16px; line-height: 1.25; color: var(--navy-70); margin-bottom: 18px;
  max-width: 80ch;
}
.news-meta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 14px; color: var(--navy-70);
}
.news-link {
  font-weight: 600; color: var(--red-80);
  display: inline-flex; align-items: center; min-height: 26px;
}
.news-link:hover { color: var(--navy); }

/* =============================================================
   12. Contacto
   ============================================================= */
.contacto-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start;
}
.form-card h2 { font-size: 19px; color: var(--navy); margin-bottom: 28px; }
.form-card h2.form-title { color: var(--red); }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; color: var(--navy-70);
  margin-bottom: 6px; font-weight: 600;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  font-size: 15px; font-family: var(--font-body);
  border: 1px solid var(--border-on-cream);
  background: #fff; color: var(--navy);
  transition: border-color .25s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: var(--navy-70); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
}
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.form-submit {
  width: 100%; border-radius: 0; margin-top: 8px;
  justify-content: center;
}
.form-status {
  margin-top: 16px; padding: 14px 16px; font-size: 15px;
  display: none;
  border: 1px solid var(--border-on-cream);
}
.form-status.is-visible { display: block; }
.form-status.is-ok { border-color: var(--red); color: var(--navy); background: rgba(225, 53, 38, .07); }
.form-status.is-error { border-color: var(--navy-40); color: var(--navy); background: #fff; }

/* Mismo recuadro que el panel de preguntas frecuentes de cada área, para que
   las dos piezas se lean como el mismo sistema. */
.contacto-side {
  background: var(--navy); color: var(--cream);
  border-radius: 20px;
  padding: 30px 28px;
  align-self: start;
}
.contacto-side h3 {
  font-size: 19px; color: var(--cream); margin-bottom: 20px;
}
.contacto-side a, .contacto-side p {
  display: block; font-size: 15px; color: var(--cream-80);
  line-height: 1.25; margin: 0 0 6px;
  transition: color .25s ease;
}
/* Igual que en la columna de contacto del pie: cada dato con alto propio */
.contacto-side a { display: flex; align-items: center; min-height: 26px; }
.contacto-side a:hover { color: var(--cream); }
/* Sobre el navy del recuadro el "hueco" del glifo de WhatsApp va en navy */
.contacto-side .social-row { --wa-hole: var(--navy); }
.contacto-side .social-row a {
  border-color: var(--border-on-navy);
  /* La regla de arriba pone display:block en todos los enlaces de la columna
     y pisaba el centrado del redondel, así que el glifo quedaba pegado arriba
     a la izquierda. Se lo devolvemos solo a los sociales. */
  display: flex; align-items: center; justify-content: center;
}
.contacto-side .social-row a:hover { border-color: var(--cream); }
.contacto-map {
  /* Dentro del recuadro navy el borde claro es el que separa el mapa del fondo */
  border: 1px solid var(--border-on-navy);
  border-radius: 12px;
  height: 320px; margin-top: 28px; overflow: hidden;
}
.contacto-map iframe { width: 100%; height: 100%; border: 0; }

/* =============================================================
   13. Footer
   ============================================================= */
.footer { background: var(--cream); padding: 28px 0; }
.footer-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 80px; width: 80px; object-fit: contain; }
.footer-brand span {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--navy);
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px; color: var(--navy-70);
  align-items: center;
}
.footer-links a {
  color: var(--navy-70); transition: color .25s ease;
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-links a:hover { color: var(--red-80); }
.footer-copy { font-size: 12px; color: var(--navy-70); }

/* =============================================================
   14. Scroll reveal
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal][data-reveal-dist="18"] { transform: translateY(18px); }
[data-reveal][data-reveal-dist="20"] { transform: translateY(20px); }
[data-reveal][data-reveal-dist="22"] { transform: translateY(22px); }
[data-reveal].is-revealed[data-reveal-dist] { transform: translateY(0); }

/* Entrada del hero de Inicio ---------------------------------------------
   No usa el scroll-reveal general: arranca sola al cargar la página. Cada
   línea sube apenas, entra en foco desde un desenfoque y encadena con la
   siguiente. La duración larga y el escalonado amplio son lo que hace que
   se lea como una apertura y no como cinco elementos apareciendo. */
.hero-intro [data-hero-in] {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(9px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease),
              filter 1.4s var(--ease), letter-spacing 1.9s var(--ease);
  transition-delay: var(--in-delay, 0s);
  will-change: opacity, transform, filter;
}
.hero-intro.is-in [data-hero-in] {
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}
/* El nombre además asienta su tracking. Solo en desktop: en pantallas
   angostas el sobreancho inicial forzaría un salto de línea al entrar. */
@media (min-width: 1101px) {
  .hero-intro:not(.is-in) .hero-eyebrow { letter-spacing: .12em; }
}

/* =============================================================
   15. Responsive — breakpoint único 1100px
   ============================================================= */
@media (max-width: 1100px) {
  .container, .header-inner, .footer-inner { padding: 0 20px; }

  .nav { display: none; }
  .nav-toggle { display: flex; }

  .brand img { height: 64px; width: 64px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 9px; }

  .section { padding: 72px 0; }
  .section-title { font-size: 28px; }

  .hero { padding: 140px 0 86px; }
  .hero-title { font-size: 32px; }
  /* En mobile la ola mide 60px, así que el pie del hero sube en consecuencia
     para que el cruce con el botón siga siendo por el centro */
  .hero--home {
    padding: 140px 0 104px;
    min-height: calc(100vh - 26px);
    min-height: calc(100dvh - 26px);
  }
  .hero-sub { font-size: 15px; }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .btn--equal { width: 100%; }
  .hero-wave { height: 60px; }

  .areas-grid { grid-template-columns: 1fr; }
  /* Sin hover en táctil: el detalle va siempre visible */
  .area-card {
    --bullets-max: var(--bullets-open, 220px);
    --bullets-op: 1; --bullets-shift: 0px;
  }

  .area-h2 { font-size: 25px; margin: 30px 0 14px; }

  .stats { padding: 64px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stat-num { font-size: 40px; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-copy p { text-align: left; }
  .about-photos { min-height: 320px; }

  .testimonial { padding: 28px 22px; }
  .testimonial-stars { font-size: 34px; }
  .testimonial-text { font-size: 17px; }

  .cierre-grid { grid-template-columns: 1fr; gap: 48px; }
  .cierre { padding: 56px 0 48px; }
  .quick-contact-ctas { flex-direction: column; }
  .btn--wide { width: 100%; }
  .contact-cols { grid-template-columns: 1fr; gap: 28px; }

  .team-grid { grid-template-columns: 1fr; gap: 24px; }
  .team-card-inner { height: 430px; }
  /* Sin hover en táctil: la bio se muestra debajo en vez del flip */
  .historia { padding: 64px 0; }
  .cobertura-head .section-title { font-size: 24px; }
  .map-frame { height: 400px; }
  .map-hint { display: none; }              /* en táctil no aplica la rueda */
  .map-legend {
    left: 10px; bottom: 10px;
    padding: 8px 10px; font-size: 10px; gap: 4px;
  }
  .map-legend i { width: 7px; height: 7px; }
  .map-controls { top: 10px; right: 10px; gap: 6px; }
  .map-btn { min-width: 44px; height: 44px; font-size: 17px; }
  .map-btn--text { height: 44px; font-size: 10px; padding: 0 9px; }

  .news-img { height: 240px; }
  .news-title { font-size: 22px; }

  .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
  .field-row { flex-direction: column; gap: 0; }

  .footer-inner { justify-content: flex-start; gap: 14px; }
  .footer-brand img { height: 60px; width: 60px; }
}

@media (max-width: 560px) {
  .hero-eyebrow { font-size: 30px; letter-spacing: .01em; }
  .hero-surnames { margin-top: 14px; }
  .hero-tag { margin-top: 24px; letter-spacing: .22em; }
  .hero-sub { font-size: 15px; margin-top: 18px; }
  .hero-ctas { margin-top: 32px; }
  .team-card-inner { height: 400px; }
  /* La foto cede alto para que la matrícula entre en la tarjeta */
  .team-front .team-photo, .team-photo-empty { height: 258px; }
  /* En un renglón tan corto el justificado abre huecos enormes entre
     palabras: acá se lee mejor alineado a la izquierda. */
  .area-prose p,
  .historia p,
}

/* =============================================================
   16. Reduced motion / print
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg { animation: none; }
  .marquee-track { animation-duration: 120s; }
  .wa-float::before { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-intro [data-hero-in] {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .hero-intro:not(.is-in) .hero-eyebrow { letter-spacing: .01em; }
  /* La convergencia interdisciplinaria se muestra armada, sin dibujarse */
  .inter-node, .inter-goal { opacity: 1; transition: none; }
  .inter-lines path { stroke-dashoffset: 0; transition: none; }
  [data-reveal].is-revealed .inter-goal { animation: none; }
}

@media print {
  .header, .wa-float, .nav-mobile, .hero-wave { display: none !important; }
  body { background: #fff; color: #000; }
}