/* ============================================================================
   PUENTE v4 · BASE — reset, tipografía, foco, movimiento.
   Nada de componentes aquí: solo lo que se aplica a elementos desnudos.
   ========================================================================== */

/* ── Inter auto-hospedada ──────────────────────────────────────────────────
   Cuarta en la pila (ver tokens.css): en Apple no se descarga porque SF Pro
   gana antes; en el resto de sistemas es la que sostiene la identidad. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es sticky: el ancla de un enlace interno no debe quedar debajo. */
  scroll-padding-top: calc(var(--header-h) + var(--space-2xl));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  /* El lienzo es negro en los dos temas, igual que el shell de Studio: los
     paneles flotan encima. Pintarlo en `body` (y no en un contenedor) evita
     la banda de otro color al hacer overscroll. */
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* `display: block` de arriba pisa la regla del navegador `[hidden]{display:none}`,
   que tiene la misma especificidad y va antes. Consecuencia real: durante meses
   el botón de tema enseñó el sol Y la luna a la vez —el atributo `hidden` se
   ponía bien; el CSS lo ignoraba—. Cualquier `img`/`svg` del tema que confíe en
   `hidden` depende de esta línea. */
[hidden] { display: none !important; }

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

/* Enlaces DENTRO de texto corrido: subrayado con aire, como en Studio. */
.prose a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.prose a:hover { color: var(--accent-blue-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p, figure, blockquote { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-3xl) 0;
}

code, kbd, samp {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--bg-pill);
  padding: .12em .4em;
  border-radius: var(--radius-sm);
}

/* ── Escala tipográfica ────────────────────────────────────────────────────
   Una sola idea por titular. `display` es el H1 de portada; `h2` es el de
   sección. Todo lo numérico va en cifras de ancho fijo para que un contador
   o un precio no baile al cambiar. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.t-display {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.t-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.t-h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; }

.t-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.t-body { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.t-sm   { font-size: var(--text-sm); color: var(--text-secondary); }
.t-num  { font-variant-numeric: tabular-nums; }

/* ── Foco ─────────────────────────────────────────────────────────────────
   Visible SIEMPRE con teclado, nunca al hacer clic con el ratón. */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-button);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: color-mix(in srgb, var(--accent-blue) 30%, transparent);
  color: var(--text-primary);
}

/* Salto al contenido: invisible hasta que el teclado lo alcanza. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: calc(var(--z-sticky) + 10);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: 0 0 var(--radius-button) var(--radius-button);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Movimiento ───────────────────────────────────────────────────────────
   Regla de la casa: solo `transform` y `opacity`; lo que entra usa `ease-out`
   y NUNCA `ease-in`; la salida dura menos que la entrada.

   La aparición al hacer scroll se declara con `animation-timeline: view()`
   (nativo, sin JavaScript) y solo se activa si el navegador lo soporta. Los
   que no lo soporten ven el contenido ya colocado: no hay estado inicial
   invisible que pueda quedarse atascado. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}

/* Entrada de página: el mismo `content-rise` con el que abre cada pantalla de
   Studio. Es el detalle que hace que pasar de la web a la app no dé un salto. */
@media (prefers-reduced-motion: no-preference) {
  .panel-rise { animation: rise var(--dur-slow) var(--ease-out) both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}