/*
 * base.css — reset mínimo + tipografía base + @font-face.
 * Orden de cascada (plan-segmentacion.md §7): bootstrap.css → tokens.css → base.css →
 * componentes/*.css → utilidades.css.
 */

/* Raleway servida local, sin CDN (CLAUDE.md §3). Formatos: woff (navegadores modernos) +
   ttf (fallback). eot/svg de la fuente original no se vendorizan: sin soporte real hoy
   (IE/iOS viejo), no aportan nada a este proyecto. */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway/Raleway-v2-ExtraLight.woff') format('woff'),
       url('../fonts/raleway/Raleway-v2-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway/Raleway-v2-Regular.woff') format('woff'),
       url('../fonts/raleway/Raleway-v2-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway/Raleway-v2-SemiBold.woff') format('woff'),
       url('../fonts/raleway/Raleway-v2-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-raleway);
  font-weight: 400;
  color: var(--color-negro-texto);
  background-color: #FFFFFF;
  margin: 0;
}

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

a {
  text-decoration: none;
  color: inherit;
}

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

/* Contenedor de referencia — un solo mecanismo para todo el sitio (CLAUDE.md: "un solo dueño"
   por mecanismo). Consolidado 2026-08-18 (_dev/refactor-bootstrap-grid.md): ya no es un
   contenedor inventado desde cero con su propio max-width/margin/padding — vive SIEMPRE junto a
   `.container-fluid` de Bootstrap en el markup (`class="container-fluid gyo-container"`), que ya
   resuelve `width:100%`, `margin-inline:auto` y el padding vía `--bs-gutter-x`. `.gyo-container`
   solo aporta las dos cosas que Bootstrap no puede adivinar: el max-width del ancho de referencia
   del PDF y el valor exacto del gutter (94px por lado = 188px de --bs-gutter-x). Un solo dueño
   del ancho: Bootstrap, con overrides — no un cálculo paralelo. Se sigue usando `.row`/`.col-*`
   de Bootstrap dentro de él. */
.gyo-container {
  --bs-gutter-x: calc(var(--gyo-margen-contenido-1) * 2);
  max-width: var(--gyo-container-max-width);
}

/* Fase 3 (2026-08-18) — corrección de base, no un parche por grilla: con
   `--gyo-margen-contenido-1` ahora responsive (tokens.css: 32px a 768px, 20px a 375px), el margen
   negativo de cualquier `.row` con `--bs-gutter-x` propio (mitad del gutter) puede pasar a ser
   MAYOR que ese margen — el `row` desborda el container por el excedente. Encontrado primero en
   `.gyo-contacto-form-grid` (262px de gutter) y de nuevo en `.gyo-seccion-ultimos-proyectos__grid`
   (50px, bleed de 5px por lado a 375px) — mismo bug, mismo origen, así que se corrige acá una
   sola vez en vez de repetirlo por cada grilla nueva. Toda grilla de columnas del sitio ya apila
   a 1 sola columna por debajo de `lg` (`col-12`, o su propio `flex-direction:column`) — ahí el
   gutter horizontal no separa nada (no hay columna vecina), así que ponerlo en 0 no cambia ningún
   layout, solo evita el desborde. Selector con más especificidad que el `--bs-gutter-x` propio de
   cualquier grilla individual (2 clases vs. 1) — gana sin depender del orden de carga de los
   archivos, así que una grilla nueva que declare su propio `--bs-gutter-x` en el ancho de
   referencia queda protegida acá automáticamente, sin tener que acordarse de repetir el fix. */
@media (max-width: 991.98px) {
  .gyo-container .row {
    --bs-gutter-x: 0;
  }
}

/* Bloque E (2026-08-19): foco de teclado. Sin dato del PDF (no hay estados dibujados,
   puntos-abiertos.md Bloque E, fila "Hover / foco") — criterio propio, no vinculante al píxel.
   Un solo mecanismo para todo el sitio, acá y no repetido por componente: anillo de foco vía
   `:focus-visible` (se dispara solo con teclado, no con click de mouse, a diferencia de `:focus`)
   con el acento de marca ya definido en la paleta (CLAUDE.md §3) — visible tanto sobre fondos
   beige como sobre los fondos oscuros de header/footer. `outline` en vez de `border`/`box-shadow`:
   no reflowea nada y no queda recortado por el `overflow:hidden` que traen algunos contenedores
   (ej. `.gyo-tarjeta-proyecto`), porque el outline es del propio elemento con foco, no de un hijo
   suyo. Cubre todos los elementos realmente enfocables del sitio hoy: links, botones, chips de
   filtro y los 5 campos del formulario ("foco de campo", misma fila de la tabla). Tarjetas de
   equipo y thumbnails de galería quedan afuera a propósito: no son focables (no son `<a>`/
   `<button>`), porque su interacción sigue sin destino definido (puntos-abiertos.md, "Video de
   Equipo"/galería sin lightbox) — no se inventa un `tabindex` para un destino que no existe. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-cafe-claro);
  outline-offset: 3px;
}