/* ============================================================
   Panoram Studio v2 «El Recorrido»
   Paleta y decisiones: paquete-de-diseno-sitio-v2.md
   Estándar de ingeniería: 10k-websites/references/scrub-pipeline.md
   Regla dura: solo se animan transform y opacity.
   ============================================================ */

:root{
  --canvas:#0B1533;
  --panel:#111E42;
  --panel-2:#16264F;
  --accent:#2E5BFF;
  --accent-hover:#4A6FFF;
  --accent-muted:rgba(85,112,180,.35);
  --glow:#FFB65C;
  --text-primary:#F2F5FC;
  --text-secondary:#A9B6D6;
  --line:rgba(85,112,180,.22);
  --wrap:1140px;
  --r:6px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300;font-size:17px;line-height:1.65;
  color:var(--text-primary);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-hover);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

h1,h2,h3{
  font-family:Oswald,Impact,sans-serif;font-weight:500;
  letter-spacing:.04em;line-height:1.12;margin:0 0 .5em;
  color:var(--text-primary);text-transform:uppercase;
}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-size:1.1rem;letter-spacing:.07em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:400}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:780px}
.section{padding:96px 0;position:relative;scroll-margin-top:72px}
.section-snug{padding-top:44px}
.hidden-visually{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);color:var(--text-primary);padding:10px 14px;z-index:200;border-radius:var(--r)}

.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-hover);margin:0 0 14px;
}
.section-lead{max-width:62ch;color:var(--text-secondary);margin:0 0 48px}

/* ---------- ambiente fijo: una sola capa detrás de todo ---------- */
.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 70% 15%,rgba(46,91,255,.10),transparent 60%),
    radial-gradient(ellipse 90% 70% at 20% 90%,rgba(85,112,180,.08),transparent 65%),
    var(--canvas);
}
.env::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 40% 30% at 50% 50%,rgba(46,91,255,.05),transparent 70%);
  animation:envDrift 75s ease-in-out infinite alternate;
}
@keyframes envDrift{
  from{transform:translate3d(-4%,-2%,0)}
  to{transform:translate3d(4%,3%,0)}
}

/* ---------- botones ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:Oswald,sans-serif;font-size:.9rem;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 34px;border:1px solid var(--accent);
  border-radius:var(--r);cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s;
  text-shadow:none;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:rgba(242,245,252,.4)}
.btn-ghost:hover{background:rgba(242,245,252,.08);border-color:var(--text-primary)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;
}
.site-header.solid{
  background:rgba(11,21,51,.82);backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(4,8,20,.4);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:inherit}
.brand:hover{text-decoration:none}
.brand-mark{width:34px;height:auto;filter:brightness(0) invert(1)}
/* wordmark: PANORAM manda, STUDIO va chiquito y espaciado justo debajo,
   con el tracking calculado para que ambas lineas midan casi lo mismo */
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{
  font-family:Oswald,sans-serif;font-weight:600;font-style:normal;
  letter-spacing:.14em;font-size:1.02rem;color:var(--text-primary);
}
.brand-text i{
  font-family:Oswald,sans-serif;font-weight:400;font-style:normal;
  letter-spacing:.62em;font-size:.5rem;color:var(--text-secondary);
  margin-top:3px;text-indent:.62em;text-align:center;
}
.site-footer .brand-text i{color:var(--text-secondary);opacity:.8}
.nav{display:flex;align-items:center;gap:24px}
.nav>a{
  font-family:Oswald,sans-serif;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);position:relative;
}
.nav>a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease);
}
.nav>a:not(.btn):hover{color:var(--text-primary);text-decoration:none}
.nav>a:not(.btn):hover::after{transform:scaleX(1)}
.nav>a.btn{padding:9px 20px;font-size:.76rem;color:#fff}
/* selector de idioma: los tres visibles, uno marcado. Un clic al que quieras,
   sin ciclar ni adivinar cual sigue. */
.lang-switch{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:rgba(11,21,51,.35);
}
.lang-switch button{
  background:none;border:0;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  padding:6px 11px;color:var(--text-secondary);
  transition:color .25s ease,background .25s ease;
}
.lang-switch button + button{border-left:1px solid var(--line)}
.lang-switch button:hover{color:var(--text-primary)}
.lang-switch button[aria-pressed="true"]{background:var(--accent);color:#fff}
/* en pantalla tactil cada opcion cumple el minimo de 44px para el dedo */
@media (pointer:coarse){
  .lang-switch button{min-height:44px;padding:0 18px;font-size:.78rem;display:inline-flex;align-items:center;justify-content:center}
}
/* sobre las secciones claras el selector se adapta */
.section-light .lang-switch{background:rgba(11,21,51,.06)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--text-primary);display:block;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   EL HERO SCRUB
   Pista de 400vh, escenario sticky de 100vh.
   ============================================================ */
.hero-track{height:650vh;position:relative}
.hero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas);
}
.hero-stage .poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;will-change:transform;transform:translateZ(0);
}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.video-failed #hero-video{display:none}

/* scrim global: ningún frame queda crudo detrás del texto */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,10,24,0) 35%,rgba(6,10,24,.62) 100%);
}

/* anillo de carga del Blob */
.ring{
  position:absolute;right:28px;bottom:28px;width:34px;height:34px;color:var(--accent-hover);
  transform:rotate(-90deg);opacity:.9;
}
.ring circle{transition:stroke-dashoffset .2s linear}

/* cue de scroll: el anillo 360 de la marca */
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-secondary);pointer-events:none;
}
.cue svg{width:40px;height:40px;animation:cueSpin 14s linear infinite}
@keyframes cueSpin{to{transform:rotate(360deg)}}
.cue .mono{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase}

/* ---------- las bandas de texto ---------- */
.band{
  position:absolute;inset:0;display:grid;align-content:center;
  padding:0 max(24px,6vw);pointer-events:none;opacity:0;
  text-shadow:var(--tshadow);
  /* isolation fuerza un contexto de apilamiento SIEMPRE: sin esto, cuando
     la banda llega a opacidad 1 su scrim ::before (z-index:-1) se pinta
     detras del video y desaparece. Lo cazo la auditoria del peor pixel. */
  isolation:isolate;
}
.band .btn{text-shadow:none;pointer-events:auto}
/* el carril de acción vive centro-derecha: el texto vive a la izquierda */
.band-left{justify-items:start}
.band-left .line{max-width:min(46ch,52vw)}
.band h1,.band .line{margin:0}
.band .line{
  font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.15;
}
/* scrim por banda: se profundiza con --k, muere al 76% para no aplanar */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 76% 66% at 30% 50%,rgba(5,8,18,.76) 0%,rgba(5,8,18,.52) 48%,rgba(5,8,18,0) 78%);
}
/* banda 4: el asentamiento, centrado al converger el reposo */
.band-settle{justify-items:center;text-align:center}
.band-settle::before{
  background:radial-gradient(ellipse 86% 82% at 50% 46%,rgba(5,8,18,.88) 0%,rgba(5,8,18,.62) 50%,rgba(5,8,18,0) 80%);
}
.band-settle .sub{
  color:#C9D5EF;max-width:56ch;margin:18px 0 26px;
  font-size:clamp(.95rem,1.6vw,1.12rem);
  opacity:var(--ks,0);
  transform:translateY(calc((1 - var(--ks,0))*14px));
}
.band-settle .cta-row{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  opacity:var(--kb,0);
  transform:translateY(calc((1 - var(--kb,0))*14px));
}

/* caracteres: entrada scatter / approach, todo con transform+opacity */
.band .w{display:inline-block;white-space:pre}
.band .c{
  display:inline-block;
  --kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.6),1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
           rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* variante approach: crece desde la profundidad */
.band[data-entrance="approach"] .c{
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
           scale(calc(.82 + .18*var(--kc)));
}
/* settle: palabras suben en orden de lectura */
.band-settle .w{
  --kc:clamp(0,calc((var(--k,0) - var(--th,0))*3),1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
}

/* banda final: una linea centrada y el chevron que cede el paso */

/* imagenes de las tarjetas de servicio: mismo mundo que el video */
.svc-img{
  width:100%;height:100%;min-height:220px;object-fit:cover;display:block;
  border-radius:0;border:0;margin:0;transition:transform .5s var(--ease);
}
.svc:hover .svc-img{transform:scale(1.03)}

/* ---------- hero estático (las cinco compuertas, espejo del JS) ---------- */
.static-hero{display:none;position:absolute;inset:0;align-content:center;justify-items:center;text-align:center;padding:0 24px;text-shadow:var(--tshadow)}
.static-hero .sub{color:var(--text-secondary);max-width:52ch;margin:16px 0 26px}
.static-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* el hero estatico queda SOLO para telefono acostado sin altura y para
   movimiento reducido; los telefonos en vertical ya reciben el scrub con
   su encode ligero (3.6 MB) elegido en JS */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero-track{height:100vh}
  .band,.cue,.ring{display:none}
  #hero-video{display:none}
  .static-hero{display:grid}
  /* el hero estatico es un layout disenado: el frame final (la sala con
     el lago) como fondo, cargado SOLO aqui via CSS. El video jamas se
     descarga en este modo; el JS ni corre su camino de carga. */
  .hero-stage .poster{
    background-image:
      radial-gradient(ellipse 90% 80% at 50% 46%,rgba(5,8,18,.55) 0%,rgba(5,8,18,.35) 50%,rgba(5,8,18,.15) 78%),
      url("assets/hero-ending.jpg");
  }
}
/* pantallas capaces pero bajitas: el scrub queda, los adornos no caben */
@media (max-height:560px){.cue{display:none}}

/* ============================================================
   BAJO EL PLIEGUE
   ============================================================ */

/* revelado genérico al hacer scroll (bajo el pliegue, no en el hero) */
.js [data-reveal]{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in{opacity:1;transform:none}
/* la timeline no se desplaza al revelarse: su animacion es la linea */
.js [data-reveal="tl"]{opacity:1;transform:none}
.js [data-reveal="left"]{transform:translate3d(-30px,0,0)}
.js [data-reveal="right"]{transform:translate3d(30px,0,0)}

/* el anillo 360, elemento firma: se auto-dibuja al entrar */
.ring360{width:54px;height:54px;margin-bottom:18px}
.ring360 circle,.ring360 ellipse{
  fill:none;stroke:var(--accent-hover);stroke-width:1.2;
  stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.4s var(--ease) .15s;
}
.in .ring360 circle,.in .ring360 ellipse{stroke-dashoffset:0}
.ring360 text{
  font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--text-secondary);
  opacity:0;transition:opacity .6s ease .9s;
}
.in .ring360 text{opacity:1}

/* ---------- banda de números: grande y con panel propio ---------- */
.stats{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.stat{
  position:relative;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);padding:38px 32px 30px;overflow:hidden;
  transition:transform .45s var(--ease),border-color .35s;
}
.stat::before{
  content:"";position:absolute;top:0;left:0;width:64px;height:3px;background:var(--accent);
}
.stat::after{
  content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;
  border:1px solid var(--accent-muted);border-radius:50%;opacity:.5;
}
.stat:hover{transform:translateY(-4px);border-color:var(--accent-muted)}
.stat strong{
  display:block;font-family:Oswald,sans-serif;font-weight:600;
  font-size:clamp(3.4rem,6.5vw,5.2rem);color:var(--text-primary);line-height:1;
  letter-spacing:.01em;
}
.stat strong .unit{color:var(--accent-hover);font-size:.55em;vertical-align:.14em;margin-left:2px}
.stat > span{color:var(--text-secondary);font-size:1.05rem;line-height:1.5;display:block;margin-top:14px;max-width:30ch}
.stat strong .count{font:inherit;color:inherit;display:inline}
.stat .src{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;
  color:var(--text-secondary);display:inline-block;margin-top:18px;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;opacity:.8;
}
.stats .foot{margin:40px 0 0;font-size:.7rem;letter-spacing:.06em;color:var(--text-secondary);opacity:.65}

/* ---------- servicios: filas horizontales a todo lo ancho ----------
   Una tarjeta por linea: imagen a la izquierda, contenido a la derecha. */
.services-grid{display:flex;flex-direction:column;gap:20px}
.svc{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:0;position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(280px,40%) 1fr;align-items:stretch;
  transition:transform .45s var(--ease),border-color .35s;
}
.svc-body{align-self:center}
.svc:hover{transform:translateY(-4px);border-color:var(--accent)}
.svc.wide{background:linear-gradient(135deg,var(--panel-2),var(--panel))}
.svc-body{padding:28px 32px}
.svc h3{margin:14px 0 8px}
.svc p{color:var(--text-secondary);font-size:.95rem;margin:0 0 18px}
.svc .num{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--accent-hover);opacity:.6;letter-spacing:.2em}
.svc .link{
  font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-hover);display:inline-flex;gap:8px;align-items:center;
}
/* toda la tarjeta lleva a la subpagina del servicio */
.svc .link.stretched::before{content:"";position:absolute;inset:0;z-index:1}
.svc .link::after{content:"→";transition:transform .35s var(--ease)}
.svc:hover .link::after{transform:translateX(6px)}
.svc-accent{border-color:var(--accent-muted);background:linear-gradient(160deg,#12245c,var(--panel))}

/* ---------- proceso ----------
   Escritorio: la linea HORIZONTAL avanza del 01 al 03.
   Movil (max-width:760px): la misma linea se vuelve VERTICAL.
   Mismo marcado, misma coreografia; solo cambia la orientacion. */
.tl{margin-top:48px}
.tl-line{position:relative;height:2px;background:var(--line);margin:0 0 44px}
.tl-line i{
  position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-hover));
  transform:scaleX(0);transform-origin:left;transition:transform 3.2s linear .2s;
}
.in .tl-line i{transform:scaleX(1)}
.tl-line b{
  position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--accent);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease;
}
.tl-line b:nth-of-type(1){left:1%}
.tl-line b:nth-of-type(2){left:50%}
.tl-line b:nth-of-type(3){left:99%}
.in .tl-line b{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 14px rgba(46,91,255,.55)}
.in .tl-line b:nth-of-type(1){transition-delay:.25s}
.in .tl-line b:nth-of-type(2){transition-delay:1.75s}
.in .tl-line b:nth-of-type(3){transition-delay:3.3s}
.tl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.in .step:nth-child(1){transition-delay:.3s}
.in .step:nth-child(2){transition-delay:1.85s}
.in .step:nth-child(3){transition-delay:3.4s}
.in .step{opacity:1;transform:none}
.step .mono{color:var(--accent-hover);font-size:.72rem;letter-spacing:.24em;display:block;margin-bottom:10px}
.step p{color:var(--text-secondary);font-size:.95rem;margin:0;max-width:56ch}

/* ---------- portafolio ---------- */
.grid-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grid-work img{
  aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);width:100%;height:auto;
  transition:transform .6s var(--ease);
}
.grid-work img:hover{transform:scale(1.03)}
.work-note{margin-top:20px;font-size:.8rem;color:var(--text-secondary);opacity:.75}

/* ---------- obra 360: sección partida ---------- */
.obra{background:var(--panel)}
.obra-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.obra-grid img{border-radius:var(--r);border:1px solid var(--line)}
.obra p{color:var(--text-secondary)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{
  font-family:Oswald,sans-serif;letter-spacing:.05em;font-size:1rem;
  text-transform:uppercase;color:var(--text-primary);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;transition:color .25s;
}
summary:hover{color:var(--accent-hover)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1;transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
details[open] .faq-body{grid-template-rows:1fr}
details.cerrando .faq-body{grid-template-rows:0fr}
details.cerrando summary::after{transform:rotate(0)}
.faq-body>div{overflow:hidden}
.faq-body p{color:var(--text-secondary);margin:14px 0 0;font-size:.95rem;max-width:68ch}

/* ---------- contacto ---------- */
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-list{list-style:none;padding:0;margin:36px 0 0}
.contact-list li{padding:14px 0;border-top:1px solid var(--line)}
.contact-list span{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);opacity:.7;margin-bottom:3px;
}
.contact-list strong,.contact-list a{color:var(--text-primary);font-weight:400}
.form{background:var(--panel);padding:34px;border-radius:var(--r);border:1px solid var(--line)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;margin-bottom:16px}
.form label span{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;
  transition:color .25s;
}
.form label:focus-within span{color:var(--accent-hover)}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:.95rem;color:var(--text-primary);background:var(--canvas);
  transition:border-color .25s,box-shadow .25s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,91,255,.15);
}
.form textarea{resize:vertical}
.btn-block{width:100%;border:none;font-size:.95rem}

/* etiqueta sobre una foto: el staging necesita decir que es un antes y despues */
.svc.has-tag{position:relative}
.ba-tag{
  position:absolute;z-index:2;top:14px;left:14px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);background:rgba(11,21,51,.82);
  border:1px solid var(--accent-muted);border-radius:999px;padding:6px 12px;
  backdrop-filter:blur(6px);
}
.ba-hero{top:auto;bottom:120px;left:24px;font-size:.7rem;padding:8px 16px}
@media (max-width:760px){.ba-tag{top:10px;left:10px;font-size:.56rem;padding:5px 10px}}

/* ---------- servicios sobre claro ----------
   La seccion respira en blanco; las tarjetas quedan blancas con borde
   suave y sombra baja. Solo la primera (tours 360, el servicio insignia)
   conserva el navy: abre la fila con peso y el resto respira en blanco. */
.section-light .svc{
  background:#FFFFFF;
  border-color:#E2E7F1;
  box-shadow:0 1px 2px rgba(11,21,51,.04),0 8px 24px rgba(11,21,51,.05);
}
.section-light .svc:hover{
  border-color:var(--accent);
  box-shadow:0 4px 10px rgba(11,21,51,.06),0 18px 42px rgba(11,21,51,.10);
}
.section-light .svc h3{color:#0B1533}
.section-light .svc p{color:#46536B}
.section-light .svc .num{color:var(--accent);opacity:.55}
.section-light .svc .link{color:var(--accent)}
/* la tarjeta insignia se mantiene navy: es el acento de la seccion */
.section-light .svc.svc-accent{
  background:linear-gradient(160deg,#12245c,var(--panel));
  border-color:var(--accent-muted);
}
.section-light .svc.svc-accent h3{color:var(--text-primary)}
.section-light .svc.svc-accent p{color:var(--text-secondary)}
.section-light .svc.svc-accent .link{color:var(--accent-hover)}
.section-light .svc.svc-accent .num{color:var(--accent-hover);opacity:.7}

/* ---------- secciones claras: el respiro blanco ----------
   Dos secciones en claro rompen el azul continuo y dan contraste.
   Blanco suave (#F5F7FB), nunca puro, con el navy como tinta. */
.section-light{background:#F5F7FB}
.section-light h1,.section-light h2,.section-light h3{color:#0B1533}
.section-light .section-lead,.section-light .step p{color:#46536B}
.section-light .eyebrow{color:#2E5BFF}
.section-light .tl-line{background:#DCE2EF}
.section-light .tl-line b{background:#F5F7FB}
.section-light .step .mono{color:#2E5BFF}
.section-light details{border-bottom:1px solid #DCE2EF}
.section-light summary{color:#0B1533}
.section-light summary:hover{color:#2E5BFF}
.section-light .faq-body p{color:#46536B}

/* ---------- pie ---------- */
.site-footer{border-top:1px solid var(--line);padding:48px 0;color:var(--text-secondary)}
.footer-inner{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{
  color:var(--text-secondary);font-family:Oswald,sans-serif;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.footer-nav a:hover{color:var(--text-primary)}
.copy{font-size:.8rem;margin:0;width:100%;padding-top:20px;border-top:1px solid var(--line);opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .svc{grid-template-columns:minmax(200px,38%) 1fr}
  .contact-inner{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .section{padding:64px 0}
  .nav-toggle{display:flex}
  .nav{
    position:fixed;top:72px;left:0;right:0;background:rgba(11,21,51,.97);
    backdrop-filter:blur(12px);flex-direction:column;align-items:stretch;gap:0;
    padding:8px 24px 20px;border-bottom:1px solid var(--line);
    opacity:0;pointer-events:none;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s var(--ease),visibility 0s linear .3s;
  }
  .nav.open{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition-delay:0s}
  .nav>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav>a.btn{text-align:center;margin-top:14px;border:1px solid var(--accent)}
  .lang-switch{margin-top:14px;align-self:flex-start}
  .form .row{grid-template-columns:1fr}
  .form{padding:24px}
  /* la linea se vuelve vertical en telefono */
  .tl{display:grid;grid-template-columns:42px 1fr;column-gap:18px;margin-top:40px}
  .tl-line{height:auto;width:2px;margin:0 0 0 19px}
  .tl-line i{background:linear-gradient(180deg,var(--accent),var(--accent-hover));transform:scaleY(0);transform-origin:top}
  .in .tl-line i{transform:scaleY(1)}
  .tl-line b:nth-of-type(1){left:50%;top:4%}
  .tl-line b:nth-of-type(2){left:50%;top:50%}
  .tl-line b:nth-of-type(3){left:50%;top:96%}
  .tl-steps{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
  /* tarjetas de servicio: fila completa tambien en telefono */
  .svc{grid-template-columns:minmax(120px,36%) 1fr}
  .svc-img{min-height:100%;aspect-ratio:auto}
  .svc-body{padding:16px 18px}
  .svc-body h3{font-size:.92rem}
  .svc-body p{font-size:.82rem;margin-bottom:12px}
  .svc .num{font-size:.6rem}
  .svc .link{font-size:.7rem}
  .band{padding:0 20px}
  .band-left .line{max-width:92vw;font-size:clamp(1.5rem,7.2vw,2.2rem)}
  .band-settle .sub{max-width:92vw}
}

/* ============================================================
   MOVIMIENTO REDUCIDO: el sitio completo, quieto.
   El video ni se carga (es una de las cinco compuertas).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
    transition-delay:0s!important;
  }
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .ring360 circle,.ring360 ellipse{stroke-dashoffset:0!important}
  .ring360 text{opacity:1!important}
  .tl-line i{transform:none!important}
  .tl-line b{transform:translate(-50%,-50%) scale(1)!important}
  .step{opacity:1!important;transform:none!important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}


/* ============================================================
   SUBPAGINAS DE SERVICIO
   ============================================================ */
.page-hero{position:relative;min-height:56vh;display:grid;align-items:end;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,21,51,.55) 0%,rgba(11,21,51,.25) 40%,rgba(11,21,51,.88) 100%);
}
.page-hero-text{position:relative;width:100%;padding-top:160px;padding-bottom:48px}
.page-hero-text .lead{color:#C9D5EF;max-width:56ch;margin:10px 0 0;text-shadow:var(--tshadow)}
.page-hero-text h1{text-shadow:var(--tshadow);margin:10px 0 0}
.back-link{
  display:inline-block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--line);border-radius:999px;padding:6px 14px;
}
.back-link:hover{color:var(--text-primary);border-color:var(--accent);text-decoration:none}
.includes{list-style:none;margin:0 0 48px;padding:0}
.includes li{
  padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative;
  color:var(--text-secondary);
}
.includes li::before{
  content:"";position:absolute;left:4px;top:24px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);
}
.deliv{color:var(--text-secondary);margin:0 0 56px;font-size:1.05rem}
.cta-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:40px 36px;text-align:center;
}
.cta-panel p{color:var(--text-secondary);max-width:48ch;margin:0 auto 24px}


/* ============================================================
   PORTAFOLIO: proyectos clicables y visor
   ============================================================ */
.work-link{display:block;position:relative;border-radius:var(--r);overflow:hidden}
.work-link::after{
  content:"+";position:absolute;right:14px;bottom:14px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(11,21,51,.72);border:1px solid var(--accent-muted);
  color:var(--text-primary);font-size:1.2rem;
  opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s var(--ease);
}
.work-link:hover::after{opacity:1;transform:scale(1)}
.view-all{margin-top:36px}

.work-grid-page{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.work-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;font:inherit;
  transition:transform .45s var(--ease),border-color .35s;
}
.work-card:hover{transform:translateY(-5px);border-color:var(--accent)}
.work-card img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.work-card figcaption{padding:20px 22px 22px}
.work-card .tags{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);display:block;margin-bottom:8px}
.work-card h3{margin:0;font-size:1rem}
.work-card .count-chip{
  display:inline-block;margin-top:10px;font-size:.62rem;letter-spacing:.12em;
  color:var(--text-secondary);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}
.lb-card img{cursor:grab;user-select:none;-webkit-user-select:none}

/* el visor */
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;}
.lightbox.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.lb-veil{position:absolute;inset:0;background:rgba(5,9,22,.86);backdrop-filter:blur(10px)}
.lb-card{
  position:relative;margin:0;max-width:min(1040px,94vw);max-height:92vh;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(14px) scale(.98);transition:transform .35s var(--ease);
}
.lightbox.open .lb-card{transform:none}
.lb-card img{width:100%;max-height:62vh;object-fit:cover}
.lb-card figcaption{padding:22px 26px 26px}
.lb-tags{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);margin-bottom:8px}
.lb-card h3{margin:0 0 8px}
.lb-card p{margin:0;color:var(--text-secondary);font-size:.95rem;max-width:70ch}
.lb-close,.lb-prev,.lb-next{
  position:absolute;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:rgba(11,21,51,.8);
  color:var(--text-primary);font-size:1.1rem;cursor:pointer;
  transition:border-color .25s,transform .25s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{border-color:var(--accent);transform:scale(1.06)}
.lb-close{top:14px;right:14px}
.lb-count{
  position:absolute;top:22px;left:22px;z-index:2;
  font-size:.68rem;letter-spacing:.14em;color:var(--text-primary);
  background:rgba(11,21,51,.72);border:1px solid var(--accent-muted);
  border-radius:999px;padding:5px 12px;
}
.lb-prev{left:14px;top:calc(31vh - 21px)}
.lb-next{right:14px;top:calc(31vh - 21px)}
body.lb-locked{overflow:hidden}

/* ---------- zona partida USA / Canada ---------- */
.area-split{display:flex;gap:0;margin-top:6px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.area-block{
  flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(160deg,rgba(46,91,255,.06),transparent);
}
.area-block + .area-block{border-left:1px dashed var(--accent-muted)}
.area-flag{font-size:1.6rem;line-height:1}
.area-block b{font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:1.05rem;color:var(--text-primary)}
.area-block em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.92rem;letter-spacing:.1em;color:var(--text-secondary)}