/* responsive.css — capa de mejoras propias del clon.
 *
 * NO reemplaza el CSS original: se carga en ultimo lugar y solo corrige los
 * puntos donde el original salta de golpe entre breakpoints (992 -> 768 -> 576)
 * o donde un tamano fijo grande no cabe en pantallas intermedias.
 * Todos los colores y familias tipograficas siguen siendo los tokens originales.
 */

/* --- 1. Blindaje contra desbordamiento horizontal --------------------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, td, th, a { overflow-wrap: break-word; }

/* Foco visible coherente en todo el sitio (el original no lo definia). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--btn-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.main-header a:focus-visible,
.main-header button:focus-visible {
  outline-color: var(--text-light);
}

/* Texto solo para lectores de pantalla y buscadores. Se usa para que el
   anchor text de cada enlace contenga el H1 de su destino sin alterar el
   diseno original. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto al contenido (accesibilidad y navegacion por teclado). */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  background: var(--btn-primary);
  color: var(--text-light);
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 0;
}

/* --- 2. Tipografia display fluida ------------------------------------ */
/* Criterio: solo se interpola donde el original tiene un problema real.
   Los H1 de servicio (52px), empresa (52->38->30), equipo y contacto
   (54->40) son titulos cortos con breakpoints propios que no desbordan:
   se dejan intactos para no perder fidelidad.
   Se intervienen dos casos:
   a) Home H1: 60 -> 34 (992) -> 26 (576) con una frase muy larga; los saltos
      son bruscos y en portatiles de 1024-1280 queda comprimida.
   b) .legal-hero-title: 52px fijos SIN ninguna media query en el original
      (defecto verificado en base.css); "POLITICA DE PRIVACIDAD" desborda en
      moviles estrechos.
   Los valores extremos coinciden con los del original en sus anchos de
   diseno, de modo que a >=1430px y a <=576px el render es identico. */

/* a) Home: fluido en escritorio, respetando el techo de 60px del original. */
@media (min-width: 993px) {
  .home-page .hero-section .hero-content h1 { font-size: clamp(34px, 4.2vw, 60px); }
  .home-page .hero-section .hero-content .hero-subtitle { font-size: clamp(16px, 1.25vw, 18px); }
}
/* a) Home: interpolacion continua entre los 34px de 992 y los 26px de 576. */
@media (max-width: 992px) {
  .home-page .hero-section .hero-content h1 { font-size: clamp(26px, 3.43vw, 34px); }
}

/* b) Titulo legal: unica escala fluida completa, el original no tiene ninguna. */
.legal-hero .legal-hero-title { font-size: clamp(26px, 3.6vw, 52px); }

/* --- 3. Escalon intermedio 993-1200px -------------------------------- */
/* El original mantiene el layout de escritorio completo hasta 992px, lo que
   comprime la cabecera y las rejillas de 3-4 columnas en portatiles. */
@media (max-width: 1200px) {
  .main-header .logo { margin-left: clamp(0px, 3vw, 62px); }
  .main-header .main-nav ul > li > a { padding-left: 12px; padding-right: 12px; font-size: 15px; }
  .main-header .main-nav ul > li > a:after { left: 12px; right: 12px; }
  .container { padding: 0 24px; }
}

@media (max-width: 1024px) {
  .home-page .services-section .services-grid { grid-template-columns: repeat(2, 1fr); }
  .home-page .stats-section .stats-grid { gap: 30px 24px; }
  .equipo-page .equipo-grid-section .team-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

/* --- 4. Tablet: 768px ------------------------------------------------- */
@media (max-width: 768px) {
  .main-header .logo { margin-left: 0; }
  /* Objetivos tactiles de 44px minimo en el menu movil. */
  .main-header .main-nav.is-open ul > li > a { min-height: 44px; display: flex; align-items: center; }
  .main-header .main-nav.is-open .has-dropdown .dropdown li a { min-height: 44px; display: flex; align-items: center; }
  .main-header .menu-toggle { min-width: 44px; min-height: 44px; }
  .main-header .main-nav.is-open .dropdown-toggle-btn { min-width: 44px; min-height: 44px; }
  .main-footer { height: auto; padding-bottom: 0; }
  .main-footer .social-links a { width: 44px; height: 44px; }
  .legal-content-section { padding: 56px 0; }
}

/* --- 5. Movil: 576px ------------------------------------------------- */
@media (max-width: 576px) {
  .container { padding: 0 18px; }
  .btn { padding: 13px 24px; min-height: 44px; }
  .main-footer .institutional-logos { gap: 20px 16px; }
  .legal-content-section .legal-card { padding: 32px 18px; }
  /* Tabla legal: scroll propio en lugar de romper el ancho de la pagina. */
  .legal-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal-table-scroll .legal-table { min-width: 520px; }
}

/* Tabla legal envuelta: el wrapper existe en todos los tamanos. */
.legal-table-scroll { max-width: 100%; overflow-x: auto; }

/* --- 6. Mapa embebido con proporcion estable ------------------------- */
/* La seccion real del original es .map-section (contacto.html). */
.contacto-page .map-section iframe { display: block; width: 100%; border: 0; }
@media (max-width: 576px) {
  .contacto-page .map-section iframe { height: 320px; }
}

/* --- 7. Respeto por prefers-reduced-motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* Sin JS las secciones animadas deben ser visibles igualmente. */
.no-js .animate-on-scroll { opacity: 1 !important; transform: none !important; }

/* --- 8. Impresion ---------------------------------------------------- */
@media print {
  .main-header, .main-footer, #cookie-banner-root, .skip-link { display: none !important; }
  body { color: #000; }
  .legal-content-section .legal-card { box-shadow: none; border: 0; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}