/* ---------- barra de avance de la página ---------- */
.progreso { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 2px; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
header { transition: background .4s, color .4s, transform .5s var(--curva); }
header.oculto { transform: translateY(-110%); }

/* ---------- palabras que suben ---------- */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.pal > span { display: inline-block; will-change: transform; }

/* ---------- LA CINTA: los eventos corren al ritmo del scroll ---------- */
.cinta { padding: 26px 0 8px; overflow: hidden; }
.cinta-fila { display: flex; width: max-content; will-change: transform; }
.cinta-fila + .cinta-fila { margin-top: 2px; }
.cinta-dentro { display: flex; gap: 26px; padding-right: 26px; align-items: center; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 740; font-size: clamp(30px, 3.8vw, 54px); letter-spacing: -.045em; line-height: 1.1; white-space: nowrap; animation: cinta-corre 40s linear infinite; }
.cinta-fila.al-reves .cinta-dentro { animation-direction: reverse; color: var(--oro-texto); }
.cinta-dentro i { width: 12px; height: 12px; border-radius: 50%; background: var(--oro); flex: 0 0 12px; }
.cinta-dentro img { width: 92px; height: 54px; object-fit: cover; border-radius: 999px; }
@keyframes cinta-corre { to { transform: translateX(-50%); } }

/* ---------- formas con inclinación ---------- */
.formas-rejilla { perspective: 900px; }
.forma { transform-style: preserve-3d; transition: background .3s, color .3s, transform .35s cubic-bezier(.2, .8, .2, 1); will-change: transform; }

/* llegada y salida atadas al scroll (elekta-motion.js §11) */
[data-viaje] { transform: translate(var(--vx, 0px), var(--vy, 0px)) rotate(var(--vr, 0deg)) scale(var(--vs, 1)); opacity: var(--vo, 1); will-change: transform, opacity; }
.forma[data-viaje] { transform: translate(var(--vx, 0px), var(--vy, 0px)) rotate(var(--vr, 0deg)) scale(var(--vs, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- EL FINAL: telón negro (receta Santa Lucía / ITERIA) ---------- */
.pie-telon { position: relative; }
.pie { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #0b0a09; color: #f1ece2; }
@media (min-width: 1024px) and (min-height: 760px) {
  .pie-telon { height: 100svh; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .pie-telon > .pie { position: fixed; inset: auto 0 0 0; height: 100svh; }
}
.pie-rejilla { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%); }
.pie-luz { position: absolute; left: 50%; top: 38%; width: 80vw; height: 70vh; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(201 164 92 / .2), rgb(201 164 92 / .06) 55%, transparent); filter: blur(20px); }
.pie.vivo .pie-luz { animation: pie-respira 9s ease-in-out infinite; }
@keyframes pie-respira { 50% { opacity: .6; transform: scale(1.08); } }
.pie-franja { position: relative; z-index: 2; margin: 52px -16px 0; transform: rotate(-2deg) scale(1.05); background: var(--oro); color: #0b0a09; padding: 11px 0; overflow: hidden; }
.pie-franja div { display: flex; gap: 30px; width: max-content; white-space: nowrap; font-family: Cinzel, serif; font-weight: 700; font-size: 14px; letter-spacing: .2em; }
.pie-franja span { display: inline-flex; align-items: center; gap: 30px; }
.pie-franja span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #0b0a09; }
.pie.vivo .pie-franja div { animation: cinta-corre 38s linear infinite; }
.pie-cuerpo { position: relative; z-index: 2; width: min(1200px, 100% - 48px); margin: 0 auto; flex: 1; display: flex; flex-direction: column; padding-top: 52px; }
.pie-arriba { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; }
.pie-rotulo { font-family: Cinzel, serif; font-weight: 600; letter-spacing: .3em; font-size: 12px; color: var(--oro-claro); }
.pie h2 { margin-top: 14px; max-width: 15ch; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 740; font-size: clamp(32px, 4vw, 58px); line-height: 1; letter-spacing: -.045em; }
.pie h2 em { font-style: normal; color: var(--oro); }
.pie-pildoras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pildora { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .04); color: #f1ece2; font-weight: 600; font-size: 15px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); transition: transform .35s var(--curva), border-color .3s, background .3s; }
.pildora:hover { border-color: var(--oro); background: rgb(201 164 92 / .08); }
.pildora.llena { border-color: transparent; background: var(--oro); color: #0b0a09; box-shadow: 0 14px 44px -14px rgb(201 164 92 / .7); }
.pildora.llena:hover { background: var(--oro-claro); }
.pildora.wa { background: #25d366; color: #052c18; border-color: transparent; }
.pildora.wa:hover { background: #3ee07c; }
.pildora svg { width: 19px; height: 19px; }
.pie-aviso { margin-top: 16px; max-width: 52ch; font-size: 13px; line-height: 1.5; color: #b8ad99; }
.pie-aviso a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }
.pie-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; font-size: 15px; }
.pie-columnas ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 2px; }
.pie-columnas a { display: inline-flex; min-height: 38px; align-items: center; color: rgb(241 236 226 / .82); transition: color .2s; }
.pie-columnas a:hover { color: var(--oro); }
.pie-columnas p { margin-top: 14px; color: rgb(241 236 226 / .82); line-height: 1.6; }
.por-confirmar { color: #b8ad99; font-style: italic; }
.pie-gigante { position: relative; margin-top: auto; padding-top: 24px; pointer-events: none; user-select: none; }
.pie-gigante svg { display: block; width: 100%; max-height: 24vh; opacity: 0; transform: translateY(40%); transition: opacity 1.2s var(--curva), transform 1.4s var(--curva); }
.pie.vivo .pie-gigante svg { opacity: 1; transform: none; }
.pie-legal { position: relative; z-index: 2; border-top: 1px solid rgb(255 255 255 / .08); }
.pie-legal-dentro { width: min(1200px, 100% - 48px); margin: 0 auto; padding: 16px 0 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: #b8ad99; }
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie-legal nav a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .25); text-underline-offset: 4px; transition: color .2s; }
.pie-legal nav a:hover { color: #f1ece2; }
.leyendas { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .05); color: #f1ece2; font-weight: 600; font-size: 13px; }
.credito { display: inline-flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); color: #b8ad99; transition: border-color .3s, background .3s; }
.credito:hover { border-color: #00e5c8; background: rgb(0 229 200 / .06); }
.iteria { display: inline-flex; flex-direction: column; gap: 2px; line-height: .95; font-family: 'Plus Jakarta Sans', Geist, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.iteria b { color: #f0ece4; font-weight: 800; }
.iteria .ai { color: #00e5c8; }
.iteria .punto { color: #7b5ea7; }
.iteria .raya { display: flex; height: 2px; margin-top: 1px; }
.iteria .raya i:first-child { width: 46%; background: #00e5c8; border-radius: 2px 0 0 2px; }
.iteria .raya i:last-child { width: 54%; background: #7b5ea7; border-radius: 0 2px 2px 0; }
.arriba { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .03); color: #f1ece2; transition: border-color .3s, color .3s; }
.arriba:hover { border-color: var(--oro); color: var(--oro); }
.ref-imagenes { font-size: 12.5px; color: var(--suave); }

@media (max-width: 860px) {
  .pie-arriba, .pie-columnas { grid-template-columns: 1fr; }
  .pie-franja { margin-top: 36px; }
  .pie-cuerpo { padding-top: 36px; }
  .pie-legal-dentro { flex-direction: column; align-items: flex-start; }
  .cinta-dentro img { width: 64px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .pie-gigante svg { opacity: 1; transform: none; } .cinta-dentro, .pie-franja div { animation: none !important; } }