@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ===== Design tokens (from MoviCargo Design System) ===== */
:root{
  --brand-orange:#F7941D;
  --brand-orange-dark:#C9720E;
  --brand-orange-light:#FFB25C;
  --brand-blue:#1E5EA8;
  --brand-blue-dark:#123E73;
  --brand-blue-light:#4C87CC;
  --brand-black:#0A0A0A;
  --brand-silver:#C7CBD1;
  --neutral-0:#FFFFFF;
  --neutral-50:#F6F7F9;
  --neutral-100:#EBEDF1;
  --neutral-200:#D6DAE1;
  --neutral-300:#AEB4C0;
  --neutral-500:#6B7280;
  --neutral-600:#4B5160;
  --neutral-800:#202430;
  --neutral-900:#131620;
  --neutral-950:#0A0A0A;
  --success:#1F9D55;
  --error:#E0483E;
  --warning:#F7941D;
  --color-whatsapp:#25D366;
  --color-whatsapp-dark:#1DA851;
  --color-bg-canvas:var(--brand-black);
  --color-bg-surface:var(--neutral-900);
  --color-bg-elevated:var(--neutral-800);
  --color-bg-light:var(--neutral-50);
  --color-bg-light-elevated:var(--neutral-0);
  --color-text-primary:var(--neutral-0);
  --color-text-secondary:rgba(255,255,255,0.68);
  --color-text-onlight:var(--neutral-950);
  --color-text-onlight-secondary:var(--neutral-600);
  --color-border-dark:rgba(255,255,255,0.12);
  --color-border-light:var(--neutral-200);
  --gradient-brand:linear-gradient(90deg,var(--brand-orange) 0%,var(--brand-blue) 100%);
  --gradient-metallic:linear-gradient(180deg,#FFFFFF 0%,var(--brand-silver) 42%,#7C8189 52%,var(--brand-silver) 66%,#FFFFFF 100%);
  --gradient-cta:linear-gradient(135deg,var(--brand-orange) 0%,#FF7A1A 100%);
  --font-display:'Montserrat',sans-serif;
  --font-body:'Inter',sans-serif;
  --fw-black:900;
  --fw-extrabold:800;
  --fw-bold:700;
  --fw-semibold:600;
  --fw-medium:500;
  --fs-display-xl:clamp(2.75rem,6vw,4.75rem);
  --fs-display-md:clamp(1.625rem,2.8vw,2.125rem);
  --fs-heading:1.375rem;
  --fs-body-lg:1.125rem;
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-micro:0.75rem;
  --lh-tight:1.05;
  --lh-normal:1.5;
  --tracking-tight:-0.01em;
  --tracking-wide:0.02em;
  --tracking-wider:0.08em;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-elevation-1:0 2px 8px rgba(0,0,0,0.35);
  --shadow-elevation-2:0 8px 24px rgba(0,0,0,0.45);
  --shadow-elevation-light-1:0 2px 8px rgba(10,10,10,0.08);
  --shadow-glow-orange:0 0 0 1px rgba(247,148,29,0.35),0 8px 28px rgba(247,148,29,0.28);
  --shadow-glow-blue:0 0 0 1px rgba(30,94,168,0.35),0 8px 28px rgba(30,94,168,0.28);
  --border-hairline-dark:1px solid rgba(255,255,255,0.12);
  --border-hairline-light:1px solid var(--neutral-200);
  --ease-out:cubic-bezier(0,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:hidden}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{background:var(--brand-black);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit}
#app{width:100%;min-height:100vh}
.screen{display:none}
.screen.is-active{display:block}

/* ===== Responsive container scale ===== */
:root{
  --container-max:1160px;
  --container-narrow:640px;
  --pad-x:20px;
}
@media (min-width:640px){:root{--pad-x:32px}}
@media (min-width:900px){:root{--pad-x:48px}}
@media (min-width:1200px){:root{--pad-x:64px}}

/* ===== Icon helper ===== */
.icon{width:1em;height:1em;flex:none}
.icon-orange{filter:invert(64%) sepia(84%) saturate(1826%) hue-rotate(347deg) brightness(101%) contrast(96%)}
.icon-blue{filter:invert(46%) sepia(24%) saturate(1553%) hue-rotate(174deg) brightness(94%) contrast(92%)}
.icon-success{filter:invert(62%) sepia(45%) saturate(576%) hue-rotate(83deg) brightness(92%) contrast(92%)}
.icon-error{filter:invert(35%) sepia(65%) saturate(2211%) hue-rotate(340deg) brightness(93%) contrast(88%)}
.icon-white{filter:brightness(0) invert(1)}
.icon-black{filter:brightness(0)}

/* ===== Badge ===== */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-small);letter-spacing:var(--tracking-wide);padding:8px 16px;border-radius:var(--radius-pill);text-transform:uppercase}
.badge img{width:14px;height:14px}
.badge--orange{background:rgba(247,148,29,0.14);color:var(--brand-orange);border:1px solid rgba(247,148,29,0.35)}
.badge--success{background:rgba(31,157,85,0.16);color:#3FCB7C;border:1px solid rgba(31,157,85,0.4)}
.badge__dot{width:7px;height:7px;border-radius:50%;background:#3FCB7C;box-shadow:0 0 0 3px rgba(63,203,124,0.25);animation:pulse 1.8s ease-in-out infinite}
.badge__dot--red{background:#FF4D4D;box-shadow:0 0 0 3px rgba(255,77,77,0.28)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ===== Button ===== */
.btn{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);border:none;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);font-size:var(--fs-body-lg);padding:18px 34px}
.btn:active{transform:scale(0.97)}
.btn--full{width:100%}
.btn--primary{background:var(--gradient-cta);color:var(--neutral-950);box-shadow:var(--shadow-glow-orange);animation:cta-pulse 2.2s ease-in-out infinite}
.btn--primary:hover{box-shadow:0 0 0 1px rgba(247,148,29,.5),0 12px 32px rgba(247,148,29,.4);transform:translateY(-1px)}
.btn--whatsapp{background:var(--color-whatsapp);color:var(--neutral-0)}
.btn--whatsapp:hover{background:var(--color-whatsapp-dark)}
.btn--whatsapp.bounce{animation:wa-bounce 1.8s ease-in-out infinite}
.btn--ghost{background:transparent;color:var(--neutral-0);padding:10px 8px;font-size:var(--fs-body)}
.btn--ghost:hover{color:var(--brand-orange)}
@media (max-width:479px){
  /* Buttons are sized to fit their (fixed, translated) label text at the default lg padding/size —
     on the narrowest phones that content can be wider than the available space (this is exactly
     what clipped "Pedí por WhatsApp aquí" at 320px: button rendered 330px wide against a 280px-wide
     column). Two independent safeguards: shrink lg buttons a bit here, and let text wrap as a last
     resort — wrapping to a second line always beats text silently getting clipped by the page's
     overflow-x:hidden. */
  .btn--lg{padding:16px 22px;font-size:var(--fs-body)}
  .btn{white-space:normal;text-align:center}
}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 1px rgba(247,148,29,.5),0 8px 28px rgba(247,148,29,.35);transform:scale(1)}50%{box-shadow:0 0 0 1px rgba(247,148,29,.75),0 10px 40px rgba(247,148,29,.65);transform:scale(1.035)}}
@keyframes wa-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){.btn--primary,.btn--whatsapp.bounce{animation:none}}

/* ===== Card ===== */
.card{border-radius:var(--radius-lg);padding:var(--space-6)}
.card--dark{background:var(--color-bg-elevated);border:var(--border-hairline-dark);box-shadow:var(--shadow-elevation-1)}
.card--interactive{cursor:pointer;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-elevation-2)}

/* ===== Tag ===== */
.tag{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-micro);letter-spacing:var(--tracking-wide);padding:5px 12px;border-radius:var(--radius-sm);text-transform:uppercase;background:var(--neutral-800);color:var(--color-text-secondary);border:1px solid rgba(255,255,255,0.1)}

/* ===== TrustSeal ===== */
.trust{display:flex;align-items:center;gap:14px}
.trust__icon-wrap{width:48px;height:48px;flex:none;border-radius:var(--radius-md);background:rgba(247,148,29,0.12);display:flex;align-items:center;justify-content:center}
.trust__icon-wrap--light{background:var(--neutral-100)}
.trust__icon-wrap img{width:24px;height:24px}
.trust__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--color-text-primary);margin:0}
.trust__title--light{color:var(--color-text-onlight)}
.trust__subtitle{font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-text-secondary);margin:2px 0 0}

/* ===== Testimonial ===== */
.testimonial{background:var(--color-bg-light-elevated);border:var(--border-hairline-light);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-elevation-light-1)}
.testimonial__stars{display:flex;gap:2px;margin-bottom:10px}
.testimonial__stars img{width:16px;height:16px}
.testimonial__quote{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--color-text-onlight);margin:0 0 14px}
.testimonial__author{display:flex;align-items:center;gap:10px}
.testimonial__avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-small);flex:none}
.testimonial__name{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--color-text-onlight);margin:0}
.testimonial__meta{font-family:var(--font-body);font-size:var(--fs-micro);color:var(--color-text-onlight-secondary);margin:0}


/* ===== WhatsApp float button ===== */
.wa-float{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--color-whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,0.4);border:none;cursor:pointer;z-index:100;transition:transform var(--duration-fast) var(--ease-out)}
.wa-float:hover{transform:scale(1.06)}
.wa-float img{width:28px;height:28px}
.wa-float__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-whatsapp);animation:ping 2.2s ease-out infinite}

/* ===== Call float button — bottom-left, opposite side from the WhatsApp float button. It used
   to sit right next to WhatsApp on the right, but the speech bubble that periodically pops out of
   the WhatsApp button (.wa-float__bubble) grows toward the left and covered it. Putting it on its
   own side avoids that entirely instead of trying to route the bubble around it. */
.call-float{position:fixed;bottom:24px;left:24px;width:60px;height:60px;border-radius:50%;background:var(--brand-orange);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(247,148,29,0.4);border:none;cursor:pointer;z-index:100;transition:transform var(--duration-fast) var(--ease-out)}
.call-float:hover{transform:scale(1.06)}
.call-float img{width:26px;height:26px}
.call-float__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-orange);animation:ping 2.2s ease-out infinite}
@media (prefers-reduced-motion: reduce){
  .call-float__ping,.wa-float__ping{animation:none}
}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}

/* ===== Landing layout ===== */
.hero{position:relative;overflow:hidden}
.hero__header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad-x);max-width:var(--container-max);margin:0 auto;width:100%}
.hero__logo{height:96px;width:100px;object-fit:cover;border-radius:8px;flex:none}
.hero__body{position:relative;padding:8px 0 60px}
.hero__photo{position:absolute;inset:0;background-image:url('../assets/imagery/viajes.jpeg');background-size:cover;background-position:center;opacity:.68}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.96) 88%)}
.hero__content{position:relative;display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto;padding:0 var(--pad-x)}
/* --hero-fit-scale defaults to 1 (i.e. exactly var(--fs-display-xl), untouched) and only ever
   gets set below 1 by js/app.js, and only on the specific viewports where the hero's natural
   content is actually taller than the screen — see the "Hero fit" comment in app.js for why a
   precise, measured fix replaced an earlier blanket vw/vh formula that shrank the headline even
   on viewports that never needed it. */
.hero__headline{font-family:var(--font-display);font-weight:var(--fw-black);font-size:calc(var(--fs-display-xl) * var(--hero-fit-scale, 1));line-height:var(--lh-tight);margin:0;text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.hero__line{display:block}
/* Second hero line: always shows the brand gradient (no resting/lit states like .illuminate —
   it's a static style, not tied to scroll position), to give the safety/speed claim more weight
   than the first line.
   Deliberately plain: no box-decoration-break, no display override. An earlier version added
   box-decoration-break:clone + display:inline so the gradient's blue would repeat on every
   wrapped line instead of only the widest one — but on real mobile Safari that combination
   rendered the text fully invisible (confirmed via a real device recording), while this simpler
   pattern — the same one .illuminate--brand already uses safely elsewhere on this page — does
   not. Reliability wins over the blue showing on every line; it still shows on the widest one. */
.hero__line--gradient{
  background-image:linear-gradient(90deg,#ffffff 0%,var(--brand-orange) 45%,var(--brand-blue) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ffffff;
}
.hero__sub{color:var(--color-text-secondary);font-size:var(--fs-body-lg);margin:0;max-width:480px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Background lives on these semantic classes, not on the .z-N stacking classes below — a section's
   color must never depend on which numeric stacking slot it happens to occupy, because that number
   shifts every time a section is added, removed or reordered (exactly what caused the "Nuestros
   servicios" section to render white and "Cómo nos comparamos" to lose its dark background: the
   z-N classes used to carry background colors, and inserting the izaje section shifted every
   section's number without shifting its intended color along with it). */
.section{padding:40px var(--pad-x) 48px;max-width:var(--container-max);margin:0 auto;background:var(--brand-black)}
.section--surface{background:var(--color-bg-surface);padding:40px 0}
.section--light{background:var(--color-bg-light)}
.trust-grid{display:flex;flex-direction:column;gap:18px;max-width:var(--container-max);margin:0 auto;padding:0 var(--pad-x)}
/* Trust bar merged into the "Cómo funciona" section (was its own, sparse-looking full-screen
   card) — a divider marks where the trust strip ends and the "how it works" content starts. */
.trust-grid--compact{margin-bottom:32px;padding-bottom:32px;border-bottom:var(--border-hairline-dark)}
.how-it-works-title{margin-top:0}
.testimonials-wrap{max-width:var(--container-max);margin:0 auto;padding:40px var(--pad-x)}
.section-title{font-family:var(--font-display);font-weight:var(--fw-bold);color:#fff;font-size:18px;margin:0 0 20px;text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.section-title--onlight{color:var(--color-text-onlight)}

.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step__icon{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(247,148,29,0.14);display:flex;align-items:center;justify-content:center}
.step__icon img{width:22px;height:22px}
.step__title{color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;margin:2px 0 4px}
.step__desc{color:var(--color-text-secondary);font-size:13px;margin:0}

.services{display:flex;flex-direction:column;gap:14px}
.service-card{display:flex;gap:14px;align-items:center;padding:12px}
.service-card img{width:84px;height:84px;object-fit:cover;border-radius:10px;flex:none}
.service-card__title{color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;margin:8px 0 2px}
.service-card__desc{color:var(--color-text-secondary);font-size:13px;margin:0}

.testimonials{display:flex;flex-direction:column;gap:14px}

.final-cta{padding:48px var(--pad-x) 90px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:var(--container-narrow);margin:0 auto;background:var(--brand-black)}
.final-cta__title{font-family:var(--font-display);font-weight:var(--fw-black);color:#fff;font-size:var(--fs-display-md);margin:0;text-transform:uppercase}

/* ===== Guarantee/security seal (final CTA) ===== */
.seal-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.seal{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center}
.seal__ring{position:absolute;inset:0;width:100%;height:100%}
.seal__circle-outer{fill:none;stroke:var(--brand-orange);stroke-width:2}
.seal__circle-inner{fill:rgba(247,148,29,0.05);stroke:rgba(247,148,29,0.45);stroke-width:1;stroke-dasharray:3 4}
.seal__arc-text{fill:var(--brand-orange);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px;letter-spacing:2px}
.seal__logo{position:relative;width:60px;height:60px;object-fit:cover;border-radius:50%;border:2px solid var(--brand-orange);z-index:1}
.seal__check{position:absolute;bottom:14px;right:14px;z-index:2;width:26px;height:26px;border-radius:50%;background:var(--brand-orange);display:flex;align-items:center;justify-content:center;border:2px solid var(--brand-black)}
.seal__check img{width:15px;height:15px}
.seal__caption{font-family:var(--font-body);font-size:var(--fs-micro);color:var(--color-text-secondary);text-align:center;margin:0;max-width:220px;text-transform:uppercase;letter-spacing:var(--tracking-wide)}
/* "Stamp" reveal: starts scaled up, rotated and transparent, as if mid-air about to come down;
   an IntersectionObserver in js/app.js adds .is-visible the first time it scrolls into view,
   which a CSS transition animates to rest. The overshoot bezier (same curve already used for the
   WhatsApp button's bounce elsewhere in this project) makes it land with a little give instead of
   just easing to a stop, and it settles a few degrees off-true rather than perfectly straight —
   both read as a real stamp hitting paper, not a graphic that faded in. */
.seal-wrap{
  opacity:0;
  transform:scale(1.7) rotate(-18deg);
  transition:opacity .6s ease-out, transform .7s cubic-bezier(.34,1.56,.64,1);
}
.seal-wrap.is-visible{opacity:1;transform:rotate(-4deg) scale(1)}
@media (prefers-reduced-motion: reduce){
  .seal-wrap{transition:none;opacity:1;transform:rotate(-4deg) scale(1)}
}

/* ===== Footer =====
   Plain static content, not part of the .mc-curtain stack — it sits right after the final CTA
   card's pin duration ends, in normal document flow, and just appears below it like an ordinary
   page footer once the user scrolls past it. */
.footer{background:var(--brand-black);border-top:var(--border-hairline-dark);padding:40px var(--pad-x) 100px}
@media (min-width:640px){
  /* Below 640px the floating WhatsApp button's bottom-right corner can sit over the centered
     legal line at the true end of the page — the extra bottom padding above clears it. Past
     640px the button no longer overlaps centered footer text, so the normal padding is enough. */
  .footer{padding-bottom:40px}
}
.footer__inner{max-width:var(--container-narrow);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer__logo{width:56px;height:56px;object-fit:cover;border-radius:50%;border:2px solid var(--brand-orange)}
.footer__tagline{color:var(--color-text-secondary);font-size:var(--fs-small);margin:0;max-width:360px}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;font-family:var(--font-body);font-size:var(--fs-small)}
.footer__nav a{color:var(--color-text-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.footer__nav a:hover{color:var(--brand-orange)}
.footer__nav-wa{display:inline-flex;align-items:center;gap:5px;color:var(--color-whatsapp)!important}
.footer__nav-wa:hover{color:var(--color-whatsapp-dark)!important}
.icon-whatsapp-inline{width:14px;height:14px}
.footer__legal{color:rgba(255,255,255,0.4);font-size:var(--fs-micro);margin:8px 0 0}

/* ===== Izaje (crane-lift service) showcase ===== */
.izaje-grid{display:flex;flex-direction:column;gap:32px}
.izaje-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.izaje-lead{color:var(--color-text-secondary);font-size:var(--fs-body-lg);margin:0;max-width:520px}
.izaje-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.izaje-features li{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-medium)}
.izaje-features img{width:18px;height:18px;flex:none}
/* Bento-style photo grid: one tall lead shot plus three smaller stills, echoing the "before/after
   process" reference the client shared, but built as a clean grid + lightbox instead of a busy
   flyer layout. Thumbnails are plain <button>s (not <a>) since they open the in-page lightbox,
   not navigate anywhere. */
.izaje-gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:130px;gap:10px}
.izaje-thumb{position:relative;grid-row:span 1;border:none;padding:0;margin:0;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--neutral-800)}
.izaje-thumb--big{grid-row:span 2}
.izaje-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-base) var(--ease-out)}
.izaje-thumb:hover img{transform:scale(1.06)}
.izaje-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%)}
.izaje-thumb__label{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--tracking-wide);text-align:left}

@media (min-width:900px){
  .izaje-grid{flex-direction:row;align-items:center;gap:56px}
  .izaje-copy{flex:1}
  .izaje-gallery{flex:1;grid-auto-rows:160px}
}

/* ===== Izaje gallery lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out)}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(5,5,5,.92)}
.lightbox__figure{position:relative;z-index:1;max-width:min(90vw,760px);max-height:85vh;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__img{max-width:100%;max-height:72vh;border-radius:var(--radius-md);object-fit:contain;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lightbox__caption{color:var(--color-text-secondary);font-size:var(--fs-body);text-align:center;margin:0;max-width:480px}
.lightbox__close,.lightbox__nav{position:absolute;z-index:2;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,0.18)}
.lightbox__close{top:20px;right:20px}
.lightbox__close img,.lightbox__nav img{width:20px;height:20px}
.lightbox__nav--prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:20px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lightbox__nav--prev{left:8px}
  .lightbox__nav--next{right:8px}
  .lightbox__close{top:12px;right:12px}
}

/* ===== Small-screen safety (very narrow phones) ===== */
@media (max-width:359px){
  .hero__logo{height:76px;width:80px}
  .final-cta{padding-left:var(--pad-x);padding-right:var(--pad-x)}
}

/* ===== Tablet / desktop: widen hero, switch grids to multi-column ===== */
@media (min-width:640px){
  .hero__body{padding-top:16px;padding-bottom:80px}
  .final-cta{padding-bottom:110px}
}

@media (min-width:900px){
  .hero__body{padding-top:24px;padding-bottom:110px}
  .hero__body{min-height:520px;display:flex;align-items:center}

  .trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 40px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}

  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .service-card{flex-direction:column;align-items:stretch;text-align:left;padding:16px}
  .service-card img{width:100%;height:180px}

  .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
}

@media (min-width:1200px){
  .hero__body{min-height:620px}
}

/* ===== Curtain scroll effect (a.k.a. "sticky stack cards"): each landing section pins to the
   top and the next one slides up over it, stacking like layered cards as you scroll. Pinning is
   driven by GSAP ScrollTrigger in js/app.js (not CSS position:sticky) — same visual mechanic, but
   consistent across browsers instead of depending on each engine's native sticky implementation.
   The section itself (.mc-curtain, the one GSAP pins to position:fixed) never gets a transform —
   see js/app.js for why. The scale-down-as-covered effect lives on .mc-curtain__inner, a wrapper
   js/app.js builds around each section's existing content at load time.

   min-height:100vh is required, not cosmetic: GSAP's pin locks each section's fixed-position box
   to whatever height it measures at setup time. Without this, short sections (trust bar, final
   CTA) pin at their own short content height instead of the full screen, so the next section
   (sitting right below in normal flow) shows through in the gap underneath — this is what caused
   the "content bleeding through" glitch. Setting the min-height in CSS, before GSAP ever measures
   the element, makes GSAP lock in the full-viewport height instead. */
.mc-curtain{position:relative;min-height:100vh;min-height:100dvh}
.mc-curtain__inner{height:100%;transform-origin:top center}
/* Center each section's content block within the now-taller (100vh) card so short sections
   don't just sit at the top with dead space below. Excludes the hero: its header must stay
   pinned to the top of the screen like a navbar, not get pulled toward the vertical center
   together with the rest of the hero content. */
.mc-curtain:not(.hero) > .mc-curtain__inner{display:flex;flex-direction:column;justify-content:center}
/* Two flexbox gotchas, both from turning each section's content wrapper into a flex item:
   1) several of these wrappers (e.g. .testimonials-wrap) center themselves with their own
      max-width + margin:0 auto — but a flex item with auto cross-axis margins opts OUT of
      align-items:stretch per spec, so it falls back to shrink-to-fit sizing instead of filling
      the parent. width:100% forces it back to full width (their own margin:auto still centers
      CONTENT inside that width on wide screens, same as before).
   2) shrink-to-fit sizing on a wrapper containing a horizontally-scrolling carousel measures the
      carousel track's full (unscrolled) content width instead of clipping it — min-width:0 removes
      that, letting the wrapper size to the container instead of its widest descendant. */
.mc-curtain:not(.hero) > .mc-curtain__inner > *{min-width:0;width:100%}
/* :not(:first-child) looks correct but silently never matches: GSAP's pin wraps EVERY pinned
   element in its own individual "pin-spacer" div, so each .mc-curtain becomes the sole/first
   child of its own new parent — :first-child is parent-relative, so it now (wrongly) excludes
   every section, not just the hero. Using the class instead of DOM position keeps it independent
   of GSAP's wrapper structure. */
.mc-curtain:not(.hero){border-radius:28px;box-shadow:0 -18px 36px rgba(0,0,0,.4);overflow:hidden}
.z-1{z-index:1}
.z-2{z-index:2}
.z-3{z-index:3}
.z-4{z-index:4}
.z-5{z-index:5}
.z-6{z-index:6}
.z-7{z-index:7}
.z-8{z-index:8}

/* ===== Illuminate: heading text lights up (dim -> bright) as it scrolls through
   view, scrubbed directly to scroll position — brightens going down, dims going
   back up. Driven by GSAP ScrollTrigger in js/app.js. ===== */
.illuminate{
  background-repeat:no-repeat;
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.illuminate--dark{
  background-image:linear-gradient(90deg,#ffffff 50%,rgba(255,255,255,.3) 50%);
  color:rgba(255,255,255,.3);
}
.illuminate--light{
  background-image:linear-gradient(90deg,var(--color-text-onlight) 50%,rgba(10,10,10,.35) 50%);
  color:rgba(10,10,10,.35);
}
/* Hero headline + final CTA title: resting color is solid white; lit color sweeps a
   left-to-right brand gradient (white -> orange -> blue, echoing the logo) across the text. */
.illuminate--brand{
  background-image:linear-gradient(90deg,#ffffff 0%,var(--brand-orange) 25%,var(--brand-blue) 50%,#ffffff 50.01%,#ffffff 100%);
  color:#ffffff;
}
@media (prefers-reduced-motion: reduce){
  .illuminate{background-position:0 0}
}

/* ===== ¿Por qué elegirnos? ===== */
.whyus-wrap{max-width:var(--container-max);margin:0 auto;padding:40px var(--pad-x)}
.whyus-sub{color:var(--color-text-onlight-secondary);font-size:var(--fs-body-lg);margin:0 0 32px;max-width:560px}
.whyus-stats{display:flex;flex-direction:column;gap:24px;margin-bottom:36px;padding-bottom:36px;border-bottom:var(--border-hairline-light)}
.whyus-stat__num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(2.5rem,6vw,3.5rem);color:var(--brand-orange);margin:0;line-height:1}
.whyus-stat__label{font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-text-onlight-secondary);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin:6px 0 0}
.whyus-cards{display:flex;flex-direction:column;gap:16px}
.whyus-card{text-align:left}
.whyus-card__icon{width:48px;height:48px;border-radius:var(--radius-md);background:rgba(247,148,29,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.whyus-card__icon img{width:24px;height:24px}
.whyus-card__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--color-text-onlight);margin:0 0 6px}
.whyus-card__desc{font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-text-onlight-secondary);margin:0}

@media (min-width:900px){
  .whyus-stats{flex-direction:row;gap:40px}
  .whyus-stat{flex:1}
  .whyus-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
}

/* ===== Comparativa vs. otras empresas ===== */
.compare-sub{color:var(--color-text-secondary);font-size:var(--fs-body-lg);margin:0 0 24px;max-width:560px}
.compare-fade{position:relative}
.compare-fade::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:36px;
  background:linear-gradient(90deg,rgba(10,10,10,0),var(--brand-black));
  pointer-events:none;
}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{min-width:560px;width:100%;max-width:720px;border-radius:var(--radius-lg);overflow:hidden;border:var(--border-hairline-dark)}
.compare-row{display:grid;grid-template-columns:2fr 1fr 1.4fr}
.compare-row:not(:last-child){border-bottom:var(--border-hairline-dark)}
.compare-row--head{background:var(--color-bg-elevated)}
.compare-cell{padding:14px 16px;font-family:var(--font-body);font-size:var(--fs-small);color:var(--color-text-secondary);display:flex;align-items:center;gap:8px}
.compare-cell--them img{width:16px;height:16px;flex:none}
.compare-row--head .compare-cell{font-family:var(--font-display);font-weight:var(--fw-bold);color:#fff;text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:var(--fs-micro)}
.compare-cell--us{background:rgba(247,148,29,0.08);font-weight:var(--fw-semibold);color:#fff;justify-content:center}
.compare-cell--us img{width:20px;height:20px}
.compare-row--head .compare-cell--us{background:rgba(247,148,29,0.16);color:var(--brand-orange)}
.compare-cell__label{display:none}

/* Below ~700px the 3-column table gets cramped even with horizontal scroll — a sideways-scrolling
   table reads as "content is cut off" rather than an intentional pattern. The desktop table itself
   is untouched above this breakpoint. Below it each row becomes its own card: feature name on top,
   then the MoviCargo result and the "Otras empresas" result as two fully separate full-width
   blocks, one below the other (not squeezed onto the same line) — each its own tinted chip with
   its own icon, label and text, so nothing is cramped into a shared space. */
@media (max-width:699px){
  .compare-fade::after{display:none}
  .compare-scroll{overflow-x:visible}
  .compare-table{min-width:0;max-width:none;border:none;border-radius:0;display:flex;flex-direction:column;gap:14px}
  .compare-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:var(--color-bg-elevated);border:var(--border-hairline-dark);border-radius:var(--radius-md);padding:16px}
  .compare-row--head{display:none}
  .compare-cell--feature{padding:0;font-family:var(--font-display);font-weight:var(--fw-bold);color:#fff;font-size:var(--fs-body)}
  .compare-cell--us,.compare-cell--them{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);width:100%;box-sizing:border-box}
  .compare-cell--us{background:rgba(247,148,29,0.12)}
  .compare-cell--them{background:rgba(255,255,255,0.04)}
  .compare-cell--us img,.compare-cell--them img{flex:none;width:18px;height:18px}
  .compare-cell__label{display:block;flex:none;min-width:96px;font-size:var(--fs-micro);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-secondary)}
  .compare-cell--us .compare-cell__label{color:var(--brand-orange)}
}

/* ===== Testimonial carousel ===== */
.testi-carousel{position:relative}
.testi-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 calc(var(--pad-x) * -1);
  padding:8px var(--pad-x) 24px;
  cursor:grab;
}
.testi-track::-webkit-scrollbar{display:none}
.testi-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.testi-slide{
  flex:0 0 82%;
  scroll-snap-align:center;
  transition:transform .4s var(--ease-out),opacity .4s var(--ease-out);
  opacity:.55;
  transform:scale(.93);
}
.testi-slide.is-active{opacity:1;transform:scale(1)}
.testi-slide .testimonial{height:100%}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:4px}
.testi-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--neutral-200);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
.testi-dot.is-active{background:var(--brand-orange);transform:scale(1.3)}
@media (min-width:640px){.testi-slide{flex-basis:60%}}
@media (min-width:900px){.testi-slide{flex-basis:38%}}
@media (min-width:1200px){.testi-slide{flex-basis:30%}}

/* ===== WhatsApp float button: periodic speech-bubble reminder ===== */
.wa-float__bubble{
  position:absolute;
  right:100%;
  top:50%;
  margin-right:14px;
  max-width:200px;
  width:max-content;
  transform-origin:right center;
  transform:translateY(-50%) scale(0);
  opacity:0;
  background:var(--neutral-0);
  color:var(--color-text-onlight);
  font-family:var(--font-body);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-small);
  line-height:1.3;
  padding:10px 16px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-elevation-2);
  pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
}
.wa-float__bubble::after{
  content:'';
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:var(--neutral-0);
}
.wa-float__bubble.is-visible{
  transform:translateY(-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .wa-float__bubble{transition:opacity .25s ease}
}