/* ==========================================================================
   SEEBEK · base.css
   --------------------------------------------------------------------------
   Reset liviano, tipografía y layout base.
   Acá vive todo lo que aplica a las etiquetas HTML "crudas" (h1, p, a, img…)
   y las utilidades de maquetación (contenedor, secciones, grillas).

   Los componentes con nombre propio (header, footer, botones, fichas,
   formulario) están en components.css.
   ========================================================================== */


/* ==========================================================================
   1. RESET
   ========================================================================== */

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

/* Se anulan los márgenes que el navegador pone por defecto: el espaciado
   lo define el sistema, no el navegador. */
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

/* Desplazamiento suave al usar los enlaces internos (#ancla). */
html {
  scroll-behavior: smooth;
  /* Deja aire arriba al saltar a un ancla, para que no quede tapada. */
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}


/* ==========================================================================
   2. PÁGINA
   ========================================================================== */

body {
  background-color: var(--blanco-tecnico);
  color: var(--grafito);
  font-family: var(--font-texto);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  /* Evita el scroll horizontal en celulares. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El <main> crece para empujar el footer al fondo en páginas cortas. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}


/* ==========================================================================
   3. TIPOGRAFÍA
   --------------------------------------------------------------------------
   Jerarquía exacta del sistema de identidad. No inventar tamaños nuevos:
   si hace falta un texto más chico o más grande, usar una de estas clases.
   ========================================================================== */

h1, .h1 {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;   /* −1,5% */
  color: var(--negro);
  text-wrap: balance;         /* evita que quede una palabra sola en la última línea */
}

h2, .h2 {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--negro);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--negro);
}

p {
  max-width: var(--medida-texto);
}

/* Bajada: el párrafo grande que va debajo de un título. */
.bajada {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.6;
  color: var(--gris-acero);
  max-width: 56ch;
}

/* Kicker: el rótulo chiquito en mono que anuncia la sección.
   Sobre fondo claro va en rojo: es uno de los pocos lugares donde el rojo
   aparece como texto. */
.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: var(--esp-md);
}

/* IMPORTANTE — REGLA DE CONTRASTE
   Sobre fondo negro el rojo NO se usa como texto: la combinación da 3,26:1
   y el mínimo accesible para texto es 4,5:1. Además, el sistema de identidad
   reserva el rojo sobre negro para el isotipo.
   Solución: el texto del kicker pasa a gris niebla (8,76:1) y el rojo se
   mantiene como señal en un cuadradito al lado, que es un elemento gráfico
   y no necesita contraste de texto. */
.hero .kicker,
.seccion--negra .kicker,
.franja .kicker {
  color: var(--gris-niebla);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero .kicker::before,
.seccion--negra .kicker::before,
.franja .kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--rojo);
  flex-shrink: 0;
}

/* Nota, dato o unidad. Siempre en mono, siempre gris acero. */
.nota,
.dato {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-acero);
}

/* Texto secundario dentro de un bloque de cuerpo. */
.texto-secundario {
  color: var(--gris-acero);
}

/* Utilidad para usar la tipográfica mono en cualquier elemento. */
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

strong, b {
  font-weight: 600;
  color: var(--negro);
}


/* ==========================================================================
   4. ENLACES Y FOCO
   ========================================================================== */

a {
  color: var(--azul-instrumento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transicion);
}

a:hover {
  color: var(--rojo);
}

/* Foco visible para quien navega con teclado. NO borrar: es requisito
   de accesibilidad. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-separacion);
}

/* Enlace "saltar al contenido": invisible hasta que se lo enfoca con Tab. */
.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--rojo);
  color: var(--blanco-puro);
  padding: var(--esp-md) var(--esp-lg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
}

.saltar-contenido:focus {
  left: 0;
  color: var(--blanco-puro);
}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

/* Contenedor central de todas las secciones. */
.contenedor {
  width: 100%;
  max-width: calc(var(--max-ancho) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sección estándar: aire arriba y abajo. */
.seccion {
  padding-block: var(--esp-seccion);
}

/* Variantes de fondo de sección. */
.seccion--clara  { background-color: var(--blanco-tecnico); }
.seccion--blanca { background-color: var(--blanco-puro); }

/* Sección oscura: invierte los colores de texto. */
.seccion--negra {
  background-color: var(--negro);
  color: var(--gris-niebla);
}

.seccion--negra h1,
.seccion--negra h2,
.seccion--negra h3 {
  color: var(--blanco-puro);
}

.seccion--negra .bajada,
.seccion--negra p {
  color: var(--gris-niebla);
}

/* Encabezado de sección: kicker + título + bajada. */
.seccion__encabezado {
  margin-bottom: var(--esp-xl);
  max-width: 60ch;
}

.seccion__encabezado .bajada {
  margin-top: var(--esp-md);
}


/* --- Regla horizontal fina, el separador del sistema --------------------- */
.regla {
  border: 0;
  border-top: 1px solid var(--gris-linea);
  margin-block: var(--esp-xl);
}

.seccion--negra .regla {
  border-top-color: var(--linea-sobre-negro);
}

/* Filete rojo corto: la "firma" gráfica de la marca. Decorativo, se oculta
   a los lectores de pantalla desde el HTML con aria-hidden. */
.filete {
  width: 56px;
  height: 3px;
  background-color: var(--rojo);
  margin-bottom: var(--esp-lg);
}


/* --- Grillas ------------------------------------------------------------- */

/* Grilla automática. Las tarjetas se acomodan solas: si mañana se suma una
   tercera línea de producto, entra sin tocar el CSS. */
.grilla {
  display: grid;
  gap: var(--esp-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grilla--2 { grid-template-columns: repeat(2, 1fr); }
  .grilla--3 { grid-template-columns: repeat(2, 1fr); }
  .grilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grilla--3 { grid-template-columns: repeat(3, 1fr); }
  .grilla--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Grilla de dos columnas desparejas: texto a la izquierda, imagen a la
   derecha (se apilan en celular). */
.grilla--texto-imagen {
  display: grid;
  gap: var(--esp-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .grilla--texto-imagen {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-2xl);
  }
}

/* Variante: las dos columnas se alinean arriba en lugar de al centro.
   Se usa cuando tienen alturas muy distintas (por ejemplo, un formulario
   largo al lado de una lista corta de datos). */
.grilla--arriba { align-items: start; }


/* --- Utilidades ---------------------------------------------------------- */

/* Oculta visualmente pero sigue estando para los lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oculto { display: none !important; }

.centrado-texto { text-align: center; }

.sin-margen-max { max-width: none; }

/* Espaciadores puntuales. */
.mt-md { margin-top: var(--esp-md); }
.mt-lg { margin-top: var(--esp-lg); }
.mt-xl { margin-top: var(--esp-xl); }