/*
 * La identidad de VendoX, en un solo archivo.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * POR QUÉ UN CSS COMPARTIDO Y NO ESTILOS EN CADA PÁGINA
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * `privacidad` y `eliminar-cuenta` nacieron con su `<style>` adentro, y estaba
 * bien cuando eran dos documentos que casi no cambian. Con cinco páginas, esa
 * decisión se convierte en cinco paletas que se separan sin que nadie lo note:
 * alcanza con tocar un color en una para que la marca se vea distinta según
 * dónde entre la persona.
 *
 * Los colores salen de `mobile/lib/core/design/tokens.dart`, que es la
 * identidad de la app. El acento es el mismo violeta.
 *
 * Sin build, sin dependencias, sin JavaScript para el estilo. Un archivo que un
 * navegador entiende tal cual está.
 */

:root {
  --fondo: #ffffff;
  --texto: #16151a;
  --suave: #5c5966;
  --debil: #8b8895;
  --borde: #e4e2e8;
  --superficie: #f7f6f9;
  --acento: #6b4bff;
  --acento-fuerte: #5334d6;
  --acento-suave: #f0ecff;
  --exito: #0f8b52;
}

/*
 * Tres estados, no dos.
 *
 * La mayoría de la gente nunca elige tema: su navegador no marca nada y sólo
 * `prefers-color-scheme` decide. Por eso el bloque oscuro va con
 * `:not([data-theme="light"])` — así una elección explícita de claro gana
 * sobre un sistema oscuro — y además se repite bajo `[data-theme="dark"]`
 * para que el sentido contrario también funcione.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fondo: #0a0a0c;
    --texto: #f5f5f7;
    --suave: #a1a1ae;
    --debil: #6b6b7a;
    --borde: #2a2a34;
    --superficie: #121216;
    --acento: #8f76ff;
    --acento-fuerte: #a58fff;
    --acento-suave: #1a1530;
    --exito: #3ddc97;
  }
}

:root[data-theme='dark'] {
  --fondo: #0a0a0c;
  --texto: #f5f5f7;
  --suave: #a1a1ae;
  --debil: #6b6b7a;
  --borde: #2a2a34;
  --superficie: #121216;
  --acento: #8f76ff;
  --acento-fuerte: #a58fff;
  --acento-suave: #1a1530;
  --exito: #3ddc97;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* El fondo se pinta SIEMPRE. Un body transparente toma el del navegador y la
     página se ve con el tema equivocado. */
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
}

.hoja {
  max-width: 47rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}

/* ─── Cabecera común ─────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--borde);
}

.barra-interna {
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: var(--texto);
  text-decoration: none;
}

.marca span {
  color: var(--acento);
}

.enlaces-barra {
  display: flex;
  gap: 1.15rem;
  font-size: 0.9rem;
}

.enlaces-barra a {
  color: var(--suave);
  text-decoration: none;
}

.enlaces-barra a:hover {
  color: var(--texto);
}

/* ─── Tipografía ─────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 0.5rem;
  text-wrap: balance;
}

h2 {
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.85rem;
  text-wrap: balance;
}

a {
  color: var(--acento);
}

/* ─── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--acento);
  color: #ffffff;
  font-weight: 650;
  font-size: 1.02rem;
  padding: 0.95rem 1.5rem;
  border-radius: 0.85rem;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  /* Toda la fila en un teléfono: es la acción principal de la página. */
  width: 100%;
  max-width: 24rem;
}

.boton:hover {
  background: var(--acento-fuerte);
}

.boton-secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  font-weight: 550;
}

.boton-secundario:hover {
  background: var(--superficie);
}

/* Foco visible: quien navega con teclado tiene que ver dónde está parado. */
a:focus-visible,
.boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* ─── Bloques ────────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.35rem;
}

.pie {
  border-top: 1px solid var(--borde);
  margin-top: 4rem;
  padding-top: 1.75rem;
  color: var(--debil);
  font-size: 0.87rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

.pie a {
  color: var(--suave);
  text-decoration: none;
}

.pie a:hover {
  color: var(--texto);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}