/* ============================================================
   BARROSO DIGITAL · capa extra de animaciones
   ============================================================ */

/* --- main se inclina con la velocidad de scroll --- */
main{will-change:transform;transform-origin:center}

/* --- nav visible de forma inmediata --- */
.hdr .brand,.hdr .nav a,.hdr .hdr-wa,.hdr .burger{opacity:1;transform:none}

/* --- trama de puntos que sigue al cursor (toda la página) --- */
#spot{position:fixed;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(var(--ink) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:radial-gradient(260px circle at var(--sx,-999px) var(--sy,-999px),#000 0%,transparent 70%);mask-image:radial-gradient(260px circle at var(--sx,-999px) var(--sy,-999px),#000 0%,transparent 70%);opacity:.25}
.bg-ink #spot{display:none}

/* --- hero: canvas de partículas --- */
#stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}

/* --- títulos letra a letra --- */
.chars .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(6deg);transform-origin:bottom left;transition:opacity .5s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--ci,0)*22ms)}
.chars.in .ch{opacity:1;transform:none}
.chars .sp{display:inline-block;width:.28em}

/* --- subrayado dibujado bajo el h2 --- */
.sec-head h2{position:relative}
.sec-head .squig{display:block;width:120px;height:14px;margin-top:10px;overflow:visible}
.sec-head .squig path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s var(--ease) .4s}
.sec-head.in .squig path,.sec-head .in~.squig path{stroke-dashoffset:0}
.center .squig{margin-inline:auto}
.bg-ink .squig path{stroke:#fff}

/* --- imágenes: revelado por cortina + flotación --- */
.rv-clip{clip-path:inset(0 100% 0 0 round 24px);transition:clip-path 1.2s var(--ease-io)}
.rv-clip.in{clip-path:inset(0 0 0 0 round 24px)}
.feat .media img,.flag img{animation:float 8s ease-in-out infinite}
.feat.rev .media img{animation-delay:-4s}

/* --- tarjetas: entrada 3D en abanico --- */
.grid>.card,.steps>.step,.values>.value,.plans>.plan,.gear>.g,.soft>.s,.stats>.stat{perspective:1000px}
.grid>.card.rv,.values>.value.rv,.plans>.plan.rv,.gear>.g.rv,.soft>.s.rv,.stats>.stat.rv{transform:translateY(40px) rotateX(-14deg) scale(.97);transform-origin:top center}
.grid>.card.rv.in,.values>.value.rv.in,.plans>.plan.rv.in,.gear>.g.rv.in,.soft>.s.rv.in,.stats>.stat.rv.in{transform:none}
.clients>.client.rv{transform:scale(.6) rotate(-8deg)}
.clients>.client.rv.in{transform:none}
.client:hover img{animation:wobble .7s var(--ease)}
@keyframes wobble{0%{transform:scale(1.08) rotate(0)}30%{transform:scale(1.12) rotate(-4deg)}60%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1.08) rotate(0)}}

/* --- botones: onda al pulsar + brillo deslizante --- */
.btn{isolation:isolate}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .7s var(--ease) forwards;pointer-events:none;z-index:2}
.btn.ghost .rip{background:rgba(0,0,0,.18)}
@keyframes rip{to{transform:scale(4);opacity:0}}
.btn.wa::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite;z-index:1}
@keyframes shine{0%,60%{left:-80%}100%{left:130%}}

/* --- cursor con etiqueta --- */
#cursor.lbl{width:72px;height:72px;background:var(--ink);mix-blend-mode:normal;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:grid;place-items:center}
#cursor::after{content:attr(data-t)}
#ring{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;z-index:949;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .3s,height .3s}
#ring.on{opacity:.5}
#ring.big{width:0;height:0;opacity:0}
@media(hover:none){#ring{display:none}}

/* --- acordeón suave --- */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa .q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-weight:700;font-size:1.05rem;text-align:left;transition:padding-left .4s var(--ease)}
.qa.open .q{padding-left:10px}
.qa .q i{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;position:relative;transition:background .3s,transform .5s var(--ease)}
.qa .q i::before,.qa .q i::after{content:"";position:absolute;background:var(--ink);transition:background .3s}
.qa .q i::before{width:12px;height:1.5px}.qa .q i::after{width:1.5px;height:12px}
.qa.open .q i{background:var(--ink);transform:rotate(45deg)}
.qa.open .q i::before,.qa.open .q i::after{background:#fff}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden}
.qa .ans{padding:0 56px 24px 10px;color:var(--ink-3);line-height:1.7;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .6s var(--ease)}
.qa.open .ans{opacity:1;transform:none}

/* --- plan destacado: borde girando --- */
.plan.hot{overflow:hidden}
.plan.hot::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 60%,#fff 80%,transparent 100%);animation:spin 5s linear infinite;z-index:0;opacity:.35}
.plan.hot::after{content:"";position:absolute;inset:2px;border-radius:calc(var(--r-lg) - 2px);background:var(--ink);z-index:0}
.plan.hot>*{position:relative;z-index:1}

/* --- secciones oscuras: grano animado + foco --- */
.bg-ink,.cta,.card.dark,.form{position:relative}
.bg-ink::before,.form::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(3) infinite;z-index:0}
.bg-ink>.wrap,.form>*{position:relative;z-index:1}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4px,3px)}66%{transform:translate(3px,-2px)}100%{transform:translate(0,0)}}
.bg-ink{--fx:50%;--fy:50%}
.bg-ink::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--fx) var(--fy),rgba(255,255,255,.07),transparent 60%);z-index:0}

/* --- CTA: haz de luz recorriendo el borde --- */
.cta{border:1px solid transparent}
.cta .beam{position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a,0deg),transparent 0 75%,#fff 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 4s linear infinite;pointer-events:none}
@keyframes beam{to{--a:360deg}}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* --- proceso: pulso al activarse --- */
.step.on .num{animation:pop .6s var(--ease)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1.08)}}
.step .badge{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease) .15s}
.step.on .badge{opacity:1;transform:none}

/* --- barras en stats --- */
.stat{overflow:hidden}
.stat::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff;transition:width 1.4s var(--ease) .3s}
.stat.in::after{width:100%}
.stat{position:relative}

/* --- pie: BARROSO se desplaza con el scroll --- */
.ftr .big{transition:none;will-change:transform}

/* --- botón subir con anillo de progreso --- */
#top{position:fixed;right:22px;bottom:94px;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;z-index:700;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .4s,transform .5s var(--ease);box-shadow:0 10px 30px -12px rgba(0,0,0,.3)}
#top.show{opacity:1;transform:none}
#top svg.ring{position:absolute;inset:-2px;width:52px;height:52px;transform:rotate(-90deg)}
#top svg.ring circle{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:157;stroke-dashoffset:calc(157 - 157*var(--p,0))}
#top svg.arr{width:16px;height:16px}

/* --- chips: ola --- */
.chips li{animation:chipwave 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.4s)}
@keyframes chipwave{0%,80%,100%{transform:translateY(0)}90%{transform:translateY(-5px)}}

/* --- hero rating: estrellas que se encienden --- */
.hero .rating .stars{background:linear-gradient(90deg,var(--gold) 50%,#ddd 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.4s var(--ease) 1.2s}
.hero.in .rating .stars{background-position:0 0}

/* --- marquesina: velocidad ligada al scroll --- */
.marquee .track{transform:translateX(var(--shift,0px))}

/* --- form: inputs con brillo al foco --- */
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.field label{transition:color .3s,transform .3s}
.field:focus-within label{color:#fff;transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .chars .ch{opacity:1;transform:none}.rv-clip{clip-path:none}
  .grid>.card.rv,.values>.value.rv,.plans>.plan.rv,.gear>.g.rv,.soft>.s.rv,.stats>.stat.rv,.clients>.client.rv{transform:none}
  #spot,#stars,#ring,.cta .beam,.bg-ink::before,.form::before{display:none}
}

/* --- hero 3D (logo Barroso en volumen) --- */
.hero .h3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.hero .h3d-fallback{position:absolute;z-index:1;right:6%;top:50%;width:min(38vw,460px);transform:translateY(-45%);opacity:0;pointer-events:none}
.hero.no-webgl .h3d-fallback{opacity:1}
.hero .h3d-stage{height:min(70vh,620px);width:100%}
.hero .wrap{pointer-events:none}.hero .wrap>div:first-child{pointer-events:auto}
@media(max-width:860px){.hero .h3d-stage{order:-1;height:min(44vh,360px)}}