:root{
  /* Identidad GMAR Labs */
  --negro:#050D14;        /* azul muy oscuro, casi negro */
  --negro-2:#0A1A24;
  --azul:#1E6BFF;         /* azul eléctrico: acción */
  --azul-claro:#5B92FF;
  --cian:#5FD9F2;         /* cian: capa luminosa */
  --cian-2:#27A9C9;
  --plata:#C7CEDA;
  --plata-tenue:#8B94A6;
  --oro:#D8B45A;          /* acento, uso mínimo */
  --linea:rgba(199,206,218,.12);

  --paso:clamp(16px, 4vw, 40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--negro);
  color:var(--plata);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:var(--paso);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* luz ambiental detrás de la composición */
.hero::before{
  content:"";
  position:absolute;
  top:-12%; right:-10%;
  width:min(900px,90vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(30,107,255,.20) 0%, rgba(30,107,255,.06) 42%, transparent 68%);
  pointer-events:none;
}
/* hairline superior plata→azul */
.hero::after{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,206,218,.35) 22%, rgba(30,107,255,.6) 55%, transparent);
  pointer-events:none;
}

.barra{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px 24px;
}
.marca{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:15px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
}
.marca svg{width:34px;height:34px;flex:none}
.nav{display:flex;gap:clamp(18px,3vw,38px)}
.nav a{
  color:var(--plata-tenue); text-decoration:none; font-size:15px;
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav a:hover{color:#fff;border-color:var(--cian)}
.nav a:focus-visible{outline:2px solid var(--cian);outline-offset:4px}

.hero-grid{
  position:relative; z-index:1;
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,7vw,72px);
  align-items:center;
  max-width:1280px; width:100%; margin:0 auto;
  padding:clamp(48px,8vh,96px) 0;
}

/* ---------- columna izquierda ---------- */
.kicker{
  display:flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--plata-tenue); margin:0 0 24px;
}
.kicker::before{
  content:""; width:38px; height:1px;
  background:linear-gradient(90deg,var(--azul),rgba(216,180,90,.7));
}

h1{
  margin:0 0 22px;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:600;
  color:#fff;
  max-width:16ch;
}
h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--azul-claro),var(--azul) 55%,var(--plata));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sub{
  margin:0 0 38px;
  font-size:clamp(1.02rem,1.6vw,1.16rem);
  color:var(--plata-tenue);
  max-width:46ch;
}

.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--azul); color:#fff;
  font:inherit; font-weight:600; font-size:16px;
  text-decoration:none;
  padding:15px 28px; border-radius:2px; border:0;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{background:#3A80FF;transform:translateY(-1px);box-shadow:0 10px 30px -12px rgba(30,107,255,.85)}
.btn:focus-visible{outline:2px solid var(--plata);outline-offset:3px}
.btn svg{width:15px;height:15px;flex:none}

.btn-2{
  color:var(--plata); text-decoration:none; font-weight:500; font-size:16px;
  padding:15px 2px; border-bottom:1px solid var(--linea);
  transition:color .2s ease, border-color .2s ease;
}
.btn-2:hover{color:#fff;border-color:var(--azul)}
.btn-2:focus-visible{outline:2px solid var(--plata);outline-offset:3px}

/* ---------- columna derecha: arte de portada ---------- */
.visual{position:relative;display:flex;justify-content:center}
.visual img{
  width:100%; height:auto; max-width:640px; display:block;
  /* el recorte trae fondo casi negro; estas aristas lo funden con la pagina */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%),
                     linear-gradient(to top,transparent,#000 14%),
                     linear-gradient(to bottom,transparent,#000 12%),
                     linear-gradient(to left,transparent,#000 10%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent,#000 16%),
                     linear-gradient(to top,transparent,#000 14%),
                     linear-gradient(to bottom,transparent,#000 12%),
                     linear-gradient(to left,transparent,#000 10%);
          mask-composite:intersect;
}

/* aviso de scroll, abajo a la izquierda */
.desliza{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plata-tenue); text-decoration:none; align-self:flex-start;
}
.desliza svg{width:11px;height:20px}
.desliza:hover{color:#fff}
.desliza:focus-visible{outline:2px solid var(--cian);outline-offset:4px}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,96px)}
}
@media (max-width:620px){
  .nav{gap:16px}
  .nav a{font-size:14px}
}
@media (max-width:899px){
  .visual{order:2;margin-top:8px}
  .texto{order:1}
  .visual img{max-width:460px}
}

/* ---------- secciones ---------- */
.sec{padding:clamp(80px,11vh,140px) var(--paso);border-top:1px solid var(--linea)}
.wrap{max-width:1280px;margin:0 auto}
h2{
  margin:0 0 18px;
  font-size:clamp(1.85rem,3.6vw,2.9rem);
  line-height:1.12; letter-spacing:-.03em; font-weight:600; color:#fff;
  max-width:18ch;
}
.entrada{margin:0;color:var(--plata-tenue);max-width:44ch}

/* problemas */
.cols-prob{display:grid;gap:clamp(40px,6vw,80px)}
@media (min-width:940px){.cols-prob{grid-template-columns:.9fr 1.1fr;align-items:start}}

.valor{margin-top:34px;padding-left:20px;border-left:2px solid var(--azul)}
.valor p{margin:0 0 12px;color:#fff;font-size:clamp(1.08rem,1.7vw,1.24rem);line-height:1.45}
.valor p+p{color:var(--plata-tenue);font-size:1rem;line-height:1.6;margin:0}

.lista{border-top:1px solid var(--linea)}
.prob{
  display:grid; grid-template-columns:auto 1fr; gap:6px 20px;
  padding:24px 0; border-bottom:1px solid var(--linea);
}
.prob i{
  font-style:normal; font-size:13px; font-weight:600;
  color:var(--azul); font-variant-numeric:tabular-nums; padding-top:3px;
}
.prob h3{margin:0;font-size:1.06rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.prob p{margin:6px 0 0;color:var(--plata-tenue);font-size:.98rem;grid-column:2}

/* tarjetas */
.cards{display:grid;gap:16px;margin-top:clamp(40px,5vw,60px)}
@media (min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(199,206,218,.035),rgba(199,206,218,0) 60%);
  padding:clamp(26px,3vw,34px);
  display:flex; flex-direction:column;
}
.card svg.glifo{width:30px;height:30px;margin-bottom:22px;flex:none}
.card h3{margin:0 0 10px;font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:-.015em}
.card>p{margin:0 0 20px;color:var(--plata-tenue);font-size:.98rem}
.card ul{margin:0;padding:0;list-style:none;font-size:.94rem;color:var(--plata)}
.card li{padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--linea)}
.card li::before{
  content:""; position:absolute; left:0; top:17px;
  width:6px; height:6px; border:1px solid var(--azul); transform:rotate(45deg);
}
.card .nota{margin:18px 0 0;font-size:.86rem;color:#6E7787}

/* planes */
.plan{position:relative}
.plan.destacado{border-color:rgba(30,107,255,.5);background:linear-gradient(180deg,rgba(30,107,255,.09),rgba(30,107,255,0) 55%)}
.plan.destacado::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--oro));
}
.etiqueta{
  display:inline-block; align-self:flex-start; margin-bottom:16px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--oro); border:1px solid rgba(216,180,90,.4); padding:5px 10px;
}
.card p.plan-meta{
  margin:0 0 20px;font-size:.86rem;color:var(--plata-tenue);
  padding-bottom:18px;border-bottom:1px solid var(--linea);
}

/* mensualidades */
.mensual{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--linea)}
.fila{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:26px 0; border-bottom:1px solid var(--linea);
}
@media (min-width:760px){
  .fila{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:baseline;gap:28px}
}
.fila h3{margin:0;font-size:1.06rem;font-weight:600;color:#fff}
.fila p{margin:0;color:var(--plata-tenue);font-size:.95rem}

.pie-nota{
  margin:clamp(36px,4vw,48px) 0 0;
  font-size:.88rem;color:#6E7787;max-width:76ch;line-height:1.7;
}
.pie-nota strong{color:var(--plata);font-weight:500}

/* ---------- proceso: el recorrido ---------- */
#proceso{position:relative;overflow:hidden}
#proceso::before{
  content:""; position:absolute; top:18%; left:50%;
  width:min(1100px,120vw); aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(95,217,242,.13) 0%, rgba(95,217,242,.04) 45%, transparent 70%);
  pointer-events:none;
}
.recorrido{position:relative;margin-top:clamp(48px,6vw,80px)}

/* el camino luminoso vive detras de las etapas */
.camino{
  display:block; width:100%; height:clamp(90px,10vw,150px);
  margin-top:-8px; pointer-events:none; overflow:visible;
}
@media (max-width:899px){
  .camino{display:none}
  .etapa::after{height:18px}
  .etapa:last-child::after{display:none}
}
.camino path{fill:none;stroke-linecap:round}
.camino .trazo-base{stroke:rgba(95,217,242,.16);stroke-width:2}
.camino .trazo-luz{stroke:var(--cian);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(95,217,242,.75))}

.etapas{position:relative;display:grid;gap:18px}
@media (min-width:900px){
  .etapas{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,34px);align-items:start}
  /* cada estacion se aleja: la 01 al frente, la 03 al fondo */
  .etapa:nth-child(2){margin-top:-56px}
  .etapa:nth-child(3){margin-top:-112px}
}
.etapa{
  position:relative;
  border:1px solid rgba(95,217,242,.22);
  background:linear-gradient(160deg,rgba(95,217,242,.07),rgba(95,217,242,.015) 60%,transparent);
  backdrop-filter:blur(2px);
  padding:clamp(24px,2.6vw,32px);
}
/* el pilar de luz que baja al camino */
.etapa::after{
  content:""; position:absolute; left:50%; top:100%;
  width:1px; height:26px; transform:translateX(-50%);
  background:linear-gradient(to bottom,var(--cian),transparent);
}
.etapa-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.etapa-cab i{
  font-style:normal; font-size:1.5rem; font-weight:600;
  color:var(--cian); font-variant-numeric:tabular-nums; line-height:1;
}
.etapa-cab h3{margin:0;font-size:1.22rem;font-weight:600;color:#fff;letter-spacing:-.015em}
.etapa-cab p{margin:2px 0 0;font-size:.92rem;color:var(--plata-tenue)}
.etapa svg.glifo{width:44px;height:44px;margin:0 0 4px;display:block}
.etapa>p{margin:16px 0 0;font-size:.96rem;color:var(--plata-tenue)}

.rotulos{
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center;
  margin-top:clamp(48px,6vw,76px); padding-top:22px;
  border-top:1px solid var(--linea);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#6E7787;
}
.rotulos span::before{content:"";display:inline-block;width:22px;height:1px;background:var(--cian);
  vertical-align:middle;margin-right:12px;opacity:.6}

/* ---------- video a pantalla completa ---------- */
/* La seccion es mas alta que la pantalla y el marco queda pegajoso dentro:
   eso es lo que da el "plano sostenido" mientras se sigue bajando. */
.cine{position:relative;height:190svh}
.cine-marco{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
  background:var(--negro);
}
.cine-video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(var(--zoom,1.18)) translate3d(0,var(--desliz,0%),0);
  will-change:transform;
}
/* velo: funde con el negro de la pagina al entrar y al salir */
.cine-velo{
  position:absolute; inset:0; pointer-events:none;
  background:var(--negro); opacity:var(--velo,1);
}
/* viñeta fija, para que los bordes no peleen con el resto de la pagina */
.cine-vineta{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(5,13,20,.72) 100%);
}
/* barras de cine: se abren al entrar, se cierran al salir */
.cine-barra{
  position:absolute; left:0; right:0;
  height:var(--barras,16%); background:var(--negro); pointer-events:none;
}
.cine-barra.sup{top:0}
.cine-barra.inf{bottom:0}
/* hairline superior, igual que el resto de secciones */
.cine-marco::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(95,217,242,.45) 50%,transparent);
}
@media (max-width:899px){
  .cine{height:150svh}
  .cine-barra{height:var(--barras,12%)}
}

/* ---------- contacto ---------- */
.contactos{display:grid;gap:14px;margin-top:clamp(36px,4vw,52px)}
@media (min-width:760px){.contactos{grid-template-columns:repeat(3,1fr)}}
.tel{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(95,217,242,.055),rgba(95,217,242,0) 65%);
  padding:clamp(22px,2.4vw,30px);
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.tel:hover{border-color:rgba(95,217,242,.5);transform:translateY(-2px)}
.tel:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.tel span{
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--plata-tenue);
}
.tel span svg{width:13px;height:13px;flex:none}
.tel b{
  font-size:clamp(1.3rem,2.3vw,1.55rem); font-weight:600; color:#fff;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}

/* ---------- pie ---------- */
.pie{padding:clamp(48px,6vh,72px) var(--paso);border-top:1px solid var(--linea)}
.pie-grid{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px 40px;
}
.pie .marca{font-size:14px}
.pie .marca svg{width:28px;height:28px}
.pie-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.pie-nav a{
  color:var(--plata-tenue); text-decoration:none; font-size:.94rem;
  border-bottom:1px solid transparent; transition:color .2s ease,border-color .2s ease;
}
.pie-nav a:hover{color:#fff;border-color:var(--cian)}
.pie-nav a:focus-visible{outline:2px solid var(--cian);outline-offset:4px}
.pie-legal{
  margin:0; width:100%; padding-top:22px;
  border-top:1px solid var(--linea);
  font-size:.86rem; color:#6E7787;
}

/* ---------- aparicion al entrar en pantalla ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* .anima la pone el script: sin JS, sin IntersectionObserver o con
     movimiento reducido, nada se esconde y la seccion se lee igual */
  .anima .surge{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .anima .surge.visible{opacity:1;transform:none}
  .anima .surge:nth-child(2){transition-delay:.12s}
  .anima .surge:nth-child(3){transition-delay:.24s}

  /* el camino se dibuja solo */
  .anima .camino .trazo-luz{
    stroke-dasharray:var(--largo,1300); stroke-dashoffset:var(--largo,1300);
    transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1);
  }
  .anima .recorrido.visible .camino .trazo-luz{stroke-dashoffset:0}
}