/* =============================================================
   TRANSPORTES ESPINOSA — styles.css
   Archetype: Editorial Dark (graphite + brand green)
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Fondo grafito (nunca negro puro) */
  --bg:        #0B0F0C;
  --bg-2:      #0F140F;
  --bg-3:      #151B14;   /* card */
  --bg-4:      #1B221A;

  /* Texto (off-white con leve tinte verde) */
  --text:      #EAF1E7;
  --text-2:    #C0CBBB;
  --text-mute: #7E897A;

  /* Verde de marca (oscuro -> lima) */
  --green:      #35B24A;
  --green-dark: #1E8E36;
  --lime:       #8CC63F;
  --green-soft: rgba(53, 178, 74, 0.14);

  /* Grafito de marca (chevron gris) */
  --graphite:   #454b45;
  --graphite-2: #9aa398;

  --line:      rgba(234, 241, 231, 0.10);
  --line-2:    rgba(234, 241, 231, 0.18);

  --grad: linear-gradient(120deg, var(--green-dark) 0%, var(--green) 45%, var(--lime) 100%);

  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 124px;
  --maxw: 1240px;
  --pad: clamp(1.15rem, 5vw, 3.5rem);

  --shadow-truck: drop-shadow(0 42px 46px rgba(0,0,0,0.62));
}

/* Página oficial de Facebook */
.facebook-feature { --facebook-blue: #0866ff; scroll-margin-top: var(--nav-h); padding-block: clamp(4rem, 8vw, 7rem); border-top: 5px solid var(--facebook-blue); background: radial-gradient(ellipse at 80% 12%, rgba(8,102,255,.27), transparent 50%), linear-gradient(180deg, #101711 0%, #0b0f0c 100%); }
.facebook-feature-platform { display: inline-flex; align-items: center; min-height: 2.3rem; padding: .35rem 1rem; border-radius: .55rem; background: var(--facebook-blue); color: #fff; box-shadow: 0 10px 28px rgba(8,102,255,.32); font: 700 .77rem/1.2 var(--sans); letter-spacing: .12em; }
.facebook-feature-blue { color: #5e9aff; text-shadow: 0 8px 35px rgba(8,102,255,.3); }
.facebook-feature-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: 2rem; }
.facebook-feature-head h2 { max-width: 15ch; margin-top: 1rem; font: 700 clamp(3.2rem, 7vw, 6.3rem)/.98 var(--display); letter-spacing: -.06em; }
.facebook-feature-head p { max-width: 43ch; color: var(--text-2); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.facebook-feature-card { overflow: hidden; border: 1px solid rgba(81,143,255,.55); border-radius: 22px; background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,.27), 0 0 45px rgba(8,102,255,.1); }
.facebook-feature-card > img { display: block; width: 100%; height: auto; }
.facebook-feature-actions { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.2rem, 3vw, 2rem); }
.facebook-feature-actions > div { display: grid; gap: .2rem; }
.facebook-feature-label { color: #8bb7ff; font: 500 .7rem/1.3 var(--mono); letter-spacing: .14em; }
.facebook-feature-actions strong { font: 500 clamp(1rem, 2vw, 1.3rem)/1.35 var(--display); }
.facebook-feature-actions .btn { white-space: nowrap; }
.facebook-feature-cta { min-height: 3.3rem; padding-inline: 1.5rem; background: var(--facebook-blue); color: #fff; box-shadow: 0 12px 30px rgba(8,102,255,.25); }
.facebook-feature-cta:hover { background: #0054d9; box-shadow: 0 16px 36px rgba(8,102,255,.4); transform: translateY(-3px); }
.facebook-feature-cta:focus-visible { outline: 3px solid #a8caff; outline-offset: 4px; }
@media (max-width: 760px) {
  .facebook-feature-head { grid-template-columns: 1fr; gap: 1rem; }
  .facebook-feature-head h2 { max-width: 18ch; }
  .facebook-feature-actions { align-items: stretch; flex-direction: column; }
  .facebook-feature-actions .btn { justify-content: center; }
}

@property --sheen {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.03; letter-spacing: -0.02em; font-family: var(--display); font-weight: 600; }
::selection { background: var(--green); color: #05210b; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--lime); color: #05210b;
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lime);
  display: inline-flex; align-items: center; gap: .6rem;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--grad);
}
.eyebrow-num { font-family: var(--mono); color: var(--text-mute); font-size: .8rem; }

.section { position: relative; padding-block: clamp(4.5rem, 11vw, 9rem); }
.section-head { max-width: 760px; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-head h2 {
  font-size: clamp(2rem, 5.4vw, 3.7rem);
  margin-top: 1.1rem;
  line-height: 1.02;
}
.section-head p {
  margin-top: 1.2rem; color: var(--text-2);
  font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 60ch;
}
.text-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 100px;
  font-weight: 600; font-size: .96rem; letter-spacing: -0.01em;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .3s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--grad); color: #06220c;
  box-shadow: 0 12px 30px -10px rgba(53,178,74,.6);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -12px rgba(140,198,63,.7); }
.btn-ghost {
  border: 1px solid var(--line-2); color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { border-color: var(--lime); color: var(--text); transform: translateY(-3px); background: var(--green-soft); }
.btn-wa { background: #1faf52; color: #fff; }
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(31,175,82,.7); }

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .8s var(--ease-out), visibility .8s;
  animation: splashSafety .01s 4.4s forwards;
}
.splash.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { width: 168px; height: auto; animation: splashPulse 1.6s var(--ease-soft) infinite; }
.splash-word {
  margin-top: 1.3rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-mute);
  overflow: hidden;
}
@keyframes splashPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes splashSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease-out), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(11,15,12,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; }
.brand-logo { height: 66px; width: auto; display: block; }
@media (min-width: 620px) { .brand-logo { height: 98px; } }

.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links a { font-size: .92rem; color: var(--text-2); position: relative; padding: .3rem 0; transition: color .3s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--grad); transition: width .35s var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: .8rem; }
.nav-cta { display: none; }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: transform .35s var(--ease-out), opacity .3s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 899;
  background: rgba(9,13,10,0.97);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: 2rem var(--pad);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease-out), opacity .4s;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 600;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 1rem;
}
.mobile-menu a span { font-family: var(--mono); font-size: .8rem; color: var(--lime); }
.mobile-menu .btn { margin-top: 1.6rem; align-self: flex-start; }

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3rem;
  overflow: clip;
}
.hero-mesh {
  position: absolute; inset: -20% -10% -30% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 44% at 78% 18%, rgba(140,198,63,.18), transparent 70%),
    radial-gradient(46% 50% at 88% 62%, rgba(53,178,74,.22), transparent 72%),
    radial-gradient(40% 40% at 12% 88%, rgba(30,142,54,.12), transparent 70%);
  filter: blur(30px);
  animation: meshDrift 22s ease-in-out infinite;
}
@keyframes meshDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%,1.5%,0) scale(1.08); }
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 92px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero .container { position: relative; z-index: 3; width: 100%; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }

.hero-copy { max-width: 640px; }
.hero-title {
  font-size: clamp(2.7rem, 8.5vw, 6rem);
  line-height: 0.98; margin: 1.4rem 0 0; letter-spacing: -0.03em;
}
.hero-title em { font-style: normal; display: inline-block; }
.hero-sub {
  margin-top: 1.5rem; font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  color: var(--text-2); max-width: 46ch;
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

.hero-truck-wrap {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: center;
  min-height: 40vh;
}
.hero-truck {
  width: 100%; max-width: 720px;
  filter: var(--shadow-truck);
  animation: truckFloat 7s var(--ease-soft) infinite;
}
.hero-truck-glow {
  position: absolute; z-index: -1; width: 80%; height: 46%;
  left: 50%; top: 58%; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(53,178,74,.42), transparent 78%);
  filter: blur(40px);
}
@keyframes truckFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Hero stats */
.hero-stats {
  position: relative; z-index: 3;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.stat { background: var(--bg); padding: 1.3rem 1.2rem; }
.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1; }
.stat-num .suf { color: var(--lime); }
.stat-label { margin-top: .5rem; font-size: .82rem; color: var(--text-mute); }

.scroll-hint {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-mute); display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 34px; background: linear-gradient(var(--lime), transparent);
  animation: scrollLine 2s var(--ease-soft) infinite;
}
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =============================================================
   8. Marquee
   ============================================================= */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; overflow: hidden; background: var(--bg-2);
  display: flex; user-select: none;
}
.marquee-track {
  display: flex; gap: 2.6rem; white-space: nowrap; flex: none;
  animation: marquee 34s linear infinite;
  padding-right: 2.6rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 2.6rem; }
.marquee-item::after { content: "◆"; color: var(--green); font-size: .6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   9. Services
   ============================================================= */
.services-grid { display: grid; gap: 1.4rem; }
.service-card {
  position: relative; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  padding: 1.4rem; overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s;
  transform-style: preserve-3d;
}
.service-card:hover { border-color: var(--line-2); }
.service-halo {
  position: absolute; width: 60%; height: 60%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--green-soft), transparent 75%);
  filter: blur(30px); opacity: 0; transition: opacity .5s; pointer-events: none;
  left: var(--hx, 50%); top: var(--hy, 30%); transform: translate(-50%,-50%);
}
.service-card:hover .service-halo { opacity: 1; }
.service-media {
  position: relative; aspect-ratio: 16/11; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, var(--bg-4), var(--bg));
  display: grid; place-items: center;
}
.service-media img {
  width: 100%; height: 100%; object-fit: contain; padding: .5rem 1rem;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.5));
  transition: transform .6s var(--ease-out);
}
.service-card:hover .service-media img { transform: scale(1.05) translateY(-4px); }
.service-num { font-family: var(--mono); font-size: .8rem; color: var(--lime); }
.service-body { position: relative; z-index: 2; padding: 1.4rem .4rem .4rem; }
.service-title { font-size: 1.55rem; margin: .5rem 0 .6rem; }
.service-lead { color: var(--text); font-weight: 500; margin-bottom: .5rem; }
.service-text { color: var(--text-mute); font-size: .95rem; }

/* =============================================================
   9b. Safety / asfalto
   ============================================================= */
.safety { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.safety-grid { display: grid; gap: 2.6rem; align-items: center; }
.safety-copy h2 { font-size: clamp(1.9rem, 4.8vw, 3.2rem); margin-top: 1rem; }
.safety-copy .lead { color: var(--text-2); margin-top: 1.1rem; font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 52ch; }
.safety-list { list-style: none; margin-top: 1.8rem; display: grid; gap: 1.2rem; }
.safety-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.sl-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--green-soft); border: 1px solid var(--line-2); color: var(--lime); }
.sl-ico svg { width: 20px; height: 20px; }
.safety-list h4 { font-family: var(--display); font-size: 1.08rem; margin-bottom: .25rem; }
.safety-list p { color: var(--text-mute); font-size: .93rem; }

.safety-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.placard-card {
  border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.placard { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }
.placard-card figcaption { font-size: .82rem; color: var(--text-2); line-height: 1.4; }
.placard-card figcaption strong { color: var(--lime); }

@media (min-width: 960px) {
  .safety-grid { grid-template-columns: 1.05fr .95fr; gap: 3.4rem; }
}

/* =============================================================
   10. Pillars (por qué)
   ============================================================= */
.about-story {
  display: grid; gap: 1px; margin-bottom: 1.5rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.about-story-main { background: var(--bg-2); padding: clamp(1.6rem, 4vw, 2.5rem); }
.about-story-main p { color: var(--text-2); font-size: clamp(.98rem, 1.6vw, 1.08rem); line-height: 1.75; }
.about-story-main p + p { margin-top: 1.1rem; }
.about-story-main strong { color: var(--lime); font-weight: 600; }
.about-story blockquote {
  margin: 0; padding: clamp(1.6rem, 4vw, 2.5rem); background: var(--bg-3);
  color: var(--text); font-family: var(--display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.35;
  border-left: 3px solid var(--lime);
}
.about-story blockquote footer { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.5rem; }
.about-story blockquote footer strong { color: var(--lime); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.about-story blockquote footer span { color: var(--text-mute); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 900px) {
  .about-story { grid-template-columns: 1.35fr .85fr; }
  .about-story blockquote { border-left-width: 1px; }
}

.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pillar { background: var(--bg-2); padding: 1.9rem 1.6rem; transition: background .4s; }
.pillar:hover { background: var(--bg-3); }
.pillar-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--green-soft); border: 1px solid var(--line-2); color: var(--lime); margin-bottom: 1.1rem;
}
.pillar-ico svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.pillar p { color: var(--text-mute); font-size: .93rem; }

/* Bases / hubs */
.hubs {
  margin-top: 1.4rem; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.hub { background: var(--bg-2); padding: 1.3rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.hub-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); flex: none; box-shadow: 0 0 0 4px var(--green-soft); }
.hub h4 { font-family: var(--display); font-size: 1.08rem; }
.hub p { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); margin-top: 2px; }
@media (min-width: 720px) { .hubs { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   10b. Clientes
   ============================================================= */
.clients { background: var(--bg-2); }
.clients-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.client {
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 1.9rem 1rem; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em; color: var(--text-2);
  transition: color .35s var(--ease-out), background .35s;
}
.client:hover { color: var(--lime); background: var(--bg-3); }
.membership {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 1rem;
  border: 1px solid var(--line-2); border-radius: 100px; padding: .8rem 1.4rem .8rem .8rem;
  background: var(--green-soft);
}
.membership-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); color: var(--lime); flex: none; }
.membership-badge svg { width: 22px; height: 22px; }
.membership strong { font-family: var(--display); font-size: 1.02rem; display: block; }
.membership span { font-size: .82rem; color: var(--text-mute); }
@media (min-width: 620px) { .clients-grid { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================
   11. Fleet showcase (horizontal)
   ============================================================= */
.fleet { overflow: hidden; }
.fleet-facts {
  display: grid; grid-template-columns: 1fr; gap: 1px; margin-bottom: 2.4rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.ff { background: var(--bg-2); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .3rem; }
.ff-num { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1; color: var(--lime); }
.ff-lbl { font-size: .86rem; color: var(--text-mute); }
@media (min-width: 720px) { .fleet-facts { grid-template-columns: repeat(3, 1fr); } }
.fleet-track {
  display: flex; gap: 1.2rem; padding-inline: var(--pad);
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 1.5rem;
}
.fleet-track::-webkit-scrollbar { display: none; }
.fleet-item {
  flex: 0 0 min(82vw, 460px); scroll-snap-align: center;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(53,178,74,.10), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  position: relative;
}
.fleet-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 1.2rem 1.2rem 1.6rem;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.55));
  transition: transform .7s var(--ease-out);
}
.fleet-item:hover img { transform: scale(1.05) translateY(-4px); }
.fleet-cap {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(9,13,10,.7); backdrop-filter: blur(6px); padding: .4rem .8rem; border-radius: 100px;
  border: 1px solid var(--line-2);
}
.fleet-hint { margin-top: 1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }

/* =============================================================
   12. Process
   ============================================================= */
.process-grid { display: grid; gap: 1.2rem; counter-reset: step; }
.process-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
  padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.process-step .num {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--lime); flex: none;
}
.process-step h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.process-step p { color: var(--text-mute); max-width: 60ch; }

/* =============================================================
   13. CTA / Contact
   ============================================================= */
.cta { position: relative; overflow: hidden; }
.cta-inner {
  position: relative; border: 1px solid var(--line-2); border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(21,27,20,.9), rgba(11,15,12,.9));
  padding: clamp(1.8rem, 5vw, 3.4rem); overflow: hidden;
}
.cta-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .16; pointer-events: none;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
          mask-image: linear-gradient(90deg, transparent, #000);
}
.cta-grid { position: relative; z-index: 2; display: grid; gap: 2.4rem; }
.cta h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.cta .lead { color: var(--text-2); margin-top: 1.1rem; max-width: 44ch; }
.cta-contacts { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.cta-contacts a { display: inline-flex; align-items: center; gap: .7rem; color: var(--text-2); transition: color .3s; }
.cta-contacts a:hover { color: var(--lime); }
.cta-contacts svg { width: 18px; height: 18px; color: var(--lime); }

.form { display: grid; gap: 1rem; }
.field { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); font-family: var(--mono); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); color: var(--text);
  font: inherit; font-size: .95rem; transition: border-color .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); background: rgba(53,178,74,.06);
}
.field textarea { resize: vertical; min-height: 96px; }
.form-row { display: grid; gap: 1rem; }
.form-submit { position: relative; margin-top: .4rem; }
.form-submit .btn { width: 100%; justify-content: center; }
.form-success {
  display: none; align-items: center; gap: .7rem; color: var(--lime);
  font-weight: 600; margin-top: .3rem;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 26px; height: 26px; }
.check-path { stroke-dasharray: 48; stroke-dashoffset: 48; }
.form-success.is-visible .check-path { animation: drawCheck .7s var(--ease-out) forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* =============================================================
   13b. Curtain / expansión EE.UU.
   ============================================================= */
.curtain-section {
  position: relative; overflow: hidden;
  min-height: clamp(420px, 60vh, 620px);
  display: grid; place-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad);
  background:
    radial-gradient(120% 90% at 50% 30%, #12180f 0%, #090c08 60%, #06080600 100%),
    #070907;
  text-align: center; isolation: isolate;
}
.curtain-section::before { /* piso del escenario */
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 0;
  background: radial-gradient(80% 100% at 50% 100%, rgba(53,178,74,.10), transparent 70%);
}

/* Terciopelo REAL: la foto del telón se reparte continua entre las 2 cortinas */
.valance {
  background: #2c0608 url('assets/img/velvet-full.webp%3Fv=2') center 30% / cover no-repeat;
}
.curtain {
  background-color: #2c0608;
  background-image: url('assets/img/velvet-full.webp%3Fv=2');
  background-size: 100vw 100%;
  background-repeat: no-repeat;
}
.curtain-left  { background-position: left center; }
.curtain-right { background-position: right center; }

/* Piso de madera real con perspectiva */
.stage-floor {
  position: absolute; left: -8%; right: -8%; bottom: 0; z-index: 1;
  height: clamp(120px, 24vh, 210px);
  background: url('assets/img/wood.webp') center/cover;
  transform: perspective(340px) rotateX(55deg); transform-origin: bottom center;
  box-shadow: inset 0 30px 50px rgba(0,0,0,.6);
}
.stage-floor::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,9,7,0) 0%, rgba(7,9,7,.45) 55%, rgba(7,9,7,.92) 100%);
}
/* leve reflejo verde del escenario sobre la madera */
.stage-floor::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 120% at 50% 0%, rgba(53,178,74,.16), transparent 70%);
}

/* Cenefa superior con festón */
.valance {
  position: absolute; top: 0; left: -2%; width: 104%; z-index: 6;
  height: clamp(52px, 8vw, 96px);
  box-shadow: 0 8px 20px rgba(0,0,0,.55), inset 0 -8px 16px rgba(0,0,0,.5);
  border-bottom: 3px solid #caa24a;
  -webkit-mask:
    radial-gradient(circle 26px at 50% 0, #000 96%, #0000) 0 100% / 52px 28px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 26px) no-repeat;
          mask:
    radial-gradient(circle 26px at 50% 0, #000 96%, #0000) 0 100% / 52px 28px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 26px) no-repeat;
}

/* Cortinas laterales */
.curtain {
  position: absolute; top: 0; bottom: 0; width: 58%; z-index: 5;
  box-shadow: inset -40px 0 60px rgba(0,0,0,.6), 8px 0 24px rgba(0,0,0,.5);
  transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.curtain-left  { left: 0;  border-right: 2px solid rgba(180,140,60,.5); }
.curtain-right { right: 0; border-left: 2px solid rgba(180,140,60,.5); }
.curtain-section.is-open .curtain-left  { transform: translateX(-84%); }
.curtain-section.is-open .curtain-right { transform: translateX(84%); }

/* Botón/enlaces del escenario conservan cursor normal */
.stage a, .stage button { cursor: pointer; }
.stage-lead, .stage-title { cursor: default; }

/* Pista de interacción */
.curtain-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.8); pointer-events: none; white-space: nowrap;
  padding: .42rem 1rem; border-radius: 100px; background: rgba(9,13,10,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: hintPulse 2.6s var(--ease-soft) infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .curtain-hint { animation: none; } }

/* Capa oscura de transición: SOLO dentro del escenario (detrás de cortinas y cenefa) */
.curtain-dark {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  background: var(--bg);
}

/* "PRÓXIMAMENTE" cruzando el telón cerrado (verde de marca) */
.curtain-proximamente {
  position: absolute; top: 50%; left: 0; right: 0; z-index: 8;
  transform: translateY(-50%); text-align: center; white-space: nowrap; pointer-events: none;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 6.4vw, 4rem); letter-spacing: clamp(.12em, 1.1vw, .55em);
  background: linear-gradient(120deg, var(--green-dark), var(--green) 45%, var(--lime));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 1; transition: opacity .5s var(--ease-out);
  animation: proxPulse 2.8s var(--ease-soft) infinite;
}
.curtain-section.is-open .curtain-proximamente { opacity: 0; }
@keyframes proxPulse {
  0%,100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)); }
  50%     { filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 0 20px rgba(140,198,63,.6)); }
}
@media (prefers-reduced-motion: reduce) { .curtain-proximamente { animation: none; } }

/* Escenario / contenido */
.stage { position: relative; z-index: 3; max-width: 760px; opacity: 0; transform: translateY(18px); transition: opacity 1s .5s var(--ease-out), transform 1s .5s var(--ease-out); }
.curtain-section.is-open .stage { opacity: 1; transform: none; }
.stage-title { font-size: clamp(2rem, 5.6vw, 3.7rem); margin-top: .6rem; line-height: 1.04; }
.stage-lead { color: var(--text-2); margin: .2rem auto 1.4rem; max-width: 54ch; font-size: clamp(1rem, 1.6vw, 1.15rem); }
/* Mapa de rutas México → EE.UU. */
.route-map {
  width: 100%; max-width: 560px; height: auto; display: block; margin: .4rem auto .6rem;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.55));
}

/* Mapa de ruta animado (legacy) */
.route-graphic { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2.5vw, 1.6rem); margin: 2.4rem auto 1rem; max-width: 640px; }
.route-node { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex: none; }
.flag-badge {
  font-size: clamp(3rem, 10vw, 5rem); line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation: flagPulse 3.4s var(--ease-soft) infinite;
}
.route-node:last-child .flag-badge { animation-delay: 1.7s; }
@keyframes flagPulse { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } }
.node-label { font-family: var(--mono); font-size: clamp(.66rem, 1.6vw, .82rem); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }

.route-path { position: relative; flex: 1 1 auto; min-width: clamp(90px, 24vw, 280px); height: 44px; }
.road {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 14px, transparent 14px 30px);
  background-size: 30px 100%;
  animation: roadMove 1s linear infinite;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes roadMove { to { background-position: 30px 0; } }
.route-pin { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px rgba(140,198,63,.16); }
.route-pin-a { left: 0; } .route-pin-b { left: 100%; }
.truck {
  position: absolute; top: 50%; font-size: clamp(1.7rem, 4.5vw, 2.4rem); left: 0;
  transform: translateY(-62%) scaleX(-1);
  animation: truckCross 4.8s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes truckCross {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Frontera en la carretera */
.road-cross { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; display: flex; align-items: center; justify-content: center; }
.road-cross-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--green); box-shadow: 0 0 0 5px rgba(140,198,63,.18); }
.road-cross-label { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: clamp(.54rem, 1.4vw, .66rem); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 620px) { .road-cross-label { display: none; } }

/* Mapa de Norteamérica de fondo */
.na-map {
  position: absolute; inset: 4% 3% 8% 3%; z-index: 1; pointer-events: none;
  background: url('assets/img/na-map.svg') no-repeat center / contain;
  opacity: .55; filter: drop-shadow(0 0 34px rgba(53,178,74,.3));
  animation: mapGlow 5.5s ease-in-out infinite;
}
@keyframes mapGlow { 0%,100% { opacity: .4; } 50% { opacity: .7; } }

/* Botón + sello 2026 en línea */
.stage-cta { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 1.8rem); flex-wrap: wrap; margin-top: 1.4rem; }
.seal-2026 {
  flex: none; width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 2px dashed rgba(140,198,63,.6); background: rgba(9,13,10,.4);
  transform: rotate(-7deg); box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .5s var(--ease-out);
}
.seal-2026:hover { transform: rotate(0deg) scale(1.04); }
.seal-year { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1; color: var(--text); }
.seal-top, .seal-bottom { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .flag-badge, .road, .truck, .na-map { animation: none; }
  .truck { left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain { transition: none; }
  .stage { transition: none; }
}

/* =============================================================
   14. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line); padding-block: 3rem 2rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer .brand-logo { height: 70px; width: auto; max-width: 100%; }
.star-david { width: 40px; height: 40px; margin-top: 1.4rem; filter: drop-shadow(0 2px 6px rgba(212,175,55,.35)); }
.footer p { color: var(--text-mute); font-size: .9rem; margin-top: 1rem; max-width: 42ch; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--text-2); font-size: .92rem; padding: .28rem 0; transition: color .3s; }
.footer-col a:hover { color: var(--lime); }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  color: var(--text-mute); font-size: .82rem;
}
.footer-bottom .credits { font-family: var(--mono); font-size: .72rem; }
.footer-bottom a { color: var(--text-mute); }
.footer-bottom a:hover { color: var(--lime); }

/* =============================================================
   15. Reveals
   ============================================================= */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }  /* defensive: never invisible */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* Custom cursor */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 950; pointer-events: none;
  width: 34px; height: 34px; border: 1.5px solid rgba(140,198,63,.7); border-radius: 50%;
  transform: translate(-50%,-50%); margin-left: -17px; margin-top: -17px;
  opacity: 0; transition: opacity .3s, width .3s var(--ease-out), height .3s var(--ease-out), background .3s;
  mix-blend-mode: difference;
}
.cursor-ring.is-ready { opacity: 1; }
.cursor-ring.is-hot { width: 54px; height: 54px; background: rgba(140,198,63,.12); }

/* =============================================================
   16. Responsive
   ============================================================= */
@media (min-width: 620px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .service-card { grid-column: span 2; }
  .service-card:nth-child(4) { grid-column: 2 / span 2; }
  .service-card:nth-child(5) { grid-column: 4 / span 2; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 1rem; }
  .hero-truck-wrap { min-height: 60vh; }
  .cta-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .footer-grid { grid-template-columns: 1.2fr 2fr; }
  .process-step { grid-template-columns: auto 1fr; }
}
@media (min-width: 1280px) {
  .hero-title { font-size: clamp(3.6rem, 6.4vw, 6.4rem); }
}

/* Reduced motion — only intrusive effects */
@media (prefers-reduced-motion: reduce) {
  .hero-truck, .hero-mesh { animation: none; }
  .scroll-hint::after { animation: none; }
  .marquee-track { animation-duration: 90s; }
}

/* RC-Control: selección de operadores */
.rc-trust{margin-top:36px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);gap:clamp(28px,5vw,64px);align-items:center;border:1px solid rgba(140,198,63,.3);border-radius:20px;background:linear-gradient(115deg,rgba(53,178,74,.1),rgba(21,27,20,.95) 65%);scroll-margin-top:150px}
.rc-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.rc-brand img{width:80px;height:80px;object-fit:contain}
.rc-brand-name{display:block;color:var(--text);font:600 21px var(--display);letter-spacing:-.4px}
.rc-product{display:block;margin-top:6px;color:var(--text-2);font:400 13px var(--mono);letter-spacing:1.2px}
.rc-copy{padding-left:clamp(24px,4vw,48px);border-left:1px solid var(--line-2)}
.rc-copy h3{margin:12px 0 16px;font:600 clamp(25px,3vw,38px)/1.15 var(--display);letter-spacing:-1px;color:var(--text)}
.rc-copy p{margin:0;max-width:640px;color:var(--text-2);font-size:15px;line-height:1.8}
.rc-copy a{display:inline-flex;align-items:center;gap:16px;margin-top:22px;color:var(--lime);font-size:14px;font-weight:600;text-decoration:none}
.rc-copy a:hover{text-decoration:underline}
.rc-copy a:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
@media(max-width:640px){.rc-trust{grid-template-columns:1fr;gap:24px}.rc-brand{flex-direction:row;align-items:center;gap:16px}.rc-brand img{width:64px;height:64px}.rc-copy{padding:24px 0 0;border-left:0;border-top:1px solid var(--line-2)}.rc-brand-name{font-size:20px}.rc-copy h3 br{display:none}}

/* Logotipos de clientes, conservando proporciones y colores originales */
.clients-grid{gap:14px;background:transparent;border:0;border-radius:0;overflow:visible}
.client{min-width:0;min-height:144px;border:1px solid var(--line-2);border-radius:14px;padding:28px;transition:transform .2s ease}
.client:hover{transform:translateY(-3px)}
.client--light,.client--light:hover{background:#fff}
.client--dark,.client--dark:hover{background:#151b14}
.client img{display:block;width:100%;max-width:190px;height:76px;object-fit:contain}
.client img[alt="Mattel"]{height:90px;width:90px}
.client img[alt="LG"]{max-width:125px}
.client img[alt="Jumex"]{max-width:150px}
@media(max-width:619px){.clients-grid{gap:10px}.client{min-height:120px;padding:20px 16px}.client img{height:64px}.client img[alt="Mattel"]{width:76px;height:76px}}

/* Membresía institucional AMAAC */
.amaac-feature{position:relative;margin-top:56px;display:grid;grid-template-columns:.85fr 1.6fr;border:1px solid rgba(244,193,38,.35);border-radius:22px;overflow:hidden;background:linear-gradient(115deg,#211f12,#12170f 65%);scroll-margin-top:140px}
.amaac-identity{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:42px 28px;background:rgba(0,0,0,.22);border-right:1px solid rgba(244,193,38,.2)}
.amaac-identity img{display:block;width:230px;max-width:100%;height:auto}
.amaac-label,.amaac-member{color:#d9c78d;font:400 10px/1.6 var(--mono);letter-spacing:1.7px;text-align:center}
.amaac-member{border-top:1px solid rgba(244,193,38,.25);padding-top:20px;width:100%;letter-spacing:1px}
.amaac-content{padding:clamp(30px,4vw,56px);align-self:center}
.amaac-content .kicker{color:#d5bd6c;font-size:10px;letter-spacing:2px}
.amaac-content h2{margin:18px 0;font:600 clamp(32px,4vw,52px)/1.08 var(--display);letter-spacing:-1.8px}
.amaac-content h2 em{font-style:normal;color:#f2c531}
.amaac-fullname{color:var(--text);font-size:17px;line-height:1.5;margin-bottom:18px}
.amaac-description{color:var(--text-2);font-size:15px;line-height:1.8;max-width:590px}
.amaac-link{display:inline-flex;align-items:center;gap:28px;margin-top:28px;padding:14px 20px;border:1px solid rgba(244,193,38,.45);border-radius:8px;color:#f2d572;font-size:14px;font-weight:600;text-decoration:none}
.amaac-link:hover{background:rgba(244,193,38,.1)}
.amaac-link:focus-visible{outline:2px solid #f2c531;outline-offset:4px}
@media(max-width:700px){.amaac-feature{grid-template-columns:1fr;margin-top:36px}.amaac-identity{padding:28px;border-right:0;border-bottom:1px solid rgba(244,193,38,.2);gap:12px}.amaac-identity img{width:190px}.amaac-member{padding-top:12px}.amaac-content{padding:30px 24px}.amaac-content h2{font-size:36px}}

/* Asfalto: servicio de última milla */
.asphalt-service{background:linear-gradient(160deg,#151d13,#0b0f0c 65%);overflow:hidden;scroll-margin-top:124px}
.asphalt-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end;margin-bottom:30px}
.asphalt-heading h2{font:600 clamp(34px,4.4vw,62px)/1.06 var(--display);letter-spacing:-2px;margin:18px 0 0}
.asphalt-intro p{font-size:17px;line-height:1.75;color:var(--text-2);margin:0 0 24px}
.asphalt-intro .btn{gap:24px;font-size:14px}
.asphalt-stage{position:relative;border:1px solid var(--line-2);border-radius:20px;padding:28px 36px 24px;background:radial-gradient(ellipse at 50% 50%,rgba(140,198,63,.13),transparent 65%);overflow:hidden}
.asphalt-stage-label{position:relative;z-index:1;font:400 10px var(--mono);letter-spacing:2px;color:var(--text-2)}
.asphalt-stage-word{position:absolute;left:0;right:0;top:42px;text-align:center;font:700 clamp(38px,9vw,126px)/1 var(--display);letter-spacing:-5px;color:rgba(234,241,231,.055);white-space:nowrap;pointer-events:none}
.asphalt-stage>img{position:relative;z-index:1;display:block;width:90%;max-width:960px;height:auto;margin:4px auto -6px;filter:drop-shadow(0 22px 16px rgba(0,0,0,.45))}
.asphalt-stage>.asphalt-video{position:relative;z-index:1;display:block;width:100%;max-width:800px;height:auto;aspect-ratio:16/9;object-fit:contain;margin:12px auto 22px;border-radius:12px;background:var(--bg)}
.asphalt-route{position:relative;z-index:1;display:flex;gap:24px;align-items:center;border-top:1px solid var(--line);padding-top:22px}
.asphalt-route>span:not(.asphalt-route-line){font:500 15px var(--display)}
.asphalt-route small{display:block;font:400 9px var(--mono);letter-spacing:2px;color:var(--lime);margin-bottom:8px}
.asphalt-route-line{flex:1;height:1px;background:linear-gradient(90deg,var(--green),var(--lime));position:relative}
.asphalt-route-line:before,.asphalt-route-line:after{content:"";position:absolute;top:-3px;width:7px;height:7px;background:var(--lime);border-radius:50%}.asphalt-route-line:after{right:0}
.asphalt-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:34px}
.asphalt-benefits article>span{font:400 10px var(--mono);letter-spacing:1.5px;color:var(--lime)}
.asphalt-benefits h3{font:500 21px/1.3 var(--display);margin:14px 0 10px;letter-spacing:-.5px}
.asphalt-benefits p{font-size:14px;line-height:1.8;color:var(--text-2)}
.asphalt-details{border-top:1px solid var(--line-2);margin-top:30px;padding-top:20px}
.asphalt-details summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-size:14px;color:var(--text-2);list-style:none}
.asphalt-details summary::-webkit-details-marker{display:none}
.asphalt-details summary>span{font-size:20px;color:var(--lime)}
.asphalt-details[open] summary>span{transform:rotate(45deg)}
.asphalt-details .safety-list{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:700px){.asphalt-heading{grid-template-columns:1fr;gap:22px}.asphalt-heading h2{font-size:40px;letter-spacing:-1.5px}.asphalt-intro p{font-size:16px}.asphalt-stage{padding:20px 16px}.asphalt-stage>img{width:110%;max-width:none;margin:24px -5% 14px}.asphalt-stage-word{top:65px;letter-spacing:-2px}.asphalt-stage-label{font-size:8px;letter-spacing:1px}.asphalt-route{gap:16px}.asphalt-route>span:not(.asphalt-route-line){font-size:12px}.asphalt-route small{font-size:8px;letter-spacing:1px}.asphalt-benefits{grid-template-columns:1fr;gap:22px}.asphalt-benefits article{border-bottom:1px solid var(--line);padding-bottom:20px}.asphalt-details .safety-list{grid-template-columns:1fr}}
@media(max-width:700px){.asphalt-stage>.asphalt-video{margin:18px auto;border-radius:9px}}

/* Seguridad visible para el transporte de asfalto */
.asphalt-permits{display:flex;align-items:center;gap:32px;margin-top:32px;padding:28px 36px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-3)}
.asphalt-permits>img{display:block;flex:none;width:140px;height:140px}
.asphalt-permits h3{font:500 clamp(21px,2.4vw,30px)/1.25 var(--display);letter-spacing:-.5px;margin:12px 0}
.asphalt-permits p{font-size:14px;line-height:1.7;color:var(--text-2);margin:0}
.asphalt-permits .kicker{font-size:10px}
@media(max-width:700px){.asphalt-permits{flex-direction:column;align-items:flex-start;gap:18px;padding:24px}.asphalt-permits>img{width:110px;height:110px}.asphalt-permits h3 br{display:none}}

/* Encabezado alineado y contenido resumido */
.asphalt-heading{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:22px 56px;align-items:start;margin-bottom:38px}
.asphalt-heading>.kicker{grid-column:1/-1;margin:0}
.asphalt-heading>h2{grid-column:1;margin:0;font-size:clamp(42px,5.1vw,70px);line-height:1.04;letter-spacing:-2.5px}
.asphalt-intro{grid-column:2;padding-top:4px}
.asphalt-intro p{font-size:16px;line-height:1.65;margin:0 0 24px}
.asphalt-intro .btn{padding:15px 22px;box-shadow:none}
.asphalt-benefits h3{margin-top:12px}
.asphalt-permits h3{font-size:clamp(22px,2.4vw,30px)}
@media(max-width:700px){.asphalt-heading{grid-template-columns:1fr;grid-template-rows:auto;gap:20px;margin-bottom:28px}.asphalt-heading>h2,.asphalt-intro{grid-column:1}.asphalt-heading>h2{font-size:46px;letter-spacing:-1.8px}.asphalt-intro{padding-top:0}.asphalt-intro p{font-size:15px}.asphalt-intro p br{display:none}.asphalt-heading>.kicker{font-size:9px;letter-spacing:1.5px}.asphalt-intro .btn{font-size:13px;gap:14px}}

/* Acarreo de asfalto: proveedor a planta */
.asphalt-heading>h2{font-size:clamp(34px,3.7vw,50px);letter-spacing:-1.8px;line-height:1.12}
.asphalt-intro p{font-size:15px;line-height:1.7}
@media(max-width:700px){.asphalt-heading>h2{font-size:36px;letter-spacing:-1.2px}.asphalt-route{gap:12px}.asphalt-route>span:not(.asphalt-route-line){max-width:115px;line-height:1.4}.asphalt-benefits article>span{letter-spacing:1px;font-size:9px}}

.asphalt-service-link{display:block;margin-top:16px;color:var(--lime);font-size:13px;text-decoration:underline;text-underline-offset:4px}
.seo-page{padding-top:calc(var(--nav-h) + 48px)}
.seo-breadcrumb{font-size:12px;color:var(--text-2);margin-bottom:32px}.seo-breadcrumb a{color:var(--lime)}
.seo-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;padding-bottom:64px}
.seo-hero h1{font:600 clamp(38px,4.8vw,66px)/1.07 var(--display);letter-spacing:-2px;margin:18px 0 24px}
.seo-hero p{color:var(--text-2);font-size:17px;line-height:1.8;margin:0 0 26px;max-width:600px}
.seo-hero img{width:100%;height:auto;filter:drop-shadow(0 20px 20px #0006)}
.seo-section{padding:52px 0;border-top:1px solid var(--line)}
.seo-section h2{font:500 clamp(28px,3vw,40px)/1.15 var(--display);letter-spacing:-1px;margin-bottom:22px}
.seo-section>p{max-width:750px;color:var(--text-2);line-height:1.8}
.seo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.seo-steps h3{font:500 21px var(--display);margin:12px 0}.seo-steps p{font-size:15px;color:var(--text-2);line-height:1.8}.seo-steps span{font:12px var(--mono);color:var(--lime)}
.seo-faq details{padding:22px 0;border-bottom:1px solid var(--line)}.seo-faq summary{cursor:pointer;font-weight:500}.seo-faq p{max-width:800px;color:var(--text-2);line-height:1.8;margin-top:14px}
.seo-contact{background:var(--bg-3);padding:36px;border-radius:18px;margin:20px 0 60px}.seo-contact p{color:var(--text-2);line-height:1.8;margin-bottom:22px}.seo-contact h2{font:500 32px var(--display);margin-bottom:18px}
@media(max-width:700px){.seo-hero,.seo-steps{grid-template-columns:1fr}.seo-hero{gap:16px}.seo-hero h1{font-size:40px}.seo-page{padding-top:calc(var(--nav-h) + 24px)}.seo-contact{padding:24px}.seo-contact .btn{font-size:13px}}

/* Commercial homepage: readable priorities and clear quote paths. */
.commercial-hero .hero-title{font-size:clamp(2.7rem,4.5vw,5.3rem);line-height:1.05;letter-spacing:-.045em}
.commercial-hero .hero-title em{display:inline}
.commercial-hero .hero-truck-wrap{min-height:260px}
.commercial-hero .hero-truck{max-width:820px}
.btn-outline{border:1px solid rgba(178,205,161,.4);color:var(--text);background:rgba(255,255,255,.025)}
.btn-outline:hover{border-color:#86c53f;background:rgba(134,197,63,.08)}
.hero-proof{font-size:.8rem;color:var(--text-2);margin-top:1.6rem;line-height:1.8}
.hero-proof span{color:#86c53f;margin:0 .35rem}
.choice-heading{display:grid;gap:1.5rem;margin-bottom:2.4rem}
.choice-heading h2{font-size:clamp(2rem,3.5vw,3.5rem);max-width:19ch;line-height:1.1;margin-top:1rem}
.choice-heading>p{color:var(--text-2);max-width:34ch;align-self:end}
.choice-grid{display:grid;gap:1rem}
.choice-grid article{padding:2rem;border:1px solid rgba(178,205,161,.22);border-radius:24px;display:flex;flex-direction:column;background:rgba(255,255,255,.018)}
.choice-grid .choice-featured{border-color:rgba(134,197,63,.65);background:linear-gradient(145deg,rgba(80,137,44,.18),rgba(20,35,21,.3))}
.choice-number{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:#95c866}
.choice-grid h3{font-size:1.65rem;line-height:1.15;margin:1.6rem 0 1rem}
.choice-grid p{color:var(--text-2);line-height:1.7;margin:0 0 2rem}
.choice-grid a{margin-top:auto;color:#a5d876;display:flex;justify-content:space-between;gap:.8rem;font-weight:600}
.form-note,.field-optional{font-size:.8rem;color:var(--text-2)}
.form-note{margin-top:1rem;max-width:45ch}
.form-privacy{display:block;font-size:.82rem;line-height:1.55;color:var(--text-2)}
.form-privacy input{margin-right:.45rem;accent-color:var(--lime)}
.form-privacy a,.form-success a{color:var(--lime);text-decoration:underline}
.form-submit button:disabled{opacity:.65;cursor:wait}
.quote-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(min-width:800px){.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.choice-heading{grid-template-columns:1.4fr 1fr}.commercial-hero .hero-grid{grid-template-columns:1.05fr 1fr}}
@media(max-width:600px){.commercial-hero .hero-actions{flex-direction:column}.commercial-hero .hero-actions .btn{width:100%;justify-content:center}.choice-grid article{padding:1.5rem}.commercial-hero .hero-truck-wrap{min-height:180px}.hero-proof span{margin:0 .15rem}}

.truck-showcase{width:100%;position:relative;z-index:2}
.truck-slides{position:relative;aspect-ratio:1.65;isolation:isolate}
.truck-slide{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;opacity:0;transition:opacity 1.15s ease;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);filter:drop-shadow(0 20px 16px rgba(0,0,0,.25))}
.truck-slide.is-active{opacity:1}
.truck-navigation{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem .5rem;color:var(--text-2);font-size:.72rem}
.truck-controls{display:flex;gap:.35rem;align-items:center}
.truck-controls button{cursor:pointer;border:0;color:var(--text-2);background:transparent;font:inherit}
.truck-controls [data-truck-pause]{padding:.6rem;margin-right:.25rem}
.truck-controls .truck-dot{width:24px;height:30px;padding:8px;position:relative}
.truck-dot:after{content:'';width:7px;height:7px;border-radius:50%;background:#60705c;position:absolute;top:11px;left:8px}
.truck-dot[aria-pressed=true]:after{background:var(--lime);box-shadow:0 0 10px #8cc63f66}
.truck-controls button:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:5px}
@media(max-width:600px){.truck-navigation{flex-direction:column;gap:.25rem}.truck-slides{aspect-ratio:1.6}}
@media(prefers-reduced-motion:reduce){.truck-slide{transition:none}}

/* Silhouette masks remove the rectangular backdrop without changing branding. */
img[src$="caja-seca-espinosa.png"]{-webkit-mask:url("assets/img/caja-seca-contorno.svg") center/contain no-repeat;mask:url("assets/img/caja-seca-contorno.svg") center/contain no-repeat;}
img[src$="refrigerado-espinosa.png"]{-webkit-mask:url("assets/img/refrigerado-contorno.svg") center/contain no-repeat;mask:url("assets/img/refrigerado-contorno.svg") center/contain no-repeat;}

/* Onboard camera equipment, expressed without unverified feature claims. */
.fleet-camera{display:flex;align-items:center;gap:1.4rem;padding:1.6rem 1.8rem;margin:0 0 2rem;border:1px solid rgba(112,190,70,.3);border-radius:18px;background:linear-gradient(110deg,rgba(53,178,74,.10),rgba(53,178,74,.015));}
.fleet-camera-icon{display:grid;place-items:center;flex:0 0 64px;height:64px;border:1px solid rgba(112,190,70,.3);border-radius:16px;color:var(--green-2,#86c440);background:rgba(53,178,74,.08)}
.fleet-camera-icon svg{width:38px;height:38px}
.fleet-camera-label{font:500 .65rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)}
.fleet-camera h3{font:500 clamp(1.15rem,2.2vw,1.65rem)/1.2 var(--display);margin:.4rem 0 .5rem}
.fleet-camera p{color:var(--text-mute);font-size:.95rem;margin:0;line-height:1.55}
@media(max-width:600px){.fleet-camera{padding:1.2rem;gap:1rem;align-items:flex-start}.fleet-camera-icon{flex-basis:44px;height:44px;border-radius:12px}.fleet-camera-icon svg{width:28px;height:28px}}

.quality-goal{margin:3rem 0;padding:2rem;border-left:3px solid #70be46;border-radius:0 18px 18px 0;background:linear-gradient(100deg,rgba(53,178,74,.08),transparent)}
.quality-goal h3{font:500 clamp(1.4rem,3vw,2rem)/1.25 var(--display);margin:.8rem 0}
.quality-goal p{color:var(--text-mute);line-height:1.75;max-width:800px;margin:0}
@media(max-width:600px){.quality-goal{padding:1.3rem}}
.quality-goal{scroll-margin-top:150px}

/* Acceso directo a servicios · septiembre 2026 */
.service-jump{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 34px}.service-jump a{border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13px;color:var(--text-2)}.service-jump a:hover,.service-jump a[aria-current="page"]{color:#9cdb65;border-color:#659e45}.service-detail{display:inline-flex;gap:12px;color:#9cdb65;font-weight:600;margin-top:18px}.service-detail:hover{text-decoration:underline}.service-jump a:focus-visible,.service-detail:focus-visible{outline:2px solid #9cdb65;outline-offset:4px}
.te-consent-banner{position:fixed;z-index:10000;left:18px;right:18px;bottom:18px;max-width:1040px;margin:auto;padding:22px 24px;border:1px solid #719a66;border-radius:18px;background:#101c16;color:#f5f8f1;box-shadow:0 20px 60px #0009;display:flex;gap:24px;align-items:center;font-family:Inter,Arial,sans-serif}
.te-consent-copy{flex:1;min-width:0}.te-consent-copy strong{display:block;font-size:18px;line-height:1.25}.te-consent-copy p{margin:8px 0 0;color:#d6e3d3;font-size:14px;line-height:1.55}.te-consent-copy a{color:#b7ef85;text-decoration:underline}
.te-consent-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;max-width:420px}.te-consent-actions button,.te-consent-settings{font:600 13px Inter,Arial,sans-serif;cursor:pointer}.te-consent-actions button{border-radius:10px;padding:12px 14px;min-height:44px}.te-consent-secondary{background:#1d3024;color:#f5f8f1;border:1px solid #8ca78a}.te-consent-primary{background:#8cc63f;color:#0b190c;border:1px solid #8cc63f}.te-consent-actions button:hover,.te-consent-actions button:focus-visible,.te-consent-settings:focus-visible{outline:2px solid #b7ef85;outline-offset:2px}.te-consent-settings{display:block;margin:18px 0 0;padding:0;background:none;border:0;color:#b7ef85;text-decoration:underline;text-align:left}
@media(max-width:760px){.te-consent-banner{display:block;left:10px;right:10px;bottom:10px;padding:18px;max-height:calc(100vh - 20px);overflow:auto}.te-consent-actions{max-width:none;margin-top:16px;justify-content:stretch}.te-consent-actions button{flex:1 1 140px}}
.te-privacy-page{max-width:850px;margin:0 auto;padding:110px 24px 70px;color:#e8efe7;font-family:Inter,Arial,sans-serif;line-height:1.7}.te-privacy-page h1,.te-privacy-page h2{font-family:'Space Grotesk',Inter,Arial,sans-serif;line-height:1.2}.te-privacy-page h1{font-size:clamp(32px,5vw,50px)}.te-privacy-page h2{font-size:24px;margin-top:36px}.te-privacy-page a{color:#b7ef85;text-decoration:underline}.te-privacy-page ul{padding-left:22px}

/* Presentación comercial al inicio de la página */
.hero-video-wrap{width:100%;min-width:0;border:1px solid rgba(151,213,67,.3);border-radius:20px;overflow:hidden;background:#101712;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.hero-presentation{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0b0f0c}
.hero-video-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:#e2e9e3;font-size:.875rem}
.hero-video-sound{border:1px solid var(--lime);border-radius:999px;padding:9px 14px;cursor:pointer;background:transparent;color:var(--lime);font:inherit;white-space:nowrap}
.hero-video-sound:hover,.hero-video-sound:focus-visible{background:var(--lime);color:#0b0f0c}
@media(max-width:799px){.commercial-hero .hero-video-wrap{grid-row:1}.hero-video-caption{padding:12px;font-size:.78rem}.hero-video-sound{padding:8px 10px}}

/* Cobertura Norte y HazMat: extensión acotada de la identidad existente */
.north-coverage{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);background:var(--bg-2)}
.north-coverage .section-head{max-width:920px;margin-bottom:1.4rem}
.north-quote{max-width:82ch;color:var(--text-2);margin-bottom:1.4rem}
.hazmat-service{border-top:1px solid var(--line);background:radial-gradient(ellipse at 10% 20%,var(--green-soft),transparent 65%),var(--bg)}
.hazmat-grid{display:grid;gap:2rem;align-items:start}
.hazmat-service .section-head{margin-bottom:0}
.hazmat-panel{padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line-2);border-top:3px solid var(--green);border-radius:18px;background:var(--bg-3)}
.hazmat-panel h3{font-size:1.25rem;margin-bottom:1.2rem}
.hazmat-trust{padding-left:1.25rem;color:var(--text-2)}
.hazmat-trust li{padding-left:.3rem;margin-bottom:.85rem}
.hazmat-trust li::marker{color:var(--lime)}
.hazmat-panel .hero-actions{margin-top:1.6rem}
.hazmat-panel .btn{white-space:normal;text-align:center}
@media(min-width:1000px){.hazmat-grid{grid-template-columns:1fr 1fr;gap:3rem}}
@media(max-width:600px){.hazmat-panel .hero-actions{flex-direction:column}.hazmat-panel .btn{width:100%;justify-content:center}}

/* Alineación de Servicios y adaptación del formulario a pantallas pequeñas. */
#servicios .services-grid{grid-template-columns:minmax(0,1fr)}
#servicios .service-card{grid-column:auto;min-width:0;display:flex;flex-direction:column}
#servicios .service-body{order:0;min-width:0;padding-top:.4rem}
#servicios .service-media{order:1;margin-top:1.2rem}
#servicios .service-card>.service-detail{order:2;margin-top:auto;padding-top:1.2rem;align-self:flex-start}
#servicios .service-title{overflow-wrap:anywhere}
.cta-grid{grid-template-columns:minmax(0,1fr)}
.cta-grid>*,.form,.form-row,.field{min-width:0}
.form-row{grid-template-columns:minmax(0,1fr)}
.cta-contacts a{min-width:0;max-width:100%;overflow-wrap:anywhere}
.cta-contacts svg{flex-shrink:0}
.form-submit .btn{white-space:normal;min-width:0}
#expansion h2{overflow-wrap:anywhere}
@media(min-width:620px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}#servicios .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){#servicios .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#servicios .service-title{min-height:3.8rem}#servicios .service-text{min-height:4.6rem}}
@media(min-width:1000px){.cta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Composiciones comerciales: mostrar completas sin recortar textos ni logotipos. */
#servicios .service-photo img{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;filter:none}
#servicios .service-card:hover .service-photo img{transform:none}