/* ══════════════════════════════════════════════════════════════════════════
   MOODLY — páginas legales (moodly.mx/privacidad, /terminos, /borrar-cuenta)

   Misma paleta y tipografía que la landing (index.html): dark-only, Archivo
   para títulos, Inter para el cuerpo. Los tokens vienen del style guide de
   Figma "MOODLY – Phase 1 MVP" / theme/tokens.ts de la app.
   ══════════════════════════════════════════════════════════════════════════ */

/* Las fuentes, servidas desde moodly.mx (legal, 5-oct): con la liga a
   fonts.googleapis.com, Google recibía la IP de quien abre el aviso, y el
   aviso 1.2 no lo lista como tercero. Son las variables oficiales de Google
   Fonts (OFL), bajadas con herramientas/fuentes-legales.mjs. Mismos ejes que
   antes: Archivo con ancho y peso (los títulos van a 800 y 106–112 %), Inter
   de 400 a 700. */
@font-face{
  font-family:"Archivo";
  src:url("/fuentes/archivo-variable.ttf") format("truetype");
  font-weight:100 900;font-stretch:62.5% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fuentes/inter-variable.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  color-scheme:dark;
  --fondo:#0E0F14;
  --superficie:#191A22;
  --superficie-alta:#22232D;
  --linea:#26272F;
  --linea-viva:#33343F;
  --texto:#FFFFFF;
  --texto-2:#A9AAB6;
  --texto-3:#71727A;
  --acento:#6E5CFF;
  --acento-alto:#8B7BFF;
  --acento-suave:#B9ACFF;
  --acento-lavado:rgba(110,92,255,.14);
  --alerta:#FFB454;
  --alerta-lavado:rgba(255,180,84,.12);
  --ancho:760px;
  --display:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cuerpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--cuerpo);
  /* Sin tamaño óptico: la Inter de Google era la de opsz 14; con el eje automático la letra salía más angosta y cambiaban los renglones. */
  font-optical-sizing:none;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:var(--acento-suave);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--acento-alto)}
:focus-visible{outline:2px solid var(--acento-alto);outline-offset:3px;border-radius:6px}

.envoltura{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:22px}

/* ── Barra ─────────────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(14,15,20,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
/* El logotipo va en /logotipo.css (29/09): el «mood»+«ly» morado que vivía aquí era uso incorrecto (manual §4). */
.barra nav{display:flex;gap:18px;font-size:.9rem}
.barra nav a{color:var(--texto-2);text-decoration:none;white-space:nowrap}
.barra nav a[aria-current="page"]{color:var(--texto)}
.barra nav a:hover{color:var(--texto)}
/* A 390 px el logotipo (108 px) y las tres ligas no caben con 22 px de orilla
   y 12 de hueco: «Borrar cuenta» se partía en dos renglones (29/09). */
@media (max-width:480px){ .barra .envoltura{padding-inline:16px;gap:12px} .barra nav{gap:12px;font-size:.84rem} }
@media (max-width:380px){ .barra nav{gap:8px;font-size:.78rem} }
@media (max-width:340px){ .barra .envoltura{height:auto;min-height:62px;padding-block:10px} .barra nav{flex-wrap:wrap;justify-content:flex-end;row-gap:4px} }

/* ── Tipografía ────────────────────────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--display);font-weight:800;
  line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0;
}
h1{font-size:clamp(2rem,4.5vw,2.9rem);font-stretch:112%}
h2{font-size:clamp(1.35rem,2.6vw,1.65rem);font-stretch:106%;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linea)}
h3{font-size:1.05rem;font-stretch:100%;margin-top:1.6rem}
h2 + p, h3 + p{margin-top:.75rem}

p{margin:.9rem 0}
ul,ol{padding-left:1.35rem;margin:.9rem 0}
li{margin:.35rem 0}
li::marker{color:var(--texto-3)}
strong{color:var(--texto);font-weight:600}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 12px;
}
.fecha{color:var(--texto-3);font-size:.9rem;margin-top:10px}

/* ── Cabecera de documento ─────────────────────────────────────────────── */
.cabecera{padding-block:clamp(44px,7vw,72px) 8px}
.cabecera .plomo{font-size:1.08rem;color:var(--texto-2);max-width:56ch;margin-top:16px}

/* ── Índice ────────────────────────────────────────────────────────────── */
.indice{
  margin:28px 0 8px;padding:18px 22px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:16px;
}
.indice p{margin:0 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.indice ol{margin:0;padding-left:1.3rem;columns:2;column-gap:24px;font-size:.92rem}
.indice li{break-inside:avoid;margin:.25rem 0}
.indice a{color:var(--texto-2);text-decoration:none}
.indice a:hover{color:var(--texto)}
@media (max-width:560px){ .indice ol{columns:1} }

/* ── Cuerpo del documento ──────────────────────────────────────────────── */
article{padding-bottom:64px}
article p,article li{color:var(--texto-2)}
article p strong,article li strong{color:var(--texto)}

table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0}
.tabla-scroll{overflow-x:auto;margin:1rem 0}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top;color:var(--texto-2)}
th{color:var(--texto);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}

/* Casillas de consentimiento del art. 35 — son casillas de verdad */
.casilla{
  display:flex;gap:12px;align-items:flex-start;
  margin:1rem 0;padding:14px 16px;
  background:var(--superficie);border:1px solid var(--linea-viva);border-radius:14px;
}
.casilla input{margin-top:5px;accent-color:var(--acento);width:18px;height:18px;flex:none}
.casilla label{color:var(--texto);font-size:.95rem}
.casilla small{display:block;color:var(--texto-3);margin-top:4px;font-size:.82rem}

/* Resumen "en corto" arriba de cada documento */
.encorto{
  margin:24px 0 8px;padding:20px 22px;
  background:var(--acento-lavado);border:1px solid rgba(110,92,255,.35);border-radius:16px;
}
.encorto p:first-child{margin-top:0;font-weight:600;color:var(--texto)}
.encorto ul{margin-bottom:0}
.encorto li{color:var(--texto-2)}

/* ── Lo que falta llenar ───────────────────────────────────────────────── */
/* Todo lo que va entre [CORCHETES] se pinta así para que NO se publique con
   un corchete adentro. Cuando llenes el dato, quita el <mark>. */
mark.llenar{
  background:var(--alerta-lavado);color:var(--alerta);
  border:1px dashed rgba(255,180,84,.55);border-radius:6px;
  padding:0 6px;font-weight:600;font-size:.92em;
}

/* ── Lo que falta REVISAR (distinto de lo que falta LLENAR) ────────────────
   Naranja = falta un dato de Dereck. Morado = texto nuevo que describe lo que
   el código hace hoy y que un abogado todavía no ha visto. Son dos pendientes
   distintos y se ven distintos a propósito: confundirlos es publicar uno
   creyendo que era el otro. Los dos se quitan al publicar. */
.revisar{
  border:1px dashed rgba(139,123,255,.55);
  background:var(--acento-lavado);
  border-radius:12px;
  padding:14px 18px;
  margin:1.2rem 0;
}
.revisar > .etiqueta{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-suave);margin-bottom:.5rem;
}
.revisar > :last-child{margin-bottom:0}

/* Caja de borrador — SE QUITA al publicar */
.borrador{
  position:sticky;top:62px;z-index:40;
  background:#2A1F0C;border-bottom:1px solid rgba(255,180,84,.45);
  color:var(--alerta);font-size:.86rem;padding:10px 0;
}
.borrador .envoltura{display:flex;gap:10px;align-items:center}
.borrador strong{color:var(--alerta)}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);padding-block:30px;font-size:.86rem;color:var(--texto-3)}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.pie nav{display:flex;flex-wrap:wrap;gap:18px}
.pie a{color:var(--texto-3);text-decoration:none}
.pie a:hover{color:var(--texto-2)}