/* ───────── Movimiento (solo la portada) ───────── */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Barra de avance, foco de luz y cabecera */
.barra { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; background: var(--oro); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.halo { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--oro) 13%, transparent), transparent); transform: translate3d(var(--hx, 50vw), var(--hy, 30vh), 0); will-change: transform; }
.halo.on { opacity: 1; }
main, footer { position: relative; z-index: 1; }
.cab { transition: background .3s; }
.cab .caja { transition: padding .3s; }
.cab.scrolled .caja { padding-block: 8px; }

/* Portada: orbes de luz, titular palabra a palabra, destello dorado */
.portada { position: relative; overflow: hidden; padding-block: 96px 88px; }
.portada .caja { position: relative; z-index: 1; }
.fondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .55;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, #000, transparent); mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, #000, transparent); }
.orbe { position: absolute; border-radius: 50%; filter: blur(70px); }
.o1 { width: 520px; height: 520px; left: 52%; top: -160px; background: color-mix(in srgb, var(--oro) 34%, transparent); animation: flota 16s ease-in-out infinite; }
.o2 { width: 380px; height: 380px; left: 4%; top: 120px; background: color-mix(in srgb, var(--oro) 14%, transparent); animation: flota 21s ease-in-out infinite reverse; }
@keyframes flota { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 50px) scale(1.12); } }
.portada h1 { font-size: clamp(48px, 8.6vw, 112px); max-width: 12ch; line-height: 1; }
.portada h1 em { background: linear-gradient(100deg, var(--oro) 20%, #fff3cf 45%, var(--oro) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: destello 5s ease-in-out infinite; padding-right: .08em; }
@keyframes destello { 0% { background-position: 120% 0; } 60%, 100% { background-position: -80% 0; } }
.js [data-palabras] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin-bottom: -.14em; }
.js [data-palabras] .w > span { display: inline-block; transform: translateY(112%); transition: transform 1s cubic-bezier(.2, .8, .1, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.js [data-palabras].in .w > span { transform: none; }
.js .portada .etq, .js .portada .sub, .js .portada .acciones { opacity: 0; transform: translateY(18px); transition: opacity .9s, transform .9s; }
.js .portada.in .etq { opacity: 1; transform: none; }
.js .portada.in .sub { opacity: 1; transform: none; transition-delay: .55s; }
.js .portada.in .acciones { opacity: 1; transform: none; transition-delay: .75s; }

/* Lienzo del diagrama */
.lienzo { margin-top: 64px; position: relative; border: 1px solid var(--linea); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--tinta-2) 80%, transparent), transparent); overflow: hidden; }
.lienzo canvas { display: block; width: 100%; height: 300px; }

/* Cinta de documentos */
.cinta { overflow: hidden; border-block: 1px solid var(--linea); padding-block: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
.cinta .pista { display: flex; width: max-content; animation: cinta 48s linear infinite; }
.cinta span { font: 500 13px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); white-space: nowrap; padding-inline: 26px; display: inline-flex; align-items: center; gap: 52px; }
.cinta span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oro); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Aparecer al bajar */
.js .rv { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s; transition-delay: calc(var(--rd, 0) * 110ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }

/* Texto que se ilumina al hacer scroll */
.js .sw { opacity: .2; transition: opacity .35s; }
.js .sw.on { opacity: 1; }

/* Ventanas de portal con error */
.portales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.vent { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.vent .bt { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.vent .bt i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.vent .cuerpo { padding: 16px; display: grid; gap: 12px; font: 12px var(--f-mono); color: var(--piedra); }
.carga { height: 4px; background: var(--linea); border-radius: 4px; overflow: hidden; }
.carga i { display: block; height: 100%; width: 0; background: var(--oro); }
.vent .err { color: var(--oro); opacity: 0; }
.in .carga i { animation: cargar 5.2s ease-in-out infinite; animation-delay: var(--d); }
.in .vent .err { animation: err 5.2s infinite; animation-delay: var(--d); }
.in .vent { animation: sacudir 5.2s infinite; animation-delay: var(--d); }
@keyframes cargar { 0% { width: 0; } 55%, 92% { width: 72%; } 100% { width: 0; } }
@keyframes err { 0%, 55% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sacudir { 0%, 56%, 70%, 100% { transform: none; border-color: var(--linea); } 58% { transform: translateX(-5px); border-color: var(--oro); } 60% { transform: translateX(5px); border-color: var(--oro); } 62% { transform: translateX(-3px); border-color: var(--oro); } 64% { transform: none; border-color: var(--oro); } }

/* Mes con tres tardes perdidas */
.cifra .mes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.mes i { aspect-ratio: 1; border-radius: 4px; background: var(--tinta-2); border: 1px solid var(--linea); transition: background .5s, border-color .5s, box-shadow .5s, transform .5s; }
.mes i.on { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 18px color-mix(in srgb, var(--oro) 60%, transparent); transform: scale(1.12); }

/* Pasos unidos por una línea */
.pasos { position: relative; }
.pasos::after { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 2px; background: var(--oro); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 14px color-mix(in srgb, var(--oro) 70%, transparent); }
.paso { transition: transform .5s, border-color .5s; }
.paso:hover { transform: translateY(-6px); border-color: var(--oro); }

/* Tarjetas: foco de luz que sigue al ratón */
.plan, .paso { position: relative; overflow: hidden; }
.plan > *, .paso > * { position: relative; z-index: 1; }
.luz { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--oro) 16%, transparent), transparent 65%); }
.plan:hover .luz, .paso:hover .luz { opacity: 1; }
.plan { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s; }
.plan.dest { border: 1px solid transparent; background: linear-gradient(var(--tinta-2), var(--tinta-2)) padding-box, conic-gradient(from var(--ang), var(--oro), transparent 28%, var(--oro) 52%, transparent 78%, var(--oro)) border-box; animation: gira 6s linear infinite; }
@keyframes gira { to { --ang: 360deg; } }
.plan .precio { font-variant-numeric: tabular-nums; }

/* Botones */
.boton { transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s, border-color .25s, box-shadow .25s; position: relative; overflow: hidden; }
.boton:not(.suave):hover { box-shadow: 0 8px 30px -6px color-mix(in srgb, var(--oro) 70%, transparent); }
.boton:not(.suave)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; animation: brillo 4.5s ease-in-out infinite 1.5s; pointer-events: none; }
@keyframes brillo { 0% { background-position: 150% 0; } 35%, 100% { background-position: -50% 0; } }

/* Preguntas */
.preguntas details { transition: background .3s, padding .3s; }
.preguntas details[open] { background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 7%, transparent), transparent); padding-inline: 14px; }
.preguntas details[open] p { animation: baja .4s ease-out; }
@keyframes baja { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 860px) {
  .portales { grid-template-columns: minmax(0, 1fr); }
  .cifra .mes { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .pasos::after { display: none; }
  .lienzo canvas { height: 380px; }
  .halo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbe, .cinta .pista, .plan.dest, .portada h1 em, .boton::after, .in .carga i, .in .vent .err, .in .vent { animation: none !important; }
  .js .rv, .js [data-palabras] .w > span, .js .portada .etq, .js .portada .sub, .js .portada .acciones { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .js .sw { opacity: 1; }
  .vent .err { opacity: 1; } .carga i { width: 72%; }
}

.js .paso.rv.in:hover { transform: translateY(-6px); transition-delay: 0s; }