/* =====================================================================
   PRODYTEC S.A.C. — CORRECCIONES RESPONSIVE Y DE ROBUSTEZ
   fixes-responsive.css
   ---------------------------------------------------------------------
   Este archivo se carga DESPUÉS de styles.css. Concentra:
     - Cabecera y menú móvil (alturas coherentes, menú a pantalla).
     - Hero y tipografías que se desbordaban en pantallas pequeñas.
     - Fallback visual cuando una imagen no carga (evita el icono roto).

   NOTA: la franja de categorías (CONSTRUCCIÓN · METALMECÁNICA · ...)
   ya NO se parchea aquí. Su definición única y completa vive ahora en
   styles.css (selector .services-fast-link), para evitar duplicados.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) ENLACE "CONTÁCTANOS" DUPLICADO DEL MENÚ
   El enlace .nav-contact-mobile vivía dentro del menú de navegación como
   acceso a Contáctanos. Pero el botón recuadrado de la derecha
   (.home-contact dentro de .home-actions) ya cumple esa función: en
   escritorio se ve a la derecha, y en celular se reactiva a ancho
   completo al abrir el menú (ver sección del menú móvil más abajo).
   Por eso .nav-contact-mobile es redundante y lo ocultamos SIEMPRE,
   evitando que aparezca un segundo "Contáctanos" en cualquier pantalla.
   --------------------------------------------------------------------- */
.nav-contact-mobile {
  display: none !important;
}

/* ---------------------------------------------------------------------
   2) CABECERA Y MENÚ MÓVIL
   Hacemos que la altura del header y la posición del menú desplegable
   coincidan SIEMPRE (antes el menú se abría a 92px aunque el header
   midiera 86px, dejando un escalón). Usamos una variable única.
   --------------------------------------------------------------------- */
:root {
  --header-h-mobile: 88px;
}

@media (max-width: 1280px) {
  .home-header {
    height: var(--header-h-mobile) !important;
  }
  .home-header.scrolled {
    height: var(--header-h-mobile) !important;
  }
  /* El menú desplegable arranca justo donde termina el header */
  .home-nav {
    inset: var(--header-h-mobile) 0 auto !important;
    max-height: calc(100vh - var(--header-h-mobile));
    overflow-y: auto;
    background: rgba(0, 0, 80, .99) !important;
  }
}

@media (max-width: 680px) {
  :root { --header-h-mobile: 82px; }
}

/* Botón hamburguesa más visible y tappable */
@media (max-width: 1280px) {
  .home-header .menu-toggle {
    width: 46px;
    height: 46px;
  }
}

/* ---------------------------------------------------------------------
   3) HERO Y TÍTULOS EN MÓVIL
   Evita que títulos muy largos se corten contra los bordes y reduce
   un poco el tamaño en pantallas estrechas.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .home-hero h1,
  body.home-page .home-hero h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .home-hero-content,
  body.home-page .home-hero-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* La barra de búsqueda y el botón en columna para que no se aprieten */
  .home-hero-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .home-search { width: 100%; }
}

/* Evita scroll horizontal accidental en toda la web */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   4) FALLBACK PARA IMÁGENES QUE NO CARGAN
   Si una imagen da 404 (por ejemplo si el servidor aún no tiene los
   archivos), en vez del icono roto mostramos un fondo degradado limpio.
   Esto NO sustituye subir las imágenes, solo evita que se vea feo.
   --------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}
img.img-error {
  background: linear-gradient(135deg, #0a1a6a 0%, #1e3a8a 100%);
  min-height: 160px;
  object-fit: cover;
  position: relative;
}

/* =====================================================================
   FIX · BOTÓN "CONTÁCTANOS" EN EL MENÚ MÓVIL
   ---------------------------------------------------------------------
   PROBLEMA: el botón Contáctanos está en <div class="home-actions">,
   FUERA del <nav>. En móvil, .home-actions se oculta con display:none,
   y como el menú hamburguesa solo despliega el <nav>, el botón no se ve.

   SOLUCIÓN: cuando el menú está abierto (#main-nav.open), revelamos el
   botón Contáctanos anclado en la parte inferior de la pantalla, como
   una barra de acción. No depende del número de enlaces del menú, así
   que es estable. Solo aplica en móvil/tablet.
   ===================================================================== */
@media (max-width: 1280px) {
  #main-nav.open ~ .home-actions,
  .home-nav.open ~ .home-actions {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 80, .99);
    border-top: 1px solid rgba(255, 255, 255, .12);
    z-index: 999;
  }

  #main-nav.open ~ .home-actions .home-contact,
  .home-nav.open ~ .home-actions .home-contact {
    display: inline-flex !important;
    width: 100%;
    max-width: 460px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
  }
}