/**
 * Sitio puente de Valley.
 *
 * Todos los valores estan copiados literalmente de la rama landing-v2,
 * src/styles/tokens.css, para que las dos ramas no diverjan. Aqui no se
 * decide nada de diseno: si falta un valor, se anade alli primero.
 *
 * Esta hoja es temporal y desaparece cuando landing-v2 sustituya al puente.
 * La unica pagina que sobrevive es la politica de privacidad.
 */

@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mono es la tipografia de etiquetas y datos del sistema. Aqui solo la usa la
 * fecha de actualizacion de la politica, asi que basta con el peso 500. No hay
 * variante variable de IBM Plex Mono en fontsource. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Superficies y texto, tema claro */
  --vy-surface: #f7f5f3;
  --vy-surface-raised: #ffffff;
  --vy-text: #1c202c;
  --vy-text-muted: #575c6b;
  --vy-border: #e1dbd6;

  /* Tipografia */
  --vy-font-sans: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --vy-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --vy-text-h2: clamp(2rem, 1.25rem + 2.4vw, 2.75rem); /* 32 -> 44 */
  --vy-text-h4: clamp(1.125rem, 1.1rem + 0.08vw, 1.1875rem); /* 18 -> 19 */
  --vy-text-body: 1rem; /* 16 */
  --vy-text-body-sm: 0.90625rem; /* 14.5 */
  --vy-text-label: 0.8125rem; /* 13 */

  --vy-weight-regular: 400;
  --vy-weight-semibold: 600;

  --vy-leading-h2: 1.06;
  --vy-leading-h4: 1.3;
  --vy-leading-body: 1.65;
  --vy-leading-body-sm: 1.55;

  --vy-tracking-h2: -0.03em;
  --vy-tracking-h4: -0.01em;

  /* Espaciado, base 4 */
  --vy-space-1: 4px;
  --vy-space-2: 8px;
  --vy-space-3: 12px;
  --vy-space-4: 16px;
  --vy-space-6: 24px;
  --vy-space-8: 32px;
  --vy-space-12: 48px;
  --vy-space-16: 64px;
  --vy-space-24: 96px;

  /* Radios. Misma escala que landing-v2: va de ocho en ocho para que el
   * anidado concentrico salga exacto con 8px de relleno, radio exterior =
   * radio interior + relleno. Aqui no hay nada anidado todavia.
   *
   * Dos familias de forma. Pildora para todo elemento pequeno de una sola
   * linea: botones, chips, antetitulos, avatares, cintas. Rectangulo
   * redondeado, 16 / 24 / 32, para las superficies con contenido dentro:
   * tarjetas, paneles, tablas, campos, avisos, imagenes y video.
   *
   * El motivo es que un radio grande sobre un elemento bajo lo recorta el
   * navegador a la mitad de su altura, asi que la escala deja de respetarse y
   * el resultado depende del alto que acabe teniendo cada cosa. Con pildora
   * eso no pasa a ninguna altura. Y de paso la forma dice si algo se pulsa
   * antes de haberlo leido. */
  --vy-radius-sm: 16px; /* chip, campo, boton pequeno, celda de dato, aviso, imagen anidada */
  --vy-radius-md: 24px; /* boton, tarjeta, marco de documento, bloque destacado */
  --vy-radius-lg: 32px; /* panel grande, contenedor de producto, imagen o mockup suelto */
  --vy-radius-full: 999px; /* pildora, antetitulo, avatar, cinta */

  /* Medidas de layout */
  --vy-container-narrow: 720px;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--vy-surface);
  color: var(--vy-text);
  font-family: var(--vy-font-sans);
  font-size: var(--vy-text-body);
  line-height: var(--vy-leading-body);
  font-weight: var(--vy-weight-regular);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Ninguna esquina viva. Tres casos:
 *
 *   por defecto   16   anidada dentro de una tarjeta
 *   .vy-media-lg  32   imagen o mockup suelto, protagonista
 *   .vy-bleed      0   llega al borde del viewport
 *
 * El valor por defecto es el pequeno porque es el unico que nunca puede
 * pasarse del contenedor que la envuelve. */
img,
video {
  border-radius: var(--vy-radius-sm);
}

.vy-media-lg,
.vy-media-lg img,
.vy-media-lg video {
  border-radius: var(--vy-radius-lg);
}

/* A sangre: llega al borde del viewport y ahi no hay curva. */
.vy-bleed,
.vy-bleed img,
.vy-bleed video {
  border-radius: 0;
}

/* El logotipo es una marca, no contenido: va sin recortar. Hoy es la unica
 * imagen de las dos paginas del puente. */
.vy-bridge h1 img,
.vy-logo img {
  border-radius: 0;
}

a {
  color: var(--vy-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.vy-container-narrow {
  width: 100%;
  max-width: var(--vy-container-narrow);
  margin-inline: auto;
  padding-inline: var(--vy-space-6);
}

/* ------------------------------------------------------------------ *
 * Cabecera. Misma medida de logotipo que la cabecera de landing-v2.
 * ------------------------------------------------------------------ */

.vy-header {
  background: var(--vy-surface);
  border-bottom: 1px solid var(--vy-border);
}

.vy-header-inner {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.vy-logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.vy-logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Puente. Pagina temporal.
 * ------------------------------------------------------------------ */

.vy-bridge {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vy-space-12);
  padding: var(--vy-space-16) var(--vy-space-6);
  text-align: center;
}

.vy-bridge-main {
  max-width: 34rem;
}

.vy-bridge h1 {
  margin: 0 0 var(--vy-space-8);
  line-height: 0;
}

.vy-bridge h1 img {
  width: 176px;
  max-width: 60vw;
  height: auto;
  display: inline-block;
}

.vy-bridge p {
  margin: 0 0 var(--vy-space-2);
}

.vy-bridge p:last-child {
  margin-bottom: 0;
  color: var(--vy-text-muted);
}

.vy-bridge-footer {
  font-size: var(--vy-text-body-sm);
  line-height: var(--vy-leading-body-sm);
  color: var(--vy-text-muted);
}

/* ------------------------------------------------------------------ *
 * Documento legal.
 *
 * Mismas reglas que LegalLayout.astro en landing-v2: las dos ramas tienen
 * que renderizar la politica de forma identica.
 * ------------------------------------------------------------------ */

.vy-legal {
  padding-block: var(--vy-space-16) var(--vy-space-24);
}

.vy-legal h1 {
  font-size: var(--vy-text-h2);
  line-height: var(--vy-leading-h2);
  letter-spacing: var(--vy-tracking-h2);
  font-weight: var(--vy-weight-semibold);
  margin: 0;
}

.vy-legal-updated {
  margin: var(--vy-space-2) 0 var(--vy-space-12);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-text-label);
  color: var(--vy-text-muted);
}

.vy-legal-body section {
  padding-bottom: var(--vy-space-8);
  margin-bottom: var(--vy-space-8);
  border-bottom: 1px solid var(--vy-border);
}

.vy-legal-body section:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.vy-legal-body h2 {
  font-size: var(--vy-text-h4);
  line-height: var(--vy-leading-h4);
  letter-spacing: var(--vy-tracking-h4);
  font-weight: var(--vy-weight-semibold);
  margin: 0 0 var(--vy-space-3);
}

.vy-legal-body p,
.vy-legal-body li {
  font-size: var(--vy-text-body);
  line-height: var(--vy-leading-body);
  color: var(--vy-text-muted);
}

.vy-legal-body p {
  margin: 0 0 var(--vy-space-3);
}

.vy-legal-body p:last-child {
  margin-bottom: 0;
}

.vy-legal-body ul {
  margin: 0 0 var(--vy-space-3);
  padding-left: var(--vy-space-6);
}

.vy-legal-body li {
  margin-bottom: var(--vy-space-2);
}

.vy-legal-body strong {
  color: var(--vy-text);
  font-weight: var(--vy-weight-semibold);
}

.vy-legal-footer {
  border-top: 1px solid var(--vy-border);
  padding-block: var(--vy-space-8) var(--vy-space-12);
  font-size: var(--vy-text-body-sm);
  line-height: var(--vy-leading-body-sm);
  color: var(--vy-text-muted);
}