/* ---------- Tipografias de marca Filamento IT ---------- */
@font-face{font-family:"Cy Grotesk Wide";src:url("../fonts/CyGroteskWide-Demi.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cy Grotesk Wide Medium";src:url("../fonts/CyGroteskWide-Medium.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Canva Sans";src:url("../fonts/CanvaSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Canva Sans";src:url("../fonts/CanvaSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   Filamento IT — Hoja de estilo personalizada
   Complementa Tailwind: curvaturas, glassmorphism, animaciones y
   comportamiento "app-like" en móvil.
   ========================================================================== */

:root{
  --ink:        #050505;
  --ink-soft:   #0B0C0A;
  --ink-card:   #111311;
  --line:       #1E211D;
  --lime:       #B4FF39;
  --lime-deep:  #7FC91A;
  --bone:       #F4F4EF;
  --vh:         1vh;             /* fijado por JS para iOS */
  --header-h:   4rem;
  --ease:       cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*{ -webkit-tap-highlight-color: transparent; }

html{
  background: var(--ink);
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body{ text-rendering: optimizeLegibility; }

img{ display:block; max-width:100%; height:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--lime); color:var(--ink); padding:.75rem 1.25rem;
  border-radius:0 0 .75rem 0; font-weight:600; font-size:.875rem;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbar sutil (desktop) */
@media (pointer:fine){
  ::-webkit-scrollbar{ width:9px; }
  ::-webkit-scrollbar-track{ background:var(--ink); }
  ::-webkit-scrollbar-thumb{ background:#242724; border-radius:9px; border:2px solid var(--ink); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--lime-deep); }
}

/* ---------- Fondo de red animado ---------- */
#network-bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-20; pointer-events:none; opacity:.55;
}

/* ---------- Barra de progreso ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lime-deep),var(--lime));
  z-index:60; will-change:transform;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header-shell{
  background:transparent;
  border:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
#site-header.is-stuck .header-shell{
  background:rgba(8,10,8,.82);
  border-color:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 18px 50px -25px rgba(0,0,0,.9);
}
#site-header.is-hidden{ transform:translateY(-120%); }
#site-header{ transform:translateY(0); will-change:transform; }

.nav-link{
  position:relative; padding:.55rem .9rem; border-radius:999px;
  font-size:.9rem; color:rgba(255,255,255,.65);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.nav-link::after{
  content:''; position:absolute; left:50%; bottom:.3rem; height:2px; width:0;
  background:var(--lime); border-radius:2px;
  transform:translateX(-50%); transition:width .35s var(--ease);
}
.nav-link:hover::after{ width:1.1rem; }

/* Botón hamburguesa */
.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; align-items:center; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
}
.burger span{
  display:block; width:17px; height:1.6px; background:#fff; border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 1.5rem 3rem;
  background:rgba(5,5,5,.86);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  backdrop-filter:blur(26px) saturate(140%);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-link{
  display:flex; align-items:baseline; gap:1rem;
  padding:1rem .25rem; font-size:2rem; font-weight:500; letter-spacing:-.03em;
  border-bottom:1px solid rgba(255,255,255,.07);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu.is-open .mobile-link{ opacity:1; transform:none; }
.mobile-menu.is-open .mobile-link:nth-child(1){ transition-delay:.08s; }
.mobile-menu.is-open .mobile-link:nth-child(2){ transition-delay:.14s; }
.mobile-menu.is-open .mobile-link:nth-child(3){ transition-delay:.20s; }
.mobile-menu.is-open .mobile-link:nth-child(4){ transition-delay:.26s; }
.mobile-link:hover,.mobile-link:active{ color:var(--lime); }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn-primary,.btn-outline,.btn-ghost,.btn-dark,.btn-dark-outline{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.95rem 1.6rem; border-radius:999px;
  font-size:.925rem; font-weight:500; line-height:1;
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--lime); color:var(--ink); font-weight:600; }
.btn-primary:hover{ background:#C9FF63; transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(180,255,57,.55); }

.btn-outline{ border:1px solid rgba(255,255,255,.22); color:#fff; background:rgba(255,255,255,.02); }
.btn-outline:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-2px); }

.btn-ghost{
  padding:.6rem 1.25rem; font-size:.875rem; color:#fff;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03);
}
.btn-ghost:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -14px rgba(0,0,0,.65); }

.btn-dark-outline{ border:1px solid rgba(5,5,5,.35); color:var(--ink); }
.btn-dark-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

.arrow{ width:14px; height:14px; transition:transform .35s var(--ease); }
.group:hover .arrow{ transform:translate(3px,-3px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:500; color:var(--lime);
}
.link-arrow svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   TIPOGRAFÍA DE APOYO
   ========================================================================== */
.eyebrow,.eyebrow-sm{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--lime);
}
.eyebrow-sm{ font-size:.63rem; letter-spacing:.24em; }
.eyebrow-dark{ color:var(--lime-deep); }
.dot{ width:6px; height:6px; border-radius:999px; background:var(--lime); box-shadow:0 0 12px var(--lime); animation:pulse 2.6s infinite; }
.dot-dark{ background:var(--lime-deep); box-shadow:none; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.75);} }

.glow-text{ text-shadow:0 0 40px rgba(180,255,57,.45); }

.highlight{ position:relative; display:inline-block; z-index:1; }
.highlight::after{
  content:''; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.34em;
  background:var(--lime); z-index:-1; border-radius:.1em;
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease);
}
.highlight.is-lit::after{ transform:scaleX(1); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-vh{ min-height:calc(var(--vh,1vh)*100); }
@supports (height:100dvh){ .hero-vh{ min-height:100dvh; } }

/* En móvil el hero ocupa EXACTAMENTE la altura de pantalla */
@media (max-width:767px){
  .hero-vh{
    height:calc(var(--vh,1vh)*100);
    min-height:calc(var(--vh,1vh)*100);
    max-height:calc(var(--vh,1vh)*100);
  }
  @supports (height:100dvh){
    .hero-vh{ height:100dvh; min-height:100dvh; max-height:100dvh; }
  }
}

/* Máscara para la entrada línea a línea del H1 */
.line-mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.02em; }
.line{ display:block; }
@media (min-width:1024px){ .line{ white-space:nowrap; } }
/* Sólo se oculta si JS está activo (evita contenido invisible sin JS) */
.js .line{ transform:translateY(105%); }
.js .is-ready .line{ transform:none; }

.hero-orb{ position:relative; filter:drop-shadow(0 0 90px rgba(180,255,57,.22)); }
.hero-orb img{ animation:float 14s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }

.orb-tag{
  position:absolute; display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .8rem; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  white-space:nowrap;
}
.orb-tag::before{ content:''; width:5px; height:5px; border-radius:999px; background:var(--lime); }

.stat dt{
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
.stat dd{
  margin-top:.3rem; font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:600; letter-spacing:-.03em; color:#fff;
}

.scroll-cue{
  position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  transition:opacity .5s var(--ease);
}
.mouse{
  width:22px; height:34px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  display:flex; justify-content:center; padding-top:6px;
}
.wheel{ width:3px; height:7px; border-radius:2px; background:var(--lime); animation:wheel 1.9s var(--ease) infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(-3px);} 40%{opacity:1} 100%{ opacity:0; transform:translateY(11px);} }

/* --- Pantallas bajas: el hero se compacta para no recortar nunca el CTA ---
   Como en móvil el hero mide exactamente 100vh con overflow:hidden, el
   contenido debe caber SIEMPRE. Escalamos según la altura disponible. --- */
@media (max-width:767px){
  #hero > div{ padding-top:6rem; padding-bottom:6rem; }

  @media (max-height:780px){
    #hero > div{ padding-top:5.25rem; padding-bottom:4.5rem; }
    #hero h1{ font-size:clamp(2.05rem,8.4vw,2.4rem); }
    #hero .stat dd{ font-size:1.4rem; }
  }
  @media (max-height:700px){
    #hero > div{ padding-top:4.75rem; padding-bottom:2.75rem; }
    #hero h1{ font-size:1.95rem; }
    #hero > div p{ font-size:.9rem; }
    #hero dl{ margin-top:1.5rem; }
    #hero .stat dd{ font-size:1.25rem; }
    .scroll-cue{ bottom:.75rem; }
    .scroll-cue .mouse{ display:none; }
  }
  @media (max-height:620px){
    /* Teléfonos muy pequeños / teclado abierto: las métricas ceden el sitio
       a los botones de acción, que son lo que convierte. */
    #hero dl{ display:none; }
    .scroll-cue{ display:none; }
    #hero > div{ padding-top:3.5rem; padding-bottom:1.75rem; }
    #hero h1{ margin-top:.5rem; font-size:1.8rem; }
    #hero .eyebrow{ font-size:.58rem; letter-spacing:.16em; }
    #hero .btn-primary,#hero .btn-outline{ padding-block:.8rem; }
  }

  /* Respeta el notch y la barra inferior de iOS */
  #hero > div{
    padding-left:max(1.25rem, env(safe-area-inset-left));
    padding-right:max(1.25rem, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   PANELES 01 / 02
   ========================================================================== */
.split-panel{
  position:relative; isolation:isolate; overflow:hidden;
  padding:4rem 1.5rem 3.5rem;
  background:var(--ink-soft);
  transition:background-color .6s var(--ease);
}
@media (min-width:768px){ .split-panel{ padding:6.5rem 4rem 6rem; min-height:34rem; display:flex; align-items:center; } }
@media (min-width:1280px){ .split-panel{ padding:8rem 6rem; } }

.panel-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.6; transform:scale(1.04);
  transition:opacity .8s var(--ease), transform 1.2s var(--ease);
  z-index:0;
}
/* Velo permanente: la imagen ya no depende del hover, así que el texto
   necesita su contraste garantizado en todo momento. */
.split-panel::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(5,5,5,.95) 20%,rgba(5,5,5,.62) 55%,rgba(5,5,5,.3));
  transition:opacity .8s var(--ease);
}
@media (hover:hover){
  .split-panel:hover .panel-media{ opacity:.85; transform:scale(1); }
  .split-panel:hover{ background:#0E100D; }
}
.split-panel > .relative{ z-index:2; }

.panel-index{
  position:absolute; top:-3.2rem; right:0;
  font-family:'JetBrains Mono',monospace; font-size:clamp(2.5rem,5vw,3.75rem);
  font-weight:400; color:rgba(255,255,255,.13); line-height:1;
  transition:color .5s var(--ease);
}
.split-panel:hover .panel-index{ color:rgba(180,255,57,.35); }
@media (max-width:767px){ .panel-index{ position:static; display:block; margin-top:1.25rem; } }

/* ==========================================================================
   TARJETAS DE SERVICIO (revelado de imagen al hover)
   ========================================================================== */
.service-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:19rem; padding:1.75rem;
  border:1px solid var(--line); border-radius:1.75rem;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
@media (min-width:768px){ .service-card{ min-height:22rem; padding:2.25rem; } }
.service-card.tall{ min-height:24rem; }
@media (min-width:1280px){ .service-card.tall{ min-height:100%; } }

.service-card::before{      /* borde luminoso superior */
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:3;
  padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(160deg,rgba(180,255,57,.65),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .6s var(--ease);
}
.card-media{
  position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:1; transform:scale(1.04);
  transition:opacity .8s var(--ease), transform 1.4s var(--ease);
  animation:drift 22s ease-in-out infinite alternate;
}
/* Deriva lenta tipo ken-burns: da vida a la tarjeta sin pedir interacción */
@keyframes drift{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.11) translate3d(-1.5%,-1.5%,0); }
}
.card-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,5,5,.96) 26%,rgba(5,5,5,.7) 62%,rgba(5,5,5,.34));
}
.card-body{ position:relative; z-index:2; }
.card-index{
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  letter-spacing:.2em; color:var(--lime);
}
.card-body h3{
  margin-top:1.1rem; font-size:clamp(1.25rem,2.2vw,1.6rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.1;
}
.card-body p{
  margin-top:.85rem; font-size:.925rem; line-height:1.6; color:rgba(255,255,255,.55);
  transition:color .5s var(--ease);
}
@media (hover:hover){
  .service-card:hover{ transform:translateY(-6px); border-color:rgba(180,255,57,.28); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
  .service-card:hover::before{ opacity:1; }
  .service-card:hover .card-media img{ opacity:1; animation-play-state:paused; }
  .service-card:hover .card-body p{ color:rgba(255,255,255,.75); }
}

/* --- Táctil: sin hover no hay revelado, así que la imagen se muestra fija.
       Evita tarjetas y paneles vacíos en móvil. --- */
@media (hover:none){
  .card-media img{ opacity:.8; animation:none; transform:scale(1.02); }
  .service-card .card-body p{ color:rgba(255,255,255,.62); }
  .panel-media{ opacity:.62; transform:scale(1); }
  .step-bar{ transform:scaleX(1); opacity:.5; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:2.5rem; width:max-content;
  animation:scroll-x 34s linear infinite;
}
.marquee-track span{
  font-size:clamp(1.5rem,4vw,2.75rem); font-weight:500;
  letter-spacing:-.035em; color:rgba(255,255,255,.16);
  white-space:nowrap; transition:color .4s var(--ease);
}
.marquee:hover .marquee-track span{ color:rgba(255,255,255,.3); }
.marquee-track i{ width:8px; height:8px; border-radius:999px; background:var(--lime); opacity:.55; flex:none; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   CURVATURAS
   ========================================================================== */
.curve-top{ border-radius:3rem 3rem 0 0; margin-top:-2px; }
@media (min-width:1024px){ .curve-top{ border-radius:5rem 5rem 0 0; } }

.curve-top-dark{
  background:var(--ink);
  border-radius:3rem 3rem 0 0;
  margin-top:-3rem; position:relative; z-index:2;
}
@media (min-width:1024px){ .curve-top-dark{ border-radius:5rem 5rem 0 0; margin-top:-5rem; } }

/* ==========================================================================
   PASOS (sección clara)
   ========================================================================== */
.step{
  position:relative; background:var(--bone); padding:2.25rem 1.75rem 2.75rem;
  transition:background-color .5s var(--ease);
}
@media (min-width:768px){ .step{ padding:2.75rem 2.25rem 3.25rem; } }
.step-index{
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  letter-spacing:.2em; color:var(--lime-deep);
}
.step h3{ margin-top:1.5rem; font-size:clamp(1.35rem,2.6vw,1.75rem); font-weight:600; letter-spacing:-.03em; }
.step p{ margin-top:.6rem; font-size:.95rem; line-height:1.6; color:rgba(5,5,5,.6); }
.step-bar{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
@media (hover:hover){
  .step:hover{ background:#fff; }
  .step:hover .step-bar{ transform:scaleX(1); }
}

/* ==========================================================================
   REGIONAL
   ========================================================================== */
/* --- Mapa real de Latinoamérica --- */
.map-frame{
  position:relative; margin:0; border-radius:2rem; overflow:hidden;
  padding:1.25rem 1rem 3.75rem; border:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 50% 35%,rgba(180,255,57,.08),transparent 70%),
    linear-gradient(180deg,#0A0C08,#050505);
}
@media (min-width:1024px){ .map-frame{ border-radius:2.75rem; padding:2rem 1.75rem 4.25rem; } }
.map-frame svg, .map-frame img{ width:100%; height:auto; display:block; }
.map-frame svg .pais{ cursor:pointer; }

/* Retícula tenue de fondo: sitúa el mapa como pieza de datos, no como adorno */
.map-frame::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(180,255,57,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(180,255,57,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);
}
.map-readout{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem; border-radius:999px;
  background:rgba(10,12,10,.72); border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
@media (min-width:1024px){ .map-readout{ left:1.75rem; right:1.75rem; bottom:1.75rem; } }
.map-dot{ width:7px; height:7px; border-radius:999px; background:var(--lime);
  box-shadow:0 0 12px var(--lime); flex:none; }

/* El mapa como fondo del panel 01: encuadrado en el corredor centroamericano */
.panel-media--map{ object-position:50% 22%; }

.chip{
  padding:.55rem 1.1rem; border-radius:999px; font-size:.85rem;
  color:rgba(255,255,255,.75); font-family:inherit; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:all .35s var(--ease);
}
.chip:hover,.chip.is-active{ color:var(--lime); border-color:rgba(180,255,57,.5);
  background:rgba(180,255,57,.08); transform:translateY(-2px); }


/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-section{
  background:var(--lime);
  border-radius:3rem 3rem 0 0;
}
@media (min-width:1024px){ .cta-section{ border-radius:5rem 5rem 0 0; } }
.cta-glow{
  position:absolute; inset:auto -20% -55% -20%; height:70%;
  background:radial-gradient(50% 100% at 50% 0%,rgba(255,255,255,.55),transparent 70%);
  pointer-events:none;
}
.contact-inline{ position:relative; }
.contact-inline::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.contact-inline:hover::after{ transform:scaleX(1); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-title{
  font-family:'JetBrains Mono',monospace; font-size:.65rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.35);
}
.footer-link{ color:rgba(255,255,255,.6); transition:color .3s var(--ease); }
.footer-link:hover{ color:var(--lime); }

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================================== */
.wa-fab{
  position:fixed; z-index:40;
  right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.15rem; border-radius:999px;
  background:var(--lime); color:var(--ink); font-weight:600; font-size:.875rem;
  box-shadow:0 14px 34px -10px rgba(180,255,57,.5);
  transform:translateY(140%); opacity:0;
  transition:transform .55s var(--ease), opacity .45s var(--ease), box-shadow .35s var(--ease);
}
.wa-fab.is-visible{ transform:none; opacity:1; }
.wa-fab:hover{ box-shadow:0 18px 44px -10px rgba(180,255,57,.7); }
.wa-label{ display:none; }
@media (min-width:640px){
  .wa-fab{ right:1.75rem; bottom:1.75rem; }
  .wa-label{ display:inline; }
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA (fallback sin GSAP)
   ========================================================================== */
/* Visible por defecto; sólo se oculta cuando JS puede animarlo */
.js .reveal{ opacity:0; transform:translateY(26px); }

/* ==========================================================================
   COMPORTAMIENTO "APP-LIKE" EN MÓVIL
   Snap suave: el hero se comporta como una pantalla completa y el resto
   del contenido se desliza por debajo sin bloquear el scroll natural.
   ========================================================================== */
@media (max-width:767px) and (hover:none){
  html{
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    /* inercia nativa tipo iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
  /* `proximity` + `stop:normal`: el hero se comporta como una pantalla de app
     (el scroll se asienta en su borde) pero nunca atrapa un gesto corto. */
  .snap-start{ scroll-snap-align:start; scroll-snap-stop:normal; }
}

/* ==========================================================================
   ACCESIBILIDAD: movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-snap-type:none !important; }
  .reveal,.line{ opacity:1 !important; transform:none !important; }
  #network-bg{ display:none; }
}

/* ---------- Utilidad de líneas para el borde ---------- */
.border-ink-line{ border-color:var(--line); }

/* ---------- fotos en los pasos del enfoque ---------- */
.step-media{
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden; margin-bottom:1.15rem;
  background:var(--ink); border:1px solid rgba(5,5,5,.10);
}
.step-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.step:hover .step-media img{ transform:scale(1.07); }
@media (max-width:767px){ .step-media{ aspect-ratio:16/9; margin-bottom:.9rem; } }

/* ---------- boton "Saber mas" en los pasos ---------- */
.step-more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.85rem; font-weight:600; letter-spacing:.01em;
  color:var(--lime-deep); transition:gap .3s var(--ease), color .3s var(--ease);
}
.step-more:hover{ gap:.7rem; color:#5da310; }
.step-more:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:4px; border-radius:4px; }

/* ---------- modal de detalle ---------- */
.fmodal{
  border:0; padding:0; background:transparent; color:var(--bone);
  max-width:min(560px,calc(100vw - 2rem)); width:100%;
  margin:auto; overflow:visible;
}
.fmodal::backdrop{ background:rgba(3,4,3,.78); backdrop-filter:blur(6px); }
.fmodal__in{
  position:relative; background:var(--ink-card); border:1px solid var(--line);
  border-radius:20px; padding:2.5rem 2rem 2rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.fmodal__in::before{
  content:""; position:absolute; inset:0 0 auto; height:2px; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,transparent,var(--lime),transparent); opacity:.7;
}
.fmodal__x{
  position:absolute; top:.85rem; right:1rem; width:34px; height:34px;
  background:none; border:0; cursor:pointer; color:rgba(244,244,239,.55);
  font-size:1.7rem; line-height:1; border-radius:50%; transition:color .25s, background .25s;
}
.fmodal__x:hover{ color:var(--lime); background:rgba(180,255,57,.08); }
.fmodal__ix{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.2em; color:var(--lime); }
.fmodal h3{ margin:.5rem 0 1.1rem; font-size:1.6rem; font-weight:600; letter-spacing:-.02em; }
.fmodal p{ margin-bottom:.9rem; font-size:.95rem; line-height:1.7; color:rgba(244,244,239,.72); }
.fmodal__out{
  margin:1.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.9rem; color:rgba(244,244,239,.85);
}
.fmodal__out strong{ color:var(--lime); font-weight:600; }
@media (max-width:600px){ .fmodal__in{ padding:2.25rem 1.35rem 1.6rem; border-radius:16px; } }

/* ---------- alinear los "Saber mas" al pie de cada paso ---------- */
.step{ display:flex; flex-direction:column; }
.step .step-media{ flex:0 0 auto; }
.step p{ flex:0 0 auto; }
.step-more{ margin-top:auto; padding-top:1.1rem; align-self:flex-start; }

/* ---------- "Saber mas" en las tarjetas de servicios (fondo oscuro) ---------- */
.card-more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  background:none; border:0; padding:0; cursor:pointer; position:relative; z-index:2;
  font-family:inherit; font-size:.85rem; font-weight:600;
  color:var(--lime); opacity:.85;
  transition:gap .3s var(--ease), opacity .3s var(--ease);
}
.card-more:hover{ gap:.7rem; opacity:1; }
.card-more:focus-visible{ outline:2px solid var(--lime); outline-offset:4px; border-radius:4px; }
.service-card .card-body{ display:flex; flex-direction:column; }
.service-card .card-body .card-more{ margin-top:auto; padding-top:.9rem; align-self:flex-start; }

/* ---------- Mapeo tipografico segun la marca original ---------- */
/* Titulares: Cy Grotesk Wide Medium | Cuerpo: Canva Sans */
body{ font-family:"Canva Sans","Helvetica Neue",Arial,sans-serif; }
h1,h2,h3,h4,
.brand,.logo,
.stat .n,.stat-value,
.card-index,.step-index,
.fmodal h3{
  font-family:"Cy Grotesk Wide Medium","Cy Grotesk Wide",Arial,sans-serif;
  font-weight:400;
}
.btn,.button,button,input,textarea,select{
  font-family:"Canva Sans","Helvetica Neue",Arial,sans-serif;
}
.step-more,.card-more{ font-family:"Canva Sans",Arial,sans-serif; font-weight:500; }

/* ---------- Ajuste de escala para Cy Grotesk Wide (mas ancha que Outfit) ---------- */
#hero h1{ font-size:clamp(1.7rem,6.4vw,3.5rem); letter-spacing:-.045em; line-height:1.04; }
h2{ font-size:clamp(1.5rem,3.9vw,2.6rem); letter-spacing:-.035em; line-height:1.1; }
.step h3{ font-size:clamp(1.05rem,2.0vw,1.35rem); letter-spacing:-.02em; }
.service-card h3{ font-size:clamp(1.05rem,1.9vw,1.35rem); letter-spacing:-.02em; }
.fmodal h3{ font-size:1.3rem; letter-spacing:-.02em; }
.stat .n{ font-size:clamp(1.8rem,3.2vw,2.4rem); letter-spacing:-.03em; }
@media (max-width:600px){
  #hero h1{ font-size:clamp(1.55rem,7.6vw,2.2rem); }
  h2{ font-size:clamp(1.35rem,5.6vw,1.9rem); }
}

/* ---------- Creditos de hosting y desarrollo ---------- */
.footer-credits{ color:rgba(255,255,255,.30); }
.footer-credits a{
  color:rgba(255,255,255,.52); text-decoration:none;
  border-bottom:1px solid rgba(180,255,57,.22);
  padding-bottom:1px; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer-credits a:hover{ color:var(--lime); border-bottom-color:var(--lime); }
.footer-credits a:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
@media (max-width:640px){ .footer-credits{ order:3; } }

/* ---------- Aviso de cookies ---------- */
.ck-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  padding:0 1rem 1rem; pointer-events:none;
  transform:translateY(120%); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.ck-banner.is-in{ transform:translateY(0); opacity:1; }
.ck-inner{
  pointer-events:auto; max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  background:rgba(11,12,10,.94); border:1px solid var(--line);
  border-radius:16px; padding:1.15rem 1.35rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.ck-inner::before{
  content:""; position:absolute; inset:0 0 auto; height:0;
}
.ck-text{
  flex:1 1 320px; margin:0;
  font-size:.9rem; line-height:1.6; color:rgba(244,244,239,.74);
}
.ck-actions{ display:flex; gap:.65rem; flex:0 0 auto; }
.ck-btn{
  font-family:inherit; font-size:.85rem; font-weight:500;
  padding:.7rem 1.4rem; border-radius:40px; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.ck-accept{ background:var(--lime); color:#04140a; border:1px solid var(--lime); }
.ck-accept:hover{ background:#c6ff5e; border-color:#c6ff5e; }
.ck-reject{ background:transparent; color:var(--bone); border:1px solid rgba(244,244,239,.34); }
.ck-reject:hover{ background:rgba(244,244,239,.09); border-color:rgba(244,244,239,.55); }
.ck-btn:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
@media (max-width:640px){
  .ck-inner{ flex-direction:column; align-items:stretch; gap:1rem; padding:1.1rem; }
  .ck-actions{ justify-content:stretch; }
  .ck-btn{ flex:1 1 0; text-align:center; }
}

/* ---------- Formulario de contacto ---------- */
.fi-form{ max-width:720px; margin:0 auto 2rem; text-align:left; }
.fi-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fi-field{ display:block; margin-bottom:1rem; }
.fi-field span{
  display:block; margin-bottom:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(4,20,10,.62);
}
.fi-field input,.fi-field textarea{
  width:100%; padding:.8rem .95rem;
  font-family:inherit; font-size:.95rem; color:#0b0e07;
  background:rgba(255,255,255,.72); border:1px solid rgba(4,20,10,.22);
  border-radius:10px; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.fi-field textarea{ resize:vertical; min-height:120px; }
.fi-field input:focus,.fi-field textarea:focus{
  outline:none; background:#fff; border-color:rgba(4,20,10,.6);
}
.fi-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fi-submit{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.4rem; }
.fi-send{
  font-family:inherit; font-size:.9rem; font-weight:600;
  padding:.85rem 1.9rem; border-radius:40px; cursor:pointer;
  background:#0b0e07; color:var(--lime); border:1px solid #0b0e07;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.fi-send:hover{ background:#1c2115; }
.fi-send:disabled{ opacity:.55; cursor:not-allowed; }
.fi-send:focus-visible{ outline:2px solid #0b0e07; outline-offset:3px; }
.fi-status{ margin:0; font-size:.86rem; font-weight:500; color:rgba(4,20,10,.72); }
.fi-status.is-err{ color:#8c1d1d; }
.fi-status.is-ok{ color:#1d5c12; }
.fi-alt{ margin:.5rem 0 1rem; font-size:.85rem; color:rgba(4,20,10,.6); }
@media (max-width:640px){ .fi-row{ grid-template-columns:1fr; gap:0; } }

/* ---------- Formulario: tarjeta sobre el bloque lima ---------- */
.fi-form{
  max-width:680px; margin:2.5rem auto 0; text-align:left;
  background:rgba(6,10,4,.055);
  border:1px solid rgba(4,20,10,.16);
  border-radius:22px; padding:2rem 1.85rem 1.6rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.fi-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.fi-field{ display:block; margin-bottom:1.1rem; }
.fi-field span{
  display:block; margin-bottom:.45rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(4,20,10,.58);
}
.fi-field input,.fi-field textarea{
  width:100%; padding:.85rem 1rem;
  font-family:inherit; font-size:.95rem; color:#0b0e07;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(4,20,10,.18); border-radius:12px;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.fi-field input::placeholder,.fi-field textarea::placeholder{ color:rgba(4,20,10,.34); }
.fi-field input:focus,.fi-field textarea:focus{
  outline:none; background:#fff;
  border-color:rgba(4,20,10,.55);
  box-shadow:0 0 0 3px rgba(4,20,10,.08);
}
.fi-submit{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:.3rem; }
.fi-send{
  font-family:inherit; font-size:.9rem; font-weight:600; letter-spacing:.01em;
  padding:.9rem 2.1rem; border-radius:40px; cursor:pointer;
  background:#0b0e07; color:var(--lime); border:1px solid #0b0e07;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.fi-send:hover{ background:#1c2115; transform:translateY(-1px); }
.fi-alt{
  margin:1.6rem 0 .2rem; text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(4,20,10,.5);
}

/* ---------- Botones grandes: evitar que se estiren ---------- */
.cta-section .btn-dark,
.cta-section .btn-dark-outline{
  flex:0 0 auto; width:auto; min-width:0;
  align-self:center; white-space:nowrap;
}
@media (max-width:640px){
  .fi-form{ padding:1.5rem 1.2rem 1.2rem; border-radius:18px; }
  .fi-row{ grid-template-columns:1fr; gap:0; }
  .cta-section .btn-dark,.cta-section .btn-dark-outline{ width:100%; justify-content:center; }
}

/* ---------- Tamano del logotipo en el encabezado ---------- */
.site-header img[alt="Filamento IT"],
header img[alt="Filamento IT"]{
  height:48px !important; width:auto !important; max-width:none;
}
@media (min-width:768px){
  .site-header img[alt="Filamento IT"],
  header img[alt="Filamento IT"]{ height:60px !important; }
}

/* enlaces "Conversemos" (antes botones de ficha) */
a.step-more,a.card-more{ text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Franja de aliados ---------- */
.aliados-band{
  position:relative; padding:3.5rem 0 3.75rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
}
.aliados-inner{ max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.aliados-eyebrow{
  margin:0 0 2.25rem; text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,244,239,.42);
}
.aliados-grid{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:2.5rem 4.5rem;
}
.aliados-grid li{ display:flex; align-items:center; justify-content:center; }
.aliados-grid img{
  height:38px; width:auto; display:block;
  filter:grayscale(100%) brightness(1.7) contrast(.85);
  opacity:.55;
  transition:opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.aliados-grid li:hover img{
  filter:grayscale(0%) brightness(1) contrast(1);
  opacity:1; transform:translateY(-2px);
}
@media (max-width:900px){ .aliados-grid{ gap:2rem 3rem; } .aliados-grid img{ height:32px; } }
@media (max-width:560px){
  .aliados-band{ padding:2.75rem 0 3rem; }
  .aliados-grid{ gap:1.75rem 2.25rem; }
  .aliados-grid img{ height:27px; }
}

/* ---------- Tarjeta 05 a lo ancho ---------- */
.svc-wide{ grid-column:1 / -1; }
@media (min-width:768px){
  .svc-wide .service-card{ min-height:20rem; }
  .svc-wide .card-body{ max-width:46rem; }
}

/* ---------- Encabezado mas alto + logotipo mas grande ---------- */
:root{ --header-h:6rem; }
header > div{ min-height:6rem; }
header img[alt="Filamento IT"]{ height:56px !important; width:auto !important; max-width:none; }
@media (min-width:768px){ header img[alt="Filamento IT"]{ height:72px !important; } }