/* ==========================================================================
   TECVIA · base.css
   Reset, tipografía y primitivas. Sin estilos de sección.

   Convención de nombres para evitar que los selectores se cancelen entre sí:
   - .u-*      utilidades (una sola propiedad, no se sobrescriben)
   - .l-*      layout / contenedores
   - .c-*      componentes (botón, chip, tarjeta)
   - .s-*      secciones (viven en sections.css)
   Los márgenes verticales SIEMPRE los pone el contenedor padre, nunca el hijo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El offset del nav sticky para los anclas de #seccion */
  scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
}

/* scroll-margin-top además del scroll-padding del html: el padding no aplica
   cuando el salto lo hace Lenis o cuando se entra directo con #ancla. */
section[id],
main[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--sp-5));
}

/* Cuando Lenis está activo maneja él los anclas: si dejamos el smooth nativo
   los dos pelean y el salto se siente doble. */
html.lenis {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

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

img,
video {
  height: auto;
}

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

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

/* touch-action: manipulation quita el retraso de 300ms del doble-tap.
   El tap-highlight lo ponemos nosotros en vez de dejar el azul del sistema,
   que se ve mal sobre grafito. */
a,
button,
input,
select,
textarea,
[role='button'] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--c-copper-dim);
}

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

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

/* --------------------------------------------------------------------------
   2. Foco — visible siempre, en los dos temas. No se quita nunca.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Quitamos el outline por defecto sólo cuando NO es navegación por teclado */
:focus:not(:focus-visible) {
  outline: none;
}

.u-skip {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-copper);
  color: var(--c-btn-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transform: translateY(-150%);
  transition: transform var(--d-micro) var(--ease-out);
}

.u-skip:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */

.t-display-xl,
.t-display-l,
.t-display-s {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.t-display-xl {
  font-size: var(--fs-display-xl);
}
.t-display-l {
  font-size: var(--fs-display-l);
}
.t-display-s {
  font-size: var(--fs-display-s);
}

.t-title {
  font-family: var(--font-body);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}

.t-lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: var(--w-prose);
  text-wrap: pretty;
}

.t-body {
  color: var(--c-text-muted);
  max-width: var(--w-prose);
  text-wrap: pretty;
}

.t-small {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* La voz de "etiqueta impresa": eyebrows, numeración, datos */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-mono);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.t-data {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  font-weight: 400;
  line-height: var(--lh-mono);
  font-variant-numeric: tabular-nums;
}

.t-copper {
  color: var(--c-copper);
}
.t-signal {
  color: var(--c-signal);
}
.t-strong {
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* 48px de alto real: por encima del mínimo de 44×44 para touch */
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  cursor: pointer;
  border: var(--bw-hair) solid transparent;
  transition:
    transform var(--d-press) var(--ease-out),
    background-color var(--d-micro) ease,
    border-color var(--d-micro) ease,
    color var(--d-micro) ease;
}

.c-btn:active {
  /* Feedback de presión. Emil: la UI tiene que sentirse escuchando. */
  transform: scale(0.97);
}

.c-btn--primary {
  background-color: var(--c-copper);
  color: var(--c-btn-fg);
  border-color: var(--c-copper);
}

.c-btn--ghost {
  background-color: transparent;
  color: var(--c-text);
  border-color: var(--c-line-strong);
}

.c-btn--full {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .c-btn--primary:hover {
    background-color: var(--c-copper-hi);
    border-color: var(--c-copper-hi);
  }
  .c-btn--ghost:hover {
    border-color: var(--c-copper);
    color: var(--c-copper);
  }
}

/* Flecha del botón — se mueve en Fase 3 */
.c-btn__arrow {
  display: inline-block;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Chips y estado
   -------------------------------------------------------------------------- */

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* El LED de enlace. Verde SÓLO aquí: 8px, nunca como relleno de área. */
.c-led {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--c-signal);
  box-shadow: 0 0 0 3px var(--c-signal-dim);
}

/* --------------------------------------------------------------------------
   6. Regla horizontal
   -------------------------------------------------------------------------- */

.c-rule {
  height: var(--bw-hair);
  background-color: var(--c-line);
  border: none;
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. Utilidades
   -------------------------------------------------------------------------- */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   Menos y más suave, NO cero. Quitar el fade dejaría la página
   sintiéndose rota, no accesible.
   -------------------------------------------------------------------------- */

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

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

  /* Ningún desplazamiento: sólo cambios de opacidad y color */
  .c-btn:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. Pre-ocultado del hero
   El script inline del <head> pone data-js="on". Sólo ocultamos lo que
   animations.js va a hacer entrar, para que no se vea el salto del estado
   final al inicial.

   EL h1 NO ESTÁ EN ESTA LISTA, a propósito: es el elemento LCP y tiene que
   pintarse en el primer frame. Sólo se traslada, ya opaco.

   Red de seguridad: si animations.js no carga, main.js quita data-js a los
   1200 ms y todo aparece. Nunca dejamos contenido invisible por un script.
   -------------------------------------------------------------------------- */

[data-js='on'] .l-nav__inner,
[data-js='on'] .s-hero__eyebrow,
[data-js='on'] .s-hero__lead,
[data-js='on'] .s-hero__ctas > *,
[data-js='on'] .s-hero__foot {
  opacity: 0;
}

/* Con motion reducido no pre-ocultamos nada: la página se pinta completa. */
@media (prefers-reduced-motion: reduce) {
  [data-js='on'] .l-nav__inner,
  [data-js='on'] .s-hero__eyebrow,
  [data-js='on'] .s-hero__lead,
  [data-js='on'] .s-hero__ctas > *,
  [data-js='on'] .s-hero__foot {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   10. Stretched links
   Un enlace que cubre toda su tarjeta o fila. Existe porque antes había
   flechas y filas que PARECÍAN clickeables y no lo eran: el usuario leía
   "Abrir el sitio →" y no pasaba nada. Ahora la promesa visual y el área
   clickeable son la misma cosa.
   -------------------------------------------------------------------------- */

.s-fila__link,
.s-card__link {
  color: inherit;
}

.s-fila__link::after,
.s-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* El foco se dibuja sobre la tarjeta completa, no sobre las 3 palabras
   del título: si no, el anillo de foco no dice qué se va a activar. */
.s-fila__link:focus-visible,
.s-card__link:focus-visible {
  outline: none;
}

.s-fila:has(.s-fila__link:focus-visible),
.s-card:has(.s-card__link:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}