/* ══════════════════════════════════════════════════════════
   .Final_Final Atelier — paginas de texto
   Gracias, aviso de privacidad y 404. Mismos tokens que la
   portada, pero solo lo necesario para leer: ~4 KB, no 30.
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:root{
  --negro:#0A0A0A; --carbon:#141414; --hueso:#F4F3F0;
  --gris:#8F8F8C; --plata:#B8B8B6;
  --senal:#FF4438;
  --linea:rgba(244,243,240,.15); --linea-ctrl:rgba(244,243,240,.44);
  --sans:'Space Grotesk','Arial',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --px:clamp(1.15rem,5vw,4.5rem);
  --e:cubic-bezier(.22,1,.36,1);
  --t--1:clamp(.75rem,.72rem + .12vw,.82rem);
  --t-0 :clamp(1rem,.96rem + .2vw,1.08rem);
  --t-1 :clamp(1.18rem,1.08rem + .45vw,1.42rem);
  --t-2 :clamp(1.5rem,1.28rem + 1vw,2.05rem);
  --t-4 :clamp(2.2rem,1.7rem + 2.9vw,4rem);
}
body{
  background:var(--negro);color:var(--hueso);
  font-family:var(--sans);font-size:var(--t-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--senal);outline-offset:3px}

.skip-link{position:absolute;left:var(--px);top:-100px;z-index:50;
  background:var(--hueso);color:var(--negro);padding:.75rem 1.25rem;
  font-size:var(--t--1);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;text-decoration:none;transition:top .15s}
.skip-link:focus{top:.5rem}

.container{max-width:1180px;margin:0 auto;padding-inline:var(--px)}

/* ── barra ── */
.bar{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;
  gap:1rem;padding-inline:var(--px);background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--linea)}
.bar-mark{font-weight:700;font-size:1.02rem;letter-spacing:-.02em;text-decoration:none;color:var(--hueso)}
.bar-nav{display:none;gap:1.5rem;margin-left:auto;font-size:.9rem}
.bar-nav a{color:var(--gris);text-decoration:none;transition:color .25s var(--e)}
.bar-nav a:hover{color:var(--senal)}
@media (min-width:760px){.bar-nav{display:flex}}

/* ── texto legal ── */
.legal{padding-block:clamp(2.5rem,8vw,5rem)}
.legal .container{max-width:900px}
/* La medida se limita en el TEXTO, no en el contenedor: ahi la unidad ch
   resuelve contra la fuente del propio parrafo, que es lo que se lee. */
.legal p,.legal li,.legal .legal-marco{max-width:68ch}
.legal h1,.legal h2{max-width:24ch}
.eyebrow{font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:500;margin-bottom:1rem}
.legal h1{font-size:var(--t-4);font-weight:700;letter-spacing:-.022em;
  line-height:1.04;text-wrap:balance;margin-bottom:1.4rem}
.legal-marco{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-1);color:var(--plata);line-height:1.45;
  padding:1.1rem 0 1.4rem;border-bottom:1px solid var(--linea);margin-bottom:2.4rem}
.legal h2{font-size:var(--t-2);font-weight:600;letter-spacing:-.018em;line-height:1.15;
  margin-top:3rem;padding-top:1.3rem;border-top:1px solid var(--linea)}
.legal h2 + p,.legal h2 + ul,.legal h2 + ol{margin-top:1rem}
.legal p{margin-top:1rem;text-wrap:pretty}
.legal ul,.legal ol{margin-top:1rem;padding-left:1.4rem;display:grid;gap:.55rem}
.legal li{padding-left:.2rem}
.legal li::marker{color:var(--senal)}
.legal a{color:var(--hueso);text-decoration:none;
  border-bottom:1px solid var(--linea-ctrl);transition:color .25s var(--e),border-color .25s}
.legal a:hover{color:var(--senal);border-color:var(--senal)}
.legal strong{font-weight:600}
mark.pendiente{background:#F2E600;color:#0A0A0A;padding:.1em .35em;font-weight:600}

/* ── gracias y 404 ── */
.sec-dark{min-height:calc(100svh - 56px);display:grid;align-content:center;
  padding-block:clamp(3rem,10vw,6rem)}
.sec-dark .container{max-width:52ch}
.sec-dark h1{font-size:var(--t-4);font-weight:700;letter-spacing:-.022em;
  line-height:1.02;text-wrap:balance}
.sec-dark p{margin-top:1.2rem;color:var(--plata);font-size:var(--t-1);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:0 1.5rem;margin-top:2.2rem;
  font-weight:600;font-size:var(--t-0);text-decoration:none;
  border:1px solid var(--senal);background:var(--senal);color:var(--negro);
  transition:background .3s var(--e),color .3s var(--e),border-color .3s}
.btn:hover{background:var(--hueso);border-color:var(--hueso);color:var(--negro)}
.btn-linea{background:none;color:var(--hueso);border-color:var(--linea-ctrl)}
.btn-linea:hover{background:var(--hueso);color:var(--negro)}

/* ── pie ── */
.site-footer{border-top:1px solid var(--linea);padding-block:2.2rem;margin-top:clamp(3rem,8vw,5rem)}
.footer-grid{display:grid;gap:1.2rem;font-size:var(--t--1);color:var(--gris)}
.footer-marca{font-weight:600;color:var(--hueso);letter-spacing:-.01em}
.footer-id a,.footer-nav a{color:var(--gris);text-decoration:none;transition:color .25s var(--e)}
.footer-id a:hover,.footer-nav a:hover{color:var(--senal)}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.2rem}
@media (min-width:760px){
  .footer-grid{grid-template-columns:1fr auto auto;align-items:center;gap:2rem}
}

/* ── impresion · el aviso se guarda y se imprime ── */
@media print{
  body{background:#fff;color:#000}
  .bar,.site-footer,.skip-link{display:none}
  .legal .container{max-width:none}
  .legal h2{border-color:#ccc}
  .legal a{color:#000;border:0;text-decoration:underline}
  .legal-marco{color:#333;border-color:#ccc}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}