/* Revisión 15 — legibilidad y usabilidad en móvil.
   Kevin revisó el sitio publicado desde su teléfono y encontró 9 puntos
   concretos: textos de sección demasiado pequeños/delgados, el pie de
   página con "PROTOTIPO" y sin redes visibles, el bloque de WhatsApp/correo
   de contacto desordenado, "Seguridad · Eficiencia · Compromiso" desbordado,
   los contadores de la galería sobrando, el título "A cada desafío" sin
   contraste, el equipo animado sin respuesta táctil, y el menú móvil sin
   jerarquía ni datos de contacto. Capa aditiva y solo para pantallas
   angostas salvo donde se indica lo contrario (íconos de redes e insignia
   "PROTOTIPO", que se quitan en todo tamaño). */

/* ============================================================
   Insignias de redes/contacto: los logotipos reales de cada red que
   Kevin descargó (WhatsApp, Facebook, Instagram, TikTok, Gmail),
   guardados en assets/brand/social/. Se usan para enlazar a las
   cuentas propias de BEGA en el pie de página, en la sección de
   contacto y en el menú — el uso habitual de estos íconos en un sitio
   propio, no una recreación con fines de diseño.
   ============================================================ */
.social-link {
  display: inline-flex; align-items: center; gap: 9px;
}
.social-badge {
  display: block; flex: 0 0 auto;
  width: 22px; height: 22px;
  object-fit: contain;
}

/* --- Pie de página: ya no dice "PROTOTIPO"; los enlaces con insignia
   quedan más grandes y con más aire, fáciles de tocar. --- */
.footer-contact {
  gap: 14px 22px;
  font-size: 11px;
}
.footer-contact .social-link { padding: 4px 0; }
@media (max-width: 680px) {
  .footer-contact { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 12px; }
  .footer-bottom > span:nth-child(2) { display: block !important; width: 100%; }
}

/* --- Sección de contacto: WhatsApp/correo con la misma insignia. En
   escritorio siguen uno junto al otro; en móvil se apilan para que
   ninguno se recorte ni se superponga.
   Corrección real de contraste: esta lista vive sobre la fotografía
   nocturna del fondo de #contacto, pero su texto (y el número de
   WhatsApp en negrita) seguía en los colores oscuros pensados para un
   fondo claro — casi invisibles ahí. Se pasan a un tono claro,
   consistente con el resto del texto de esta sección oscura. --- */
.direct-contact .social-link { border-bottom: 0; padding-bottom: 0; }
.direct-contact a, .direct-contact a:visited { color: #d8e8f0; }
.direct-contact a:hover, .direct-contact a:focus-visible { color: var(--yellow); border-color: var(--yellow); }
.direct-contact b { color: #fff; font-weight: 600; }
@media (max-width: 680px) {
  .direct-contact { flex-direction: column; gap: 12px; font-size: 13px; }
  .direct-contact li { width: 100%; }
  .direct-contact .social-link { width: 100%; }
  .direct-contact .social-badge { width: 26px; height: 26px; }
  .direct-contact span span { word-break: break-word; }
}

/* ============================================================
   1) Encabezados e índices de sección: más grandes y legibles.
   ============================================================ */
@media (max-width: 900px) {
  .eyebrow, .small-intro { font-size: 11px; }
  .micro { font-size: 10px; }
  .section-top > .micro { font-size: 10.5px; }
}
@media (max-width: 680px) {
  .hero-kicker .eyebrow { font-size: 9.5px; letter-spacing: .7px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .6px; }
  .section-top > .micro { font-size: 10px; }
  .hero-values { font-size: 8.5px; }
  #equipos .equipment-top .micro { font-size: 9.5px; }
  #equipos .measurement .micro { font-size: 9px; }
}

/* ============================================================
   2) #equipos: texto secundario más grueso y con más contraste
   (se veía delgado y de bajo contraste en pantallas de teléfono).
   ============================================================ */
@media (max-width: 680px) {
  #equipos .equipment-item > p { color: #44535a; font-size: 13.5px; font-weight: 400; }
  #equipos .muted-heading,
  #equipos .measurement .micro,
  #equipos .equipment-top .micro { font-weight: 600; color: #3d4c53; }
  #equipos .equipment-tags span { font-weight: 600; }
}

/* ============================================================
   4) "Seguridad · Eficiencia · Compromiso" ya no se desborda:
   se permite que pase a una segunda línea y se centra.
   ============================================================ */
@media (max-width: 680px) {
  .values-line {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    row-gap: 10px;
    column-gap: 12px;
    font-size: clamp(15px, 4.4vw, 21px);
  }
  .values-line span:nth-child(even) { font-size: 16px; }

  /* Causa real del desborde: cada tarjeta de "La forma BEGA" entra con
     una animación (se desliza hacia arriba y aparece) atada a la
     posición del scroll — diseñada para pantallas altas, donde ese
     recorrido tiene espacio de sobra. En un teléfono, con la tarjeta
     apenas más baja que la pantalla, la última tarjeta puede quedar a
     mitad de esa animación (desplazada hacia abajo, semitransparente)
     justo cuando "Seguridad · Eficiencia · Compromiso" ya empezó,
     encimándose. En vez de ajustar el punto exacto donde eso deja de
     pasar, se muestra esta tarjeta siempre en su posición final en
     móvil — un cambio menor de estilo (aparece sin el pequeño
     deslizamiento) a cambio de que nunca se superponga con lo de abajo. */
  .visual-motion .principles article { transform: none; opacity: 1; }

  /* Causa real y de fondo del desborde: glass-industrial.css trae una
     regla sin acotar a pantalla ("gap:9%") que —por venir en un archivo
     que se carga después— ganaba por encima de la regla de este mismo
     diseño para móvil (gap:40px), sin importar el ancho de pantalla.
     En un contenedor tan alto como este, ese 9% se traducía en un
     espacio real de ~73px en vez de 40px, y esa diferencia era
     exactamente la que hacía que la tarjeta de "La forma BEGA" invadiera
     el espacio de "Seguridad · Eficiencia · Compromiso". Ya se acotó esa
     regla a escritorio en glass-industrial.css; esta línea de aquí
     refuerza el valor correcto en móvil por si otra hoja de estilos
     vuelve a pisarlo en el futuro. */
  .about-layout { gap: 40px; }
}

/* ============================================================
   5) Galería: se quitan "50 fotografías" y "Serie X de Y…"; se
   conservan solo las flechas para recorrer las series.
   ============================================================ */
#gallery-count, #gallery-series { display: none !important; }

/* ============================================================
   7) "A cada desafío, una solución.": se asegura contraste alto en
   móvil sin depender del punto exacto donde vaya el degradado de
   scroll (además de la corrección de fondo en ajustes-v12.css).
   ============================================================ */
@media (max-width: 680px) {
  .services-copy h2 { color: #f2f7f9; }
  .motion-ready:not(.simple-motion) .services .reveal-title {
    background: linear-gradient(90deg, #8fd6ff var(--reveal-pct, 100%), #cfe3ea var(--reveal-pct, 100%));
    background-clip: text; -webkit-background-clip: text;
  }
}

/* ============================================================
   6b) Equipo animado: superficie táctil dedicada (ver
   equipment-motion.js para el gesto de arrastrar el dedo).
   ============================================================ */
.equipment-rig { touch-action: none; }

/* ============================================================
   8) Textos pequeños del hero: más tamaño y peso.
   ============================================================ */
@media (max-width: 900px) {
  .hero-intro { font-size: 9px; }
}
@media (max-width: 680px) {
  .hero-intro { font-size: 8.5px; line-height: 1.9; }
  .hero-bottom { font-size: 8px; }
  .motion-toggle { font-size: 8.5px; }
  .machine-stat small { font-size: 7px; }
  .machine-stat strong { font-size: 34px; }
  .machine-stat > span { font-size: 14px; }
}

/* ============================================================
   8b) Menú móvil: panel lateral con fondo y borde por bloque,
   datos de contacto arriba, y una entrada escalonada ("bloques que
   caen uno por uno") en vez de aparecer todo de golpe.
   ============================================================ */
.nav-contact { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 680px) {
  .js .menu-button { position: relative; z-index: 41; }
  .js .site-header nav#main-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    order: 0;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 340px);
    height: 100svh;
    margin: 0; padding: 18px 18px 24px;
    background-color: #0c2a3c;
    background-image:
      linear-gradient(180deg, rgba(6,20,32,.90) 0%, rgba(6,20,32,.94) 55%, rgba(6,20,32,.98) 100%),
      url('assets/photos/nave-nocturna.jpeg');
    background-size: cover;
    background-position: center;
    border-left: 1px solid #24485c;
    box-shadow: -18px 0 45px rgba(4, 20, 32, .35);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    z-index: 40;
  }
  .js .site-header nav#main-nav.is-open { transform: translateX(0); }

  .js .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(5, 18, 28, 0);
    pointer-events: none;
    transition: background .32s ease;
    z-index: 39;
  }
  .js .nav-backdrop.is-open {
    background: rgba(5, 18, 28, .38);
    pointer-events: auto;
  }

  .site-header nav#main-nav .nav-contact {
    display: flex; flex-direction: column; gap: 12px;
    padding-bottom: 20px; margin-bottom: 16px;
    border-bottom: 1px solid #24485c;
  }
  .site-header nav#main-nav .nav-contact .social-link { color: #dcebf1; font-size: 12px; }
  .site-header nav#main-nav .nav-social { display: flex; gap: 10px; }
  .site-header nav#main-nav .nav-social .social-link span:last-child { display: none; }

  .site-header nav#main-nav a {
    color: #eaf3f7; font-size: 15px; padding: 15px 14px;
    background: #123b52; border: 1px solid #26506a; border-radius: 12px;
    margin-bottom: 10px;
    opacity: 0; transform: translateY(-14px);
  }
  .site-header nav#main-nav a:after { display: none; }
  .site-header nav#main-nav.is-open a {
    animation: begaNavBlockIn .38s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .site-header nav#main-nav.is-open a:nth-child(2) { animation-delay: .04s; }
  .site-header nav#main-nav.is-open a:nth-child(3) { animation-delay: .1s; }
  .site-header nav#main-nav.is-open a:nth-child(4) { animation-delay: .16s; }
  .site-header nav#main-nav.is-open a:nth-child(5) { animation-delay: .22s; }
  .site-header nav#main-nav.is-open a:nth-child(6) { animation-delay: .28s; }
  @keyframes begaNavBlockIn { to { opacity: 1; transform: translateY(0); } }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav#main-nav { transition: none; }
  .site-header nav#main-nav.is-open a { animation: none; opacity: 1; transform: none; }
}

@media print {
  .site-header nav#main-nav { position: static; transform: none; height: auto; }
}