:root{
  --dark:#061421;--blue:#1c8dd6;--cyan:#24c7ec;--cyan-deep:#1c8dd6;--cyan-soft:#c7f1fb;
  --orange:#ff7a1a;--green:#8bc53f;--red:#ee5d62;--coral:#ee5d62;--coral-deep:#d43f48;
  --text:#11293a;--muted:#64798a;--soft:#f4f8fb;
  --ink:#050d18;--ink-2:#0a1929;--ink-3:#122740;--paper:#f4f8fb;
  --r-sm:14px;--r-md:22px;--r-lg:32px;--r-xl:44px;
  --t:.32s;--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  /* Imágenes de fondo editables desde el panel (el editor las sobreescribe) */
  --img-hero:url('assets/fondo-hero.webp');
  --img-hero-mobile:url('assets/fondo-hero-mobile.webp');
  --img-address:url('assets/fondo2.webp');
  --img-cotizador:url('assets/fondo2.webp');
  /* Tipografía editable desde el panel (el editor sobreescribe estas vars) */
  --font-body:'Sora','Inter',system-ui,sans-serif;
  --font-heading:'Instrument Serif',serif;
  --fs-root:100%;
  --fs-body:15.5px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:var(--fs-root)}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-size:var(--fs-body);line-height:1.55;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.serif{font-family:var(--font-heading);font-weight:400;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.scrollbar{position:fixed;top:0;left:0;height:3px;border-radius:0 99px 99px 0;background:linear-gradient(90deg,var(--cyan),var(--green) 40%,var(--orange) 75%,var(--coral));z-index:300;width:0;box-shadow:0 0 14px rgba(36,199,236,.6)}

/* ── NAV ── */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(1280px,94%);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 12px 10px 22px;
  border-radius:99px;
  background:rgba(6,14,26,.82);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 50px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  z-index:80;
}
.brand{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 9px;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,20,45,.2)}
.brand img{height:48px;max-width:200px;object-fit:contain;transition:transform var(--t);filter:none}
.brand:hover img{transform:rotate(-8deg) scale(1.05)}
.navlinks{display:flex;gap:4px}
.navlinks a{
  position:relative;padding:10px 16px;border-radius:99px;
  font-weight:600;font-size:13.5px;color:rgba(255,255,255,.65);
  transition:color var(--t),background var(--t);
}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.08)}
.navlinks a::after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;
  background:var(--cyan);transform:translateX(-50%);
  transition:width var(--t) var(--ease-out);
}
.navlinks a:hover::after{width:14px}
.navbtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:99px;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:#fff!important;font-weight:700;font-size:13.5px;
  box-shadow:0 8px 22px rgba(36,199,236,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform var(--t),box-shadow var(--t);
}
.navbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(36,199,236,.45)}
.navbtn-wa{
  background:linear-gradient(135deg,#25d366,#128c7e);
  box-shadow:0 8px 22px rgba(37,211,102,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.navbtn-wa:hover{box-shadow:0 14px 30px rgba(37,211,102,.5);transform:translateY(-2px)}

/* ── HERO ── */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:center;position:relative;overflow:hidden;
  padding:130px 5% 70px;color:white;isolation:isolate;
}
.heroBg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(80% 60% at 20% 20%,rgba(28,141,214,.45),transparent 60%),
    radial-gradient(60% 50% at 90% 80%,rgba(238,93,98,.35),transparent 65%),
    linear-gradient(100deg,rgba(4,12,24,.92) 0%,rgba(4,12,24,.75) 45%,rgba(4,12,24,.45) 100%),
    var(--img-hero) center/cover no-repeat;
}
.heroBg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
}
/* orbs — gradiente radial en vez de blur(60px): mismo brillo difuso, sin costo de filtro GPU */
.orb{position:absolute;border-radius:50%;opacity:.5;z-index:-1;pointer-events:none;will-change:transform}
.orb.o1{width:520px;height:520px;background:radial-gradient(circle,rgba(36,199,236,.9) 0%,rgba(36,199,236,.45) 40%,rgba(36,199,236,0) 72%);top:-160px;right:-100px;animation:orbit1 22s ease-in-out infinite}
.orb.o2{width:380px;height:380px;background:radial-gradient(circle,rgba(238,93,98,.9) 0%,rgba(238,93,98,.45) 40%,rgba(238,93,98,0) 72%);bottom:-120px;left:-80px;animation:orbit2 26s ease-in-out infinite}
.orb.o3{width:280px;height:280px;background:radial-gradient(circle,rgba(139,197,63,.9) 0%,rgba(139,197,63,.45) 40%,rgba(139,197,63,0) 72%);top:40%;left:40%;animation:orbit3 30s ease-in-out infinite}
@keyframes orbit1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,80px) scale(1.15)}}
@keyframes orbit2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-60px) scale(.9)}}
@keyframes orbit3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-100px,60px) scale(1.1)}66%{transform:translate(80px,-40px) scale(.95)}}

.heroContent{position:relative;z-index:2;max-width:680px}
h1{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(3.2rem,7vw,7rem);line-height:.92;letter-spacing:-.02em;
  margin:24px 0 22px;
}
h1 em{font-style:italic;color:var(--cyan);position:relative}
h1 .underline{position:relative;display:inline-block}
h1 .underline svg{position:absolute;left:0;bottom:-12px;width:100%;height:18px;overflow:visible}
.hero p.lead{font-size:1.1rem;line-height:1.65;color:#dcecf5;max-width:560px;margin:0 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 44px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 24px;border-radius:99px;
  font-weight:700;font-size:14px;letter-spacing:.01em;border:0;cursor:pointer;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t),background var(--t);
  position:relative;overflow:hidden;
}
.primary{
  background:linear-gradient(135deg,var(--orange),var(--coral));
  color:#fff;
  box-shadow:0 14px 30px -8px rgba(238,93,98,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -8px rgba(238,93,98,.6)}
.primary::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .8s var(--ease);
}
.primary:hover::after{left:100%}
.glass{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;backdrop-filter:blur(14px);
}
.glass:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.play-link{
  display:inline-flex;align-items:center;gap:12px;
  color:#fff;font-size:13px;font-weight:500;margin-left:8px;text-decoration:none;
}
.play-circle{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  display:grid;place-items:center;
  transition:all var(--t);
}
.play-link:hover .play-circle{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.05)}
.heroStats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:680px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.12);
}
.heroStats div{padding:0 6px}
.heroStats b{
  display:flex;align-items:flex-start;gap:2px;
  font-family:var(--font-heading);font-size:2rem;line-height:1;
  letter-spacing:-.02em;color:#fff;
}
.heroStats sup{font-size:.95rem;color:var(--cyan);font-family:var(--font-body);font-weight:600;margin-top:4px}
.heroStats span{
  display:block;font-size:11px;color:#9bb6c8;
  text-transform:uppercase;letter-spacing:.16em;font-weight:500;margin-top:8px;
}

/* ── HERO TRACKING CARD ── */
.heroTrackCard{position:relative;z-index:2;background:rgba(8,20,34,.78);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.11);border-radius:28px;padding:30px;color:white}
.heroTrackCardHdr{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.45);margin-bottom:16px}
.heroTrackSearch{margin-bottom:24px}
.heroTrackSearch input{width:100%;height:52px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;color:white;padding:0 18px;font-size:.93rem;outline:none;transition:border-color .2s}
.heroTrackSearch input::placeholder{color:rgba(255,255,255,.32)}
.heroTrackSearch input:focus{border-color:var(--orange);background:rgba(255,255,255,.11)}

/* Timeline */
.htlWrap{display:flex;flex-direction:column;gap:0;margin-bottom:22px}
.htlItem{display:flex;align-items:flex-start;gap:14px}
.htlLeft{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:16px}
.htlDot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:4px}
.htlOrange{background:var(--orange);box-shadow:0 0 14px rgba(255,122,26,.55)}
.htlGreen{background:var(--green);box-shadow:0 0 12px rgba(139,197,63,.45)}
.htlBlue{background:var(--cyan);box-shadow:0 0 12px rgba(36,199,236,.45)}
.htlLine{width:2px;flex:1;min-height:28px;background:rgba(255,255,255,.1);margin:4px 0}
.htlInfo{padding-bottom:20px}
.htlLabel{display:block;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.42)}
.htlVal{display:block;font-size:.97rem;font-weight:800;color:white;margin-top:3px}
.htlItem:last-child .htlInfo{padding-bottom:0}
.heroRastrearBtn{
  width:100%;height:50px;background:transparent;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;color:white;font-weight:800;cursor:pointer;
  letter-spacing:.08em;font-size:.82rem;transition:all .25s;
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px;
  position:relative;z-index:2;overflow:hidden;
}
.heroRastrearBtn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(36,199,236,.12),transparent);
  transform:translateX(-100%);transition:transform .6s var(--ease);
}
.heroRastrearBtn:hover{background:rgba(36,199,236,.08);border-color:rgba(36,199,236,.4);box-shadow:0 0 20px rgba(36,199,236,.12)}
.heroRastrearBtn:hover::before{transform:translateX(100%)}

/* ══════════════════════════════════════════
   PREMIUM TRACKING — VISUAL UPGRADE
══════════════════════════════════════════ */

/* Card base */
.heroTrackCard{overflow:hidden}

/* HUD grid */
.htcHudGrid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(36,199,236,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,199,236,.032) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 75% 65% at 80% 20%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 80% 20%,black,transparent);
}

/* Scan line */
.htcScanLine{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(36,199,236,.5),transparent);
  animation:htcScan 4.5s ease-in-out infinite;z-index:1;pointer-events:none;
}
@keyframes htcScan{
  0%  {top:2%;opacity:0}8%{opacity:.85}92%{opacity:.3}100%{top:98%;opacity:0}
}

/* Radar corner */
.htcRadarWrap{
  position:absolute;bottom:-72px;right:-72px;
  width:220px;height:220px;pointer-events:none;z-index:0;
}
.htcRadarRing{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(36,199,236,.22);
  animation:htcRingPulse 3.8s ease-out infinite;
  transform:translate(-50%,-50%) scale(0);
}
.htcRr1{width:56px;height:56px}
.htcRr2{width:108px;height:108px;animation-delay:.95s}
.htcRr3{width:162px;height:162px;animation-delay:1.9s}
@keyframes htcRingPulse{
  0%  {transform:translate(-50%,-50%) scale(.15);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.htcRadarSweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg at 50% 50%,transparent 78%,rgba(36,199,236,.2) 100%);
  animation:htcRadarRotate 3.2s linear infinite;
}
@keyframes htcRadarRotate{to{transform:rotate(360deg)}}
.htcRadarCore{
  position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(36,199,236,.75);box-shadow:0 0 14px rgba(36,199,236,.9);
}

/* Header upgrades */
.heroTrackCardHdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;position:relative;z-index:2;
}
.htcHdrLeft{display:flex;align-items:center;gap:8px}
.htcLivePing{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#22c55e;position:relative;
}
.htcLivePing::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(34,197,94,.55);
  animation:htcLivePing 2s ease-in-out infinite;
}
@keyframes htcLivePing{
  0%,100%{transform:scale(1);opacity:.7}
  50%    {transform:scale(3);opacity:0}
}
.htcSysTag{
  font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:700;
  letter-spacing:.14em;color:rgba(36,199,236,.45);
  border:1px solid rgba(36,199,236,.18);padding:3px 8px;border-radius:6px;
  animation:htcSysTagBlink 3.2s ease-in-out infinite;
}
@keyframes htcSysTagBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* Premium input */
.heroTrackSearch{position:relative;z-index:2}
.htcInputWrap{position:relative;display:flex;align-items:center}
.htcInput{
  width:100%;height:52px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  border-radius:14px;color:white;padding:0 18px;
  font-size:.85rem;outline:none;
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.htcInput::placeholder{
  color:rgba(255,255,255,.28);font-family:var(--font-body);
  letter-spacing:0;font-size:.87rem;
}
.htcInput:focus{
  border-color:rgba(36,199,236,.55);background:rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(36,199,236,.1),0 0 24px rgba(36,199,236,.08);
}

/* Timeline z-index fix */
.htlWrap{position:relative;z-index:2}

/* ── LOADING STATE ── */
.htlLoadWrap{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 0 4px;gap:10px;
}
.htlLoadCode{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  font-weight:700;letter-spacing:.1em;color:rgba(36,199,236,.7);
}
.htlLoadMsg{
  font-size:.78rem;color:rgba(255,255,255,.5);text-align:center;
  transition:opacity .28s;
}

/* ── RESULT REVEAL ── */
@keyframes htlReveal{
  from{opacity:0;transform:translateY(9px)}
  to  {opacity:1;transform:translateY(0)}
}
.htl-reveal{opacity:0;animation:htlReveal .5s var(--ease-out) forwards}

/* ── CURRENT STATE CARD ── */
.htlCurrentCard{
  border-radius:16px;padding:13px 15px;margin-bottom:14px;
  position:relative;overflow:hidden;
}
.htlCurrentCard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,var(--glow,#24c7ec) 0%,transparent 65%);
  opacity:.08;
}
.htlCurrentTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.htlCurrentLeft{display:flex;align-items:center;gap:9px}
.htlCurrentIcon{font-size:1.05rem;line-height:1}
.htlCurrentLabel{font-size:.9rem;font-weight:800;color:white;line-height:1.2}
.htlLiveBadge{
  font-size:.56rem;font-weight:900;letter-spacing:.1em;white-space:nowrap;
  color:#4ade80;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.28);padding:3px 8px;border-radius:99px;
  animation:htlLiveBlink 2.2s ease-in-out infinite;flex-shrink:0;
}
@keyframes htlLiveBlink{0%,100%{opacity:1}50%{opacity:.55}}
.htlCurrentCode{
  font-family:'JetBrains Mono',monospace;font-size:.63rem;
  color:rgba(255,255,255,.3);margin-top:6px;letter-spacing:.06em;
}

/* ── EXTRA INFO LINES ── */
.htlExtraLine{
  display:flex;align-items:center;gap:8px;
  font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:10px;
}
.htlExtraIcon{font-size:.88rem;line-height:1}
.htlPlaneIcon{display:inline-block;animation:htlPlaneFloat 2.5s ease-in-out infinite}
@keyframes htlPlaneFloat{
  0%,100%{transform:translateX(0) translateY(0)}
  30%    {transform:translateX(4px) translateY(-2px)}
  70%    {transform:translateX(-2px) translateY(1px)}
}

/* ── TIMELINE DOT STATES ── */
.htlDotPulse{animation:htlDotPulseAnim 1.8s ease-in-out infinite}
@keyframes htlDotPulseAnim{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.5);opacity:.75}
}

/* ── EVENTS ── */
.htlEventsWrap{
  margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
}
.htlEventsTitle{
  font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:8px;
}
.htlEvRow{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.htlEvDot{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);
  flex-shrink:0;margin-top:5px;
}
.htlEvDesc{font-size:.74rem;color:rgba(255,255,255,.62);line-height:1.4}
.htlEvDate{font-size:.61rem;color:rgba(255,255,255,.28);margin-top:2px}

/* ── WA LINK ── */
.htlWaLink{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding:10px 0;border-radius:12px;
  background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.22);
  color:#4ade80;font-size:.76rem;font-weight:700;
  text-decoration:none;letter-spacing:.04em;
  transition:background .2s,transform .2s;
}
.htlWaLink:hover{background:rgba(34,197,94,.18);transform:translateY(-1px)}

/* ══════════════════════════════════════════════════════════════════════
   ETL — ElogBox Timeline · recorrido del envío
   ──────────────────────────────────────────────────────────────────────
   Sustituye al render .htlItem/.htlLeft/.htlDot/.htlLine SOLO en el
   timeline. .htlCurrentCard y .htlExtraLine siguen intactas, y las clases
   .htlItem/.htlDot/.htlInfo/.htlLabel/.htlVal se conservan porque
   renderTrackingError() las sigue emitiendo.
   Contenedor: <ol class="etlTrack"> dentro de #heroTrackingResult; funciona
   igual en .htlWrap (index.html) que en .trackingResult (tracking.html).
   ══════════════════════════════════════════════════════════════════════ */
.etlTrack{
  --etl-node:24px;                       /* diámetro del círculo */
  --etl-col-gap:14px;                    /* círculo ↔ texto */
  --etl-row-gap:20px;                    /* ritmo vertical entre pasos */
  --etl-ring:rgba(255,255,255,.18);      /* borde del círculo pendiente */
  --etl-line:rgba(255,255,255,.11);      /* conector pendiente */
  --etl-done:#4ade80;
  --etl-done-ring:rgba(74,222,128,.55);
  --etl-done-fill:rgba(34,197,94,.13);
  --etl-done-line:rgba(34,197,94,.42);
  --etl-title:rgba(255,255,255,.93);
  --etl-title-off:rgba(255,255,255,.44);
  --etl-meta:rgba(255,255,255,.44);
  --etl-meta-off:rgba(255,255,255,.26);
  --etl-cancel:#ff7782;

  display:block;width:100%;margin:4px 0 0;padding:0;list-style:none;
}

/* ── Fila ── */
.etlStep{
  position:relative;
  display:grid;
  grid-template-columns:var(--etl-node) minmax(0,1fr);
  column-gap:var(--etl-col-gap);
  align-items:start;
  padding-bottom:var(--etl-row-gap);
}
.etlStep:last-child{padding-bottom:0}

/* ── Conector: nace bajo un círculo y muere en el siguiente.
      Absoluto (no flex:1), así su altura la marca el contenido de la fila. ── */
.etlStep:not(:last-child)::before{
  content:"";position:absolute;z-index:0;
  top:calc(var(--etl-node) + 3px);bottom:-3px;
  left:calc(var(--etl-node) / 2);width:2px;margin-left:-1px;
  border-radius:2px;background:var(--etl-line);
}
.etlStep.is-done:not(:last-child)::before{background:var(--etl-done-line)}
.etlStep.is-current:not(:last-child)::before{
  background:linear-gradient(180deg,var(--etl-accent,#24c7ec) 0%,var(--etl-line) 78%);
}
.etlStep.is-cancelled:not(:last-child)::before{background:rgba(238,93,98,.22)}

/* ── Nodo (círculo con borde) ── */
.etlNode{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:var(--etl-node);height:var(--etl-node);
  border:1.5px solid var(--etl-ring);border-radius:50%;
  background:rgba(255,255,255,.025);
  color:transparent;
}
.etlIcon{width:12px;height:12px;opacity:0;overflow:visible}

/* Completado: check verde de marca */
.etlStep.is-done .etlNode{
  border-color:var(--etl-done-ring);
  background:var(--etl-done-fill);
  color:var(--etl-done);
  box-shadow:0 0 0 3px rgba(34,197,94,.06);
}
.etlStep.is-done .etlIcon{opacity:1}

/* Actual: punto lleno del color del estado ("estás aquí") + glow y aro que pulsa.
   Deliberadamente NO lleva check: el check significa "hito cumplido". */
.etlStep.is-current .etlNode{
  border-color:var(--etl-accent,#24c7ec);
  background:var(--etl-fill,rgba(36,199,236,.12));
  color:var(--etl-accent,#24c7ec);
  box-shadow:0 0 0 4px var(--etl-fill,rgba(36,199,236,.12)),
             0 0 18px var(--etl-glow,rgba(36,199,236,.45));
}
.etlStep.is-current .etlNode::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--etl-accent,#24c7ec);
}
.etlStep.is-current .etlNode::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid var(--etl-accent,#24c7ec);
  opacity:.45;pointer-events:none;
  animation:etlPulse 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes etlPulse{
  0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(1.85);opacity:0}
}

/* Cancelado */
.etlStep.is-cancelled .etlNode{
  border-color:rgba(238,93,98,.4);
  background:rgba(238,93,98,.07);
  color:var(--etl-cancel);
}
.etlStep.is-halted .etlIcon{opacity:1}

/* ── Texto ── */
.etlBody{min-width:0;padding-top:1px}
.etlTitle{
  display:block;font-size:.87rem;font-weight:800;line-height:1.25;
  letter-spacing:-.012em;color:var(--etl-title);
}
.etlMeta{
  display:block;margin-top:4px;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;line-height:1.35;
  color:var(--etl-meta);font-variant-numeric:tabular-nums;
}
.etlStep.is-pending   .etlTitle{font-weight:700;color:var(--etl-title-off)}
.etlStep.is-pending   .etlMeta {color:var(--etl-meta-off)}
.etlStep.is-current   .etlTitle{color:#fff}
.etlStep.is-current   .etlMeta {color:var(--etl-accent,#24c7ec)}
.etlStep.is-cancelled .etlTitle{color:var(--etl-title-off)}
.etlStep.is-cancelled .etlMeta {color:var(--etl-cancel)}

/* Texto solo para lectores de pantalla (el estado no debe deducirse del color) */
.etlSr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── Consola de tracking.html: mismo diseño, algo más aireado ── */
.trackingConsole .etlTrack{--etl-row-gap:22px;margin-top:6px}

/* ── Responsive (breakpoints existentes: 980 y 600) ── */
@media(max-width:600px){
  .etlTrack{--etl-node:22px;--etl-col-gap:12px;--etl-row-gap:17px}
  .etlTitle{font-size:.82rem}
  .etlMeta{font-size:.645rem}
  .trackingConsole .etlTrack{--etl-row-gap:18px}
}

/* ── Reduced motion: el aro queda estático, nada desaparece ── */
@media(prefers-reduced-motion:reduce){
  .etlStep.is-current .etlNode::after{animation:none;opacity:.4}
}

/* ── SERVICES STRIP ── */
.servicesStrip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,#060d1a 0%,#080f1e 100%);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:28px 24px;
  gap:18px;
}
.svcCard{
  padding:30px 26px;
  background:rgba(10,20,40,0.4);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s;
  position:relative;overflow:hidden;
}
.svcCard::before{
  content:"";position:absolute;inset:0;border-radius:20px;opacity:0;
  transition:opacity .35s;
  background:radial-gradient(ellipse 90% 70% at 50% -10%,rgba(28,141,214,.14),transparent 70%);
}
.svcCard:hover{
  transform:translateY(-8px);
  border-color:rgba(28,141,214,.35);
  box-shadow:0 16px 48px rgba(28,141,214,.18), 0 4px 16px rgba(0,0,0,.4);
}
.svcCard:hover::before{opacity:1}
.svcIcon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  background:rgba(28,141,214,.12);
  border:1px solid rgba(28,141,214,.22);
  color:rgba(28,141,214,.9);
  transition:background .35s, box-shadow .35s;
}
.svcCard:hover .svcIcon{
  background:rgba(28,141,214,.2);
  box-shadow:0 0 24px rgba(28,141,214,.3);
}
.svcCard h4{
  font-size:.76rem;font-weight:900;letter-spacing:.1em;
  margin:0 0 10px;color:#ddeeff;text-transform:uppercase;
}
.svcCard p{font-size:.87rem;color:rgba(255,255,255,.42);line-height:1.65;margin:0}

/* ── STATS STRIP ── */
.statsStrip{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(135deg,#050f1c,#0a2236)}
.statItem{text-align:center;padding:52px 24px;border-right:1px solid rgba(255,255,255,.07)}
.statItem:last-child{border-right:none}
.statItem b{display:block;font-size:clamp(2.4rem,4vw,3.8rem);font-weight:900;color:var(--orange);line-height:1;margin-bottom:10px;letter-spacing:-.02em}
.statItem span{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ── COTIZADOR SECTION ── */
.cotizSection{
  padding:100px 3%;
  background:#f4f8fb;
}
.cotizWrap{max-width:1600px;margin:0 auto}
.cotizHeader{text-align:center;margin-bottom:56px}
.cotizHeader h2{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(2.4rem,5vw,4.8rem);line-height:.95;letter-spacing:-.02em;
  margin:18px 0 14px;color:var(--ink);
}
.cotizHeader h2 em{font-style:italic;color:var(--cyan-deep)}
.cotizHeader p{color:var(--muted);font-size:1rem;line-height:1.65;max-width:560px;margin:0 auto}

/* ── COTIZADOR LAYOUT ── */
.calculator{background:radial-gradient(ellipse at 15% 25%,rgba(36,199,236,.07),transparent 50%),radial-gradient(ellipse at 85% 75%,rgba(139,197,63,.07),transparent 50%),linear-gradient(160deg,#eef8ff,#f5fbf5,#f8f5ff)}
.quoteLayout3{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:28px;align-items:stretch}
.panel{border-radius:26px;padding:28px;position:relative;overflow:hidden}
.productsPanel{
  background:#fff;
  border:1px solid #deeaf4;
  box-shadow:0 8px 40px rgba(12,68,105,.08);
  padding:36px;
}
.invoicePanel{
  background:#fff;
  border:1px solid #deeaf4;
  box-shadow:0 8px 40px rgba(12,68,105,.08);
  padding:36px;
  display:flex;flex-direction:column;
}
.calcVisual{background:linear-gradient(160deg,#061421 0%,#0d2b42 60%,#0a3a2a 100%)!important;border-radius:26px!important;padding:30px!important;box-shadow:0 40px 80px rgba(6,20,33,.28)!important;border:none!important;display:flex;flex-direction:column;min-height:520px;height:100%}
.calcVisual::before{display:none!important}
.calcVisual .pill{align-self:flex-start;margin-bottom:8px}
.calcVisualTitle{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;margin:0 0 10px;letter-spacing:-.04em;color:white}
.calcVisualDesc{color:#88bdd8;font-size:.88rem;line-height:1.65;margin:0}
.calcImgWrap{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 0}
.calcImgWrap img{width:100%;height:auto;max-width:420px;filter:drop-shadow(0 28px 56px rgba(36,199,236,.42));animation:floatBox 6s ease-in-out infinite}
.calcVisualStats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calcVisualStats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;text-align:center}
.calcVisualStats b{display:block;font-size:1.2rem;color:#24c7ec;font-weight:900}
.calcVisualStats span{font-size:.72rem;color:#7aabcc;text-transform:uppercase;letter-spacing:.07em}
@keyframes floatBox{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}

.panelHeader{margin-bottom:24px}
.panelHeader h3{font-family:var(--font-heading);font-weight:400;font-size:2rem;margin:0;letter-spacing:-.02em;color:var(--ink)}
.panelHeader p{color:var(--muted);margin-top:6px;font-size:.95rem}
.productRow{display:grid;grid-template-columns:1.3fr .85fr .85fr auto;gap:12px;margin:12px 0;padding:18px;border-radius:20px;background:white;border:1px solid #e4eff8;box-shadow:0 2px 12px rgba(28,141,214,.06);transition:all .2s}
.productRow:hover{box-shadow:0 8px 28px rgba(28,141,214,.13);border-color:#c2dff0}
.productRow input{height:56px;border:1px solid #daeef8;border-radius:14px;padding:0 12px;font-size:1rem;background:white;outline:none;transition:all .2s;width:100%}
.productRow input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(36,199,236,.12)}
.removeBtn{width:50px;height:56px;border:0;border-radius:14px;background:#fff0f0;color:#d43f48;font-weight:900;cursor:pointer;font-size:1.2rem;transition:all .2s;flex-shrink:0}
.removeBtn:hover{background:#ffd6d8;transform:scale(1.08)}
.addBtn{width:100%;height:58px;border:0;border-radius:18px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:white;font-weight:900;margin-top:16px;cursor:pointer;font-size:1rem;letter-spacing:.04em;transition:all .2s;box-shadow:0 10px 28px rgba(28,141,214,.22)}
.addBtn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(28,141,214,.32)}
.typeBox{padding:20px 22px;border-radius:20px;background:white;border:1px solid #daeef8;box-shadow:0 2px 10px rgba(28,141,214,.06);margin:16px 0}
.typeBox label{font-weight:900;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.typeBox select{width:100%;height:56px;border-radius:14px;border:1px solid #cfe8f4;margin-top:10px;padding:0 16px;background:white;font-size:1rem;outline:none;cursor:pointer;transition:border-color .2s}
.typeBox select:focus{border-color:var(--cyan)}

/* ── VOLUMETRIC ── */
.volRow{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding-top:12px;margin-top:4px;
  border-top:1px dashed #d8eef8;
}
.volLabel{
  font-size:.72rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;flex-shrink:0;
}
.volFields{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1}
.pdim{
  width:110px!important;height:46px!important;
  font-size:.88rem!important;border-radius:12px!important;
  padding:0 12px!important;
}
.volResult{
  font-size:.8rem;
  padding:6px 14px;
  background:#f0f7ff;
  border-radius:10px;
  border:1px solid #d0e8f8;
  color:var(--muted);
  white-space:nowrap;
}
.volWinner{font-weight:800;padding:2px 8px;border-radius:6px;font-size:.75rem}
.volWinnerVol{color:#ff7a1a;background:#fff3e8}
.volWinnerReal{color:#1c8dd6;background:#e8f4ff}

.invoicePanel{display:flex;flex-direction:column}
.invoiceTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:2px solid #eef5fb}
.invoiceLabel{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin:0 0 4px}
.invoiceTitle{font-size:1.5rem;margin:0;letter-spacing:-.03em;font-weight:900}
.invoiceBadge{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;font-weight:900;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px rgba(28,141,214,.3)}
.summaryGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.metric{padding:16px 18px;border-radius:18px;background:white;border:1px solid #e4eff8;box-shadow:0 2px 10px rgba(28,141,214,.06);position:relative;overflow:hidden}
.metric::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.metric span{display:block;color:var(--muted);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em}
.metric b{font-size:1.2rem;color:var(--text);margin-top:3px;display:block;font-weight:900}
.formulaBox{padding:16px 18px;border-radius:18px;background:white;border:1px solid #daeef8;box-shadow:0 2px 10px rgba(28,141,214,.06);margin:12px 0}
.formulaBox h4{margin:0 0 5px;color:var(--blue);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.formulaBox p{margin:0;color:#2a4a5e;line-height:1.6;font-size:.9rem}
.invoiceBreakdown{border:1px solid #e4eff8;border-radius:20px;overflow:hidden;margin:14px 0 18px;flex:1}
.invoiceLine{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #eef5fb;transition:background .15s}
.invoiceLine:hover{background:#f8fcff}
.invoiceLine span{color:var(--muted);font-size:.85rem;font-weight:800}
.invoiceLine b{font-size:1rem;color:var(--text);font-weight:900}
.invoiceTotal{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:linear-gradient(135deg,#061421,#0d2b42)}
.invoiceTotal span{color:#7fdaef;text-transform:uppercase;font-weight:900;font-size:.75rem;letter-spacing:.12em}
.invoiceTotal strong{font-size:clamp(1.6rem,2.5vw,2.2rem);background:linear-gradient(135deg,#24c7ec,#8bc53f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:16px;text-decoration:none;font-weight:900;border:0;cursor:pointer;font-size:.95rem}
.primary{background:linear-gradient(135deg,var(--orange),var(--red));color:white;box-shadow:0 16px 40px rgba(238,93,98,.25)}
.primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(238,93,98,.35)}
.full{width:100%}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:99px;
  background:rgba(36,199,236,.12);border:1px solid rgba(36,199,236,.32);
  color:#c1f5ff;text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;font-weight:600;
}
.pill .dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0;
  position:relative;
}
/* Anillo pulsante por transform/opacity (GPU) — antes animaba box-shadow y repintaba cada frame */
.pill .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(36,199,236,.55);
  animation:ping 1.6s infinite;
}
@keyframes ping{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(3.6);opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
.pill.dark{
  background:rgba(28,141,214,.10);border-color:rgba(28,141,214,.25);color:var(--cyan-deep);
}
.pill.dark .dot{background:var(--cyan-deep);box-shadow:0 0 0 3px rgba(28,141,214,.18)}
.pill.dark .dot::after{display:none}

/* ── MARQUEE ── */
.marquee{
  background:var(--ink);color:#fff;
  padding:20px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 55s linear infinite;
  will-change:transform;
}
.marquee-track span{
  display:inline-flex;align-items:center;
  gap:56px;
  padding-right:56px;
  flex-shrink:0;
  white-space:nowrap;
  font-family:var(--font-heading);font-style:italic;font-size:30px;
  letter-spacing:-.01em;color:#fff;
}
.marquee-track .dot{
  width:7px;height:7px;border-radius:50%;background:var(--coral);flex-shrink:0;display:inline-block;
}
/* continuo — no se pausa al hover */
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ── SECTION BASE ── */
.section{padding:100px 5%}
.sectionTitle{text-align:center;max-width:780px;margin:0 auto 52px}
.sectionTitle h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.94;letter-spacing:-.03em;margin:16px 0}
.sectionTitle p{font-size:1.05rem;line-height:1.65;color:var(--muted)}

/* ── TARIFAS ── */
.tariffs{
  padding:80px 5%;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(4,11,21,.55) 0%,rgba(4,11,21,.42) 100%),
    url('assets/fondo3.webp') center/cover no-repeat fixed;
}
.tariffs .sectionTitle{text-align:center;margin-bottom:52px}
.tariffs .sectionTitle h2{color:#fff;font-family:var(--font-heading);font-weight:400}
.tariffs .sectionTitle h2 em{font-style:italic;color:var(--cyan)}
.tariffs .sectionTitle p{color:#7a9bb5}
.tariffs .pill.dark{background:rgba(36,199,236,.12);border-color:rgba(36,199,236,.28);color:#c1f5ff}
.tariffs .pill.dark .dot{background:var(--cyan)}

/* Tarjeta única */
.tarifBigCard{
  max-width:1200px;margin:0 auto;
  background:rgba(5,13,28,.55);
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  overflow:hidden;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Cabecera */
.tarifCardHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 36px;
  background:rgba(28,141,214,.12);
  border-bottom:1px solid rgba(255,255,255,.09);
  gap:20px;
}
.tarifCardHeadLeft{display:flex;align-items:center;gap:18px}
.tarifCardBadge{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:grid;place-items:center;font-size:1.4rem;flex-shrink:0;
  box-shadow:0 8px 24px rgba(36,199,236,.35);
}
.tarifCardTitle{font-family:var(--font-heading);font-size:1.5rem;color:#fff;letter-spacing:-.01em}
.tarifCardSub{font-size:.75rem;color:#6a9ab8;margin-top:3px;letter-spacing:.04em}
.tarifCardRoute{display:flex;align-items:center;gap:10px}
.tarifRouteDot{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:6px 12px;border-radius:8px;letter-spacing:.1em;
}
.tarifRouteDotEnd{background:rgba(36,199,236,.18);border-color:rgba(36,199,236,.4);color:var(--cyan)}
.tarifRouteLine{flex:1;min-width:60px;height:1px;background:rgba(255,255,255,.15);position:relative}
.tarifRouteLine i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px rgba(36,199,236,.7);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.6)}}

/* Columnas header */
.tarifCols{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1.2fr;
  padding:10px 36px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tarifCols span{
  font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:#4a7a98;
}

/* Filas */
.tarifRow{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1.2fr;
  align-items:center;
  padding:11px 36px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .2s, transform .2s;
  cursor:default;position:relative;
}
.tarifRow:last-child{border-bottom:none}
.tarifRow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .25s, width .35s cubic-bezier(.16,1,.3,1);
}
.tarifRow::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(36,199,236,.07) 0%,transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.tarifRow:hover{background:rgba(255,255,255,.03)}
.tarifRow:hover::before{opacity:1;width:3px}
.tarifRow:hover::after{opacity:1}
.tarifRow > div,.tarifRow > span{
  font-size:.88rem;color:#8ab0c8;font-weight:500;
  transition:color .25s ease;
}
.tarifRow:hover > div,.tarifRow:hover > span{color:#daeef8}

/* Columna de rango */
.tr-range b{display:block;color:#fff;font-size:.9rem;font-weight:700;font-family:var(--font-body);letter-spacing:-.01em}
.tr-range small{font-size:.68rem;color:#4a7a98;font-weight:500;margin-top:1px;display:block;letter-spacing:.04em}

/* Tarifa / kg */
.tr-rate{font-family:'JetBrains Mono',monospace;font-size:.95rem;color:var(--cyan)!important;font-weight:700}
.tr-rate em{font-style:normal;font-size:.75rem;color:#4a7a98;margin-left:2px}
.tr-fixed{color:var(--orange)!important}

/* Nac */
.tr-nac{color:#7ab8d0!important;font-size:.82rem}

/* Fila destacada */
.tarifRowFeatured{
  background:linear-gradient(90deg,rgba(36,199,236,.10),rgba(139,197,63,.06),transparent)!important;
  border-color:rgba(36,199,236,.18)!important;
}
.tarifRowFeatured .tr-range b{color:var(--cyan)}
.tarifRowFeatured .tr-range small{color:var(--green);font-weight:700}
.tarifRowFeatured::before{width:4px!important;background:linear-gradient(180deg,var(--cyan),var(--green))!important}

/* Fila tipo mínimo fijo */
.tarifFlat .tr-range b{color:#ffd580}
.tarifFlat .tr-rate{color:var(--orange)!important}

/* Pie */
.tarifCardFoot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 36px;
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.08);
}
.tarifCardFoot span{font-size:.8rem;color:#4a7a98}

/* ── CASILLA MIAMI ── */
.address{background:linear-gradient(90deg,rgba(6,20,33,.94),rgba(6,20,33,.6)),var(--img-address) center/cover fixed;color:white}
.addressContent{display:grid;grid-template-columns:1fr .9fr;gap:28px}
.addressContent h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.94;letter-spacing:-.055em;margin:18px 0}
.addressCard,.requirements{border-radius:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);padding:28px}
.addressCard p,.requirements p{font-size:1.05rem;color:#eef8ff;margin:8px 0}
.requirements h3{font-size:1.8rem;margin-top:0}

/* ── CONTACTO ── */
.contactSection{
  background:
    linear-gradient(135deg,rgba(4,11,21,.96) 0%,rgba(8,22,42,.92) 100%),
    url('assets/fondo2.webp') center/cover no-repeat fixed;
  padding:100px 5%;
  position:relative;
  isolation:isolate;
}
.contactInner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.contactCTA .pill{margin-bottom:24px}
.contactCTA h2{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(2.8rem,5vw,5rem);line-height:.95;letter-spacing:-.02em;
  color:#fff;margin:0 0 20px;
}
.contactCTA h2 em{font-style:italic;color:var(--cyan)}
.contactCTA p{font-size:1.05rem;color:#7a9bb5;line-height:1.7;margin:0 0 36px;max-width:440px}
.contactBtns{display:flex;flex-wrap:wrap;gap:14px}
.contactWaBtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:99px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;font-weight:700;font-size:.95rem;
  box-shadow:0 12px 30px rgba(37,211,102,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform var(--t),box-shadow var(--t);text-decoration:none;
}
.contactWaBtn:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(37,211,102,.45)}
.contactMapBtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;border-radius:99px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:600;font-size:.92rem;
  backdrop-filter:blur(12px);
  transition:background var(--t),transform var(--t);text-decoration:none;
}
.contactMapBtn:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}

/* Info cards */
.contactCards{display:flex;flex-direction:column;gap:16px}
.contactCard{
  display:flex;align-items:flex-start;gap:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:22px 24px;
  backdrop-filter:blur(12px);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.contactCard:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);transform:translateX(6px)}
.contactCardIcon{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  background:rgba(28,141,214,.2);border:1px solid rgba(28,141,214,.3);
  display:grid;place-items:center;color:var(--cyan-deep);
}
.contactCardIconGreen{background:rgba(37,211,102,.15);border-color:rgba(37,211,102,.3);color:#25d366}
.contactCardIconCyan{background:rgba(36,199,236,.15);border-color:rgba(36,199,236,.3);color:var(--cyan)}
.contactCardIconOrange{background:rgba(255,122,26,.15);border-color:rgba(255,122,26,.3);color:var(--orange)}
.contactCard h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin:0 0 6px}
.contactCard p{font-size:.92rem;color:#ccdde8;line-height:1.6;margin:0}

/* ── FOOTER ── */
.footer{background:#02080f;border-top:1px solid rgba(255,255,255,.06)}
.footerTop{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr 2fr;gap:64px;
  padding:64px 5% 48px;
}
.footerBrand img{height:52px;filter:brightness(1.1) drop-shadow(0 4px 16px rgba(36,199,236,.2));margin-bottom:18px}
.footerBrand p{font-size:.9rem;color:#4a6a82;line-height:1.7;max-width:260px;margin:0}
.footerLinks{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footerCol h5{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#4a6a82;margin:0 0 18px}
.footerCol a{
  display:block;font-size:.88rem;color:#6a8ea6;
  margin-bottom:10px;text-decoration:none;
  transition:color var(--t);
}
.footerCol a:hover{color:#c1eaf8}
.footerBottom{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 5%;
  border-top:1px solid rgba(255,255,255,.05);
}
.footerBottom p{font-size:.78rem;color:#2e4a5e;margin:0}

/* ── NAV DERECHA + HAMBURGUESA ── */
.navRight{display:flex;align-items:center;gap:10px}
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;padding:8px;transition:background var(--t);
}
.hamburger:hover{background:rgba(255,255,255,.15)}
.hamburger span{
  display:block;width:100%;height:2px;border-radius:2px;
  background:#fff;transition:transform .3s,opacity .3s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil desplegable */
.mobileMenu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(4,10,22,.97);backdrop-filter:blur(20px);
  z-index:79;flex-direction:column;justify-content:center;align-items:center;
  gap:8px;padding:100px 5% 40px;
  opacity:0;transform:translateY(-12px);
  transition:opacity .3s,transform .3s;
}
.mobileMenu.open{display:flex;opacity:1;transform:translateY(0)}
.mobileMenu a{
  font-family:var(--font-heading);font-size:clamp(2rem,7vw,2.8rem);
  color:rgba(255,255,255,.7);text-decoration:none;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);width:100%;text-align:center;
  transition:color .2s;
}
.mobileMenu a:hover{color:#fff}
.mobileMenuWa{
  margin-top:16px!important;border:none!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#25d366,#128c7e)!important;
  color:#fff!important;border-radius:99px!important;
  padding:14px 32px!important;font-family:var(--font-body)!important;
  font-size:1rem!important;font-weight:700!important;width:auto!important;
  box-shadow:0 12px 30px rgba(37,211,102,.3);
}

/* ── GLASS BUTTON ── */
.glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:white;backdrop-filter:blur(14px)}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════ */
@media(max-width:1024px){

  /* Nav */
  .nav{top:10px;padding:8px 10px 8px 18px}
  .navlinks{display:none}
  .hamburger{display:flex}
  .brand img{height:42px}

  /* Hero */
  .hero{grid-template-columns:1fr;padding:120px 6% 60px;gap:36px}
  .heroTrackCard{max-width:540px}

  /* Servicios */
  .servicesStrip{grid-template-columns:1fr 1fr;padding:20px 16px;gap:14px}
  .svcCard{border-bottom:none}

  /* Stats */
  .statsStrip{grid-template-columns:1fr 1fr}
  .statItem{border-bottom:1px solid rgba(255,255,255,.07)}

  /* Cotizador */
  .cotizSection{padding:80px 4%}
  .quoteLayout3{grid-template-columns:1fr;gap:20px}
  .calcVisual{min-height:auto!important;height:auto!important}

  /* Tarifas */
  .tarifCols{display:none}
  .tarifRow{grid-template-columns:1fr 1fr;gap:6px;padding:14px 20px}
  .tarifRow > div:nth-child(n+3){display:none}
  .tarifCardHead{flex-direction:column;align-items:flex-start;gap:12px}

  /* Casilla */
  .addressContent{grid-template-columns:1fr}

  /* Contacto */
  .contactInner{grid-template-columns:1fr;gap:40px}

  /* Footer */
  .footerTop{grid-template-columns:1fr;gap:40px}
  .footerLinks{grid-template-columns:repeat(3,1fr)}
}

/* ══════════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 640px)
══════════════════════════════════════════ */
@media(max-width:640px){

  /* Nav — compacto */
  .nav{
    top:8px;width:calc(100% - 24px);
    padding:8px 8px 8px 16px;
    border-radius:50px;
  }
  .navlinks{display:none}
  .brand img{height:36px}
  .navbtn{padding:10px 14px;font-size:12px;gap:6px}
  .navbtn svg{width:16px;height:16px}

  /* Hero */
  .hero{
    grid-template-columns:1fr;
    padding:100px 5% 50px;
    gap:32px;
    min-height:auto;
  }
  h1{font-size:clamp(2.6rem,10vw,3.8rem);margin:18px 0 16px}
  .hero p.lead{font-size:.95rem}
  .actions{flex-direction:column;align-items:flex-start;gap:12px}
  .actions .btn,.actions .contactWaBtn{width:100%;justify-content:center}
  .play-link{margin-left:0}
  .heroStats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:24px}
  .heroStats b{font-size:1.5rem}
  .heroStats span{font-size:9.5px;letter-spacing:.08em}

  /* Tracking card — se apila */
  .heroTrackCard{padding:22px 18px;border-radius:20px}

  /* Inputs a 16px: evita el zoom automático de iOS al enfocar */
  .htcInput,.productRow input,.typeBox select{font-size:16px}
  .pdim{font-size:16px!important}

  /* Fondo hero ligero para móvil (34KB vs 152KB) */
  .heroBg{
    background:
      radial-gradient(80% 60% at 20% 20%,rgba(28,141,214,.45),transparent 60%),
      radial-gradient(60% 50% at 90% 80%,rgba(238,93,98,.35),transparent 65%),
      linear-gradient(100deg,rgba(4,12,24,.92) 0%,rgba(4,12,24,.75) 45%,rgba(4,12,24,.45) 100%),
      var(--img-hero-mobile) center/cover no-repeat;
  }

  /* Orbs reducidos */
  .orb.o1{width:280px;height:280px}
  .orb.o2{width:200px;height:200px}
  .orb.o3{display:none}

  /* Marquee */
  .marquee-track span{font-size:22px;gap:36px;padding-right:36px}
  .marquee{padding:14px 0}

  /* Servicios */
  .servicesStrip{grid-template-columns:1fr}
  .svcCard{padding:22px 18px}

  /* Stats */
  .statsStrip{grid-template-columns:1fr 1fr}
  .statItem{padding:32px 16px}
  .statItem b{font-size:2rem}

  /* Cotizador */
  .cotizSection{padding:60px 4%}
  .cotizHeader{margin-bottom:36px}
  .cotizHeader h2{font-size:clamp(2rem,8vw,3rem)}
  .quoteLayout3{grid-template-columns:1fr;gap:16px}
  .calcVisual{min-height:auto!important;height:auto!important;padding:22px!important}
  .productsPanel,.invoicePanel{padding:20px 16px}
  .productRow{grid-template-columns:1fr 1fr auto;gap:8px}
  .productRow .pname{grid-column:1/3;grid-row:1}
  .productRow .removeBtn{grid-column:3;grid-row:1;width:44px}
  .productRow .pprice{grid-column:1;grid-row:2}
  .productRow .pweight{grid-column:2/4;grid-row:2}
  .volRow{flex-direction:column;align-items:stretch}
  .volFields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pdim{width:100%!important}
  .volResult{grid-column:1/-1;text-align:center;white-space:normal}
  .typeBox select{padding:0 30px 0 14px;text-overflow:ellipsis}
  .summaryGrid{grid-template-columns:1fr 1fr}

  /* Tarifas */
  .tariffs{padding:50px 3%;background-attachment:scroll}
  .tarifBigCard{border-radius:16px}
  .tarifCardHead{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 14px}
  .tarifCardTitle{font-size:1.1rem}
  .tarifCardSub{font-size:.65rem}
  .tarifCardBadge{width:38px;height:38px;font-size:1rem}
  .tarifCardRoute{display:none}
  /* Columnas visibles en móvil: rango · tarifa · handling */
  .tarifCols{
    display:grid;
    grid-template-columns:1.6fr .8fr .7fr .7fr;
    padding:7px 14px;
  }
  .tarifCols span{font-size:.58rem;letter-spacing:.06em}
  .tarifCols span:nth-child(n+5){display:none}
  .tarifRow{
    display:grid;
    grid-template-columns:1.6fr .8fr .7fr .7fr;
    gap:0;
    padding:6px 14px;
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .tarifRow > div:nth-child(n+5){display:none}
  /* Re-mostrar AWB y Origin (la regla de tablet ≤1024 las ocultaba desde la 3) */
  .tarifRow > div:nth-child(3),.tarifRow > div:nth-child(4){display:block}
  .tarifRow > div{font-size:.75rem;line-height:1.2}
  .tr-range b{font-size:.75rem!important;letter-spacing:-.01em}
  .tr-range small{font-size:.6rem!important;margin-top:0}
  .tr-rate{font-size:.75rem!important}
  .tarifRowFeatured::before{width:3px!important}
  .tarifCardFoot{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .tarifCardFoot .btn{width:100%;justify-content:center;min-height:40px;font-size:.82rem}

  /* Casilla */
  .address{background-attachment:scroll}
  .addressContent{grid-template-columns:1fr;gap:20px}
  .addressContent h2{font-size:clamp(1.8rem,7vw,2.6rem)}
  .addressCard,.requirements{padding:20px}

  /* Contacto */
  .contactSection{padding:60px 5%;background-attachment:scroll}
  .contactInner{grid-template-columns:1fr;gap:36px}
  .contactCTA h2{font-size:clamp(2.2rem,8vw,3.2rem)}
  .contactBtns{flex-direction:column}
  .contactWaBtn,.contactMapBtn{width:100%;justify-content:center}
  .contactCard{padding:16px 18px}

  /* Footer */
  .footerTop{grid-template-columns:1fr;gap:32px;padding:48px 5% 32px}
  .footerLinks{grid-template-columns:1fr 1fr;gap:24px}
  .footerBrand img{height:44px}
  .footerBottom{flex-direction:column;text-align:center;gap:8px;padding:16px 5%}

  /* Section base */
  .section{padding:60px 5%}
  .sectionTitle{margin-bottom:36px}
}

/* ══════════════════════════════════════════
   ACCESIBILIDAD — usuarios con "reducir movimiento"
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════
   RESPONSIVE — MÓVIL PEQUEÑO (≤ 390px)
══════════════════════════════════════════ */
@media(max-width:390px){
  h1{font-size:2.4rem}
  .heroStats{grid-template-columns:repeat(3,1fr)}
  .heroStats b{font-size:1.3rem}
  .statsStrip{grid-template-columns:1fr 1fr}
  .footerLinks{grid-template-columns:1fr}
  .quoteLayout3{gap:12px}
  .navbtn span{display:none}
  /* Tarifas ultra compacto */
  .tarifRow{padding:5px 10px}
  .tarifRow > div{font-size:.68rem}
  .tr-range b{font-size:.68rem!important}
  .tr-range small{display:none}
  .tarifCols span{font-size:.54rem}
  .tarifCols{padding:5px 10px}
}

/* ══════════════════════════════════════════
   ELOGBOX V2 — SISTEMA EDITORIAL LOGÍSTICO
══════════════════════════════════════════ */
:root{
  --navy:#0b3e75;
  --navy-deep:#082b52;
  --surface-blue:#edf8ff;
  --surface-green:#f1fae9;
  --line:#dceaf4;
  --shadow-soft:0 24px 60px rgba(18,75,122,.11);
}
body{background:#fff;color:#16334a}
body::before{opacity:.018}
.section{padding:clamp(72px,8vw,124px) clamp(20px,5vw,72px)}
.sectionEyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--blue);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.sectionEyebrow::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--green)}

/* Navegación sólida y legible */
.nav{
  top:0;width:100%;max-width:none;border-radius:0;
  padding:9px clamp(18px,4vw,64px);
  background:rgba(15,103,190,.96);border:0;border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 30px rgba(8,57,110,.16);
}
.brand img{height:48px;max-width:190px;filter:none}
.navlinks a{color:rgba(255,255,255,.82);font-size:12.5px}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.12)}
.navbtn-wa{background:#8bcf3f;color:#0b3e36!important;box-shadow:0 9px 20px rgba(67,130,36,.25)}

/* Hero: mensaje, arte promocional y tracking en una composición única */
.hero{
  display:block;min-height:900px;padding:116px clamp(20px,5vw,72px) 105px;
  color:#fff;background:linear-gradient(135deg,#0871cd 0%,#126ac1 52%,#09529e 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-145px;height:280px;
  background:#fff;border-radius:50% 52% 0 0/45% 55% 0 0;transform:rotate(-2deg);z-index:0;
}
.hero::after{
  content:"";position:absolute;width:460px;height:460px;right:-100px;top:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,197,63,.3),transparent 68%);pointer-events:none;
}
.heroBg{inset:0;background:var(--img-hero) center/cover no-repeat;z-index:0;opacity:.1;mix-blend-mode:screen}
.heroBg::after{background-size:72px 72px;opacity:.55;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.orb.o1{background:radial-gradient(circle,rgba(36,199,236,.45),transparent 70%);right:10%;top:5%}
.orb.o2{background:radial-gradient(circle,rgba(139,197,63,.32),transparent 70%);left:20%;bottom:0}
.orb.o3{display:none}
.heroShell{
  position:relative;z-index:2;max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:clamp(38px,5vw,82px);align-items:center;
}
.heroContent{max-width:660px;padding-bottom:20px}
.hero .pill{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);color:#fff}
.hero h1{
  font-family:var(--font-body);font-weight:800;
  font-size:clamp(3.1rem,5.1vw,6.1rem);line-height:.98;letter-spacing:-.058em;
  margin:22px 0 24px;
}
.hero h1 em{display:inline;color:#b9ee62;font-style:normal}
.hero h1 .underline svg{bottom:-8px}.hero h1 .underline svg path{stroke:#b9ee62}
.hero p.lead{font-size:clamp(.97rem,1.1vw,1.12rem);color:rgba(255,255,255,.84);max-width:620px}
.hero .primary{background:#b6eb58;color:#123b54;box-shadow:0 15px 30px rgba(48,99,35,.22)}
.hero .primary:hover{box-shadow:0 20px 36px rgba(48,99,35,.3)}
.hero .glass{background:#fff;color:#1260a7;border-color:#fff}
.heroStats{border-color:rgba(255,255,255,.2)}
.heroStats b{font-family:var(--font-body);font-weight:800}.heroStats sup{color:#b9ee62}.heroStats span{color:rgba(255,255,255,.62)}

.heroVisual{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center}
.heroPromo{position:relative;width:100%;height:620px;isolation:isolate}
.promoSlides{position:absolute;inset:0}
.promoSlide{
  --promo-color:36,199,236;position:absolute;inset:0;opacity:0;pointer-events:none;
  transform:translateX(38px) scale(.98);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.promoSlide[data-theme="blue"]{--promo-color:20,108,202}
.promoSlide[data-theme="cyan"]{--promo-color:36,199,236}
.promoSlide[data-theme="green"]{--promo-color:139,197,63}
.promoSlide[data-theme="coral"]{--promo-color:238,93,98}
.promoSlide.active{opacity:1;pointer-events:auto;transform:translateX(0) scale(1)}
.promoArtwork{position:absolute;inset:0 0 45px 0;display:flex;align-items:flex-end;justify-content:center}
.promoArtwork::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;left:50%;bottom:8%;transform:translateX(-50%);
  border-radius:50%;background:rgb(var(--promo-color));opacity:calc(var(--promo-depth) * .38);filter:blur(42px);
}
.promoArtwork::after{
  content:"";position:absolute;left:3%;right:3%;bottom:0;height:40%;
  background:linear-gradient(to top,rgba(6,65,122,var(--promo-depth)),transparent);pointer-events:none;
}
.promoArtwork img{
  position:relative;z-index:1;width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 30px 34px rgba(1,35,74,.25));
  transform:translate(var(--promo-x,0%),var(--promo-y,0%)) scale(var(--promo-scale,1));transform-origin:center bottom;
}
.promoCopy{
  position:absolute;z-index:3;right:0;bottom:36px;width:min(360px,62%);padding:19px 21px;
  border:1px solid rgba(255,255,255,.25);border-radius:20px;
  background:rgba(5,51,99,.78);backdrop-filter:blur(17px);box-shadow:0 20px 45px rgba(2,36,73,.24);
}
.promoEyebrow{display:block;color:#b9ee62;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.promoTitle{margin:6px 0 5px;font-size:clamp(1.05rem,1.5vw,1.38rem);line-height:1.08;letter-spacing:-.03em;color:#fff}
.promoBody{margin:0;color:rgba(255,255,255,.72);font-size:.73rem;line-height:1.48}
.promoCta{display:inline-flex;margin-top:11px;color:#fff;font-size:.7rem;font-weight:800;border-bottom:1px solid #b9ee62}
.promoControls{
  position:absolute;z-index:6;left:50%;bottom:4px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:99px;background:rgba(4,53,103,.55);backdrop-filter:blur(10px);
}
.promoArrow{width:31px;height:31px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.promoArrow:hover{background:#fff;color:var(--blue)}
.promoDots{display:flex;align-items:center;gap:2px}.promoDot{position:relative;width:30px;height:30px;padding:0;border:0;border-radius:99px;background:transparent;cursor:pointer}.promoDot::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);transition:.3s}.promoDot.active::after{width:22px;background:#b9ee62}.promoPause{height:31px;padding:0 11px;border:1px solid rgba(255,255,255,.25);border-radius:99px;background:transparent;color:#fff;font-size:.62rem;font-weight:700;cursor:pointer}.promoPause:hover{background:#fff;color:var(--blue)}

.heroTrackCard{
  position:absolute;z-index:8;left:-50px;bottom:28px;width:min(410px,72%);padding:22px;
  background:rgba(5,32,62,.92);border-color:rgba(255,255,255,.22);border-radius:22px;
  box-shadow:0 24px 55px rgba(1,32,65,.3);
}
.heroVisual.noPromotions{min-height:470px}.heroVisual.noPromotions .heroPromo{display:none}.heroVisual.noPromotions .heroTrackCard{position:relative;left:auto;bottom:auto;width:min(460px,100%)}
.heroTrackCardHdr{margin-bottom:10px}.heroTrackSearch{margin-bottom:13px}.heroTrackSearch input,.htcInput{height:46px}.htlInfo{padding-bottom:11px}.heroRastrearBtn{height:44px}

/* Marcas y proceso */
.marquee{background:#fff;color:#1b507d;border-color:#dfeaf3;padding:16px 0}
.marquee-track span{font-family:var(--font-body);font-style:normal;font-size:19px;font-weight:800;color:#4e7594;opacity:.72}
.marquee-track .dot{background:var(--green)}
.processSection{background:#fff;display:grid;grid-template-columns:minmax(270px,.75fr) minmax(0,1.7fr);gap:clamp(36px,6vw,92px);align-items:start}
.processIntro h2,.servicesSection .sectionTitle h2{
  font-family:var(--font-body);font-weight:800;font-size:clamp(2.2rem,3.8vw,4.4rem);line-height:1.02;letter-spacing:-.055em;color:#123b5e;margin:18px 0;
}
.processIntro h2 em,.servicesSection .sectionTitle h2 em{color:var(--green);font-style:normal}
.processIntro p{color:var(--muted);max-width:430px}
.processGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.processCard{position:relative;min-height:330px;padding:24px 19px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 38px rgba(29,92,140,.07);transition:.3s}
.processCard:hover{transform:translateY(-7px);box-shadow:var(--shadow-soft);border-color:#b9d8ec}
.processCard>span{display:block;color:#8fb0c7;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700}
.processIcon{width:52px;height:52px;display:grid;place-items:center;margin:52px 0 20px;border-radius:16px;background:var(--surface-blue);color:var(--blue);font-size:1.3rem;font-weight:800}
.processCard:nth-child(2) .processIcon,.processCard:nth-child(4) .processIcon{background:var(--surface-green);color:#5e942a}
.processCard h3{font-size:1.02rem;color:#173e5d;margin:0 0 9px}.processCard p{font-size:.8rem;color:#708597;line-height:1.6;margin:0}

.statsStrip{max-width:1400px;margin:0 auto 30px;border-radius:28px;overflow:hidden;background:linear-gradient(120deg,#0d68bd,#094b90);box-shadow:var(--shadow-soft)}
.statItem{padding:42px 22px}.statItem b{font-size:clamp(2rem,3vw,3rem);color:#b9ee62}.statItem span{color:rgba(255,255,255,.72)}

/* Cotizador y tarifas conservan lógica, con superficies más claras */
.cotizSection{background:var(--surface-blue);padding:clamp(74px,8vw,120px) clamp(18px,4vw,60px)}
.cotizHeader h2,.sectionTitle h2{font-family:var(--font-body);font-weight:800;letter-spacing:-.05em;line-height:1.02}
.cotizHeader h2 em,.sectionTitle h2 em{font-style:normal;color:var(--green)}
.productsPanel,.invoicePanel{border-radius:24px;border-color:#d7e8f3;box-shadow:0 18px 55px rgba(23,84,131,.08)}
.calcVisual{background:linear-gradient(150deg,#0d69bd,#07447f)!important;box-shadow:0 28px 65px rgba(11,76,133,.22)!important}
.panelHeader h3{font-family:var(--font-body);font-weight:800}
.addBtn{background:var(--blue);box-shadow:0 10px 24px rgba(28,141,214,.2)}
.invoiceTotal{background:linear-gradient(135deg,#0d68bd,#083b70)}

.tariffs{background:#fff;padding:clamp(74px,8vw,118px) clamp(18px,5vw,72px)}
.tariffs .sectionTitle h2{color:#143c5d;font-family:var(--font-body);font-weight:800}.tariffs .sectionTitle p{color:var(--muted)}
.tariffs .pill.dark{background:#edf7fe;border-color:#cae3f4;color:var(--blue)}
.tarifBigCard{background:#0a3763;border:0;box-shadow:0 28px 65px rgba(11,61,105,.2)}
.tarifCardHead{background:#0d68bd}.tarifCardTitle{font-family:var(--font-body);font-weight:800}

/* Mosaico de servicios */
.servicesSection{background:var(--surface-blue)}
.serviceTitle{max-width:820px}.servicesMosaic{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.serviceCard{grid-column:span 4;min-height:270px;padding:28px;border:1px solid #dbeaf3;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(18,77,124,.06);transition:.3s}
.serviceCard:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.serviceCard.servicePrimary{grid-column:span 5;background:#0e69bd;color:#fff;border-color:#0e69bd}.serviceCard.serviceWide{grid-column:span 5}.serviceCard.serviceAccent{grid-column:span 3;background:#b7eb5d;border-color:#b7eb5d}.serviceCard.serviceTint{background:#dceeff}
.serviceIcon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#eaf6fe;color:var(--blue);font-weight:900;font-size:1.15rem}
.servicePrimary .serviceIcon{background:rgba(255,255,255,.16);color:#fff}.serviceAccent .serviceIcon{background:rgba(255,255,255,.55);color:#315d25}
.serviceCard h3{font-size:1.15rem;margin:44px 0 10px;letter-spacing:-.025em;color:#173f5f}.servicePrimary h3{color:#fff}.serviceCard p{font-size:.82rem;line-height:1.6;color:#708697;min-height:65px}.servicePrimary p{color:rgba(255,255,255,.75)}.serviceAccent p{color:#46643a}
.serviceCard a{font-size:.74rem;font-weight:800;color:var(--blue)}.servicePrimary a{color:#b9ee62}.serviceAccent a{color:#315d25}

/* Dirección, contacto y pie */
.address{background:linear-gradient(120deg,rgba(8,68,127,.96),rgba(13,105,189,.82)),var(--img-address) center/cover;color:#fff}
.addressContent{max-width:1240px;margin:0 auto}.addressContent h2{font-family:var(--font-body);font-weight:800;letter-spacing:-.05em}
.addressCard,.requirements{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);box-shadow:0 22px 50px rgba(3,40,78,.16)}
.contactSection{background:#fff;padding:clamp(74px,8vw,118px) clamp(20px,5vw,72px)}
.contactCTA h2{font-family:var(--font-body);font-weight:800;color:#123b5e;letter-spacing:-.055em}.contactCTA h2 em{font-style:normal;color:var(--green)}.contactCTA p{color:var(--muted)}
.contactCTA .pill{background:#eaf7ff;border-color:#c9e6f5;color:var(--blue)}
.contactCard{background:#f7fbfe;border-color:#deebf3;backdrop-filter:none}.contactCard:hover{background:#edf8ff;border-color:#cae1f0}.contactCard h4{color:#68849a}.contactCard p{color:#34566f}
.contactMapBtn{background:#edf7fd;border-color:#cfe5f2;color:#174b72}.contactMapBtn:hover{background:#e0f1fb}
.footer{background:#0b4380;border-top:5px solid #9bd43f}.footerBrand p,.footerCol a{color:#b2cae1}.footerCol h5{color:#7fa9d1}.footerBottom p{color:#78a0c5}

@media(max-width:1180px){
  .heroShell{grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr)}
  .heroTrackCard{left:-25px;width:390px}
  .processSection{grid-template-columns:1fr}.processGrid{grid-template-columns:repeat(4,1fr)}
  .processCard{min-height:280px}.processIcon{margin-top:32px}
}

@media(max-width:900px){
  .hero{min-height:auto;padding-top:108px;padding-bottom:145px}
  .heroShell{grid-template-columns:1fr;gap:20px}.heroContent{max-width:720px}
  .heroVisual{min-height:720px}.heroPromo{height:590px}.heroTrackCard{left:4%;bottom:-45px;width:54%}
  .processGrid{grid-template-columns:1fr 1fr}.processCard{min-height:250px}
  .serviceCard,.serviceCard.servicePrimary,.serviceCard.serviceWide{grid-column:span 6}.serviceCard.serviceAccent{grid-column:span 12}
}

@media(max-width:640px){
  .nav{top:0;width:100%;padding:8px 12px 8px 16px;border-radius:0}.brand img{height:38px}.navbtn span{display:none}
  .hero{padding:91px 18px 120px}.hero::before{bottom:-210px}.hero h1{font-size:clamp(2.45rem,12vw,3.45rem)}.heroBg{background-image:var(--img-hero-mobile)}
  .hero .actions{display:grid;grid-template-columns:1fr 1fr}.hero .actions .btn{width:100%}.hero .play-link{grid-column:1/-1}
  .heroStats{gap:4px}.heroStats div{padding:0}.heroStats b{font-size:1.35rem}.heroStats span{font-size:8px}
  .heroVisual{min-height:670px;margin:0 -6px}.heroPromo{height:500px}.promoArtwork{inset:0 0 55px}.promoArtwork img{height:auto;max-height:100%;width:100%}
  .promoCopy{right:7px;bottom:32px;width:72%;padding:14px 15px}.promoBody{display:none}.promoTitle{font-size:1rem}.promoControls{bottom:0}
  .promoControls{top:6px;bottom:auto}
  .heroTrackCard{left:0;bottom:-78px;width:100%;padding:18px}.heroTrackCard .htlWrap{max-height:190px;overflow:auto}
  .heroVisual.noPromotions{min-height:430px}.heroVisual.noPromotions .heroTrackCard{left:auto;bottom:auto;width:100%}
  .processSection{padding-top:78px}.processGrid{grid-template-columns:1fr}.processCard{min-height:0;padding:21px}.processIcon{margin:24px 0 16px}
  .statsStrip{margin:0 14px 22px;border-radius:20px}.statItem{padding:28px 12px}
  .serviceCard,.serviceCard.servicePrimary,.serviceCard.serviceWide,.serviceCard.serviceAccent{grid-column:1/-1;min-height:230px}.serviceCard h3{margin-top:28px}
  .marquee-track span{font-size:15px;gap:30px}
}

/* ══════════════════════════════════════════
   BLUE BASE — TRACKING Y TIENDAS
══════════════════════════════════════════ */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Etiquetas editoriales sin cápsula decorativa. */
.hero .pill,.cotizHeader>.pill,.tariffs .pill.dark,.address .pill,.contactCTA .pill,.calcVisual>.pill{
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
  font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;
}
.hero .pill{color:rgba(255,255,255,.78)}
.hero .pill .dot{width:7px;height:7px;background:#b9ee62;box-shadow:none}

/* El hero conserva la composición azul y dedica el costado derecho a campañas. */
.hero{min-height:870px;padding-bottom:120px}
.heroShell{grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr)}
.heroVisual{min-height:610px}
.heroPromo{height:610px}
.promoCopy{right:2%;bottom:45px}

/* Tiendas con logotipos locales, sin marquee textual. */
.storeBand{padding:62px clamp(20px,5vw,72px) 72px;background:#fff;border-bottom:1px solid #e1edf4}
.storeBandIntro{display:flex;max-width:1400px;margin:0 auto 28px;align-items:flex-end;justify-content:space-between;gap:30px}
.storeBandIntro span{color:#1682cc;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.storeBandIntro b{max-width:590px;color:#173e5d;font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.15;text-align:right;letter-spacing:-.035em}
.storeRail{display:grid;max-width:1400px;margin:auto;grid-template-columns:repeat(8,minmax(115px,1fr));gap:10px}
.storeRail a{display:grid;min-height:88px;place-items:center;padding:16px;border:1px solid #e0ebf2;border-radius:16px;background:#f9fcfe;transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s}
.storeRail a:hover,.storeRail a:focus-visible{transform:translateY(-4px);border-color:#b9d7e9;box-shadow:0 14px 30px rgba(19,81,127,.1);outline:0}
.storeRail img{width:100%;max-width:122px;height:43px;object-fit:contain}

.htlLoadCode{margin-top:8px}.htlLoadMsg{margin-top:5px}

/* ═══════════════ TRACKING — vista SPA ═══════════════ */
/* Cabecera azul con la misma curva blanca de la portada. */
.trackHero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(118px,15vw,168px) clamp(20px,5vw,72px) 200px;
  color:#fff;text-align:center;
  background:radial-gradient(circle at 12% 22%,rgba(36,199,236,.2),transparent 30%),radial-gradient(circle at 88% 12%,rgba(139,197,63,.13),transparent 26%),linear-gradient(135deg,#0871cd 0%,#126ac1 52%,#09529e 100%);
}
.trackHeroCurve{position:absolute;left:-8%;right:-8%;bottom:-150px;height:290px;background:#fff;border-radius:50% 52% 0 0/45% 55% 0 0;transform:rotate(-2deg);z-index:1}
.trackHeroInner{position:relative;z-index:2;width:100%;max-width:720px}

/* ── Globo de fondo de la vista de tracking (Miami → Bolivia) ──
   Lo dibuja src/tracking-globe.js; la capa vive detrás del contenido. */
.trackingGlobe{
  position:absolute;z-index:0;top:59%;left:50%;width:min(720px,60vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 1.5s ease;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%);
          mask:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%);
}
/* Esfera de puntos CSS SIEMPRE presente como base: da contraste sobre el azul
   y garantiza un globo visible aunque WebGL no dibuje (Brave/shields, sin GPU).
   Cuando cobe sí renderiza, el planeta WebGL se dibuja encima. */
.trackingGlobe::before{content:"";position:absolute;inset:-4%;z-index:-1;border-radius:50%;
  background:
    radial-gradient(rgba(140,210,255,.8) 1.1px,transparent 1.7px) 0 0/12px 12px,
    radial-gradient(circle at 40% 33%,#0a2c4e,#06203c 46%,#041629 72%,#020d1a 100%);
  box-shadow:inset -16px -22px 52px rgba(0,6,16,.7),0 0 60px rgba(6,40,80,.3);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 64%,transparent 78%);
          mask:radial-gradient(circle at 50% 50%,#000 64%,transparent 78%);
}
.trackingGlobe.is-ready{opacity:1}
/* Con el panel de resultado abierto el globo pasa a segundo plano */
.trackHero:has(#heroTrackingResult:not([hidden])) .trackingGlobe{opacity:.62;transition:opacity .6s ease}
.trackingGlobeCanvas{display:block;width:100%;height:100%;opacity:.66}
.trackingGlobeMarkers{position:absolute;inset:0}
.tgMarker{position:absolute;width:0;height:0;will-change:opacity}
.tgDot{position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--tg-accent);box-shadow:0 0 0 2px rgba(3,25,45,.9),0 0 14px var(--tg-accent)}
.tgRing{position:absolute;top:0;left:0;width:10px;height:10px;border:2px solid var(--tg-accent);border-radius:50%;
  opacity:0;transform:translate(-50%,-50%) scale(1);animation:tgPulse 2.6s ease-out infinite}
.tgRing2{animation-delay:1.3s}
@keyframes tgPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(4.6);opacity:0}}
@media(max-width:980px){.trackingGlobe{top:50%;width:min(620px,86vw)}.trackingGlobeCanvas{opacity:.56}}
@media(max-width:640px){.trackingGlobe{top:46%;width:min(480px,96vw)}.trackingGlobeCanvas{opacity:.48}}
@media(prefers-reduced-motion:reduce){.tgRing{animation:none;opacity:.45}}
.trackingBackLink{position:absolute;top:26px;left:clamp(20px,5vw,72px);z-index:3;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:.78rem;font-weight:700}
.trackingBackLink span{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;font-size:.9rem;transition:transform .2s,background .2s}
.trackingBackLink:hover{color:#fff}.trackingBackLink:hover span{background:rgba(255,255,255,.12);transform:translateX(-3px)}
.trackHeroInner .sectionEyebrow{justify-content:center;color:#bdeefb}.trackHeroInner .sectionEyebrow::before{background:#b9ee62}
.trackHeroInner h1{margin:20px 0 16px;font-family:var(--font-body);font-size:clamp(2.6rem,6vw,5rem);font-weight:800;line-height:.98;letter-spacing:-.055em}
.trackHeroInner h1 em{color:#b9ee62;font-style:normal}
.trackHeroInner>p{max-width:520px;margin:0 auto;color:rgba(255,255,255,.72);font-size:1.02rem;line-height:1.6}

/* Barra de búsqueda minimalista (no un cuadro completo) */
.trackSearchBar{
  display:flex;align-items:center;gap:8px;width:100%;max-width:560px;margin:34px auto 0;
  padding:7px 7px 7px 18px;border-radius:99px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 50px -12px rgba(0,20,45,.5),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(16px);transition:border-color .25s,box-shadow .25s;
}
.trackSearchBar:focus-within{border-color:rgba(185,238,98,.65);box-shadow:0 20px 55px -10px rgba(0,20,45,.55),0 0 0 4px rgba(185,238,98,.12)}
.trackSearchIcon{flex:0 0 auto;color:rgba(255,255,255,.6)}
.trackSearchBar .htcInput{flex:1;height:46px;min-width:0;padding:0;border:0;background:transparent;color:#fff;font:600 .95rem 'JetBrains Mono',monospace;letter-spacing:.02em;outline:none}
.trackSearchBar .htcInput::placeholder{color:rgba(255,255,255,.42);letter-spacing:.04em}
.trackSearchBar .heroRastrearBtn{
  flex:0 0 auto;width:auto;height:46px;margin:0;padding:0 26px;border:0;border-radius:99px;
  color:#0d3b1a;font-weight:800;font-size:.86rem;letter-spacing:.02em;cursor:pointer;
  background:linear-gradient(135deg,#b9ee62,#8bc53f);
  box-shadow:0 8px 20px rgba(139,197,63,.35);transition:transform .18s,box-shadow .18s;
}
.trackSearchBar .heroRastrearBtn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(139,197,63,.45)}
.trackSearchBar .heroRastrearBtn:disabled{cursor:wait;opacity:.6;transform:none}
.trackSearchHint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:rgba(255,255,255,.5);font-size:.72rem;font-weight:600}

/* Zona de resultado: colapsada por defecto, se despliega al consultar */
#trackingView .htlWrap{
  width:100%;max-width:600px;margin:22px auto 0;padding:22px;
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  background:rgba(15,58,102,.38);box-shadow:0 24px 60px -20px rgba(0,15,35,.4);
  backdrop-filter:blur(14px);text-align:left;
  animation:htlDeploy .45s cubic-bezier(.16,1,.3,1);
}
#trackingView .htlWrap[hidden]{display:none}
@keyframes htlDeploy{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Animación de carga — planeta con la ruta Miami → Bolivia y cajas en órbita */
.htlLoadWrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;gap:20px}
.htlLoadCode{font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:700;letter-spacing:.12em;color:#bdeefb}
.htlLoadMsg{font-size:.9rem;color:rgba(255,255,255,.62);text-align:center}

/* ── Escena de carga: planeta, pulsos de ruta y cajas en órbita ──
   El markup lo genera assets/js/tracking-loader-v1.js. Todo se mueve con
   transform/opacity y las medidas cuelgan de --egl-size. */
.eglLoad{--egl-size:216px}
.eglStage{position:relative;isolation:isolate;width:var(--egl-size);height:var(--egl-size)}
.eglStage::before{
  content:"";position:absolute;z-index:0;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(36,199,236,.26),rgba(36,199,236,.07) 46%,transparent 70%);
  animation:eglHalo 2.8s ease-in-out infinite;
}
@keyframes eglHalo{0%,100%{transform:scale(.93);opacity:.6}50%{transform:scale(1.07);opacity:1}}

/* Planeta WebGL (cobe) y esfera CSS de respaldo debajo.
   cobe dibuja el globo al 80 % del canvas, así que la esfera CSS usa esa misma
   proporción para que ambos coincidan. */
.eglOrb{position:absolute;z-index:2;inset:0}
.eglOrb canvas{display:block;width:100%;height:100%;border-radius:50%;animation:eglFade .9s ease both}
@keyframes eglFade{from{opacity:0}to{opacity:1}}
.eglSphere{
  position:absolute;z-index:1;top:10%;left:10%;overflow:hidden;width:80%;height:80%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#1c7ab8,#0b4675 42%,#05294a 76%,#031a30 100%);
}
.eglSphere::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.18),transparent 44%),
             radial-gradient(circle at 72% 80%,rgba(0,10,25,.5),transparent 58%);
}
.eglSphereDots{
  position:absolute;top:0;left:0;width:200%;height:100%;
  background-image:radial-gradient(circle,rgba(150,225,255,.5) 1.1px,transparent 1.7px);background-size:9px 9px;
  animation:eglDrift 16s linear infinite;
}
@keyframes eglDrift{to{transform:translateX(-50%)}}
.eglHasGlobe .eglSphere{opacity:.42}
.eglHasGlobe .eglSphereDots{display:none}

/* Cristal del borde y arco de progreso */
.eglGlass{
  position:absolute;z-index:4;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 45%,rgba(36,199,236,.14));
  -webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87%);
          mask:radial-gradient(circle closest-side,transparent 86%,#000 87%);
}
.eglGlass::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.eglRing{
  position:absolute;z-index:5;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(36,199,236,.55) 70%,#24c7ec 82%,#b9ee62 94%,transparent 99%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 97%,#000 98%);
          mask:radial-gradient(circle closest-side,transparent 97%,#000 98%);
  animation:eglSpin 2.6s linear infinite;
}
@keyframes eglSpin{to{transform:rotate(360deg)}}

/* Pulsos sobre Miami y Bolivia (el JS los coloca siguiendo el giro del globo) */
.eglPin{position:absolute;z-index:6;top:0;left:0;width:0;height:0;opacity:0;pointer-events:none}
.eglPin i,.eglPin u{
  position:absolute;top:50%;left:50%;
  width:calc(var(--egl-size) * .2);height:calc(var(--egl-size) * .2);
  margin:calc(var(--egl-size) * -.1) 0 0 calc(var(--egl-size) * -.1);
  border:2.5px solid #4ee0f7;border-radius:50%;opacity:0;animation:eglPulse 2.1s ease-out infinite;
}
.eglPin u{animation-delay:.7s}
.eglPin b{
  position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#c9f7ff;box-shadow:0 0 0 3px rgba(3,25,45,.9),0 0 14px 3px rgba(78,224,247,.9);
}
.eglPinLime i,.eglPinLime u{border-color:#c9f77a}
.eglPinLime b{background:#eaffc0;box-shadow:0 0 0 3px rgba(3,25,45,.9),0 0 14px 3px rgba(185,238,98,.85)}
@keyframes eglPulse{0%{transform:scale(.22);opacity:.9}70%{opacity:.25}100%{transform:scale(1.35);opacity:0}}

/* Cajas de logística: cubos CSS que orbitan y pasan por delante y por detrás */
.eglBox{
  position:absolute;top:50%;left:50%;width:calc(var(--egl-size) * .13);height:calc(var(--egl-size) * .13);
  margin:calc(var(--egl-size) * -.065) 0 0 calc(var(--egl-size) * -.065);
  transform-style:preserve-3d;animation:eglOrbit 7.5s linear infinite;will-change:transform;
}
.eglBoxBody{
  position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(32deg);
  animation:eglTumble 9s linear infinite;
}
.eglFace{position:absolute;inset:0;border-radius:2px}
.eglTop{background:linear-gradient(150deg,#f6e3b8,#dcbc7d);transform:rotateX(90deg) translateZ(calc(var(--egl-size) * .065))}
.eglBottom{background:#9c7639;transform:rotateX(-90deg) translateZ(calc(var(--egl-size) * .065))}
.eglFront{background:linear-gradient(165deg,#e6c894,#c39a58);transform:translateZ(calc(var(--egl-size) * .065))}
.eglBack{background:linear-gradient(165deg,#e6c894,#c39a58);transform:rotateY(180deg) translateZ(calc(var(--egl-size) * .065))}
.eglLeft{background:linear-gradient(165deg,#b08a4e,#7a5a29);transform:rotateY(-90deg) translateZ(calc(var(--egl-size) * .065))}
.eglRight{background:linear-gradient(165deg,#b08a4e,#7a5a29);transform:rotateY(90deg) translateZ(calc(var(--egl-size) * .065))}
/* cinta de embalaje y etiqueta */
.eglTop::after,.eglFront::after{content:"";position:absolute;top:44%;right:0;left:0;height:14%;background:rgba(36,199,236,.9)}
.eglFront::before{content:"";position:absolute;top:12%;left:24%;width:52%;height:22%;border-radius:1px;background:rgba(255,255,255,.85)}
/* Los porcentajes son relativos a la caja, así que la órbita escala sola */
@keyframes eglOrbit{
  0%  {transform:translate3d(-352%,-23%,0) scale(.58);z-index:1;opacity:.5}
  25% {transform:translate3d(-15%,-250%,0) scale(.66);z-index:1;opacity:.72}
  50% {transform:translate3d(352%,-23%,0)  scale(1);z-index:7;opacity:1}
  75% {transform:translate3d(-15%,286%,0)  scale(1.12);z-index:7;opacity:1}
  100%{transform:translate3d(-352%,-23%,0) scale(.58);z-index:1;opacity:.5}
}
@keyframes eglTumble{to{transform:rotateX(-22deg) rotateY(392deg)}}

@media(prefers-reduced-motion:reduce){
  .eglStage::before,.eglRing,.eglSphereDots,.eglBox,.eglBoxBody,.eglOrb canvas,.eglPin i,.eglPin u{animation:none}
  .eglOrb canvas{opacity:1}
  .eglPin i{opacity:.55;transform:scale(1.05)}
  .eglPin u{opacity:0}
  .eglBox[data-box="0"]{transform:translate3d(-249%,-249%,0) scale(.85);opacity:.75}
  .eglBox[data-box="1"]{transform:translate3d(249%,-249%,0) scale(.85);opacity:.85}
  .eglBox[data-box="2"]{transform:translate3d(249%,249%,0) scale(1)}
  .eglBox[data-box="3"]{transform:translate3d(-249%,249%,0) scale(1)}
}

/* Sección de contenido útil (curveada al final del azul) */
.trackHelp{position:relative;background:#fff;padding:clamp(30px,5vw,60px) clamp(20px,5vw,72px) clamp(60px,7vw,90px);text-align:center}
.trackHelpHead{max-width:700px;margin:0 auto 34px}
.trackHelpHead .sectionEyebrow{justify-content:center}
.trackHelpHead h2{margin:14px 0 0;font-family:var(--font-body);font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:800;color:#123b5e;letter-spacing:-.03em}
.trackStages{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1200px;margin:0 auto}
.trackStage{position:relative;padding:22px 16px 18px;border:1px solid #e2edf5;border-radius:18px;background:linear-gradient(180deg,#f7fbfe,#fff);text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s}
.trackStage:hover{transform:translateY(-4px);border-color:#c6e2f2;box-shadow:0 16px 34px rgba(19,81,127,.1)}
.trackStage i{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;font-style:normal;font:800 .74rem 'JetBrains Mono',monospace;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.trackStage:nth-child(6) i{background:linear-gradient(135deg,#8bc53f,#5fa02a)}
.trackStage b{display:block;margin:14px 0 5px;font-size:.92rem;color:#123b5e}
.trackStage span{display:block;font-size:.75rem;line-height:1.45;color:var(--muted)}
.trackHelpCta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;margin:36px auto 0;padding:26px clamp(22px,3vw,38px);border-radius:22px;text-align:left;background:radial-gradient(circle at 90% 10%,rgba(139,197,63,.12),transparent 40%),linear-gradient(135deg,#f2f9ff,#eaf6fe);border:1px solid #d8ecf8}
.trackHelpCta b{display:block;font-size:1.05rem;color:#123b5e}
.trackHelpCta span{display:block;margin-top:4px;font-size:.85rem;color:var(--muted)}
.trackHelpCta .contactWaBtn{flex:0 0 auto}

/* ── Cambio de vista (Inicio <-> Tracking), sin scroll ── */
.viewPanel{animation:viewFadeIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.viewPanel,#trackingView .htlWrap{animation:none}}

@media(max-width:1180px){
  .storeRail{grid-template-columns:repeat(4,1fr)}
  .trackStages{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .heroVisual{min-height:590px}.heroPromo{height:590px}
  .storeBandIntro{align-items:flex-start;flex-direction:column}.storeBandIntro b{text-align:left}
}
@media(max-width:640px){
  .hero{padding-bottom:115px}.heroVisual{min-height:520px}.heroPromo{height:500px}
  .storeBand{padding:52px 16px}.storeRail{grid-template-columns:repeat(2,1fr);gap:8px}.storeRail a{min-height:76px}.storeRail img{max-width:108px;height:38px}
  .trackHero{padding:104px 16px 170px}.trackSearchBar{flex-wrap:wrap;padding:12px;border-radius:22px}.trackSearchBar .htcInput{width:100%;flex-basis:100%;height:40px;padding:0 6px}.trackSearchBar .heroRastrearBtn{width:100%;height:46px}
  .trackStages{grid-template-columns:1fr 1fr;gap:10px}
  .trackHelpCta{flex-direction:column;align-items:stretch;text-align:center}.trackHelpCta .contactWaBtn{justify-content:center}
  .eglLoad{--egl-size:168px}
}

/* Ruta comercial: curva blanca del hero y una segunda curva naranja compacta. */
.hero::before{background:#fff}
.storeBand{
  position:relative;isolation:isolate;overflow:hidden;
  padding:92px clamp(22px,5vw,72px) 82px;
  border:0;background:#fff;
}
.storeBand::before{
  content:"";position:absolute;z-index:0;left:-5%;right:-5%;top:34px;bottom:0;
  border-radius:50% 50% 0 0/72px 72px 0 0;background:
    radial-gradient(circle at 8% 100%,rgba(255,204,91,.34),transparent 27%),
    radial-gradient(circle at 92% 0,rgba(255,184,68,.3),transparent 25%),
    linear-gradient(125deg,#ef6d15 0%,#f58a1f 52%,#ff9f2f 100%);
}
.storeBand::after{
  content:"";position:absolute;z-index:1;left:50%;bottom:-220px;width:116%;height:280px;
  transform:translateX(-50%);border-radius:50% 50% 0 0/70% 70% 0 0;background:#fff;
}
.storeBandIntro{position:relative;z-index:2;display:block;max-width:860px;margin:0 auto 25px;text-align:center}
.storeBandIntro span{display:block;margin-bottom:10px;color:#fff3dc;font-size:.72rem;letter-spacing:.14em}
.storeBandIntro b{display:block;max-width:none;color:#fff;font-size:clamp(1.65rem,3vw,3rem);line-height:1.05;text-align:center;text-wrap:balance;text-shadow:0 3px 18px rgba(124,48,4,.18)}
.storeRail{position:relative;z-index:2;max-width:1420px;gap:12px;padding:13px 0 38px}
.storeRail::before{
  content:"";position:absolute;z-index:-1;left:3%;right:3%;top:56%;height:92px;
  border-top:1px solid rgba(255,255,255,.38);border-radius:50%;transform:translateY(-50%);
}
.storeRail a{
  --arc-y:0px;min-height:102px;padding:18px;border:1px solid rgba(255,255,255,.72);border-radius:20px;
  background:rgba(255,255,255,.94);box-shadow:0 17px 34px rgba(133,49,3,.16),inset 0 1px 0 #fff;
  transform:translateY(var(--arc-y));backdrop-filter:blur(12px);
}
.storeRail a:nth-child(1),.storeRail a:nth-child(8){--arc-y:25px}
.storeRail a:nth-child(2),.storeRail a:nth-child(7){--arc-y:11px}
.storeRail a:nth-child(3),.storeRail a:nth-child(6){--arc-y:1px}
.storeRail a:nth-child(4),.storeRail a:nth-child(5){--arc-y:-5px}
.storeRail a:hover,.storeRail a:focus-visible{
  transform:translateY(calc(var(--arc-y) - 7px));border-color:#fff;
  box-shadow:0 24px 44px rgba(119,42,0,.24),inset 0 1px 0 #fff;
}
.storeRail img{max-width:130px;height:48px}

@media(max-width:1180px){
  .storeBand{padding-bottom:90px}.storeRail{gap:14px;row-gap:20px}
  .storeRail a{--arc-y:0px}
  .storeRail a:nth-child(1),.storeRail a:nth-child(4),.storeRail a:nth-child(5),.storeRail a:nth-child(8){--arc-y:8px}
  .storeRail a:nth-child(2),.storeRail a:nth-child(3),.storeRail a:nth-child(6),.storeRail a:nth-child(7){--arc-y:-3px}
  .storeRail::before{display:none}
}
@media(max-width:900px){
  .heroShell{grid-template-columns:minmax(0,1fr)}
  .heroContent,.heroVisual,.heroPromo{width:100%;min-width:0}
}
@media(max-width:640px){
  .nav{left:0;right:0;width:100vw!important;max-width:100vw;transform:none}
  .hero::before{bottom:-220px;height:300px}
  .heroVisual{width:100%;margin:0}.promoCopy{right:7px;max-width:calc(100% - 14px)}
  .storeBand{padding:70px 14px 76px}.storeBand::before{top:22px;border-radius:50% 50% 0 0/42px 42px 0 0}.storeBand::after{bottom:-235px}
  .storeBandIntro{margin-bottom:20px}.storeBandIntro b{font-size:1.55rem}
  .storeRail{gap:9px;padding:6px 0 32px}.storeRail a,.storeRail a:nth-child(n){--arc-y:0px;min-height:82px;padding:13px;border-radius:16px}
  .storeRail a:nth-child(odd){--arc-y:5px}.storeRail img{max-width:110px;height:40px}
}

/* Proceso compacto: seis nodos conectados, sin tarjetas sobredimensionadas. */
.processSection{display:block;padding-top:88px;padding-bottom:92px;background:#fff}
.processIntro{max-width:760px;margin:0 auto 50px;text-align:center}
.processIntro .sectionEyebrow{justify-content:center}.processIntro h2{font-size:clamp(2.35rem,4vw,4.5rem);margin:16px 0 13px}.processIntro p{max-width:620px;margin:auto}
.processGrid{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;max-width:1420px;margin:auto}
.processGrid::before,.processGrid::after{content:"";position:absolute;z-index:0;top:58px;left:8.33%;right:8.33%;height:2px;border-radius:99px}
.processGrid::before{background:#d9e8f1}.processGrid::after{background:linear-gradient(90deg,#1688d2,#24c7ec 45%,#8bc53f);transform:scaleX(0);transform-origin:left;transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.processGrid.routeVisible::after{transform:scaleX(1)}
.processCard{position:relative;z-index:1;min-height:0;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;transition:none}
.processCard:hover{transform:none;border:0;box-shadow:none}.processCard>span{height:20px;color:#80a6bf;font:700 .66rem 'JetBrains Mono',monospace}
.processIcon{display:grid;width:66px;height:66px;margin:5px auto 17px;place-items:center;border:6px solid #fff;border-radius:50%;color:#087dc7;background:#e7f6fd;box-shadow:0 0 0 1px #cfe5f2,0 10px 24px rgba(26,111,168,.12);transition:transform .25s ease,background .25s,color .25s}
.processIcon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.processCard:nth-child(2) .processIcon,.processCard:nth-child(5) .processIcon{color:#257e45;background:#ecf8e5}
.processCard:nth-child(3) .processIcon,.processCard:nth-child(6) .processIcon{color:#c86112;background:#fff1df}
.processCard:hover .processIcon{transform:translateY(-4px) scale(1.04);color:#fff;background:#1488d0}.processCard:nth-child(6):hover .processIcon{background:#82bd36}
.processCard h3{margin:0 0 8px;color:#163e5d;font-size:.94rem;line-height:1.25}.processCard p{margin:0;color:#71889a;font-size:.73rem;line-height:1.55}
.processTag{display:inline-flex;margin-top:10px;padding:4px 8px;border-radius:99px;color:#187ebc;background:#eaf6fd;font-size:.57rem;font-weight:800}.processTagWa{color:#157442;background:#e5f8eb}
.processIntro{margin-bottom:26px}
.processModeSwitch{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:880px;margin:0 auto 45px;padding:7px;border:1px solid #dceaf3;border-radius:22px;background:#eef7fc}
.processModeBtn{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;padding:14px 17px;border:0;border-radius:16px;color:#41647c;background:transparent;text-align:left;transition:background .22s,color .22s,box-shadow .22s}
.processModeBtn i{display:grid;grid-row:1/3;width:38px;height:38px;place-items:center;border-radius:12px;color:#1684cc;background:#dff2fc;font:700 .62rem 'JetBrains Mono',monospace}.processModeBtn b{align-self:end;color:#173f5e;font-size:.84rem}.processModeBtn span{align-self:start;margin-top:2px;font-size:.65rem;line-height:1.35}
.processModeBtn.active{color:rgba(255,255,255,.68);background:linear-gradient(135deg,#0e75c4,#09538f);box-shadow:0 10px 24px rgba(11,93,153,.2)}.processModeBtn.active b{color:#fff}.processModeBtn.active i{color:#1a5a2d;background:#b9ee62}
.processPanel{display:none}.processPanel.active{display:block;animation:processPanelIn .32s ease both}@keyframes processPanelIn{from{opacity:0;transform:translateY(6px)}}
.processPanel .processTag[href]{text-decoration:none;cursor:pointer}.directProcessGrid .processCard:nth-child(2) .processIcon,.directProcessGrid .processCard:nth-child(5) .processIcon{color:#257e45;background:#ecf8e5}

@media(max-width:1100px) and (min-width:761px){
  .processGrid{grid-template-columns:repeat(3,1fr);gap:34px 18px}.processGrid::before,.processGrid::after{display:none}
  .processCard{padding:18px 15px;border:1px solid #e0ecf3;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(25,83,124,.06)}
  .processCard::after{content:"";position:absolute;top:67px;right:-19px;width:20px;height:2px;background:#b9dceb}.processCard:nth-child(3n)::after{display:none}
}
@media(max-width:760px){
  .processSection{padding:72px 18px}.processIntro{margin-bottom:34px;text-align:left}.processIntro .sectionEyebrow{justify-content:flex-start}.processIntro h2{font-size:2.6rem}
  .processGrid{display:flex;flex-direction:column;gap:5px}.processGrid::before,.processGrid::after{top:35px;bottom:35px;left:32px;right:auto;width:2px;height:auto;transform-origin:top}.processGrid::after{transform:scaleY(0)}.processGrid.routeVisible::after{transform:scaleY(1)}
  .processCard{display:grid;grid-template-columns:66px 1fr;grid-template-rows:auto auto auto;column-gap:15px;padding:9px 0;text-align:left}
  .processCard>span{position:absolute;left:22px;top:35px;z-index:2;width:20px;height:20px;color:#fff;text-align:center;font-size:.5rem;line-height:20px;pointer-events:none}
  .processIcon{grid-column:1;grid-row:1/4;width:64px;height:64px;margin:0;border-width:5px}.processIcon svg{width:23px;height:23px;opacity:.22}
  .processCard h3{grid-column:2;margin:3px 0 4px}.processCard p{grid-column:2}.processTag{grid-column:2;width:max-content;margin-top:7px}
  .processModeSwitch{grid-template-columns:1fr;margin-bottom:28px}.processModeBtn{padding:12px}.processModeBtn span{font-size:.62rem}
}

/* Servicios como una plataforma única y compacta. */
.servicesSection{display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:clamp(34px,5vw,76px);align-items:center;padding-top:82px;padding-bottom:82px;background:linear-gradient(135deg,#edf8ff,#e5f3fb)}
.servicesSection .serviceTitle{max-width:480px;margin:0;text-align:left}.servicesSection .serviceTitle h2{font-size:clamp(2.5rem,4.4vw,4.8rem);margin:17px 0 15px}.servicesSection .serviceTitle p{max-width:430px}
.servicesMosaic{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:none;margin:0;padding:14px;border:1px solid rgba(255,255,255,.24);border-radius:30px;background:linear-gradient(145deg,#0b68b5,#073862);box-shadow:0 28px 70px rgba(9,71,119,.2);counter-reset:service}
.serviceCard,.serviceCard.servicePrimary,.serviceCard.serviceWide,.serviceCard.serviceAccent{position:relative;display:flex;grid-column:auto;min-height:198px;flex-direction:column;padding:20px;border:1px solid rgba(255,255,255,.68);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:none;counter-increment:service;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.serviceCard::after{content:"0" counter(service);position:absolute;top:17px;right:18px;color:#9db4c4;font:700 .58rem 'JetBrains Mono',monospace}
.serviceCard.servicePrimary{color:#fff;border-color:rgba(255,255,255,.14);background:linear-gradient(145deg,#1485d5,#0960a9)}.serviceCard.serviceTint{background:#e8f7ff}.serviceCard.serviceAccent{color:#183f54;border-color:#c6ee7d;background:linear-gradient(145deg,#c4f26f,#a8df42)}
.serviceCard:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 14px 30px rgba(1,31,56,.17)}
.serviceCard .serviceIcon{display:grid;width:43px;height:43px;flex:0 0 auto;place-items:center;margin:0 0 20px;border:0;border-radius:13px;color:#0d83ca;background:#e9f6fd}
.serviceCard .serviceIcon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.servicePrimary .serviceIcon{color:#fff;background:rgba(255,255,255,.15)}.serviceAccent .serviceIcon{color:#376725;background:rgba(255,255,255,.48)}
.serviceCard h3,.servicePrimary h3{margin:0 0 7px;color:#173f5f;font-size:.96rem;line-height:1.25}.servicePrimary h3{color:#fff}.serviceCard p{min-height:0;margin:0 0 14px;color:#708697;font-size:.72rem;line-height:1.5}.servicePrimary p{color:rgba(255,255,255,.7)}.serviceAccent p{color:#47683b}
.serviceCard a{display:inline-flex;align-items:center;margin-top:auto;color:#0b83cf;font-size:.68rem;font-weight:800}.servicePrimary a{color:#c9f477}.serviceAccent a{color:#315f25}

@media(max-width:1100px){
  .servicesSection{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}.servicesSection .serviceTitle{max-width:760px;text-align:center;margin:auto}.servicesSection .serviceTitle p{max-width:620px;margin:auto}.servicesSection .serviceTitle .sectionEyebrow{justify-content:center}
}
@media(max-width:760px){
  .servicesSection{padding:68px 14px}.servicesSection .serviceTitle{text-align:left}.servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start}.servicesSection .serviceTitle h2{font-size:2.55rem}
  .servicesMosaic{grid-template-columns:1fr;padding:9px;gap:7px;border-radius:22px}
  .serviceCard,.serviceCard.servicePrimary,.serviceCard.serviceWide,.serviceCard.serviceAccent{display:grid;grid-template-columns:46px 1fr auto;grid-template-rows:auto auto auto;min-height:0;padding:15px;column-gap:12px;border-radius:15px}
  .serviceCard::after{top:15px;right:15px}.serviceCard .serviceIcon{grid-column:1;grid-row:1/4;width:42px;height:42px;margin:0}.serviceCard h3,.servicePrimary h3{grid-column:2;margin:1px 25px 4px 0}.serviceCard p{grid-column:2/4;margin:0 0 8px}.serviceCard a{grid-column:2/4;width:max-content;margin:0}
}

/* ══════════════════════════════════════════════════════════════════════
   IDENTIDAD DE MARCA · TRACKING EN PORTADA · BANDA DE ANUNCIOS
   ─────────────────────────────────────────────────────────────────────
   Capa final (gana por orden de cascada). Todo el color de esta capa sale
   de los seis tokens de marca de abajo, así que cambiarlos desde el panel
   de administración repinta el sitio entero — no hay colores sueltos.

   Composición:
   1. El hero deja ver su foto de fondo: el color plano que la tapaba es
      ahora un velo oscuro translúcido con opacidad regulable.
   2. El buscador de tracking vive al costado del hero.
   3. El carrusel de promociones baja a una banda oscura de anuncios con
      imagen fija (parallax).
══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── TOKENS DE MARCA — los seis que edita el panel ────────────────── */
  --brand:#ec3d8b;         /* Color principal (botones, acentos, gradientes) */
  --brand-deep:#8d1150;    /* Versión profunda (fin de gradientes, fondos)   */
  --accent:#ff8a1f;        /* Acento secundario (títulos em, arranque CTA)   */
  /* Negro neutro. Un negro con carga de azul (#0a0910) tiñe de violeta las
     fotos que lleva debajo, y se nota justo donde el velo es más denso. */
  --night:#0b0b0c;         /* Negro de los fondos oscuros                    */
  --hero-veil:88%;         /* Cuánto se oscurece la foto del hero            */
  --ads-veil:88%;          /* Cuánto se oscurece la foto de anuncios         */
  --btn-strength:82%;      /* Intensidad del color de los botones           */
  /* Azul oscuro de los bloques grandes (cotizador, franja de números,
     mosaico de servicios). El color de marca satura cuando ocupa superficies
     así de grandes; queda para botones, íconos y acentos. */
  --deep:#12203a;

  /* ── DERIVADOS ────────────────────────────────────────────────────────
     Cada uno lleva primero un valor literal y encima la mezcla real: los
     navegadores sin color-mix() se quedan con el literal y el sitio no se
     rompe, los modernos siguen al token. */
  --brand-strong:#d32d7c;  --brand-strong:color-mix(in srgb,var(--brand) 72%,var(--brand-deep));
  --brand-pale:#ff9ac7;    --brand-pale:color-mix(in srgb,var(--brand) 62%,#fff);
  --brand-soft:#fdeaf3;    --brand-soft:color-mix(in srgb,var(--brand) 11%,#fff);
  /* El fondo de las secciones claras sale del azul, no del rosa: teñido de
     rosa, sumado a los bloques y los botones, hacía ver la página entera de
     un solo color. */
  --brand-tint:#f5f7fa;    --brand-tint:color-mix(in srgb,var(--deep) 5%,#fff);
  --brand-line:#f5d9e6;    --brand-line:color-mix(in srgb,var(--brand) 17%,#fff);
  --brand-ink:#3a1226;     --brand-ink:color-mix(in srgb,var(--brand-deep) 36%,#0d0407);
  /* El acento sobre fondo claro tiene que aguantar 3:1 en texto grande. Al 78 %
     se quedaba en 2.4 sobre la foto del cotizador (y 3.09 sobre blanco puro);
     al 55 % sube a 3.3-4.3 sin dejar de leerse naranja. */
  --accent-ink:#c36011;    --accent-ink:color-mix(in srgb,var(--accent) 55%,#7a2c00);
  --accent-pale:#ffd9a8;   --accent-pale:color-mix(in srgb,var(--accent) 45%,#fff);
  --night-2:#14121a;       --night-2:color-mix(in srgb,var(--night) 92%,#fff);
  --night-3:#191521;       --night-3:color-mix(in srgb,var(--night) 86%,#fff);
  /* Rosa apagado contra el negro, para los acentos que sí llevan marca. */
  --brand-shade:#4a0d2c;   --brand-shade:color-mix(in srgb,var(--brand-deep) 58%,var(--night));
  /* Los bloques grandes degradan del azul oscuro hacia el negro. */
  --deep-2:#0b1220;        --deep-2:color-mix(in srgb,var(--deep) 55%,var(--night));
  --deep-line:#24365a;     --deep-line:color-mix(in srgb,var(--deep) 78%,#fff);
  --deep-soft:#b9c6dd;     --deep-soft:color-mix(in srgb,var(--deep) 28%,#fff);

  /* Relleno de los botones: color plano, no degradado. --btn-strength lo
     acerca al negro para bajarle la intensidad sin cambiar el tono, y es lo
     que regula el deslizador del panel. */
  --btn-bg:#b52a69;        --btn-bg:color-mix(in srgb,var(--brand-strong) var(--btn-strength),var(--night));
  --btn-bg-hover:#cc3277;  --btn-bg-hover:color-mix(in srgb,var(--btn-bg) 86%,#fff);
  --btn-line:#d64d84;      --btn-line:color-mix(in srgb,var(--btn-bg) 78%,#fff);

  /* Transparencias derivadas (glows, velos y bordes sobre fondo oscuro) */
  --brand-glow:rgba(236,61,139,.4);  --brand-glow:color-mix(in srgb,var(--brand) 40%,transparent);
  --brand-film:rgba(236,61,139,.16); --brand-film:color-mix(in srgb,var(--brand) 16%,transparent);
  --brand-edge:rgba(236,61,139,.3);  --brand-edge:color-mix(in srgb,var(--brand) 30%,transparent);
  --brand-cast:rgba(141,17,80,.5);   --brand-cast:color-mix(in srgb,var(--brand-deep) 50%,transparent);
  --accent-glow:rgba(255,138,31,.26);--accent-glow:color-mix(in srgb,var(--accent) 26%,transparent);
  --night-cast:rgba(10,9,16,.85);    --night-cast:color-mix(in srgb,var(--night) 85%,transparent);

  /* Velo del hero: tres paradas del mismo negro, cada vez más leve, para
     que el texto se lea a la izquierda y la foto respire a la derecha. */
  --veil-1:rgba(10,9,16,.88); --veil-1:color-mix(in srgb,var(--night) var(--hero-veil),transparent);
  --veil-2:rgba(10,9,16,.65); --veil-2:color-mix(in srgb,var(--night) calc(var(--hero-veil) * .74),transparent);
  --veil-3:rgba(10,9,16,.41); --veil-3:color-mix(in srgb,var(--night) calc(var(--hero-veil) * .47),transparent);
  --ads-veil-1:rgba(10,9,16,.88); --ads-veil-1:color-mix(in srgb,var(--night) var(--ads-veil),transparent);
  --ads-veil-2:rgba(10,9,16,.7);  --ads-veil-2:color-mix(in srgb,var(--night) calc(var(--ads-veil) * .8),transparent);

  /* ── ALIAS DE COMPATIBILIDAD ──────────────────────────────────────────
     El resto de styles.css (≈1900 líneas anteriores) sigue pidiendo estas
     variables. Se enganchan a los tokens para que no queden colores del
     tema anterior sueltos por el sitio. */
  --cyan:var(--brand);--cyan-deep:var(--brand-strong);--cyan-soft:var(--brand-soft);
  --blue:var(--brand-strong);--orange:var(--accent);
  --coral:var(--brand);--red:var(--brand);--dark:var(--night);
  --surface-blue:var(--brand-tint);--line:var(--brand-line);
  --shadow-soft:0 24px 60px var(--brand-cast);
  --img-anuncios:url('assets/fondo3.webp');
}

.scrollbar{background:linear-gradient(90deg,var(--accent),var(--brand) 55%,var(--brand-strong));box-shadow:0 0 14px var(--brand-glow)}

/* ── Barra superior: cristal oscuro, no un bloque de color ──
   El rosa sólido competía con la portada. Ahora es el mismo negro del fondo
   a media opacidad con desenfoque, así el nav se apoya en la foto en vez de
   taparla. El fallback opaco cubre a los navegadores sin backdrop-filter,
   donde un fondo translúcido dejaría el texto ilegible. */
.nav{
  background:var(--night);
  background:color-mix(in srgb,var(--night) 72%,transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 34px color-mix(in srgb,var(--night) 55%,transparent);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav{backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}
}
.navlinks a{color:rgba(255,255,255,.76)}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.09)}
.navlinks a::after{background:var(--accent)}
/* Sin placa: el logotipo usa la variante para fondos oscuros
   (assets/logo-elemental-dark.webp), con el texto en blanco. El azul original
   daba 4.30:1 sobre el nav negro y por eso antes necesitaba un recuadro. */
.brand{background:none;box-shadow:none;padding:4px 8px;border-radius:12px}
.brand img{height:44px;max-width:210px;transition:opacity var(--t)}
/* La rotación del tema anterior se apoyaba en la placa; sin ella queda torpe */
.brand:hover img{transform:none;opacity:.82}
.footerBrand img{filter:none}
/* WhatsApp: verde de su marca, en versión sobria para no gritar sobre el negro */
.navbtn-wa{
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.42);
  color:#5bf0a0!important;box-shadow:none;backdrop-filter:blur(6px);
}
.navbtn-wa:hover{background:rgba(37,211,102,.24);border-color:rgba(37,211,102,.7);color:#7ff7b6!important;box-shadow:none;transform:translateY(-1px)}
.mobileMenu{background:color-mix(in srgb,var(--night) 96%,transparent)}
.hamburger span{background:#fff}

/* ── Botones: color plano y regulado ──
   Sin degradado: un relleno sólido rebajado hacia el negro (--btn-strength)
   se lee más caro que el arcoíris naranja→rosa de antes, y el deslizador del
   panel permite subirlo o bajarlo sin tocar el tono de marca. */
.btn.primary,.hero .primary,.tarifCardFoot .btn.primary,.adPromo .promoCta,
.addBtn,.trackSearchBar .heroRastrearBtn{
  background:var(--btn-bg);
  color:#fff;
  border:1px solid var(--btn-line);
  box-shadow:0 8px 22px -12px color-mix(in srgb,var(--night) 80%,transparent),
             inset 0 1px 0 rgba(255,255,255,.14);
  transition:background var(--t),border-color var(--t),box-shadow var(--t),transform var(--t) var(--ease-out);
}
.btn.primary:hover,.hero .primary:hover,.adPromo .promoCta:hover,
.addBtn:hover,.trackSearchBar .heroRastrearBtn:hover{
  background:var(--btn-bg-hover);
  border-color:color-mix(in srgb,var(--btn-bg) 62%,#fff);
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--night) 84%,transparent),
             inset 0 1px 0 rgba(255,255,255,.2);
}
/* El barrido de brillo pertenecía al acabado degradado; sin él sobra. */
.primary::after{display:none}
/* Botón secundario del hero: cristal, a juego con el nav y la tarjeta */
.hero .glass{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);
  color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hero .glass:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.play-circle{border-color:rgba(255,255,255,.32)}
.play-link:hover .play-circle{background:#fff;color:var(--night);border-color:#fff}
.trackSearchBar:focus-within{border-color:var(--brand-edge);box-shadow:0 20px 55px -10px var(--night-cast),0 0 0 4px var(--brand-film)}

/* ── HERO: la foto se ve, el velo solo la matiza ── */
.hero{background:var(--night)}
.heroBg{
  z-index:0;opacity:1;mix-blend-mode:normal;
  background:
    radial-gradient(ellipse 62% 54% at 96% 2%,rgba(22,188,225,.27) 0%,rgba(22,188,225,.09) 43%,transparent 72%),
    radial-gradient(ellipse 48% 52% at 52% 55%,rgba(113,190,73,.2) 0%,rgba(113,190,73,.07) 45%,transparent 73%),
    radial-gradient(ellipse 48% 42% at 4% 96%,rgba(218,52,113,.3) 0%,rgba(218,52,113,.1) 44%,transparent 74%),
    radial-gradient(ellipse 42% 38% at 96% 91%,rgba(255,111,38,.2) 0%,rgba(255,111,38,.06) 46%,transparent 75%),
    linear-gradient(108deg,var(--veil-1) 0%,var(--veil-2) 44%,var(--veil-3) 100%),
    var(--img-hero) center/cover no-repeat;
}
.heroBg::after{opacity:.3}
/* La curva de transición ya no cuelga del hero: .adBand crea su propio contexto
   de apilamiento (isolation:isolate) y la cortaba en seco, dejando un borde
   duro sobre la foto. Ahora vive dentro de la banda —ver .adBand::before— y se
   dibuja entera. */
.hero::before{display:none}
/* Sobre la foto no va ningún halo de color: teñía el velo y lo ensuciaba.
   Los orbes quedan como un brillo tenue, casi sin color, para que el toggle
   de animaciones del panel siga teniendo algo que apagar. */
.hero::after{display:none}
.hero .orb.o1{
  width:620px;height:620px;right:-160px;top:-190px;opacity:.42;
  background:radial-gradient(circle,rgba(31,201,235,.42),rgba(31,201,235,.12) 42%,transparent 72%);
}
.hero .orb.o2{
  width:520px;height:520px;left:-190px;bottom:-170px;opacity:.45;
  background:radial-gradient(circle,rgba(224,56,119,.44),rgba(224,56,119,.12) 42%,transparent 72%);
}
.hero .orb.o3{
  display:block;width:500px;height:500px;left:43%;top:32%;opacity:.3;
  background:radial-gradient(circle,rgba(119,196,76,.4),rgba(119,196,76,.1) 42%,transparent 72%);
}
.hero h1 em,.trackHeroInner h1 em{color:var(--accent)}
.hero h1 .underline svg path{stroke:var(--accent)}
.heroStats sup{color:var(--accent)}
.hero .pill .dot{background:var(--accent)}
.trackHeroInner .sectionEyebrow{color:var(--brand-pale)}
/* Mismo acento en los títulos de las secciones claras. `.tariffs .sectionTitle
   h2 em` necesita esa especificidad para ganarle a la regla de tarifas. */
.tariffs .sectionTitle h2 em,.processIntro h2 em,.servicesSection .sectionTitle h2 em,.cotizHeader h2 em,.contactCTA h2 em{color:var(--accent-ink);font-style:normal}
.sectionEyebrow::before{background:var(--accent-ink)}

/* ── Buscador de tracking al costado del hero ── */
.heroVisual{min-height:0;align-items:center;justify-content:flex-end}
.heroTrackCard{
  position:relative;z-index:3;left:auto;bottom:auto;width:100%;max-width:540px;margin-left:auto;
  padding:clamp(24px,2.6vw,36px);
  border:0;border-radius:30px;color:#fff;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
.heroTrackCard::before{
  content:"";position:absolute;z-index:-1;inset:0;border:1px solid rgba(225,228,234,.36);
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,16,.86) 0%,rgba(17,19,24,.7) 28%,rgba(23,25,30,.4) 56%,rgba(24,26,30,.14) 78%,rgba(18,19,22,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.82) 58%,rgba(0,0,0,.36) 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.82) 58%,rgba(0,0,0,.36) 78%,transparent 100%);
}
.heroTrackEyebrow{display:block;color:var(--brand-pale);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.heroTrackTitle{margin:12px 0 10px;font-family:var(--font-body);font-weight:800;font-size:clamp(1.5rem,2.2vw,2.15rem);line-height:1.05;letter-spacing:-.04em;color:#fff}
.heroTrackLead{margin:0;color:rgba(255,255,255,.66);font-size:.88rem;line-height:1.55}
.heroTrackCard .trackSearchBar{
  max-width:none;margin:22px 0 0;border-color:rgba(225,228,234,.22);
  background:linear-gradient(180deg,rgba(54,57,64,.58),rgba(35,37,43,.2));box-shadow:none;
}
.heroTrackCard .trackSearchBar:focus-within{border-color:rgba(225,228,234,.38);box-shadow:none}
.heroTrackCard .trackSearchHint{justify-content:flex-start;margin-top:12px;text-align:left}
.homeTrackingStage{position:relative;height:440px;margin:-10px 0 -42px;overflow:hidden}
.heroTrackCard .trackingGlobeHome{
  position:absolute;z-index:1;top:0;left:50%;width:min(100%,440px);margin:0;
  max-height:none;overflow:visible;transform:translateX(-50%) scale(1);filter:blur(0);opacity:0;
  transition:opacity .48s ease,transform .58s var(--ease-out),filter .48s ease;
}
.heroTrackCard .trackingGlobeHome.is-ready{opacity:.88}
.heroTrackCard.isTrackingLoading .trackingGlobeHome.is-ready{opacity:1;animation:homeGlobeSeeking 1.8s ease-in-out infinite}
@keyframes homeGlobeSeeking{0%,100%{transform:translateX(-50%) scale(.97)}50%{transform:translateX(-50%) scale(1.02)}}
.heroTrackCard.isTrackingResolved .trackingGlobeHome{
  opacity:0;transform:translateX(-50%) scale(1.09);filter:blur(10px);animation:none;
}
.heroTrackCard .trackingGlobeHome::before{z-index:0}
.heroTrackCard .trackingGlobeHome .trackingGlobeCanvas{position:relative;z-index:1;opacity:.82}
.heroTrackCard .trackingGlobeHome .trackingGlobeMarkers{z-index:3}
.heroTrackCard .trackingGlobeHome::after{
  content:"";position:absolute;inset:7%;z-index:2;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 46%,rgba(25,26,30,.1) 72%,rgba(18,19,22,.28) 100%);
}
.heroTrackCard .htlWrap{
  position:absolute;z-index:4;inset:22px 0 20px;margin:0;padding:0;max-height:none;overflow:auto;
  border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;
}
.heroTrackCard .htlWrap[hidden]{display:none}
.heroTrackCard .homeTrackingLoad{display:flex;align-items:flex-end;justify-content:center;overflow:visible;padding-bottom:12px}
.homeTrackingLoadStatus{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;
  color:rgba(255,255,255,.66);font-size:.76rem;text-align:center;animation:homeTrackingStatusIn .4s ease both;
}
.homeTrackingLoadStatus b{color:var(--brand-pale);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.homeTrackingLoadPulse{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:homeTrackingPulse 1.35s ease-out infinite}
@keyframes homeTrackingPulse{70%,100%{box-shadow:0 0 0 10px transparent}}
@keyframes homeTrackingStatusIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.heroTrackCard .homeTrackingFinal{animation:homeTrackingResultIn .78s .42s var(--ease-out) both}
@keyframes homeTrackingResultIn{from{opacity:0;transform:translate3d(0,30px,0) scale(.985)}to{opacity:1;transform:none}}
/* Resultado de portada: línea de tiempo formal, completa y sin scrollbar. */
.heroTrackCard .homeTrackingFinal{inset:18px 8px 14px;overflow:hidden;padding:0 8px}
.homeTrackingFinal .htlCurrentCard{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 10px;padding:0 0 11px;border:0!important;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  background:transparent!important;box-shadow:none!important;overflow:visible;
}
.homeTrackingFinal .htlCurrentCard::before{display:none}
.homeTrackingFinal .htlCurrentLeft{gap:9px;min-width:0}
.homeTrackingFinal .htlCurrentLeft::before{
  content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--glow,#24c7ec);
  box-shadow:0 0 12px color-mix(in srgb,var(--glow,#24c7ec) 62%,transparent);
}
.homeTrackingFinal .htlCurrentIcon{display:none}
.homeTrackingFinal .htlCurrentLabel{font-size:.82rem;font-weight:750;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.homeTrackingFinal .htlCurrentCode{flex:0 0 auto;margin:0;color:rgba(255,255,255,.48);font-size:.59rem}
.homeTrackingFinal .htlExtraLine{
  display:inline-flex;margin:0 16px 10px 0;color:rgba(255,255,255,.48);font-size:.65rem;
}
.homeTrackingFinal .htlExtraIcon{font-size:.72rem;filter:grayscale(.35)}
.homeTrackingFinal .etlTrack{
  --etl-node:24px;--etl-col-gap:14px;--etl-row-gap:15px;
  --etl-ring:rgba(255,255,255,.34);--etl-line:rgba(255,255,255,.2);
  --etl-done:#8de9b1;--etl-done-ring:rgba(141,233,177,.68);
  --etl-done-fill:rgba(45,170,101,.13);--etl-done-line:rgba(141,233,177,.46);
  margin:7px 0 0;
}
.homeTrackingFinal .etlStep{isolation:isolate;align-items:start;padding-left:9px;padding-right:8px}
.homeTrackingFinal .etlStep::after{
  content:"";position:absolute;z-index:0;left:0;right:0;top:-7px;bottom:7px;border-radius:10px;
  background:linear-gradient(90deg,rgba(5,7,11,.88) 0%,rgba(10,13,19,.62) 48%,rgba(10,13,19,.16) 82%,transparent 100%);
  border-left:2px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.homeTrackingFinal .etlStep.is-done::after{
  background:linear-gradient(90deg,rgba(5,18,14,.92) 0%,rgba(8,29,21,.62) 48%,rgba(8,29,21,.13) 82%,transparent 100%);
  border-left-color:rgba(141,233,177,.52);
}
.homeTrackingFinal .etlStep.is-current::after{
  background:linear-gradient(90deg,color-mix(in srgb,var(--etl-accent,#8b5cf6) 22%,rgba(5,7,11,.96)) 0%,rgba(20,14,38,.68) 50%,rgba(20,14,38,.14) 84%,transparent 100%);
  border-left-color:var(--etl-accent,#8b5cf6);
}
.homeTrackingFinal .etlStep.is-pending::after{opacity:.72}
.homeTrackingFinal .etlStep:not(:last-child)::before{z-index:1;top:27px;bottom:-3px;left:21px;width:1px;margin-left:-.5px}
.homeTrackingFinal .etlNode{z-index:2;border-width:1.5px;background:rgba(6,9,13,.68)}
.homeTrackingFinal .etlBody{position:relative;z-index:2;padding-top:2px}
.homeTrackingFinal .etlStep.is-done .etlNode{box-shadow:none}
.homeTrackingFinal .etlIcon{width:12px;height:12px}
.homeTrackingFinal .etlStep.is-current .etlNode{box-shadow:0 0 0 3px var(--etl-fill),0 0 14px var(--etl-glow)}
.homeTrackingFinal .etlStep.is-current .etlNode::before{width:8px;height:8px}
.homeTrackingFinal .etlTitle{font-size:.87rem;font-weight:750;line-height:1.16;letter-spacing:-.01em}
.homeTrackingFinal .etlMeta{margin-top:3px;font-size:.64rem;font-weight:550;line-height:1.2;color:rgba(255,255,255,.55)}
.homeTrackingFinal .etlStep.is-pending .etlTitle{color:rgba(255,255,255,.58);font-weight:650}
.homeTrackingFinal .etlStep.is-pending .etlMeta{color:rgba(255,255,255,.34)}
.homeTrackingFinal .htl-reveal{animation-name:homeTimelineReveal;animation-duration:.58s}
@keyframes homeTimelineReveal{
  from{opacity:0;transform:translate3d(18px,0,0);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.homeGlobeParticles{position:absolute;z-index:3;inset:0;pointer-events:none}
.homeGlobeParticles i{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;opacity:0;
  background:#78e8ff;box-shadow:0 0 10px rgba(36,199,236,.9);
}
.homeGlobeParticles i:nth-child(3n){width:8px;height:2px;border-radius:4px;background:var(--brand-pale)}
.homeGlobeParticles i:nth-child(4n){width:3px;height:9px;border-radius:4px;background:#fff}
.heroTrackCard.isTrackingResolved .homeGlobeParticles i{
  animation:homeGlobeDisperse .62s var(--pd) cubic-bezier(.18,.78,.3,1) both;
}
@keyframes homeGlobeDisperse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  14%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(1.35) rotate(160deg)}
}
.heroTrackMore{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--brand-pale);font-size:.76rem;font-weight:800}
.heroTrackMore span{transition:transform .2s}
.heroTrackMore:hover{color:#fff}.heroTrackMore:hover span{transform:translateX(4px)}
/* Al pulsar "Rastrear mi paquete" la tarjeta se señala sola */
.heroTrackCard.isCalled{animation:htcCall .9s var(--ease-out)}
@keyframes htcCall{
  0%  {box-shadow:0 0 0 0 var(--brand-glow),0 40px 80px -30px rgba(0,0,0,.85)}
  70% {box-shadow:0 0 0 18px transparent,0 40px 80px -30px rgba(0,0,0,.85)}
  100%{box-shadow:0 0 0 0 transparent,0 40px 80px -30px rgba(0,0,0,.85)}
}
@media(prefers-reduced-motion:reduce){.heroTrackCard.isCalled,.heroTrackCard .htlWrap,.heroTrackCard .trackingGlobeHome{animation:none;transition:none}}

/* ══════════════ BANDA DE ANUNCIOS ══════════════
   Fondo oscuro con una imagen fija: al hacer scroll el contenido corre y la
   foto se queda, que es el efecto pedido. En móvil se fija con `scroll`
   porque iOS ignora `fixed` y además cuesta batería. */
.adBand{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(150px,15vw,210px) clamp(20px,5vw,72px) clamp(170px,17vw,240px);
  color:#fff;background:var(--night);
}
/* Curva blanca de entrada: cierra el hero y abre la banda. Va aquí y no al pie
   del hero porque .adBand recorta a sus hijos y crea contexto propio; colgada
   del hero se cortaba en seco. El padding-top de arriba le deja sitio. */
.adBand::before{
  content:"";position:absolute;z-index:2;left:-8%;right:-8%;top:-190px;height:280px;
  background:#fff;border-radius:0 0 50% 52%/0 0 45% 55%;transform:rotate(-2deg);pointer-events:none;
}
.adBandBg{
  position:absolute;inset:0;z-index:0;
  background:var(--img-anuncios) center/cover no-repeat fixed;
}
/* Velo de negro puro: sin tintes de color encima de la foto. */
.adBandBg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ads-veil-1) 0%,var(--ads-veil-2) 42%,var(--ads-veil-1) 100%);
}
/* Curva blanca de salida: enlaza con la banda de tiendas */
.adBand::after{
  content:"";position:absolute;z-index:1;left:-8%;right:-8%;bottom:-160px;height:290px;
  background:#fff;border-radius:50% 52% 0 0/45% 55% 0 0;transform:rotate(2deg);pointer-events:none;
}
.adBandInner{position:relative;z-index:3;max-width:1400px;margin:0 auto}
.adBandHead{max-width:780px;margin:0 auto clamp(26px,3.2vw,44px);text-align:center}
.adBandEyebrow{display:inline-block;color:var(--brand-pale);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.adBandTitle{margin:14px 0 10px;font-family:var(--font-body);font-weight:800;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.03;letter-spacing:-.045em;color:#fff}
.adBandLead{margin:0;color:rgba(255,255,255,.62);font-size:.98rem;line-height:1.6}

/* Banner panorámico: conserva las imágenes transparentes del editor, pero las
   integra como una campaña horizontal con el texto siempre legible. */
.adPromoStage{position:relative;width:100%}
.adPromoStage.noPromotions{display:none}
.adPromo{
  height:clamp(390px,37vw,510px);overflow:hidden;border-radius:30px;
  border:1px solid rgba(255,255,255,.16);background:#0b0b0d;
  box-shadow:0 34px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08);
}
/* El fondo se deriva de la marca, no de --promo-color: content.json todavía
   guarda temas heredados ("green", "cyan") que teñían la banda de verde oliva.
   Los temas siguen existiendo, pero ahora solo eligen entre marca y acento. */
.adPromo .promoSlide{
  overflow:hidden;padding:0;
  --promo-glow:color-mix(in srgb,var(--brand) 24%,transparent);
  /* Elipse ancha detrás de la figura: llega hasta el centro y evita que el
     tramo entre el texto y la foto se lea como un hueco negro. */
  background:
    radial-gradient(ellipse 58% 130% at 79% 52%,var(--promo-glow),transparent 70%),
    linear-gradient(112deg,#08080a 0%,#101014 46%,color-mix(in srgb,var(--brand) 15%,#0d0d11) 100%);
}
.adPromo .promoSlide[data-theme="coral"],
.adPromo .promoSlide[data-theme="green"]{
  --promo-glow:color-mix(in srgb,var(--accent) 22%,transparent);
  background:
    radial-gradient(ellipse 58% 130% at 79% 52%,var(--promo-glow),transparent 70%),
    linear-gradient(112deg,#08080a 0%,#101014 46%,color-mix(in srgb,var(--accent) 13%,#0d0d11) 100%);
}
/* El velo de lectura y el asentado inferior viven en la diapositiva, no en la
   caja del arte: esa caja tiene margen derecho variable y su borde se veía como
   una costura vertical detrás de la figura. --promo-depth (el control de
   "profundidad" del panel) sigue gobernando el degradado de abajo. */
.adPromo .promoSlide::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,color-mix(in srgb,var(--night) calc(var(--promo-depth,.6) * 100%),transparent) 0%,transparent 44%),
    linear-gradient(90deg,rgba(5,5,7,.98) 0%,rgba(5,5,7,.9) 35%,rgba(5,5,7,.32) 61%,rgba(5,5,7,.08) 100%);
}
.adPromo .promoArtwork::before,
.adPromo .promoArtwork::after{display:none}
.adPromo .promoArtwork{position:absolute;z-index:1;inset:0 0 0 34%;padding:0;display:block}
/* Algunas fotos de campaña no vienen recortadas y se les ve el rectángulo
   contra el fondo. La máscara funde sus bordes; a las que sí tienen fondo
   transparente no les afecta, porque ahí ya no hay nada que difuminar. */
.adPromo .promoArtwork img{
  position:absolute;inset:0 0 0 auto;height:100%;max-height:none;width:100%;max-width:none;
  object-fit:contain;object-position:right center;
  /* La escala del panel se topa en 1. Con `contain`, 1 ya es el tamaño máximo
     en el que la figura entra entera; por encima recorta, y las cuatro fotos
     de campaña tienen la figura pegada al borde superior del archivo, así que
     lo primero que se pierde es la cabeza. Los valores guardados (115-123 %)
     se calibraron con el diseño anterior, más alto. Para llenar el banner con
     una imagen panorámica está el modo "cubrir", que sí escala libremente. */
  /* El desplazamiento vertical se anula por el mismo motivo que la escala: a
     tamaño 1 la figura ocupa exactamente el alto del banner, así que moverla
     arriba o abajo solo puede recortarla (con -8 % se comía 26 px de cabeza).
     El horizontal sí se conserva: ahí sobra sitio. */
  transform:translate(var(--promo-x,0%),0) scale(min(var(--promo-scale,1),1));
  transform-origin:bottom right;
  /* Solo se difumina el borde izquierdo, donde la foto se funde con el fondo.
     El degradado superior/inferior desvanecía la cabeza y los pies. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 100%);
  -webkit-mask-composite:source-over;
          mask-composite:add;
}
.adPromo .promoArtwork::after{left:0;right:0;height:46%;background:linear-gradient(to top,color-mix(in srgb,var(--night) calc(var(--promo-depth) * 100%),transparent),transparent)}
.adPromo .promoCopy{
  position:absolute;z-index:3;left:clamp(28px,5vw,74px);right:auto;top:50%;bottom:auto;
  width:min(520px,46%);max-width:none;padding:0;transform:translateY(-50%);
  border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none;
}
.adPromo .promoEyebrow{display:inline-flex;padding:7px 12px;border:1px solid var(--brand-edge);border-radius:99px;background:var(--brand-film);color:var(--brand-pale);font-size:.66rem}
.adPromo .promoTitle{margin:18px 0 12px;font-size:clamp(2rem,3.6vw,3.65rem);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.adPromo .promoBody{display:block;max-width:470px;font-size:clamp(.86rem,1.05vw,1rem);line-height:1.65;color:rgba(255,255,255,.72)}
.adPromo .promoCta{
  margin-top:24px;padding:13px 25px;border-radius:99px;font-size:.76rem;text-decoration:none;
}
.adPromo .promoCta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -12px var(--brand-cast)}
.adPromo .promoControls{bottom:18px;background:color-mix(in srgb,var(--night) 76%,transparent);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 28px rgba(0,0,0,.26)}
.adPromo .promoDot.active::after{background:var(--accent)}
.adPromo .promoArrow:hover,.adPromo .promoPause:hover{background:#fff;color:var(--brand-strong)}
/* Los temas de color de cada promoción heredan la marca: el halo detrás de la
   foto ya no puede quedar celeste cuando la identidad es rosa. */
/* El halo separa la figura del fondo. Un rosa saturado tiñe media banda, así
   que se usa luz casi neutra con un punto de marca. */
.adPromo .promoArtwork::before{
  width:68%;left:70%;bottom:2%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 22%,#fff),transparent 66%);
  opacity:calc(var(--promo-depth) * .28);filter:blur(46px);
}
.adPromo .promoSlide[data-theme="coral"] .promoArtwork::before{
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,#fff),transparent 66%);
}

/* Comunicados en formato banner */
.adNotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.adNote{
  display:flex;flex-direction:column;padding:clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  background:rgba(255,255,255,.055);backdrop-filter:blur(14px);
  transition:transform .25s var(--ease-out),border-color .25s,background .25s;
}
.adNote:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.adNoteHot{border-color:var(--brand-edge);background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 26%,transparent),var(--accent-glow))}
.adNoteTag{align-self:flex-start;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.13);color:var(--brand-soft);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.adNoteHot .adNoteTag{background:var(--btn-bg);border:1px solid var(--btn-line);color:#fff}
.adNoteTitle{margin:16px 0 8px;font-family:var(--font-body);font-weight:800;font-size:clamp(1rem,1.5vw,1.24rem);line-height:1.2;letter-spacing:-.025em;color:#fff}
.adNoteBody{margin:0 0 16px;color:rgba(255,255,255,.66);font-size:.8rem;line-height:1.55}
.adNoteCta{display:inline-flex;align-items:center;gap:7px;margin-top:auto;color:var(--brand-pale);font-size:.74rem;font-weight:800}
.adNoteCta span{transition:transform .2s}
.adNote:hover .adNoteCta{color:#fff}.adNote:hover .adNoteCta span{transform:translateX(4px)}

/* ── Resto del sitio: todo colgado de los mismos tokens ── */
/* ── Bloques grandes: azul oscuro degradando a negro ──
   El color de marca satura cuando cubre superficies de este tamaño; aquí manda
   el azul profundo y el rosa queda para botones, íconos y acentos. */
.statsStrip{background:linear-gradient(120deg,var(--deep),var(--deep-2))}
.statItem b{color:var(--accent)}
.statItem{border-color:rgba(255,255,255,.08)}
.calcVisual{background:linear-gradient(150deg,var(--deep),var(--deep-2))!important;box-shadow:0 28px 65px color-mix(in srgb,var(--deep) 45%,transparent)!important}
.calcVisualDesc{color:var(--deep-soft)}
.calcVisualStats b{color:var(--accent)}
.calcVisualStats span{color:var(--deep-soft)}
.calcVisualStats div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
/* Solo el ícono sin variante: los de WhatsApp y casilla conservan su color */
.contactCardIcon:not(.contactCardIconGreen):not(.contactCardIconCyan):not(.contactCardIconOrange){background:var(--brand-film);border-color:var(--brand-edge)}
.contactCardIconCyan{background:var(--brand-film);border-color:var(--brand-edge);color:var(--brand)}
.invoiceTotal{background:linear-gradient(135deg,var(--deep),var(--deep-2))}
/* La cifra del total venía con un degradado celeste→verde recortado sobre el
   texto; se pasa al acento de marca, plano. */
.invoiceTotal span{color:var(--deep-soft)}
.invoiceTotal strong{background:none;-webkit-text-fill-color:currentColor;color:var(--accent)}
.tarifBigCard{background:var(--night-2);box-shadow:0 28px 65px var(--night-cast)}
.tarifCardHead{background:var(--brand-strong)}
.tariffs .pill.dark{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.tariffs .sectionTitle h2,.processIntro h2,.servicesSection .sectionTitle h2,.contactCTA h2,.trackHelpHead h2,.cotizHeader h2{color:var(--brand-ink)}
/* Ojo: sin :not() el tono oscuro pisaría el blanco de las tarjetas de color */
.processCard h3,.serviceCard:not(.servicePrimary):not(.serviceAccent) h3,.trackStage b,.trackHelpCta b,.contactCard p{color:var(--brand-ink)}
/* Los textos secundarios venían en gris azulado del tema anterior; se cuelgan
   del tono de marca para que no desentonen sobre las superficies rosadas. */
.processCard p,.serviceCard:not(.servicePrimary):not(.serviceAccent) p,
.trackStage span,.trackHelpCta span,.contactCard h4,.processIntro p,
.servicesSection .serviceTitle p,.tariffs .sectionTitle p,.contactCTA > p,
.cotizHeader > p{color:color-mix(in srgb,var(--brand-ink) 70%,#fff)}   /* 70 % = contraste AA (4.5:1) sobre blanco */
.processGrid::before{background:var(--brand-line)}
.processGrid::after{background:linear-gradient(90deg,var(--accent),var(--brand) 55%,var(--brand-deep))}
.processIcon{color:var(--brand-strong);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand-line),0 10px 24px var(--brand-film)}
/* Los pasos alternan marca y acento. Las capas anteriores pintaban de verde
   los pasos pares con selectores :nth-child sueltos, así que hay que igualar
   su especificidad (y superarla dentro de .directProcessGrid). */
.processCard:nth-child(2n) .processIcon,
.directProcessGrid .processCard:nth-child(2n) .processIcon{
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 13%,#fff);
}
.processCard:nth-child(2n+1) .processIcon,
.directProcessGrid .processCard:nth-child(2n+1) .processIcon{
  color:var(--brand-strong);background:var(--brand-soft);
}
/* El hover va después de los alternos o no llegaría a pintarse. */
.processGrid .processCard:hover .processIcon{background:var(--brand-strong);color:#fff}
.processGrid .processCard:nth-child(2n):hover .processIcon{background:var(--accent-ink);color:#fff}
.processCard>span{color:color-mix(in srgb,var(--brand-ink) 62%,#fff)}
/* Único color literal de la capa: el verde es de WhatsApp, no de la marca,
   así que a propósito no sigue a los tokens. */
.processTagWa{color:#157442;background:#e5f8eb}
/* Texto diminuto (.57rem): usa el tono profundo para llegar al 4.5:1 */
.processTag{color:var(--brand-deep);background:var(--brand-soft)}
.processModeSwitch{border-color:var(--brand-line);background:var(--brand-tint)}
.processModeBtn i{color:var(--brand-strong);background:var(--brand-soft)}
.processModeBtn.active{background:linear-gradient(135deg,var(--deep),var(--deep-2))}
.processModeBtn.active i{color:var(--brand-deep);background:var(--brand-soft)}
.servicesSection{background:linear-gradient(135deg,var(--brand-tint),color-mix(in srgb,var(--deep) 9%,#fff))}
.servicesMosaic{background:linear-gradient(145deg,var(--deep),var(--deep-2));box-shadow:0 28px 70px var(--brand-cast)}
/* La tarjeta destacada conserva el color de marca: sobre el mosaico azul,
   el azul se perdía contra su propio fondo. */
.serviceCard.servicePrimary{background:linear-gradient(145deg,var(--brand-strong),var(--brand-shade));border-color:transparent}
.serviceCard.serviceTint{background:var(--brand-soft)}
/* Las tarjetas sin variante van en blanco: con el mosaico ya en azul profundo,
   dejarlas translúcidas las volvía grises. */
.serviceCard:not(.servicePrimary):not(.serviceAccent):not(.serviceTint){background:#fff;border-color:rgba(255,255,255,.5)}
.servicePrimary a{color:var(--accent-pale)}
.pill{color:var(--brand-soft)}
.pill .dot::after{background:var(--brand-glow)}
/* La tarjeta de acento usa el color secundario, para no dejar un bloque de
   otro tema suelto dentro del mosaico */
/* Sobre naranja hace falta un texto muy oscuro: el propio --accent-ink solo
   llega a 2.6:1, así que se mezcla con negro hasta pasar el 4.5:1. */
.serviceCard.serviceAccent{color:var(--accent-ink);border-color:var(--accent-pale);background:linear-gradient(145deg,var(--accent-pale),var(--accent))}
.serviceCard.serviceAccent h3,.serviceCard.serviceAccent p,.serviceCard.serviceAccent a{color:color-mix(in srgb,var(--accent-ink) 28%,#000)}
.serviceCard.serviceAccent .serviceIcon{color:var(--accent-ink);background:rgba(255,255,255,.55)}
/* Las tarjetas destacada y de acento conservan sus colores */
.serviceCard:not(.servicePrimary):not(.serviceAccent) .serviceIcon{color:var(--brand-strong);background:var(--brand-soft)}
.serviceCard:not(.servicePrimary):not(.serviceAccent) a{color:var(--brand-strong)}
.address{background:linear-gradient(120deg,var(--veil-1),var(--veil-2) 62%,var(--veil-3)),var(--img-address) center/cover}
.contactCTA .pill{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.contactCard{background:var(--brand-tint);border-color:var(--brand-line)}
.contactCard:hover{background:var(--brand-soft);border-color:var(--brand-line)}
.contactMapBtn{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.contactMapBtn:hover{background:var(--brand-line)}
.footer{background:var(--night);border-top:5px solid var(--brand-strong)}
.footerBrand p,.footerCol a{color:rgba(255,255,255,.72)}.footerCol h5{color:var(--brand-pale)}.footerBottom p{color:rgba(255,255,255,.5)}
.trackHero{background:linear-gradient(135deg,var(--night-3) 0%,var(--night-2) 52%,var(--night) 100%)}
.trackHelpCta{background:radial-gradient(circle at 90% 10%,var(--brand-film),transparent 40%),linear-gradient(135deg,var(--brand-tint),var(--brand-soft));border-color:var(--brand-line)}
.trackStage{border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-tint),#fff)}
.trackStage:hover{border-color:var(--brand-line);box-shadow:0 16px 34px var(--brand-film)}
.trackStage i{background:var(--btn-bg)}
.trackStage:nth-child(6) i{background:var(--accent-ink)}
.invoiceBadge{background:var(--btn-bg);box-shadow:0 8px 20px -10px var(--brand-cast)}

/* ── Responsive de la nueva composición ── */
@media(max-width:1180px){
  .heroTrackCard{max-width:480px}
}
@media(max-width:900px){
  .heroVisual{justify-content:stretch}
  .heroTrackCard{max-width:none;margin-left:0}
  .homeTrackingStage{height:430px}
  .heroTrackCard .trackingGlobeHome{width:min(430px,90vw)}
  .adPromo{height:clamp(430px,64vw,510px)}
  .adPromo .promoArtwork{inset:0 0 0 26%}
  .adPromo .promoCopy{left:28px;width:54%}
  .adPromo .promoTitle{font-size:clamp(1.75rem,5vw,2.7rem)}
  .adNotes{grid-template-columns:1fr 1fr}
  .adNotes .adNote:first-child{grid-column:1/-1}
  .adBandBg{background-attachment:scroll}
}
@media(max-width:640px){
  /* Mismo velo que en escritorio, con la foto ligera y el degradado vertical */
  .heroBg{
    background:
      radial-gradient(ellipse 85% 38% at 100% 0%,rgba(22,188,225,.24),transparent 72%),
      radial-gradient(ellipse 72% 38% at 48% 58%,rgba(113,190,73,.16),transparent 74%),
      radial-gradient(ellipse 84% 34% at 0% 100%,rgba(218,52,113,.25),transparent 74%),
      linear-gradient(168deg,var(--veil-1) 0%,var(--veil-2) 52%,var(--veil-3) 100%),
      var(--img-hero-mobile) center/cover no-repeat;
  }
  .hero .orb.o1{width:360px;height:360px;right:-150px;top:-80px}
  .hero .orb.o2{width:330px;height:330px;left:-150px;bottom:-70px}
  .hero .orb.o3{width:300px;height:300px;left:24%;top:48%;opacity:.22}
  .heroTrackCard{padding:20px;border-radius:24px}
  .homeTrackingStage{height:360px;margin:-2px 0 -30px}
  .heroTrackCard .trackingGlobeHome{width:min(360px,92vw);margin:0}
  .heroTrackCard .htlWrap{max-height:none;padding:10px 6px}
  .homeTrackingFinal .etlTrack{--etl-node:21px;--etl-col-gap:11px;--etl-row-gap:10px;margin-top:4px}
  .homeTrackingFinal .etlStep{padding-left:7px}
  .homeTrackingFinal .etlStep:not(:last-child)::before{top:24px;left:17.5px}
  .homeTrackingFinal .etlTitle{font-size:.77rem}
  .homeTrackingFinal .etlMeta{font-size:.57rem}
  /* El padding-top deja sitio a la curva, que en móvil es más baja */
  .adBand{padding:120px 16px 150px}
  .adBand::before{top:-120px;height:180px}
  .adBandHead{text-align:left}
  .adPromo{height:clamp(470px,132vw,570px);border-radius:22px}
  .adPromo .promoSlide::after{background:linear-gradient(0deg,rgba(5,5,7,.98) 0%,rgba(5,5,7,.84) 45%,rgba(5,5,7,.12) 78%)}
  .adPromo .promoArtwork{inset:0 0 34% 0}
  .adPromo .promoArtwork img{object-position:center top}
  .adPromo .promoCopy{left:20px;right:20px;top:auto;bottom:68px;width:auto;transform:none}
  .adPromo .promoEyebrow{padding:6px 10px;font-size:.58rem}
  .adPromo .promoTitle{margin:12px 0 8px;font-size:clamp(1.65rem,8vw,2.25rem)}
  .adPromo .promoBody{display:block;font-size:.78rem;line-height:1.5}
  .adPromo .promoCta{margin-top:12px;padding:10px 18px}
  /* Los controles vuelven abajo: arriba se montaban sobre la foto */
  .adPromo .promoControls{top:auto;bottom:0}
  .adNotes{grid-template-columns:1fr}
  .adNotes .adNote:first-child{grid-column:auto}
}

/* Barra flotante compacta: restaura la composición ajustada del diseño previo. */
.nav{
  top:18px;left:50%;right:auto;width:min(1160px,calc(100% - 48px));max-width:1160px;
  transform:translateX(-50%);padding:8px 12px 8px 20px;border-radius:99px;
  background:rgba(6,12,22,.86);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 16px 46px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
}
.navbtn-wa{
  background:linear-gradient(135deg,#28d875,#16a95a);border-color:rgba(107,255,171,.5);
  color:#fff!important;box-shadow:0 10px 24px -10px rgba(37,211,102,.75);
}
.navbtn-wa:hover{background:linear-gradient(135deg,#35e982,#1cba65);color:#fff!important;box-shadow:0 12px 28px -10px rgba(37,211,102,.85)}
@media(max-width:900px){
  .nav{top:12px;width:calc(100% - 28px);padding:8px 10px 8px 16px}
}
@media(max-width:640px){
  .nav{top:10px;left:50%;right:auto;width:calc(100% - 20px)!important;max-width:none;transform:translateX(-50%);border-radius:22px}
}

/* Carrusel panorámico de borde a borde; el resto de la banda sigue contenido.
   No hace falta 100vw: .adBand y .adBandInner ya ocupan todo el ancho, y 100vw
   incluye la barra de desplazamiento, lo que abría scroll horizontal (405 px de
   contenido en un viewport de 375). */
.adPromoStage{
  width:100%;margin-left:0;
}
.adPromo{
  height:clamp(310px,21vw,410px);border-left:0;border-right:0;border-radius:0;
  box-shadow:0 30px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
}
.adPromo .promoCopy{left:clamp(34px,8vw,160px);width:min(570px,42%)}
/* El banner es de borde a borde, pero la composición se mantiene dentro de una
   columna centrada: en pantallas muy anchas la figura se separaba del texto
   hasta pegarse al filo del navegador. */
.adPromo .promoArtwork{inset:0 max(3vw,calc(50vw - 760px)) 0 42%}
.adPromo .promoArtwork img{object-position:right center}
.adPromo .promoTitle{font-size:clamp(2rem,3.1vw,3.45rem)}
.adPromo .promoControls{bottom:14px}
@media(max-width:900px){
  .adPromo{height:clamp(390px,64vw,500px)}
  .adPromo .promoCopy{left:28px;width:55%}
  .adPromo .promoArtwork{inset:0 0 0 30%}
}
@media(max-width:640px){
  .adPromoStage{width:100%;margin-left:0}
  .adPromo{height:clamp(480px,138vw,560px);border-radius:0}
  .adPromo .promoArtwork{inset:0 0 34%}
  /* Aquí el arte ocupa todo el ancho y va centrado: no queda holgura lateral,
     así que el desplazamiento horizontal del panel solo descuadraría la foto. */
  .adPromo .promoArtwork img{transform:none}
  .adPromo .promoCopy{left:20px;right:20px;width:auto}
}

/* La promoción sustituye a la antigua sección fotográfica con curvas. */
.adBand{padding:0;color:#fff;background:#08090b;overflow:hidden}
.adBand::before,.adBand::after,.adBandBg,.adBandHead{display:none}
.adBandInner{max-width:none;margin:0}
.adPromoStage{margin-top:0}
.adNotes{
  width:min(1120px,calc(100% - 40px));margin:0 auto;padding:34px 0 76px;
}
@media(max-width:640px){
  .adBand{padding:0}
  .adNotes{width:calc(100% - 28px);padding:24px 0 54px}
}

/* Imágenes panorámicas cargadas desde el editor: cubren todo el anuncio. */
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork{inset:0;padding:0}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork::before{display:none}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork::after{
  display:block;   /* el modo figura lo apaga; en panorámica sí hace falta */
  inset:0;height:auto;background:linear-gradient(180deg,rgba(5,7,11,.05),rgba(5,7,11,.24));
}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork img{
  inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;
  object-position:calc(50% + var(--promo-x,0%)) calc(50% + var(--promo-y,0%));
  transform:scale(var(--promo-scale,1));transform-origin:center;filter:none;
  -webkit-mask-image:none;mask-image:none;
}

/* Fondo fijo del cotizador: el contenido se desplaza sobre la fotografía.
   El velo plano al 84 % dejaba la foto casi blanca. Baja al 42 % —la imagen se
   ve— y la legibilidad del encabezado se resuelve con un halo local en vez de
   lavando la sección entera: medido sobre el 5 % más oscuro de la foto, el
   título pasa de 12.7 a 13.0 y el subtítulo queda en 4.8 (mínimo 4.5). */
.cotizSection{
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(248,250,252,.46),rgba(248,250,252,.3) 52%,rgba(248,250,252,.5)),
    var(--img-cotizador) center/cover fixed;
  background-attachment:scroll,fixed;
}
.cotizSection::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 34% at 50% 20%,rgba(255,255,255,.72),rgba(255,255,255,.28) 58%,transparent 78%);
}
.cotizSection .cotizWrap{position:relative;z-index:1}
@media(max-width:900px){
  /* En móvil el texto ocupa casi todo el ancho, así que el halo local no basta:
     el velo sube, pero se queda por debajo del 84 % anterior. */
  .cotizSection{
    background:
      linear-gradient(180deg,rgba(248,250,252,.66),rgba(248,250,252,.56),rgba(248,250,252,.68)),
      var(--img-cotizador) center/cover no-repeat;
    background-attachment:scroll,scroll;
  }
  .cotizSection::before{background:radial-gradient(ellipse 96% 26% at 50% 16%,rgba(255,255,255,.6),transparent 76%)}
}

/* Navegación clara sobre el hero. */
.nav{
  background:rgba(255,255,255,.95);border-color:rgba(16,35,50,.13);
  box-shadow:0 16px 42px -22px rgba(5,18,30,.5),inset 0 1px 0 #fff;
}
.navlinks a{color:rgba(16,35,50,.72)}
.navlinks a:hover{color:#0f2334;background:rgba(15,35,52,.07)}
.navlinks a::after{background:var(--brand)}
.brand:hover img{opacity:1}
.hamburger span{background:#152a3a}

/* Carrusel y comunicados claros, con la jerarquía institucional de referencia. */
.adBand{background:#f4f6f7;color:#102434;border-bottom:1px solid rgba(15,35,52,.12)}
.adPromo{
  border-top:1px solid rgba(15,35,52,.12);border-bottom:5px solid var(--brand);
  background:#eef1f3;box-shadow:0 22px 55px rgba(15,35,52,.12);
}
.adPromo .promoSlide{
  background:
    radial-gradient(circle at 79% 48%,rgba(var(--promo-color),.12),transparent 35%),
    linear-gradient(112deg,#f8fafb 0%,#eef1f3 52%,rgba(var(--promo-color),.1) 100%);
}
.adPromo .promoSlide::after{
  background:linear-gradient(90deg,rgba(248,250,251,.98) 0%,rgba(248,250,251,.9) 34%,rgba(248,250,251,.3) 62%,transparent 100%);
}
.adPromo .promoTitle{color:#102434;text-shadow:none}
.adPromo .promoBody{color:rgba(16,36,52,.7)}
.adPromo .promoEyebrow{background:rgba(187,35,104,.08);color:var(--brand-deep)}
.adPromo .promoArtwork::after{background:linear-gradient(to top,rgba(238,241,243,.82),transparent)}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork::after{
  background:linear-gradient(180deg,rgba(248,250,251,.04),rgba(238,241,243,.16));
}
.adPromo .promoControls{background:rgba(8,17,26,.88);border-color:rgba(255,255,255,.16)}
.adNotes{background:#f4f6f7}
.adNote{
  border-color:rgba(15,35,52,.14);background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(15,35,52,.08);
}
.adNote:hover{border-color:rgba(15,35,52,.25);background:#fff}
.adNoteHot{border-color:var(--brand-edge);background:linear-gradient(145deg,var(--brand-tint),#fff 72%)}
.adNoteTag{background:rgba(15,35,52,.08);color:#536b7a}
.adNoteTitle{color:#102434}
.adNoteBody{color:rgba(16,36,52,.65)}
.adNoteCta{color:var(--brand-deep)}
.adNote:hover .adNoteCta{color:var(--brand)}

/* El carrusel termina en su línea de color; se retiran los avisos duplicados. */
.adNotes{display:none!important}
.adBand{border-bottom:0}

/* Un cuarto más de altura para que el banner no se perciba demasiado delgado. */
@media(min-width:901px){
  .adPromo{height:clamp(390px,26vw,510px)}
}

/* Hero más luminoso: velo azul transparente en lugar de negro pesado. */
.hero{background:#0a4968}
.heroBg{
  background:
    radial-gradient(ellipse 62% 54% at 96% 2%,rgba(37,196,225,.12),transparent 70%),
    radial-gradient(ellipse 48% 48% at 50% 58%,rgba(101,190,133,.08),transparent 72%),
    linear-gradient(105deg,rgba(5,42,64,.62) 0%,rgba(5,54,76,.30) 48%,rgba(8,75,96,.08) 100%),
    var(--img-hero) center 48%/cover no-repeat;
  filter:brightness(1.12) saturate(1.08);
}
.hero .orb.o1{opacity:.16}
.hero .orb.o2{opacity:.14}
.hero .orb.o3{opacity:.12}

@media(max-width:640px){
  .heroBg{
    background:
      radial-gradient(ellipse 85% 38% at 100% 0%,rgba(37,196,225,.12),transparent 72%),
      linear-gradient(168deg,rgba(5,42,64,.64) 0%,rgba(5,54,76,.38) 54%,rgba(8,75,96,.16) 100%),
      var(--img-hero-mobile) center/cover no-repeat;
  }
}

/* Marco horizontal inspirado en una franja institucional, con color de marca. */
.adPromo{position:relative;border-top:0;border-bottom:0}
.adPromo::before,
.adPromo::after{
  content:"";position:absolute;z-index:10;left:0;right:0;height:clamp(8px,.6vw,11px);
  pointer-events:none;
  background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand) 28%,var(--brand-pale) 50%,var(--brand) 72%,var(--brand-deep) 100%);
  box-shadow:0 0 18px var(--brand-glow);
}
.adPromo::before{top:0}
.adPromo::after{bottom:0}

@media(max-width:640px){
  .adPromo::before,.adPromo::after{height:7px}
}

/* Mosaico de servicios con acabado institucional y jerarquía más clara. */
.servicesMosaic{
  position:relative;overflow:hidden;padding:11px;gap:10px;
  border:1px solid rgba(255,255,255,.16);border-radius:26px;
  background:linear-gradient(145deg,#19263a 0%,#101a2a 100%);
  box-shadow:0 26px 60px rgba(15,35,52,.2),0 12px 30px rgba(187,35,104,.1);
}
.servicesMosaic::before{
  content:"";position:absolute;z-index:2;top:0;left:5%;right:5%;height:3px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-pale),var(--brand),transparent);
}
.serviceCard,
.serviceCard.servicePrimary,
.serviceCard.serviceWide,
.serviceCard.serviceAccent{
  min-height:216px;padding:24px;border-radius:16px;
  border:1px solid #e5e9ef;background:#fff;
  box-shadow:0 3px 12px rgba(9,24,39,.05);
  transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s;
}
.serviceCard:hover{
  transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 28%,#fff);
  box-shadow:0 16px 30px rgba(9,24,39,.12);
}
.serviceCard::after{
  top:22px;right:22px;padding:4px 7px;border:1px solid #e5e9ef;border-radius:99px;
  color:#7d8da0;background:#f7f9fb;font-size:.56rem;letter-spacing:.06em;
}
.serviceCard .serviceIcon{
  width:46px;height:46px;margin-bottom:24px;border:1px solid var(--brand-line);border-radius:13px;
  color:var(--brand-strong);background:var(--brand-soft);box-shadow:none;
}
.serviceCard h3,.servicePrimary h3{
  margin:0 0 8px;color:#18283b;font-size:1rem;font-weight:750;line-height:1.3;letter-spacing:-.02em;
}
.serviceCard p{
  margin:0 0 18px;color:#68788a;font-size:.75rem;line-height:1.6;
}
.serviceCard a{
  padding-top:12px;border-top:1px solid #edf0f4;color:var(--brand-strong);
  font-size:.68rem;font-weight:800;letter-spacing:.01em;
}
.serviceCard.servicePrimary{
  color:#fff;border-color:rgba(255,255,255,.1);
  background:linear-gradient(145deg,#a91f61 0%,#741440 100%);
}
.serviceCard.servicePrimary::after{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.serviceCard.servicePrimary .serviceIcon{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16)}
.serviceCard.servicePrimary h3{color:#fff}
.serviceCard.servicePrimary p{color:rgba(255,255,255,.76)}
.serviceCard.servicePrimary a{color:#fff;border-color:rgba(255,255,255,.14)}
.serviceCard.serviceTint{background:linear-gradient(145deg,#fff 0%,#fcecf4 100%);border-color:#f2dce7}
.serviceCard.serviceAccent{
  color:#4b2a14;border-color:#f4d3b5;
  background:linear-gradient(145deg,#fff8f1 0%,#ffd5ad 100%);
}
.serviceCard.serviceAccent::after{color:#8d4a17;background:rgba(255,255,255,.5);border-color:rgba(195,104,30,.18)}
.serviceCard.serviceAccent .serviceIcon{color:#a95114;background:rgba(255,255,255,.58);border-color:rgba(195,104,30,.18)}
.serviceCard.serviceAccent h3,.serviceCard.serviceAccent p,.serviceCard.serviceAccent a{color:#4b2a14}
.serviceCard.serviceAccent a{border-color:rgba(116,61,21,.14)}

@media(max-width:900px){
  .servicesMosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .servicesMosaic{grid-template-columns:1fr;padding:8px;gap:8px;border-radius:20px}
  .serviceCard,.serviceCard.servicePrimary,.serviceCard.serviceWide,.serviceCard.serviceAccent{min-height:0;padding:16px;border-radius:14px}
  .serviceCard::after{top:15px;right:15px;padding:3px 6px}
  .serviceCard .serviceIcon{width:42px;height:42px;margin:0}
  .serviceCard a{padding-top:8px}
}

/* Banner más alto y editorial, con base blanca y matices rosa de marca. */
.adPromo{
  background:#f8f5f7;
  box-shadow:0 24px 60px rgba(15,35,52,.14),0 14px 34px var(--brand-film);
}
.adPromo .promoSlide,
.adPromo .promoSlide[data-theme="coral"],
.adPromo .promoSlide[data-theme="green"]{
  background:
    radial-gradient(ellipse 58% 120% at 82% 52%,rgba(236,61,139,.52),transparent 68%),
    radial-gradient(ellipse 38% 86% at 58% 100%,rgba(141,17,80,.28),transparent 72%),
    linear-gradient(112deg,#fff 0%,#fbf5f8 40%,#f5b2d0 62%,#e44a8c 82%,#b9165d 100%);
}
.adPromo .promoSlide::after{
  background:
    linear-gradient(0deg,rgba(244,237,241,.3) 0%,transparent 38%),
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(250,246,248,.88) 32%,rgba(248,205,225,.22) 53%,transparent 72%);
}
.adPromo .promoArtwork img{filter:saturate(1.05) contrast(1.02) drop-shadow(0 20px 28px rgba(94,18,54,.18))}
.adPromo .promoTitle{
  max-width:640px;margin:20px 0 16px;color:#102434;
  font-family:var(--font-body);font-size:clamp(2.65rem,4.1vw,4.8rem);
  font-weight:800;line-height:.95;letter-spacing:-.06em;text-shadow:none;
}
.adPromo .promoBody{
  max-width:540px;color:rgba(16,36,52,.72);
  font-size:clamp(.94rem,1.12vw,1.08rem);line-height:1.65;
}
.adPromo .promoEyebrow{
  padding:8px 14px;border-color:rgba(187,35,104,.22);
  background:rgba(236,61,139,.1);color:var(--brand-deep);
  font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.adPromo .promoCta{
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 30px rgba(141,17,80,.32);
}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork::after{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(244,237,241,.2));
}

@media(min-width:901px){
  .adPromo{height:clamp(450px,29vw,585px)}
  .adPromo .promoCopy{width:min(640px,44%)}
}
@media(max-width:900px){
  .adPromo{height:clamp(430px,68vw,550px)}
  .adPromo .promoTitle{font-size:clamp(2.15rem,6vw,3.35rem)}
}
@media(max-width:640px){
  .adPromo{height:clamp(520px,145vw,610px)}
  .adPromo .promoTitle{margin:14px 0 10px;font-size:clamp(2rem,9vw,2.7rem);line-height:.98}
  .adPromo .promoBody{font-size:.82rem;line-height:1.55}
}

/* Fotografía natural del cotizador, sin velos ni capas blancas. */
.cotizSection{
  background:var(--img-cotizador) center/cover fixed;
  background-attachment:fixed;
}
.cotizSection::before{display:none}
@media(max-width:900px){
  .cotizSection{background:var(--img-cotizador) center/cover no-repeat;background-attachment:scroll}
}

/* Esferas luminosas del hero coordinadas con la identidad rosada. */
.heroBg{
  background:
    radial-gradient(ellipse 54% 48% at 96% 4%,rgba(242,82,151,.2),transparent 70%),
    radial-gradient(ellipse 46% 44% at 4% 96%,rgba(190,28,97,.22),transparent 72%),
    radial-gradient(ellipse 38% 38% at 54% 60%,rgba(255,122,86,.1),transparent 74%),
    linear-gradient(105deg,rgba(5,42,64,.62) 0%,rgba(5,54,76,.3) 48%,rgba(8,75,96,.08) 100%),
    var(--img-hero) center 48%/cover no-repeat;
}
.hero .orb{mix-blend-mode:screen;pointer-events:none}
.hero .orb.o1{
  width:660px;height:660px;right:-190px;top:-210px;opacity:.5;
  background:radial-gradient(circle,rgba(255,121,181,.68) 0%,rgba(236,61,139,.3) 38%,rgba(236,61,139,0) 72%);
}
.hero .orb.o2{
  width:560px;height:560px;left:-190px;bottom:-190px;opacity:.56;
  background:radial-gradient(circle,rgba(233,64,132,.72) 0%,rgba(167,20,82,.32) 40%,rgba(167,20,82,0) 73%);
}
.hero .orb.o3{
  display:block;width:460px;height:460px;left:42%;top:42%;opacity:.32;
  background:radial-gradient(circle,rgba(255,143,114,.58) 0%,rgba(229,68,133,.22) 42%,rgba(229,68,133,0) 74%);
}
@media(max-width:640px){
  .heroBg{
    background:
      radial-gradient(ellipse 78% 36% at 100% 0%,rgba(242,82,151,.2),transparent 72%),
      radial-gradient(ellipse 76% 34% at 0% 100%,rgba(190,28,97,.24),transparent 74%),
      linear-gradient(168deg,rgba(5,42,64,.64) 0%,rgba(5,54,76,.38) 54%,rgba(8,75,96,.16) 100%),
      var(--img-hero-mobile) center/cover no-repeat;
  }
  .hero .orb.o1{width:390px;height:390px;right:-170px;top:-100px}
  .hero .orb.o2{width:350px;height:350px;left:-170px;bottom:-90px}
  .hero .orb.o3{width:290px;height:290px;left:30%;top:48%;opacity:.24}
}

/* Fondo vivo del hero: tres escenas con fundido y zoom cinematográfico lento. */
.heroBg{overflow:hidden;background:#073852;filter:none}
.heroBgMedia{position:absolute;z-index:0;inset:-4%;overflow:hidden}
.heroBgFrame{
  position:absolute;inset:0;opacity:0;transform:scale(1.02);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  animation:heroScene 24s linear infinite;will-change:opacity,transform;
}
.heroBgFrame::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,24,42,.78) 0%,rgba(3,30,49,.58) 42%,rgba(4,38,57,.18) 76%,rgba(4,38,57,.06) 100%),
    linear-gradient(0deg,rgba(2,18,33,.34),transparent 58%);
}
.heroBgFrame1{background-image:var(--img-hero);animation-delay:0s}
.heroBgFrame2{background-image:url('assets/fondo3.webp');animation-delay:-8s}
.heroBgFrame3{background-image:url('assets/fondo2.webp');animation-delay:-16s}
@keyframes heroScene{
  0%{opacity:1;transform:scale(1.02)}
  27%{opacity:1;transform:scale(1.09)}
  35%{opacity:0;transform:scale(1.11)}
  92%{opacity:0;transform:scale(1.02)}
  100%{opacity:1;transform:scale(1.02)}
}
.heroBg::after{z-index:2}
.heroBg>.orb{z-index:1}

/* Luces del logotipo: celeste, rosa y verde, sin manchas opacas. */
.hero .orb.o1{
  width:680px;height:680px;right:-210px;top:-220px;opacity:.54;
  background:radial-gradient(circle,rgba(58,215,244,.72) 0%,rgba(36,199,236,.3) 40%,rgba(36,199,236,0) 73%);
}
.hero .orb.o2{
  width:560px;height:560px;left:-190px;bottom:-190px;opacity:.5;
  background:radial-gradient(circle,rgba(244,83,153,.68) 0%,rgba(236,61,139,.28) 40%,rgba(236,61,139,0) 73%);
}
.hero .orb.o3{
  width:500px;height:500px;left:39%;top:39%;opacity:.38;
  background:radial-gradient(circle,rgba(166,223,83,.7) 0%,rgba(139,197,63,.26) 42%,rgba(139,197,63,0) 74%);
}
.hero h1{
  font-family:var(--font-heading);font-weight:600;letter-spacing:-.045em;
  text-shadow:0 3px 2px rgba(1,12,24,.48),0 12px 30px rgba(1,12,24,.58),0 1px 0 rgba(0,0,0,.7);
}
.hero h1 em{text-shadow:0 3px 2px rgba(1,12,24,.4),0 12px 28px rgba(1,12,24,.5)}
.hero p.lead{text-shadow:0 2px 10px rgba(1,12,24,.72)}

@media(max-width:640px){
  .heroBgMedia{inset:-3%}
  .heroBgFrame1{background-image:var(--img-hero-mobile)}
  .hero .orb.o1{width:410px;height:410px;right:-190px;top:-110px}
  .hero .orb.o2{width:360px;height:360px;left:-180px;bottom:-100px}
  .hero .orb.o3{width:310px;height:310px;left:27%;top:46%;opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .heroBgFrame{display:none;animation:none}
  .heroBgFrame1{display:block;opacity:1;transform:none}
  .hero .orb{animation:none}
}

/* Barras del banner con mayor presencia y transición rosa direccional. */
.adPromo::before{
  height:clamp(14px,1vw,18px);
  background:linear-gradient(90deg,#6b0736 0%,#a90f55 22%,#dc2675 48%,#f064a5 76%,#ffd0e3 100%);
  box-shadow:0 5px 18px rgba(169,15,85,.28),0 0 22px rgba(236,61,139,.22);
}
.adPromo::after{
  height:clamp(12px,.8vw,15px);
  background:linear-gradient(90deg,#7a093e 0%,#bd155f 28%,#ec3d8b 58%,#d51f70 82%,#8d1150 100%);
  box-shadow:0 -5px 18px rgba(141,17,80,.24),0 0 20px rgba(236,61,139,.2);
}
@media(max-width:640px){
  .adPromo::before{height:11px}
  .adPromo::after{height:9px}
}

/* Burbujas celestes persistentes sobre todas las escenas del hero. */
.heroBubbles{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.heroBubble{
  position:absolute;border-radius:50%;opacity:.62;
  border:1px solid rgba(116,231,252,.2);
  background:radial-gradient(circle at 34% 30%,rgba(220,249,255,.28) 0%,rgba(61,210,239,.18) 24%,rgba(36,199,236,.08) 48%,rgba(36,199,236,0) 72%);
  box-shadow:inset 0 0 34px rgba(111,229,250,.12),0 0 46px rgba(36,199,236,.16);
  will-change:transform;
}
.heroBubble.hb1{width:300px;height:300px;right:7%;top:8%;animation:bubbleDriftA 22s ease-in-out infinite}
.heroBubble.hb2{width:190px;height:190px;left:43%;top:24%;opacity:.46;animation:bubbleDriftB 18s ease-in-out infinite}
.heroBubble.hb3{width:250px;height:250px;right:25%;bottom:4%;opacity:.42;animation:bubbleDriftC 25s ease-in-out infinite}
.heroBubble.hb4{width:135px;height:135px;left:8%;top:15%;opacity:.38;animation:bubbleDriftB 20s ease-in-out -7s infinite}
.heroBubble.hb5{width:165px;height:165px;right:3%;top:54%;opacity:.48;animation:bubbleDriftA 19s ease-in-out -5s infinite}
@keyframes bubbleDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,18px,0) scale(1.04)}}
@keyframes bubbleDriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-22px,0) scale(.97)}}
@keyframes bubbleDriftC{0%,100%{transform:translate3d(0,0,0) scale(.98)}50%{transform:translate3d(-16px,-20px,0) scale(1.03)}}

/* El zoom conserva vida sin desplazar demasiado la composición. */
@keyframes heroScene{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1.02)}
  27%{opacity:1;transform:translate3d(-.6%,-.25%,0) scale(1.065)}
  35%{opacity:0;transform:translate3d(-.8%,-.35%,0) scale(1.075)}
  92%{opacity:0;transform:translate3d(0,0,0) scale(1.02)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1.02)}
}
@media(max-width:640px){
  .heroBubble.hb1{width:230px;height:230px;right:-70px;top:10%}
  .heroBubble.hb2{width:140px;height:140px;left:40%;top:30%}
  .heroBubble.hb3{width:190px;height:190px;right:12%;bottom:8%}
  .heroBubble.hb4{width:100px;height:100px;left:-25px;top:18%}
  .heroBubble.hb5{width:120px;height:120px;right:-25px;top:58%}
}
@media(prefers-reduced-motion:reduce){.heroBubble{animation:none}}

/* Soluciones: carrusel deslizante sobre una atmósfera rosa y verde profunda. */
.servicesSection{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:
    radial-gradient(ellipse 56% 110% at -5% 18%,rgba(184,31,100,.42),transparent 68%),
    radial-gradient(ellipse 58% 115% at 105% 82%,rgba(32,119,82,.4),transparent 67%),
    linear-gradient(125deg,#1d0f20 0%,#291328 34%,#17251f 68%,#0c2019 100%);
  box-shadow:none;
}
.servicesSection::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.025),transparent 38%,rgba(136,214,169,.025));
}
.servicesSection .serviceTitle{position:relative;z-index:1}
.servicesSection .serviceTitle .sectionEyebrow{color:#f2a7c8}
.servicesCarouselToolbar{display:flex!important;visibility:visible!important;opacity:1!important}
.servicesCarouselCount{color:rgba(255,255,255,.62)}
.servicesCarouselArrow{color:#fff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.2);box-shadow:none}
.servicesCarouselArrow:hover{color:#fff;background:rgba(187,45,105,.3);border-color:rgba(244,153,194,.56);box-shadow:none}
.servicesCarouselViewport{
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
  overflow:hidden!important;border-radius:16px!important;
}
.servicesCarouselTrack{
  display:flex!important;grid-template-columns:none!important;flex-flow:row nowrap!important;
  width:max-content!important;gap:12px!important;
  transform:translate3d(var(--services-track-x,0px),0,0)!important;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1)!important;will-change:transform;
}
.servicesCarouselTrack.is-instant{transition:none!important}
.serviceSlide,.serviceSlide[aria-hidden="true"]{
  display:block!important;visibility:visible!important;flex-shrink:0!important;
  border:1px solid rgba(255,255,255,.12)!important;background:#fbfaf9!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;transform:none!important;
}
.serviceSlide:hover{border-color:rgba(244,153,194,.34)!important;box-shadow:0 14px 30px rgba(0,0,0,.18)!important}
@media(max-width:640px){
  .servicesSection{padding:46px 16px 54px}
  .servicesCarouselTrack{gap:10px!important}
}
@media(prefers-reduced-motion:reduce){.servicesCarouselTrack{transition:none!important}}

/* El carrusel mueve solo la fila completa; el contenido nunca aparece por fundido. */
.servicesSection .serviceSlide img,
.servicesSection .serviceSlideBody{
  opacity:1!important;clip-path:none!important;transform:none!important;transition:none!important;
}

/* Composición editorial oscura inspirada en la referencia visual. */
.servicesSection{padding:78px clamp(24px,6vw,96px) 86px!important;color:#fff!important}
.servicesSection .serviceTitle{
  display:block!important;width:100%!important;max-width:1240px!important;margin:0 auto 22px!important;text-align:left!important;
}
.servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start!important;color:#f05a9e!important;font-size:.65rem!important;letter-spacing:.18em!important}
.servicesSection .serviceTitle .sectionEyebrow::before{width:34px!important;background:#f05a9e!important}
.servicesSection .serviceTitle h2{
  display:block!important;margin:18px 0 8px!important;color:#fff!important;font-family:var(--font-body)!important;
  font-size:clamp(2rem,3vw,3.15rem)!important;font-weight:800!important;line-height:1.05!important;letter-spacing:-.05em!important;text-shadow:none!important;
}
.servicesSection .serviceTitle p{
  display:block!important;max-width:590px!important;margin:0!important;color:rgba(224,233,244,.72)!important;font-size:.9rem!important;line-height:1.65!important;
}
.servicesCarousel{width:100%!important;max-width:1240px!important;margin:0 auto!important}
.servicesCarouselToolbar{margin:0 0 20px!important}
.servicesCarouselCount{color:rgba(210,224,239,.58)!important;font-size:.65rem!important}
.servicesCarouselArrow{
  width:38px!important;height:38px!important;color:#fff!important;background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(203,220,238,.34)!important;box-shadow:none!important;
}
.servicesCarouselArrow:hover{background:#d52a77!important;border-color:#f28ab9!important;transform:none!important}
.servicesCarouselViewport{border-radius:0!important}
.servicesCarouselTrack{gap:24px!important}
.servicesSection .serviceSlide,.servicesSection .serviceSlide[aria-hidden="true"]{
  display:flex!important;min-height:405px!important;overflow:visible!important;flex-direction:column!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.servicesSection .serviceSlide:hover{border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.servicesSection .serviceSlide img{
  position:relative!important;inset:auto!important;width:100%!important;height:225px!important;
  flex:0 0 225px!important;object-fit:cover!important;border-radius:12px!important;filter:saturate(.96) contrast(1.04)!important;
}
.servicesSection .serviceSlideBody{
  position:relative!important;inset:auto!important;width:100%!important;min-height:0!important;flex:1!important;
  padding:20px 0 4px!important;background:transparent!important;
}
.servicesSection .serviceSlideBody>span{display:block!important;margin:0 0 8px!important;color:#f05a9e!important;font-size:.6rem!important;letter-spacing:.12em!important}
.servicesSection .serviceSlideBody h3{
  margin:0 0 10px!important;padding:0!important;color:#fff!important;font-family:var(--font-body)!important;
  font-size:clamp(1.08rem,1.35vw,1.35rem)!important;font-weight:800!important;line-height:1.18!important;letter-spacing:-.035em!important;text-shadow:none!important;
}
.servicesSection .serviceSlideBody p{display:block!important;margin:0 0 17px!important;color:rgba(215,227,240,.7)!important;font-size:.73rem!important;line-height:1.62!important}
.servicesSection .serviceSlideBody a{
  position:relative!important;inset:auto!important;display:inline-flex!important;width:max-content!important;margin-top:auto!important;
  padding:0!important;border:0!important;color:#f37bad!important;font-size:.68rem!important;font-weight:800!important;
}
.servicesSection .serviceSlideBody a b{display:inline!important;color:#f37bad!important}
@media(max-width:680px){
  .servicesSection{padding:58px 18px 64px!important}
  .servicesCarouselTrack{gap:16px!important}
  .servicesSection .serviceSlide{min-height:380px!important}
  .servicesSection .serviceSlide img{height:215px!important;flex-basis:215px!important}
}

/* Banner blanco con transición azul marino sobre la fotografía, sin verde. */
.adPromo{background:#fff;box-shadow:0 24px 64px rgba(5,22,41,.17),0 10px 28px rgba(18,55,88,.1)}
.adPromo .promoSlide,
.adPromo .promoSlide[data-theme="coral"],
.adPromo .promoSlide[data-theme="green"],
.adPromo .promoSlide[data-theme="cyan"]{
  background:
    radial-gradient(ellipse 48% 120% at 80% 50%,rgba(47,112,151,.24),transparent 68%),
    linear-gradient(108deg,#fff 0%,#fff 39%,#e9f0f5 55%,#294d69 76%,#071827 100%);
}
.adPromo .promoSlide::after{
  background:
    linear-gradient(0deg,rgba(7,24,39,.08),transparent 34%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 34%,rgba(234,241,246,.62) 53%,rgba(8,28,46,.05) 72%,rgba(5,18,32,.25) 100%);
}
.adPromo .promoEyebrow{color:#174566;background:#edf4f8;border-color:#cbdce7}
.adPromo .promoCta{background:linear-gradient(135deg,#173c5a,#081d31);box-shadow:0 14px 30px rgba(7,29,49,.28)}
.adPromo .promoArtwork img{filter:saturate(.95) contrast(1.04) drop-shadow(0 22px 30px rgba(3,18,32,.22))}
.adPromo::before{
  background:linear-gradient(90deg,#061522 0%,#102d45 28%,#286b91 58%,#79b8d0 82%,#d9e9f0 100%);
  box-shadow:0 5px 18px rgba(8,35,57,.28),0 0 20px rgba(42,107,145,.16);
}
.adPromo::after{
  background:linear-gradient(90deg,#061522 0%,#0d2b45 30%,#286b91 58%,#173d5a 82%,#061522 100%);
  box-shadow:0 -5px 18px rgba(5,24,40,.25);
}

/* Ruta del proceso animada con SVG y GSAP MotionPath. */
.processSection{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%)}
.processSection::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(circle at 50% 72%,rgba(44,151,196,.08),transparent 34%);
}
.processSection>*{position:relative;z-index:1}
.processModeSwitch{border-color:#d6e1e9;background:#f2f6f9;box-shadow:0 18px 44px rgba(8,31,52,.08)}
.processModeBtn.active{background:linear-gradient(135deg,#102d49,#071727);box-shadow:0 14px 28px rgba(5,25,43,.2)}
.processModeBtn.active i{color:#123c59;background:#e7f2f7}
.processGrid::before,.processGrid::after{display:none}
.processRouteMotion{position:absolute;z-index:0;top:28px;left:0;width:100%;height:60px;overflow:visible;pointer-events:none}
.processRouteBase,.processRouteProgress{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.processRouteBase{stroke:#dce6ec;stroke-width:2}
.processRouteProgress{stroke:url(#processRouteGradient);stroke-width:2.5;filter:url(#processRouteGlow)}
.processRouteCourier{fill:#77d3ee;filter:url(#processRouteGlow)}
.processCard{will-change:transform,opacity}
.processIcon{
  position:relative;color:#153f60!important;background:#f3f8fb!important;border-color:#fff;
  box-shadow:0 0 0 1px #cbdce7,0 12px 28px rgba(12,48,77,.13),inset 0 0 22px rgba(67,155,194,.08);
}
.processIcon::before{
  content:"";position:absolute;inset:-8px;border:1px solid rgba(38,109,145,.16);border-radius:50%;
  transform:scale(.82);opacity:0;transition:transform .4s var(--ease-out),opacity .4s;
}
.processCard:hover .processIcon{color:#fff!important;background:linear-gradient(145deg,#245b7d,#081d31)!important;box-shadow:0 16px 34px rgba(7,29,49,.22),0 0 0 1px #517f9d}
.processCard:hover .processIcon::before{transform:scale(1);opacity:1}
.processIcon svg>*{vector-effect:non-scaling-stroke}
.processCard>span{color:#617b8f}
.processCard h3{color:#102d45}
.processCard p{color:#6c7f8d}
.processTag,.processTagWa{color:#174f73;background:#eaf3f7}
@media(max-width:1100px){
  .processRouteMotion{display:none}
}
@media(max-width:760px){
  .processGrid::before{display:block;background:#dce6ec}
  .processGrid::after{display:block;background:linear-gradient(180deg,#173b59,#2b91ba 52%,#081d31)}
}
@media(prefers-reduced-motion:reduce){
  .processRouteProgress{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .processRouteCourier{display:none}
  .processCard{opacity:1!important;transform:none!important}
  .processIcon svg>*{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* Banner limpio: superficie blanca, sin barras ni fondos de color. */
.adPromo{
  border:1px solid rgba(13,39,60,.1);background:#fff;
  box-shadow:0 24px 60px rgba(10,34,54,.14),0 5px 16px rgba(10,34,54,.06);
}
.adPromo::before,.adPromo::after{display:none}
.adPromo .promoSlide,
.adPromo .promoSlide[data-theme="coral"],
.adPromo .promoSlide[data-theme="green"],
.adPromo .promoSlide[data-theme="cyan"]{background:#fff}
.adPromo .promoSlide::after{background:none}
.adPromo .promoSlide[data-image-fit="cover"] .promoArtwork::after{background:none}
.adPromo .promoArtwork::after{background:none}
.adPromo .promoArtwork img{filter:drop-shadow(0 20px 24px rgba(8,28,44,.16))}
.adPromo .promoControls{box-shadow:0 10px 28px rgba(4,18,31,.2)}

/* Relleno orgánico por etapa, transformado con MorphSVG. */
.processIcon{isolation:isolate;overflow:visible}
.processIcon>svg:not(.processColorArt){position:relative;z-index:2;filter:drop-shadow(0 2px 3px rgba(3,18,31,.18))}
.processColorArt{position:absolute;z-index:0;inset:-9px;width:calc(100% + 18px)!important;height:calc(100% + 18px)!important;overflow:visible;pointer-events:none}
.processColorShape{stroke:none!important;filter:drop-shadow(0 7px 9px rgba(9,33,52,.2))}
.processColorArt-blue .processColorShape{fill:#4387c1}
.processColorArt-cyan .processColorShape{fill:#39b9ce}
.processColorArt-amber .processColorShape{fill:#eea53a}
.processColorArt-violet .processColorShape{fill:#7768bd}
.processColorArt-coral .processColorShape{fill:#df6f69}
.processColorArt-navy .processColorShape{fill:#244a6a}
.processCard:nth-child(1) .processIcon,
.processCard:nth-child(2) .processIcon,
.processCard:nth-child(3) .processIcon,
.processCard:nth-child(4) .processIcon,
.processCard:nth-child(5) .processIcon,
.processCard:nth-child(6) .processIcon{color:#fff!important;background:#fff!important}
.processCard:hover .processColorShape{filter:drop-shadow(0 10px 13px rgba(8,30,48,.3)) brightness(1.06)}
.processCard:hover .processIcon{background:#fff!important;color:#fff!important}
@media(prefers-reduced-motion:reduce){.processColorShape{opacity:1!important;transform:none!important}}

/* Nodos circulares 3D, contenidos dentro de un aro limpio. */
.processIcon{
  width:72px;height:72px;border:5px solid rgba(255,255,255,.96);border-radius:50%;
  background:#fff!important;box-shadow:
    0 0 0 1px rgba(31,73,103,.28),
    0 13px 18px -7px rgba(6,29,47,.38),
    0 4px 8px rgba(8,36,58,.18),
    inset 0 1px 0 #fff!important;
}
.processColorArt{inset:0;width:100%!important;height:100%!important;border-radius:50%;overflow:hidden}
.processColorShape{filter:none;transform-origin:center}
.processColorShine{fill:#fff;opacity:.42;filter:blur(2px);pointer-events:none}
.processIcon::after{
  content:"";position:absolute;z-index:1;inset:3px;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.48),inset 0 -7px 10px rgba(3,20,34,.18);
}
.processIcon>svg:not(.processColorArt){width:25px;height:25px;filter:drop-shadow(0 2px 2px rgba(2,18,31,.24))}
.processCard:hover .processIcon{
  transform:translateY(-5px) scale(1.055);background:#fff!important;
  box-shadow:0 0 0 1px rgba(31,73,103,.34),0 19px 25px -9px rgba(6,29,47,.42),0 6px 11px rgba(8,36,58,.18)!important;
}
.processCard:hover .processColorShape{filter:brightness(1.04)}
@media(max-width:760px){.processIcon{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){.processColorShine{opacity:.42!important}}

/* Franja de tiendas: verde bosque profundo con volumen azul marino. */
.storeBand::before{
  background:
    radial-gradient(ellipse 54% 110% at 88% 48%,rgba(25,105,88,.28),transparent 70%),
    radial-gradient(ellipse 42% 90% at 16% 65%,rgba(15,55,66,.38),transparent 72%),
    linear-gradient(108deg,rgba(3,20,27,.96) 0%,rgba(5,43,40,.94) 38%,rgba(8,64,52,.9) 68%,rgba(3,27,34,.96) 100%),
    url('assets/fondo3.webp') center 55%/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(154,216,198,.12),inset 0 -30px 70px rgba(0,12,20,.22);
}
.storeBandIntro span{color:#9ddac8;text-shadow:0 2px 12px rgba(0,10,15,.5)}
.storeBandIntro b{color:#fff;text-shadow:0 5px 26px rgba(0,10,15,.62)}
.storeRail{perspective:1000px}
.storeRail::before{border-color:rgba(157,218,200,.22)}
.storeRail a{
  position:relative;overflow:hidden;border-color:rgba(255,255,255,.82);
  background:linear-gradient(145deg,#fff 0%,#f4f7f7 100%);
  box-shadow:0 20px 34px rgba(0,15,22,.36),0 6px 12px rgba(0,15,22,.18),inset 0 1px 0 #fff;
  transform-style:preserve-3d;will-change:transform,opacity;
}
.storeRail a::after{
  content:"";position:absolute;inset:-55% auto -55% -35%;width:24%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  transform:rotate(18deg) translateX(-280%);transition:transform .75s var(--ease-out);
}
.storeRail a:hover,.storeRail a:focus-visible{
  transform:translateY(-9px) rotateX(4deg) scale(1.035);border-color:#fff;
  box-shadow:0 30px 48px rgba(0,14,21,.46),0 10px 18px rgba(0,14,21,.2),0 0 0 3px rgba(137,205,185,.13),inset 0 1px 0 #fff;
}
.storeRail a:hover::after,.storeRail a:focus-visible::after{transform:rotate(18deg) translateX(650%)}
.storeRail a img{position:relative;z-index:1;filter:saturate(.96) contrast(1.04);transition:transform .45s var(--ease-out),filter .45s}
.storeRail a:hover img,.storeRail a:focus-visible img{transform:translateZ(18px) scale(1.06);filter:saturate(1.08) contrast(1.06)}
@media(prefers-reduced-motion:reduce){.storeRail a{opacity:1!important;transform:none!important}.storeRail a::after{display:none}}

/* Soluciones logísticas: carrusel horizontal informativo. */
.servicesSection{display:block;padding:64px clamp(20px,5vw,72px) 76px;background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.servicesSection .serviceTitle{max-width:1420px;margin:0 auto 18px;text-align:left}
.servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start;color:var(--brand-strong)}
.servicesCarousel{max-width:1420px;margin:0 auto}
.servicesCarouselToolbar{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-bottom:14px}
.servicesCarouselCount{margin-right:auto;color:#75899a;font:700 .65rem 'JetBrains Mono',monospace;letter-spacing:.13em}
.servicesCarouselArrow{
  display:grid;width:40px;height:40px;place-items:center;border:1px solid #dce5eb;border-radius:50%;
  color:#17354d;background:#fff;box-shadow:0 8px 20px rgba(17,45,66,.08);cursor:pointer;
  transition:transform .25s var(--ease-out),color .25s,background .25s,box-shadow .25s;
}
.servicesCarouselArrow:hover{transform:translateY(-2px);color:#fff;background:#153c59;box-shadow:0 13px 25px rgba(10,42,65,.2)}
.servicesCarouselViewport{max-width:none;overflow:hidden;border-radius:20px;touch-action:pan-y;cursor:grab}
.servicesCarouselViewport:active{cursor:grabbing}
.servicesCarouselTrack{
  display:flex;grid-template-columns:none;gap:14px;width:max-content;transform:translate3d(0,0,0);
  transition:none!important;will-change:transform;
}
.serviceSlide{
  position:relative;display:block;flex:0 0 464px;width:464px;
  min-height:220px;aspect-ratio:auto;overflow:hidden;border:1px solid #dfe7ec;border-radius:18px;background:#fff;
  box-shadow:0 16px 34px rgba(19,48,68,.09),0 5px 12px rgba(111,81,45,.035);transform:none!important;
  transition:border-color .3s,box-shadow .3s!important;
}
.serviceSlide::after{display:none}
.serviceSlide img{
  position:absolute;z-index:0;top:8px;right:8px;bottom:8px;left:auto;width:45%;height:calc(100% - 16px);
  object-fit:cover;border-radius:13px;filter:saturate(.94) contrast(1.02);
  transform:translateX(var(--service-image-x,0)) scale(var(--service-image-scale,1))!important;
}
.serviceSlideBody{
  position:relative;z-index:1;inset:auto;display:flex;width:56%;min-height:220px;justify-content:flex-start;
  padding:24px 18px 20px 22px;background:linear-gradient(90deg,#fff 82%,rgba(255,255,255,.88) 100%);
}
.serviceSlideBody>span{display:block;margin:0 0 13px;color:var(--brand-strong);font-size:.59rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.serviceSlideBody h3{margin:0 0 9px;padding:0;color:#142d41;font-size:1rem;font-weight:800;line-height:1.23;letter-spacing:-.03em;text-shadow:none}
.serviceSlideBody p{display:block;margin:0 0 16px;color:#778895;font-size:.69rem;line-height:1.58}
.serviceSlideBody a{
  position:relative;inset:auto;display:inline-flex;width:max-content;align-items:center;gap:7px;
  margin-top:auto;padding:0;border:0;color:var(--brand-strong);font-size:.64rem;font-weight:800;text-decoration:none;
}
.serviceSlideBody a b{display:inline;color:var(--brand);font-size:.82rem;transition:transform .25s}
.serviceSlideBody a:hover b{transform:translateX(4px)}
.serviceSlide:hover{border-color:#c8d8e2;box-shadow:0 24px 46px rgba(19,48,68,.14),0 8px 18px rgba(111,81,45,.06)}
.serviceSlide:hover img{filter:saturate(1.04) contrast(1.04)}
.serviceSlide[aria-hidden="true"]{visibility:visible}
@media(max-width:1080px){
  .serviceSlide{flex-basis:420px;width:420px}
}
@media(max-width:680px){
  .servicesSection{padding:50px 16px 58px}
  .serviceSlide{flex-basis:calc(100vw - 32px);width:calc(100vw - 32px);min-height:205px}
  .serviceSlideBody{width:59%;min-height:205px;padding:20px 14px 18px 18px}
  .serviceSlide img{width:42%}
}
@media(prefers-reduced-motion:reduce){.servicesCarouselTrack{transition:none!important}.serviceSlide img,.serviceSlideBody{opacity:1!important;transform:none!important}}

/* Una solución por vista: composición amplia 50/50. */
.servicesSection{padding-top:72px;padding-bottom:88px}
.servicesSection .serviceTitle,.servicesCarousel{max-width:1120px}
.servicesCarouselToolbar{margin-bottom:16px}
.servicesCarouselViewport{border-radius:26px}
.servicesCarouselTrack{gap:18px}
.serviceSlide{
  flex:0 0 1120px;width:1120px;min-height:430px;border-radius:26px;
  box-shadow:0 28px 70px rgba(18,47,68,.14),0 8px 22px rgba(74,52,29,.06);
}
.serviceSlide img{top:12px;right:12px;bottom:12px;width:50%;height:calc(100% - 24px);border-radius:20px}
.serviceSlideBody{
  width:51%;min-height:430px;padding:52px clamp(32px,4vw,62px) 44px;
  background:linear-gradient(90deg,#fff 88%,rgba(255,255,255,.9) 100%);
}
.serviceSlideBody>span{margin-bottom:19px;font-size:.68rem;letter-spacing:.13em}
.serviceSlideBody h3{max-width:430px;margin-bottom:15px;font-size:clamp(1.65rem,2.25vw,2.25rem);line-height:1.08}
.serviceSlideBody p{max-width:430px;font-size:.88rem;line-height:1.72}
.serviceSlideBody a{font-size:.76rem}
@media(max-width:680px){
  .servicesSection{padding:52px 16px 64px}
  .serviceSlide{flex-basis:calc(100vw - 32px);width:calc(100vw - 32px);min-height:560px;border-radius:22px}
  .serviceSlide img{top:10px;left:10px;right:10px;width:calc(100% - 20px);height:48%;border-radius:16px}
  .serviceSlideBody{position:absolute;left:0;right:0;bottom:0;width:100%;min-height:54%;padding:26px 22px 24px;background:#fff}
  .serviceSlideBody h3{font-size:1.55rem}
}

/* Carrusel definitivo: tres tarjetas cuadradas en una sola fila. */
.servicesSection{padding:64px clamp(20px,5vw,72px) 82px!important}
.servicesSection .serviceTitle,.servicesCarousel{width:100%!important;max-width:1420px!important}
.servicesCarouselViewport{width:100%!important;max-width:1420px!important;border-radius:22px!important;overflow:hidden!important}
.servicesCarouselTrack{display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;width:max-content!important;gap:16px!important}
.serviceSlide{
  position:relative!important;display:block!important;grid-column:auto!important;
  flex:0 0 464px;width:464px;min-width:0!important;min-height:0!important;aspect-ratio:1/1!important;
  border-radius:22px!important;background:#fff!important;overflow:hidden!important;
  box-shadow:0 22px 48px rgba(18,47,68,.13),0 7px 18px rgba(98,68,34,.07)!important;
}
.serviceSlide img{
  position:absolute!important;top:10px!important;left:10px!important;right:10px!important;bottom:auto!important;
  width:calc(100% - 20px)!important;height:53%!important;object-fit:cover!important;border-radius:16px!important;
}
.serviceSlideBody{
  position:absolute!important;z-index:2;left:0!important;right:0!important;top:auto!important;bottom:0!important;
  width:100%!important;min-height:48%!important;padding:23px 25px 22px!important;background:#fff!important;
}
.serviceSlideBody>span{margin-bottom:10px!important;font-size:.58rem!important}
.serviceSlideBody h3{margin-bottom:8px!important;font-size:1.15rem!important;line-height:1.16!important}
.serviceSlideBody p{margin-bottom:11px!important;font-size:.68rem!important;line-height:1.55!important}
.serviceSlideBody a{font-size:.63rem!important}
.serviceSlide:hover{box-shadow:0 29px 58px rgba(18,47,68,.17),0 9px 22px rgba(98,68,34,.09)!important}
@media(max-width:1080px){.serviceSlide{flex-basis:430px;width:430px}}
@media(max-width:680px){
  .servicesSection{padding:50px 16px 62px!important}
  .serviceSlide{flex-basis:calc(100vw - 32px);width:calc(100vw - 32px);aspect-ratio:1/1.12!important}
  .serviceSlide img{height:51%!important}
  .serviceSlideBody{min-height:50%!important;padding:21px 21px 20px!important}
}

/* Acabado sin contornos: profundidad creada únicamente con sombras. */
.servicesCarouselViewport{padding:12px 8px 26px;margin:-12px -8px -26px;width:calc(100% + 16px)!important;max-width:1436px!important}
.serviceSlide{
  border:0!important;outline:0!important;
  box-shadow:0 18px 40px rgba(18,47,68,.1),0 4px 12px rgba(84,58,31,.055)!important;
}
.serviceSlide:hover{
  border:0!important;
  box-shadow:0 25px 52px rgba(18,47,68,.14),0 7px 16px rgba(84,58,31,.07)!important;
}
.servicesCarouselToolbar{display:flex!important;visibility:visible!important;opacity:1!important}
.servicesCarouselArrow{display:grid!important}
.servicesCarouselTrack{transform:translate3d(var(--services-track-x,0px),0,0)!important}
.servicesCarouselTrack{width:100%!important}
.serviceSlide[aria-hidden="true"]{display:none!important}

/* Tarjeta vertical única, centrada y sin una segunda fila. */
.servicesSection .serviceTitle,.servicesCarousel{max-width:540px}
.servicesCarouselViewport{width:100%;border-radius:28px;overflow:hidden!important}
.servicesCarouselTrack{
  display:flex!important;grid-template-columns:none!important;flex-flow:row nowrap!important;
  align-items:stretch;width:max-content!important;gap:18px!important;
}
.serviceSlide{
  display:block!important;grid-column:auto!important;flex:0 0 540px;width:540px;min-width:0;
  min-height:690px;aspect-ratio:auto;border-radius:28px;background:#fff;
  box-shadow:0 30px 72px rgba(20,45,63,.16),0 10px 24px rgba(98,68,34,.08)!important;
}
.serviceSlide img{
  top:12px!important;left:12px!important;right:12px!important;bottom:auto!important;
  width:calc(100% - 24px)!important;height:56%!important;object-fit:cover!important;border-radius:21px!important;
}
.serviceSlideBody{
  position:absolute!important;z-index:2;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:100%!important;min-height:46%!important;padding:34px 38px 32px!important;background:#fff!important;
}
.serviceSlideBody>span{margin-bottom:14px;font-size:.65rem}
.serviceSlideBody h3{font-size:1.8rem;line-height:1.1}
.serviceSlideBody p{font-size:.82rem;line-height:1.65}
.serviceSlide:hover{box-shadow:0 36px 82px rgba(20,45,63,.19),0 12px 28px rgba(98,68,34,.1)!important}
@media(max-width:600px){
  .servicesSection .serviceTitle,.servicesCarousel{max-width:100%}
  .serviceSlide{flex-basis:calc(100vw - 32px);width:calc(100vw - 32px);min-height:600px;border-radius:23px}
  .serviceSlide img{height:52%!important}
  .serviceSlideBody{min-height:50%!important;padding:27px 23px 24px!important}
  .serviceSlideBody h3{font-size:1.55rem}
}

/* Mayor presencia de color, similar a las manchas luminosas de la referencia. */
.heroBubbles{z-index:3}
.heroBubble.hb1{
  width:860px;height:650px;right:-240px;top:-250px;opacity:.86;
  background:radial-gradient(ellipse at 54% 48%,rgba(68,222,248,.82) 0%,rgba(36,199,236,.48) 38%,rgba(36,199,236,.2) 62%,rgba(36,199,236,.05) 74%,transparent 84%);
}
.heroBubble.hb2{
  width:620px;height:540px;left:35%;top:27%;opacity:.7;
  background:radial-gradient(ellipse at 50% 50%,rgba(177,229,94,.78) 0%,rgba(139,197,63,.42) 40%,rgba(139,197,63,.17) 62%,rgba(139,197,63,.04) 75%,transparent 84%);
}
.heroBubble.hb3{
  width:850px;height:590px;right:-250px;bottom:-210px;opacity:.72;
  background:radial-gradient(ellipse at 50% 50%,rgba(246,91,158,.8) 0%,rgba(236,61,139,.44) 40%,rgba(236,61,139,.18) 62%,rgba(236,61,139,.04) 75%,transparent 84%);
}
.heroBubble.hb4{
  width:670px;height:520px;left:-230px;bottom:-190px;opacity:.7;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,158,78,.84) 0%,rgba(255,122,26,.46) 40%,rgba(255,122,26,.18) 62%,rgba(255,122,26,.04) 75%,transparent 84%);
}
.heroBubble.hb5{
  width:540px;height:430px;left:-170px;top:-150px;opacity:.5;
  background:radial-gradient(ellipse at 50% 50%,rgba(78,224,249,.72) 0%,rgba(36,199,236,.36) 42%,rgba(36,199,236,.13) 64%,transparent 83%);
}
@media(max-width:640px){
  .heroBubble.hb1{width:500px;height:390px;right:-220px;top:-100px;opacity:.78}
  .heroBubble.hb2{width:370px;height:330px;left:18%;top:35%;opacity:.6}
  .heroBubble.hb3{width:510px;height:370px;right:-220px;bottom:-110px;opacity:.66}
  .heroBubble.hb4{width:430px;height:340px;left:-210px;bottom:-90px;opacity:.64}
  .heroBubble.hb5{width:340px;height:280px;left:-170px;top:-80px;opacity:.44}
}

/* Carrusel editorial de soluciones con fotografías optimizadas. */
.servicesSection{
  grid-template-columns:minmax(280px,.5fr) minmax(0,1.5fr);align-items:center;
  gap:clamp(38px,5vw,78px);padding-top:96px;padding-bottom:96px;
  color:#fff;background:
    radial-gradient(circle at 8% 16%,rgba(236,61,139,.2),transparent 28%),
    linear-gradient(135deg,#172d50 0%,#102541 58%,#0b1d34 100%);
}
.servicesSection .serviceTitle{max-width:470px}
.servicesSection .serviceTitle .sectionEyebrow{color:#ff91bd}
.servicesSection .serviceTitle .sectionEyebrow::before{background:var(--accent)}
.servicesSection .serviceTitle h2{color:#fff;font-size:clamp(2.7rem,4.35vw,4.9rem);text-shadow:0 12px 32px rgba(2,11,24,.26)}
.servicesSection .serviceTitle h2 em{color:#ff9a3d}
.servicesSection .serviceTitle p{color:rgba(224,234,244,.72);font-size:.95rem;line-height:1.7}
.servicesCarousel{min-width:0;position:relative}
.servicesCarouselToolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:18px}
.servicesCarouselCount{margin-right:auto;color:#8fa5bd;font:700 .67rem 'JetBrains Mono',monospace;letter-spacing:.12em}
.servicesCarouselArrow{
  display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  color:#fff;background:rgba(255,255,255,.045);font-size:1.25rem;cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s;
}
.servicesCarouselArrow:hover{transform:translateY(-2px);border-color:#ff91bd;background:rgba(236,61,139,.18)}
.servicesCarouselArrow:focus-visible,.servicesCarouselViewport:focus-visible{outline:2px solid #ff91bd;outline-offset:4px}
.servicesCarouselViewport{min-width:0;overflow:hidden;border-radius:20px;touch-action:pan-y}
.servicesCarouselTrack{display:flex;gap:18px;transform:translate3d(0,0,0);transition:transform .7s var(--ease-out);will-change:transform}
.serviceSlide{
  position:relative;display:flex;flex:0 0 calc((100% - 36px)/3);min-width:0;overflow:hidden;flex-direction:column;
  border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.055);
  box-shadow:0 20px 42px rgba(2,12,26,.2);transition:transform .28s var(--ease-out),border-color .28s,background .28s;
}
.serviceSlide:hover{transform:translateY(-5px);border-color:rgba(255,145,189,.58);background:rgba(255,255,255,.085)}
.serviceSlide img{width:100%;aspect-ratio:5/3;object-fit:cover;transition:transform .8s var(--ease-out),filter .4s;filter:saturate(.94) contrast(1.02)}
.serviceSlide:hover img{transform:scale(1.045);filter:saturate(1.06) contrast(1.03)}
.serviceSlideBody{display:flex;flex:1;flex-direction:column;padding:22px 22px 24px}
.serviceSlideBody>span{color:#ff91bd;font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.serviceSlideBody h3{margin:9px 0 10px;color:#fff;font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.2;letter-spacing:-.025em}
.serviceSlideBody p{margin:0 0 20px;color:rgba(219,230,241,.72);font-size:.76rem;line-height:1.6}
.serviceSlideBody a{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);color:#fff;font-size:.7rem;font-weight:800}
.serviceSlideBody a b{color:#ff91bd;font-size:1rem;transition:transform .2s}.serviceSlideBody a:hover b{transform:translateX(4px)}
@media(max-width:1180px){
  .servicesSection{grid-template-columns:1fr;align-items:start}
  .servicesSection .serviceTitle{max-width:760px;text-align:left;margin:0}
  .servicesSection .serviceTitle p{max-width:620px;margin:0}
  .servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start}
}
@media(max-width:900px){.serviceSlide{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:640px){
  .servicesSection{padding:72px 18px;gap:30px}
  .servicesSection .serviceTitle h2{font-size:2.65rem}
  .servicesCarouselToolbar{margin-bottom:14px}
  .servicesCarouselArrow{width:40px;height:40px}
  .serviceSlide{flex-basis:100%;border-radius:18px}
  .serviceSlideBody{padding:19px 19px 22px}
}
@media(prefers-reduced-motion:reduce){.servicesCarouselTrack,.serviceSlide,.serviceSlide img{transition:none}}

/* Tarjetas compactas y cuadradas: título sobre la fotografía. */
.serviceSlide{
  flex-basis:calc((100% - 54px)/4);aspect-ratio:1;min-height:0;
  border-color:rgba(255,255,255,.18);border-radius:18px;background:#0b1728;
}
.serviceSlide::after{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,12,23,.02) 22%,rgba(4,12,23,.2) 52%,rgba(4,12,23,.9) 100%);
}
.serviceSlide img{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  filter:saturate(1.02) contrast(1.04);
}
.serviceSlideBody{position:absolute;z-index:2;inset:0;display:flex;justify-content:flex-end;padding:22px}
.serviceSlideBody>span,.serviceSlideBody p{display:none}
.serviceSlideBody h3{
  position:relative;z-index:3;margin:0;padding-right:22px;color:#fff;
  font-size:clamp(1.12rem,1.45vw,1.48rem);font-weight:800;line-height:1.08;letter-spacing:-.035em;
  text-shadow:0 2px 3px rgba(0,0,0,.9),0 8px 20px rgba(0,0,0,.82);
  pointer-events:none;
}
.serviceSlideBody a{
  position:absolute;z-index:2;inset:0;margin:0;padding:0;border:0;font-size:0;
}
.serviceSlideBody a b{display:none}
.serviceSlide:hover{transform:translateY(-4px);border-color:#ff91bd;box-shadow:0 22px 46px rgba(2,12,26,.38),0 0 0 1px rgba(236,61,139,.16)}
.serviceSlide:hover img{transform:scale(1.055);filter:saturate(1.1) contrast(1.06)}
@media(max-width:1180px){.serviceSlide{flex-basis:calc((100% - 36px)/3)}}
@media(max-width:900px){.serviceSlide{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:640px){
  .servicesCarouselViewport{max-width:390px}
  .serviceSlide{flex-basis:100%;border-radius:17px}
  .serviceSlideBody{padding:22px}
  .serviceSlideBody h3{font-size:1.45rem}
}

/* Sección más compacta, azul marino y con tipografía de mayor precisión. */
.servicesSection{
  padding-top:44px;padding-bottom:44px;
  background:
    radial-gradient(ellipse 34% 85% at 0% 12%,rgba(112,43,102,.18),transparent 72%),
    linear-gradient(135deg,#0b1d34 0%,#07172a 56%,#050f1d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.04);
}
.servicesSection .serviceTitle h2{
  margin:15px 0 14px;font-family:var(--font-body);font-size:clamp(2.65rem,4vw,4.55rem);
  font-weight:800;line-height:.98;letter-spacing:-.06em;text-shadow:0 10px 30px rgba(0,0,0,.24);
}
.servicesSection .serviceTitle p{color:rgba(210,222,235,.68);font-size:.88rem;line-height:1.65}
.servicesSection .serviceTitle .sectionEyebrow{font-size:.68rem;letter-spacing:.15em}
.servicesCarouselToolbar{margin-bottom:14px}
.servicesCarouselCount{color:#8298b0}
.serviceSlide{border-color:rgba(255,255,255,.13);box-shadow:0 18px 36px rgba(0,7,18,.3)}
.serviceSlide::after{background:linear-gradient(180deg,rgba(2,8,16,.01) 18%,rgba(2,8,16,.14) 50%,rgba(2,8,16,.92) 100%)}
.serviceSlideBody{padding:20px}
.serviceSlideBody h3{
  font-family:var(--font-body);font-size:clamp(1.05rem,1.3vw,1.34rem);font-weight:800;
  line-height:1.12;letter-spacing:-.035em;text-shadow:0 3px 7px rgba(0,0,0,.9),0 12px 26px rgba(0,0,0,.62);
}
@media(max-width:640px){
  .servicesSection{padding-top:38px;padding-bottom:38px}
  .servicesSection .serviceTitle h2{font-size:2.5rem}
  .serviceSlideBody h3{font-size:1.35rem}
}

/* Franja de tiendas alineada con la identidad magenta de ElogBox. */
.storeBand::before{
  background:
    radial-gradient(circle at 10% 100%,rgba(255,153,202,.34),transparent 30%),
    radial-gradient(circle at 88% 2%,rgba(255,190,220,.26),transparent 28%),
    linear-gradient(118deg,#74103f 0%,#a91659 24%,#d82375 54%,#ec4b96 78%,#9a164f 100%);
}
.storeBandIntro span{color:#ffd4e7}
.storeBandIntro b{text-shadow:0 4px 20px rgba(83,5,39,.28)}
.storeRail a{
  border-color:rgba(255,255,255,.76);background:rgba(255,255,255,.96);
  box-shadow:0 17px 34px rgba(91,8,45,.2),inset 0 1px 0 #fff;
}
.storeRail a:hover,.storeRail a:focus-visible{
  border-color:#fff;box-shadow:0 24px 46px rgba(91,8,45,.3),0 0 0 3px rgba(255,188,218,.2),inset 0 1px 0 #fff;
}

/* Tarifario azul marino: más legible, ligero y coherente con el sitio. */
.tarifBigCard{
  background:linear-gradient(145deg,#102744 0%,#0b1d34 58%,#081729 100%);
  border:1px solid rgba(124,160,193,.24);border-radius:26px;
  box-shadow:0 30px 70px rgba(8,23,41,.24),0 10px 28px rgba(141,17,80,.1);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tarifCardHead{
  padding:24px 34px;
  background:
    radial-gradient(circle at 90% 0%,rgba(255,152,200,.16),transparent 34%),
    linear-gradient(110deg,#891447 0%,#b41f62 46%,#d6357e 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tarifCardBadge{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(78,5,35,.22);
}
.tarifCardTitle{font-family:var(--font-body);font-weight:800;letter-spacing:-.035em}
.tarifCardSub{color:rgba(255,255,255,.66);letter-spacing:.02em}
.tarifRouteDot{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.tarifRouteDotEnd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.tarifRouteLine{background:rgba(255,255,255,.24)}
.tarifRouteLine i{background:#ffd0e3;box-shadow:0 0 12px rgba(255,208,227,.72)}
.tarifCols{padding:12px 34px;background:#0d213a;border-color:rgba(145,177,204,.14)}
.tarifCols span{color:#82a3bd;font-size:.65rem;letter-spacing:.14em}
.tarifRow{
  padding:13px 34px;border-color:rgba(145,177,204,.1);
  background:rgba(255,255,255,.012);
}
.tarifRow:nth-child(even){background:rgba(255,255,255,.026)}
.tarifRow::before{background:linear-gradient(180deg,#ec4b96,#9a164f)}
.tarifRow::after{background:linear-gradient(90deg,rgba(236,75,150,.11),rgba(69,164,211,.05) 58%,transparent)}
.tarifRow:hover{background:rgba(70,137,183,.09)}
.tarifRow>div,.tarifRow>span{color:#a8bfd2}
.tarifRow:hover>div,.tarifRow:hover>span{color:#edf6fb}
.tr-range b{color:#f5f8fb;font-size:.88rem}
.tr-range small{color:#7294ae}
.tr-rate{color:#f05b9f!important}
.tr-rate em{color:#7294ae}
.tr-fixed,.tarifFlat .tr-rate{color:#f2a7ca!important}
.tarifFlat .tr-range b{color:#e9c5d7}
.tr-nac{color:#86c9e1!important}
.tarifRowFeatured{
  background:linear-gradient(90deg,rgba(236,61,139,.14),rgba(35,199,232,.07),transparent)!important;
  border-color:rgba(236,61,139,.2)!important;
}
.tarifRowFeatured .tr-range b{color:#ff8fbd}
.tarifRowFeatured .tr-range small{color:#74d8e9}
.tarifRowFeatured::before{background:linear-gradient(180deg,#ff75b1,#23c7e8)!important}
.tarifCardFoot{padding:18px 34px;background:#0a1a2f;border-color:rgba(145,177,204,.13)}
.tarifCardFoot span{color:#7899b2}
.tarifCardFoot .btn.primary{background:#b82063;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 24px rgba(86,8,42,.28)}
.tarifCardFoot .btn.primary:hover{background:#ce2b74;box-shadow:0 14px 30px rgba(86,8,42,.36)}

/* Servicios compactos: seis fichas visibles, sin carrusel ni fondo oscuro. */
.servicesSection{
  display:block;padding:56px clamp(20px,5vw,72px) 62px;color:#102434;
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);box-shadow:none;
}
.servicesSection .serviceTitle{max-width:1420px;margin:0 auto 20px;text-align:left}
.servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start;color:var(--brand-strong);font-size:.64rem;letter-spacing:.15em}
.servicesSection .serviceTitle .sectionEyebrow::before{background:var(--brand)}
.servicesSection .serviceTitle h2,.servicesSection .serviceTitle p{display:none}
.servicesCarousel{max-width:1420px;margin:0 auto}
.servicesCarouselToolbar{display:none}
.servicesCarouselViewport{max-width:none;overflow:visible;border-radius:0}
.servicesCarouselTrack{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  transform:none!important;transition:none;
}
.serviceSlide{
  position:relative;display:block;min-height:178px;aspect-ratio:auto;overflow:hidden;
  border:1px solid #e5e9ee;border-radius:15px;background:#fff;
  box-shadow:0 8px 24px rgba(16,36,52,.055);transform:none!important;
}
.serviceSlide::after{display:none}
.serviceSlide img{
  position:absolute;z-index:0;top:8px;right:8px;bottom:8px;left:auto;
  width:43%;height:calc(100% - 16px);object-fit:cover;border-radius:11px;
  filter:saturate(.94) contrast(1.02);transform:none!important;
}
.serviceSlideBody{
  position:relative;z-index:1;inset:auto;display:flex;width:57%;min-height:178px;
  justify-content:flex-start;padding:20px 16px 17px 20px;background:transparent;
}
.serviceSlideBody>span{
  display:block;margin:0 0 11px;color:var(--brand-strong);
  font-size:.56rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.serviceSlideBody h3{
  margin:0 0 8px;padding:0;color:#17283a;font-family:var(--font-body);
  font-size:.9rem;font-weight:800;line-height:1.22;letter-spacing:-.025em;text-shadow:none;
}
.serviceSlideBody p{
  display:block;margin:0 0 12px;color:#6f7e8c;font-size:.64rem;line-height:1.52;
}
.serviceSlideBody a{
  position:relative;inset:auto;display:inline-flex;width:max-content;align-items:center;gap:6px;
  margin-top:auto;padding:0;border:0;color:var(--brand-strong);font-size:.61rem;font-weight:800;text-decoration:none;
}
.serviceSlideBody a b{display:inline;color:var(--brand);font-size:.78rem}
.serviceSlide:hover{
  transform:translateY(-3px)!important;border-color:rgba(187,35,104,.28);
  box-shadow:0 15px 32px rgba(16,36,52,.1),0 0 0 1px rgba(236,61,139,.05);
}
.serviceSlide:hover img{transform:scale(1.025)!important;filter:saturate(1.04) contrast(1.03)}
.serviceSlide[aria-hidden="true"]{visibility:visible}
@media(max-width:1050px){.servicesCarouselTrack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .servicesSection{padding:44px 16px 50px}
  .servicesCarouselTrack{grid-template-columns:1fr;gap:10px}
  .serviceSlide{min-height:165px}
  .serviceSlideBody{width:59%;min-height:165px;padding:17px 13px 15px 16px}
  .serviceSlide img{width:41%}
}

/* Tarifario estilo documento premium: claro, sobrio y sin rosa. */
.tarifBigCard{
  position:relative;background:#fffdf9;border:1px solid #d8e1e8;border-radius:22px;
  box-shadow:0 28px 65px rgba(22,46,68,.16),0 4px 12px rgba(22,46,68,.06);
  color:#203548;
}
.tarifBigCard::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.24;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence baseFrequency='.72' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/></svg>");
}
.tarifBigCard>*{position:relative;z-index:1}
.tarifCardHead{
  padding:25px 34px;background:
    radial-gradient(circle at 92% 0%,rgba(54,191,220,.18),transparent 34%),
    linear-gradient(112deg,#17334f 0%,#102a45 58%,#0c2239 100%);
  border-bottom:0;
}
.tarifCardBadge{
  color:#fff;background:rgba(54,191,220,.13);border:1px solid rgba(115,220,239,.28);
  box-shadow:none;
}
.tarifCardTitle{color:#fff}
.tarifCardSub{color:#9db2c5}
.tarifRouteDot{color:#e8f3f8;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.tarifRouteDotEnd{color:#a9e9f3;background:rgba(54,191,220,.1);border-color:rgba(115,220,239,.28)}
.tarifRouteLine{background:rgba(255,255,255,.18)}
.tarifRouteLine i{background:#66d4e8;box-shadow:0 0 12px rgba(102,212,232,.55)}
.tarifCols{padding:12px 34px;background:#edf3f6;border-color:#dbe5eb}
.tarifCols span{color:#60788d}
.tarifRow,.tarifRow:nth-child(even){padding:14px 34px;background:rgba(255,253,249,.96);border-color:#e5ebef}
.tarifRow:nth-child(even){background:rgba(245,248,249,.95)}
.tarifRow::before{background:linear-gradient(180deg,#39b9d5,#267da5)}
.tarifRow::after{background:linear-gradient(90deg,rgba(57,185,213,.1),transparent 68%)}
.tarifRow:hover{background:#eef8fa}
.tarifRow>div,.tarifRow>span{color:#526b7e}
.tarifRow:hover>div,.tarifRow:hover>span{color:#17334f}
.tr-range b{color:#203548}
.tr-range small{color:#7c909f}
.tr-rate,.tr-fixed,.tarifFlat .tr-rate{color:#176f98!important}
.tr-rate em{color:#7890a1}
.tarifFlat .tr-range b{color:#294a61}
.tr-nac{color:#247f9c!important}
.tarifRowFeatured{
  background:linear-gradient(90deg,rgba(54,191,220,.14),rgba(219,241,245,.65),rgba(255,253,249,.95))!important;
  border-color:#bcdde5!important;
}
.tarifRowFeatured .tr-range b{color:#126c8f}
.tarifRowFeatured .tr-range small{color:#27859e}
.tarifRowFeatured::before{background:linear-gradient(180deg,#52c9df,#14739c)!important}
.tarifCardFoot{padding:19px 34px;background:#f1f5f7;border-color:#dce5ea}
.tarifCardFoot span{color:#667d8e}
.tarifCardFoot .btn.primary{
  color:#fff;background:linear-gradient(135deg,#176f98,#125271);border:1px solid #0f4b68;
  box-shadow:0 10px 22px rgba(18,82,113,.2);
}
.tarifCardFoot .btn.primary:hover{background:linear-gradient(135deg,#1b83b1,#176483);box-shadow:0 14px 28px rgba(18,82,113,.27)}

/* Cabecera logística decorativa; no interviene en los datos de tarifas. */
.tarifCardHead{position:relative;isolation:isolate;overflow:hidden;min-height:118px}
.tarifCardHead::before{
  content:"";position:absolute;z-index:0;top:-55%;right:8%;width:500px;height:225%;
  background:url('assets/fondo3.webp') center 54%/cover no-repeat;
  opacity:.82;filter:saturate(1.02) contrast(1.08) brightness(.92);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
}
.tarifCardHead::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,48,37,.98) 0%,rgba(16,65,48,.82) 36%,rgba(19,79,57,.18) 64%,rgba(10,45,34,.48) 100%);
}
.tarifCardHeadLeft{position:relative;z-index:1}
.tarifCardTitle{
  font-family:var(--font-heading);font-size:clamp(1.65rem,2.5vw,2.25rem);font-weight:600;
  line-height:1;letter-spacing:-.035em;text-shadow:0 5px 18px rgba(0,0,0,.24);
}
.tarifCardSub{margin-top:8px;color:#c3ddcf;font-size:.74rem;letter-spacing:.015em}
.tarifCardBadge{width:58px;height:58px;border-radius:17px;font-size:1.55rem}
.tarifCardBadge{background:rgba(102,190,135,.16);border-color:rgba(172,229,191,.3)}
.tarifCardRoute{position:relative;z-index:1;padding:8px 10px;border:1px solid rgba(203,238,214,.24);border-radius:12px;background:rgba(5,32,24,.52);backdrop-filter:blur(3px)}
.tarifRouteDotEnd{color:#b9e6c8;background:rgba(86,179,119,.18);border-color:rgba(174,229,193,.34)}
.tarifRouteLine i{background:#8ed5a8;box-shadow:0 0 12px rgba(142,213,168,.65)}
@media(max-width:640px){
  .tarifCardHead{min-height:0}
  .tarifCardHead::before{right:-22%;width:310px;opacity:.14}
  .tarifCardTitle{font-size:1.65rem}
  .tarifCardSub{font-size:.66rem;line-height:1.45}
}

/* Promociones sin rosa: blanco, petróleo, celeste y verde logístico. */
.adPromo{background:#f5f8f7;box-shadow:0 24px 60px rgba(9,48,55,.15),0 12px 30px rgba(33,112,105,.12)}
.adPromo .promoSlide,
.adPromo .promoSlide[data-theme="coral"],
.adPromo .promoSlide[data-theme="green"]{
  background:
    radial-gradient(ellipse 58% 120% at 82% 52%,rgba(62,190,183,.34),transparent 67%),
    radial-gradient(ellipse 36% 82% at 58% 100%,rgba(105,166,78,.2),transparent 72%),
    linear-gradient(112deg,#fff 0%,#f4f8f6 40%,#b9ded7 66%,#287f78 84%,#123f43 100%);
}
.adPromo .promoSlide::after{
  background:
    linear-gradient(0deg,rgba(233,241,238,.22),transparent 38%),
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(247,250,248,.88) 32%,rgba(207,230,224,.2) 54%,transparent 72%);
}
.adPromo .promoEyebrow{color:#185d57;background:rgba(42,143,135,.1);border-color:rgba(42,143,135,.24)}
.adPromo .promoCta{background:linear-gradient(135deg,#287f78,#174e54);box-shadow:0 14px 30px rgba(17,72,74,.25)}
.adPromo .promoArtwork img{filter:saturate(1.03) contrast(1.03) drop-shadow(0 20px 28px rgba(8,57,60,.18))}
.adPromo::before{
  background:linear-gradient(90deg,#123f43 0%,#1b6967 28%,#43aaa0 58%,#87c768 82%,#d8edca 100%);
  box-shadow:0 5px 18px rgba(27,105,103,.24),0 0 20px rgba(67,170,160,.18);
}
.adPromo::after{
  background:linear-gradient(90deg,#123f43 0%,#287f78 34%,#43aaa0 62%,#2a706c 84%,#143d43 100%);
  box-shadow:0 -5px 18px rgba(18,63,67,.22);
}

/* Franja curva con fotografía logística, sin bloque de color rosado. */
.storeBand::before{
  background:
    linear-gradient(110deg,rgba(8,42,53,.94) 0%,rgba(12,65,68,.84) 42%,rgba(31,105,91,.66) 72%,rgba(8,42,53,.88) 100%),
    url('assets/fondo3.webp') center 55%/cover no-repeat;
}
.storeBandIntro span{color:#bde9df}
.storeBandIntro b{text-shadow:0 4px 22px rgba(0,20,27,.48)}
.storeRail::before{border-color:rgba(185,235,222,.34)}
.storeRail a{box-shadow:0 17px 34px rgba(0,27,34,.24),inset 0 1px 0 #fff}
.storeRail a:hover,.storeRail a:focus-visible{box-shadow:0 24px 46px rgba(0,27,34,.32),0 0 0 3px rgba(120,201,181,.2),inset 0 1px 0 #fff}

/* Manchas orgánicas de color: sin bordes ni apariencia de burbuja. */
.hero .orb{display:none}
.heroBubbles{mix-blend-mode:screen}
.heroBubble{
  border:0;box-shadow:none;opacity:1;
  border-radius:52% 48% 63% 37%/44% 58% 42% 56%;
}
.heroBubble.hb1{
  width:760px;height:570px;right:-210px;top:-220px;opacity:.62;
  background:radial-gradient(ellipse at 52% 48%,rgba(45,213,244,.58) 0%,rgba(36,199,236,.28) 38%,rgba(36,199,236,.08) 58%,transparent 74%);
  animation:stainFloatA 28s ease-in-out infinite;
}
.heroBubble.hb2{
  width:540px;height:470px;left:38%;top:29%;opacity:.5;
  background:radial-gradient(ellipse at 50% 50%,rgba(164,219,77,.54) 0%,rgba(139,197,63,.25) 40%,rgba(139,197,63,.07) 60%,transparent 75%);
  animation:stainFloatB 25s ease-in-out -8s infinite;
}
.heroBubble.hb3{
  width:780px;height:520px;right:-230px;bottom:-190px;opacity:.54;
  background:radial-gradient(ellipse at 50% 50%,rgba(240,74,146,.56) 0%,rgba(236,61,139,.27) 40%,rgba(236,61,139,.08) 60%,transparent 75%);
  animation:stainFloatC 30s ease-in-out -12s infinite;
}
.heroBubble.hb4{
  width:590px;height:460px;left:-210px;top:auto;bottom:-170px;opacity:.5;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,145,62,.6) 0%,rgba(255,122,26,.27) 40%,rgba(255,122,26,.07) 60%,transparent 75%);
  animation:stainFloatA 27s ease-in-out -16s infinite;
}
.heroBubble.hb5{
  width:470px;height:380px;left:-150px;right:auto;top:-130px;opacity:.36;
  background:radial-gradient(ellipse at 50% 50%,rgba(64,218,245,.52) 0%,rgba(36,199,236,.2) 42%,rgba(36,199,236,.05) 62%,transparent 76%);
  animation:stainFloatB 24s ease-in-out -5s infinite;
}
@keyframes stainFloatA{0%,100%{transform:translate3d(0,0,0) rotate(-3deg) scale(1)}50%{transform:translate3d(-34px,24px,0) rotate(4deg) scale(1.05)}}
@keyframes stainFloatB{0%,100%{transform:translate3d(0,0,0) rotate(3deg) scale(.98)}50%{transform:translate3d(28px,-28px,0) rotate(-4deg) scale(1.04)}}
@keyframes stainFloatC{0%,100%{transform:translate3d(0,0,0) rotate(-2deg) scale(1.02)}50%{transform:translate3d(-24px,-22px,0) rotate(3deg) scale(.97)}}
@media(max-width:640px){
  .heroBubble.hb1{width:430px;height:340px;right:-190px;top:-90px}
  .heroBubble.hb2{width:330px;height:300px;left:24%;top:36%;opacity:.42}
  .heroBubble.hb3{width:450px;height:330px;right:-190px;bottom:-100px}
  .heroBubble.hb4{width:380px;height:300px;left:-190px;bottom:-80px}
  .heroBubble.hb5{width:300px;height:250px;left:-150px;top:-70px}
}
@media(prefers-reduced-motion:reduce){.heroBubble{animation:none}}

/* FINAL: soluciones editoriales; debe permanecer al cierre del archivo. */
.servicesSection{display:block!important;padding:78px clamp(24px,6vw,96px) 86px!important;color:#fff!important;box-shadow:none!important}
.servicesSection .serviceTitle{display:block!important;width:100%!important;max-width:1240px!important;margin:0 auto 22px!important;text-align:left!important}
.servicesSection .serviceTitle .sectionEyebrow{justify-content:flex-start!important;color:#f05a9e!important;font-size:.65rem!important;letter-spacing:.18em!important}
.servicesSection .serviceTitle h2{display:block!important;margin:18px 0 10px!important;color:#fff!important;font:700 clamp(2.35rem,3.5vw,3.65rem)/1.02 'Archivo',Arial,sans-serif!important;letter-spacing:-.047em!important;text-shadow:none!important}
.servicesSection .serviceTitle p{display:block!important;max-width:620px!important;margin:0!important;color:rgba(224,233,244,.72)!important;font:400 1rem/1.55 'Source Sans 3',Arial,sans-serif!important;letter-spacing:.002em!important}
.servicesCarousel{width:100%!important;max-width:1240px!important;margin:0 auto!important}
.servicesCarouselToolbar{display:flex!important;margin:0 0 20px!important;visibility:visible!important;opacity:1!important}
.servicesCarouselCount{color:rgba(210,224,239,.58)!important}.servicesCarouselArrow{display:grid!important;width:38px!important;height:38px!important;color:#fff!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(203,220,238,.34)!important;box-shadow:none!important}
.servicesCarouselArrow:hover{color:#fff!important;background:#d52a77!important;border-color:#f28ab9!important;box-shadow:none!important;transform:none!important}
.servicesCarouselViewport{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:0!important}
.servicesCarouselTrack{display:flex!important;grid-template-columns:none!important;flex-flow:row nowrap!important;align-items:stretch!important;width:max-content!important;gap:24px!important;transition:none!important;will-change:transform}
.servicesSection .serviceSlide,.servicesSection .serviceSlide[aria-hidden="true"]{display:flex!important;visibility:visible!important;flex-shrink:0!important;min-height:405px!important;overflow:visible!important;flex-direction:column!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.servicesSection .serviceSlide:hover{border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.servicesSection .serviceSlide img{position:relative!important;inset:auto!important;width:100%!important;height:225px!important;flex:0 0 225px!important;object-fit:cover!important;border-radius:12px!important;opacity:1!important;clip-path:none!important;filter:saturate(.96) contrast(1.04)!important;transform:none!important;transition:none!important}
.servicesSection .serviceSlideBody{position:relative!important;inset:auto!important;display:flex!important;width:100%!important;min-height:0!important;flex:1!important;padding:20px 0 4px!important;background:transparent!important;opacity:1!important;transform:none!important;transition:none!important}
.servicesSection .serviceSlideBody>span{display:block!important;margin:0 0 9px!important;color:#f05a9e!important;font:600 .67rem/1.2 'Archivo',Arial,sans-serif!important;letter-spacing:.115em!important}.servicesSection .serviceSlideBody h3{margin:0 0 10px!important;padding:0!important;color:#fff!important;font:700 clamp(1.15rem,1.4vw,1.42rem)/1.18 'Archivo',Arial,sans-serif!important;letter-spacing:-.028em!important;text-shadow:none!important}.servicesSection .serviceSlideBody p{display:block!important;margin:0 0 17px!important;color:rgba(215,227,240,.72)!important;font:400 .86rem/1.55 'Source Sans 3',Arial,sans-serif!important;letter-spacing:.003em!important}
.servicesSection .serviceSlideBody a{position:relative!important;inset:auto!important;display:inline-flex!important;width:max-content!important;margin-top:auto!important;padding:0!important;border:0!important;color:#f37bad!important;font:600 .78rem/1.2 'Source Sans 3',Arial,sans-serif!important;letter-spacing:.01em!important}.servicesSection .serviceSlideBody a b{display:inline!important;color:#f37bad!important}
@media(max-width:680px){.servicesSection{padding:58px 18px 64px!important}.servicesCarouselTrack{gap:16px!important}.servicesSection .serviceSlide{min-height:380px!important}.servicesSection .serviceSlide img{height:215px!important;flex-basis:215px!important}}

/* BRAND FINAL: debe cerrar el archivo para prevalecer sobre los estilos históricos. */
.storeBand::before{background-color:#102b43!important;background-image:url('assets/fondo3.webp')!important;background-position:center 55%!important;background-size:cover!important;background-repeat:no-repeat!important;background-blend-mode:multiply!important;filter:saturate(.78) contrast(1.08) brightness(.92)!important}
.storeBandIntro span{color:#ffab67!important;text-shadow:0 2px 12px rgba(3,14,27,.7)!important}.storeBandIntro b{color:#fff!important;text-shadow:0 5px 24px rgba(3,14,27,.72)!important}.storeRail::before{border-color:rgba(255,255,255,.22)!important}.storeRail a{border-color:rgba(255,255,255,.74)!important;background:#fff!important;box-shadow:0 15px 30px rgba(2,14,28,.24)!important}.storeRail a:hover,.storeRail a:focus-visible{border-color:#fff!important;box-shadow:0 20px 38px rgba(2,14,28,.3),0 0 0 3px rgba(238,61,139,.16)!important}
.adPromo,.adPromo .promoSlide,.adPromo .promoSlide[data-theme="blue"],.adPromo .promoSlide[data-theme="cyan"],.adPromo .promoSlide[data-theme="green"],.adPromo .promoSlide[data-theme="coral"]{background:#faf7f3!important}.adPromo .promoSlide::after{background:linear-gradient(90deg,#faf7f3 0%,rgba(250,247,243,.96) 34%,rgba(250,247,243,.3) 55%,transparent 72%)!important}.adPromo .promoArtwork{background:#f4e7ec!important}.adPromo .promoArtwork::before{display:block!important;content:"";position:absolute!important;z-index:2!important;inset:0!important;pointer-events:none!important;background:rgba(232,47,124,.07)!important;mix-blend-mode:color!important}.adPromo .promoTitle{color:#102434!important;text-shadow:none!important}.adPromo .promoBody{color:rgba(16,36,52,.7)!important}
.adPromo .promoEyebrow{color:#8c2858!important;background:linear-gradient(100deg,#fff0df,#ffe8f2)!important;border:1px solid #f2b8ce!important;box-shadow:inset 3px 0 0 #ff7a1a!important}.adPromo .promoCta{color:#fff!important;background:linear-gradient(115deg,#ff7a1a 0%,#ef5268 48%,#d92f83 100%)!important;border:0!important;box-shadow:0 12px 25px rgba(211,47,115,.23)!important}.adPromo .promoCta:hover{background:linear-gradient(115deg,#ff8a2b,#f05a72 48%,#e1378d 100%)!important;box-shadow:0 16px 30px rgba(211,47,115,.3)!important}.adPromo .promoDot.active::after{background:linear-gradient(90deg,#ff7a1a,#e52f83)!important}.adPromo .promoArrow:hover,.adPromo .promoPause:hover{color:#fff!important;background:#dd347d!important}
@media(max-width:640px){.adPromo .promoSlide::after{background:linear-gradient(0deg,#faf7f3 0%,rgba(250,247,243,.92) 48%,rgba(250,247,243,.08) 78%)!important}}

/* FINAL: fotografía logística con profundidad lateral. */
.storeBand::before{
  background-color:#102b43!important;
  background-image:linear-gradient(90deg,rgba(3,13,26,.84) 0%,rgba(3,13,26,.3) 24%,rgba(3,13,26,.1) 50%,rgba(3,13,26,.3) 76%,rgba(3,13,26,.84) 100%),url('assets/fondo3.webp')!important;
  background-position:center 55%!important;background-size:cover!important;background-repeat:no-repeat!important;
  background-blend-mode:normal!important;filter:saturate(.9) contrast(1.05) brightness(1.03)!important;
}
.storeBandIntro span{color:#ffab67!important;text-shadow:0 2px 12px rgba(3,14,27,.7)!important}
.storeBandIntro b{color:#fff!important;text-shadow:0 5px 24px rgba(3,14,27,.72)!important}
.storeRail::before{border-color:rgba(255,255,255,.22)!important}
.storeRail a{border-color:rgba(255,255,255,.74)!important;background:#fff!important;box-shadow:0 15px 30px rgba(2,14,28,.24)!important}
.storeRail a:hover,.storeRail a:focus-visible{border-color:#fff!important;box-shadow:0 20px 38px rgba(2,14,28,.3),0 0 0 3px rgba(238,61,139,.16)!important}

/* FINAL: promoción marfil con acentos naranja y rosado. */
.adPromo,.adPromo .promoSlide,.adPromo .promoSlide[data-theme="blue"],.adPromo .promoSlide[data-theme="cyan"],.adPromo .promoSlide[data-theme="green"],.adPromo .promoSlide[data-theme="coral"]{background:#faf7f3!important}
.adPromo .promoSlide::after{background:linear-gradient(90deg,#faf7f3 0%,rgba(250,247,243,.96) 34%,rgba(250,247,243,.3) 55%,transparent 72%)!important}
.adPromo .promoArtwork{background:#f4e7ec!important}
.adPromo .promoArtwork::before{display:block!important;content:"";position:absolute!important;z-index:2!important;inset:0!important;pointer-events:none!important;background:radial-gradient(ellipse 48% 72% at 52% 48%,rgba(232,47,124,.22) 0%,rgba(232,47,124,.1) 42%,transparent 72%)!important;mix-blend-mode:normal!important}
.adPromo .promoTitle{color:#102434!important;text-shadow:none!important}
.adPromo .promoBody{color:rgba(16,36,52,.7)!important}
.adPromo .promoEyebrow{
  color:#982b60!important;background:#fae9f1!important;
  border:0!important;box-shadow:none!important;
}
.adPromo .promoCta{
  color:#fff!important;background:linear-gradient(115deg,#ff7a1a 0%,#ef5268 48%,#d92f83 100%)!important;
  border:0!important;box-shadow:0 12px 25px rgba(211,47,115,.23)!important;
}
.adPromo .promoCta:hover{background:linear-gradient(115deg,#ff8a2b,#f05a72 48%,#e1378d 100%)!important;box-shadow:0 16px 30px rgba(211,47,115,.3)!important}
.adPromo .promoDot.active::after{background:linear-gradient(90deg,#ff7a1a,#e52f83)!important}
.adPromo .promoArrow:hover,.adPromo .promoPause:hover{color:#fff!important;background:#dd347d!important}
@media(max-width:640px){.adPromo .promoSlide::after{background:linear-gradient(0deg,#faf7f3 0%,rgba(250,247,243,.92) 48%,rgba(250,247,243,.08) 78%)!important}}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVIDAD — sin desplazamiento lateral y sin zoom al escribir
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Nada empuja la página de lado ────────────────────────────────────────
   Los revelados de GSAP dejan puesto su estado inicial —`transform:
   translate(50px,0)`— hasta que el elemento entra en pantalla. En un móvil de
   360 px esos 50 px sobran por la derecha y el documento se vuelve arrastrable
   en horizontal antes incluso de que la animación llegue a correr.

   Arreglarlo animando desde Y en vez de desde X cambiaría el diseño; recortar
   en la raíz lo resuelve sin tocar una sola animación.

   `clip` en vez de `hidden`: `hidden` convierte la raíz en un contenedor de
   scroll y eso rompe `position:sticky` en los descendientes. Hoy la portada no
   tiene ninguno, pero el día que lo tenga esto no debe ser la causa del fallo.
   Safari 15 y anteriores ignoran `clip`; ahí simplemente se sigue viendo como
   hasta ahora, sin regresión. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ── 2. iOS deja de hacer zoom al tocar un campo ─────────────────────────────
   Safari en iPhone amplía la página cuando enfoca un campo cuyo texto mide
   menos de 16 px, y al salir no siempre vuelve al zoom anterior: el visitante
   se queda con la landing descuadrada. 16 px exactos es el umbral.

   Solo en móvil: en escritorio no hay zoom que evitar y el tamaño de diseño se
   conserva tal cual.

   Los dos buscadores de tracking necesitan su propia línea. En la 1165 ya hay
   un `.htcInput{font-size:16px}` que nunca llegó a aplicarse: la regla real que
   los pinta es `.trackSearchBar .htcInput` (línea 1613), con dos clases, y le
   gana a una sola por especificidad. Aquí se repite el mismo selector, que al ir
   más abajo en el archivo desempata por orden. Se sobrescribe solo el tamaño;
   la fuente monoespaciada y el peso 600 del atajo `font:` siguen intactos. */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
  .trackSearchBar .htcInput{font-size:16px}
}

/* ════════════════════════════════════════════════════════════════════════════
   TARJETAS DE CONTACTO — volumen en vez de relleno
   ----------------------------------------------------------------------------
   Venían rellenas de `--brand-tint`, que se mezcla con `--deep` (el marino) y
   no con el rosa: sale #f5f7fa, un gris azulado que sobre el blanco de la
   sección se lee como plomo. Cuatro bloques planos de gris, uno debajo de otro,
   y el ojo no distingue dónde acaba uno y empieza el siguiente.

   El botón de WhatsApp de al lado funciona por lo contrario: no se define por
   su relleno sino por tener volumen. Eso es lo que se aplica aquí.

   Las tarjetas pasan a blanco —el mismo blanco de la sección— y lo que las
   separa del fondo es la sombra, no un color distinto. Van dos sombras
   superpuestas a propósito: una muy cerrada de 1 px que dibuja el canto, y otra
   amplia y difusa que da la elevación. Una sola sombra grande se ve como una
   mancha gris; el par se lee como un objeto apoyado.

   Las sombras llevan tinte de marca (58,18,38) en vez de negro puro: el negro
   sobre blanco se ve sucio, y un gris con algo del color del sitio se integra.
   ════════════════════════════════════════════════════════════════════════════ */
.contactCard{
  background:#fff;
  border:1px solid #f4e7ee;
  border:1px solid color-mix(in srgb,var(--brand) 8%,#fff);
  box-shadow:
    0 1px 2px rgba(58,18,38,.05),
    0 6px 16px -6px rgba(58,18,38,.10);
  transition:
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    transform .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s ease;
}

/* Al pasar por encima la tarjeta sube, no cambia de color: se refuerzan las dos
   sombras y el borde toma algo más de marca. El desplazamiento lateral de 6 px
   ya estaba y se conserva. */
.contactCard:hover{
  background:#fff;
  border-color:color-mix(in srgb,var(--brand) 20%,#fff);
  box-shadow:
    0 2px 4px rgba(58,18,38,.06),
    0 14px 30px -10px rgba(58,18,38,.17);
  transform:translateX(6px);
}

/* ── Legibilidad ─────────────────────────────────────────────────────────────
   El rótulo estaba al 70 % de tinta, que es exactamente el mínimo AA (4,5:1):
   pasa la norma y aun así se lee descolorido, sobre todo en mayúsculas y a
   0,8 rem. Pasa al rosa profundo de la marca —9:1 sobre blanco, AAA— así que
   además de leerse, tiñe la tarjeta sin necesidad de rellenarla.

   El dato sigue en `--brand-ink`, casi negro, para que la jerarquía se note:
   el rótulo dice de qué es, el dato es lo que la persona vino a buscar. */
.contactCard h4{
  color:var(--brand-deep);
  letter-spacing:.09em;
}
.contactCard p{
  color:var(--brand-ink);
}

/* Los iconos pierden el contorno y se quedan solo con su pastilla de color: es
   el mismo criterio que la píldora de los anuncios —el color delimita, no una
   línea— y evita que se sumen dos bordes en la misma esquina. */
.contactCardIcon{
  border:0;
}

/* ── Proceso en celular: legible y sin desvanecidos ────────────────────────
   En pantallas chicas el paso se leia "opaco": el glifo del icono iba al 22 %
   de opacidad, el numero era gris de 8 px sobre celeste y las tarjetas
   nacian transparentes hasta que GSAP las traia. Aca el glifo va entero y en
   blanco sobre el color del paso, el numero es una chapa oscura en la
   esquina del icono, y el JS (landing-services-restored.js) ya no anima
   opacidad en celular, asi que estas reglas son el estado final y unico.
   Va al final del archivo a proposito: pisa a las reglas de tema que
   vienen mas arriba sin recurrir a !important donde no hace falta. */
@media(max-width:760px){
  .processCard{will-change:auto;opacity:1;transform:none}
  .processIcon{color:#fff!important;border-width:4px}
  .processIcon>svg:not(.processColorArt){
    width:26px;height:26px;opacity:1;
    filter:drop-shadow(0 1px 2px rgba(3,18,31,.45));
  }
  /* La bola de color tambien es un <svg> hijo del icono: la regla vieja
     `.processIcon svg{opacity:.22}` la dejaba pastel, casi blanca. Va
     entera, como en escritorio. */
  .processIcon>svg.processColorArt{opacity:1}
  .processIcon::before{display:none}
  .processCard>span{
    left:46px;top:44px;width:22px;height:22px;
    color:#fff;font-size:.6rem;font-weight:800;line-height:22px;
    background:#0f2438;border-radius:50%;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(8,31,52,.28);
  }
  .processCard h3{color:#0f2438;font-size:1rem}
  .processCard p{color:#4f6577;font-size:.78rem}
  .processTag,.processTagWa{color:#0f3f5f;background:#e3eff6;font-weight:700}
  .processModeBtn span{font-size:.7rem;line-height:1.35}
  .processModeBtn b{font-size:.92rem}
}