/* =========================================================================
   INGELOGSS — responsive.css
   Ajustes específicos de tablet/móvil sobre los componentes ya definidos
   en components.css. No redefine nada que no necesite cambiar: el
   comportamiento desktop (sin media query) sigue siendo el de
   components.css tal cual.

   PASO 6: responsive del Hero.
   CORRECCIÓN posterior: se agregó el colapso de .primary-nav a
   .menu-toggle en el mismo breakpoint "tablet", porque era la causa real
   de que el Hero (y el resto de la página) no ocupara el ancho completo
   del viewport por debajo de 1024px — ver comentario dentro del media
   query. El botón de menú (.menu-toggle) queda visible pero sin abrir
   .mobile-nav todavía: eso requiere JavaScript, fuera del alcance de
   este archivo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BREAKPOINTS ELEGIDOS (solo 2, los estrictamente necesarios para el Hero)

   - 1024px ("tablet"): ancho estándar de iPad en horizontal, un límite
     reconocible de dispositivo real, no arbitrario.

   - 640px ("mobile"): separa con margen los teléfonos reales (320–430px de
     ancho) de las tablets pequeñas en vertical (≥768px), que quedan
     cubiertas por el tramo "tablet" de abajo.

   NOTA: el Hero pasó de dos imágenes (principal + secundarias, layout de
   columnas) a una sola foto a pantalla completa — los ajustes de flex que
   repartían ese ancho entre ellas ya no aplican y se quitaron de aquí.
   Los dos breakpoints se conservan porque el techo de altura del Hero
   (.hero min-height) y el colapso de .primary-nav siguen necesitándolos.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   TABLET — hasta 1024px
   Se atenúa la relación de aspecto (más alta que ancha) reduciendo el
   techo de altura del Hero.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* CORRECCIÓN: causa raíz del bug de ancho reportado.
     .primary-nav tiene 8 enlaces en fila (display:flex, gap:2rem) sin
     wrap ni límite de ancho — su contenido mide bastante más de 800px
     (etiquetas + 7 gaps de 32px), y sumado al logo, el botón y el padding
     de .header-inner, supera los 1024px de viewport incluso en el
     breakpoint "tablet". Como .header-inner es un flex row normal (en
     flujo, no position:absolute), ese desborde empujaba el ancho de
     scroll de todo el <body> más allá del viewport real del dispositivo
     — y por eso el Hero (que sí calcula bien width:100%) terminaba
     mostrando solo una porción angosta de sí mismo dentro de una página
     más ancha de lo visible, con scroll horizontal. El Hero nunca fue el
     origen del problema: era el Header. */
  .primary-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero {
    /* Techo más bajo que en desktop (880px → 672px) para no combinar
       "más angosto" con "igual de alto", que es lo que disparaba el
       recorte vertical extremo. */
    min-height: clamp(30rem, 75vh, 42rem);
  }
}

/* -------------------------------------------------------------------------
   CÓMO TRABAJAMOS — hasta 899px
   Breakpoint propio (no 640/1024, los dos generales del sitio): la
   instrucción de esta sección pidió el corte exacto en 900px para pasar
   de curva horizontal a línea vertical simple. La onda (SVG, calculada
   por JS) se oculta por completo y .steps-list pasa de fila a columna;
   los círculos dejan de alternar alto/bajo (mismo top para los 4,
   centrados en un .step-node ya sin --steps-amp) y .steps-list::before
   dibuja la línea vertical recta detrás de ellos. El número grande se
   oculta (ya no cabe ni tiene sentido junto al texto en una columna
   angosta) y en su lugar aparece .step-label ("Paso 01"), que en
   desktop está oculto — la <ol> ya numera los pasos para lectores de
   pantalla, por eso .step-label es aria-hidden en el HTML.
   CORRECCIÓN: "max-width: 899px" a secas no disparaba a exactamente
   899px de viewport — verificado con matchMedia('(max-width: 899px)')
   dando false con innerWidth=899 en Chrome real (898px sí daba true).
   Chrome evalúa la media query contra su ancho interno con precisión
   subpíxel, que en 899px de CSS puede quedar fracciones por encima de
   899. El margen .98px es el mismo que usa Bootstrap para este problema
   conocido, no un número arbitrario. */
@media (max-width: 899.98px) {
  .steps-wave {
    display: none;
  }

  /* El margin-top que reserva espacio para el número "alto" por encima
     de .steps-track (ver components.css) es exclusivo de la ondulación
     de desktop — aquí el número grande está oculto (.step-number
     display:none, más abajo) y no hace falta ningún hueco extra. */
  .steps-track {
    margin-top: 0;
  }

  .steps-list {
    flex-direction: column;
    gap: var(--space-7);
  }

  /* Línea vertical, mismo color que la curva de desktop. left al centro
     real de .step-node (ver su width/height más abajo, 5rem — un valor
     propio de mobile, no --steps-node-h: ese ya incluye --steps-amp,
     que no aplica aquí). transform-origin:top + scaleY es lo que permite
     "dibujarla" de arriba hacia abajo con el mismo mecanismo
     .is-armed/.is-visible que ya mueve el resto de la animación, sin
     necesitar SVG en este ancho. */
  .steps-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.5rem;
    width: 2px;
    background: var(--wave);
    transform: translateX(-50%);
    transform-origin: top;
  }

  .steps-track.is-armed .steps-list::before {
    transform: translateX(-50%) scaleY(0);
  }

  .steps-track.is-armed.is-visible .steps-list::before {
    transform: translateX(-50%) scaleY(1);
    transition: transform 1.1s ease;
  }

  .step-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding-inline: 0;
  }

  .step-node {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
  }

  /* Ya no hay onda que seguir: el círculo queda centrado en .step-node,
     igual en los 4 pasos. */
  .step-item:nth-child(odd) .step-circle,
  .step-item:nth-child(even) .step-circle {
    top: 50%;
  }

  /* El número grande no cabe ni hace falta junto al texto en una
     columna angosta — lo reemplaza .step-label ("Paso 01"), ya en el
     lugar correcto del HTML (primer elemento de .step-content). */
  .step-number {
    display: none;
  }

  .step-label {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--eyebrow);
  }

  /* El texto ya no necesita el corrimiento vertical de la ondulación de
     desktop (--steps-amp) — .step-content sigue el flujo normal, a la
     misma altura para los 4 pasos. */
  .step-content {
    margin-top: 0;
    max-width: none;
  }

  .step-item:nth-child(even) .step-content {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------------------
   COTIZACIÓN — hasta 899px (mismo corte que Cómo trabajamos, ver arriba
   por qué .98px)
   Una columna: el texto (eyebrow, título, introducción, WhatsApp, horario)
   primero y la tarjeta con el formulario después — es el orden del DOM.
   ------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  #cotizacion {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-7);
  }
}

/* Opciones de servicio y fechas: 1 columna en móvil (la tarjeta ya es
   angosta). 599.98px por la misma razón de subpíxel. */
@media (max-width: 599.98px) {
  .service-options,
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   MOBILE — hasta 640px
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {

  .hero {
    /* Techo todavía más bajo (672px → 608px): evita que el Hero ocupe
       casi toda la pantalla en un teléfono, dejando ver que hay más
       contenido debajo. El piso (480px) se calculó para que el bloque de
       texto (eyebrow + h1 + subtítulo + botón, con la tipografía y los
       espaciados ya definidos en main.css) siempre quepa sin recortarse
       contra el overflow:hidden del Hero, aun en los anchos más
       angostos donde el titular se parte en más líneas. */
    min-height: clamp(30rem, 78vh, 38rem);
  }

  /* Maquinaria: sin mouse no hay hover, así que la asimetría del grid no
     tiene sentido forzarla aquí — una columna simple, y el overlay que en
     desktop se revela con hover/focus queda permanentemente visible (la
     información no puede depender de un toque). */
  .machinery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }

  /* :nth-child(n) iguala la especificidad de las reglas :nth-child(1..6)
     de components.css (que fijan cada grid-area con nombre) para poder
     reemplazarlas aquí — grid-area:auto solo no alcanzaba a ganarles. */
  .machinery-tile:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .machinery-tile {
    height: 18rem;
  }

  /* Los 5 cuadrados (aspect-ratio:1/1 en components.css) compiten con
     esta altura fija: el navegador terminaba angostando el tile en vez de
     estirarlo al ancho completo de la columna. Se anula aquí — en una
     sola columna todos son franjas de igual ancho, ninguno cuadrado. */
  .machinery-tile:nth-child(2),
  .machinery-tile:nth-child(3),
  .machinery-tile:nth-child(4),
  .machinery-tile:nth-child(5),
  .machinery-tile:nth-child(6) {
    aspect-ratio: auto;
  }

  .machinery-tile-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Obras: los dos paneles pasan de lado a lado a apilados a ancho
     completo. aspect-ratio ya no necesita override aquí — 4/3 es el mismo
     valor en desktop y mobile desde que las fotos reales (1.25–1.30:1)
     confirmaron que ese recuadro apaisado es el correcto en cualquier
     ancho (ver components.css, .obra-panel). */
  .obras-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   HEADER — wordmark oculto (hasta 649px)
   Ícono + wordmark + botón "Solicitar cotización" + hamburguesa solo caben
   con holgura desde 650px de ventana: medido con Chrome real y scrollbar
   clásica, con fuentes reales (wordmark de Arvo 195.6px, botón de Archivo
   202.8px) la holgura de ≥24px llega a los 646px (630px útiles), y con
   fuentes de respaldo a los 634px. Antes el corte era 480px y entre 481 y
   ~595px el header desbordaba la página (hasta 116px). Por debajo de 650px
   el enlace del logo se queda solo con el ícono, pero conserva
   aria-label="INGELOGSS — ir al inicio" (nombre accesible del enlace).
   ------------------------------------------------------------------------- */
@media (max-width: 649.98px) {
  .logo-wordmark {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   HEADER — muy angosto (hasta 480px)
   Logo + botón "Solicitar cotización" + hamburguesa compiten por poco
   espacio en pantallas de teléfono. El ícono base (5rem) se reduce a 3rem.
   El wordmark ya lo oculta la regla de arriba. .logo-link ya no tiene
   padding propio (sin caja de fondo que rellenar), así que no hace falta
   reducirlo aquí.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .logo-icon {
    width: 3rem;
    height: 3rem;
  }
}

/* -------------------------------------------------------------------------
   HEADER — teléfonos angostos (hasta 389px)
   Con el wordmark ya oculto (regla de arriba; el enlace del logo conserva
   aria-label="INGELOGSS — ir al inicio"), quedan ícono (48px) + botón
   "Solicitar cotización" (202.8px: texto 145.2 + padding 28+28) + menú
   (40px) + gaps y paddings de 24/16/12px = 366.8px de contenido. Con
   scrollbar clásica a 320px el ancho útil es ~305px: el menú terminaba en
   x≈343 (37px de desborde de toda la página); con 360px el menú quedaba a
   2px del borde derecho, sin su padding. 390px es el menor ancho donde el
   espaciado normal cabe completo, por eso el corte.
   Reducciones, en este orden:
   1) paddings laterales del header (24→12px), gap del header (16→8px), gap
      entre botón y menú (12→8px) y padding lateral del botón (28→12px);
   2) fuente del botón con clamp(0.75rem, 5vw - 2px, 0.875rem): 12px a
      280px, 14px desde 320px (el mínimo de 12px pedido; el texto no
      cambia). Solo con el paso 1 la holgura a 320px era de ~2px, y a
      300px y 280px no cabía (a 280px quedaban 8px de desborde: el
      tramo 280–319 es el que baja de 14px, hasta 12px).
   El botón "Solicitar cotización" queda en ~46px de alto. El header baja
   0.8px de alto (73.6→72.8: ahora manda el ícono de 48px, no el botón);
   --site-header-height lo mide js/header-scroll.js en vivo, así que el
   sticky y el desplazamiento se comportan igual.
   ------------------------------------------------------------------------- */
@media (max-width: 389.98px) {
  .header-inner {
    padding-inline: var(--space-3);
    gap: var(--space-2);
  }

  .header-actions {
    gap: var(--space-2);
  }

  .header-actions .btn-primary {
    padding-inline: var(--space-3);
    font-size: clamp(0.75rem, calc(5vw - 2px), 0.875rem);
  }
}

/* -------------------------------------------------------------------------
   HEADER — área táctil del botón de menú (hasta 1024px)
   40×40px → 44×44px, el mínimo táctil, en todo el rango en que el botón
   se ve (hasta 1024px, ahí entra la navegación de escritorio). Entre 900
   y 1024px es el único cambio del header a partir de 900px: el botón CTA
   se corre 4px a la izquierda porque el botón de menú crece 4px.
   En 481–1024px el ícono de 80px manda el alto del header y en 390–480px
   el botón CTA de ~49px, así que el alto del header no cambia.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* -------------------------------------------------------------------------
   HEADER — enlace "Correo" (webmail), solo desktop (desde 1025px)
   Verificado con Chromium real (Playwright, fuentes reales cargadas):
   ícono+texto cabe sin apretar desde 1280px (127px de holgura mínima
   medida contra el nav); entre 1025 y 1279px se muestra solo el ícono
   (aria-label + title ya dan el nombre accesible) para no competir con la
   navegación principal — a 1025px con texto completo el header desborda
   11px, medido en el mismo navegador.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .header-webmail-link {
    display: inline-flex;
  }
}

@media (min-width: 1025px) and (max-width: 1279.98px) {
  .header-webmail-link {
    padding-inline: var(--space-3);
  }
  .header-webmail-text {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   FOOTER — columnas y áreas táctiles
   Escritorio (≥900px): 3 columnas con la marca más ancha, ver components.css.
   Entre 700 y 899px: 2 columnas (la marca ocupa las dos). Por debajo de
   700px: 1 columna. Hasta 899px (táctil) los enlaces del Footer suben a 44px
   de alto.
   ------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-nav a,
  .footer-contact a {
    min-height: 2.75rem;
  }
}

@media (max-width: 699.98px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   FOOTER — escritorio grande (≥1440px): opción B, elegida por el usuario.
   El Footer completo (no solo su fondo) ocupa más ancho horizontal que el
   resto de las secciones a partir de aquí. Por debajo de 1440px el Footer
   sigue exactamente igual que hoy (el mecanismo compartido de
   components.css, sin ningún override).

   Ancho: se sustituye --max-width-content (1280px, el de Cotización/
   Aliados) por --footer-max-width (1600px) en la MISMA fórmula de
   padding-inline que ya usa `:is(#main-content, body) > [data-theme]` — no
   se inventa un mecanismo nuevo, solo se le da al Footer su propia "regla".
   Con esto el contenido pasa de ~1152px (igual que el resto) a ~1297px a
   1440px y ~1472px a 1920px: más ancho, pero con márgenes laterales
   (--space-section-x, 64px en este rango) que evitan que llegue al borde.

   Huecos: en vez de repartir el ancho extra como columnas más anchas que su
   propio contenido (lo que dejaba una franja vacía dentro de cada columna),
   las 3 columnas pasan a su ancho de contenido real (max-content) y
   justify-content:space-between reparte el sobrante COMO SEPARACIÓN entre
   ellas — la composición se siente intencional, no como texto estirado con
   aire de más. column-gap sigue de piso (nunca menos separación que hoy)
   por si algún texto de contacto llega a ser más largo en el futuro. */
@media (min-width: 1440px) {
  /* body > #footer[data-theme], no .site-footer ni #footer solo: la regla
     compartida `:is(#main-content, body) > [data-theme]` (components.css)
     fija padding-inline con especificidad (1,1,0) — el id dentro de :is()
     SÍ cuenta para la especificidad de :is(), aunque #main-content no sea
     el que matchea aquí (:is() toma la del argumento más específico de la
     lista, no la del que coincide). Un solo #footer da (1,0,0) y pierde.
     body + #footer + [data-theme] da (1,1,1): gana sin depender del orden
     de los <link> en <head>. Mismo patrón que #cotizacion, #maquinaria:
     un selector propio de la sección para lo que necesita distinto del
     resto — solo que aquí hace falta esta especificidad extra para poder
     pisar puntualmente el padding-inline compartido. */
  body > #footer[data-theme] {
    --footer-max-width: 1600px;
    padding-inline: calc(
      var(--space-section-x) + max(0px, (100% - var(--footer-max-width)) / 2)
    );
  }

  .footer-grid {
    grid-template-columns: max-content max-content max-content;
    justify-content: space-between;
    column-gap: var(--space-7);
  }
}

/* -------------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP — desde 900px
   Distancia a los bordes derecho e inferior: 16px → 24px (sin área segura:
   en escritorio no aplica). El padding-bottom del Footer y el botón salen
   de estas mismas variables (ver components.css).
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root {
    --wa-float-edge: 24px;
    --wa-float-bottom: var(--wa-float-edge);
  }
}

/* -------------------------------------------------------------------------
   CATÁLOGO COMPLETO (catalogocompleto.html)
   Cuadrícula: 4 columnas desde 1000px (base, components.css), 3 desde 700px y
   2 por debajo (mismo margen .98px que el resto de cortes, por el subpíxel).
   Barra de búsqueda y filtros por debajo de 700px: una sola columna y los
   filtros en UNA fila que se desplaza de lado dentro de la propia barra (sin
   ampliar la página): con 5 filtros en varias filas la barra sticky ocuparía
   ~40% de un teléfono. El padding de 4px arriba y abajo de la fila evita que el
   contorno de foco de los filtros quede recortado por su overflow.
   Cuadro de fechas: una columna hasta 640px (mismo corte "mobile" del sitio).
   ------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 699.98px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .catalog-card-body {
    padding: var(--space-3);
  }

  .catalog-card-name {
    font-size: 1.05rem;
  }

  #main-content > .catalog-toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "search"
      "filters"
      "count";
  }

  .catalog-filters {
    flex-wrap: nowrap;
    margin-block: -4px;
    margin-inline: calc(-1 * var(--space-section-x));
    padding: 4px var(--space-section-x);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog-filters::-webkit-scrollbar {
    display: none;
  }

  .catalog-chip {
    flex-shrink: 0;
  }
}

@media (max-width: 389.98px) {
  .catalog-card-name {
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  .date-dialog-body,
  .date-dialog-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Foto más apaisada: deja ver más del formulario sin desplazar el cuadro. */
  .date-dialog-media .catalog-card-media {
    aspect-ratio: 16 / 9;
  }
}

/* -------------------------------------------------------------------------
   SEGURIDAD — DESKTOP
   Si el viewport pasa de mobile/tablet a desktop con el menú móvil abierto
   (resize de ventana, rotación, etc.), evita que .mobile-nav y .primary-nav
   queden visibles a la vez: por encima de 1024px la navegación principal
   ya está visible (fuera de los media query de arriba).
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .mobile-nav {
    display: none !important;
  }
}