/* Base común de todas las webs. Se carga SIEMPRE y antes del tema del cliente.
   Aquí vive lo funcional: lo que no depende del gusto de cada diseño y que
   mejora la web de todos los clientes a la vez (contacto siempre a la mano en
   móvil, áreas táctiles, foco visible, accesibilidad, reducción de movimiento).
   No define colores ni tipografías: usa las variables del tema
   (--color-*, --fuente-*; ver .claude/skills/design/referencias/contrato-css.md).
   El tema (tema.css) se carga después y puede retocar lo visual, pero los
   conmutadores móvil/escritorio de abajo llevan más especificidad a propósito
   para que un tema no los rompa sin querer. Punto de corte: 860 px. */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;      /* encabezado de una línea */
  scroll-padding-bottom: 5.5rem;   /* barra fija de contacto */
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem;            /* 17 px: mínimo legible en móvil */
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }

.contenedor {
  width: 100%; margin: 0 auto;
  max-width: var(--ancho, 1080px);
  padding: 0 1.25rem;
}

/* Foco visible con teclado (anillo ≥ 3:1 sobre el fondo y sobre el pie) */
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 4px; }
.pie :focus-visible { outline-color: var(--color-foco-pie); }

/* Aviso de sitio de demostración (solo clientes de prueba, "demo": true en la ficha) */
.aviso-demo {
  margin: 0; padding: 0.6rem 1rem; text-align: center;
  background: #1d2733; color: #ffffff; font-size: 1rem; font-weight: 600; line-height: 1.4;
}

/* Texto solo para lectores de pantalla y enlace para saltar al contenido */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 20;
  padding: 0.7rem 1.1rem;
  background: var(--color-principal); color: var(--color-boton-texto);
}
.saltar:focus { top: 0.75rem; color: var(--color-boton-texto); }

/* Encabezado: en móvil, una sola línea (nombre y enlace a Contacto) */
.encabezado {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-fondo);
}
.encabezado__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.encabezado__contacto {
  display: flex; align-items: center; flex: none;
  min-height: 44px; font-weight: 600;
}
.menu ul {
  display: flex; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.menu ul::-webkit-scrollbar { display: none; }
.menu a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Enlace de verificación de la cédula: área táctil de 44 px */
.cedula a { display: inline-flex; align-items: center; min-height: 44px; }

/* Botones: áreas táctiles amplias */
.boton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; cursor: pointer;
  background: var(--color-principal); color: var(--color-boton-texto);
  border: 0; font: inherit; font-weight: 600; text-decoration: none;
}
/* El color de un enlace al pasar el cursor nunca debe pisar el texto del botón ni el del pie */
.boton:hover, .saltar:hover { color: var(--color-boton-texto); }
.pie a:hover { color: var(--color-pie-texto); }

/* Preguntas frecuentes y formulario: objetivos táctiles */
.pregunta summary { min-height: 48px; cursor: pointer; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; font: inherit; color: var(--color-texto);
}

/* Barra fija de contacto (solo móvil): WhatsApp a un toque desde cualquier punto */
.barra-contacto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-fondo);
  border-top: 1px solid var(--color-texto-suave);
}
.barra-contacto .boton { display: flex; width: 100%; }

/* Pie: texto y enlaces con las variables del pie; espacio para que la barra no tape el final */
.pie { background: var(--color-pie-fondo); color: var(--color-pie-texto); }
.pie a { color: var(--color-pie-texto); }
.pie::after { content: ""; display: block; height: 3rem; }

/* Línea de urgencias: los números son enlaces tel: con área táctil de 44 px sin estirar el interlineado */
.pie__urgencias a { padding: 0.85rem 0.2rem; white-space: nowrap; }

/* Móvil (menos de 860 px): encabezado de una línea, sin menú completo */
@media (max-width: 859px) {
  .encabezado .menu { display: none; }
  .encabezado .marca span { display: none; }
}

/* Escritorio (860 px o más): menú completo; ya no hace falta el enlace ni la barra */
@media (min-width: 860px) {
  html { scroll-padding-top: 5rem; scroll-padding-bottom: 0; }
  .encabezado .encabezado__contacto, body .barra-contacto { display: none; }
  .pie::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}