/* ============================================================
   GUILARTECH · SISTEMA DE DISEÑO
   Paleta oficial: azul media noche / azul acero / dorado intenso
   Tipografía: Montserrat (títulos) · Arial y equivalentes (texto)
   ============================================================ */
:root{
  --navy:#0D1B3D;
  --navy-2:#29426A;
  --navy-3:#14264f;
  --gold:#D4A017;
  --gold-soft:#f0c14b;
  --ink:#111111;
  --ink-2:#3d4352;
  --muted:#6b7280;
  --line:#E6E8EC;
  --soft:#F7F8FA;
  --soft-2:#EEF1F6;
  --white:#FFFFFF;

  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(84px,11vw,150px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* IMPORTANTE: overflow-x va en 'clip', NUNCA en 'hidden'.
   'hidden' convierte a html/body en contenedor de scroll y rompe
   el position:sticky del header. */
body{
  background:var(--white);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--navy)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.center{text-align:center}
.gold{color:var(--gold)}
.blue{color:var(--navy-2)}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.028em;line-height:1.06;font-weight:700}
h1{font-size:clamp(2.6rem,6.2vw,4.4rem)}
h2{font-size:clamp(2rem,4.2vw,3.05rem);font-weight:700;line-height:1.1}
h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;line-height:1.22}
h4{font-size:1rem;font-weight:600;letter-spacing:-.015em}

.eyebrow{
  display:inline-block;font-family:var(--body);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy-2);margin-bottom:20px
}
.eyebrow.on-navy{color:var(--gold)}
.lead{font-size:clamp(1.02rem,1.35vw,1.15rem);color:var(--ink-2);line-height:1.62;max-width:56ch}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:.94rem;font-weight:600;letter-spacing:-.01em;
  padding:15px 30px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease);
  white-space:nowrap
}
.btn svg{flex:none}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-3);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(13,27,61,.6)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(212,160,23,.75)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.5)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--navy-2);
  font-size:.9rem;font-weight:600;transition:gap .35s var(--ease),color .3s
}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover{color:var(--gold)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)
}
header.stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.97);box-shadow:0 1px 20px -8px rgba(13,27,61,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;transition:height .5s var(--ease)}
header.stuck .nav{height:64px}
.logo{font-family:var(--display);font-weight:800;font-size:1.42rem;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.logo small{
  display:block;font-family:var(--body);font-weight:600;font-size:.44rem;
  letter-spacing:.36em;color:var(--muted);margin-top:5px;text-transform:uppercase
}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links > a{
  position:relative;font-size:.92rem;font-weight:500;color:var(--ink-2);
  padding:6px 0;transition:color .3s
}
.nav-links > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)
}
.nav-links > a:hover{color:var(--navy)}
.nav-links > a:hover::after,.nav-links > a.active::after{transform:scaleX(1)}
.nav-links > a.active{color:var(--navy);font-weight:600}
.nav-links .btn{padding:11px 24px;font-size:.88rem}
.menu-toggle{display:none;background:none;border:0;color:var(--navy);cursor:pointer;padding:8px}

@media(max-width:1040px){
  .menu-toggle{display:block}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);padding:14px 24px 26px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease)
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links > a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links > a::after{display:none}
  .nav-links .btn{margin-top:18px;padding:15px 24px;font-size:.95rem}
}

/* ---------- ANIMACIONES DE SCROLL ---------- */
.r{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.r.in{opacity:1;transform:none}
.r-scale{opacity:0;transform:scale(.965) translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.r-scale.in{opacity:1;transform:none}
.r-line{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease);transition-delay:var(--d,0ms)}
.r-line.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r,.r-scale,.r-line{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .parallax{transform:none!important}
}

/* ---------- HERO ---------- */
.hero{position:relative;padding:clamp(56px,8vw,90px) 0 clamp(70px,9vw,110px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,68px);align-items:center;position:relative}
.hero h1{margin-bottom:26px}
.hero h1 .gold{
  background:linear-gradient(100deg,#D4A017,#f0c14b 55%,#D4A017);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.trust{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.trust .item{display:flex;align-items:center;gap:10px}
.trust svg{width:20px;height:20px;color:var(--navy);flex:none}
.trust b{display:block;font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.25}
.trust span{display:block;font-size:.76rem;color:var(--muted);line-height:1.3}
.trust .sep{width:1px;height:28px;background:var(--line)}

/* Composición de dispositivos (marco CSS, sin imágenes externas) */
.stage{position:relative;padding:10px 0 30px}
.laptop{
  position:relative;background:linear-gradient(160deg,#fbfcfe,#eef1f6);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(13,27,61,.42),0 4px 14px -6px rgba(13,27,61,.14)
}
.laptop-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#fff;border-bottom:1px solid var(--line)}
.laptop-bar i{width:9px;height:9px;border-radius:50%;background:#dfe3ea;display:block}
.laptop-bar .url{
  margin-left:10px;flex:1;background:var(--soft);border-radius:5px;height:20px;
  display:flex;align-items:center;padding:0 10px;font-size:.6rem;color:var(--muted);letter-spacing:.02em
}
.dash{padding:18px;background:#fff}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.kpi{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.kpi .k-l{font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px}
.kpi .k-v{font-family:var(--display);font-size:1.32rem;font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1}
.kpi .k-d{font-size:.6rem;font-weight:700;color:#12805a;margin-top:4px}
.kpi .k-s{font-size:.6rem;color:var(--muted);margin-top:4px}
.chart{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px}
.chart .ttl{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.chart svg{width:100%;height:70px;display:block}
.chart .fx-line{stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 2.2s var(--ease) .3s}
.stage.in .chart .fx-line{stroke-dashoffset:0}
.chart .foot{display:flex;justify-content:space-between;font-size:.58rem;color:var(--muted);margin-top:8px;font-weight:600}
.chart .foot .hi{color:var(--gold)}

.phone{
  position:absolute;right:-22px;bottom:-26px;width:28%;max-width:172px;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:7px;
  box-shadow:0 30px 60px -26px rgba(13,27,61,.5);
}
.phone-inner{background:linear-gradient(170deg,var(--navy),#132b5c);border-radius:16px;padding:14px 12px;color:#fff;min-height:200px}
.phone .p-hi{font-size:.58rem;color:rgba(255,255,255,.6);letter-spacing:.02em}
.phone .p-name{font-family:var(--display);font-size:.92rem;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.phone .p-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:9px 10px;margin-bottom:8px}
.phone .p-card .t{font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:700}
.phone .p-card .n{font-family:var(--display);font-size:1.1rem;font-weight:700;letter-spacing:-.03em;margin-top:2px}
.phone .p-card .s{font-size:.55rem;color:rgba(255,255,255,.6)}
.phone .p-row{display:flex;align-items:center;gap:7px;padding:6px 0;border-top:1px solid rgba(255,255,255,.09)}
.phone .p-row i{width:16px;height:16px;border-radius:50%;background:rgba(212,160,23,.28);flex:none;display:block}
.phone .p-row span{font-size:.55rem;color:rgba(255,255,255,.78);line-height:1.3}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .lead{max-width:none}
  .phone{width:34%;right:0}
}
@media(max-width:520px){
  .hero-cta .btn{width:100%}
  .phone{position:relative;right:auto;bottom:auto;width:100%;max-width:none;margin-top:14px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* ---------- BANDA NAVY: LO QUE CONSTRUIMOS ---------- */
.band{background:var(--navy);color:#fff;padding:clamp(64px,8vw,96px) 0;position:relative;overflow:hidden}
.band::after{
  content:"";position:absolute;left:-140px;bottom:-200px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,160,23,.14),transparent 62%);pointer-events:none
}
.band-head{text-align:center;margin-bottom:52px;position:relative}
.band-head .lbl{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}
.build{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.build .b{padding:0 22px;border-left:1px solid rgba(255,255,255,.13)}
.build .b:first-child{border-left:0;padding-left:0}
.build .b:last-child{padding-right:0}
.build .b-ic{width:34px;height:34px;color:var(--gold);margin-bottom:20px}
.build .b-n{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin-bottom:8px}
.build h4{font-size:.98rem;margin-bottom:9px;color:#fff}
.build p{font-size:.83rem;color:rgba(255,255,255,.66);line-height:1.55}
@media(max-width:1000px){
  .build{grid-template-columns:repeat(2,1fr);gap:36px 28px}
  .build .b{border-left:0;padding:0}
  .build .b:nth-child(2n){border-left:1px solid rgba(255,255,255,.13);padding-left:28px}
}
@media(max-width:560px){
  .build{grid-template-columns:1fr;gap:30px}
  .build .b:nth-child(2n){border-left:0;padding-left:0}
}

/* ---------- BLOQUES ---------- */
.block{padding:var(--pad) 0}
.block.alt{background:rgba(238,241,246,.58)}
.sec-head{max-width:660px;margin:0 auto clamp(44px,5vw,66px);text-align:center}
.sec-head p{color:var(--ink-2);margin-top:20px;font-size:1.02rem;line-height:1.62}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,4vw,48px);flex-wrap:wrap}
.sec-top h2{max-width:21ch}

/* ---------- PROYECTOS ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.proj{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s
}
.proj:hover{transform:translateY(-6px);border-color:#d5dae3;box-shadow:0 30px 60px -34px rgba(13,27,61,.42)}
.proj-shot{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--soft-2)}
.proj-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.2s var(--ease)}
.proj:hover .proj-shot img{transform:scale(1.055)}
.proj-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.proj-body h3{margin-bottom:6px}
.proj-kind{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.proj-body p{font-size:.88rem;color:var(--ink-2);line-height:1.58}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 18px;list-style:none}
.tags li{
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--navy-2);
  background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:5px 9px
}
.proj-body .link-arrow{margin-top:auto}
.proj-ph{
  aspect-ratio:16/11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(150deg,var(--navy),#1c3467);color:#fff;text-align:center;padding:20px
}
.proj-ph .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.proj-ph .m{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
@media(max-width:940px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.projects{grid-template-columns:1fr}}

/* ---------- FÓRMULA ---------- */
.formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:14px}
.fx{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 26px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fx:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(13,27,61,.4)}
.fx-ic{width:32px;height:32px;color:var(--gold);margin-bottom:18px}
.fx h4{font-size:1.08rem;margin-bottom:8px;color:var(--navy)}
.fx p{font-size:.88rem;color:var(--ink-2);line-height:1.58}
.fx-op{display:flex;align-items:center;font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--gold)}
.formula-out{
  margin-top:22px;background:var(--navy);color:#fff;border-radius:14px;padding:24px 28px;
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;flex-wrap:wrap
}
.formula-out b{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.45rem);font-weight:700;letter-spacing:-.025em}
.formula-out .eq{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--gold)}
@media(max-width:860px){
  .formula{grid-template-columns:1fr;gap:10px}
  .fx-op{justify-content:center;padding:2px 0}
}

/* ---------- RESULTADOS ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;text-align:center}
.metric .n{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1}
.metric .l{font-size:.82rem;color:var(--muted);margin-top:10px;line-height:1.45}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.shots figure{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shots img{width:100%;height:auto}
.shots figcaption{font-size:.75rem;color:var(--muted);padding:12px 16px;border-top:1px solid var(--line)}
.note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:24px;max-width:60ch;margin-left:auto;margin-right:auto}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}.shots{grid-template-columns:1fr}}

/* ---------- SOBRE MÍ ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,64px);align-items:center}
.about-visual{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--navy),#1c3467);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;
  box-shadow:0 34px 70px -40px rgba(13,27,61,.55)
}
/* variante con foto real del fundador */
img.about-visual{
  width:100%;height:auto;object-fit:cover;object-position:center 22%;display:block;
  border:1px solid var(--line)
}
.about-photo{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;box-shadow:0 34px 70px -40px rgba(13,27,61,.55)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform 1.4s var(--ease)}
.about-photo:hover img{transform:scale(1.035)}
.about-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,27,61,0) 55%,rgba(13,27,61,.55) 100%)
}
.about-photo .tagline{
  position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff
}
.about-photo .tagline b{
  display:block;font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.025em
}
.about-photo .tagline span{
  display:block;font-size:.78rem;color:rgba(255,255,255,.78);margin-top:3px
}
.about-visual::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 22%,rgba(212,160,23,.24),transparent 58%);
}
.about-visual .jg{
  position:relative;font-family:var(--display);font-size:clamp(3.4rem,7vw,5rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;
  background:linear-gradient(160deg,#fff,#D4A017);-webkit-background-clip:text;background-clip:text;color:transparent
}
.about-visual .tg{position:relative;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:700}
.about-visual .ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.about-visual .ring.a{width:74%;aspect-ratio:1}
.about-visual .ring.b{width:96%;aspect-ratio:1}
.about h2{margin-bottom:20px}
.about p{color:var(--ink-2);line-height:1.68;margin-bottom:16px}
.about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px 0}
.as{display:flex;align-items:center;gap:13px}
.as svg{width:26px;height:26px;color:var(--gold);flex:none}
.as b{display:block;font-family:var(--display);font-size:1.28rem;font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.as span{display:block;font-size:.78rem;color:var(--muted);line-height:1.35}
.sign{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--display);font-weight:700;color:var(--navy);letter-spacing:-.02em}
.sign span{display:block;font-family:var(--body);font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:3px}
@media(max-width:820px){
  .about{grid-template-columns:1fr}
  .about-visual{aspect-ratio:16/10;max-height:300px}
}

/* ---------- CTA FINAL ---------- */
.cta{padding:clamp(90px,11vw,140px) 0;text-align:center;position:relative;overflow:hidden;background:rgba(238,241,246,.58)}
.cta h2{max-width:15ch;margin:0 auto 22px;position:relative}
.cta p{color:var(--ink-2);max-width:52ch;margin:0 auto 34px;position:relative;font-size:1.02rem}
.cta .btn{position:relative}
.dots{position:absolute;width:120px;height:80px;opacity:.5;pointer-events:none}
.dots.l{left:6%;top:26%}
.dots.rr{right:6%;bottom:22%}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:#fff;padding:clamp(52px,6vw,72px) 0 34px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;align-items:start}
footer .logo{color:#fff}
footer .logo small{color:rgba(255,255,255,.45)}
footer .f-tag{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:16px;line-height:1.6;max-width:34ch}
.f-nav{display:flex;flex-direction:column;gap:11px}
.f-nav a{font-size:.9rem;color:rgba(255,255,255,.74);transition:color .3s}
.f-nav a:hover{color:var(--gold)}
.f-title{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700;margin-bottom:16px}
.f-contact a{display:flex;align-items:center;gap:10px;font-size:.9rem;color:rgba(255,255,255,.82);margin-bottom:12px;transition:color .3s}
.f-contact a:hover{color:var(--gold)}
.f-contact svg{width:16px;height:16px;flex:none;opacity:.8}
.socials{display:flex;gap:10px;margin-top:20px}
.soc{
  width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .4s var(--ease)
}
.soc svg{width:17px;height:17px;fill:#fff;opacity:.85}
.soc:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.soc:hover svg{fill:var(--navy);opacity:1}
.foot-bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.45)
}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}

/* WhatsApp flotante */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.7);
  transition:transform .45s var(--ease);opacity:0;pointer-events:none
}
.wa-float.show{opacity:1;pointer-events:auto}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ============================================================
   PÁGINAS INTERIORES (servicios.html · academia.html)
   ============================================================ */
.page-hero{
  background:var(--navy);color:#fff;padding:clamp(64px,9vw,110px) 0 clamp(56px,7vw,84px);
  position:relative;overflow:hidden;text-align:center
}
.page-hero::after{
  content:"";position:absolute;right:-160px;top:-180px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,160,23,.16),transparent 62%);pointer-events:none
}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch;margin:0 auto 20px;position:relative}
.page-hero p{color:rgba(255,255,255,.72);max-width:58ch;margin:0 auto;position:relative;font-size:1.02rem;line-height:1.62}
.crumb{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:22px}
.crumb a{color:rgba(255,255,255,.8);transition:color .3s}
.crumb a:hover{color:var(--gold)}

/* Tarjetas de servicio */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 30px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s
}
.card:hover{transform:translateY(-5px);border-color:#d5dae3;box-shadow:0 28px 56px -34px rgba(13,27,61,.42)}
.card .c-ic{width:32px;height:32px;color:var(--gold);margin-bottom:18px}
.card h3{color:var(--navy);margin-bottom:10px}
.card > p{font-size:.92rem;color:var(--ink-2);line-height:1.6}
.card ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.card ul li{position:relative;padding-left:24px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.card ul li::before{
  content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)
}
.card .ideal{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.card .ideal b{color:var(--navy)}
.card .btn{margin-top:20px}
.card.dark{background:var(--navy);color:#fff}
.card.dark h3{color:#fff}
.card.dark > p,.card.dark ul li{color:rgba(255,255,255,.72)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* Precio */
.price-box{
  background:var(--navy);color:#fff;border-radius:16px;padding:clamp(30px,4vw,46px);
  display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center
}
.price-box h3{font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;margin-bottom:14px}
.price-box p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.62}
.price-tag{text-align:center}
.price-tag .amount{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;letter-spacing:-.045em;color:var(--gold);line-height:1}
.price-tag .cur{display:block;font-size:.8rem;color:rgba(255,255,255,.6);margin-top:6px;letter-spacing:.02em}
.price-tag .was{display:block;font-size:.9rem;color:rgba(255,255,255,.45);text-decoration:line-through;margin-top:4px}
.price-tag .btn{margin-top:20px;width:100%}
.price-tag .fine{display:block;font-size:.72rem;color:rgba(255,255,255,.5);margin-top:12px;line-height:1.5}
@media(max-width:760px){.price-box{grid-template-columns:1fr;text-align:center}}

/* Lista de incluye */
.includes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.inc h4{color:var(--navy);margin-bottom:6px}
.inc p{font-size:.85rem;color:var(--ink-2);line-height:1.55}
@media(max-width:880px){.includes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.includes{grid-template-columns:1fr}}

/* Chips de plataformas */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips span{
  font-size:.82rem;font-weight:600;color:var(--navy-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px
}

/* Testimonios */
.tsts{columns:3;column-gap:20px}
.tst{
  break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;margin-bottom:20px
}
.tst p{font-size:.9rem;color:var(--ink-2);line-height:1.65;font-style:italic}
.tst .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--navy);font-weight:700;font-family:var(--display)}
.tst .who span{display:block;font-family:var(--body);font-weight:500;color:var(--muted);margin-top:3px}
@media(max-width:900px){.tsts{columns:2}}
@media(max-width:600px){.tsts{columns:1}}

/* Casos */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kase{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.kase img{width:100%;aspect-ratio:16/10;object-fit:cover}
.kase-body{padding:22px;display:flex;flex-direction:column;flex:1}
.kase-body .k-tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:9px}
.kase-body h3{color:var(--navy);margin-bottom:9px;font-size:1.08rem}
.kase-body p{font-size:.86rem;color:var(--ink-2);line-height:1.58}
.kase-body .res{
  margin-top:14px;padding:12px 14px;background:var(--soft);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;font-size:.83rem;color:var(--ink-2);line-height:1.5
}
.kase-body .res b{color:var(--navy)}
@media(max-width:940px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cases{grid-template-columns:1fr}}

/* Equipos */
.gear{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gear-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gear-item:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(13,27,61,.4)}
.gear-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft-2)}
.gear-body{padding:20px}
.gear-body h4{color:var(--navy);font-size:1.02rem;margin-bottom:6px}
.gear-body p{font-size:.84rem;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
@media(max-width:940px){.gear{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gear{grid-template-columns:1fr}}

/* Ebook */
.ebook{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,56px);align-items:center}
.ebook img{width:100%;border-radius:14px;box-shadow:0 34px 70px -38px rgba(13,27,61,.5)}
.ebook h2{margin-bottom:18px}
.ebook ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:22px 0 26px}
.ebook ul li{position:relative;padding-left:26px;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.ebook ul li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)
}
.ebook .p-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.ebook .p-now{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--navy);letter-spacing:-.045em}
.ebook .p-was{font-size:1.05rem;color:var(--muted);text-decoration:line-through}
.ebook .p-cur{font-size:.8rem;color:var(--muted)}
@media(max-width:820px){.ebook{grid-template-columns:1fr}}

/* ---------- MODAL DE MEMBRESÍA ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(13,27,61,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:16px;padding:36px 32px 32px;width:100%;max-width:440px;position:relative;
  box-shadow:0 40px 90px -40px rgba(13,27,61,.6);transform:translateY(16px) scale(.98);
  transition:transform .4s var(--ease);max-height:90vh;overflow-y:auto
}
.modal-overlay.open .modal{transform:none}
.modal-close{
  position:absolute;top:14px;right:14px;background:none;border:0;color:var(--muted);cursor:pointer;
  padding:6px;border-radius:6px;transition:background .3s,color .3s
}
.modal-close:hover{background:var(--soft);color:var(--navy)}
.modal-badge{
  display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gold);background:rgba(212,160,23,.12);border-radius:999px;padding:6px 13px;margin-bottom:14px
}
.modal h3{color:var(--navy);font-size:1.45rem;margin-bottom:8px}
.modal .m-sub{font-size:.9rem;color:var(--ink-2);margin-bottom:14px;line-height:1.55}
.modal .m-price{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--navy);letter-spacing:-.03em;margin-bottom:20px}
.modal .m-price s{font-size:.9rem;font-weight:500;color:var(--muted);margin-left:8px}
.m-error{display:none;background:#fdecec;border:1px solid #f5c2c2;color:#a12626;font-size:.84rem;border-radius:8px;padding:11px 13px;margin-bottom:16px;line-height:1.45}
.m-error.show{display:block}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.field input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--body);
  font-size:.92rem;color:var(--ink);background:var(--soft);transition:border-color .3s,background .3s
}
.field input:focus{outline:0;border-color:var(--navy-2);background:#fff}
.modal .btn{width:100%;margin-top:6px}
.modal .m-fine{font-size:.72rem;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ---------- CASO DE MARKETING (cliente destacado) ---------- */
.case-study{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,56px);align-items:center}
.cs-client{
  display:inline-flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;margin-bottom:22px;font-size:.82rem;color:var(--navy);font-weight:600
}
.cs-client i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:block;flex:none}
.case-study h2{margin-bottom:20px}
.case-study .cs-lead{color:var(--ink-2);font-size:1.02rem;line-height:1.65;margin-bottom:26px}
.cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cs-cell{background:#fff;padding:22px 20px}
.cs-cell .n{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;color:var(--navy);letter-spacing:-.045em;line-height:1}
.cs-cell .l{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.4}
.cs-cell.hi{background:var(--navy)}
.cs-cell.hi .n{color:var(--gold)}
.cs-cell.hi .l{color:rgba(255,255,255,.7)}
.cs-shots{display:grid;gap:18px}
.cs-shots figure{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cs-shots img{width:100%;height:auto;display:block}
.cs-shots figcaption{font-size:.74rem;color:var(--muted);padding:11px 15px;border-top:1px solid var(--line);line-height:1.45}
.cs-did{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cs-did .t{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px}
.cs-did ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.cs-did li{position:relative;padding-left:24px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.cs-did li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)
}
@media(max-width:900px){.case-study{grid-template-columns:1fr}}


/* ============================================================
   FONDO AMBIENTAL · PROFUNDIDAD DIFUMINADA
   Tres planos de profundidad que se desplazan a distinta
   velocidad con el scroll (--sy) y derivan solos muy despacio:
     .far   halos amplios de color (fondo)
     .mid   malla de nodos tecnológicos, apenas perceptible
     .near  bokeh desenfocado (primer plano)
   Sin líneas rectas. Se congela con prefers-reduced-motion.
   ============================================================ */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg .layer{position:absolute;inset:-12%;will-change:transform}
.bg .far {transform:translate3d(0,calc(var(--sy,0) * -2.5vh),0)}
.bg .mid {transform:translate3d(0,calc(var(--sy,0) * -7vh),0)}
.bg .near{transform:translate3d(0,calc(var(--sy,0) * -15vh),0)}

/* --- plano de fondo: halos suaves --- */
.bg .glow{position:absolute;display:block;border-radius:50%;will-change:transform}
.bg .g1{
  width:78vmax;height:78vmax;left:-26vmax;top:-30vmax;
  background:radial-gradient(circle closest-side,rgba(41,66,106,.17),rgba(41,66,106,.06) 45%,rgba(41,66,106,0) 74%);
  animation:gDrift1 52s ease-in-out infinite alternate
}
.bg .g2{
  width:62vmax;height:62vmax;right:-22vmax;top:2vmax;
  background:radial-gradient(circle closest-side,rgba(212,160,23,.18),rgba(212,160,23,.05) 45%,rgba(212,160,23,0) 74%);
  animation:gDrift2 64s ease-in-out infinite alternate
}
.bg .g3{
  width:84vmax;height:84vmax;left:18vmax;bottom:-42vmax;
  background:radial-gradient(circle closest-side,rgba(41,66,106,.14),rgba(41,66,106,0) 72%);
  animation:gDrift3 76s ease-in-out infinite alternate
}

/* --- plano medio: malla de nodos (branding tecnológico) --- */
.bg .mesh{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at center,rgba(13,27,61,.16) 1.1px,transparent 1.2px),
    radial-gradient(circle at center,rgba(212,160,23,.14) 1.1px,transparent 1.2px);
  background-size:46px 46px,138px 138px;
  background-position:0 0,23px 23px;
  -webkit-mask-image:
    radial-gradient(58% 46% at 76% 16%,#000 0,transparent 72%),
    radial-gradient(52% 44% at 16% 74%,#000 0,transparent 72%);
  mask-image:
    radial-gradient(58% 46% at 76% 16%,#000 0,transparent 72%),
    radial-gradient(52% 44% at 16% 74%,#000 0,transparent 72%);
  -webkit-mask-composite:source-over;mask-composite:add;
  animation:meshDrift 110s ease-in-out infinite alternate
}

/* --- primer plano: bokeh desenfocado --- */
.bg .bokeh{
  position:absolute;display:block;border-radius:50%;
  filter:blur(26px);will-change:transform,opacity
}
.bg .k1{width:190px;height:190px;left:9%;top:22%;background:rgba(41,66,106,.13);animation:kDrift1 34s ease-in-out infinite alternate}
.bg .k2{width:112px;height:112px;right:16%;top:12%;background:rgba(212,160,23,.16);filter:blur(18px);animation:kDrift2 42s ease-in-out infinite alternate}
.bg .k3{width:240px;height:240px;right:6%;bottom:16%;background:rgba(41,66,106,.10);filter:blur(38px);animation:kDrift3 48s ease-in-out infinite alternate}
.bg .k4{width:84px;height:84px;left:34%;bottom:8%;background:rgba(212,160,23,.13);filter:blur(14px);animation:kDrift4 38s ease-in-out infinite alternate}

@keyframes gDrift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vmax,6vmax,0) scale(1.1)}}
@keyframes gDrift2{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-7vmax,9vmax,0) scale(.95)}}
@keyframes gDrift3{0%{transform:translate3d(0,0,0) scale(.97)}100%{transform:translate3d(-10vmax,-5vmax,0) scale(1.08)}}
@keyframes meshDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-46px,-28px,0)}}
@keyframes kDrift1{0%{transform:translate3d(0,0,0);opacity:.9}100%{transform:translate3d(60px,-46px,0);opacity:1}}
@keyframes kDrift2{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-48px,54px,0);opacity:.75}}
@keyframes kDrift3{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-56px,-40px,0) scale(1.14)}}
@keyframes kDrift4{0%{transform:translate3d(0,0,0);opacity:.8}100%{transform:translate3d(44px,-34px,0);opacity:1}}

@media(max-width:760px){
  .bg .g3,.bg .k3,.bg .k4{display:none}
  .bg .mesh{background-size:38px 38px,114px 114px;opacity:.75}
  .bg .layer{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .bg .layer,.bg .glow,.bg .mesh,.bg .bokeh{animation:none!important;transform:none!important}
}

/* ---------- TIENDA / PRODUCTOS ---------- */
.gear-item .g-price{
  display:flex;align-items:baseline;gap:9px;margin:0 0 14px;
  padding-top:12px;border-top:1px solid var(--line)
}
.gear-item .g-price .now{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1}
.gear-item .g-price .cur{font-size:.74rem;color:var(--muted);font-weight:600}
.gear-item .g-price .was{font-size:.86rem;color:var(--muted);text-decoration:line-through}
.gear-item .g-price.quote .now{font-size:1rem;font-weight:700;color:var(--navy-2)}
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.badge-row span{
  display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px
}
.badge-row svg{width:14px;height:14px;color:var(--gold);flex:none}
.featured{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,48px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:clamp(24px,3vw,38px)
}
.featured img{width:100%;border-radius:12px;box-shadow:0 26px 56px -34px rgba(13,27,61,.5)}
.featured h3{font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--navy);margin-bottom:14px}
.featured p{color:var(--ink-2);line-height:1.62;font-size:.95rem}
.featured ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0 22px}
.featured li{position:relative;padding-left:24px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.featured li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.featured .f-price{display:flex;align-items:baseline;gap:11px;margin-bottom:18px}
.featured .f-price .now{font-family:var(--display);font-size:2.1rem;font-weight:800;color:var(--navy);letter-spacing:-.045em}
.featured .f-price .was{font-size:1rem;color:var(--muted);text-decoration:line-through}
.featured .f-price .cur{font-size:.78rem;color:var(--muted)}
@media(max-width:760px){.featured{grid-template-columns:1fr}}


/* ============================================================
   CATÁLOGO TIPO TIENDA (productos.html)
   ============================================================ */
.shop-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  margin-bottom:30px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;
  position:sticky;top:78px;z-index:20;
  box-shadow:0 10px 30px -24px rgba(13,27,61,.5)
}
.shop-search{position:relative;flex:1 1 240px;min-width:200px}
.shop-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.shop-search input{
  width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:9px;
  background:var(--soft);font-family:var(--body);font-size:.9rem;color:var(--ink);transition:border-color .3s,background .3s
}
.shop-search input:focus{outline:0;border-color:var(--navy-2);background:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)
}
.filters button:hover{border-color:var(--navy-2);color:var(--navy);transform:translateY(-1px)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.shop-count{font-size:.8rem;color:var(--muted);text-align:center;margin-top:22px}
.gear-item[hidden]{display:none}
.shop-empty{
  display:none;text-align:center;padding:56px 20px;background:#fff;border:1px dashed var(--line);
  border-radius:14px;color:var(--muted);font-size:.95rem
}
.shop-empty.show{display:block}
.gear-item .g-cat{
  position:absolute;top:12px;left:12px;z-index:2;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--navy);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px
}
.gear-item{position:relative}
@media(max-width:700px){.shop-bar{position:static}}

/* ============================================================
   SOPORTE Y REPARACIÓN APPLE (soporte.html)
   Flujo por pasos: equipo -> falla -> cotización por WhatsApp
   ============================================================ */
.steps-rail{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 48px;max-width:520px}
.step-dot{display:flex;align-items:center;gap:10px}
.step-dot i{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.8rem;font-weight:700;font-style:normal;
  background:var(--soft);color:var(--muted);border:1px solid var(--line);transition:all .45s var(--ease);flex:none
}
.step-dot span{font-size:.8rem;font-weight:600;color:var(--muted);transition:color .45s var(--ease);white-space:nowrap}
.step-dot.on i{background:var(--navy);border-color:var(--navy);color:#fff}
.step-dot.on span{color:var(--navy)}
.step-dot.done i{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.step-line{flex:1;height:1px;background:var(--line);margin:0 14px;min-width:20px}
@media(max-width:620px){.step-dot span{display:none}.step-line{margin:0 8px}}

.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.pick button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px 18px;cursor:pointer;
  font-family:var(--body);transition:border-color .35s,transform .45s var(--ease),box-shadow .45s var(--ease)
}
.pick button:hover{border-color:var(--navy-2);transform:translateY(-4px);box-shadow:0 22px 46px -30px rgba(13,27,61,.45)}
.pick button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.16)}
.pick svg{width:34px;height:34px;color:var(--navy);stroke-width:1.4}
.pick b{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--navy);letter-spacing:-.015em}
.pick small{font-size:.76rem;color:var(--muted);line-height:1.4}

.sup-step{display:none}
.sup-step.on{display:block;animation:supIn .55s var(--ease)}
@keyframes supIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sup-head{text-align:center;max-width:620px;margin:0 auto 34px}
.sup-head h2{margin-bottom:14px}
.sup-head p{color:var(--ink-2);font-size:1rem;line-height:1.6}
.sup-back{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:.86rem;font-weight:600;color:var(--navy-2);padding:8px 0;margin-bottom:18px;
  transition:gap .35s var(--ease)
}
.sup-back:hover{gap:11px}

.quote-card{
  max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,3.4vw,40px);box-shadow:0 30px 64px -40px rgba(13,27,61,.4)
}
.quote-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.quote-row:last-of-type{border-bottom:0}
.quote-row .k{color:var(--muted)}
.quote-row .v{color:var(--navy);font-weight:600;text-align:right}
.quote-card .field{margin-top:18px}
.quote-card .btn{width:100%;margin-top:20px;padding:16px 24px;font-size:1rem}
.quote-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

.sup-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;text-align:center}
.fact svg{width:26px;height:26px;color:var(--gold);margin-bottom:12px}
.fact b{display:block;font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.fact span{font-size:.82rem;color:var(--muted);line-height:1.5}
@media(max-width:880px){.sup-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sup-facts{grid-template-columns:1fr}}

.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.part{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  transition:border-color .3s,transform .4s var(--ease)
}
.part:hover{border-color:var(--navy-2);transform:translateY(-2px)}
.part b{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--navy)}
.part span{display:block;font-size:.76rem;color:var(--muted);font-weight:400;font-family:var(--body);margin-top:2px}
.part svg{width:16px;height:16px;color:var(--gold);flex:none}