/* ═══════════════════════════════════════════════════════════════════════
   Correcciones de accesibilidad y usabilidad comunes a todas las paginas.

   Va en archivo propio y no dentro de nav.css a proposito: nav.css se sirve
   con cache de 30 dias y cada pagina lo pide con un ?v= distinto, asi que
   tocarlo obliga a renumerar 36 archivos. Un nombre nuevo entra limpio.

   Todo lo de aqui es correctivo. No cambia colores de marca ni tipografias.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Salto al contenido ──────────────────────────────────────────────
   Quien navega con teclado tenia que pasar por la barra entera (entre 50 y
   137 elementos segun la pagina) antes de llegar al texto. Solo dos de las
   37 paginas tenian atajo, y las dos lo resolvian con onfocus en linea.
   Esta version es solo CSS: no depende de que el JS en linea se ejecute. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  background: var(--navy, #162154); color: #fff;
  font-family: var(--font-body, 'IBM Plex Sans'), system-ui, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(6, 10, 26, 0.55);
}
.skip-link:focus { left: 0; }
.skip-link:focus-visible { outline: 3px solid var(--gold, #F0A500); outline-offset: 2px; }

/* ── 2. Objetivos tactiles ──────────────────────────────────────────────
   Medido a 390px de ancho. El minimo recomendado es 44x44. Solo se corrigen
   los que se quedaban cortos; lo que ya cumplia no se toca. */

/* Pie: los iconos sociales median 40x40. En la home el tamano va en el
   atributo style, pero min-width y min-height mandan sobre width y height
   venga de donde venga, asi que una sola regla vale para las 39 paginas. */
.footer-social a { min-width: 44px; min-height: 44px; }

/* Pie: los dos enlaces legales median 30px de alto. */
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Home: las pastillas de ciudad median 38px. */
.area-pill { min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Home: "Read more" de las resenas venia con min-height de 24px. */
.rc-card-more { min-height: 44px; padding: 10px 0; }

/* Home: enlaces de tarjeta de servicio y de las pruebas, 30px de alto. */
.service-card-link,
.proof-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Instalacion: el enlace de cada estilo de puerta media 36px. */
.nd-style-cta { display: inline-flex; align-items: center; min-height: 44px; }

/* 404: los enlaces a paginas populares median 26px de alto. */
.links-row a { display: inline-flex; align-items: center; min-height: 44px; }

/* Guias: las migas de pan median 30px. */
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }

/* Gracias: el logo va dentro de un <a> en linea, asi que la zona pulsable
   era la altura de la linea (22px) y no la del logo. */
.thanks-logo-link { display: inline-block; }

/* Separacion entre objetivos contiguos: las fichas de servicio quedaban a
   7px una de otra y el minimo comodo es 8px. (.svc-chips ya estaba en 8px.) */
.service-chips { gap: 10px; }

/* ── 3. Movimiento reducido ─────────────────────────────────────────────
   No habia ni una regla en todo el sitio. Quien activa "reducir movimiento"
   en su sistema seguia recibiendo los desplazamientos, las apariciones y los
   contadores animados. Las animaciones no se cancelan, se acortan: hay un
   escuchador de animationend en la home que limpia las clases al terminar,
   y cancelarlas del todo lo dejaria a medias. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4. Desplazamiento suave hasta las anclas ───────────────────────────
   El sitio esta lleno de enlaces a #contact y a #faq y todos saltaban de
   golpe. nav.css ya reserva el hueco de la barra fija con scroll-margin-top,
   asi que el destino no queda tapado. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 5. Cursor en elementos pulsables ───────────────────────────────────
   Las flechas del carrusel de resenas no lo declaraban. */
.carousel-arrow { cursor: pointer; }

/* ── 6. Iconos de las paginas de ciudad ─────────────────────────────────
   Sustituyen a los emojis que habia antes. El emoji lo dibuja el sistema
   operativo, asi que cambiaba de forma y de color entre Windows, Android e
   iOS, y los lectores de pantalla lo leian en voz alta como palabra. */
.panel-icon { line-height: 0; color: var(--navy, #162154); }
.panel-icon svg { width: 56px; height: 56px; display: block; }
@media (max-width: 768px) { .panel-icon svg { width: 44px; height: 44px; } }