/* Movimiento compartido por D y E. Sin JavaScript o con «reducir movimiento», todo queda visible y quieto. */
:root {
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
}

/* Barra de progreso de lectura */
.barra-progreso {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: 3px;
  background: var(--teal); transform: scaleX(0); transform-origin: 0 50%;
}
html:not(.con-movimiento) .barra-progreso { display: none; }

/* Progreso de scroll: 0 al empezar, 1 al terminar. Sin movimiento, siempre 1 */
.con-movimiento [data-progreso] { --p: 0; }
html:not(.con-movimiento) [data-progreso] { --p: 1; }

/* Apariciones */
.con-movimiento [data-reveal]:not(.split) {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.con-movimiento [data-reveal="escala"]:not(.split):not(.is-in) { transform: scale(.94); }
.con-movimiento [data-reveal].is-in { opacity: 1; transform: none; }
/* La máscara se aplica al contenido: un elemento recortado del todo no cuenta como visible */
.con-movimiento [data-reveal="mascara"]:not(.split) { opacity: 1; transform: none; }
.con-movimiento [data-reveal="mascara"] > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.con-movimiento [data-reveal="mascara"].is-in > * { clip-path: inset(0 0 0 0); }

/* Titulares palabra a palabra */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.split .w > span { display: inline-block; }
.con-movimiento .split .w > span { transform: translateY(115%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms + var(--d, 0) * 1ms); }
.con-movimiento .split.is-in .w > span { transform: none; }

/* Párrafo que se rellena al avanzar */
.con-movimiento [data-relleno] > span[aria-hidden] { opacity: clamp(.16, calc(var(--p, 0) * (var(--n) + 8) - var(--i)), 1); }

/* Parallax genérico */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Marquesinas */
.marquesina { overflow: hidden; }
.marquesina-mover { display: flex; width: max-content; }
.marquesina-mover > * { flex: none; }
.con-movimiento .marquesina-mover { animation: marquesina var(--dur, 40s) linear infinite; }
.marquesina:hover .marquesina-mover, .marquesina:focus-within .marquesina-mover { animation-play-state: paused; }
@keyframes marquesina { to { transform: translate3d(-50%, 0, 0); } }
html:not(.con-movimiento) .marquesina-mover { width: auto; flex-wrap: wrap; }
html:not(.con-movimiento) .marquesina-mover > [aria-hidden="true"] { display: none; }

/* Botones con imán e inclinación 3D */
[data-iman] {
  transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0);
  transition: transform .35s var(--ease), background-color .15s, color .15s, border-color .15s;
}
[data-inclinar] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s var(--ease); }

/* Cursor propio */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--yellow); pointer-events: none;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background-color .25s, opacity .2s;
}
.cursor.is-grande { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(255, 205, 0, .22); box-shadow: inset 0 0 0 1.5px var(--yellow); }
.cursor:not([data-texto=""])[data-texto] { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--yellow); box-shadow: none; }
.cursor[data-texto]:not([data-texto=""])::after {
  content: attr(data-texto); position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink); font: 800 .875rem/1 var(--font-body);
}
.cursor.is-fuera { opacity: 0; }

/* Vista previa que sigue al puntero */
.previa {
  position: fixed; left: 0; top: 0; z-index: 30; width: 320px; height: 220px; margin: -110px 0 0 40px;
  overflow: hidden; border-radius: 14px; pointer-events: none; opacity: 0; scale: .6;
  transition: opacity .3s, scale .45s var(--ease);
}
.previa.is-visible { opacity: 1; scale: 1; }
.previa img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Comparador personas / datos */
.comparador { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; --pos: 50%; }
.comparador figure { position: absolute; inset: 0; margin: 0; }
.comparador figure > img { width: 100%; height: 100%; object-fit: cover; }
.comp-b { clip-path: inset(0 0 0 var(--pos)); }
.comp-tirador { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.comp-tirador span {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: #fff; color: var(--ink); font-weight: 800; font-size: 1.25rem;
}
.comp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparador:has(.comp-range:focus-visible) .comp-tirador span { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 719px) { .comparador { aspect-ratio: 4 / 5; } }

/* Arrastre */
[data-arrastrar] { cursor: grab; }
[data-arrastrar] img { -webkit-user-drag: none; user-select: none; }
.is-arrastrando { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }