/* ==========================================================================
   legaldron.es — AERIA
   Estructura y ritmo: plantilla Auralis. Piel: sistema de marca AERIA (claro).
   Regla de oro: el turquesa #2DD4DE solo como RELLENO (CTA, punto del logo,
   dot activo). Cuando el turquesa hace de TEXTO va en teal #0A7682.
   Los colores de estado solo aparecen pegados a un plazo. Nunca decorativos.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fuentes */

@font-face{
  font-family:'Bricolage Grotesque';
  src:url('../fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/dm-sans.woff2') format('woff2');
  font-weight:100 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/dm-sans-italic.woff2') format('woff2');
  font-weight:100 1000; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/dm-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/dm-mono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------- 2. Tokens */

:root{
  /* Superficie. Modelo de Auralis: lo elevado es MAS claro que el lienzo. */
  --paper:#F6F8FB;      /* lienzo de pagina, ~70% de la superficie */
  --surface:#FFFFFF;    /* tarjetas y paneles elevados */
  --band:#EDF2F9;       /* superficies hundidas: banda de normativa, footer */
  --line:#E0E3EE;       /* todos los hairlines de 1px */
  --line-soft:rgba(224,227,238,.62);

  /* Tinta */
  --ink:#0B0D12;        /* titulares */
  --mid:#3C4152;        /* cuerpo */
  /* Slate y slate-dim van más oscuros que el Slate #8893A7 de marca porque
     sobre fondo claro aquel no llega a AA. Ambos verificados a 4.5:1 sobre
     paper, surface y band. #5C6675 es además el mismo que usa asesoriadrones.es. */
  --slate:#5C6675;      /* secundario, labels. 5.46 / 5.81 / 5.17 */
  --slate-dim:#666C82;  /* pies de fuente, notas. 4.90 / 5.21 / 4.63 */

  /* Acento unico */
  --cyan:#2DD4DE;       /* SOLO relleno */
  --cyan-deep:#22BAC4;  /* hover del CTA */
  --cyan-ink:#04222B;   /* texto DENTRO del boton cian, nunca blanco */
  --teal:#0A7682;       /* el turquesa cuando hace de TEXTO */
  --cyan-wash:rgba(45,212,222,.10);
  --cyan-edge:rgba(45,212,222,.38);

  /* Panel de producto incrustado (unico bloque oscuro de la pagina) */
  --panel-ink:#0A0F1A;
  --panel:#131B2B;
  --panel-line:#1E2A3F;
  --fog:#E6EAF2;
  --panel-slate:#8893A7;

  /* Estado. Solo en pildoras de plazo. */
  --cleared:#0E7C58; --cleared-bg:rgba(52,211,153,.12); --cleared-edge:rgba(14,124,88,.30);
  --hold:#8A6100;    --hold-bg:rgba(251,191,36,.15);    --hold-edge:rgba(138,97,0,.28);
  --blocked:#C0322C; --blocked-bg:rgba(244,84,78,.10);  --blocked-edge:rgba(192,50,44,.28);

  /* Tipografia */
  --display:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono','JetBrains Mono',ui-monospace,monospace;

  --h1:clamp(2.6rem,5.4vw,4.25rem);
  --h2:clamp(1.9rem,3.5vw,2.75rem);
  --h2-mod:clamp(1.55rem,2.6vw,2.05rem);
  --h2-hero:clamp(2.4rem,4.4vw,3.4rem);   /* tercer nivel: solo #plazos */
  --h3:1.25rem;
  --lead-size:1.125rem;
  --small:.875rem;
  --eyebrow:.72rem;
  --data-xs:.6875rem;

  /* Geometria */
  --wrap:1280px;
  --gutter:32px;
  --radius:14px;
  --radius-sm:10px;
  --nav-h:68px;
  --space-sm:clamp(36px,4vw,56px);
  --space-md:clamp(60px,6.5vw,96px);
  --space-lg:clamp(88px,10vw,150px);
  --space-xl:clamp(120px,13vw,196px);
  --section:var(--space-lg);   /* alias: blog/*.html y legal.html lo consumen */
  --wrap-mid:1136px;
  --wrap-narrow:1024px;

  /* Elevacion. En claro las sombras si funcionan, se conserva el modelo Auralis. */
  --shadow-card:0 1px 2px rgba(11,13,18,.04);
  --shadow-panel:0 40px 80px -40px rgba(11,13,18,.28);
}

/* ----------------------------------------------------------------- 3. Reset */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--mid);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
ul{list-style:none}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  text-wrap:balance;
}

::selection{background:var(--cyan-wash);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- 4. Layout */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;
}

section{position:relative}

.section{padding-block:var(--space-lg)}
.section--tight{padding-block:var(--space-md) 0;position:relative;z-index:1}

/* Ya no hay .divider. Las secciones se separan por canto de superficie, por
   solape, por giro de las reglas a vertical o por un vacío distinto. Nunca
   dos veces igual y nunca con una raya. */

/* --------------------------------------------------- 5. Piezas tipograficas */

.eyebrow{
  font-family:var(--mono);
  font-size:var(--eyebrow);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--teal);
}

.lead{
  font-size:var(--lead-size);
  line-height:1.6;
  color:var(--mid);
  max-width:60ch;
}

.muted{color:var(--slate)}

.source{
  font-family:var(--mono);
  font-size:var(--data-xs);
  line-height:1.5;
  color:var(--slate-dim);
  letter-spacing:.01em;
}

.data{
  font-family:var(--mono);
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--slate);
}

/* Cabecera de modulo: eyebrow + regla de 1px que se traza. Gesto de Auralis. */
.modhead{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:40px;
}
.modhead .rule{
  flex:1 1 auto;
  height:1px;
  background:var(--line-soft);
  transform-origin:left center;
}

/* Titular de modulo en col-span-5 y parrafo en col-start-7, alineados abajo. */
.modtitle{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;
  align-items:end;
  margin-bottom:48px;
}
#plazos .modtitle{margin-bottom:var(--space-md)}
#como-funciona .modtitle{margin-bottom:44px}
#expediente .modtitle{margin-bottom:56px;align-items:start}
  .modhead--stack{display:block;margin-bottom:16px}
.modtitle h2{grid-column:span 5;font-size:var(--h2-mod)}
.modtitle p{grid-column:7 / span 6}

/* --------------------------------------------------------------- 6. Botones */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--display);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:-.01em;
  padding:14px 26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

/* El unico relleno cian de la pagina. */
.btn--primary{
  background:var(--cyan);
  color:var(--cyan-ink);
}
.btn--primary:hover{background:var(--cyan-deep)}
.btn--primary:active{transform:scale(.985)}

.btn--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal)}

.btn--sm{padding:10px 18px;font-size:.875rem}

/* ------------------------------------------------------------------ 7. Nav */

.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease,backdrop-filter .2s ease;
}
.nav.is-stuck{
  background:rgba(246,248,251,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.nav__left{display:flex;align-items:center;gap:48px}
.nav__logo img{height:20px;width:auto}
.nav__links{display:flex;align-items:center;gap:24px}
.nav__links a{
  font-size:var(--small);
  color:var(--slate);
  transition:color .15s ease;
}
.nav__links a:hover{color:var(--ink)}

/* ----------------------------------------------------------------- 8. Hero */

.hero{padding-top:calc(var(--nav-h) + 72px)}

.hero__grid{align-items:start}
.hero__main{grid-column:span 7}
/* La columna 8 se deja vacia a proposito: es el gesto de Auralis. */
.hero__side{grid-column:9 / span 4;padding-top:10px}

.hero h1{
  font-size:var(--h1);
  line-height:1.04;
  margin-top:18px;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.hero__note{
  margin-top:18px;
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate-dim);
}

/* -------------------------------------- 9. Panel de producto (bloque oscuro) */

.panel{
  margin-top:var(--space-md);
  background:var(--panel-ink);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
.panel__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.panel__ref{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--panel-slate);
}
.panel__view{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:999px;
  padding:7px 14px;
}
.panel__shot{
  border-radius:var(--radius-sm);
  border:1px solid var(--panel-line);
  overflow:hidden;
}
.panel__shot img{width:100%}
.panel__chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:22px;
}
.chip{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.08em;
  color:var(--panel-slate);
  background:rgba(230,234,242,.04);
  border:1px solid var(--panel-line);
  border-radius:999px;
  padding:7px 13px;
  transition:border-color .2s ease,color .2s ease;
}
.panel__chips .status{margin-left:auto}

/* Pildora de estado. Unico lugar donde vive el color de estado. */
.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid;
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--cleared{color:var(--cleared);background:var(--cleared-bg);border-color:var(--cleared-edge)}
.status--hold{color:var(--hold);background:var(--hold-bg);border-color:var(--hold-edge)}
.status--blocked{color:var(--blocked);background:var(--blocked-bg);border-color:var(--blocked-edge)}
/* Sobre el panel oscuro los estados suben de luminosidad. */
.panel .status--cleared{color:#34D399;background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.34)}
.panel .status--hold{color:#FBBF24;background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.34)}
.panel .status--blocked{color:#F4544E;background:rgba(244,84,78,.10);border-color:rgba(244,84,78,.34)}

/* --------------------------------------------- 10. Autoexclusion + ticker */

.filter{text-align:center}
.filter p{
  font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ink);
  max-width:34ch;
  margin-inline:auto;
  line-height:1.3;
}
.filter .eyebrow{display:block;margin-bottom:18px}

/* Banda de imagen a sangre completa. Sustituye al ticker que se movía. */
.bleed{
  margin-top:var(--space-sm);
  margin-bottom:calc(var(--space-sm) * -1);   /* muerde la losa blanca */
  width:100%;
  overflow:hidden;
  /* El clip lo anima GSAP. Sin JS la imagen se ve entera. */
}
.bleed img{
  width:100%;
  height:clamp(280px,42vw,560px);
  object-fit:cover;
  object-position:center 40%;
}

/* ------------------------------------------------- 11. Bloque de plazos */

.intro{
  max-width:44rem;
  margin-inline:auto;
  text-align:center;
  margin-bottom:64px;
}
.intro h2{font-size:var(--h2)}
.intro p{margin-top:20px;margin-inline:auto}

.cards3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-card);
  transition:border-color .2s ease,background-color .2s ease;
}
.card:hover{border-color:var(--cyan-edge)}

/* #plazos es una losa blanca a sangre completa: el cambio de superficie
   sustituye al <hr> que había antes, y el padding asimétrico (187 arriba,
   94 abajo) hace que la sección flote en vez de que la empuje la anterior. */
#plazos{
  background:var(--surface);
  padding-block:var(--space-xl) var(--space-md);
  position:relative;
  z-index:0;                       /* la foto de arriba pinta por encima */
}
#plazos > .wrap{max-width:var(--wrap-narrow)}
#plazos .modtitle h2{font-size:var(--h2-hero);grid-column:span 6}
#plazos .modtitle p{grid-column:8 / span 5}

/* Hechos de plazo en lista editorial. Sin cifras gigantes ni contadores:
   ese tratamiento de "métricas" lee como plantilla genérica. Aquí manda la
   frase, y la fuente va al margen como en un documento técnico. */
.facts{border-top:0}
/* La cita gira al margen izquierdo: deja de ser pie de tarjeta y pasa a leerse
   como articulado. El espaciado entre filas es desigual a propósito. */
.fact-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:40px;
  align-items:start;
  padding-block:32px;
  border-bottom:1px solid var(--line-soft);
}
.fact-row:first-child{padding-top:0}
.fact-row:nth-child(2){padding-block:56px}
.fact-row:last-child{padding-block:40px 0;border-bottom:0}
.fact-row__claim{grid-column:2;grid-row:1}
.fact-row__claim h3{
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.25;
  max-width:24ch;
}
.fact-row__claim p{
  margin-top:12px;
  font-size:var(--small);
  color:var(--mid);
  max-width:62ch;
}
.fact-row .source{
  grid-column:1;grid-row:1;
  text-align:left;
  padding-top:.5em;
  white-space:normal;
}

/* --------------------------------------------------- 12. Como funciona */

#como-funciona{padding-block:var(--space-md) var(--space-lg)}

.steps2{
  display:grid;
  grid-template-columns:1.35fr .65fr;   /* una protagonista y una secundaria */
  gap:32px;
  align-items:end;
}
.steps2 > .step:first-child{padding:36px}
.steps2 > .step:nth-child(2){margin-bottom:56px}   /* desnivel real */
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease;
}
.step:hover{border-color:var(--cyan-edge)}
.step__num{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal);
}
.step h3{margin-top:16px;font-size:var(--h3)}
.step p{margin-top:10px;font-size:var(--small)}
.step__shot{
  margin-top:auto;
  padding-top:26px;
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.step__shot img{
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}

/* -------------------------------------------- 13. Expediente y cronologia */

/* Tercer ancho de medida en tres módulos seguidos, y el único bloque que no
   arranca en la misma x que el resto: la separación la hace el desalineamiento. */
#expediente{padding-block:var(--space-sm) var(--space-xl)}
#expediente > .wrap{max-width:var(--wrap-mid)}
#expediente .modtitle .eyebrow{grid-column:1 / span 2;padding-top:.55em}
#expediente .modtitle h2{grid-column:3 / span 6}
#expediente .modtitle p{grid-column:9 / span 4;align-self:start}

.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

.dossier{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
}
.dossier h3{font-size:var(--h3)}
.dossier > p{margin-top:10px;font-size:var(--small)}

.doc{
  margin-top:26px;
  background:var(--band);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:22px;
}
.doc__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-block:10px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
}
.doc__row:last-child{border-bottom:0}
.doc__row strong{color:var(--ink);font-weight:500}

/* Cronologia vertical con dots, patron de la pantalla asimetrica de Auralis. */
.timeline{
  margin-top:26px;
  border-left:1px solid var(--line);
  padding-left:28px;
  display:flex;
  flex-direction:column;
  gap:26px;
  position:relative;
  transform-origin:top center;
}
.tl{position:relative}
.tl__dot{
  position:absolute;
  left:-34px;
  top:4px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--slate-dim);
  box-shadow:0 0 0 4px var(--surface);
}
.tl.is-active .tl__dot{background:var(--cyan)}
.tl__date{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-dim);
}
.tl__title{
  font-family:var(--display);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--ink);
  margin-top:4px;
  letter-spacing:-.01em;
}
.tl__meta{margin-top:10px}

/* ---------------------------------------------------- 14. Banda normativa */

.band{background:var(--band);border:0}   /* la superficie ya es el límite */
#normativa{padding-block:var(--space-lg) var(--space-sm)}
.band .intro{
  max-width:none;margin-inline:0;text-align:left;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;
  margin-bottom:var(--space-md);
}
.band .intro h2{grid-column:1 / span 5;font-size:var(--h2-mod)}
.band .intro p{grid-column:7 / span 5;margin-top:0;margin-inline:0;align-self:end}
.cards3{grid-template-columns:1.15fr .95fr 1.05fr;gap:40px;align-items:start}
.cards3 > .card:nth-child(2){margin-top:40px}
.cards3 > .card:nth-child(3){margin-top:16px}
.band .fact{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.fact h3{font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em}
.fact p{margin-top:12px;font-size:var(--small)}
.fact .source{margin-top:16px;display:block}

/* ------------------------------------------------------------- 15. Alcance */

/* Se funde con la banda: comparten superficie, así que leen como un solo
   bloque y desaparecen dos límites sin tocar el marcado. */
.scope{
  background:var(--band);
  padding-block:0 var(--space-lg);
  text-align:left;
}
.scope p{
  font-size:var(--small);
  color:var(--slate);
  max-width:56ch;
}

/* ------------------------------------------------------- 16. Cierre y form */

/* Cierre sobre imagen a sangre. El único momento en que el texto va sobre
   foto, así que la capa de oscurecimiento es obligatoria para el contraste. */
.closer{
  position:relative;
  isolation:isolate;
  text-align:center;
  padding-block:clamp(120px,14vw,200px);
  overflow:hidden;
}
.closer__bg{position:absolute;inset:0;z-index:-2}
.closer__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.closer::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,15,26,.82),rgba(10,15,26,.90));
}
.closer h2{
  color:#fff;
  font-size:var(--h2);
  max-width:18ch;
  margin-inline:auto;
}
.closer__inner > p{
  margin:20px auto 0;
  max-width:52ch;
  color:var(--fog);
}
.closer__actions{margin-top:34px;display:flex;justify-content:center}
.closer__note{
  margin-top:18px;
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.06em;
  color:var(--panel-slate);
}

/* ------------------------------------------ 16b. Scroll suave y revelados */

/* ScrollSmoother necesita este par. La nav va FUERA del envoltorio. */
#smooth-wrapper{overflow:hidden}

/* Máscara por línea para los titulares. SplitText crea los .line dentro de
   un .line-mask con overflow oculto: la línea sube desde debajo del corte,
   que es el revelado que hace que un titular lea como editorial y no como
   un fade genérico. */
.line-mask{overflow:hidden;display:block}

.closer + .footer{border-top:0}   /* .closer solo existe en la home */

/* ---------------------------------------------------------------- 17. Footer */

.footer{
  background:var(--band);
  border-top:1px solid var(--line);
  padding-block:48px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.footer__left{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.footer__left img{height:20px;width:auto}
.footer__left span{font-size:var(--small);color:var(--slate)}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}
.footer__links a{font-size:var(--small);color:var(--slate);transition:color .15s ease}
.footer__links a:hover{color:var(--ink)}
.footer__tag{
  margin-top:28px;
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-dim);
}

/* ------------------------------------------------------- 18. Pagina legal */

.legal{padding-top:calc(var(--nav-h) + 72px)}
.legal__body{max-width:70ch}
.legal__body h1{font-size:clamp(2rem,4vw,2.75rem)}
.legal__body h2{font-size:1.375rem;margin-top:44px}
.legal__body h3{font-size:1.0625rem;margin-top:28px}
.legal__body p,.legal__body li{margin-top:12px;font-size:.9375rem}
.legal__body ul{margin-top:8px;padding-left:20px;list-style:disc}
.legal__body li{margin-top:6px}
.legal__body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.legal__updated{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-dim);
  margin-top:14px;
}

/* ------------------------------------------------------------- 18b. Blog */

.blog-hero{padding-top:calc(var(--nav-h) + 56px);padding-bottom:40px}
.blog-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);max-width:18ch}
.blog-hero .lead{margin-top:22px}

/* --- Estantería: carta de tres series ------------------------------------
   Un sustrato, tres marcajes, una baliza por balda.

   Los 18 lomos comparten papel, bisel y canto de páginas. Lo único que cambia
   por serie es DÓNDE se entinta el lomo: cabeza (serie 01), pie (serie 02) o
   cabeza y pie (serie 03). A tres metros se ven una línea negra arriba, una
   abajo y dos: tres estados inequívocos, sin un solo color nuevo.

   El acento cian se concentra en un tomo por balda (el de cabecera) en vez de
   repartirse en dieciocho puntos invisibles. Sigue muy por debajo del 10%,
   pero por primera vez se ve.

   Ni un hexadecimal nuevo: todo sale de :root. */

.shelf-wrap{padding-bottom:var(--section)}
.shelves{display:flex;flex-direction:column;gap:96px}

/* Leyenda: enseña el sistema entero antes de mirar un lomo, y hace de índice. */
.shelf-legend{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:56px}
.shelf-legend a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);
  transition:color .15s ease;
}
.shelf-legend a:hover{color:var(--ink)}
.shelf-legend i{
  position:relative;width:26px;height:34px;flex:none;border-radius:2px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}
.shelf-legend i::before,.shelf-legend i::after{
  content:"";position:absolute;left:0;right:0;height:7px;background:var(--panel-ink);
}
.shelf-legend .m1::before{top:0}
.shelf-legend .m1::after{display:none}
.shelf-legend .m2::before{display:none}
.shelf-legend .m2::after{bottom:0}
.shelf-legend .m3::before{top:0}
.shelf-legend .m3::after{bottom:0}
.shelf-legend .m4{background:var(--panel-ink);box-shadow:inset 0 0 0 1px var(--panel-line)}
.shelf-legend .m4::before{top:0;background:var(--cyan)}
.shelf-legend .m4::after{display:none}

/* Cabecera de serie: texto horizontal de verdad. Es lo que resuelve el
   "cuesta leer el título de primeras", porque llega antes que ningún lomo. */
.shelf-group{scroll-margin-top:calc(var(--nav-h) + 24px)}
.shelf-group__head{
  display:grid;grid-template-columns:1fr auto;column-gap:24px;
  width:min(100%,1060px);margin-bottom:22px;
}
.shelf-group__code{
  grid-column:1;grid-row:1;
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.shelf-group__count{
  grid-column:2;grid-row:1;
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate-dim);white-space:nowrap;
}
.shelf-group__name{
  grid-column:1/-1;font-family:var(--display);font-weight:600;
  font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-top:8px;
}
.shelf-group__sub{
  grid-column:1/-1;font-size:.9375rem;line-height:1.5;color:var(--slate);
  max-width:62ch;margin-top:6px;
}

/* Balda. Anchos irregulares por permutación: nunca dos iguales contiguos. */
.shelf{
  list-style:none;width:min(100%,1060px);
  display:grid;grid-template-columns:var(--cols);gap:26px;align-items:end;
  position:relative;padding-bottom:24px;
  perspective:2600px;perspective-origin:50% 60%;
}
.shelf--01{--cols:1.18fr .82fr 1fr 1.18fr .82fr 1fr}
.shelf--02{--cols:1.18fr .82fr 1fr .82fr 1.18fr 1fr}
.shelf--03{--cols:1fr .82fr 1fr 1.18fr .82fr 1.18fr}
.shelf::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink);box-shadow:0 6px 14px -8px rgba(11,13,18,.45);
}

/* Escala de serie. Corta a propósito: un eje a todo el ancho invitaría a leer
   la posición de cada lomo como un dato temporal, y sería un gráfico que miente. */
.shelf-scale{position:relative;width:min(100%,420px);height:44px;margin-top:16px}
.shelf-scale__rule{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.shelf-scale__fill{position:absolute;top:0;left:0;height:3px;background:var(--cyan)}
.shelf-scale__t{
  position:absolute;top:11px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.14em;color:var(--slate-dim);
}
.shelf-scale__t:first-of-type{transform:none;left:0}
.shelf-scale__t:last-of-type{transform:translateX(-100%)}
.shelf-scale__t::before{content:"";position:absolute;top:-11px;left:50%;width:1px;height:7px;background:var(--slate)}
.shelf-scale__t:first-of-type::before{left:0}
.shelf-scale__t:last-of-type::before{left:auto;right:0}
.shelf-scale__label{
  position:absolute;top:28px;left:0;
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);
}

/* Lomo: sustrato único ---------------------------------------------------- */
.book{
  position:relative;z-index:1;min-width:0;
  transform-style:preserve-3d;transform-origin:bottom center;
}
.book__link{display:block;position:relative;transform-style:preserve-3d;border-radius:4px}
.book__link:focus-visible{outline:2px solid var(--teal);outline-offset:6px}

.book__spine{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;height:var(--h,348px);padding:0;overflow:hidden;
  border-radius:4px 2px 2px 4px;
  background:linear-gradient(100deg,var(--surface) 0%,var(--surface) 46%,var(--band) 100%);
  box-shadow:0 22px 38px -22px rgba(11,13,18,.30),
             0 2px 0 rgba(11,13,18,.08),
             inset 0 0 0 1px var(--line);
  /* La sombra de realce viaja como variable: un lomo de papel no puede
     recibir la misma que uno entintado. */
  --shadow-up:0 34px 52px -22px rgba(11,13,18,.34), inset 0 0 0 1px var(--cyan-edge);
}
.book__spine::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,13,18,.05) 0 1px,
    rgba(11,13,18,.02) 1px 7px,
    transparent 7px calc(100% - 16px),
    rgba(11,13,18,.10) calc(100% - 16px) 100%);
}
.book__spine::after{
  content:"";position:absolute;top:6px;bottom:6px;right:0;width:6px;z-index:5;
  border-radius:0 2px 2px 0;opacity:.85;
  background:linear-gradient(90deg,#C6CDDB,#FFFFFF 35%,#E7EBF2 70%,#B4BDCC);
}

/* Zonas: idénticas en los dieciocho. Cuatro elementos y ni uno más. */
.book__head{
  position:relative;z-index:3;flex:none;min-height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:14px 12px;text-align:center;
}
.book__title{
  position:relative;z-index:3;flex:1 1 auto;align-self:center;margin:14px 0;
  /* vertical-lr y no rl: con rl la segunda columna cae a la izquierda y el ojo
     tiene que saltar hacia atrás. */
  writing-mode:vertical-lr;
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  line-height:1.16;letter-spacing:.004em;color:var(--ink);text-align:left;
  max-height:100%;overflow:hidden;text-rendering:geometricPrecision;
}
.book--wide .book__title{font-size:1.125rem}
.book__foot{
  position:relative;z-index:3;flex:none;height:52px;
  display:flex;align-items:center;justify-content:center;
}
.book__code{
  font-family:var(--mono);font-weight:500;font-size:var(--data-xs);
  letter-spacing:.18em;color:var(--slate);
}
/* La clave: el dato que el título no da, en horizontal y legible sin girar
   la cabeza. Es el segundo tiempo de lectura. */
.book__clave{
  font-family:var(--mono);font-weight:500;font-size:.75rem;line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  hyphens:none;overflow-wrap:normal;max-width:100%;
}
.book__brand{
  display:flex;align-items:center;gap:4px;
  font-family:var(--display);font-weight:700;font-size:.6875rem;
  letter-spacing:.02em;color:var(--ink);
}
.book__brand .dot{display:block;width:4px;height:4px;border-radius:50%;background:var(--cyan)}

/* Marcaje 01 · cabeza entintada */
.book--head .book__head{background:var(--panel-ink)}
.book--head .book__code{color:var(--panel-slate)}
.book--head .book__clave{color:var(--fog)}
/* Marcaje 02 · pie entintado */
.book--foot .book__foot{background:var(--panel-ink)}
.book--foot .book__brand{color:var(--fog)}
/* Marcaje 03 · cabeza y pie */
.book--both .book__head,.book--both .book__foot{background:var(--panel-ink)}
.book--both .book__code{color:var(--panel-slate)}
.book--both .book__clave{color:var(--fog)}
.book--both .book__brand{color:var(--fog)}

/* Pilar: la baliza de cada balda. Cuerpo entintado y cabeza en cian relleno.
   El punto de marca nunca se pinta sobre cian, siempre sobre tinta o papel. */
.book--pilar .book__spine{
  background:linear-gradient(100deg,var(--panel-ink) 0%,var(--panel) 52%,var(--panel-ink) 100%);
  box-shadow:0 30px 48px -20px rgba(11,13,18,.55),inset 0 0 0 1px var(--panel-line);
  --shadow-up:0 34px 52px -22px rgba(11,13,18,.62), inset 0 0 0 1px var(--cyan-edge);
}
.book--pilar .book__spine::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,.14) 0 1px,
    rgba(255,255,255,.05) 1px 7px,
    transparent 7px calc(100% - 16px),
    rgba(0,0,0,.34) calc(100% - 16px) 100%);
}
.book--pilar .book__spine::after{background:linear-gradient(90deg,#AEB7C8,#F1F4F9 35%,#D5DBE6 70%,#9AA3B5)}
.book--pilar .book__head{background:var(--cyan)}
.book--pilar .book__code,.book--pilar .book__clave{color:var(--cyan-ink)}
.book--pilar .book__title{color:var(--fog)}
.book--pilar .book__foot{background:transparent}
.book--pilar .book__brand{color:var(--fog)}

/* Cubierta: se abre plana al pasar el ratón. Arranca donde acaba el lomo,
   sea cual sea su ancho. */
.book__cover{
  position:absolute;top:0;left:100%;
  width:300px;height:var(--h,348px);z-index:1;
  display:flex;flex-direction:column;gap:12px;padding:30px 28px;
  background:linear-gradient(135deg,#131B2B,#0A0F1A);
  border-radius:2px 5px 5px 2px;
  box-shadow:0 30px 60px -28px rgba(11,13,18,.7);
  transform-origin:left center;
  transform:rotateY(-90deg);
  opacity:0;visibility:hidden;
  backface-visibility:hidden;pointer-events:none;
}
.book__cover-tag{
  font-family:var(--mono);font-size:var(--data-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}
.book__cover-title{
  font-family:var(--display);font-weight:600;font-size:1.3rem;
  line-height:1.2;letter-spacing:-.02em;color:var(--fog);
}
.book__cover-sub{font-size:var(--small);color:var(--panel-slate);line-height:1.55}
.book__cover-foot{
  margin-top:auto;font-family:var(--mono);font-size:var(--data-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--panel-slate);
}

/* Cubierta hacia la izquierda: en los tomos del extremo derecho no cabe
   abrirla hacia fuera, así que se abre hacia dentro. Lo decide el JS midiendo. */
.book--cover-left .book__cover{
  left:auto;right:100%;
  transform-origin:right center;
  transform:rotateY(90deg);
  border-radius:5px 2px 2px 5px;
}

/* Realce al pasar el ratón. La sombra se transiciona por CSS y no con GSAP:
   animar box-shadow desde JS es caro y el propio sistema lo prohíbe. */
.book__spine{transition:box-shadow .32s ease}
.book.is-active .book__spine{box-shadow:var(--shadow-up)}

/* Lámina de transición al abrir */
.page-turn{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  transform:scaleY(0);transform-origin:top center;
  pointer-events:none;will-change:transform;
}

/* Tumbado a 1000px y no a 900: entre medias un lomo estrecho baja de 90px y
   la clave, que es toda la solución de lectura rápida, se parte. */
@media (max-width:1000px){
  .shelves{gap:64px}
  .shelf{display:flex;flex-direction:column;gap:10px;padding-bottom:0;perspective:none}
  .shelf::after{display:none}
  .book{transform:none !important}
  .book__spine{
    width:100%;height:auto !important;min-height:88px;
    flex-direction:row;align-items:center;gap:16px;padding:14px 18px;
    border-radius:3px;border-left:6px solid var(--panel-ink);
  }
  .book__spine::before{background:linear-gradient(180deg,rgba(11,13,18,.05) 0 2px,transparent 2px 100%)}
  .book__spine::after{display:none}
  .book__head{
    min-height:0;flex:none;width:104px;
    align-items:flex-start;justify-content:center;text-align:left;
    padding:0;gap:4px;background:none !important;
  }
  .book__code{color:var(--slate) !important}
  .book__clave{color:var(--ink) !important}
  .book__title{writing-mode:horizontal-tb;flex:1;margin:0;max-height:none;font-size:1.0625rem;line-height:1.25}
  .book__foot{height:auto;flex:none;background:none !important}
  /* La marca y su punto no se ocultan nunca: es el pegamento entre series. */
  .book__brand{color:var(--ink) !important;margin-left:auto}
  .book--pilar .book__spine{border-left-color:var(--cyan)}
  .book--pilar .book__title{color:var(--fog)}
  .book--pilar .book__code,
  .book--pilar .book__clave,
  .book--pilar .book__brand{color:var(--fog) !important}
  .book__cover{display:none}
  .shelf-scale{width:100%}
  .shelf-legend{gap:16px;margin-bottom:40px}
}


/* Artículo -------------------------------------------------------------- */
.article{padding-top:calc(var(--nav-h) + 72px)}
.article__head{max-width:74ch;margin-inline:auto}
.article__head h1{font-size:clamp(2rem,4.2vw,3rem);margin-top:16px}
.article__meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--data-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-dim);
}
.article__body{max-width:74ch;margin:56px auto 0}
.article__body > *{max-width:68ch}

/* Bloque de respuesta directa: lo primero que lee un motor de IA. */
.answer{
  max-width:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-sm);
  padding:26px 28px;
  margin-bottom:44px;
  box-shadow:var(--shadow-card);
}
.answer p{font-size:1.05rem;line-height:1.65;color:var(--ink)}
.answer p + p{margin-top:12px}

.article__body h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin-top:56px}
.article__body h3{font-size:1.15rem;margin-top:36px}
.article__body p{margin-top:16px;line-height:1.7}
.article__body ul,.article__body ol{margin-top:16px;padding-left:22px}
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body li{margin-top:8px;line-height:1.65}
.article__body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.article__body strong{color:var(--ink);font-weight:600}

.table-wrap{max-width:none;overflow-x:auto;margin-top:28px}
.article__body table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--small);
  min-width:520px;
}
.article__body th,.article__body td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.article__body th{
  font-family:var(--mono);
  font-size:var(--data-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  background:var(--band);
  border-bottom:1px solid var(--line);
}
.article__body td:last-child{white-space:nowrap;color:var(--mid)}

.callout{
  max-width:none;
  margin-top:32px;
  padding:22px 24px;
  background:var(--band);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.callout p{margin-top:0;font-size:var(--small)}
.callout .source{display:block;margin-top:12px}

.faq{max-width:none;margin-top:56px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding-block:20px;
  font-family:var(--display);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--ink);
  letter-spacing:-.01em;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--teal);font-size:1.2rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > p{margin:0 0 22px;font-size:var(--small);max-width:66ch}

.article__cta{
  max-width:none;
  margin-top:64px;
  padding:34px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow-card);
}
.article__cta h2{margin-top:0;font-size:1.5rem}
.article__cta p{margin-top:12px;margin-inline:auto;max-width:52ch}
.article__cta .btn{margin-top:22px}

.prev-next{
  max-width:none;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.prev-next a{font-size:var(--small);color:var(--teal)}

/* --------------------------------------------------------- 19. Responsive */

@media (max-width:1080px){
  .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards3 > .card:nth-child(2),
  .cards3 > .card:nth-child(3){margin-top:0}
}

@media (max-width:900px){
  :root{
    --gutter:22px;
    --space-xl:clamp(96px,16vw,124px);
    --space-lg:clamp(72px,12vw,96px);
    --space-md:clamp(48px,8vw,64px);
    --space-sm:32px;
  }
  .bleed{margin-top:32px;margin-bottom:-24px}
  .steps2{grid-template-columns:1fr;gap:24px}
  .steps2 > .step:first-child{padding:24px}
  .steps2 > .step:nth-child(2){margin-bottom:0}
  .band .intro{display:block}
  .band .intro h2,.band .intro p{grid-column:auto}
  .band .intro p{margin-top:16px}
  #expediente .modtitle .eyebrow,
  #expediente .modtitle h2,
  #expediente .modtitle p{grid-column:1 / -1}
  #plazos .modtitle h2,#plazos .modtitle p{grid-column:1 / -1}
  .fact-row,
  .fact-row:nth-child(2),
  .fact-row:last-child{grid-template-columns:1fr;gap:14px;padding-block:28px}
  .fact-row:first-child{padding-top:0}
  .fact-row:last-child{padding-bottom:0}
  .fact-row .source,.fact-row__claim{grid-column:auto;grid-row:auto}
  .fact-row .source{text-align:left;white-space:normal;padding-top:0}
  .bleed{margin-top:40px}
  .article__body{margin-top:40px}

  .hero__main,.hero__side{grid-column:1 / -1}
  .hero__side{padding-top:0}
  .modtitle h2,.modtitle p{grid-column:1 / -1}
  .modtitle{margin-bottom:40px;gap:16px}
  .steps2,.two,.cards3{grid-template-columns:1fr}
  .nav__links{display:none}
  .panel{padding:16px;margin-top:48px}
  .step{min-height:0}
}

@media (max-width:560px){
  .footer__inner{flex-direction:column;align-items:flex-start;gap:24px}
  .panel__bar{gap:12px}
}

/* Estado inicial de las animaciones. Si no hay JS o se reduce el movimiento,
   .reveal debe quedar visible: por eso el ocultado lo aplica GSAP, no el CSS. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}