/* Fase Rem · capa de efectos (fx). Todo es mejora progresiva: sin JS o con
   "reducir movimiento" el sitio queda exactamente como antes. */

/* ---- carga de primera visita ---- */
html.fx-loading::after{content:"";position:fixed;inset:0;z-index:100000;background:#0C0F14}
#fx-loader{position:fixed;inset:0;z-index:100001;pointer-events:none;display:flex;align-items:center;justify-content:center}
#fx-loader .band{position:absolute;left:0;right:0;height:34%;}
#fx-loader .b1{top:0;background:#333333}#fx-loader .b2{top:33%;background:#0F5280}#fx-loader .b3{top:66%;height:34.5%;background:#0C72BA}
#fx-loader .core{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff}
#fx-loader svg{width:92px;height:auto;overflow:visible}
#fx-loader svg path{fill:transparent;stroke:#fff;stroke-width:2.2}
#fx-loader .count{display:flex;font:300 clamp(54px,9vw,120px)/1 Montserrat,system-ui,sans-serif;letter-spacing:-.02em}
#fx-loader .col{height:1em;overflow:hidden}#fx-loader .col span{display:block;height:1em;line-height:1em}
#fx-loader .pct{font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;color:#4DA3E0;margin:.5em 0 0 .3em}

/* ---- cursor (estilos: anillo, lente, etiqueta, estela, monograma) ---- */
html.fx-cursor,html.fx-cursor a,html.fx-cursor button,html.fx-cursor summary{cursor:none}
html.fx-cursor input,html.fx-cursor textarea,html.fx-cursor select,html.fx-cursor label{cursor:auto}
#fx-dot,#fx-ring{position:fixed;left:0;top:0;z-index:99990;pointer-events:none;border-radius:50%}
#fx-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
#fx-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1),opacity .25s,background-color .25s,border-color .25s}
#fx-ring.on{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.08)}
#fx-ring.off,#fx-dot.off{opacity:0}
.fx-clab{font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
/* lente: un círculo que invierte lo que tiene abajo */
.fx-c-lente #fx-dot{display:none}
.fx-c-lente #fx-ring{width:22px;height:22px;margin:-11px 0 0 -11px;border:0;background:#fff}
.fx-c-lente #fx-ring.on{width:56px;height:56px;margin:-28px 0 0 -28px;background:#fff}
.fx-c-lente #fx-ring.txt{width:110px;height:110px;margin:-55px 0 0 -55px}
/* etiqueta: punto azul de la marca; sobre trabajos y reels dice qué hacer */
.fx-c-etiqueta #fx-dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:#0C72BA;mix-blend-mode:normal;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fx-c-etiqueta #fx-ring{width:0;height:0;margin:0;border:0;mix-blend-mode:normal;background:#0C72BA}
.fx-c-etiqueta #fx-ring.on{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(12,114,186,.18);border:1.5px solid #0C72BA}
.fx-c-etiqueta #fx-ring.lab{width:84px;height:84px;margin:-42px 0 0 -42px;background:#0C72BA}
.fx-c-etiqueta #fx-ring.lab .fx-clab{opacity:1}
.fx-c-etiqueta #fx-ring.lab~#fx-dot,.fx-c-etiqueta #fx-dot:has(~#fx-ring.lab){opacity:0}
/* estela */
.fx-c-estela #fx-ring{display:none}
.fx-c-estela #fx-dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:#4DA3E0;mix-blend-mode:normal}
#fx-trail{position:fixed;inset:0;z-index:99989;pointer-events:none}
/* monograma */
.fx-c-monograma #fx-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border-color:rgba(255,255,255,.6)}
.fx-c-monograma #fx-dot{width:22px;height:22px;margin:-11px 0 0 -11px;background:none;border-radius:0}
.fx-c-monograma #fx-dot svg{width:100%;height:100%;fill:#fff;display:block}

/* mixto: punto exacto + monograma que lo sigue al costado + estela; sobre texto corrido el monograma se hace a un lado */
.fx-c-mixto #fx-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#4DA3E0;mix-blend-mode:normal;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.fx-c-mixto #fx-ring{width:24px;height:24px;margin:6px 0 0 6px;border:0;border-radius:0;mix-blend-mode:normal;transition:width .3s,height .3s,margin .3s,opacity .25s}
.fx-c-mixto #fx-ring svg{width:100%;height:100%;fill:#4DA3E0;display:block;filter:drop-shadow(0 0 1px rgba(18,48,74,.55))}
.fx-c-mixto #fx-ring .fx-clab{display:none}
.fx-c-mixto #fx-ring.on{width:34px;height:34px;margin:4px 0 0 4px;background:none}
.fx-c-mixto #fx-ring.txt{opacity:.25;width:16px;height:16px;margin:14px 0 0 14px}

/* ---- partículas de la portada ---- */
.fx-parts{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---- panel de la vista previa (no va en el sitio publicado) ---- */
.fx-prev{position:fixed;left:16px;bottom:16px;z-index:99999;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:calc(100vw - 32px);padding:12px 16px;background:#12304A;color:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);font:600 13px/1.2 Inter,system-ui,sans-serif}
.fx-prev b{color:#4DA3E0;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.fx-prev select{margin-left:6px;font:inherit;padding:5px 8px;border-radius:4px;border:0}
html.fx-cursor .fx-prev,html.fx-cursor .fx-prev select{cursor:auto}

/* ---- grano ---- */
.fx-grain{position:absolute;inset:-60px;z-index:1;pointer-events:none;opacity:.07;background-size:180px 180px;animation:fxgrain .9s steps(6) infinite}
@keyframes fxgrain{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-26px)}60%{transform:translate(-10px,30px)}80%{transform:translate(28px,6px)}100%{transform:translate(0,0)}}

/* ---- transición entre páginas (persiana con los tres colores de la marca) ---- */
#fx-curtain{position:fixed;inset:0;z-index:99995;pointer-events:none;display:flex}
#fx-curtain i{flex:1;transform:scaleY(0);transform-origin:bottom}
#fx-curtain i:nth-child(1){background:#333333}#fx-curtain i:nth-child(2){background:#0F5280}#fx-curtain i:nth-child(3){background:#0C72BA}

/* ---- portada 3D ---- */
#fx-hero{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.fx-hero3d .hero-art img.float{opacity:0;transition:opacity .6s}
.fx-hero3d #inicio>div{z-index:2}

/* ---- servicios: tarjetas en cascada ---- */
@media (min-width:1000px) and (min-height:700px){
 .fx-desk .fx-stack{display:block!important;max-width:980px;margin:0 auto}
 .fx-desk .fx-stack>article.card{position:sticky;display:grid;grid-template-columns:38% 1fr;min-height:360px;margin:0 0 56px;transform-origin:50% 0;will-change:transform}
 .fx-desk .fx-stack>article.card:hover{transform:none}
 .fx-desk .fx-stack>article.card>div:first-child{height:auto!important;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)!important;flex-direction:column;justify-content:space-between!important}
 .fx-desk .fx-stack>article.card>div:first-child .num{font-size:120px!important}
 .fx-desk .fx-stack>article.card>div+div{padding:36px 40px 36px 28px!important}
 .fx-stack .fx-shade{position:absolute;inset:0;background:#0C0F14;opacity:0;pointer-events:none;border-radius:6px}
}

/* ---- método: trazos que se dibujan ---- */
.fx-draw-txt{position:absolute;right:16px;bottom:-40px;width:auto;height:380px;overflow:visible;pointer-events:none}
.fx-draw-txt text{font-family:Montserrat,system-ui,sans-serif;font-size:380px}
.fx-numfill{background-image:linear-gradient(#0C72BA,#0C72BA);background-repeat:no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text}
#metodo{position:relative}
.fx-arcs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-arcs svg{position:absolute;right:-8%;top:4%;width:72%;height:auto}
#metodo>*:not(.fx-arcs){position:relative;z-index:1}

/* ---- trabajos: túnel ---- */
.fx-tunnel{display:none}
@media (min-width:1000px){
 .fx-desk .fx-tunnel{display:block;position:relative;margin:8px 0 56px;border-radius:6px;overflow:hidden;background:#0C0F14 url(fase-rem-hero-fondo.svg) center/cover;color:#fff}
}
.fx-tunnel .stage{position:absolute;inset:0;perspective:900px;perspective-origin:50% 45%}
.fx-tunnel .world{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.fx-tunnel a.tc{position:absolute;left:0;top:0;display:block;width:340px;margin:-210px 0 0 -170px;text-decoration:none;color:#fff;backface-visibility:hidden}
.fx-tunnel a.tc img{display:block;width:100%;height:340px;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.fx-tunnel a.tc b{display:block;margin-top:10px;font:800 17px/1.2 Montserrat,system-ui,sans-serif}
.fx-tunnel a.tc span{display:block;font-size:13px;color:#A9B3BE}
.fx-tunnel .hud{position:absolute;left:32px;right:32px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:3;pointer-events:none}
.fx-tunnel .hud h3{margin:0;font:300 clamp(28px,3.4vw,44px)/1.05 Montserrat,system-ui,sans-serif}
.fx-tunnel .hud h3 b{font-weight:800;color:#4DA3E0}
.fx-tunnel .hud .n{font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;color:#A9B3BE;text-transform:uppercase}
.fx-tunnel .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#4DA3E0;z-index:3}
.fx-liquid img{filter:url(#fx-liquid-f)}
#trabajos .thumb img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fx-desk #trabajos .work:hover .thumb img{transform:scale(1.04)}

/* ---- reels: anillo 3D ---- */
.fx-ring{display:none}
@media (min-width:900px){
 .fx-desk .fx-ring{display:block;position:relative;height:600px;margin:8px 0 0;perspective:2000px;touch-action:pan-y;user-select:none;cursor:grab}
 .fx-desk .fx-ring+div{display:none!important}
}
.fx-ring:active{cursor:grabbing}
.fx-ring .rot{position:absolute;left:50%;top:40px;width:220px;height:391px;margin-left:-110px;transform-style:preserve-3d}
.fx-ring .face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;overflow:hidden;background:#12304A;color:#fff;text-decoration:none;-webkit-box-reflect:below 14px linear-gradient(transparent 72%,rgba(255,255,255,.22));box-shadow:0 18px 40px rgba(18,48,74,.18)}
.fx-ring .face img,.fx-ring .face video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-ring .face .lb{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(12,15,20,.85));font-size:14px}
.fx-ring .face .lb b{display:block;font-size:16px}
.fx-ring .face.cta{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px;background:#0C72BA}
.fx-ring .face.cta.dk{background:#333333}
.fx-ring .face.cta strong{font:300 28px/1.1 Montserrat,system-ui,sans-serif}.fx-ring .face.cta strong b{font-weight:800}
.fx-ring .face.cta span{font-weight:600}
.fx-ring .hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:14px;color:#555C64}

/* ---- tipos de sitio: columnas ---- */
@media (min-width:1000px){
 .fx-desk .fx-cols{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;height:500px}
 .fx-desk .fx-cols>div{position:relative;flex:1 1 0!important;min-width:0;transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
 .fx-desk .fx-cols>div.on{flex-grow:6!important}
 .fx-desk .fx-cols>div>a,.fx-desk .fx-cols figure{height:100%;margin:0!important}
 .fx-desk .fx-cols figure{position:relative;border-radius:6px;overflow:hidden;background:var(--c,#12304A)}
 .fx-desk .fx-cols img{height:100%!important;object-fit:cover;object-position:left top;border:0!important;border-radius:0!important;opacity:.16;filter:grayscale(1);mix-blend-mode:luminosity;transition:opacity .6s,filter .6s}
 .fx-desk .fx-cols>div.on img{filter:none;opacity:1;mix-blend-mode:normal}
 .fx-desk .fx-cols figcaption{position:absolute;left:0;right:0;bottom:0;margin:0!important;padding:56px 22px 20px;background:linear-gradient(transparent,var(--c,#12304A) 62%);color:#fff!important;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s}
 .fx-desk .fx-cols figcaption strong{color:#fff!important}
 .fx-desk .fx-cols figcaption span{color:#fff!important;text-decoration:underline}
 .fx-desk .fx-cols>div.on figure{box-shadow:inset 0 -6px 0 var(--c)}
 .fx-desk .fx-cols>div.on figcaption{opacity:1;transform:none;transition-delay:.25s}
 .fx-desk .fx-cols figure::before{content:attr(data-n);position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:2;font:800 40px/1 Montserrat,system-ui,sans-serif;color:#fff;transition:opacity .3s}
 .fx-desk .fx-cols figure::after{content:attr(data-t);position:absolute;left:50%;bottom:26px;z-index:2;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font:700 15px/1 Montserrat,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:opacity .3s}
 .fx-desk .fx-cols>div.on figure::after{opacity:0}
}

/* ---- quiénes somos ---- */
.fx-pill{display:inline-block;vertical-align:-.12em;width:0;height:.82em;margin:0 .12em;border-radius:999px;background-size:cover;background-position:50% 28%}
.fx-w{opacity:.14}

/* ---- opiniones: contadores y cinta ---- */
.fx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 0 40px;padding:0 0 36px;border-bottom:1px solid #D5DDE5}
.fx-stats div{min-width:0}
.fx-stats b{display:block;font:800 clamp(38px,4.6vw,60px)/1 Montserrat,system-ui,sans-serif;color:#0C72BA;font-variant-numeric:tabular-nums}
.fx-stats span{display:block;margin-top:8px;font-size:15px;color:#555C64}
@media (max-width:760px){.fx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fx-marq{overflow:hidden;margin:0 -24px 40px;padding:18px 0;background:#333333;color:#fff}
.fx-marq .tr{display:flex;width:max-content;will-change:transform}
.fx-marq span{flex:none;padding:0 18px;font:300 clamp(20px,2vw,26px)/1.2 Montserrat,system-ui,sans-serif;white-space:nowrap}
.fx-marq span b{font-weight:800}.fx-marq i{font-style:normal;font-weight:800;color:#4DA3E0}

/* ---- plan de marketing: escena con scroll ---- */
@media (min-width:1000px){
 .fx-desk .fx-plan{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin-bottom:48px}
 .fx-desk .fx-plan ol{flex-direction:column;flex-wrap:nowrap!important;margin:0!important}
 .fx-desk .fx-plan ol li{flex:none!important;padding:14px 0 14px 22px;border-left:3px solid #2A323B;opacity:.35;transition:opacity .4s,border-color .4s}
 .fx-desk .fx-plan ol li.on{opacity:1;border-color:#4DA3E0}
}
.fx-plan canvas{display:none}
@media (min-width:1000px){.fx-desk .fx-plan canvas{display:block;width:100%;height:auto;aspect-ratio:1.25;border-radius:6px;background:#0F141B}}

@media (prefers-reduced-motion:reduce){.fx-grain{animation:none}}