/* ============================================================
   responsive.css — Breakpoints (mobile-first → desktop)
   ============================================================ */

/* ---------- Tablet (>= 768px) ---------- */
@media (min-width: 768px) {
  /* Logo un poco más grande cuando hay espacio (independiente del nav: en
     este rango todavía se ve el header en modo hamburguesa, ver 1024px
     para el cambio a nav horizontal). */
  .header__logo-img {
    /* Wordmark ancho (~3.7:1): calc(header-h - 16px) venía del ícono
       cuadrado viejo y con la proporción nueva daba un ancho (~206px)
       que dominaba visualmente sobre el texto. Altura fija, calibrada
       a ojo contra el texto de al lado (ver .header__logo-text). */
    height: 36px;
  }
  .header__logo-text {
    font-size: 1.05rem;
  }

  /* Hero: botones en fila con ancho automático. */
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero__actions .btn {
    width: auto;
  }

  /* Nosotros: texto a la izquierda, foto protagonista (más grande) a la derecha,
     lado a lado en la MISMA fila y alineados arriba. */
  .about__intro {
    /* minmax(0, ...): mismo criterio que .contact (ver styles.css) — sin
       esto, el track puede forzarse por encima del ancho disponible si el
       contenido de alguna columna no se achica. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-xl);
    align-items: start;
  }
  /* Colocación explícita (columna + fila) para evitar que el texto caiga a una 2ª fila. */
  .about__lead {
    grid-column: 1;
    grid-row: 1;
  }
  .about__media {
    grid-column: 2;
    grid-row: 1;
  }
  /* Tarjeta-acento pequeña: cuelga de la esquina inferior izquierda de la foto,
     asomando apenas hacia el hueco entre columnas. */
  .about__stats {
    position: absolute;
    left: calc(-1 * var(--space-md));
    bottom: calc(-1 * var(--space-md));
    width: min(300px, 50%);
    margin: 0;
    z-index: 2;
  }

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

  /* Mosaico de Experiencia: vertical grande a la izquierda (2 filas),
     2 horizontales apiladas a la derecha. Las filas las dimensionan las
     fotos horizontales (3:2); la vertical llena la altura resultante. */
  .exp-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .exp-mosaic__item--tall {
    grid-row: 1 / 3;
    aspect-ratio: auto;
    height: 100%;
  }

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

  /* Trayectoria: 2 columnas (1-2 arriba, 3-4, 5-6) para compactar el alto. */
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .fleet-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact {
    /* Mismo minmax(0, ...) que la base (ver styles.css): sin él, este
       breakpoint queda igual de expuesto al mismo desborde si el contenido
       de .contact__list crece. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .map-embed {
    height: 270px;
  }

  .footer__grid {
    grid-template-columns: 1.4fr 0.8fr 1.3fr;
    gap: var(--space-xl);
  }
  .footer__bar-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ---------- Desktop (>= 1024px) ---------- */
@media (min-width: 1024px) {
  /* Nav horizontal completo (logo + ítems + CTA): antes vivía en ≥768px,
     pero a ese ancho no cabe (choca con el logo / corta el CTA). Debajo de
     este breakpoint sigue el menú hamburguesa/panel escalonado tal cual. */
  .nav__toggle {
    display: none;
  }
  /* El panel a pantalla completa (styles.css) es exclusivo del rango
     hamburguesa (<1024px): aquí vuelve a ser la barra horizontal de siempre,
     incluyendo forzar opacity/visibility a su valor visible pase lo que
     pase con la clase .is-open (que solo la maneja nav.js en mobile/tablet). */
  .nav__menu,
  .nav__menu.is-open {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    background-color: transparent;
    padding: 0;
    opacity: 1;
    visibility: visible;
  }

  /* Enlaces oscuros en ambos estados (transparente sobre el hero y barra
     blanca); vuelven a su tamaño/peso de texto normal (sin el tratamiento
     "texto grande" del panel móvil) y sin transform/opacity de entrada. */
  .nav__link,
  .nav__menu.is-open .nav__link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-base);
    line-height: inherit;
    opacity: 1;
    transform: none;
    transition: color var(--transition);
  }
  /* El número de orden es exclusivo del panel móvil/tablet. */
  .nav__link-num {
    display: none;
  }

  /* CTA: botón rojo relleno en ambos estados (en el panel móvil/tablet,
     Contacto ya no es un botón: ver .nav__link--cta en styles.css/mobile,
     que quedó sin declarar a propósito). */
  .nav__link--cta {
    padding: 0.5rem 1.1rem;
    margin-top: 0;
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-weight: 700;
    text-align: center;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  }
  .nav__link--cta:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
  }

  .services {
    grid-template-columns: repeat(3, 1fr);
  }
  .fleet-list {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Formulario compacto: campos cortos en 2 columnas; los largos, a lo ancho. */
  .contact__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact__form .field--full,
  .contact__form button[type="submit"],
  .contact__form .contact__feedback {
    grid-column: 1 / -1;
  }

  /* Transición Nosotros → Servicios: solo con "pin-active" (lo agrega
     section-transition.js tras comprobar ≥1024px + sin reduced-motion +
     puntero fino). El carril vive en el wrapper; el único efecto es el
     pin en sí (position: sticky) — sin scale, radio ni sombra, la
     costura con Servicios queda como un corte plano. */
  /* --stage-runway: valor único del carril (45vh, sin cambios de ritmo en
     esta iteración), compartido entre .transition-stage (padding-bottom) y
     #servicios (margin-top negativo) para que ambos usen siempre el mismo
     número y no puedan desincronizarse. Definida en <html> porque #servicios
     no es descendiente de .transition-stage: son hermanos. */
  html.pin-active {
    --stage-runway: 45vh;
  }
  .pin-active .transition-stage {
    /* Carril acortado (era 80vh): menos distancia de scroll con el fondo
       oscuro ya expuesto y Servicios aún sin llegar, para reducir la
       sensación de "pantalla vacía" durante la transición. Solo controla
       cuánto dura el pin antes de que Servicios cubra a Nosotros por
       completo. */
    padding-bottom: var(--stage-runway);
  }
  .pin-active .transition-stage__panel {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Garantiza que el panel (blanco) ocupe al menos el viewport completo
       mientras está pegado: así el fondo oscuro de Servicios, que asoma
       por el borde inferior a medida que sube, nunca lo hace antes de
       tiempo por que el contenido de Nosotros sea más bajo que la
       pantalla. */
    min-height: 100vh;
    /* Sin scale, sin radio ni sombra: Nosotros permanece a tamaño 1:1 y con
       esquinas cuadradas durante todo el carril. La costura con Servicios,
       que sube por detrás, queda como un corte plano (mismo criterio que
       Experiencia → Equipos), no como una "hoja" que se asienta. */
  }
  /* Posiciona el #servicios REAL detrás de Nosotros durante el carril.
     margin-negativo, no absolute/sticky: #servicios sigue siendo un
     elemento normal en el flujo, así que NO aporta altura a
     .transition-stage (que sigue siendo panel + padding-bottom).
     Al subir su posición estática la distancia del carril, su borde
     superior queda alineado con el borde inferior "natural" del panel: al
     inicio del carril sigue exactamente en el borde inferior del viewport
     (fuera de vista), y solo empieza a asomar, detrás del panel (ver
     z-index más abajo), a medida que Nosotros se retira y el scroll avanza.
     Sin position propio ni transform, #servicios sigue sin crear stacking
     context propio: el panel (position:sticky + z-index:2) se pinta
     siempre por encima, así que Servicios queda visualmente DETRÁS, nunca
     tapando a Nosotros. */
  .pin-active #servicios {
    margin-top: calc(-1 * var(--stage-runway));
    /* Sin radio ni sombra en Nosotros (ver .transition-stage__panel), ya
       no hay curva con la que el filete de .section--dark pueda competir:
       se deja intacto, igual que en Experiencia → Equipos. */
  }
}

/* ---------- Accesibilidad: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}