/* ==========================================================================
   RESPONSIVE — la estrategia es redefinir TOKENS por breakpoint.
   Al cambiar --gutter, --card-padding o la escala tipográfica, todos los
   componentes se reescalan solos: aquí abajo solo quedan los cambios de
   estructura que ninguna variable puede expresar.

   Breakpoints
     1024px  tablet / portátil pequeño
      768px  móvil — colapsa la navegación y todas las rejillas
      480px  móvil estrecho (iPhone SE, 375px CSS)
   ========================================================================== */

/* --- Apilado del hero -----------------------------------------------------
   Va antes que el bloque de tablet y con su propio corte. Las cifras ocupan
   una columna fija de 620px: por debajo de 1280px lo que sobra para el texto
   ya no da para un titular de 96px y el hero se descuadraba en vertical.
   Apilado, el texto recupera todo el ancho y las cifras siguen en 2x2.     */

@media (max-width: 1279px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

  /* El mosaico de áreas pierde columnas por tramos: a seis, la pieza deja de
     tener ancho para un nombre largo antes que la página para columnas. */
  .area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Franja de portátil (1025–1279): apilado pero todavía con la escala
   tipográfica de escritorio, el hero se pasaba de alto y las cifras se salían
   de la primera pantalla. Se recorta aquí y solo aquí; por debajo de 1024px
   manda el bloque de tablet, que ya reduce la escala entera.               */

@media (min-width: 1025px) and (max-width: 1279px) {
  :root { --stat-card-h: 130px; }

  .hero-stage .display { font-size: var(--text-h1); }

  .hero-stage__inner .hero {
    padding-block: var(--space-md) calc(var(--section-gap) + var(--space-2xl));
  }
}

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --gutter:       32px;
    --card-padding: 32px;
    --text-display: 68px;
    --text-h1:      60px;
    --text-h2:      44px;
    --text-h3:      34px;
    --text-h4:      28px;
    --text-stat:       64px;
    --text-stat-label: 40px;
    --stat-card-h:    140px;
  }

  /* Colapsar de verdad: mantener 12 columnas dejaría 11 huecos de 40px,
     un ancho mínimo de 440px que desborda cualquier móvil. */
  .split,
  .split--wide-text,
  .split--contact { grid-template-columns: minmax(0, 1fr); }

  .split__text,
  .split__visual,
  .split--wide-text .split__text,
  .split--wide-text .split__visual,
  .split--contact .split__text,
  .split--contact .split__visual { grid-column: 1 / -1; }

  /* Apilada, la imagen ocupa todo el ancho: con el alto minimo de siempre
     quedaba una franja de proporcion 3.5 que cortaba fotos de grupo y las
     cuadradas de especialidades. */
  .split__visual .placeholder { min-height: 0; aspect-ratio: 16 / 9; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Ruleta de equipo: dos tarjetas a la vista. teamCarousel.js lee esta
     variable, así que el corte se decide aquí y en ningún otro sitio. */
  .team-carousel { --per-view: 2; }

  /* El diálogo se estrecha con la pantalla y la foto se acorta con él, para
     que no quede un retrato muy alto junto a una columna de texto muy corta. */
  .modal__photo { height: 360px; }

  /* Ya no sobra ancho: el boton vuelve debajo del texto, alineado a la izquierda. */
  .section__head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .section__head-action { justify-content: flex-start; }
  .stat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La marca ocupa su propia fila; Navegación y Contacto, lado a lado. */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--nav,
  .footer-col--contact { grid-column: auto; }
}

/* --- Colapso de la navegación --------------------------------------------
   Va por su cuenta y antes que el bloque móvil, porque no depende de la
   escala tipográfica sino de una suma: marca + cinco enlaces + Brochure.
   Medido, esa fila deja de caber por debajo de 980px, así que el corte va en
   1000 para no vivir de un margen de un píxel. El resto del bloque de 768px
   no puede subir aquí: a esos anchos las rejillas de dos columnas y la
   escala tipográfica siguen estando bien.                                 */

@media (max-width: 1000px) {
  /* El Brochure no desaparece: header.html ya lo repite dentro del menú. */
  .site-nav,
  .site-header__brochure { display: none; }

  .hamburger { display: flex; }
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --gutter:        20px;
    --card-padding:  24px;
    --section-gap:   32px;
    --header-height: 68px;

    --text-display: 46px;
    --text-h1:      44px;
    --text-h2:      34px;
    --text-h3:      30px;
    --text-h4:      26px;
    --text-stat:       44px;
    --text-stat-label: 30px;
    --stat-card-h:    118px;
    --text-number:     36px;
    --text-lead:    18px;
    --text-small:   16px;
    --text-label:   13px;
  }

  .site-brand__logo { width: 46px; height: 46px; }
  .site-brand__name { font-size: 19px; }

  /* Todo a una columna. */
  .grid--2,
  .grid--3,
  .form__row,
  .modal__grid { grid-template-columns: minmax(0, 1fr); }

  .modal__media,
  .modal__info { grid-column: 1 / -1; }

  /* Acciones apiladas y a ancho completo: mejor superficie táctil. */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }

  .cta-band { flex-direction: column; align-items: stretch; }
  .cta-band__actions { display: flex; flex-direction: column; gap: var(--space-sm); }
  .cta-band__actions .btn { width: 100%; }

  /* Hero interior: el gráfico decorativo deja de estar en posición absoluta
     y pasa a fluir debajo del texto. */
  .hero-band { padding: var(--space-xl) var(--card-padding); }
  .hero-band__decor {
    position: static;
    margin-top: var(--space-lg);
    margin-left: auto;
  }

  /* Misma especificidad que en components.css para poder sobreescribirla.
     El hueco de abajo sigue reservado para los puntos del carrusel. */
  .hero-stage__inner .hero {
    padding-block: var(--space-md) calc(var(--section-gap) + var(--space-2xl));
  }
  .hero__cta { margin-top: var(--space-xl); }

  /* Cifras: 2x2. Sin puntero no hay hover, asi que components.css ya deja
     la cifra visible y la etiqueta en su tamano pequeno. */
  .stat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stat-list__row {
    min-height: var(--stat-card-h);
    padding: 20px;
    border-radius: var(--radius-inner);
    gap: 2px;
  }

  /* El escenario ocupa la pantalla menos la cabecera; el hero respira menos. */
  .hero-stage__inner { min-height: calc(100svh - var(--header-height)); }

  /* Baldosa mas pequena: a 180px la diagonal apenas se leeria en movil. */
  .mosaic::before { background-size: 120px 120px; }

  .placeholder { min-height: 200px; }
  .map { height: 260px; }

  /* Dos columnas y el nombre un escalón más abajo: el nombre más largo llega
     a cuatro líneas y es el que fija el alto de toda su fila. */
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-tile__name { font-size: var(--text-small); }

  /* Los filtros ocupan el ancho útil sin dejar una píldora suelta. */
  .filter-pill { padding: 12px 20px; }

  /* Una tarjeta a la vista: a este ancho dos quedarían ilegibles. */
  .team-carousel { --per-view: 1; }

  /* Los controles se separan del carril y se centran juntos. */
  .team-carousel__controls { justify-content: center; gap: var(--space-xl); }

  .modal { padding: var(--space-lg); }
  .modal__dialog { max-height: 92vh; }
  .modal__close { top: 20px; right: 20px; width: 44px; height: 44px; }
  /* Apilado, la foto ocupa el ancho completo: puede permitirse ser alta. */
  .modal__photo { height: 320px; }
  .modal__social .btn { width: 100%; }

  .site-footer__inner { padding-block: var(--space-3xl) var(--space-lg); }
  /* Navegación toma solo lo que miden sus enlaces y Contacto el resto, para
     que el correo no se parta en dos líneas entre 480 y 768px. */
  .site-footer__grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl) var(--space-3xl); }
  .site-footer__bottom { flex-direction: column; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-3xl); padding-top: var(--space-xl); }

  /* El logo baja un poco para no comerse el ancho junto al nombre. */
  .site-brand--lg { gap: var(--space-sm); }
  .site-brand--lg .site-brand__logo { width: 52px; height: 52px; }

}

/* --- Móvil estrecho ------------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --gutter:       16px;
    --card-padding: 20px;
    --radius-card:  36px;
    --radius-inner: 28px;

    --text-display: 38px;
    --text-h1:      36px;
    --text-h2:      29px;
    --text-h3:      26px;
    --text-h4:      23px;
    --text-stat:       38px;
    --text-stat-label: 26px;
    --stat-card-h:    108px;
    --text-number:     32px;
  }

  .site-brand__logo { width: 42px; height: 42px; }
  .site-brand__name { font-size: 18px; }
  .mobile-menu__item a { font-size: 30px; min-height: 52px; }
  .modal__photo { height: 280px; }

}

/* --- Pie apilado ----------------------------------------------------------
   Corte propio, como el del hero: depende del correo, que mide unos 300px.
   Por debajo de 560px la columna de Contacto ya no le da ese ancho y el
   correo se partía en dos líneas, así que el pie pasa a una columna. Los
   cinco enlaces cortos van en dos columnas para no formar una tira larga. */

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer-col--nav,
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
}