/* =============================================================================
   base.css — Reset, variables, tipografía y utilidades
   Red de Guías Comerciales

   MOBILE PRIMERO (DECISIONES.md §0.5). Todo lo que está fuera de un `@media` es
   la versión de celular. Las mejoras entran solo con `min-width`.

   Los tres puntos de corte, y no hay más:

       sm   600 px   dos columnas en las grillas
       md   900 px   layout de escritorio: menú horizontal, sin barra inferior
       lg  1200 px   ancho máximo del contenedor

   Van escritos en números y no como variables porque las media queries no
   aceptan variables CSS.

   Los dos colores de cada guía (--primary y --accent) los inyecta la cabecera
   desde la base de datos. Acá van los valores por omisión, que se usan cuando
   no hay guía resuelta: el sitio central y la página de dominio desconocido.
   ============================================================================= */

/* ─── Tipografía: Nunito Sans variable, autoalojada (§0.5) ──────────────────
   Un solo archivo cubre los pesos de 200 a 1000. La ruta es relativa a este
   archivo, así anda igual en XAMPP —donde el sitio cuelga de un subdirectorio—
   que en producción, donde el docroot es `public/`. */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fuentes/nunito-sans-latin-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colores de guía. La cabecera los pisa con los de la fila de `sitios`. */
  --primary: #002A41;
  --accent:  #8DC63F;

  /* Fijos para toda la red (DECISIONES.md §1.4). No dependen de la guía. */
  --text:      #1A2430;
  --text-soft: #5A6673;
  --surface:   #FFFFFF;
  --muted:     #F4F6F7;
  --border:    #E2E7EA;

  /* Sobre el navy: el blanco puro solo para lo que tiene que gritar. */
  --sobre-primary:       rgba(255, 255, 255, .88);
  --sobre-primary-suave: rgba(255, 255, 255, .68);
  --linea-primary:       rgba(255, 255, 255, .16);

  --fuente: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;

  /* Escala de espaciado */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 2.5rem;
  --e8: 3.5rem;

  --radio:       .5rem;
  --radio-chico: .35rem;
  --radio-pastilla: 999px;
  --ancho-max: 1180px;

  /* Área táctil mínima (§0.5). No bajar de acá en nada que se toque. */
  --tactil: 44px;

  /* Alto de la barra inferior de celular. El `body` reserva ese espacio. */
  --barra: 60px;

  --sombra:       0 1px 2px rgba(26, 36, 48, .06), 0 4px 12px rgba(26, 36, 48, .04);
  --sombra-media: 0 2px 6px rgba(26, 36, 48, .08), 0 12px 24px rgba(26, 36, 48, .07);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Ver la nota de `body`: `clip`, nunca `hidden`. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;

  /* Red de seguridad de §0.5: la página no se desplaza nunca en horizontal.
     Va `clip` y no `hidden` a propósito: `hidden` convierte al elemento en un
     contenedor de desplazamiento y eso rompe la cabecera pegajosa. `clip`
     recorta sin crear scroll. */
  overflow-x: clip;

  /* Sin esto, la barra inferior tapa el final del pie en iPhone. */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
}

body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 var(--e3);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.65rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 var(--e4); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* `hidden` tiene que ganarle a cualquier `display` de una clase. Sin esto, un
   `<button class="boton" hidden>` se veía igual —la clase declara `display`, y
   eso le gana a la regla del navegador—, y los botones que solo sirven con
   JavaScript aparecían también sin él, sin hacer nada al tocarlos. */
[hidden] { display: none !important; }

/* Medidas fluidas: nada se sale del contenedor (§0.5). */
img, video, svg { max-width: 100%; }
img, video { height: auto; display: block; }

button { font: inherit; color: inherit; }

input, select, textarea {
  font: inherit;
  color: inherit;
  /* 16 px o más: por debajo, Safari en iOS hace zoom al enfocar (§0.5). */
  font-size: 1rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radio-chico);
  padding: .1em .35em;
}

strong { font-weight: 800; }

/* Un nombre de comercio largo y sin espacios no puede empujar la página. */
h1, h2, h3, p, a, li, td { overflow-wrap: break-word; }

/* Foco visible: se ve igual en toda la red, no depende del color de la guía. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* ─── Íconos ────────────────────────────────────────────────────────────────
   Salen de los dos sprites de `assets/img/`, usan `currentColor` y por lo tanto
   toman el color del texto que los rodea (ASSETS.md). */

.ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  vertical-align: -.2em;
}
.ico--chico  { width: 1rem;    height: 1rem; }
.ico--grande { width: 1.5rem;  height: 1.5rem; }
.ico--rubro  { width: 1.75rem; height: 1.75rem; color: var(--primary); }
.ico--marca  { width: 3.5rem;  height: 3.5rem; }

/* ─── Utilidades ───────────────────────────────────────────────────────────── */

/* Visible para lectores de pantalla, invisible en la pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto para lectores de pantalla y navegación por teclado. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: var(--e3) var(--e4);
  z-index: 100;
}
.saltar:focus { left: 0; }

/* De 900 px para arriba la barra inferior desaparece y el hueco sobra. */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}