/* ==========================================================================
   AI-CREATIVE-STACK — landing de venta
   Sistema visual heredado de PromptedTB. Los ocho colores son un universo
   cerrado: ningún otro valor entra.
   ========================================================================== */

/* --- Fuentes autoalojadas -------------------------------------------------- */
@font-face{font-family:'Plus Jakarta Sans';src:url('assets/fonts/PlusJakartaSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('assets/fonts/PlusJakartaSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('assets/fonts/PlusJakartaSans-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('assets/fonts/EBGaramond-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* --- Tokens ---------------------------------------------------------------- */
:root{
  /* Color — los ocho, cerrados */
  --rojo-marca:#E50914;      /* RELLENA: fondos de botón, barras, puntos */
  --rojo-profundo:#B8000B;   /* ESCRIBE: texto rojo, hover, pressed */
  --blanco:#FFFFFF;
  --blanco-roto:#F7F7F5;
  --negro:#0A0A0A;
  --gris-oscuro:#3A3A3A;
  --gris-claro:#E5E5E5;      /* bordes y separadores — nunca texto */
  --tinte-rojo:#FFF1F2;

  /* Tipografía */
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala fluida */
  --step--1:clamp(0.83rem,0.79rem + 0.18vw,0.9rem);
  --step-0:clamp(1rem,0.94rem + 0.3vw,1.125rem);
  --step-1:clamp(1.3rem,1.06rem + 1.2vw,1.75rem);
  --step-2:clamp(1.7rem,1.14rem + 2.8vw,2.75rem);
  --step-3:clamp(2.2rem,1.38rem + 4.1vw,4.5rem);
  /* El máximo de la escala de marca es 6.5rem. En este hero el h1 convive
     con el subtítulo, el botón y la línea de precio por encima del pliegue,
     así que se topa en 5.5rem: a 6.5 el botón caía fuera en portátiles. */
  --step-4:clamp(2.6rem,1.5rem + 5.4vw,5.5rem);

  /* Ritmo */
  --gutter:clamp(1rem,0.6rem + 2vw,2rem);
  --ancho:1200px;
  --seccion:clamp(4.5rem,3rem + 7.5vw,9rem);

  /* Movimiento — curva única */
  --curva:cubic-bezier(0.22,0.61,0.36,1);
  --micro:150ms;
  --aparece:500ms;

  /* Alto del banner de consentimiento; main.js lo mide y lo fija */
  --alto-consent:0px;
}

/* --- Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block;height:auto}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-0.02em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--rojo-profundo);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--negro)}

/* Foco visible, con doble anillo para que sobreviva a los dos fondos */
:focus-visible{
  outline:3px solid var(--rojo-profundo);
  outline-offset:3px;
  border-radius:2px;
}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:var(--seccion)}
.seccion--tinte{background:var(--blanco-roto)}
.salta-a{position:absolute;left:-9999px}
.salta-a:focus{position:fixed;left:1rem;top:1rem;z-index:100;background:var(--negro);color:var(--blanco);padding:.75rem 1.25rem;border-radius:2px}

/* --- Antetítulos ----------------------------------------------------------- */
/* Garamond cursiva, USO 3 de 3: antetítulos de sección */
.antetitulo{
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--step-1);
  color:var(--gris-oscuro);
  line-height:1;
  margin-bottom:.75rem;
}
/* Antetítulo del hero: momento terminal, no Garamond */
.mono-eyebrow{
  font-family:var(--mono);
  font-size:var(--step--1);
  color:var(--gris-oscuro);
  letter-spacing:.04em;
  margin-bottom:1.1rem;
}

.titulo-seccion{font-size:var(--step-3);max-width:20ch}
.entradilla{font-size:var(--step-1);color:var(--gris-oscuro);max-width:58ch;line-height:1.4;font-weight:400;letter-spacing:-0.01em}
.cuerpo{max-width:65ch;color:var(--gris-oscuro)}
.nota{font-size:var(--step--1);color:var(--gris-oscuro);max-width:65ch}

/* --- Botones --------------------------------------------------------------- */
/* El rojo de marca RELLENA; el texto encima es blanco (4,79 — pasa AA) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-weight:800;font-size:var(--step-0);
  letter-spacing:-0.01em;
  padding:1.05rem 2.25rem;
  border:2px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--micro) var(--curva),
             border-color var(--micro) var(--curva),
             color var(--micro) var(--curva);
}
.btn--principal{background:var(--rojo-marca);color:var(--blanco)}
.btn--principal:hover,
.btn--principal:focus-visible{background:var(--rojo-profundo);color:var(--blanco)}
.btn--principal:active{background:var(--rojo-profundo);color:var(--blanco)}
.btn--secundario{background:transparent;color:var(--negro);border-color:var(--negro)}
.btn--secundario:hover,
.btn--secundario:focus-visible{background:var(--negro);color:var(--blanco)}

.bajo-boton{
  font-family:var(--mono);font-size:var(--step--1);
  color:var(--gris-oscuro);margin-top:1rem;
}

/* --- Cabecera -------------------------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:40;
  background:var(--blanco);
  border-bottom:1px solid var(--gris-claro);
}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;
}
.cabecera__logo{height:34px;width:auto}
.cabecera__precio{
  font-family:var(--mono);font-size:var(--step--1);color:var(--gris-oscuro);
  display:none;
}
@media (min-width:600px){.cabecera__precio{display:block}}
.cabecera .btn{padding:.7rem 1.4rem;font-size:var(--step--1)}

/* --- Hero ------------------------------------------------------------------ */
.hero{padding-block:clamp(2rem,1.4rem + 2.6vw,3.25rem) clamp(3.5rem,2rem + 6vw,7rem)}
.hero__grid{display:grid;gap:clamp(2.25rem,1rem + 5vw,4rem);align-items:start}
/* A dos columnas solo a partir de 1100px: entre 980 y 1100 la columna del
   árbol quedaba por debajo del ancho de su línea más larga y lo recortaba. */
@media (min-width:1100px){.hero__grid{grid-template-columns:1.12fr .88fr}}

/* El titular ocupa el ancho completo: a 104px en una columna de 600px
   caían seis líneas y el botón se iba por debajo del pliegue. */
.hero__titulo{
  font-size:var(--step-4);
  max-width:19ch;
  margin-bottom:clamp(1.5rem,1rem + 1.6vw,2.25rem);
}
/* Garamond cursiva, USO 1 de 3: una palabra dentro del titular */
.hero__titulo em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:0;
}
.hero__sub{font-size:var(--step-1);color:var(--gris-oscuro);max-width:42ch;line-height:1.35;font-weight:400;letter-spacing:-0.01em;margin-bottom:1.85rem}

/* Ancla visual: el árbol real del producto */
.arbol{
  font-family:var(--mono);
  font-size:clamp(.66rem,.52rem + .62vw,.84rem);
  line-height:1.95;
  background:var(--blanco-roto);
  border:1px solid var(--gris-claro);
  border-radius:3px;
  padding:clamp(1.1rem,.7rem + 1.6vw,1.9rem);
  overflow-x:auto;
  color:var(--negro);
}
.arbol__raiz{color:var(--negro);margin-bottom:.15rem}

/* Las ramas se dibujan con bordes, no con caracteres de dibujo de caja:
   la woff2 del sitio está subconjuntada y no los trae. Además así son
   nítidas a cualquier tamaño. */
.arbol__ramas{padding-left:1.6em}
.arbol__ramas li{
  position:relative;padding-left:1.5em;
  display:flex;gap:1rem;justify-content:space-between;white-space:nowrap;
}
.arbol__ramas li::before{          /* tramo vertical */
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:1px;background:var(--gris-claro);
}
.arbol__ramas li:last-child::before{bottom:auto;height:.98em}
.arbol__ramas li::after{           /* marca horizontal */
  content:'';position:absolute;left:0;top:.98em;
  width:.95em;height:1px;background:var(--gris-claro);
}
.arbol__ruta{color:var(--negro)}
.arbol__dato{color:var(--gris-oscuro);text-align:right}
.arbol__pie{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--gris-claro);
  color:var(--gris-oscuro);white-space:normal;line-height:1.6;
}
@media (max-width:520px){.arbol__dato{display:none}}

/* --- Banda de prueba ------------------------------------------------------- */
.pruebas{display:grid;gap:1.25rem;margin-top:3rem}
@media (min-width:720px){.pruebas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.pruebas{grid-template-columns:repeat(3,1fr)}}

.pieza{
  border:1px solid var(--gris-claro);border-radius:3px;
  overflow:hidden;background:var(--blanco);
  display:flex;flex-direction:column;
}
.pieza__media{position:relative;background:var(--blanco-roto);aspect-ratio:16/9;overflow:hidden}
.pieza__media video,.pieza__media img{width:100%;height:100%;object-fit:cover}
/* Tres carteles verticales dentro de un marco apaisado: enteros y en fila,
   en vez de uno solo recortado, que se comía la mitad de la composición. */
.pieza__media--trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.5rem;padding:.6rem;align-items:center;
}
.pieza__media--trio img{height:auto;max-height:100%;object-fit:contain}
.pieza--vertical .pieza__media{aspect-ratio:4/5}
.pieza--vertical .pieza__media video,
.pieza--vertical .pieza__media img{object-fit:contain;background:var(--negro)}
.pieza__info{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pieza__nombre{font-weight:800;font-size:var(--step-0);letter-spacing:-0.01em}
.pieza__que{font-size:var(--step--1);color:var(--gris-oscuro)}

/* Etiqueta de atribución — obligatoria en cada pieza */
.etiqueta{
  align-self:flex-start;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;
  padding:.3rem .55rem;border-radius:2px;margin-bottom:.15rem;
}
.etiqueta--cliente{background:var(--rojo-marca);color:var(--blanco)}
.etiqueta--propia{background:var(--negro);color:var(--blanco)}
.etiqueta--demo{background:var(--blanco);color:var(--gris-oscuro);border:1px solid var(--gris-claro)}

/* Botón de reproducción del reel */
.reproducir{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--step--1);color:var(--blanco);
}
/* Sin esto el display:flex de la clase gana al [hidden] del navegador,
   la capa nunca se retira y tapa los controles nativos del vídeo. */
.reproducir[hidden]{display:none}
.reproducir__pastilla{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--rojo-marca);color:var(--blanco);
  padding:.7rem 1.15rem;border-radius:2px;font-weight:400;
  transition:background-color var(--micro) var(--curva);
}
.reproducir:hover .reproducir__pastilla,
.reproducir:focus-visible .reproducir__pastilla{background:var(--rojo-profundo)}

/* --- Problema -------------------------------------------------------------- */
.dolores{display:grid;gap:1.25rem;margin-top:2.5rem}
@media (min-width:820px){.dolores{grid-template-columns:repeat(3,1fr)}}
.dolor{
  border-top:2px solid var(--negro);padding-top:1.1rem;
  font-size:var(--step-1);line-height:1.3;letter-spacing:-0.01em;max-width:24ch;
}
.coste{
  margin-top:3rem;padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  background:var(--blanco-roto);border-left:3px solid var(--rojo-marca);
  max-width:70ch;color:var(--negro);
}

/* --- Qué es una skill ------------------------------------------------------ */
.pasos{display:grid;gap:1.25rem;margin-top:2.75rem;counter-reset:paso}
@media (min-width:820px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{
  position:relative;padding:1.75rem 1.5rem;
  background:var(--blanco);border:1px solid var(--gris-claro);border-radius:3px;
}
.paso__num{
  font-family:var(--mono);font-size:var(--step--1);
  color:var(--rojo-profundo);display:block;margin-bottom:.85rem;
}
.paso__texto{font-size:var(--step-1);line-height:1.25;letter-spacing:-0.01em;font-weight:800}
.paso__detalle{font-size:var(--step--1);color:var(--gris-oscuro);margin-top:.6rem}
.flecha{display:none}
@media (min-width:820px){
  .flecha{
    display:block;position:absolute;right:-1.05rem;top:50%;
    /* rojo profundo, no el de marca: es un trazo de 1,6 px y a 4,47 iba
       justo. Con --rojo-profundo sube a 6,43 sobre el fondo alterno. */
    transform:translateY(-50%);z-index:2;color:var(--rojo-profundo);
  }
}

/* --- Qué hay dentro -------------------------------------------------------- */
.areas{display:grid;gap:clamp(2.5rem,1.5rem + 3vw,4rem);margin-top:3.5rem}
.area{
  display:grid;gap:clamp(1.25rem,.8rem + 2vw,2.5rem);
  padding-bottom:clamp(2.5rem,1.5rem + 3vw,4rem);
  border-bottom:1px solid var(--gris-claro);
}
.area:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:900px){
  .area--con-media{grid-template-columns:1fr .8fr;align-items:start}
  .area--con-media.area--invertida .area__media{order:-1}
}
.area__cifra{
  font-family:var(--mono);font-size:var(--step--1);
  color:var(--rojo-profundo);margin-bottom:.6rem;
}
.area__nombre{font-size:var(--step-2);margin-bottom:.75rem}
.area__que{color:var(--gris-oscuro);max-width:52ch;margin-bottom:1.5rem}
.fichas{display:flex;flex-wrap:wrap;gap:.4rem}
.ficha{
  font-family:var(--mono);font-size:.72rem;
  background:var(--blanco-roto);border:1px solid var(--gris-claro);
  color:var(--negro);
  padding:.34rem .55rem;border-radius:2px;white-space:nowrap;
}
.ficha--propia{background:var(--tinte-rojo);border-color:#F3D6D8}
.area__media{display:grid;gap:.6rem}
.area__media img,.area__media video{border:1px solid var(--gris-claro);border-radius:3px;width:100%}
.carteles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.area__caption{font-family:var(--mono);font-size:.68rem;color:var(--gris-oscuro);letter-spacing:.03em}

/* --- Lo original ----------------------------------------------------------- */
.originales{display:grid;gap:2.5rem;margin-top:3rem}
@media (min-width:900px){.originales{grid-template-columns:1.15fr .85fr;align-items:start}}
.bloque__titulo{font-size:var(--step-1);margin-bottom:1rem}
.tabla-agentes{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.tabla-agentes th{
  text-align:left;font-family:var(--mono);font-weight:400;
  color:var(--gris-oscuro);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;padding:0 0 .6rem;border-bottom:1px solid var(--gris-claro);
}
.tabla-agentes td{padding:.55rem 0;border-bottom:1px solid var(--gris-claro);vertical-align:top}
.tabla-agentes td:first-child{font-family:var(--mono);font-size:.72rem;padding-right:1rem;white-space:nowrap}
.tabla-agentes td:last-child{color:var(--gris-oscuro)}
.lista-guias{display:grid;gap:.6rem;margin-top:1rem}
.lista-guias li{
  font-family:var(--mono);font-size:.76rem;
  padding:.65rem .8rem;background:var(--tinte-rojo);border-radius:2px;
}

/* --- Honestidad ------------------------------------------------------------ */
.honestidad{
  border:2px solid var(--negro);border-radius:3px;
  padding:clamp(1.75rem,1rem + 3vw,3.25rem);
  max-width:78ch;
}
.honestidad p + p{margin-top:1.1rem}

/* --- Qué recibes ----------------------------------------------------------- */
.recibes{display:grid;gap:0;margin-top:2.5rem;max-width:80ch}
.recibes li{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding:1.1rem 0;border-bottom:1px solid var(--gris-claro);
}
.recibes li:first-child{border-top:1px solid var(--gris-claro)}
.punto{
  width:9px;height:9px;border-radius:50%;background:var(--rojo-marca);
  margin-top:.55rem;flex:none;
}
.recibes strong{font-weight:800}
.recibes span{color:var(--gris-oscuro)}

/* --- Para quién ------------------------------------------------------------ */
.publico{display:grid;gap:1.5rem;margin-top:3rem}
@media (min-width:820px){.publico{grid-template-columns:repeat(2,1fr)}}
.columna{padding:clamp(1.5rem,1rem + 2vw,2.25rem);border-radius:3px}
.columna--si{background:var(--tinte-rojo)}
.columna--no{background:var(--blanco-roto)}
.columna h3{font-size:var(--step-1);margin-bottom:1.25rem}
.columna li{
  padding:.65rem 0 .65rem 1.5rem;position:relative;color:var(--gris-oscuro);
  border-bottom:1px solid rgba(10,10,10,.07);
}
.columna li:last-child{border-bottom:0}
.columna li::before{
  position:absolute;left:0;top:.65rem;font-family:var(--mono);font-size:.85rem;
}
.columna--si li::before{content:'+';color:var(--rojo-profundo)}
.columna--no li::before{content:'−';color:var(--gris-oscuro)}

/* --- Objeciones ------------------------------------------------------------ */
.objeciones{display:grid;gap:2.25rem;margin-top:3rem}
@media (min-width:900px){.objeciones{grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem}}
.objecion h3{font-size:var(--step-1);margin-bottom:.7rem;max-width:26ch}
.objecion p{color:var(--gris-oscuro);max-width:52ch}

/* --- Cierre ---------------------------------------------------------------- */
.cierre{text-align:center}
.cierre__titulo{font-size:var(--step-3);max-width:18ch;margin:0 auto 2rem}
/* Garamond cursiva, USO 2 de 3: la línea manifiesto */
.manifiesto{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--step-2);line-height:1.3;color:var(--negro);
  max-width:24ch;margin:0 auto 2.75rem;letter-spacing:0;
}
.cierre .bajo-boton{margin-inline:auto}
.desistimiento{
  font-size:.78rem;color:var(--gris-oscuro);max-width:58ch;
  margin:2.25rem auto 0;line-height:1.55;
}

/* --- Formaciones ----------------------------------------------------------- */
.formaciones{
  border-top:1px solid var(--gris-claro);
  padding-block:clamp(2rem,1.5rem + 2vw,3rem);
  font-size:var(--step--1);color:var(--gris-oscuro);
}

/* --- Pie ------------------------------------------------------------------- */
.pie{background:var(--blanco-roto);padding-block:3rem 2rem;border-top:1px solid var(--gris-claro)}
.pie__grid{display:grid;gap:2rem}
@media (min-width:720px){.pie__grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie__logo{height:44px;width:auto;margin-bottom:.9rem}
.pie h4{
  font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-oscuro);margin:0 0 .85rem;
}
.pie a{display:block;padding:.28rem 0;font-size:var(--step--1)}
.pie p{font-size:var(--step--1);color:var(--gris-oscuro);max-width:36ch}
.pie__legal{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--gris-claro);
  font-size:.78rem;color:var(--gris-oscuro);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;
}

/* --- Barra fija de compra en móvil ----------------------------------------- */
.barra{
  position:fixed;left:0;right:0;bottom:var(--alto-consent);z-index:50;
  background:var(--blanco);border-top:1px solid var(--gris-claro);
  padding:.7rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transform:translateY(105%);
  transition:transform 300ms var(--curva);
  box-shadow:0 -6px 24px rgba(10,10,10,.07);
}
.barra.visible{transform:translateY(0)}
.barra__precio{display:flex;flex-direction:column;line-height:1.15}
.barra__cifra{font-weight:800;font-size:1.2rem}
.barra__nota{font-family:var(--mono);font-size:.66rem;color:var(--gris-oscuro)}
.barra .btn{padding:.8rem 1.5rem;font-size:var(--step--1)}
@media (min-width:900px){.barra{display:none}}
@media (max-width:899px){body{padding-bottom:calc(4.5rem + var(--alto-consent))}}

/* --- Consentimiento de cookies --------------------------------------------- */
.consentimiento{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--blanco);
  border-top:2px solid var(--negro);
  box-shadow:0 -10px 32px rgba(10,10,10,.1);
  padding:1.1rem var(--gutter);
}
.consentimiento[hidden]{display:none}
.consentimiento__caja{
  max-width:var(--ancho);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
}
.consentimiento__titulo{font-weight:800;font-size:var(--step-0);margin-bottom:.2rem}
.consentimiento__texto{
  font-size:var(--step--1);color:var(--gris-oscuro);max-width:62ch;line-height:1.5;
}
/* Rechazar y aceptar, mismo tamaño y mismo peso: nada de botón gris diminuto */
.consentimiento__botones{display:flex;gap:.6rem;flex:none}
.consentimiento__botones .btn{padding:.8rem 1.6rem;font-size:var(--step--1);flex:1}
@media (max-width:620px){
  .consentimiento__botones{width:100%}
  .consentimiento__botones .btn{flex:1}
}

/* La barra de compra se apoya encima del banner mientras esté visible, en vez
   de quedar tapada por él: ver --alto-consent y la regla .barra de arriba. */

/* --- Apariciones ----------------------------------------------------------- */
/* Un elemento aparece con opacidad 0→1 y subida de 24px. Nada más. */
.aparece{opacity:0;transform:translateY(24px)}
.aparece.visible{
  opacity:1;transform:none;
  transition:opacity var(--aparece) var(--curva),transform var(--aparece) var(--curva);
}

/* --- Movimiento reducido --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .aparece{opacity:1;transform:none}
  .barra{transform:translateY(0);transition:none}
  .barra:not(.visible){display:none}
}