/* =========================================================
   Juan Gabriel Agudelo · Microelectrónica y microsoldadura
   Tema: laboratorio técnico CLARO. Acento azul eléctrico / cian.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-2:#f4f8fd;
  --surface:#ffffff;
  --graphite:#eaf0f8;
  --panel:rgba(20,50,100,.03);
  --line:rgba(20,50,100,.13);
  --line-2:rgba(20,50,100,.24);

  --text:#0e1728;
  --muted:#4d5d76;
  --dim:#5f6f88;

  --blue:#1d4ed8;
  --blue-2:#2563eb;
  --cyan:#0e7490;
  --cyan-lit:#06b6d4;
  --green:#15803d;
  --wa:#25d366;

  --glow-cyan:rgba(6,182,212,.3);
  --glow-blue:rgba(37,99,235,.16);

  --radius:16px;
  --radius-lg:22px;
  --maxw:1200px;
  --shadow:0 22px 52px rgba(18,42,84,.13);
  --shadow-sm:0 10px 28px rgba(18,42,84,.08);
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display de clase */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit}
h1,h2,h3,h4,.brand__txt,.stat b,.chip__num{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.16;font-weight:700}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* Palabra resaltada. El azul sólido es la base: si el navegador no pinta
   background-clip:text la palabra igual se lee, en vez de quedar invisible. */
.grad{
  color:var(--blue);
  background:linear-gradient(100deg,var(--blue),var(--cyan) 55%,var(--blue));
  background-size:220% 100%;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:gradShift 9s linear infinite;
  }
}
/* Modo alto contraste de Windows: ahí el degradado no se pinta */
@media (forced-colors:active){
  .grad{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}
@keyframes gradShift{to{background-position:220% 0}}

/* Accesibilidad: foco visible en todo lo interactivo */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{
  position:fixed;left:12px;top:-70px;z-index:900;
  background:var(--blue);color:#fff;font-weight:600;
  padding:10px 16px;border-radius:10px;transition:top .25s var(--ease);
}
.skip:focus{top:12px}

/* ---------- Iconos ---------- */
.sprite{display:none}
.ic{
  width:1.25em;height:1.25em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic--go{transition:transform .3s var(--ease)}

/* ---------- Fondo animado ---------- */
.bgfx{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:1;
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(20,60,120,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,60,120,.085) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 12%,#000 0%,rgba(0,0,0,.3) 55%,transparent 82%);
  -webkit-mask-image:radial-gradient(circle at 50% 12%,#000 0%,rgba(0,0,0,.3) 55%,transparent 82%);
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 80% 4%,rgba(37,99,235,.2),transparent 70%),
    radial-gradient(52% 42% at 4% 40%,rgba(6,182,212,.19),transparent 72%),
    radial-gradient(70% 50% at 50% 106%,rgba(37,99,235,.16),transparent 70%);
}
header,main,footer,.wa-float,.lb,.loader{position:relative;z-index:2}

/* ---------- Splash de entrada ---------- */
.intro{
  position:fixed;inset:0;z-index:999;overflow:hidden;
  display:grid;place-items:center;text-align:center;
  background:#060a12;
  transition:opacity .8s var(--ease),visibility .8s;
}
html:not(.js) .intro{display:none}
html.intro-lock,html.intro-lock body{overflow:hidden;height:100%}
.intro.is-out{opacity:0;visibility:hidden}
.intro__bg{
  position:absolute;inset:0;
  background:#0a1020 url('../img/medellin.jpg') center/cover no-repeat;
  background-image:image-set(url('../img/medellin-1600.webp') type('image/webp'),url('../img/medellin.jpg') type('image/jpeg'));
  transform:scale(1.14);
  animation:introZoom 12s ease-out forwards;
}
@keyframes introZoom{to{transform:scale(1)}}
.intro__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 50% 42%,rgba(10,25,60,.35),transparent 70%),
    linear-gradient(180deg,rgba(4,8,16,.62),rgba(4,8,16,.5) 45%,rgba(4,8,16,.88));
}
.intro__scan{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
  animation:introScan 8s linear infinite;
}
@keyframes introScan{to{background-position:0 400px}}
.intro__in{position:relative;padding:0 24px;max-width:640px}
.intro__logo{
  width:104px;height:auto;margin:0 auto 20px;display:block;
  filter:drop-shadow(0 0 24px rgba(6,182,212,.55)) brightness(1.6);
  opacity:0;animation:introPop .9s var(--ease) .15s forwards;
}
@keyframes introPop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.intro__name{
  font-family:'Sora',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.6rem,4.4vw,2.5rem);letter-spacing:-.02em;line-height:1.15;
}
.intro__name .ch{display:inline-block;opacity:0;transform:translateY(22px);animation:introChar .6s var(--ease) forwards}
@keyframes introChar{to{opacity:1;transform:none}}
.intro__sub{
  color:var(--cyan-lit);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  margin-top:10px;opacity:0;animation:introFade .8s var(--ease) 1.1s forwards;
}
.intro__tag{
  color:rgba(255,255,255,.78);font-size:1rem;margin-top:14px;
  opacity:0;animation:introFade .8s var(--ease) 1.3s forwards;
}
@keyframes introFade{to{opacity:1}}
.intro__bar{width:190px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.intro__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan-lit));animation:introLoad 2.6s var(--ease) 1.1s forwards}
@keyframes introLoad{to{width:100%}}
.intro__enter{
  margin-top:26px;padding:14px 34px;border-radius:14px;
  font-weight:700;font-size:.98rem;color:#0b1b2e;background:#fff;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  opacity:0;animation:introFade .6s var(--ease) 2.3s forwards;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.intro__enter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 40px rgba(6,182,212,.4)}
.intro__credit{
  position:absolute;right:14px;bottom:12px;
  color:rgba(255,255,255,.5);font-size:.72rem;letter-spacing:.08em;
}
@media(max-width:560px){
  .intro__logo{width:84px}
  .intro__tag{font-size:.92rem}
}

/* ---------- Botones ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:.95rem;line-height:1;
  padding:14px 24px;border-radius:12px;
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(29,78,216,.28)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .ic{width:1.15em;height:1.15em}
.btn--lg{padding:16px 28px;font-size:1rem}
.btn--sm{padding:10px 18px;font-size:.86rem;border-radius:10px}
.btn--block{width:100%}
.btn--wa{background:linear-gradient(135deg,#2ee06f,#12b45a);color:#03150a}
.btn--wa:hover{box-shadow:0 14px 32px rgba(18,180,90,.32)}
.btn--ghost{
  background:#fff;color:var(--text);
  border-color:var(--line-2);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{
  border-color:var(--blue);color:var(--blue);
  background:#f4f8ff;
  box-shadow:0 12px 30px rgba(29,78,216,.14);
}
.btn--ghost:hover .ic--go{transform:translateX(4px)}
.btn--ghost::after{background:linear-gradient(100deg,transparent,rgba(37,99,235,.14),transparent)}

/* ---------- Progreso de lectura ---------- */
.sprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:150;pointer-events:none;background:transparent}
.sprog span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--cyan-lit));
  box-shadow:0 0 10px rgba(6,182,212,.5);
}

/* ---------- Header ---------- */
.hd{
  position:sticky;top:0;z-index:100;
  background:transparent;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),box-shadow .35s var(--ease);
}
.hd.is-stuck{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 10px 30px rgba(18,42,84,.09);
}
.hd__line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),rgba(6,182,212,.45),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.hd.is-stuck .hd__line{opacity:1}
.hd__in{display:flex;align-items:center;gap:18px;height:76px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;flex:none}
/* Emblema del logo, recortado de su placa y sin fondo */
.brand__mark{
  height:52px;width:auto;display:block;
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.brand:hover .brand__mark{transform:translateY(-1px)}
.brand__txt{font-size:1.16rem;font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-.02em}
.brand__txt b{
  display:block;font-weight:800;
  background:linear-gradient(120deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand--ft .brand__mark{height:62px}
.brand--ft .brand__txt{font-size:1.28rem}

.hd__nav{display:flex;align-items:center;gap:19px}
.hd__nav>a:not(.btn){
  position:relative;font-size:.9rem;font-weight:500;color:var(--muted);
  white-space:nowrap;padding:6px 0;transition:color .25s var(--ease);
}
.hd__nav>a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  border-radius:2px;transition:width .3s var(--ease);
}
.hd__nav>a:not(.btn):hover{color:var(--text)}
.hd__nav>a:not(.btn):hover::after,
.hd__nav>a.is-active::after{width:100%}
.hd__nav>a.is-active{color:var(--text)}
.hd__nav-cta{display:none}
.hd__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;flex:none;align-items:center;box-shadow:var(--shadow-sm);
}
.hd__toggle span{display:block;width:19px;height:1.8px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.hd__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.hd__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding:72px 0 40px}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);background:rgba(37,99,235,.07);
  border:1px solid rgba(37,99,235,.2);border-radius:30px;padding:7px 15px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(21,128,61,.5);animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}70%{box-shadow:0 0 0 9px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.hero__copy h1{font-size:clamp(2.15rem,4.7vw,3.6rem);font-weight:800;margin:20px 0 0}
.hero__lead{color:var(--muted);font-size:1.06rem;margin:20px 0 30px;max-width:56ch}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.hero__badges{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px}
.hero__badges li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--muted);font-weight:500}
.hero__badges .ic{color:var(--blue);width:1.05em;height:1.05em}

.hero__media{position:relative}
.hero__frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--graphite);
  aspect-ratio:4/3;
  box-shadow:var(--shadow);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.hero__video{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03)}
.hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 34%,rgba(10,25,50,.2) 100%);
}
.hero__frame-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 50px rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.18);
}
.hero__scan{
  position:absolute;left:0;right:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,182,212,.22),transparent);
  animation:scan 7s var(--ease) infinite;
}
@keyframes scan{0%{transform:translateY(-130px)}100%{transform:translateY(560px)}}

.chip{
  position:absolute;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;box-shadow:var(--shadow);
}
.chip .ic{color:var(--blue);width:1.5em;height:1.5em}
.chip b{display:block;font-size:.88rem;font-weight:600;font-family:'Sora',sans-serif}
.chip span{display:block;font-size:.76rem;color:var(--dim)}
.chip--a{left:-16px;top:26px;animation:float 6.5s ease-in-out infinite}
.chip--b{right:-10px;bottom:24px;flex-direction:column;align-items:flex-start;gap:0;animation:float 7.5s ease-in-out .8s infinite}
.chip__num{font-size:1.42rem;font-weight:800;background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Tira de confianza ---------- */
.strip{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 8px;margin-top:26px;
  box-shadow:var(--shadow-sm);
}
.strip li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  font-size:.8rem;font-weight:500;color:var(--muted);padding:2px 10px;
  border-right:1px solid var(--line);
}
.strip li:last-child{border-right:0}
.strip .ic{width:1.55em;height:1.55em;color:var(--blue)}

/* ---------- Secciones ---------- */
.sec{padding:96px 0;position:relative}
.sec__sep{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
/* Ritmo visual: capa suave que deja ver el fondo animado */
.why,.revs,.tools-sec{
  background:linear-gradient(180deg,rgba(232,240,251,.72),rgba(255,255,255,0));
}
.head{text-align:center;max-width:720px;margin:0 auto 52px}
.head--left{text-align:left;margin:0 0 28px;max-width:none}
.tag{
  display:inline-block;font-size:.73rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.2);
  padding:6px 14px;border-radius:30px;margin-bottom:16px;
}
.head h2{font-size:clamp(1.65rem,3.4vw,2.5rem);font-weight:800}
.head p{color:var(--muted);margin-top:14px;font-size:1.02rem}
.head--left p{max-width:56ch}
.head__cta{text-align:center;margin-top:44px}

/* ---------- Servicios ---------- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc__c{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.svc__c::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .45s var(--ease);
}
.svc__c::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120px 90px at 78% 6%,rgba(37,99,235,.1),transparent 70%);
  transition:opacity .35s var(--ease);
}
.svc__c:hover,.svc__c:focus-visible{transform:translateY(-6px);border-color:rgba(37,99,235,.3);box-shadow:var(--shadow)}
.svc__c:hover::before,.svc__c:focus-visible::before{width:100%}
.svc__c:hover::after{opacity:1}
.svc__ic{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(140deg,rgba(37,99,235,.12),rgba(6,182,212,.09));
  border:1px solid rgba(37,99,235,.16);color:var(--blue);margin-bottom:18px;
}
.svc__ic .ic{width:1.5em;height:1.5em}
.svc__c h3{font-size:1.08rem;font-weight:700;margin-bottom:9px}
.svc__c p{color:var(--muted);font-size:.9rem;flex:1}
.svc__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:.84rem;font-weight:600;color:var(--blue);
}
.svc__c:hover .ic--go{transform:translateX(5px)}

/* ---------- Por qué elegirme ---------- */
.why__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.why__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.why__frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.why__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,25,50,.34))}
.why__badge{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:13px;padding:13px 15px;
  font-size:.85rem;font-weight:500;box-shadow:var(--shadow-sm);
}
.why__badge .ic{color:var(--green);width:1.35em;height:1.35em}
.why__list{list-style:none;display:grid;gap:18px;position:relative}
.why__list::before{
  content:"";position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2),transparent);
}
.why__list li{display:flex;gap:16px;align-items:flex-start;position:relative}
.why__ic{
  display:grid;place-items:center;width:47px;height:47px;border-radius:13px;flex:none;
  background:#fff;
  border:1px solid rgba(37,99,235,.2);color:var(--blue);
  position:relative;z-index:1;box-shadow:var(--shadow-sm);
}
.why__ic .ic{width:1.4em;height:1.4em}
.why__list h3{font-size:1.02rem;font-weight:700;margin-bottom:4px}
.why__list p{color:var(--muted);font-size:.9rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.stat{
  background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;
  box-shadow:var(--shadow-sm);
}
.stat b{display:block;font-size:1.3rem;font-weight:800;color:var(--text)}
.stat__num{background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.stat span{display:block;font-size:.78rem;color:var(--dim);margin-top:3px}

/* ---------- Proceso ---------- */
.tl{list-style:none;position:relative;padding:8px 0}
.tl::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  border-radius:3px;
  background:linear-gradient(180deg,
    transparent,
    rgba(37,99,235,.45) 6%,
    var(--blue) 22%,
    var(--cyan-lit) 50%,
    var(--blue) 78%,
    rgba(37,99,235,.45) 94%,
    transparent);
  box-shadow:0 0 14px rgba(6,182,212,.45);
}
/* Pulso de energía bajando por la línea */
.tl::after{
  content:"";position:absolute;left:50%;width:5px;height:96px;
  transform:translateX(-50%);border-radius:5px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(125,240,255,.95) 45%,transparent);
  filter:blur(1px);
  animation:tlPulso 3.6s var(--ease) infinite;
}
@keyframes tlPulso{
  0%{top:-96px;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}
.tl__i{position:relative;width:calc(50% - 68px);margin-bottom:22px}
.tl__i:nth-child(odd){margin-right:auto;text-align:right}
.tl__i:nth-child(even){margin-left:auto}
/* El número no se monta sobre la línea: sale a un costado y queda unido
   a ella por un conector corto (el ::after de abajo). */
.tl__n{
  position:absolute;top:16px;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;
  color:var(--blue);background:#fff;
  border:1px solid rgba(37,99,235,.4);
  box-shadow:0 4px 14px rgba(18,42,84,.14);
}
.tl__n::after{
  content:"";position:absolute;top:50%;height:3px;width:30px;
  transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan-lit));
  box-shadow:0 0 8px rgba(6,182,212,.4);
}
.tl__i:nth-child(odd) .tl__n{right:-38px}
.tl__i:nth-child(odd) .tl__n::after{left:100%}
.tl__i:nth-child(even) .tl__n{left:-38px}
.tl__i:nth-child(even) .tl__n::after{right:100%;background:linear-gradient(270deg,var(--blue),var(--cyan-lit))}
.tl__i:hover .tl__n{border-color:var(--cyan-lit);box-shadow:0 0 0 1.5px rgba(6,182,212,.55),0 0 18px rgba(6,182,212,.35)}
.tl__c{
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.tl__i:hover .tl__c{transform:translateY(-4px);border-color:rgba(37,99,235,.3);box-shadow:var(--shadow)}
.tl__c h3{font-size:1.02rem;font-weight:700;margin-bottom:5px}
.tl__c p{color:var(--muted);font-size:.9rem}
/* Puntos impares (1,3,5,7): titulo y descripcion a la izquierda aunque la tarjeta este a la derecha */
.tl__i:nth-child(odd) .tl__c{text-align:left}

/* ---------- Trabajos ---------- */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.work{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--graphite);aspect-ratio:4/3;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease);filter:saturate(.96)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,25,50,.32));transition:opacity .35s}
.work:hover,.work:focus-visible{transform:translateY(-5px);border-color:rgba(37,99,235,.4);box-shadow:0 20px 44px rgba(18,42,84,.18)}
.work:hover img{transform:scale(1.07);filter:saturate(1.05)}
.work__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--text);background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 12px rgba(10,25,50,.16);
}
.work__zoom{
  position:absolute;right:12px;top:12px;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--blue);
  opacity:0;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 4px 12px rgba(10,25,50,.16);
}
.work:hover .work__zoom,.work:focus-visible .work__zoom{opacity:1;transform:scale(1)}

/* ---------- Equipos ---------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool{
  position:relative;overflow:hidden;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.tool:hover{transform:translateY(-6px);border-color:rgba(37,99,235,.3);box-shadow:var(--shadow)}
.tool__ic{
  display:grid;place-items:center;width:56px;height:56px;border-radius:15px;margin-bottom:16px;
  background:radial-gradient(circle at 30% 25%,rgba(37,99,235,.14),rgba(6,182,212,.08));
  border:1px solid rgba(37,99,235,.18);color:var(--blue);
}
.tool__ic .ic{width:1.7em;height:1.7em}
.tool h3{font-size:1.04rem;font-weight:700;margin-bottom:8px}
.tool p{color:var(--muted);font-size:.9rem}
.tool__line{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),transparent);
  transition:width .5s var(--ease);
}
.tool:hover .tool__line{width:100%}

/* ---------- Testimonios ---------- */
.car{max-width:820px;margin:0 auto}
.car__vp{overflow:hidden;border-radius:var(--radius-lg)}
.car__track{display:flex;transition:transform .55s var(--ease);will-change:transform}
.rev{
  flex:0 0 100%;min-width:0;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 32px;box-shadow:var(--shadow-sm);
}
.rev__st{display:flex;gap:4px;color:#e0a300;margin-bottom:16px}
.rev__st .ic{width:1.05em;height:1.05em}
.rev p{color:var(--text);font-size:1.06rem;line-height:1.7;margin-bottom:20px}
.rev footer{display:flex;flex-direction:column}
.rev strong{font-family:'Sora',sans-serif;font-weight:600;font-size:.98rem}
.rev span{color:var(--dim);font-size:.85rem}
.car__ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.car__btn{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.car__btn:hover{color:var(--blue);border-color:rgba(37,99,235,.45);transform:translateY(-2px)}
.car__dots{display:flex;gap:8px}
.car__dot{width:9px;height:9px;border-radius:50%;background:rgba(20,50,100,.22);transition:background .25s,width .3s var(--ease);padding:0}
.car__dot.is-on{background:linear-gradient(90deg,var(--blue),var(--cyan));width:26px;border-radius:6px}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
.faq__list{display:flex;flex-direction:column;gap:12px}
.faq__i{
  background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease)
}
.faq__i.is-open{border-color:rgba(37,99,235,.36)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;text-align:left;font-weight:600;font-size:1rem;
  font-family:'Sora',sans-serif;transition:color .25s;
}
.faq__q:hover{color:var(--blue)}
.faq__x{position:relative;width:16px;height:16px;flex:none}
.faq__x::before,.faq__x::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--blue);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s;
}
.faq__x::before{width:15px;height:2px}
.faq__x::after{width:2px;height:15px}
.faq__i.is-open .faq__x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--muted);font-size:.95rem;padding:0 22px 20px}

/* ---------- Contacto ---------- */
/* Formulario centrado: los datos de contacto viven en la sección Ubicación */
.ct{display:flex;justify-content:center}
/* Formulario compacto: mismos campos, menos caja */
.ct__form{
  width:100%;max-width:540px;
  background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px;
  box-shadow:var(--shadow);
}
.ct__form h3{font-size:1.04rem;margin-bottom:5px}
.ct__form-sub{color:var(--dim);font-size:.79rem;line-height:1.5;margin-bottom:16px}
.fld{margin-bottom:11px}
.fld label{display:block;font-size:.77rem;font-weight:500;color:var(--muted);margin-bottom:5px}
.fld input,.fld textarea{
  width:100%;padding:10px 13px;border-radius:10px;resize:vertical;
  background:#fbfcfe;border:1px solid var(--line-2);color:var(--text);
  font-size:.9rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
.fld input::placeholder,.fld textarea::placeholder{color:#8593a8}
.fld input:focus,.fld textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#dc2626}
.err{display:flex;align-items:center;gap:6px;color:#b91c1c;font-size:.75rem;margin-top:5px}
.err[hidden]{display:none}
.err::before{content:"!";display:grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:.62rem;font-weight:700;flex:none}
.ct__status{font-size:.8rem;color:var(--green);margin-top:10px;text-align:center;min-height:1.1em}
.ct__side{display:grid;gap:20px}
.ct__info{display:grid;gap:18px}
.ct__row{display:flex;gap:14px;align-items:flex-start}
.ct__ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;
  background:#fff;
  border:1px solid rgba(37,99,235,.2);color:var(--blue);box-shadow:var(--shadow-sm);
}
.ct__ic .ic{width:1.3em;height:1.3em}
.ct__row b{font-family:'Sora',sans-serif;font-size:.95rem;font-weight:600}
.ct__row p{color:var(--muted);font-size:.9rem}
.ct__row a{transition:color .2s}
.ct__row a:hover{color:var(--blue)}
.ct__wa{
  text-align:center;border-radius:var(--radius-lg);padding:28px 26px;
  background:linear-gradient(180deg,rgba(37,211,102,.1),#ffffff 70%);
  border:1px solid rgba(18,180,90,.28);
  box-shadow:var(--shadow-sm);
}
.ct__wa-ic{
  display:grid;place-items:center;width:60px;height:60px;margin:0 auto 15px;border-radius:50%;
  background:linear-gradient(140deg,#2ee06f,#12b45a);color:#03150a;
  box-shadow:0 10px 24px rgba(18,180,90,.3);
}
.ct__wa-ic .ic{width:1.7em;height:1.7em}
.ct__wa h3{font-size:1.1rem;margin-bottom:8px}
.ct__wa p{color:var(--muted);font-size:.9rem;margin-bottom:20px}

/* Fotos reales del local dentro de la tarjeta del mapa */
.loc__photos{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--graphite)}
.loc__photos figure{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.loc__photos figure.is-on{opacity:1}
.loc__photos img{width:100%;height:100%;object-fit:cover}
.loc__photos figure.is-on img{animation:locKb 10s ease-out forwards}
@keyframes locKb{from{transform:scale(1)}to{transform:scale(1.06)}}
.loc__photos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,28,.3),transparent 28%,rgba(6,14,28,.3));
}
.loc__dots{position:absolute;right:12px;bottom:14px;z-index:3;display:flex;gap:7px}
.loc__dot{
  width:9px;height:9px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:width .3s var(--ease),background .25s var(--ease);
}
.loc__dot.is-on{background:#fff;width:24px;border-radius:6px}

/* ---------- Catálogo ---------- */
.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}
.cat-sec{padding-top:52px}
.cat__bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:22px}
.cat__search{
  display:flex;align-items:center;gap:9px;flex:1 1 260px;max-width:340px;
  background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:0 14px;
  box-shadow:var(--shadow-sm);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.cat__search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cat__search .ic{color:var(--dim);width:1.1em;height:1.1em;flex:none}
.cat__search input{width:100%;border:0;background:none;padding:12px 0;font-size:.92rem;color:var(--text)}
.cat__search input:focus{outline:none}
.cat__chips{display:flex;flex-wrap:wrap;gap:8px}
.cat__chip{
  font-size:.82rem;font-weight:600;padding:9px 15px;border-radius:22px;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.cat__chip:hover{color:var(--blue);border-color:rgba(37,99,235,.4);transform:translateY(-1px)}
.cat__chip.is-on{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border-color:transparent}
.cat__count{color:var(--dim);font-size:.82rem;margin-bottom:16px;min-height:1.1em}
.cat__loading,.cat__empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:34px 10px}
.cat__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.prod{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.prod__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#eef4fc,#e3ecf8);display:grid;place-items:center;
}
.prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prod:hover .prod__media img{transform:scale(1.06)}
.prod__ph{color:#9db2ce}
.prod__ph .ic{width:44px;height:44px;stroke-width:1.2}
.prod__flag{
  position:absolute;left:10px;top:10px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  padding:5px 10px;border-radius:20px;
}
.prod__flag--out{left:auto;right:10px;background:#64748b}
.prod.is-out .prod__media img{filter:grayscale(.75) opacity(.75)}
.prod__body{display:flex;flex-direction:column;flex:1;padding:16px 16px 14px}
.prod__body h3{font-size:1rem;font-weight:700;line-height:1.25}
.prod__sub{color:var(--blue);font-size:.78rem;font-weight:600;margin-top:3px}
.prod__desc{color:var(--muted);font-size:.85rem;margin-top:9px;flex:1}
.prod__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.prod__price{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:var(--text)}
.prod__price.is-ask{font-size:.82rem;font-weight:600;color:var(--dim)}
.prod__cta{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--blue)}
.prod__cta:hover .ic--go{transform:translateX(4px)}

@media(max-width:1100px){.cat__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cat__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){
  .cat__grid{grid-template-columns:1fr}
  .cat__search{max-width:none}
}

/* ---------- Carrito ---------- */
.prod__stock{font-size:.74rem;font-weight:600;color:var(--green);margin-top:8px}
.prod__add{
  margin-top:10px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.86rem;padding:10px 14px;border-radius:11px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.prod__add:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(29,78,216,.26)}
.prod__add.is-out{background:#eef2f7;color:#7c8ba0;cursor:not-allowed;border-color:var(--line)}
.prod__add.is-out:hover{transform:none;box-shadow:none}
.prod__add .ic{width:1.05em;height:1.05em}

.cart__fab{
  position:fixed;z-index:200;right:20px;bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;
  box-shadow:0 12px 28px rgba(29,78,216,.36);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cart__fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 34px rgba(6,182,212,.44)}
.cart__fab .ic{width:1.5em;height:1.5em}
.cart__count{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:12px;
  background:#fff;color:var(--blue);font-size:.74rem;font-weight:800;
  border:1.5px solid var(--blue);
}
.cart__scrim{position:fixed;inset:0;z-index:300;background:rgba(8,18,34,.5);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .28s var(--ease)}
.cart__scrim.is-on{opacity:1}
.cart__panel{
  position:fixed;z-index:310;top:0;right:0;bottom:0;width:min(420px,94vw);
  display:flex;flex-direction:column;background:#fff;
  box-shadow:-18px 0 46px rgba(18,42,84,.2);
  transform:translateX(102%);transition:transform .3s var(--ease);
}
.cart__panel.is-on{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 20px 14px;border-bottom:1px solid var(--line)}
.cart__head h2{font-size:1.1rem}
.cart__x{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s}
.cart__x:hover{color:var(--blue);border-color:rgba(37,99,235,.4)}
.cart__body{flex:1;overflow-y:auto;padding:16px 20px}
.cart__empty{color:var(--muted);font-size:.9rem;text-align:center;padding:30px 0}
.cart__empty a{color:var(--blue);font-weight:600}
.cart__it{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cart__it-img{width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#eef4fc,#e3ecf8);display:grid;place-items:center}
.cart__it-img img{width:100%;height:100%;object-fit:cover}
.cart__ph{color:#9db2ce}
.cart__ph .ic{width:24px;height:24px}
.cart__it-b{flex:1;min-width:0}
.cart__it-b h3{font-size:.92rem;line-height:1.3}
.cart__it-p{display:block;font-size:.84rem;font-weight:600;color:var(--text);margin-top:2px}
.cart__it-s{display:block;font-size:.72rem;color:var(--green);font-weight:600}
.cart__qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.cart__qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  font-weight:700;color:var(--text);transition:border-color .2s,color .2s}
.cart__qty button:hover{border-color:var(--blue);color:var(--blue)}
.cart__qty span{min-width:22px;text-align:center;font-weight:700;font-size:.9rem}
/* Selector mas especifico que .cart__qty button, si no hereda los 28px de ancho
   de las flechas y el texto se sale de la caja */
.cart__qty .cart__del{
  width:auto;height:28px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--muted);margin-left:auto;
}
.cart__qty .cart__del:hover{color:#b91c1c;border-color:rgba(185,28,28,.45)}
.cart__foot{border-top:1px solid var(--line);padding:16px 20px 20px;background:#fbfcfe}
.cart__total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.cart__total span{color:var(--muted);font-size:.86rem}
.cart__total b{font-family:'Sora',sans-serif;font-size:1.2rem}
.cart__nota{color:var(--dim);font-size:.76rem;margin-bottom:10px}
.cart__form{display:grid;gap:10px;margin-top:10px}
.cart__f label{display:block;font-size:.76rem;font-weight:500;color:var(--muted);margin-bottom:4px}
.cart__f input{width:100%;padding:9px 12px;border-radius:10px;background:#fff;
  border:1px solid var(--line-2);font-size:.88rem;transition:border-color .2s,box-shadow .2s}
.cart__f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cart__opts{border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:grid;gap:6px}
.cart__opts legend{font-size:.76rem;font-weight:600;color:var(--muted);padding:0 4px}
.cart__opts label{display:flex;align-items:center;gap:8px;font-size:.86rem;cursor:pointer}
.cart__envio{display:grid;gap:10px}
.cart__toast{
  position:fixed;z-index:340;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  background:#0e1728;color:#fff;padding:11px 18px;border-radius:12px;font-size:.86rem;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .28s,transform .28s;
  box-shadow:0 12px 30px rgba(0,0,0,.3);max-width:88vw;text-align:center;
}
.cart__toast.is-on{opacity:1;transform:translateX(-50%)}
@media(max-width:560px){
  .cart__fab{right:16px;bottom:calc(82px + env(safe-area-inset-bottom,0px));width:50px;height:50px}
  .cart__panel{width:100%}
}

/* ---------- Banda CTA ---------- */
.cta{position:relative;overflow:hidden;padding:56px 0;margin:20px 0;
  background:linear-gradient(115deg,var(--blue),#1560c4 45%,var(--cyan));
  color:#fff;
}
.cta__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 22% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 22% 50%,#000,transparent 72%);
}
.cta__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.45rem,2.6vw,2rem);font-weight:800;color:#fff}
.cta p{color:rgba(255,255,255,.85);margin-top:8px;font-size:1rem}
.cta__acts{display:flex;gap:12px;flex-wrap:wrap}
.btn--light{background:#fff;color:var(--blue);border-color:#fff}
.btn--light:hover{background:#f2f7ff;box-shadow:0 14px 32px rgba(4,20,60,.28)}
.btn--light::after{background:linear-gradient(100deg,transparent,rgba(37,99,235,.18),transparent)}

/* ---------- Ubicación y cobertura ---------- */
.loc{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:stretch}
.loc__info{
  display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);
}
.loc__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.loc__acts .btn{flex:1 1 190px}

.loc__map{
  position:relative;min-height:400px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--graphite);box-shadow:var(--shadow-sm);
}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.12) contrast(1.03)}

/* Rastreo estilo radar sobre una foto de la ciudad, antes de la vista de calle */
.loc__loader{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;
  background:#0a1020 url('../img/medellin.jpg') center/cover no-repeat;
  background-image:image-set(url('../img/medellin-1000.webp') type('image/webp'),url('../img/medellin.jpg') type('image/jpeg'));
  transition:opacity .6s var(--ease),visibility .6s;
}
.loc__loader::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 58% at 50% 44%,rgba(6,60,120,.28),transparent 72%),
    linear-gradient(180deg,rgba(5,10,20,.6),rgba(5,10,20,.5) 45%,rgba(5,10,20,.86));
}
.loc__loader::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
}
.loc__loader.is-out{opacity:0;visibility:hidden}
.loc__radar{position:relative;z-index:1;width:min(160px,40%);aspect-ratio:1;margin-bottom:52px}
.loc__radar .ring{position:absolute;inset:0;border:1px solid rgba(125,211,252,.5);border-radius:50%;box-shadow:0 0 22px rgba(6,182,212,.25) inset}
.loc__radar .ring--2{inset:24%;border-color:rgba(6,182,212,.6)}
.loc__radar .sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(34,211,238,.75),rgba(34,211,238,0) 32%);
  animation:radar 2.6s linear infinite;
}
@keyframes radar{to{transform:rotate(360deg)}}
.loc__radar .dot{
  position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#67e8f9;box-shadow:0 0 14px rgba(34,211,238,.9);animation:ping 2.2s var(--ease) infinite;
}
.loc__hud{position:absolute;z-index:1;left:16px;right:16px;bottom:58px;text-align:center}
.loc__hud p{font-family:'Sora',sans-serif;font-weight:600;font-size:.96rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.loc__hud span{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7dd3fc}
.loc__bar{position:absolute;z-index:1;left:50%;bottom:34px;transform:translateX(-50%);width:170px;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.loc__bar span{display:block;height:100%;width:36%;background:linear-gradient(90deg,transparent,#67e8f9,transparent);animation:barMove 1.2s ease-in-out infinite}

.loc__chip{
  position:absolute;right:12px;top:12px;z-index:4;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  font-size:.78rem;font-weight:600;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:20px;padding:7px 13px;
  box-shadow:0 4px 14px rgba(10,25,50,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.loc__chip .ic{width:1.05em;height:1.05em;color:var(--blue)}

.loc__toggle{
  position:absolute;left:12px;bottom:12px;z-index:2;display:flex;gap:5px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:22px;padding:5px;
  box-shadow:0 4px 14px rgba(10,25,50,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.loc__toggle button{
  font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:18px;color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.loc__toggle button:hover:not(.is-on){color:var(--blue)}
.loc__toggle button.is-on{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff}


.ct__form .btn--lg{padding:13px 22px;font-size:.94rem}

/* ---------- Footer ---------- */
.ft{position:relative;padding:64px 0 0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(232,240,251,.85))}
.ft__line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),rgba(6,182,212,.4),transparent);
  background-size:220% 100%;animation:gradShift 12s linear infinite;
}
.ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:42px}
.ft__desc{color:var(--muted);font-size:.9rem;margin-top:16px;max-width:36ch}
.ft__social{display:flex;gap:10px;margin-top:18px}
.ft__social a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line);color:var(--muted);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.ft__social a:hover{color:var(--blue);border-color:rgba(37,99,235,.4);transform:translateY(-2px)}
.ft__col h4{font-size:.98rem;margin-bottom:14px}
.ft__col a{display:block;color:var(--muted);font-size:.88rem;padding:5px 0;transition:color .2s,transform .2s var(--ease)}
.ft__col a:hover{color:var(--blue);transform:translateX(3px)}
.ft__note{display:block;color:var(--dim);font-size:.84rem;margin-top:10px}
.ft__bot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding-top:20px;padding-bottom:26px;
  color:var(--dim);font-size:.82rem;
}
.ft__admin{color:var(--dim);font-size:.8rem;font-weight:500;transition:color .25s var(--ease)}
.ft__admin:hover{color:var(--blue)}
.ft__bot-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.totop{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;
  border:1px solid var(--line);color:var(--muted);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:color .25s,border-color .25s,transform .25s var(--ease);
}
.totop:hover{color:var(--blue);border-color:rgba(37,99,235,.4);transform:translateY(-3px)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;z-index:200;
  right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:0;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(140deg,#2ee06f,#12b45a);color:#03150a;
  box-shadow:0 12px 28px rgba(18,180,90,.4);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,box-shadow .3s;
  justify-content:center;
}
.wa-float.is-in{opacity:1;visibility:visible;transform:none}
.wa-float.is-in.is-hi{animation:waPop .9s var(--ease) 1}
@keyframes waPop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.wa-float .ic{width:1.85em;height:1.85em}
.wa-float:hover{box-shadow:0 16px 36px rgba(18,180,90,.5)}
.wa-float__tip{
  position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;font-size:.82rem;font-weight:600;
  background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:8px 13px;
  box-shadow:var(--shadow-sm);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.wa-float:hover .wa-float__tip,.wa-float:focus-visible .wa-float__tip{opacity:1;transform:translateY(-50%)}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(8,18,34,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:20px;opacity:0;transition:opacity .3s var(--ease);
}
.lb.is-on{opacity:1}
.lb[hidden]{display:none}
.lb__fig{max-width:min(1100px,92vw);text-align:center}
.lb__fig img{
  max-height:78vh;width:auto;margin:0 auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.lb__fig figcaption{color:#e6edf7;font-size:.9rem;margin-top:14px}
.lb__close,.lb__nav{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.lb__close:hover,.lb__nav:hover{background:#fff;color:var(--blue)}
.lb__close{top:18px;right:18px}
.lb__nav--prev{left:18px;top:50%;transform:translateY(-50%)}
.lb__nav--next{right:18px;top:50%;transform:translateY(-50%)}
.lb__nav--prev:hover{transform:translateY(-50%) scale(1.06)}
.lb__nav--next:hover{transform:translateY(-50%) scale(1.06)}

/* ---------- Cursor tecnológico ---------- */
.cur{position:fixed;inset:0;z-index:500;pointer-events:none;display:none}
.cur.is-on{display:block}
.cur__ring,.cur__dot{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.cur__ring{
  width:34px;height:34px;border:1px solid rgba(37,99,235,.5);
  transition:width .22s var(--ease),height .22s var(--ease),background .22s,border-color .22s;
}
.cur__dot{width:5px;height:5px;background:var(--blue);box-shadow:0 0 8px rgba(37,99,235,.5)}
.cur.is-hot .cur__ring{width:52px;height:52px;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.75)}

/* ---------- Títulos animados ----------
   Cada palabra entra desde abajo con desenfoque y detrás se dibuja
   una línea de acento. El bloque padre solo hace fundido para que
   no se sumen dos movimientos sobre el mismo texto. */
html.js .rv.has-ttl{transform:none;filter:none}
html.js .ttl{position:relative}
html.js .ttl-w{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateY(34px) rotate(1.5deg);filter:blur(10px);
  transition:opacity .72s var(--ease),transform .72s var(--ease),filter .72s var(--ease);
}
html.js .ttl.in .ttl-w{opacity:1;transform:none;filter:none}
html.js .ttl::after{
  content:"";display:block;height:3px;width:0;margin:18px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan-lit));
  box-shadow:0 0 14px rgba(6,182,212,.55);
  transition:width .85s var(--ease) .3s;
}
html.js .ttl.in::after{width:88px}
html.js .head--left .ttl::after,html.js .cta .ttl::after{margin-left:0;margin-right:auto}
/* El degradado del fragmento resaltado corre al aterrizar */
html.js .ttl .grad{background-size:220% 100%}

/* Títulos secundarios (h3, h4, preguntas): un destello recorre el texto.
   No se mueven porque la tarjeta que los contiene ya trae su propia entrada.
   En ambos extremos del degradado va el color normal, así que el texto
   siempre se lee aunque la animación no llegue a dispararse. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.js .ttl2{
    background-image:linear-gradient(100deg,
      currentColor 0%,currentColor 40%,
      var(--cyan-lit) 50%,
      currentColor 60%,currentColor 100%);
    background-size:280% 100%;
    background-position:140% 0;
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:background-position 1.15s var(--ease);
  }
  html.js .ttl2.in{background-position:-40% 0}
}

/* ---------- Reveal ---------- */
html.js .rv{opacity:0;transform:translateY(26px);filter:blur(5px);transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
html.js .rv.in{opacity:1;transform:none;filter:none}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;filter:none;transition:none}
  .hero__scan,.chip--a,.chip--b,.eyebrow .dot,.grad,.ft__line,.intro__bg,.intro__scan,.loc__photos figure.is-on img,.tl::after{animation:none!important}
  .tl::after{display:none}
  .btn::after{display:none}
  .cur{display:none!important}
  *{scroll-behavior:auto!important}
}

/* =========================================================
   NEÓN AL PASAR EL CURSOR
   Halo intenso alrededor de tarjetas, imágenes, video y cajas.
   Solo en dispositivos con puntero real: en táctil el hover
   se queda pegado después de tocar y se ve mal.
   ========================================================= */
:root{
  --neon-line:#06b6d4;
  --neon:
    0 0 0 1.5px rgba(6,182,212,.95),
    0 0 9px rgba(6,182,212,.8),
    0 0 26px rgba(6,182,212,.6),
    0 0 58px rgba(37,99,235,.42),
    0 18px 44px rgba(18,42,84,.18);
  --neon-sm:
    0 0 0 1.5px rgba(6,182,212,.9),
    0 0 8px rgba(6,182,212,.7),
    0 0 20px rgba(6,182,212,.5),
    0 0 38px rgba(37,99,235,.32);
}

.svc__c,.tool,.tl__c,.work,.rev,.faq__i,.stat,.strip,
.ct__form,.ct__wa,.hero__frame,.why__frame,.chip,
.car__btn,.totop,.ft__social a,.hd__toggle,.svc__ic,.tool__ic,.why__ic,.ct__ic{
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),color .25s var(--ease);
}

/* Teclado: el foco recibe el mismo halo que el cursor */
.svc__c:focus-visible,.work:focus-visible{
  border-color:var(--neon-line);
  box-shadow:var(--neon);
}

@media(hover:hover){
  .svc__c:hover,
  .tool:hover,
  .tl__i:hover .tl__c,
  .rev:hover,
  .faq__i:hover,
  .stat:hover,
  .strip:hover,
  .ct__form:hover,
  .ct__wa:hover,
  .loc__info:hover,
  .loc__map:hover,
  .work:hover,
  .why__frame:hover,
  .hero__frame:hover,
  .hero__media:hover .hero__frame{
    border-color:var(--neon-line);
    box-shadow:var(--neon);
  }

  /* El marco del video gana además brillo interior */
  .hero__media:hover .hero__frame-glow{
    box-shadow:inset 0 0 74px rgba(6,182,212,.26);
    border-color:rgba(6,182,212,.55);
  }
  .why__frame:hover img,.hero__media:hover .hero__video{filter:saturate(1.12) contrast(1.06)}

  /* Cajas de icono dentro de la tarjeta activa */
  .svc__c:hover .svc__ic,
  .tool:hover .tool__ic,
  .why__list li:hover .why__ic,
  .ct__row:hover .ct__ic{
    border-color:var(--neon-line);
    box-shadow:var(--neon-sm);
  }
  .svc__c:hover .svc__ic .ic,
  .tool:hover .tool__ic .ic,
  .why__list li:hover .why__ic .ic,
  .ct__row:hover .ct__ic .ic{filter:drop-shadow(0 0 7px rgba(6,182,212,.85))}

  /* Controles redondos y botones secundarios */
  .car__btn:hover,.totop:hover,.ft__social a:hover,
  .hd__toggle:hover,.work__zoom{
    border-color:var(--neon-line);
    box-shadow:var(--neon-sm);
  }
  .btn--ghost:hover{border-color:var(--neon-line);box-shadow:var(--neon)}
  .chip:hover{border-color:var(--neon-line);box-shadow:var(--neon)}
  .brand:hover .brand__mark{filter:drop-shadow(0 0 8px rgba(6,182,212,.85)) drop-shadow(0 0 18px rgba(37,99,235,.5))}

  /* Miniaturas de la galería: el borde superior se enciende */
  .work:hover::before{opacity:1}
}

.work::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--cyan-lit),var(--blue),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1320px){
  .hd__nav{gap:15px}
  .hd__nav>a:not(.btn){font-size:.86rem;white-space:nowrap}
  .hd__in{gap:12px}
  .brand__txt{font-size:1rem}
}
@media(max-width:1140px){
  .hd__cta{padding:9px 14px;font-size:.82rem}
  .hd__nav{gap:12px}
  .hd__nav>a:not(.btn){font-size:.83rem}
}
@media(max-width:1100px){
  .svc{grid-template-columns:repeat(3,1fr)}
  .works{grid-template-columns:repeat(3,1fr)}
  .hd__nav{gap:18px}
  .hd__nav>a:not(.btn){font-size:.87rem}
}

@media(max-width:980px){
  .hd__cta{display:none}
  .hd__toggle{display:flex}
  .hd__nav{
    position:fixed;inset:0 0 auto 0;top:76px;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-2);
    box-shadow:0 18px 40px rgba(18,42,84,.12);
    padding:14px 22px 24px;
    transform:translateY(-118%);opacity:0;visibility:hidden;
    transition:transform .42s var(--ease),opacity .3s var(--ease),visibility .42s;
    max-height:calc(100dvh - 76px);overflow-y:auto;
  }
  .hd__nav.is-open{transform:none;opacity:1;visibility:visible}
  .hd__nav>a:not(.btn){
    font-size:1rem;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--text);
  }
  .hd__nav>a:not(.btn)::after{display:none}
  .hd__nav>a.is-active{color:var(--blue)}
  .hd__nav-cta{display:inline-flex;margin-top:18px}

  .hero{padding:44px 0 30px}
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero__media{order:-1;max-width:560px;margin:0 auto;width:100%}
  .hero__frame{transform:none!important}
  .chip--a{left:-6px}
  .chip--b{right:-4px}

  .why__grid{grid-template-columns:1fr;gap:34px}
  .why__frame img{aspect-ratio:16/11}
  .head--left{text-align:center;margin-inline:auto}
  .head--left p{margin-inline:auto}
  .why__list{max-width:640px;margin:0 auto}
  .stats{max-width:640px;margin-inline:auto}

  .tl::before,.tl::after{left:14px}
  .tl__i,.tl__i:nth-child(odd),.tl__i:nth-child(even){
    width:100%;margin:0 0 16px;text-align:left;padding-left:90px;
  }
  .tl__i:nth-child(odd) .tl__n,.tl__i:nth-child(even) .tl__n{left:40px;right:auto;top:14px}
  .tl__i .tl__n::after{left:auto;right:100%;width:26px;
    background:linear-gradient(270deg,var(--blue),var(--cyan-lit))}

  .tools{grid-template-columns:repeat(2,1fr)}
  .loc{grid-template-columns:1fr}
  .loc__map{min-height:340px}
  .ft__grid{grid-template-columns:1fr 1fr;gap:28px}
  .ft__brandcol{grid-column:1/-1}
}

@media(max-width:760px){
  .sec{padding:72px 0}
  .svc{grid-template-columns:repeat(2,1fr)}
  .works{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(3,1fr);gap:18px 0;padding:20px 6px}
  .strip li:nth-child(3n){border-right:0}
  .stats{grid-template-columns:1fr;gap:10px}
  .stat{display:flex;align-items:baseline;justify-content:center;gap:8px;text-align:center}
  .stat span{margin-top:0}
  .rev{padding:28px 24px}
  .rev p{font-size:1rem}
  .lb__nav--prev{left:8px}
  .lb__nav--next{right:8px}
  .lb__fig img{max-height:68vh}
}

@media(max-width:560px){
  .container{padding:0 16px}
  .hd__in{height:68px}
  .hd__nav{top:68px;max-height:calc(100dvh - 68px)}
  .brand__mark{height:42px}
  .brand__txt{font-size:1rem}
  .brand--ft .brand__mark{height:54px}
  .hero__badges{gap:10px 16px}
  .hero__badges li{font-size:.82rem}
  /* En pantallas angostas los botones se ajustan al ancho disponible
     en vez de desbordar la página */
  .btn{white-space:normal;max-width:100%}
  .btn--lg{padding:15px 20px}
  .hero__btns .btn,.head__cta .btn{width:100%}
  .chip--a{top:12px;left:8px;padding:9px 12px}
  .chip--b{bottom:12px;right:8px;padding:9px 12px}
  .chip .ic{width:1.25em;height:1.25em}
  .chip__num{font-size:1.2rem}
  .svc{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip li{border-right:0}
  .ft__grid{grid-template-columns:1fr}
  .ft__bot{flex-direction:column;text-align:center;gap:14px}
  .ct__form{padding:20px 16px}
  .cta{padding:44px 0}
  .cta__in{flex-direction:column;text-align:center}
  .cta__acts{width:100%}
  .cta__acts .btn{width:100%}
  .loc__info{padding:22px 18px}
  .loc__map{min-height:300px}
  .loc__acts .btn{flex:1 1 100%}
  .loc__toggle{left:10px;right:10px;bottom:10px;justify-content:center;flex-wrap:wrap}
  .loc__toggle button{padding:8px 13px}
  .loc__chip{font-size:.72rem;padding:6px 11px}
  .wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
  .wa-float__tip{display:none}
}

@media(max-width:380px){
  .brand__mark{height:38px}
  .brand__txt{font-size:.92rem}
  .works{grid-template-columns:1fr}
  .head h2{font-size:1.5rem}
  .hero__copy h1{font-size:1.95rem}
  .tl__i{padding-left:78px}
  .tl__n{width:34px;height:34px;font-size:.84rem;left:34px!important}
  .tl__n::after{width:22px}
  .tl::before,.tl::after{left:12px}
}

/* Pantallas grandes */
@media(min-width:1500px){
  :root{--maxw:1280px}
  .sec{padding:110px 0}
}