/* Valsot — capa visual dinámica (ilustraciones, ticker, frase, scroll horizontal).
   Todo se ve bien sin JavaScript; la clase html.motion activa los efectos. */

/* ---------- Hero ---------- */
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.beam{position:absolute;top:-30%;left:-40%;width:45%;height:160%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(212,175,106,.07) 45%,rgba(240,220,168,.12) 50%,rgba(212,175,106,.07) 55%,transparent 100%);
  transform:rotate(14deg);opacity:0}
html.motion .beam{animation:beam 9s ease-in-out 1.6s infinite}
@keyframes beam{0%{left:-45%;opacity:0}10%{opacity:1}55%{opacity:1}70%{left:110%;opacity:0}100%{left:110%;opacity:0}}
.seal-inner .w{position:relative;display:inline-block;overflow:hidden}
.seal-inner .w .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,250,235,.85) 50%,transparent 70%);
  mix-blend-mode:overlay;transform:translateX(-120%);pointer-events:none}
html.motion .seal-inner .w .shine{animation:shine 6s ease-in-out 2.8s infinite}
@keyframes shine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.hero h1 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .wd>span{display:inline-block;will-change:transform}
.hero h1 em .wd>span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Ticker ---------- */
.ticker{background:var(--navy-950);border-block:1px solid rgba(212,175,106,.22);overflow:hidden;padding:20px 0;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy-950),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy-950),transparent)}
.ticker-track{display:flex;align-items:center;gap:34px;width:max-content;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;color:var(--gold-300);white-space:nowrap}
.ticker-track i{width:9px;height:9px;transform:rotate(45deg);background:var(--gold-grad);flex:none}
.ticker-track span:nth-of-type(even){color:transparent;-webkit-text-stroke:1px rgba(235,211,156,.75)}
html:not(.motion) .ticker-track{animation:tick 45s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Servicios ---------- */
.svc .art{width:100%;height:auto;max-height:120px;color:var(--gold-500);margin:6px 0 18px;overflow:visible}
.svc .art+.ic{display:none}
.svc{--mx:50%;--my:50%;transform-style:preserve-3d}
.svc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(212,175,106,.16),transparent 45%)}
.svc:hover::after{opacity:1}
.svc-progress{display:none;height:2px;background:var(--line);border-radius:2px;margin-top:34px;overflow:hidden}
.svc-progress span{display:block;height:100%;width:100%;background:var(--gold-grad);transform-origin:left;transform:scaleX(0)}

/* Scroll horizontal (solo escritorio con movimiento) */
html.motion .svc-section.h-scroll{padding:70px 0 60px;min-height:100vh;display:flex;align-items:center;overflow:hidden}
html.motion .svc-section.h-scroll .wrap{width:100%;max-width:none;padding-left:max(16px,calc((100vw - var(--wrap)) / 2))}
html.motion .svc-section.h-scroll .head{margin-bottom:36px;max-width:var(--wrap)}
html.motion .svc-section.h-scroll .services{display:flex;gap:24px;width:max-content;padding-right:max(16px,calc((100vw - var(--wrap)) / 2))}
html.motion .svc-section.h-scroll .svc{width:min(400px,32vw);flex:none}
html.motion .svc-section.h-scroll .svc:hover{transform:none}
html.motion .svc-section.h-scroll .svc-progress{display:block;max-width:var(--wrap)}

/* ---------- Frase central ---------- */
.statement{position:relative;background:radial-gradient(900px 500px at 50% 100%,#17325A 0%,rgba(10,24,48,0) 70%),var(--navy-950);color:#fff;padding:150px 0 170px;overflow:hidden;text-align:center;isolation:isolate}
.statement .rule{justify-content:center}.statement .rule::after{content:"";width:42px;height:1px;background:var(--gold-500)}
.st-cols{position:absolute;inset:auto 0 0;width:100%;height:100%;opacity:.13;z-index:-1}
.st-text{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:1.05;max-width:1000px;margin:18px auto 26px;letter-spacing:-.01em}
.st-text .sw{display:inline-block;transition:color .2s}
html.motion .st-text .sw{color:rgba(255,255,255,.16)}
.st-text .sw.lit{color:#fff}
.st-text .sw.gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-sub{color:rgba(255,255,255,.72);font-size:1.1rem;max-width:620px;margin:0 auto 34px}

/* ---------- Pasos ---------- */
.steps{position:relative}
.steps-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);display:none}
.steps-line span{display:block;height:100%;background:var(--gold-grad);transform-origin:left;transform:scaleX(1)}
html.motion .steps-line{display:block}
html.motion .step{border-left:0;padding-top:40px}
html.motion .step::before{content:"";position:absolute;top:-6px;left:28px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--gold-500)}

/* ---------- Cursor ---------- */
.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:40;
  background:radial-gradient(circle,rgba(212,175,106,.16) 0%,rgba(212,175,106,.05) 40%,transparent 70%);opacity:0;transition:opacity .4s ease;mix-blend-mode:screen;display:none}
html.motion.fine .cursor-glow{display:block}

/* Header que se oculta al bajar */
html.motion .header{transition:background .3s ease,box-shadow .3s ease,padding .3s ease,transform .35s ease}
html.motion .header.hide{transform:translateY(-100%)}

@media (max-width:680px){
  .statement{padding:100px 0 120px}
  .ticker{padding:14px 0}
  .svc .art{max-height:96px}
}
@media (prefers-reduced-motion:reduce){
  .beam,.seal-inner .w .shine,.ticker-track{animation:none!important}
  .cursor-glow{display:none!important}
}