/* ARID — ajustes para pantallas chicas.
   El diseño base ya usa flex-wrap y anchos máximos, así que esto sólo
   corrige la escala tipográfica, los márgenes y la tabla en móvil. */

html { scroll-behavior: smooth; }
img { max-width: 100%; }
*:focus-visible { outline: 2px solid #FC7509; outline-offset: 3px; }

/* la matriz de planes no se aplasta: se desliza dentro de su caja */
table { -webkit-overflow-scrolling: touch; }

@media (max-width: 1000px) {
  h1 { font-size: 52px !important; }
  h2 { font-size: 36px !important; }
}

@media (max-width: 760px) {
  /* encabezado: el menú se va, queda el logo y el botón */
  header nav { display: none !important; }
  header > div { padding: 14px 20px !important; gap: 12px !important; }

  /* portada */
  section#inicio { min-height: 620px !important; }
  section#inicio > div:last-child { padding: 40px 20px 200px !important; }
  h1 { font-size: 34px !important; line-height: 1.06 !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 21px !important; }

  /* márgenes generales de sección */
  section > div { padding-left: 20px !important; padding-right: 20px !important; }
  section > div[style*="padding: 92px"],
  section > div[style*="padding: 96px"],
  section > div[style*="padding: 100px"] { padding-top: 48px !important; padding-bottom: 52px !important; }

  /* cuerpo de texto un punto menor */
  p { font-size: 15px !important; }

  /* las cintas de clientes, más bajas */
  .logo-cinta { height: 38px !important; max-width: 150px !important; }
  .riel { gap: 44px !important; }

  /* el panel oscuro de servicios respira menos */
  section#servicios > div > div > div:last-child { padding: 28px 22px 30px !important; min-height: 0 !important; }

  /* geoglifos y sol: fuera, en móvil sólo estorban */
  section#inicio img[alt=""] { display: none !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 25px !important; }
}

/* en pantalla táctil no hay cursor: el foco de las tarjetas no aplica */
@media (hover: none) {
  .foco { display: none; }
  .cinta:hover .riel { animation-play-state: running; }
}

@media print {
  .par, .tex, .cinta, .barra-prog { display: none !important; }
  body { background: #fff; color: #000; }
}