/* Página legal: valores de la legal de Forge (desarme/legal/DESARME-LEGAL.md) con la marca de AiCars.
   1rem = 10px. Una sola hoja para compu y celular. */
:root {
  --negro: #000000;
  --fondo-doc: #0C0C0C;
  --texto: #F2F1ED;
  --texto-80: rgba(242, 241, 237, 0.8);
  --texto-55: rgba(242, 241, 237, 0.55);
  --texto-18: rgba(242, 241, 237, 0.18);
  --texto-10: rgba(242, 241, 237, 0.1);
  --rojo: #C10801;            /* la franja del barrido (en Forge es #cc4b37) */
  --letra-titulo: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --letra-texto: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
  --bezzy2: cubic-bezier(0.43, 0.195, 0.02, 1);
  --margen: 2.4rem;
  --medianil: 2.4rem;
}
@media (min-width: 420px) { :root { --margen: 3.2rem; --medianil: 3.2rem; } }
@media (min-width: 700px) { :root { --margen: 1.6rem; } }

html { font-size: 62.5%; }
@media (min-width: 1600px) { html { font-size: 68.75%; } }
@media (min-width: 1920px) { html { font-size: 75%; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--fondo-doc); color: var(--texto); font-family: var(--letra-texto); line-height: 1; -webkit-font-smoothing: antialiased; }
html.con-bienvenida, html.con-bienvenida body { overflow: hidden; }
img, video, canvas, picture, svg { -webkit-user-drag: none; user-select: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.solo-celu { display: none; }
@media (max-width: 699px) { .solo-compu { display: none; } .solo-celu { display: inline; } }

/* Saltar al contenido */
.saltar { position: fixed; top: 2.4rem; left: 2.4rem; z-index: 1002; padding: 1rem 1.4rem; background: var(--texto); color: var(--fondo-doc); font-size: 1.4rem; text-decoration: none; transform: translateY(-200%); }
.saltar:focus-visible { transform: none; }

/* ---------- Cabecera ---------- */
.cabeza { position: fixed; inset: 0 0 auto; z-index: 1000; display: flex; justify-content: space-between; align-items: flex-start; padding: 2.4rem; pointer-events: none; }
@media (min-width: 420px) { .cabeza { padding: 3.2rem; } }
@media (min-width: 1024px) { .cabeza { padding: 4rem; } }
.cabeza::before { content: ''; position: absolute; inset: 0 0 auto; height: 12rem; background: linear-gradient(var(--fondo-doc) 20%, rgba(12, 12, 12, 0)); pointer-events: none; }
.cabeza > * { position: relative; pointer-events: auto; }
html.con-bienvenida .cabeza { opacity: 0; }
.cabeza { transition: opacity 0.8s ease-in-out; }
.cabeza__logo { position: absolute; left: 50%; top: 2.4rem; transform: translateX(-50%); }
@media (min-width: 420px) { .cabeza__logo { top: 3.2rem; } }
@media (min-width: 1024px) { .cabeza__logo { top: 4rem; } }
.cabeza__logo img { height: 2.6rem; width: auto; }
@media (min-width: 1024px) { .cabeza__logo img { height: 3.2rem; } }
.cabeza__lado { font-family: var(--letra-texto); font-weight: 400; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0; text-decoration: none; color: var(--texto); transition: opacity 0.3s ease-in-out; }

@media (hover: hover) and (pointer: fine) { .cabeza__lado:hover { opacity: 0.4; } }

/* ---------- Cada documento ---------- */
.doc { position: relative; z-index: 1; background: transparent; padding-top: 50dvh; }
@media (min-width: 1024px) { .doc { padding-top: 0; } }
.doc + .doc .doc__grilla::before { content: ''; position: absolute; top: 0; left: var(--margen); right: var(--margen); height: 1px; background: var(--texto-10); }

.doc__grilla { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--medianil); padding: 0 var(--margen); }
.doc__grilla > * { grid-column: 1 / -1; }
@media (min-width: 700px) { .doc__grilla { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .doc__grilla { grid-template-columns: repeat(12, 1fr); } }

.doc__lado { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2.4rem; }
@media (min-width: 1024px) { .doc__lado { grid-column: 2 / 5; position: sticky; top: 0; height: 100dvh; } }

.doc__titulo { margin: 0; font-family: var(--letra-titulo); font-weight: 400; font-size: 8rem; line-height: 1.1; letter-spacing: -0.2rem; white-space: nowrap; color: var(--texto); }
@media (min-width: 1200px) { .doc__titulo { font-size: 14rem; } }

.doc__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; }
.doc__nav a { font-family: var(--letra-titulo); font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.05rem; text-decoration: none; color: var(--texto-55); transition: color 0.15s ease-in-out; }
@media (min-width: 1200px) { .doc__nav a { font-size: 1.8rem; } }
.doc__nav a[aria-current] { color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .doc__nav a:hover { color: var(--texto); } }

/* "Última actualización": en el flujo en celular, abajo a la izquierda de cada documento en compu */
.doc__fecha { display: flex; flex-direction: column; width: max-content; margin: 0; }
.doc__fecha span { font-family: var(--letra-texto); font-weight: 400; font-size: 1.3rem; line-height: 1.6; letter-spacing: 0; color: var(--texto); }

.doc__fecha span:first-child { color: var(--texto-55); }
.doc__fecha--abajo { display: none; }
@media (min-width: 1024px) {
  .doc__fecha--flujo { display: none; }
  .doc__fecha--abajo { display: flex; position: absolute; bottom: 4rem; left: 4rem; }
}

.doc__cuerpo { display: flex; flex-direction: column; padding-bottom: 8rem; }
@media (min-width: 1024px) { .doc__cuerpo { grid-column: 8 / 12; padding-bottom: calc(8.333vw + 1.6rem); } }

.doc__intro { display: flex; flex-direction: column; gap: 2.4rem; padding: 8rem 0 4rem; }
@media (min-width: 1024px) { .doc__intro { padding-top: 50dvh; } }
.doc__intro p { margin: 0; font-family: var(--letra-titulo); font-size: 2rem; line-height: 1.2; letter-spacing: -0.05rem; color: var(--texto-80); text-wrap: pretty; }
@media (min-width: 1200px) { .doc__intro p { font-size: 2.4rem; } }

.doc__clausulas { display: flex; flex-direction: column; gap: 4rem; }
.clausula { display: flex; flex-direction: column; gap: 2.4rem; }
.clausula h2 { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-family: var(--letra-titulo); font-weight: 400; font-size: 2rem; line-height: 1.2; letter-spacing: -0.05rem; color: var(--texto); text-wrap: pretty; }
@media (min-width: 1200px) { .clausula h2 { font-size: 2.4rem; } }
.clausula h2 .num { font-size: 5.8rem; line-height: 1.2; letter-spacing: -0.2rem; opacity: 0.2; }
@media (min-width: 1200px) { .clausula h2 .num { font-size: 9.6rem; } }
/* El texto: Geist 12–14px como Forge, con un poco más de interlineado (Forge usa 1.2) para que se lea mejor */
.clausula p, .clausula ul { margin: 0; font-family: var(--letra-texto); font-weight: 400; font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; color: var(--texto-80); text-wrap: pretty; }
@media (min-width: 700px) { .clausula p, .clausula ul { font-size: 1.5rem; } }
.clausula ul { padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: 0.6em; }
.clausula ul.lista-datos { list-style: none; padding-left: 0; gap: 0.2em; }
.clausula a, .enlace { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.15s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .clausula a:hover, .enlace:hover { color: var(--texto); } }
.doc__pie { margin: 8rem 0 0; font-family: var(--letra-texto); font-weight: 400; font-size: 1.3rem; line-height: 1.6; color: var(--texto-55); }

/* ---------- Títulos animados (número + nombre de cada cláusula) ---------- */
.js .anim { visibility: hidden; }
.js.quieto .anim { visibility: visible; }
.anim { font-kerning: none; font-variant-ligatures: none; }
.t-palabra { display: inline-block; white-space: nowrap; }
.t-letra { display: inline-block; will-change: transform; }
.t-linea { display: block; width: fit-content; padding: 0.14em; margin: -0.14em auto -0.14em -0.14em; white-space: nowrap; }
.t-linea.relleno {
  --fill-pos: -16;
  background-image: linear-gradient(97deg,
    var(--texto) 0%,
    var(--texto) calc((var(--fill-pos) - 8) * 1%),
    var(--rojo) calc(var(--fill-pos) * 1%),
    var(--texto-18) calc((var(--fill-pos) + 8) * 1%),
    var(--texto-18) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Bienvenida = aviso de cookies ---------- */
.bienvenida { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 0 2.4rem; background: var(--negro); }
html:not(.js) .bienvenida { display: none; }
.bienvenida__frase { max-width: 52rem; margin: 0 auto; text-align: center; text-wrap: balance; font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(2.6rem, 3vw, 4rem); line-height: 1.15; letter-spacing: -0.01em; color: #fff; visibility: hidden; }

.bienvenida__frase .palabra { display: inline-block; vertical-align: baseline; }
.bienvenida__abajo { position: fixed; left: 50%; bottom: 3.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1024px) { .bienvenida__abajo { bottom: 4rem; } }
.bienvenida__barra { width: 16rem; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.bienvenida__barra > div { width: 100%; height: 100%; background: var(--texto); transform: scaleX(0); transform-origin: left center; }
.bienvenida__acciones { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.bienvenida__acciones[hidden] { display: none; }
.bienvenida__botones { display: flex; align-items: center; justify-content: center; gap: 0.8rem; }
.bienvenida__nota { max-width: 32rem; margin: 0; text-align: center; text-wrap: balance; font-family: var(--letra-texto); font-weight: 400; font-size: 1.2rem; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }

@media (min-width: 1024px) { .bienvenida__nota { max-width: 40rem; } }

/* Botón "Entrar" de Forge: cada letra cae y entra su copia desde arriba */
.entrar { padding: 1.6rem; font-family: var(--letra-titulo); font-size: 2rem; line-height: 1.2; letter-spacing: 0; white-space: nowrap; color: #fff; }
@media (min-width: 1200px) { .entrar { font-size: 1.8rem; } }
.entrar > span { position: relative; display: inline-block; overflow: clip; }
.entrar > span::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; transform: scaleX(1); transform-origin: left center; transition: transform 0.3s ease-in-out; }
.entrar > span > span { display: inline-block; position: relative; text-shadow: rgba(255, 255, 255, 0.6) 0 -2em 0; transition: transform 0.75s var(--bezzy2); transition-delay: calc(var(--i) * 0.03s); }
@media (hover: hover) and (pointer: fine) {
  .entrar:hover > span::after { transform: scaleX(0); transform-origin: right center; }
  .entrar:hover > span > span { transform: translateY(2em); }
}
.entrar:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

/* ---------- Textura sutil en todo el fondo negro (2026-11-10) ----------
   Fondo de la página = grano fino en alta (assets/texturas/fondo-negro-hd.webp, 1024 px mostrado a 512: nítido en retina), sobre
   negro). Grano, no trama de puntos. Las fotos y bloques con fondo propio la tapan. */
:root { --fondo-pagina: #0C0C0C url('../assets/texturas/fondo-negro-hd.webp') repeat 0 0 / 512px 512px; }
body { background: var(--fondo-pagina); }

.doc__menu { margin: 2.4rem 0 0; font-family: var(--letra-titulo); font-size: 2.2rem; color: var(--texto-80); }

/* Celular (sesión celu, 2026-11-10): degradé más firme para que el texto no se encime con la cabecera */
@media (max-width: 1023px) {
  .cabeza::before { height: 11.5rem; background: linear-gradient(rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0)); }
}

/* Celular (2026-11-10, pedido de Octa): sin medias pantallas negras entre Cookies, Privacidad y Términos */
@media (max-width: 1023px) {
  .doc { padding-top: 12rem; }
  .doc:first-of-type { padding-top: 24dvh; }
  .doc__intro { padding: 4rem 0 3.2rem; }
  .doc__cuerpo { padding-bottom: 4.8rem; }
}