/* ─────────────────────────────────────────────────────────────────────────
   ARREGLOS RESPONSIVE (2026-09-04)
   Se carga LA ÚLTIMA a propósito: varias de estas reglas corrigen
   declaraciones de web-style.css / web-premium.css y necesitan ganar la
   cascada. Cada bloque dice qué se rompía y por qué, con las medidas reales
   tomadas a 386 px de ancho.
   ───────────────────────────────────────────────────────────────────────── */

/* ── El héroe recortaba su propio botón ────────────────────────────────────
   `.hero-section` tenía altura fija (60vh / min-height) y `overflow:hidden`.
   En móvil el contenido crece —el titular pasa a cuatro líneas— y no cabe:
   medido, el botón «VER PRODUCTOS» terminaba en y=465 dentro de una caja que
   acaba en 462, así que se veía cortado por la sección siguiente.
   La altura pasa a depender del contenido. */
@media (max-width: 768px) {
  /* La portada tiene su propio calculo de alto (`.home-fold`, en un <style> de
     la propia pagina, que por ir despues gana siempre): su holgura inferior se
     ajusta ALLI, en server/paginas.js. Esto cubre los heroes del resto. */
  .hero-section {
    /* `!important` a la fuerza: web-premium.css declara `height:55vh!important`
       para el héroe en móvil, y una altura FIJA con el contenido centrado no
       empuja cuando el texto crece — se sale por arriba y por abajo. Sin este
       `!important` la regla de abajo no se aplicaba y el arreglo de 2026-09-04
       nunca llegó a hacer efecto en los héroes del sitio. */
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding-bottom: 34px;
  }
  .hero-section .hero-content { padding-top: 40px; }
}

/* El boton del heroe entra con `heroFadeIn`, que arranca en opacity:0 y 30px
   mas abajo. Si esa animacion no llega a correr —animaciones pausadas, un
   navegador que las limita, un fallo de pintado— el boton principal de la
   portada se queda INVISIBLE y ademas desplazado. Un elemento no puede depender
   de una animacion para existir. */
@media (prefers-reduced-motion: reduce) {
  .hero-content h1,
  .hero-subtitle,
  .hero-ctas,
  .hero-ctas .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Las tarjetas de técnica se salían de la pantalla ──────────────────────
   La tarjeta es un grid de `1fr`, y un `1fr` NO puede encogerse por debajo del
   min-content de lo que contiene. Dentro hay un icono de 52 px y el título en
   una fila: con «TAMPOGRAFIA» (236 px a 1.8rem) la columna pedía 359 px en una
   tarjeta de 341 y el texto quedaba cortado a la derecha.
   Tres cosas: la columna puede encoger, el contenido también, y el titular se
   adapta al ancho en vez de imponerlo. */
@media (max-width: 1024px) {
  .tecnica-full-card { grid-template-columns: minmax(0, 1fr); }
}
.tecnica-full-content { min-width: 0; }
.tecnica-full-content h2 { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* !important porque web-premium.css fija 1.8rem con !important. */
  .tecnica-full-content h2 { font-size: clamp(1.1rem, 5.4vw, 1.8rem) !important; }
  .tecnica-full-content { padding: 20px 18px; }
  .tecnica-full-icon { width: 42px; height: 42px; flex: 0 0 42px; }
}

/* ── Los filtros de Trabajos ocupaban cuatro filas ─────────────────────────
   Seis chips que suman 849 px en 341 disponibles: con `flex-wrap:wrap` se
   apilaban en cuatro filas y 198 px de alto, empujando la galería fuera de la
   pantalla. Una sola fila que se desplaza con el dedo, igual que las
   categorías del configurador. La máscara de la derecha es la pista visual de
   que hay más: sin ella no se ve que aquello se puede arrastrar. */
@media (max-width: 768px) {
  .gallery-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .gallery-filters > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Hueco para los botones flotantes ──────────────────────────────────────
   WhatsApp y el carrito viven fijos en la esquina inferior (y 765→820 en una
   pantalla de 840). Sin holgura al final, el último bloque de cada página
   queda permanentemente debajo de ellos. */
@media (max-width: 768px) {
  body { padding-bottom: 76px; }
  /* Y que no se solapen entre ellos cuando el carrito crece con el importe. */
  .su-cart-fab { max-width: calc(100vw - 96px); }
  .su-cart-fab .su-cart-total { white-space: nowrap; }
}

/* ── Nada debe provocar desplazamiento horizontal ──────────────────────────
   Red de seguridad: una imagen o una tabla sin límite arrastra toda la página
   y se nota en cada scroll. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  img, video, svg, iframe, table { max-width: 100%; }
}