:root{
  --blue:#2365bc;
  --blue-dark:#184a8f;
  --blue-darker:#0f2f5c;
  --blue-tint:#eef4fc;
  --blue-tint-2:#dfeafa;
  --orange:#c15f3c;
  --orange-dark:#a04a2b;
  --orange-tint:#fbece5;
  --orange-tint-2:#f6d9cc;
  --ink:#0b1220;
  --ink-soft:#59636f;
  --ink-faint:#8993a0;
  --border:#e7eaef;
  --bg:#ffffff;
  --bg-soft:#f7f9fc;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,30,60,0.04);
  --shadow-md:0 8px 24px rgba(15,30,60,0.08);
  --max:1160px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* "Brasa" button system */
  --brasa-500:#ff6a34;
  --brasa-400:#ff8a5c;
  --hueso-50:#f5efe3;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.15;letter-spacing:-0.02em;font-weight:600;font-family:var(--font-heading);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}

.w{max-width:var(--max);margin:0 auto;padding:0 24px;}
section{padding:96px 0;}
@media (max-width:860px){ section{padding:64px 0;} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--blue);
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);
}

.section-head{max-width:600px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px;color:var(--ink);}
.section-head p{font-size:17px;color:var(--ink-soft);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.tag{
  display:inline-block;font-size:12.5px;font-weight:600;color:var(--blue-dark);
  background:var(--blue-tint);padding:5px 12px;border-radius:100px;letter-spacing:0.02em;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14.5px;font-weight:600;padding:13px 22px;border-radius:100px;
  border:1px solid transparent;transition:transform .18s ease, box-shadow .18s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;}
/* "Brasa" system: industrial look for the primary CTA — sharp corners, monospace uppercase
   label, and a diffuse glow from the same orange at 65% opacity. Hover only lifts + lightens;
   it never changes size or shadow, so the glow stays constant while the button itself moves. */
.btn--primary{
  gap:10px;padding:15px 30px;border-radius:2px;
  font-family:var(--font);font-size:13px;letter-spacing:0.06em;
  text-transform:none;font-weight:500;
  background:var(--brasa-500);color:var(--hueso-50);
  box-shadow:0 8px 24px -8px rgba(193,95,60,0.65);
}
.btn--primary:hover{background:var(--brasa-400);transform:translateY(-2px);}
.btn--secondary{background:#fff;color:var(--ink);border-color:var(--border);}
.btn--secondary:hover{border-color:var(--ink-faint);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn--ghost{background:transparent;color:var(--blue);}
.btn--ghost:hover{background:var(--blue-tint);}
.btn--white{
  gap:10px;padding:15px 30px;border-radius:2px;
  font-family:var(--font);font-size:13px;letter-spacing:0.06em;text-transform:none;font-weight:500;
  background:#fff;color:var(--blue);
  box-shadow:0 8px 24px -8px rgba(35,101,188,0.2);
}
.btn--white:hover{background:#ede2cc;transform:translateY(-2px);}
/* The Facturación y pagos cards already lift on hover — the button inside shouldn't add a
   second, competing lift on top of that. */
.bcard-cta .btn--white:hover{transform:none;}
.btn--on-dark{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.25);}
.btn--on-dark:hover{background:rgba(255,255,255,0.18);transform:translateY(-2px);}
.btn--blue{
  gap:10px;padding:15px 30px;border-radius:2px;
  font-family:var(--font);font-size:13px;letter-spacing:0.06em;text-transform:none;font-weight:500;
  background:#0265bc;color:var(--hueso-50);
  box-shadow:0 8px 24px -8px rgba(2,101,188,0.65);
}
.btn--blue:hover{background:#0386f9;transform:translateY(-2px);}
.btn--block{width:100%;}
.btn--lg{padding:15px 26px;font-size:15.5px;}
.form-success{
  background:var(--blue-tint);color:var(--blue-dark);border-radius:var(--radius-md);
  padding:16px 20px;text-align:center;font-size:15.5px;font-weight:500;
}
.form-error{color:var(--orange-dark);font-size:13.5px;margin-top:10px;text-align:center;}
.btn:active{transform:translateY(0) scale(0.98);}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}

/* ============ HEADER ============ */
/* Solid corporate-blue header, used on every page except the homepage HERO (which starts
   transparent and settles into this same blue — see .site-header--hero below). */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#0265bc;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;}
.nav-logo img{height:50px;width:auto;transition:opacity .2s ease;}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-mega{position:relative;}
.nav-mega-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;margin:0;font-family:inherit;cursor:pointer;}
/* .is-locked keeps its normal look — "Servicios" still works as a plain link to the on-page
   section during the HERO zoom, only the dropdown itself is deferred (see main.js). */
.nav-mega-chevron{width:13px;height:13px;flex:none;transition:transform .55s var(--ease-premium);}
.nav-mega.is-open .nav-mega-chevron{transform:rotate(180deg);}
.nav-links a:not(.btn), .nav-mega-trigger{font-size:13px;letter-spacing:0.06em;font-weight:500;color:#fff;transition:color .15s;}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn).active,
.nav-mega-trigger:hover,.nav-mega-trigger.active{color:#fff;opacity:.8;}
.site-header .btn--secondary{
  padding:15px 30px;border-radius:2px;font-size:13px;letter-spacing:0.06em;font-weight:500;
  background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.5);
}
.site-header .btn--secondary:hover{background:#25D366;border-color:#25D366;}
.site-header .nav-toggle{color:#fff;}
@media (max-width:860px){
  /* Mobile nav-links panel is an opaque white sheet regardless of header color, so links need
     dark text there even though the closed top bar is blue with white text. The CTA button
     inside this menu is excluded — it must always keep its own white-on-orange styling. */
  .site-header .nav-links a:not(.btn),.site-header .nav-mega-trigger{color:var(--ink-soft);}
}

/* Homepage-only header treatment: starts fully transparent with white text/logo over the
   landscape photo, then main.js adds --hero-solid once the scroll-zoom reaches the end (the
   background has turned into the white hero by then) — background becomes Motocity blue,
   text/logo stay white throughout since white reads fine on both transparent and blue. */
/* position:sticky only starts "floating" once you've scrolled past it — at rest it just sits
   in normal document flow, pushing the hero down and leaving a seam instead of overlapping the
   sky. Fixed positioning makes it genuinely float over the hero from the very first frame. */
.site-header--hero{background:transparent;border-bottom-color:transparent;position:fixed;top:0;left:0;right:0;width:100%;transition:background-color .4s ease;}
/* The photo's sky is light in places, so plain white text can go nearly invisible right at
   the top — a soft scrim + text-shadow keeps the logo/nav legible no matter what's behind it,
   without hiding the photo outright. Fades away once the header goes solid blue. */
.site-header--hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(6,20,40,0.38), rgba(6,20,40,0.12) 70%, transparent);
  opacity:1;transition:opacity .4s ease;
}
.site-header--hero.is-hero-solid::before{opacity:0;}
.site-header--hero .nav-logo img{filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35));}
.site-header--hero .nav-links a:not(.btn),.site-header--hero .nav-mega-trigger{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.4);}
.site-header--hero .nav-links a:not(.btn):hover,.site-header--hero .nav-links a:not(.btn).active,
.site-header--hero .nav-mega-trigger:hover,.site-header--hero .nav-mega-trigger.active{color:#fff;}
.site-header--hero .btn--secondary{
  padding:15px 30px;border-radius:2px;font-size:13px;letter-spacing:0.06em;font-weight:500;
  background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.5);
}
.site-header--hero .btn--secondary:hover{background:#25D366;border-color:#25D366;}
.site-header--hero .nav-toggle{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));}
.site-header--hero.is-hero-solid{background:#0265bc;}
/* "Solicitar cotización" in the header starts Motocity blue while the HERO zoom is still
   playing, then eases to the usual orange once the header settles solid (is-hero-solid,
   same class/timing initMotocityHeroZoom already toggles for the header background itself). */
.site-header--hero .nav-cta .btn--primary{background:#0265bc;transition:background-color .4s ease, transform .2s ease;}
.site-header--hero .nav-cta .btn--primary:hover{background:#0386f9;}
.site-header--hero.is-hero-solid .nav-cta .btn--primary{background:var(--brasa-500);}
.site-header--hero.is-hero-solid .nav-cta .btn--primary:hover{background:var(--brasa-400);}
@media (max-width:860px){
  /* Mobile nav-links panel is an opaque white sheet regardless — transparent/blue header only
     affects the closed top bar, never the open menu, so it stays readable either way. The CTA
     button inside this menu is excluded — it must always keep its own white-on-orange styling. */
  .site-header--hero .nav-links a:not(.btn),.site-header--hero .nav-mega-trigger{color:var(--ink-soft);text-shadow:none;}
}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;background:none;border:none;padding:8px;}
.nav-toggle svg{width:24px;height:24px;}
.nav-toggle-line{
  transform-origin:12px 12px;transform-box:view-box;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.nav-toggle.is-open .nav-toggle-line--top{transform:translateY(5px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle-line--mid{opacity:0;}
.nav-toggle.is-open .nav-toggle-line--bottom{transform:translateY(-5px) rotate(-45deg);}
.nav-cta-mobile{display:none;}
@media (max-width:860px){
  .nav-cta-mobile{display:inline-flex;}
  .nav-links{
    position:fixed;top:var(--header-h,76px);left:0;right:0;bottom:0;
    background:#fff;flex-direction:column;align-items:flex-start;
    padding:28px 24px;gap:22px;transform:translateX(100%);
    transition:transform .25s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a:not(.btn), .nav-mega-trigger{font-size:17px;}
  .nav-links .nav-cta-mobile{margin-top:12px;width:100%;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---- Mega menu: "Servicios" dropdown with title + description per link ---- */
.nav-mega-panel{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  width:300px;background:#0265bc;border-radius:0;box-shadow:var(--shadow-md);
  padding:0 6px;overflow:hidden;visibility:hidden;pointer-events:none;max-height:0;
  transition:max-height .6s var(--ease-premium),padding .6s var(--ease-premium),visibility .6s;z-index:60;
}
.nav-mega.is-open .nav-mega-panel{visibility:visible;pointer-events:auto;max-height:280px;padding:6px;}
.nav-mega-item{display:block;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;transition:background-color .15s ease;}
.nav-mega-item:hover,.nav-mega-item:focus-visible{background:rgba(255,255,255,0.1);}
.nav-mega-item-title{display:block;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:1px;}
.nav-mega-item-desc{display:block;font-size:12px;color:rgba(255,255,255,0.72);line-height:1.35;}
@media (prefers-reduced-motion:reduce){
  .nav-mega-chevron,.nav-mega-panel{transition:none;}
}
@media (max-width:860px){
  .nav-mega{width:100%;}
  .nav-mega-trigger{width:100%;justify-content:space-between;}
  .nav-mega-panel{
    position:static;transform:none;width:100%;box-shadow:none;background:transparent;
    padding:0;margin:0;max-height:0;overflow:hidden;opacity:1;visibility:visible;pointer-events:none;
    transition:max-height .6s var(--ease-premium),margin .6s var(--ease-premium);
  }
  .nav-mega.is-open .nav-mega-panel{
    max-height:600px;pointer-events:auto;transform:none;margin-top:8px;
    background:#0265bc;border-radius:0;padding:6px;
  }
  .nav-mega-item{padding:8px 10px;}
  .nav-mega-item-desc{display:none;}
}

/* ============ MOTOCITY HERO SEQUENCE (scroll-driven zoom into the laptop screen) ============ */
/* Landscape photo (assets/hero.jpg) stays untouched — the "screen" is the laptop's blank
   display already in the shot. Focal point / target scale are computed at runtime in main.js
   from the image's real geometry, so the zoom always lands exactly on the screen regardless
   of viewport size. transform-origin below is just a same-aspect fallback before JS runs. */
.motocity-hero-sequence{position:relative;height:320vh;background:#0b1220;padding:0;}
.motocity-hero-stage{position:relative;width:100%;height:100vh;overflow:hidden;background:#0b1220;}
.motocity-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  transform-origin:49.2% 65.5%;
  -webkit-user-drag:none;user-select:none;
  will-change:transform;
}
/* Two stacked copies of the same photo: --bg blurs progressively as the camera pushes in
   (hides JPEG upscaling artifacts on the landscape and reads as a rack-focus toward the
   desk); --fg stays sharp but is masked down to roughly the desk/laptop/rider area, so that
   subject never blurs. Both get the identical transform every frame (see main.js render()),
   so they stay perfectly registered on top of each other. */
.motocity-hero-img--bg{will-change:transform,filter;}
.motocity-hero-img--fg{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.motocity-hero-clouds{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;pointer-events:none;will-change:transform;
}
.motocity-hero-clouds .cloud{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%);
  filter:blur(6px);
  mix-blend-mode:screen;
  opacity:0.5;
  animation-name:motocity-cloud-drift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
.motocity-hero-clouds .cloud--a{width:16%;height:7%;left:8%;top:9%;animation-duration:95s;}
.motocity-hero-clouds .cloud--b{width:12%;height:5.5%;left:40%;top:5%;animation-duration:80s;animation-delay:-30s;}
.motocity-hero-clouds .cloud--c{width:14%;height:6%;left:66%;top:12%;animation-duration:110s;animation-delay:-55s;}
@keyframes motocity-cloud-drift{
  0%{transform:translateX(-2.5%);}
  100%{transform:translateX(2.5%);}
}

/* Text lives OUTSIDE the transformed image layer on purpose: a CSS transform:scale()
   composites as a cached bitmap, which blurs text at high zoom. Growing it via font-size
   instead (see main.js) forces a real repaint at every size, so it stays sharp throughout. */
.motocity-hero-text{
  position:absolute;left:0;top:0;margin:0;
  transform:translate(-50%,-50%);
  text-align:center;color:#0265bc;
  font-family:'Plus Jakarta Sans',var(--font);
  font-weight:700;letter-spacing:-0.01em;line-height:1.28;
  pointer-events:none;
  /* One-time entrance on page load — fades up into place, independent of the scroll-driven
     left/top/font-size (main.js only ever touches those, never opacity/transform), so this
     can't fight the scroll animation. Disabled below wherever JS/motion is off, since those
     fallbacks set transform:none and this animation's keyframe would otherwise fight that.
     Stays at opacity:0 (no fixed timer) until JS adds .is-positioned right after it sets the
     real left/top from computed geometry — a timer here could fire before that first geometry
     pass lands, flashing the text at its pre-JS left:0;top:0 default (visible near the header)
     for a frame before it jumps into place. */
  opacity:0;
}
.motocity-hero-text.is-positioned{
  animation:motocity-text-rise .9s ease-out forwards;
}
@keyframes motocity-text-rise{
  from{opacity:0;transform:translate(-50%,-50%) translateY(14px);}
  to{opacity:1;transform:translate(-50%,-50%) translateY(0);}
}

/* Small pulsing "live location" pin before "Relájate." — sized in em so it scales automatically
   with the headline's own font-size as main.js grows it during the scroll-zoom (no JS needed),
   and it inherits the text's fade/rise entrance since it's a child of the same element. */
.motocity-hero-pin{
  position:relative;display:inline-block;
  width:0.42em;height:0.42em;margin:0 0.22em 0.08em 0;
  vertical-align:middle;border-radius:50%;
  background:currentColor;
}
.motocity-hero-pin::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:0.6;
  animation:motocity-pin-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes motocity-pin-ping{
  0%{transform:scale(1);opacity:0.6;}
  100%{transform:scale(2.6);opacity:0;}
}

/* Top badge ("Motocity: Rápido/Seguro/Confiable") and the bottom scroll-down affordance are
   rest-state-only UI, not part of the photo — main.js fades both out fast as soon as scroll
   starts (see FOOTER_FADE_END in main.js) rather than dragging them through the whole zoom. */
/* Two EQUAL fixed-width columns straddling ":" — not flex:1 auto-share, which turned out to
   NOT guarantee equal columns here: with flex-basis:0, free space is split 50/50 only until an
   item's min-content (its un-wrappable text width) is bigger than its 50% share, at which point
   it's clamped to that min-content and the OTHER column just absorbs whatever's left over —
   so "Motocity" (fixed min-content) and a short word like "Seguro" ended up visibly unequal.
   Giving both columns the SAME explicit width (sized for "Confiable", the longest word, plus a
   little padding) makes them equal by construction regardless of content, so ":" always sits
   exactly at the badge's horizontal center. text-align:right/left then pushes each piece to
   its edge, one character-space (the colon's own padding) away from ":" on either side. */
/* The colon is pinned to 50vw (a real viewport-relative length, not a percentage of the parent
   box) so it lands at the exact horizontal center of the SCREEN regardless of: how wide
   "Motocity" or the rotating word render in a given browser/font, AND regardless of this
   element's containing block (.motocity-hero-stage) briefly reporting a 0-width box while
   GSAP ScrollTrigger's pin-spacer is being created/torn down — a percentage-based left would
   collapse to 0 in that instant (confirmed via devtools), but a vw length is immune to that
   since it never depends on the parent's width, only its position (which stays put at the
   viewport's left edge throughout). Label right-aligns by translateX(-100%) of its OWN width
   (so it never needs to know the other side's width either); cycle just starts at the anchor
   and grows rightward. */
.motocity-hero-badge{
  position:absolute;left:0;top:17%;height:1.3em;
  color:rgba(255,255,255,0.88);
  font-family:var(--font-heading);font-size:clamp(29px,3.5vw,37px);font-weight:600;letter-spacing:0.02em;line-height:1;
  pointer-events:none;
}
.motocity-hero-badge-label{position:absolute;top:50%;left:50vw;transform:translate(calc(-100% - 0.35em),-50%);white-space:nowrap;}
.motocity-hero-badge-colon{position:absolute;top:50%;left:50vw;transform:translate(-50%,-50%);}
.motocity-hero-badge-cycle{position:absolute;top:50%;left:calc(50vw + 0.35em);transform:translateY(-50%);white-space:nowrap;height:1.3em;}
/* Centered via top:50% + translateY(-50%) (not top:0) so the word's own line-box lines up with
   the "Motocity"/":" baseline instead of sitting visibly lower. */
.motocity-hero-badge-cycle span{position:absolute;left:0;top:50%;opacity:0;animation:motocity-word-cycle 6s infinite;}
.motocity-hero-badge-cycle span:nth-child(1){animation-delay:0s;}
.motocity-hero-badge-cycle span:nth-child(2){animation-delay:2s;}
.motocity-hero-badge-cycle span:nth-child(3){animation-delay:4s;}
@keyframes motocity-word-cycle{
  0%,2%{opacity:0;transform:translate(0,calc(-50% + 6px));}
  8%,30%{opacity:1;transform:translate(0,-50%);}
  36%,100%{opacity:0;transform:translate(0,calc(-50% - 6px));}
}

.motocity-hero-scrolldown{
  position:absolute;left:50%;bottom:5%;transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#fff;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}
.motocity-hero-scrolldown .scrolldown-mouse{width:34px;height:34px;}
.motocity-hero-scrolldown .scrolldown-chevron{width:24px;height:24px;animation:motocity-scrolldown-bounce 1.8s ease-in-out infinite;}
@keyframes motocity-scrolldown-bounce{
  0%,100%{transform:translateY(0);opacity:0.6;}
  50%{transform:translateY(5px);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .motocity-hero-badge-cycle span{animation:none;opacity:0;}
  .motocity-hero-badge-cycle span:first-child{opacity:1;}
  .motocity-hero-scrolldown .scrolldown-chevron{animation:none;}
  .motocity-hero-pin::after{animation:none;opacity:0;}
}

@media (max-width:860px){
  .motocity-hero-sequence{height:240vh;}
  /* object-fit:cover (fills 100vh edge-to-edge, no letterbox bars) — assets/hero-mobile.jpg is
     a dedicated tall-portrait composite (not a crop of the desktop photo) with the laptop
     already centered and the rider included, built specifically so a straight centered
     cover-crop shows the whole concept without needing to shift the crop off-center. */
  .motocity-hero-badge{top:26%;font-size:clamp(22px,5.8vw,31px);}
  .motocity-hero-scrolldown{bottom:4%;}
  .motocity-hero-scrolldown .scrolldown-mouse{width:28px;height:28px;}
  .motocity-hero-scrolldown .scrolldown-chevron{width:20px;height:20px;}
}

/* Accessible / no-JS fallback: reduced motion, or GSAP failing to load (main.js adds .is-static).
   Only the sharp foreground photo shows, full and unmasked — no blur layer, no cloud drift. */
.motocity-hero-sequence.is-static{height:auto;background:none;}
.motocity-hero-sequence.is-static .motocity-hero-stage{position:relative;height:auto;min-height:0;background:none;}
.motocity-hero-sequence.is-static .motocity-hero-img--bg,
.motocity-hero-sequence.is-static .motocity-hero-clouds,
.motocity-hero-sequence.is-static .motocity-hero-badge,
.motocity-hero-sequence.is-static .motocity-hero-scrolldown{display:none;}
.motocity-hero-sequence.is-static .motocity-hero-img--fg{
  position:relative;height:64vh;min-height:360px;transform:none !important;object-position:center 42%;
  -webkit-mask-image:none;mask-image:none;
}
.motocity-hero-sequence.is-static .motocity-hero-text{
  position:relative;left:auto;top:auto;transform:none;
  width:auto;max-width:620px;margin:-140px auto 0;padding:22px 28px;
  font-size:clamp(22px,4.2vw,32px);line-height:1.3;
  background:rgba(255,255,255,0.94);border-radius:16px;
  animation:none;opacity:1;
}

@media (prefers-reduced-motion:reduce){
  .motocity-hero-sequence{height:auto;background:none;}
  .motocity-hero-stage{position:relative;height:auto;min-height:0;background:none;}
  .motocity-hero-img--bg,
  .motocity-hero-clouds,
  .motocity-hero-badge,
  .motocity-hero-scrolldown{display:none;}
  .motocity-hero-img--fg{
    position:relative;height:64vh;min-height:360px;transform:none !important;object-position:center 42%;
    -webkit-mask-image:none;mask-image:none;
  }
  .motocity-hero-text{
    position:relative;left:auto;top:auto;transform:none;
    width:auto;max-width:620px;margin:-140px auto 0;padding:22px 28px;
    font-size:clamp(22px,4.2vw,32px);line-height:1.3;
    background:rgba(255,255,255,0.94);border-radius:16px;
    animation:none;opacity:1;
  }
}

/* ============ FEATURE GRID ============ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }

.feature{padding:4px;}
.feature .ic{
  width:40px;height:40px;border-radius:11px;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.feature .ic svg{width:20px;height:20px;}
.feature h3{font-size:16.5px;margin-bottom:6px;}
.feature p{font-size:14.5px;color:var(--ink-soft);}

/* ============ PLATFORM SCREENSHOT ============ */
.tecnologia-features{display:flex;flex-direction:column;gap:24px;margin-top:24px;}
.feature--row{display:flex;gap:16px;padding:0;}
.feature--row .ic{margin-bottom:0;flex:none;}
.platform-shot{
  overflow:hidden;border-radius:14px;max-width:560px;margin:0 auto;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.platform-shot img{width:100%;display:block;margin:0 auto;}
.platform-shot:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 70px -20px rgba(0,0,0,0.55), 0 14px 28px rgba(0,0,0,0.4);
}
@media (max-width:900px){ .platform-shot{max-width:520px;} }
.moto-scroll-track{position:relative;height:56px;margin-top:24px;overflow:hidden;}
.moto-scroll-icon{
  position:absolute;top:50%;left:0;width:72px;height:auto;
  transform:translateY(-50%);opacity:0.92;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.3));
}

/* ============ SERVICE CARDS ============ */
.service-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px;display:flex;flex-direction:column;position:relative;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{transform:translateY(-6px);border-color:var(--brasa-400);}
.service-card--hi:hover{border-color:var(--brasa-400);}
.service-card--hi{background:var(--blue-darker);border-color:var(--blue-darker);color:#fff;}
.service-card--hi h3,.service-card--hi .service-tagline{color:#fff;}
.service-mode{font-size:12px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;display:block;}
.service-card--hi .service-mode{color:#8fc2f5;}
.service-card h3{font-size:22px;margin-bottom:4px;}
.service-card h3 a{color:inherit;text-decoration:none;}
.service-card h3 a:hover{color:var(--blue);text-decoration:underline;}
.service-card--hi h3 a:hover{color:#8fc2f5;}
.service-tagline{font-size:14.5px;font-weight:500;color:var(--blue);margin-bottom:0;}
.service-desc{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px;}
.service-card--hi .service-desc{color:rgba(255,255,255,0.75);}
.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;margin-bottom:20px;font-size:13.5px;}
@media (max-width:420px){ .service-list{grid-template-columns:1fr;} }
.service-list li{display:flex;gap:9px;align-items:flex-start;}
.service-list li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--orange);}
.service-card--hi .service-list li svg{color:#f0a583;}
.service-list-more{align-items:center;}
.service-card .btn{margin-top:auto;align-self:center;position:relative;z-index:2;}
.service-card-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:auto;}
.service-card-actions .btn{margin-top:0;align-self:auto;}
/* "Ver más Info." — translucent glass button that sits to the left of "Cotizar" on
   every service card; base look tuned for the light cards, .service-card--hi overrides
   it below for the dark Corporativo card so it still reads as frosted glass there. */
.btn--glass{
  background:rgba(255,255,255,0.55);border-color:rgba(15,32,60,0.14);color:var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{background:rgba(255,255,255,0.85);transform:translateY(-2px);}
.service-card--hi .btn--glass{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.35);color:#fff;}
.service-card--hi .btn--glass:hover{background:rgba(255,255,255,0.24);}
.service-card{cursor:pointer;}
.service-card h3 a{position:relative;z-index:2;}
/* "Conocer más" doubles as a stretched-link: its ::after covers the whole card (the
   nearest position:relative ancestor), so anywhere on the card navigates to the service
   page — the "Cotizar" button and h3 link stay independently clickable via z-index:2. */
.service-more{
  display:inline-flex;align-items:center;gap:3px;
  color:var(--blue);font-weight:600;font-size:13.5px;text-decoration:none;
}
.service-card--hi .service-more{color:#8fc2f5;}
.service-more svg{width:15px;height:15px;flex:none;color:inherit;transition:transform .15s ease;}
.service-card:hover .service-more svg{transform:translateX(3px);}
.service-more::after{content:"";position:absolute;inset:0;z-index:1;}
@media (prefers-reduced-motion:reduce){
  .service-more svg{transition:none;}
}
.service-card-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.service-card-ic{
  width:72px;height:72px;border-radius:18px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.service-card-ic img{width:40px;height:40px;object-fit:contain;display:block;}
.service-card--hi .service-card-ic{background:rgba(255,255,255,0.18);}
.service-card-head-text{min-width:0;}
.service-card-note{font-size:13px;color:var(--ink-faint);font-style:italic;margin:-8px 0 18px;}
.service-card--hi .service-card-note{color:rgba(255,255,255,0.65);}
.services-preview{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:40px;
}
.services-preview-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);width:150px;padding:14px 8px;border-radius:16px;
  transition:transform .2s ease, background .2s ease;
}
.services-preview-item:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow-sm);}
.services-preview-item span:last-child{font-size:13.5px;font-weight:600;text-align:center;}
.services-preview-ic{
  width:60px;height:60px;border-radius:16px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.services-preview-ic img{width:32px;height:32px;object-fit:contain;}
@media (max-width:560px){ .services-preview-item{width:44%;} }

.services-grid{margin-top:8px;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:760px){ .services-grid{grid-template-columns:1fr;} }
.services-grid > .service-card{min-width:0;}
/* One-shot entrance for the 4 service cards — fades/slides up with a slight scale-in,
   more pronounced than the default .rv fade so the grid feels like it "arrives" together.
   Stagger comes from the existing .grid-4 > .rv:nth-child(N) transition-delay rules. */
.services-grid .service-card.rv{
  opacity:0;transform:translateY(32px) scale(0.96);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}
.services-grid .service-card.rv.on{opacity:1;transform:none;}
.service-card .btn{white-space:nowrap;text-align:center;align-self:center;}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
@media (max-width:860px){ .steps{grid-template-columns:1fr;} }
.step{padding:28px 26px;border-left:1px solid var(--border);}
.step:first-child{border-left:none;}
@media (max-width:860px){ .step{border-left:none;border-top:1px solid var(--border);} .step:first-child{border-top:none;} }
.step-num{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:14px;display:block;}
.step h4{font-size:16px;margin-bottom:8px;}
.step p{font-size:13.5px;color:var(--ink-soft);}

/* ============ TESTIMONIALS ============ */
.testi{background:var(--bg-soft);border-radius:var(--radius-lg);padding:28px;transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;}
.testi:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.testi p.quote{font-size:15px;margin-bottom:22px;color:var(--ink);}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-tint-2);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none;overflow:hidden;}
.testi-avatar svg{width:22px;height:22px;}
.testi-avatar--f{background:#fbe1ea;color:#b5527a;}
.testi-author strong{display:block;font-size:13.5px;}
.testi-author span{font-size:12.5px;color:var(--ink-faint);}

/* ============ TESTIMONIALS (infinite two-row marquee) ============ */
/* Same double-track technique as the client logos marquee: each row's .testi-marquee-track
   holds two identical .testi-group copies back-to-back, and translating the track by -50%
   (of the combined two-group width) lands exactly one group-width over, so the loop is
   seamless. The two rows scroll in opposite directions (row 2 reversed) for a livelier feel
   with 16 quotes instead of pagination/arrows. */
.testi-marquee{display:flex;flex-direction:column;gap:24px;margin-top:40px;}
.testi-marquee-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.testi-marquee-track{display:flex;width:max-content;animation:testiMarqueeScroll 140s linear infinite;}
.testi-marquee-row--reverse .testi-marquee-track{animation-direction:reverse;}
.testi-marquee-row:hover .testi-marquee-track{animation-play-state:paused;}
.testi-group{display:flex;flex-wrap:nowrap;gap:20px;padding:0 10px;}
.testi-marquee .testi{width:340px;flex:none;}
@keyframes testiMarqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .testi-marquee-track{animation:none;}
}
@media (max-width:560px){
  .testi-marquee .testi{width:280px;}
}

/* ============ CLIENTS (infinite marquee) ============ */
/* .clients-track holds TWO identical .clients-row <ul>s back-to-back and is the thing that
   animates; translating IT by -50% (of the combined two-track width, i.e. exactly one
   track's width) means the second track ends up exactly where the first started, so the
   loop is seamless. Animating each row individually instead would desync — each -50% would
   be relative to that row's own width, not the pair. Paused on hover, off under
   prefers-reduced-motion. */
.clients-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.clients-track{
  display:flex;flex-wrap:nowrap;width:max-content;
  animation:clients-marquee-scroll 34s linear infinite;
}
.clients-marquee:hover .clients-track{animation-play-state:paused;}
.clients-row{display:flex;flex-wrap:nowrap;gap:0;}
.clients-row li{
  display:flex;align-items:center;justify-content:center;flex:none;
  padding:18px 26px;
  transition:opacity .2s ease;cursor:default;
}
.clients-row img{
  max-height:34px;max-width:120px;width:auto;height:auto;
  filter:grayscale(1);opacity:0.55;
  transition:opacity .2s ease;
}
.clients-row li:hover img{opacity:0.9;}
.clients-row li.logo-boost img{max-height:42px;max-width:148px;opacity:0.75;}
.clients-row li.logo-boost:hover img{opacity:0.95;}
.clients-row li.logo-size-boost img{max-height:42px;max-width:148px;}
.clients-row li.logo-xl img{max-height:54px;max-width:180px;opacity:0.6;}
.clients-row li.logo-xl:hover img{opacity:0.9;}
.clients-row li.logo-sm img{max-height:27px;max-width:95px;}
@media (max-width:700px){
  .clients-row li.logo-boost img{max-height:32px;max-width:110px;}
  .clients-row li.logo-size-boost img{max-height:32px;max-width:110px;}
  .clients-row li.logo-xl img{max-height:42px;max-width:135px;}
  .clients-row li.logo-sm img{max-height:20px;max-width:70px;}
}
@keyframes clients-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:700px){
  .clients-row li{padding:14px 16px;}
  .clients-row img{max-height:26px;max-width:90px;}
}
@media (prefers-reduced-motion:reduce){
  .clients-track{animation:none;}
}

/* ============ BILLING CARDS ============ */
.bcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;}
.bcard--hi{background:var(--blue-tint);border-color:var(--blue-tint-2);}
.bcard h3{font-size:20px;margin-bottom:4px;}
.bcard .tag{margin-bottom:20px;}
.bcard ul{display:flex;flex-direction:column;gap:11px;font-size:14px;margin-bottom:16px;}
.bcard li{display:flex;gap:9px;}
.bcard li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--orange);}
.bcard-note{font-size:13px;color:var(--ink-soft);font-style:italic;}

/* ============ BILLING CARDS — solid variant ============ */
.bcard--solid{background:var(--blue);border-color:var(--blue);color:#fff;display:flex;flex-direction:column;}
.bcard-cta{margin-top:auto;padding-top:24px;}
.bcard--solid h3{
  font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;
  text-align:center;color:#fff;margin-bottom:16px;
}
.bcard-tagline{text-align:center;font-weight:600;color:#fff;margin-bottom:14px;}
.bcard-desc{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,0.88);text-align:center;margin-bottom:24px;}
.bcard-subhead{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:10px;}
.bcard .bcard-list{display:block;list-style:disc;padding-left:20px;font-size:14px;color:rgba(255,255,255,0.9);margin-bottom:22px;}
.bcard .bcard-list li{display:list-item;margin-bottom:8px;}
.bcard .bcard-list li:last-child{margin-bottom:0;}
.bcard-list:last-of-type{margin-bottom:0;}
.bcard-steps{display:flex;margin-top:auto;padding-top:18px;}
/* Numbered-circle stepper connected by a line, instead of the earlier chevron/arrow shapes.
   Each step's connector runs from its OWN circle center to 100% further right — since all
   three steps share equal flex width, that lands exactly on the next circle's center, giving
   a continuous line without needing to measure gaps by hand. */
.bcard-step{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:0 6px;font-size:12.5px;font-weight:600;line-height:1.3;text-align:center;color:#fff;
}
.bcard-step:not(:last-child)::after{
  content:"";position:absolute;top:15px;left:50%;width:100%;height:2px;
  background:rgba(255,255,255,0.35);z-index:0;
}
.bcard-step-num{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.16);
  border:2px solid rgba(255,255,255,0.55);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;
  position:relative;z-index:1;
}
.bcard-step-label{position:relative;z-index:1;}
@media (max-width:560px){
  .bcard-steps{flex-direction:column;gap:14px;}
  .bcard-step{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;}
  .bcard-step:not(:last-child)::after{
    top:auto;left:15px;bottom:-14px;width:2px;height:14px;
  }
}

/* ============ SPEED GAUGE (Facturación y pagos) ============ */
/* Needle rotation is driven entirely by main.js (ScrollTrigger scrub tied to how far
   .billing-section has scrolled through the viewport) — no numbers on the dial on purpose,
   it's a decorative "speed" motif, not a literal reading. Ticks/needle all rotate via the same
   `rotate(angle 100 100)` SVG transform (not CSS transform-origin), so they stay perfectly
   concentric with the arc regardless of any CSS scaling applied to the SVG box itself.
   Lives inside the heading (a <span>, positioned relative to THAT element specifically — see
   the inline `position:relative` on the <h2> in index.html) so it always aligns to the
   title's own box regardless of how the rest of the section reflows. Floats in the open
   space past .section-head's 600px-wide text column; below that breakpoint there's no
   room to float it beside the text, so a second, smaller copy of the gauge (same SVG,
   `.speed-gauge--mobile`) sits as the very first element in .section-head instead,
   appearing above the "Facturación y pagos" eyebrow. main.js drives every element
   matching .speed-gauge-needle, so both copies' needles stay in sync. */
.speed-gauge{display:inline-flex;}
.speed-gauge--float{
  position:absolute;top:50%;left:calc(100% - 20px);transform:translateY(-50%);
}
.speed-gauge--mobile{display:none;}
@media (max-width:1100px){
  .speed-gauge--float{display:none;}
  .speed-gauge--mobile{display:block;text-align:center;margin:0 0 16px;}
}

.tramites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px;}
@media (max-width:900px){ .tramites-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .tramites-grid{grid-template-columns:1fr;} }
.tramites-cat h3{font-size:14.5px;margin-bottom:12px;color:var(--blue-dark);}
.tramites-num{color:var(--orange);font-weight:700;}
.tramites-cat ul{display:flex;flex-direction:column;gap:8px;}
.tramites-cat li{font-size:13.5px;color:var(--ink-soft);padding-left:14px;position:relative;}
.tramites-cat li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.tramites-cat-arrow{display:none;width:18px;height:18px;flex:none;color:var(--ink-faint);transition:transform .2s ease;}
/* Accordion behavior only on true mobile widths — desktop/tablet keep every category expanded. */
@media (max-width:560px){
  .tramites-cat{border-bottom:1px solid var(--border);}
  .tramites-cat-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    cursor:pointer;margin-bottom:0;padding:14px 0;
  }
  .tramites-cat-arrow{display:block;}
  .tramites-cat.is-open .tramites-cat-arrow{transform:rotate(180deg);}
  .tramites-cat ul{display:none;padding-bottom:16px;}
  .tramites-cat.is-open ul{display:flex;}
}

/* ============ TRUST / SEGURO ============ */
.trust-grid{display:grid;grid-template-columns:1fr 0.7fr;gap:48px;align-items:center;}
@media (max-width:860px){ .trust-grid{grid-template-columns:1fr;} }
.trust-list{display:flex;flex-direction:column;gap:0;}
.trust-list li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:16px 0;border-top:1px solid var(--border);font-size:14.5px;}
.trust-list li:first-child{border-top:none;}
.trust-list b{color:var(--blue-dark);}
.trust-badge{
  width:170px;height:170px;margin:0 auto;border-radius:50%;
  background:var(--blue-tint);border:1px solid var(--blue-tint-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--blue-dark);font-weight:600;font-size:13px;line-height:1.4;
}

/* ============ COVERAGE MAP ============ */
.coverage-graphic{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-soft);padding:24px;}
.node{fill:var(--blue);}
.node--a{fill:var(--blue-dark);}
.node-line{stroke:var(--blue);stroke-opacity:0.25;stroke-width:1.3;}

/* ============ COBERTURA (same Vimeo video as motocity.cl, masked into a rounded rectangle) ============ */
.coverage-section{position:relative;background:var(--blue-darker);color:#fff;}
.coverage-section .trust-list li{border-top-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.85);}
.coverage-section .trust-badge{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:#fff;}
.coverage-video-circle{
  position:relative;width:100%;max-width:560px;aspect-ratio:4/3;margin:0 auto;
  border-radius:28px;overflow:hidden;clip-path:inset(0 round 28px);
  border:6px solid rgba(255,255,255,0.15);
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.45);
}
.coverage-video-circle iframe{
  position:absolute;top:50%;left:50%;
  width:160%;height:160%;      /* deliberately oversized so the video always fully fills the
                                   rounded-rect mask edge-to-edge, at the cost of cropping its
                                   own outer edges/corners rather than risking any gap */
  transform:translate(-50%,-50%);
  pointer-events:none;
}
@media (max-width:860px){ .coverage-video-circle{max-width:420px;margin-top:32px;} }

/* ============ DRAWER TEASERS (Seguro / Reclutamiento) ============ */
.drawer-teasers{gap:24px;}
.drawer-teaser{
  display:flex;align-items:center;gap:18px;text-align:left;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;cursor:pointer;font-family:inherit;width:100%;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.drawer-teaser:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ink-faint);}
.drawer-teaser-ic{
  width:56px;height:56px;border-radius:16px;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.drawer-teaser-ic svg{width:28px;height:28px;}
.drawer-teaser-text{flex:1;min-width:0;}
.drawer-teaser-text h3{font-size:17px;margin-bottom:4px;}
.drawer-teaser-text p{font-size:14px;color:var(--ink-soft);}
.drawer-teaser-arrow{width:20px;height:20px;flex:none;color:var(--ink-faint);}

/* ============ SIDE DRAWERS ============ */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(11,18,32,0.55);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto;}
.side-drawer{
  position:fixed;top:0;bottom:0;width:min(560px,100%);background:#fff;z-index:101;
  padding:64px 40px 40px;overflow-y:auto;
  box-shadow:0 0 60px rgba(0,0,0,0.25);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.side-drawer--left{left:0;transform:translateX(-100%);}
.side-drawer--right{right:0;transform:translateX(100%);}
.side-drawer--wide{width:min(720px,100%);}
/* Inside a drawer, the trámites categories stay accordion-collapsed regardless of viewport
   width (unlike the same markup used inline on the page, where the accordion only kicks in
   on narrow screens — see the plain .tramites-cat rules above) since the drawer itself is
   already a fixed ~560-720px column no matter how wide the browser window is. */
.side-drawer .tramites-grid{grid-template-columns:1fr;gap:0;margin-top:8px;}
.side-drawer .tramites-cat{border-bottom:1px solid var(--border);}
.side-drawer .tramites-cat-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;margin-bottom:0;padding:14px 0;
}
.side-drawer .tramites-cat-arrow{display:block;}
.side-drawer .tramites-cat.is-open .tramites-cat-arrow{transform:rotate(180deg);}
.side-drawer .tramites-cat ul{display:none;padding-bottom:16px;}
.side-drawer .tramites-cat.is-open ul{display:flex;}
.side-drawer.is-open{transform:translateX(0);}
.side-drawer h2{font-size:clamp(24px,3vw,30px);margin:12px 0 18px;}
.side-drawer p{font-size:15.5px;color:var(--ink-soft);margin-bottom:20px;line-height:1.6;}
.drawer-coverage{display:flex;flex-direction:column;gap:18px;margin-bottom:24px;}
.drawer-coverage-item{padding:16px 0;border-top:1px solid var(--border);}
.drawer-coverage-item:first-child{border-top:none;padding-top:0;}
.drawer-coverage-item h3{font-size:19px;color:var(--blue-dark);margin-bottom:6px;}
.drawer-coverage-item p{font-size:14.5px;color:var(--ink-soft);margin-bottom:0;}
.side-drawer .btn{margin-top:8px;}
.drawer-email{
  display:inline-block;font-size:clamp(22px,3vw,28px);font-weight:700;color:var(--blue);
  word-break:break-word;border-bottom:2px solid var(--blue-tint-2);padding-bottom:6px;
}
.drawer-email:hover{color:var(--blue-dark);border-bottom-color:var(--blue);}
.side-drawer-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.side-drawer-close svg{width:22px;height:22px;}
@media (max-width:560px){ .side-drawer{width:100%;padding:64px 24px 32px;} }

/* ============ CTA FINAL ============ */
.cta-final{
  background:var(--blue-darker);
  border-radius:28px;
  padding:64px 48px;
  text-align:center;
  color:#fff;
}
@media (max-width:700px){ .cta-final{padding:48px 24px;border-radius:20px;} }
.cta-final h2{color:#fff;font-size:clamp(28px,4vw,40px);max-width:640px;margin:0 auto 14px;}
.cta-final p{color:rgba(255,255,255,0.72);font-size:16px;max-width:460px;margin:0 auto 32px;}
.cta-final-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;}

/* ============ CONTACT STRIP ============ */
.contact-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:0;border-top:1px solid var(--border);margin-top:56px;padding-top:28px;}
.contact-strip>div{display:flex;align-items:center;gap:9px;padding:8px 24px;border-left:1px solid var(--border);font-size:14px;}
.contact-strip>div:first-child{border-left:none;}
.contact-strip svg{width:16px;height:16px;color:var(--blue);}
@media (max-width:700px){ .contact-strip{flex-direction:column;align-items:center;} .contact-strip>div{border-left:none;border-top:1px solid var(--border);} .contact-strip>div:first-child{border-top:none;} }

/* ============ PAGE HERO (subpages) ============ */
.page-hero{padding:64px 0 8px;}
.page-hero h1{font-size:clamp(32px,4.4vw,48px);margin-bottom:16px;}
.page-hero p{font-size:17px;color:var(--ink-soft);max-width:560px;}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:52px;align-items:center;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about-photo{position:relative;}
.about-photo img{width:100%;display:block;border-radius:20px;box-shadow:var(--shadow-md);}
.about-stamp{
  width:130px;height:130px;border-radius:50%;border:1px solid var(--blue-tint-2);
  background:var(--blue-tint);display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--blue-dark);
}
.about-photo .about-stamp{
  position:absolute;left:-24px;top:-24px;background:#fff;box-shadow:var(--shadow-md);
}
.about-stamp strong{font-size:34px;font-weight:700;line-height:1;}
.about-stamp span{font-size:11px;letter-spacing:0.05em;margin-top:4px;}
@media (max-width:560px){
  .about-photo .about-stamp{width:100px;height:100px;left:-14px;top:-14px;}
  .about-photo .about-stamp strong{font-size:26px;}
}
.about-copy p{font-size:16px;color:var(--ink-soft);margin-bottom:16px;}
.about-copy p:first-of-type{font-size:19px;color:var(--ink);font-weight:500;}
/* Words start dim and light up to full opacity as the reader scrolls past this block —
   driven by initRevealText() in main.js (GSAP ScrollTrigger scrub), not a CSS transition,
   since the "wipe" position must track scroll position exactly rather than run on a timer. */
.rt-word{opacity:0.25;}
.about-signature{display:block;height:64px;width:auto;margin-top:18px;opacity:0.9;}
@media (max-width:860px){ .about-signature{margin-left:auto;margin-right:auto;} }

/* ============ FORM ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14.5px;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue-tint-2);border-color:var(--blue);}
.field textarea{resize:vertical;min-height:110px;}

/* ============ FOOTER ============ */
.site-footer{background:var(--blue-darker);color:rgba(255,255,255,0.7);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
/* logo-on-blue.svg has a lot of built-in transparent padding above/below the mark itself
   (roughly 23% top, 26% bottom of its own height) — cropping that visually here keeps the
   logo mark the same size while removing the dead space it left in the footer layout. */
.footer-logo{display:block;text-align:left;}
.footer-logo-crop{display:inline-block;overflow:hidden;width:200px;height:51px;position:relative;margin-bottom:4px;}
.footer-logo-crop img{height:100px;width:auto;position:absolute;top:-23px;left:0;}
@media (max-width:520px){
  .footer-logo{text-align:center;}
  .footer-access{align-items:center;}
}
.footer-grid p{font-size:14px;color:rgba(255,255,255,0.55);max-width:280px;}
.footer-col h5{font-size:13px;color:#fff;margin-bottom:16px;font-weight:600;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col li{font-size:14px;color:rgba(255,255,255,0.6);}
.footer-col a{font-size:14px;color:rgba(255,255,255,0.6);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;font-size:13px;
  color:rgba(255,255,255,0.45);display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;text-align:center;
}
.footer-bottom a{color:rgba(255,255,255,0.45);transition:color .15s;}
.footer-bottom a:hover{color:#fff;}
.footer-cookienote{
  font-size:12px;color:rgba(255,255,255,0.35);text-align:center;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);
}
.footer-cookienote a{color:rgba(255,255,255,0.5);text-decoration:underline;}
.footer-cookienote a:hover{color:#fff;}

.legal-page{padding:64px 0 96px;}
.legal-page .w{max-width:780px;}
.legal-page h1{font-size:34px;margin-bottom:8px;}
.legal-page .legal-updated{color:var(--ink-faint);font-size:14px;margin-bottom:40px;}
.legal-page h2{font-size:20px;margin:36px 0 12px;color:var(--blue-dark);}
.legal-page p,.legal-page li{color:var(--ink-soft);font-size:15.5px;line-height:1.7;}
.legal-page ul{margin:0 0 16px 20px;}
.legal-page li{margin-bottom:6px;}
.legal-page a{color:var(--blue);text-decoration:underline;}
@media (max-width:860px){ .legal-page{padding:40px 0 64px;} .legal-page h1{font-size:27px;} }

/* ============ BLOG ============ */
.blog-hero{padding:56px 0 40px;text-align:center;}
.blog-hero h1{font-size:38px;margin-bottom:12px;}
.blog-hero p{color:var(--ink-soft);font-size:16px;max-width:560px;margin:0 auto;}
@media (max-width:860px){ .blog-hero{padding:40px 0 28px;} .blog-hero h1{font-size:28px;} }

.blog-list{padding:0 0 96px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:960px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr;} }

.blog-card{
  display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.blog-card-cover{aspect-ratio:16/10;display:block;}
.blog-card-cover svg{width:100%;height:100%;display:block;}
.blog-card-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.blog-card-tag{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.blog-card h2{font-size:18px;line-height:1.3;margin-bottom:8px;}
.blog-card h2 a{color:var(--ink);text-decoration:none;}
.blog-card h2 a:hover{color:var(--blue);}
.blog-card p{color:var(--ink-soft);font-size:14px;line-height:1.6;flex:1;}
.blog-card-readmore{font-size:13.5px;font-weight:600;color:var(--blue);margin-top:14px;}

.article-page{padding:48px 0 96px;}
.article-page .w{max-width:760px;}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:32px;aspect-ratio:2.2/1;}
.article-cover svg{width:100%;height:100%;display:block;}
.article-tag{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.article-page h1{font-size:34px;margin-bottom:10px;}
.article-meta{color:var(--ink-faint);font-size:14px;margin-bottom:36px;}
.article-page h2{font-size:22px;margin:36px 0 12px;color:var(--blue-dark);}
.article-page p,.article-page li{color:var(--ink-soft);font-size:16px;line-height:1.75;}
.article-page ul{margin:0 0 16px 20px;}
.article-page li{margin-bottom:6px;}
.article-page p a,.article-page li a{color:var(--blue);text-decoration:underline;}
.article-cta .btn{color:#fff;}
.article-cta{
  margin-top:40px;padding:28px;border-radius:var(--radius-lg);background:var(--blue-tint);
  text-align:center;
}
.article-cta p{color:var(--ink);font-size:16px;margin-bottom:16px;}
@media (max-width:860px){ .article-page h1{font-size:26px;} }

.whatsapp-float{
  position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);z-index:91;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.whatsapp-float svg{width:28px;height:28px;}
.whatsapp-float.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.whatsapp-float:hover{background:#1ebe5a;}
@media (max-width:600px){ .whatsapp-float{right:16px;bottom:16px;width:50px;height:50px;} .whatsapp-float svg{width:24px;height:24px;} }

.back-to-top{
  position:fixed;right:24px;bottom:92px;width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);cursor:pointer;z-index:90;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.back-to-top svg{width:22px;height:22px;}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:var(--blue-dark);}
@media (max-width:600px){ .back-to-top{right:16px;bottom:78px;width:50px;height:50px;} .back-to-top svg{width:21px;height:21px;} }
.footer-access{display:flex;flex-direction:column;gap:10px;margin-top:20px;align-items:flex-start;}
.footer-access-btn{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;color:#fff;
  padding:7px 13px;border-radius:100px;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);transition:background .2s ease,border-color .2s ease;
}
.footer-access-btn:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.4);}
.footer-social{display:flex;justify-content:flex-end;gap:18px;margin-bottom:32px;padding-right:96px;}
.footer-social a{
  color:rgba(255,255,255,0.75);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.footer-social a:hover{background:rgba(255,255,255,0.18);color:#fff;}
.footer-social svg{width:24px;height:24px;}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.rv.on{opacity:1;transform:none;}
/* stagger: cascading delay for siblings revealing together */
.grid-2 > .rv:nth-child(2),.grid-3 > .rv:nth-child(2),.grid-4 > .rv:nth-child(2),.steps > .rv:nth-child(2){transition-delay:.06s;}
.grid-2 > .rv:nth-child(3),.grid-3 > .rv:nth-child(3),.grid-4 > .rv:nth-child(3),.steps > .rv:nth-child(3){transition-delay:.12s;}
.grid-3 > .rv:nth-child(4),.grid-4 > .rv:nth-child(4),.steps > .rv:nth-child(4){transition-delay:.18s;}
.grid-4 > .rv:nth-child(5){transition-delay:.24s;}
/* Service cards (Moto Express/Gestión/Corporativo) enter from off-screen on the side they sit
   on, instead of the default fade-up — the extra specificity (two classes) beats .rv.on's
   transform:none so this direction isn't clobbered by the generic reveal rule below it. */
.card-enter-right.rv{transform:translateX(70px);}
.card-enter-right.rv.on{transform:translateX(0);}
@media (max-width:860px){ .card-enter-right.rv{transform:translateX(36px);} }
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition-delay:0s !important;} }

.mt-0{margin-top:0;}
.center-text{text-align:center;}

/* =====================================================================
   ART DIRECTION SYSTEM — "Red urbana en movimiento"
   Purely additive visual layer: depth, rhythm and premium finish across
   every section EXCEPT the hero sequence. Nothing here touches
   .motocity-hero-*, .site-header--hero, or any hero-related rule above —
   those blocks are completely untouched. Built entirely from CSS custom
   properties, pseudo-elements, gradients and lightweight inline-SVG data
   URIs (no new images, no new libraries, no content/markup restructuring).
   Every decorative element sits at z-index:-1 behind real content and
   never affects text contrast. Ambient effects respect prefers-reduced-motion.
   ===================================================================== */
/* Defensive guard: the hero sequence's own horizontal sizing is untouched (it never relies on
   body overflow), this only clips any stray decorative pseudo-element from ever introducing a
   horizontal scrollbar. Only set on body — setting it on html too breaks position:sticky
   (e.g. .site-header) on every non-hero page. */
body{overflow-x:hidden;}
:root{
  --surf-1:var(--bg-soft);
  --surf-2:#eef2f8;
  --surf-dark-2:#0a2547;
  --dot-lt:rgba(35,101,188,0.16);
  --dot-dk:rgba(255,255,255,0.14);
  --line-lt-soft:rgba(35,101,188,0.10);
  --card-border-soft:rgba(15,32,60,0.07);
  --card-shadow-rest:0 1px 2px rgba(15,32,60,0.04),0 16px 32px -20px rgba(15,32,60,0.18);
  --card-shadow-hover:0 1px 2px rgba(15,32,60,0.05),0 28px 52px -22px rgba(15,32,60,0.28);
  --ease-premium:cubic-bezier(.22,.61,.36,1);
  --dur-fast:220ms;
  --dur-med:360ms;
}

/* ---- Transition: HERO end → Servicios ---- */
#servicios{position:relative;z-index:0;}
#servicios::before{
  content:"";position:absolute;top:0;left:0;right:0;height:220px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(35,101,188,0.06), transparent);
}

/* ---- Servicios: card depth + a faint route connecting the 4 icons ---- */
.services-preview{position:relative;z-index:0;}
.services-preview::before{
  content:"";position:absolute;left:8%;right:8%;top:30px;height:1px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-lt-soft) 0 6px,transparent 6px 16px);
  background-size:16px 1px;background-repeat:repeat-x;
}
@media (max-width:700px){ .services-preview::before{display:none;} }

.service-card{
  border-color:var(--card-border-soft);
  box-shadow:var(--card-shadow-rest);
  background:linear-gradient(180deg,#fff,var(--surf-1) 180%);
}
.service-card:hover{box-shadow:var(--card-shadow-hover),0 0 0 2px var(--brasa-400);}
.service-card--hi{
  background:linear-gradient(155deg,var(--blue-darker),var(--surf-dark-2) 140%);
  z-index:0;
}
.service-card--hi::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-dk) 1px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 100% 0%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 95% 75% at 100% 0%,#000,transparent 70%);
}

/* ---- Trámites: editorial numbering, thin separators, faint route backdrop ---- */
#tramites{position:relative;z-index:0;}
#tramites::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath d='M20,420 C220,300 260,460 460,360 C660,260 720,420 980,180' fill='none' stroke='%232365bc' stroke-opacity='0.08' stroke-width='2' stroke-dasharray='1 12' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.tramites-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;margin-right:4px;
  background:var(--blue-tint);font-size:12px;
}
@media (min-width:561px){
  .tramites-cat{border-top:1px solid var(--border);padding-top:20px;transition:background-color var(--dur-med) var(--ease-premium);}
  .tramites-cat:hover{background-color:rgba(35,101,188,0.025);}
}
.speed-gauge svg{filter:drop-shadow(0 6px 16px rgba(193,95,60,0.16));}

/* ---- Facturación: differentiate the two billing cards + a faint process backdrop ---- */
.billing-section{position:relative;z-index:0;}
.billing-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(35,101,188,0.1) 1.6px,transparent 2.2px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
}
.bcard--solid{
  position:relative;z-index:0;
  box-shadow:var(--card-shadow-rest);
  background:linear-gradient(155deg,var(--blue),var(--blue-dark) 150%);
}
.bcard--solid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,0.16) 1px,transparent 1.6px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 0% 0%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 85% 65% at 0% 0%,#000,transparent 70%);
}
.bcard--solid-alt{background:linear-gradient(155deg,var(--blue-dark),var(--blue-darker) 150%);}
.bcard--solid-alt::before{
  background-image:linear-gradient(90deg,rgba(255,255,255,0.12) 0 1px,transparent 1px 14px);
  background-size:14px 100%;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 100% 0%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 85% 65% at 100% 0%,#000,transparent 70%);
}
.bcard-step:not(:last-child)::after{background:rgba(255,255,255,0.4);}

/* ---- Tecnología: richer dark canvas + platform glow ---- */
#tecnologia{position:relative;z-index:0;}
#tecnologia::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-dk) 1px,transparent 1.6px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 15% 25%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 95% 85% at 15% 25%,#000,transparent 72%);
}
.platform-shot{position:relative;z-index:0;}
.platform-shot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 12% 8%, rgba(63,140,222,0.35), transparent 62%);
}
.feature--row .ic{transition:transform var(--dur-med) var(--ease-premium),background-color var(--dur-med);}
.feature--row:hover .ic{transform:translateY(-2px);background:rgba(255,255,255,0.16) !important;}

/* ---- Quiénes somos: soft composition behind the photo + a thread to the copy ---- */
.about-photo{z-index:0;}
.about-photo::before{
  content:"";position:absolute;inset:-4%;z-index:-1;
  border-radius:38% 62% 58% 42%/48% 42% 58% 52%;
  background:var(--surf-2);
}
@media (max-width:560px){ .about-photo::before{inset:-2%;} }
.about-grid{position:relative;z-index:0;}
.about-grid::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:36%;right:-4%;top:8%;bottom:8%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,40 C120,10 140,150 260,120 C340,100 340,220 400,260' fill='none' stroke='%232365bc' stroke-opacity='0.10' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;
}
@media (max-width:860px){ .about-grid::before{display:none;} }
.about-stamp{box-shadow:0 10px 30px -12px rgba(15,32,60,0.25);}

/* ---- Client logos: smoother arrival + a touch more presence ---- */
.clients-section{position:relative;z-index:0;}
.clients-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:100px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(35,101,188,0.05), transparent);
}
.clients-row img{opacity:0.62;}
.clients-row li:hover img{opacity:0.95;}

/* ---- Testimonios: large quote marks, card depth, section wash ---- */
.testi-section{background:linear-gradient(180deg,#fff,var(--surf-1));}
.testi{
  position:relative;z-index:0;overflow:hidden;
  border:1px solid var(--card-border-soft);
  box-shadow:var(--card-shadow-rest);
  background:linear-gradient(180deg,#fff,var(--surf-1) 240%);
}
.testi:hover{box-shadow:var(--card-shadow-hover);}
/* ---- Cobertura: faint urban grid + operational nodes over the dark blue ---- */
.coverage-section{z-index:0;}
.coverage-section::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 400'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Cline x1='0' y1='80' x2='900' y2='80'/%3E%3Cline x1='0' y1='200' x2='900' y2='200'/%3E%3Cline x1='0' y1='320' x2='900' y2='320'/%3E%3Cline x1='150' y1='0' x2='150' y2='400'/%3E%3Cline x1='450' y1='0' x2='450' y2='400'/%3E%3Cline x1='750' y1='0' x2='750' y2='400'/%3E%3C/g%3E%3Ccircle cx='150' cy='80' r='3' fill='%23ffffff' fill-opacity='0.2'/%3E%3Ccircle cx='450' cy='200' r='3' fill='%23ffffff' fill-opacity='0.2'/%3E%3Ccircle cx='750' cy='320' r='3' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.coverage-section > .w{position:relative;z-index:1;}

/* ---- Seguro / Reclutamiento ---- */
.drawer-teaser{border-color:var(--card-border-soft);box-shadow:var(--card-shadow-rest);}
.drawer-teaser:hover{box-shadow:var(--card-shadow-hover);}
.drawer-teaser-arrow{transition:transform var(--dur-fast) var(--ease-premium),color var(--dur-fast);}
.drawer-teaser:hover .drawer-teaser-arrow{transform:translateX(4px);color:var(--blue);}
.drawer-teasers .drawer-teaser:nth-child(2) .drawer-teaser-ic{background:var(--orange-tint);color:var(--orange-dark);}

/* ---- Contacto: closing composition ---- */
#contacto{position:relative;z-index:0;background:linear-gradient(180deg,#fff,var(--surf-1) 60%,#fff);}
#contacto::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-lt) 1px,transparent 1.6px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 85% 0%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 65% at 85% 0%,#000,transparent 72%);
}
#contacto .card{border-color:var(--card-border-soft);box-shadow:var(--card-shadow-rest);}
.drawer-hero-img{
  width:calc(100% + 80px);margin:-64px -40px 24px;display:block;
  border-bottom:1px solid var(--border);
}
@media (max-width:560px){ .drawer-hero-img{width:calc(100% + 48px);margin:-64px -24px 20px;} }
.drawer-hero-img--bottom{
  width:100%;margin:32px 0 0;border-radius:var(--radius-md);border:1px solid var(--border);
}
@media (max-width:560px){ .drawer-hero-img--bottom{width:100%;margin:28px 0 0;} }
.card--soft{background:var(--surf-1);}

/* ============ SERVICE LANDING PAGES ============ */
.breadcrumb{padding:16px 0;border-bottom:1px solid var(--border);}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-faint);}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--ink-faint);}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline;}
.breadcrumb li[aria-current="page"]{color:var(--ink);font-weight:600;}

.service-hero{padding:64px 0;}
.service-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){ .service-hero-grid{grid-template-columns:1fr;gap:32px;} }
.service-hero-copy h1{font-size:clamp(28px,3.4vw,42px);margin:10px 0 16px;}
.service-hero-sub{color:var(--ink-soft);font-size:16.5px;line-height:1.65;margin-bottom:28px;}
.service-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;}
.service-hero-ctas .btn--secondary:hover{background:#25D366;border-color:#25D366;color:#fff;}
.service-hero-media{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.service-hero-media svg,.service-hero-media img{width:100%;height:100%;display:block;object-fit:cover;}
@media (max-width:900px){ .service-hero-media{order:2;max-width:420px;margin:0 auto;} .service-hero-copy{order:1;} }

.service-intro h2,.service-usecases h2,.service-empresas h2,.service-benefits h2,
.service-steps h2,.service-coverage h2,.service-insurance h2,.service-faq h2,.service-related h2,
.service-cta-final h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px;}
.service-intro p,.service-steps > .w > p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:760px;}

.service-check-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;list-style:none;margin:20px 0 0;padding:0;
}
@media (max-width:700px){ .service-check-grid{grid-template-columns:1fr;} }
.service-check-grid li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);font-size:15px;line-height:1.5;}
.service-check-grid li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue);}

.service-note{margin-top:20px;padding:14px 18px;background:var(--blue-tint);border-radius:var(--radius-md);color:var(--blue-dark);font-size:14px;}

.service-tag-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0;}
.service-tag-list li{
  background:#fff;border:1px solid var(--border);border-radius:100px;padding:8px 16px;
  font-size:13.5px;color:var(--ink-soft);
}

.service-steps-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px;}
.service-steps-list li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--ink-soft);}
.service-step-num{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}

.service-coverage p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;max-width:760px;}

.service-insurance{padding:56px 0;}
.service-insurance p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;max-width:760px;margin-bottom:16px;}
.service-inline-link{color:var(--blue);font-weight:600;text-decoration:underline;}

.service-faq{max-width:900px;}
.service-faq > .w{max-width:820px;}
.faq-item{padding:20px 0;border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-item h3{font-size:17px;margin-bottom:8px;color:var(--ink);}
.faq-item p{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0;}

.service-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
@media (max-width:900px){ .service-related-grid{grid-template-columns:1fr;} }
.service-related-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px 24px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;
}
.service-related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.service-related-card h3{color:var(--blue);font-size:16px;margin-bottom:6px;}
.service-related-card p{color:var(--ink-soft);font-size:14px;margin:0;}
.service-resources{margin-top:20px;color:var(--ink-soft);font-size:14.5px;}
.service-resources a{color:var(--blue);text-decoration:underline;}

.service-cta-final{padding:64px 0 80px;text-align:center;background:var(--blue-dark);color:#fff;}
.service-cta-final h2{color:#fff;}
.service-cta-final p{color:rgba(255,255,255,0.75);max-width:560px;margin:0 auto 28px;font-size:16px;}

/* ---- Ambient layer for service landing pages: reuses the same dot-grid / route-line /
   gradient-fade vocabulary as the "Red urbana en movimiento" system above — no new colors,
   libraries or images, everything sits at z-index:-1 behind real content. ---- */
.service-usecases{position:relative;z-index:0;}
.service-usecases::before{
  content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(35,101,188,0.05), transparent);
}
.service-benefits{position:relative;z-index:0;}
.service-benefits::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-lt) 1.4px,transparent 2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 85% 20%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 80% at 85% 20%,#000,transparent 72%);
}
.service-steps{position:relative;z-index:0;}
.service-steps::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath d='M20,420 C220,300 260,460 460,360 C660,260 720,420 980,180' fill='none' stroke='%232365bc' stroke-opacity='0.09' stroke-width='2' stroke-dasharray='1 12' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.service-coverage{position:relative;z-index:0;}
.service-coverage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-lt) 1.4px,transparent 2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 15% 80%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 80% at 15% 80%,#000,transparent 72%);
}
.service-cta-final{position:relative;z-index:0;overflow:hidden;}
.service-cta-final::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-dk) 1px,transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 90% at 50% 0%,#000,transparent 75%);
}
.service-cta-final::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 120%, rgba(63,140,222,0.35), transparent 65%);
}

@media (prefers-reduced-motion:reduce){
  .service-related-card{transition:none;}
}

.field input,.field select,.field textarea{transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px var(--blue-tint);}

@media (prefers-reduced-motion:reduce){
  .service-card,.bcard--solid,.testi,.drawer-teaser,.feature--row .ic{transition:none;}
}

/* ---- Homepage: "Recursos para empresas" teaser (between #contacto and the footer) ---- */
.resources-teaser{padding:56px 0;background:var(--bg);position:relative;z-index:0;}
@media (max-width:860px){ .resources-teaser{padding:40px 0;} }
.resources-teaser::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot-lt) 1px,transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
}
#mas-info{position:relative;z-index:0;background:var(--surf-2);}
#mas-info::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(193,95,60,0.14) 1px,transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
}
#mas-info{padding:55px 0;}
@media (max-width:860px){ #mas-info{padding:37px 0;} }
.resources-teaser-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center;}
@media (max-width:900px){ .resources-teaser-grid{grid-template-columns:1fr;gap:32px;} }
.resources-teaser-copy h2{font-size:clamp(24px,2.8vw,32px);margin:10px 0 14px;}
.resources-teaser-copy p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-bottom:26px;max-width:420px;}
.resources-teaser-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:700px){ .resources-teaser-cards{grid-template-columns:1fr;} }
.resources-teaser-card{
  position:relative;display:block;aspect-ratio:1.6/1;border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;
}
.resources-teaser-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.resources-teaser-card img{width:100%;height:100%;object-fit:cover;display:block;}
.resources-teaser-card span{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(to top, rgba(6,20,40,0.82), transparent);
  color:#fff;font-size:13px;font-weight:600;line-height:1.35;
}
@media (prefers-reduced-motion:reduce){
  .resources-teaser-card{transition:none;}
}

/* ---- Site-wide WhatsApp buttons: green on hover + a chat icon ---- */
/* Placed at the end of the stylesheet so it wins over every .btn variant's own :hover
   background (equal specificity, source order decides) without needing !important. Only adds
   the icon via ::before when the button doesn't already carry its own inline <svg> (the two big
   CTAs on /contacto/ already ship one) — avoids a duplicate icon there. */
.btn[href^="https://wa.me/"]:not(:has(svg))::before{
  content:"";width:16px;height:16px;flex:none;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.87 9.87 0 0 0 12.04 2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.87 9.87 0 0 0 12.04 2Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.btn[href^="https://wa.me/"]:hover{background:#25D366;border-color:#25D366;color:#fff;}