/* ==========================================================================
   NV Group — base.css
   Reset, variables de diseño, tipografía y utilidades.
   Se carga PRIMERO.

   REGLA QUE NO SE ROMPE: este archivo nunca esconde contenido.
   Si el JavaScript falla o GSAP no carga, el sitio se tiene que leer entero.
   Lo único que esconde es js/animacion.js, y solo después de confirmar
   que GSAP está vivo.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

button { background: none; border: 0; cursor: pointer; }

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

/* --- Variables ------------------------------------------------------------ */

:root {
  /* Color. Fondo off-white plano, sin degradados de color. */
  --fondo:          #faf9f7;
  --fondo-hueco:    #f2f1ee;   /* bloques que se hunden apenas del fondo */
  --fondo-oscuro:   #111112;   /* secciones invertidas */
  --tinta:          #1d1d1f;   /* casi negro, no negro puro */
  --tinta-suave:    #6e6e73;   /* texto secundario */
  --tinta-tenue:    #86868b;   /* etiquetas, metadatos */
  --linea:          rgba(0, 0, 0, 0.10);
  --linea-tenue:    rgba(0, 0, 0, 0.06);
  --acento:         #0066cc;   /* azul de enlace, estilo Apple */
  --acento-vivo:    #0071e3;
  --blanco:         #ffffff;

  /* Sobre fondo oscuro */
  --tinta-inv:       #f5f5f7;
  --tinta-inv-suave: #a1a1a6;
  --linea-inv:       rgba(255, 255, 255, 0.14);

  /* Tipografía del sistema: SF Pro real en Mac y iPhone, sin descargar nada. */
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-numero: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica fluida.
     El hero llega hasta 4.5rem (72px): más grande que eso, el título se parte
     en demasiados renglones y empuja los botones abajo del pliegue. */
  --t-hero:    clamp(2.5rem, 5.4vw, 4.5rem);
  --t-titulo:  clamp(1.875rem, 3.9vw, 3rem);
  --t-sub:     clamp(1.375rem, 2.4vw, 1.875rem);
  --t-guia:    clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-cuerpo:  1.0625rem;
  --t-chico:   0.9375rem;
  --t-micro:   0.8125rem;

  /* Medidas */
  --ancho:        1240px;
  --ancho-texto:  46rem;
  --gutter:       clamp(1.25rem, 5vw, 4rem);
  --seccion-y:    clamp(5rem, 12vh, 9.5rem);
  --radio:        10px;   /* rectangular con esquina apenas rota, no pastilla */
  --radio-chico:  8px;

  /* Movimiento */
  --curva:      cubic-bezier(0.22, 1, 0.36, 1);
  --curva-neta: cubic-bezier(0.4, 0, 0.2, 1);
  --vel:        0.4s;
}

/* --- Cuerpo --------------------------------------------------------------- */

body {
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* --- Tipografía ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-sub); letter-spacing: -0.024em; line-height: 1.16; }

p { text-wrap: pretty; }

strong { font-weight: 600; }

/* Etiqueta de sección: el textito chico en mayúsculas de arriba */
.etiqueta {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 1.25rem;
}

.guia {
  font-size: var(--t-guia);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: var(--ancho-texto);
}

.destacado {
  font-size: var(--t-sub);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--tinta);
  max-width: 34ch;
}

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.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;
}

/* Marca los datos que todavía no existen. En producción no debería
   quedar ninguno visible: se completan desde /admin. */
.completar {
  background: rgba(255, 190, 0, 0.18);
  border-bottom: 1px dashed rgba(160, 110, 0, 0.5);
  padding: 0 0.2em;
  border-radius: 3px;
}

/* --- Foco visible (accesibilidad) ----------------------------------------- */

:focus-visible {
  outline: 2px solid var(--acento-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Selección ------------------------------------------------------------ */

::selection {
  background: var(--tinta);
  color: var(--fondo);
}

/* --- Respeto por quien pidió menos movimiento ------------------------------
   Apaga TODA la animación y deja todo visible y quieto.
   La clase .sin-movimiento la pone js/animacion.js sobre <html>.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.sin-movimiento [data-anim],
.sin-movimiento .anim,
.sin-movimiento .cifra {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Las líneas de las cifras se dibujan con un transform. Con "menos
   movimiento" la regla de arriba las dejaría en scaleX(0), o sea invisibles:
   acá se las repone dibujadas, sin animación. */
.sin-movimiento .cifras--destacadas .cifra::before {
  transform: scaleX(1) !important;
  transition: none !important;
}