/* Brightti · capa de experiencia.
   Lenguaje de los estudios de web 3D (cortina entre páginas, titulares que suben palabra por palabra,
   letras que ruedan, cursor que acompaña, cinta de servicios, trazo que une los pasos) con la identidad de Brightti:
   sus paletas por hora, su nube de puntos y su contenido. Todo se apaga con movimiento reducido. */
:root{--bt-ease:cubic-bezier(.19,1,.22,1);--bt-ease-io:cubic-bezier(.77,0,.18,1);--bt-ink:#0d0c0b;--bt-paper:#f4ece1;--bt-gold:#f4c36e}

/* ---------- 1 · cortina entre páginas ---------- */
.bt-curtain{position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:var(--bt-ink);color:var(--bt-paper);
  display:grid;place-items:center;transform:translate3d(0,102%,0);border-radius:50% 50% 0 0/14vh 14vh 0 0;
  transition:transform .85s var(--bt-ease-io),border-radius .85s var(--bt-ease-io)}
.bt-curtain.is-cover{transform:none;border-radius:0;pointer-events:auto}
.bt-curtain.is-leave{transform:translate3d(0,-102%,0);border-radius:0 0 50% 50%/0 0 14vh 14vh}
.bt-curtain.no-anim{transition:none}
.bt-curtain-in{display:grid;gap:1.1rem;justify-items:center;text-align:center;padding:0 24px}
.bt-curtain-word{font:600 clamp(.72rem,1vw,.85rem)/1 'DM Mono',ui-monospace,monospace;letter-spacing:.34em;color:var(--bt-gold)}
.bt-curtain-to{font:300 clamp(2.4rem,7vw,6.5rem)/.95 'Outfit','Manrope',system-ui,sans-serif;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.bt-curtain-to .bt-w>span{transition-duration:.9s}
.bt-curtain .bt-bar{width:min(220px,40vw);height:1px;background:rgba(244,236,225,.18);overflow:hidden}
.bt-curtain .bt-bar i{display:block;height:100%;background:var(--bt-gold);transform:scaleX(0);transform-origin:0 50%}
.bt-curtain.is-cover .bt-bar i{transform:scaleX(1);transition:transform .9s var(--bt-ease) .15s}
/* mientras se arma la página que llega, la cubre el mismo color de la cortina */
html.bt-arrive::after{content:"";position:fixed;inset:0;background:var(--bt-ink);z-index:2147483001}

/* ---------- 2 · titulares que suben palabra por palabra ---------- */
.bt-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .18em 0;margin:0 -.06em -.18em 0}
@media (prefers-reduced-motion:no-preference){
  .bt-x .bt-split .bt-w>span{display:inline-block;transform:translate3d(0,108%,0) rotate(3deg);transform-origin:0 100%;
    transition:transform 1.15s var(--bt-ease) calc(var(--i,0)*60ms)}
  .bt-x .bt-split.is-in .bt-w>span{transform:none}
  /* bloques que aparecen: suben y se aclaran, en cascada */
  .bt-x .bt-up{opacity:0;translate:0 42px;transition:opacity 1s var(--bt-ease) calc(var(--d,0)*90ms),translate 1.2s var(--bt-ease) calc(var(--d,0)*90ms)}
  .bt-x .bt-up.is-in{opacity:1;translate:0 0}
  /* las imágenes de los proyectos se abren desde un marco más chico */
  .bt-x .bt-frame{clip-path:inset(14% 9% 0 9% round 22px);transition:clip-path 1.4s var(--bt-ease) calc(var(--d,0)*90ms)}
  .bt-x .bt-frame.is-in{clip-path:inset(0 0 0 0 round 18px)}
  .bt-x .case:hover .case-visual canvas{scale:1.06}
  .bt-x .case-visual canvas{transition:scale 1.2s var(--bt-ease)}
}

/* ---------- 3 · letras que ruedan al pasar el cursor ---------- */
.bt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bt-roll{display:inline-block;white-space:normal;min-width:0;max-width:100%}
.bt-roll-word{display:inline-flex;white-space:nowrap}
.bt-c{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.2;height:1.2em}
.bt-c>span{display:inline-block;text-shadow:0 1.2em currentColor}
@media (prefers-reduced-motion:no-preference){
  .bt-c>span{transition:transform .62s var(--bt-ease) calc(var(--i,0)*16ms)}
  .bt-rollable:hover .bt-c>span,.bt-rollable:focus-visible .bt-c>span{transform:translate3d(0,-1.2em,0)}
  .bt-mag{transition:translate .6s var(--bt-ease)}
  .bt-mag.is-mag{transition:translate .15s linear}
}

/* ---------- 4 · cursor que acompaña (solo mouse) ---------- */
.bt-cursor{position:fixed;left:0;top:0;z-index:2147482000;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.bt-cursor.on{opacity:1}
.bt-cursor i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1px solid #fff;mix-blend-mode:difference;
  transition:transform .5s var(--bt-ease),background .3s,border-color .3s,opacity .3s}
.bt-cursor b{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent,#ff9b52);color:var(--on-accent,#1c0f05);font:600 .7rem/1.1 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:10px;
  transform:scale(0);transition:transform .55s var(--bt-ease)}
.bt-cursor.is-link i{transform:scale(1.7);background:#fff}
.bt-cursor.is-label i{transform:scale(0);opacity:0}
.bt-cursor.is-label b{transform:scale(1)}
.bt-cursor.is-text,.bt-cursor.is-hidden{opacity:0}
.bt-cursor.is-down i{transform:scale(.7)}

/* ---------- 5 · cinta de servicios (como el "play reel" corrido) ---------- */
.bt-ticker{--h:clamp(3.2rem,6vw,5.4rem);position:relative;overflow:hidden;border-block:1px solid var(--line,rgba(255,255,255,.13));margin:0 calc(var(--gutter,24px)*-1) clamp(3rem,7vw,6rem);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bt-ticker-track{display:flex;width:max-content;animation:bt-run 42s linear infinite}
.bt-ticker:hover .bt-ticker-track,.bt-ticker:focus-within .bt-ticker-track{animation-play-state:paused}
.bt-ticker ul{display:flex;list-style:none;margin:0;padding:0}
.bt-ticker li{display:flex;align-items:center}
.bt-ticker a{display:flex;align-items:center;gap:.9rem;height:var(--h);padding:0 1.6rem;font:300 clamp(1.5rem,3.4vw,3rem)/1 var(--f-d,'Outfit',sans-serif);letter-spacing:-.02em;color:inherit;text-decoration:none;white-space:nowrap}
.bt-ticker a::after{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--em,#ffb27a);margin-left:1.6rem;transition:transform .5s var(--bt-ease)}
.bt-ticker a:hover{color:var(--em,#ffb27a)}
.bt-ticker a:hover::after{transform:scale(1.8)}
@keyframes bt-run{to{transform:translate3d(-50%,0,0)}}
@media (max-width:760px){.bt-ticker{margin-top:3rem}}

/* ---------- 6 · el trazo que une los pasos del estudio ---------- */
.bt-ribbon-host{position:relative}
.bt-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.bt-ribbon path{fill:none;stroke:var(--em,#ffb27a);stroke-width:clamp(9px,1.25vw,20px);stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.bt-ribbon-host>li,.bt-ribbon-host>*:not(svg){position:relative;z-index:1}

/* ---------- 7 · páginas de servicio ---------- */
.bt-page-servicio h1{font-size:clamp(52px,9.5vw,148px);line-height:.92;letter-spacing:-.055em;max-width:12ch;font-weight:500}
.bt-page-servicio .lead{font-size:clamp(24px,3.2vw,40px);line-height:1.25;letter-spacing:-.02em}
.bt-page-servicio .details h2,.bt-page-servicio #contacto h2{font-size:clamp(34px,5.2vw,76px);line-height:.98;letter-spacing:-.045em;font-weight:500}
.bt-page-servicio .cta{border-radius:999px;padding:18px 28px}
.bt-page-servicio .related{display:block;font-size:clamp(26px,4vw,58px);line-height:1;letter-spacing:-.04em;padding-top:clamp(40px,7vw,90px)}
.bt-page-servicio .related::before{content:"Otros servicios";display:block;font:500 11px/1 system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#f4c36e;margin-bottom:28px}
.bt-page-servicio .related a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:.42em 0;border-bottom:1px solid #ffffff1f;text-decoration:none;transition:color .4s,padding .6s var(--bt-ease)}
.bt-page-servicio .related a:hover{color:#f4c36e;padding-left:.3em}
.bt-page-servicio .related a.is-here{color:#7d8077}
.bt-page-servicio .related a.is-here::after{content:"Estás aquí";font:500 11px/1 system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .bt-curtain{display:none}
  html.bt-arrive::after{display:none}
  .bt-ticker-track{animation:none}
  .bt-ticker{overflow-x:auto}
  .bt-cursor{display:none}
}

/* ---------- 9 · portada: un adelanto en imágenes de lo que hay dentro de cada servicio ---------- */
.cap-peek{display:flex;align-items:center;gap:.8rem;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.cap-peek-imgs{display:flex;padding-left:14px}
.cap-peek-imgs img{width:62px;height:42px;object-fit:cover;border-radius:9px;margin-left:-14px;border:2px solid var(--bg,#111);box-shadow:0 6px 18px #0004;
  transition:transform .6s var(--bt-ease),margin .6s var(--bt-ease)}
.cap-peek-imgs img:nth-child(1){transform:rotate(-7deg)}
.cap-peek-imgs img:nth-child(2){transform:rotate(2deg) translateY(-3px)}
.cap-peek-imgs img:nth-child(3){transform:rotate(8deg)}
.cap-peek:hover .cap-peek-imgs img,.cap-peek:focus-visible .cap-peek-imgs img{margin-left:-4px;transform:none}
.cap-peek-t{display:grid;text-align:left;line-height:1.25}
.cap-peek-t b{font:600 .72rem/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.cap-peek-t span{font-size:.74rem;opacity:.7}

/* ---------- 10 · imagen ampliada (genérica) ---------- */
.bt-lb{border:0;padding:0;background:transparent;max-width:min(1600px,94vw);max-height:92vh;color:#f1efe8}
.bt-lb::backdrop{background:#070807e8;backdrop-filter:blur(6px)}
.bt-lb img{display:block;max-width:100%;max-height:82vh;border-radius:14px;margin:auto}
.bt-lb p{font:400 .75rem/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.75;text-align:center;margin:12px 0 0}
.bt-lb form{display:flex;justify-content:flex-end;margin-bottom:10px}
.bt-lb button{background:none;border:1px solid #ffffff33;color:inherit;border-radius:999px;padding:8px 14px;font:500 .75rem/1 'DM Mono',monospace;cursor:pointer}

/* ---------- 11 · de la portada a la página del servicio: las partículas forman el título de la página ---------- */
/* el título fantasma ocupa el mismo lugar y tipografía que el h1 de la página; el navegador lo traslada al cambiar de página */
.journey-ghost{position:fixed;z-index:61;top:var(--ghost-top,calc(196px + 4.3vw));left:50%;translate:-50% 0;width:min(1320px,100vw);padding-inline:clamp(20px,5vw,72px);pointer-events:none}
/* la misma caja que el h1 de la página (bloque de 11ch, dos líneas): así el navegador no la estira al pasar de una a otra */
.journey-ghost-t{display:block;max-width:11ch;font:300 clamp(52px,9.5vw,148px)/.92 'Outfit','Manrope',system-ui,sans-serif;letter-spacing:-.045em;color:#f1efe8;opacity:var(--arrival-title,0);view-transition-name:sr-titulo}
.journey-ghost-t span{display:block;width:fit-content}
body:not(.journey-to-page) .journey-ghost{display:none}
body.journey-to-page .space{opacity:0!important;visibility:hidden}
@view-transition{navigation:auto}
body.sr h1{view-transition-name:sr-titulo}
::view-transition-group(sr-titulo){animation-duration:.7s;animation-timing-function:cubic-bezier(.19,1,.22,1)}
/* la portada, ya en negro, queda quieta debajo; la página nueva aparece encima con un fundido y el título viaja solo */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:bt-vt-in .6s cubic-bezier(.2,.75,.2,1) both}
@keyframes bt-vt-in{from{opacity:0}to{opacity:1}}
::view-transition-old(sr-titulo){animation:none;opacity:0}
::view-transition-new(sr-titulo){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- 12 · portada: tarjeta con el video real de lo que hay adentro ---------- */
.cap-reel{display:grid;gap:.7rem;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit;text-align:left}
.cap-reel-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line,#ffffff22);
  transition:transform .8s var(--bt-ease),border-radius .8s var(--bt-ease)}
.cap-reel-frame video{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.2s var(--bt-ease)}
.cap-reel:hover .cap-reel-frame{border-radius:8px}
.cap-reel:hover video{scale:1.05}
/* las esquinas del recuadro, como las cruces de la grilla */
.cap-reel-frame i::before,.cap-reel-frame i::after{content:"+";position:absolute;font:400 14px/1 'DM Mono',monospace;color:#fff;opacity:.85;mix-blend-mode:difference}
.cap-reel-frame i::before{left:8px;top:6px}.cap-reel-frame i::after{right:8px;bottom:6px}
.cap-reel-t{display:grid;gap:.25rem}
.cap-reel-t b{font:600 .72rem/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.cap-reel-t span{font-size:.74rem;line-height:1.5;opacity:.75}
.cap-reel-t em{font:500 .66rem/1 'DM Mono',monospace;font-style:normal;color:var(--em,#ffb27a)}

/* ---------- 13 · la grilla de cruces al pie de los capítulos (como en las páginas de estudio) ---------- */
.bt-cruces{position:absolute;left:var(--gutter,24px);right:calc(var(--gutter,24px) + 2.4rem);bottom:14px;display:flex;justify-content:space-between;pointer-events:none;
  font:400 13px/1 'DM Mono',ui-monospace,monospace;color:var(--mute-2,#fff8);z-index:1}
.bt-cruces::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:var(--line,#ffffff1c)}
.bt-cruces i{position:relative;font-style:normal;background:var(--bg,#111);padding:0 2px}
@media (max-width:760px){.bt-cruces{right:var(--gutter,16px)}}