/* Marina Logistics — homepage styles. rem-based (1rem = 16px). */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: clamp(1rem, 1vw, 100rem);
  overflow-x: hidden;
  touch-action: pan-y;
}
body {
  margin: 0;
  font-family: 'Golos Text', sans-serif;
  color: #1A1A1A;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #1A1A1A;
  line-height: 1.08;
}
p { margin: 0; }
a { color: #F04A42; text-decoration: none; }
a:hover { color: #DE3A33; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* Single source of truth for side gutters and content width — every section that
   sets its own horizontal padding must use var(--gutter) so they stay identical. */
:root { --gutter: 1.5rem; --content-max: 86rem; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--edge { max-width: 100rem; }
.section { padding: 5.75rem 0; scroll-margin-top: 5.125rem; }
.section--tint { background: #FAFAF9; }

.eyebrow {
  font-family: 'Golos Text', sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: #F04A42;
  margin-bottom: 1rem;
}
.section-title { font-size: 2.625rem; line-height: 1.05; }
.lead { color: #6B7280; font-size: 1.125rem; max-width: 42.5rem; margin-top: 1.125rem; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.stars { color: #E8A33D; letter-spacing: 0.125rem; font-size: 0.9375rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Golos Text', sans-serif;
  font-weight: 700;
  font-size: 0.96875rem;
  padding: 1rem 1.875rem;
  border-radius: 0.75rem;
  cursor: pointer;
  border: 0.125rem solid transparent;
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
  justify-content: center;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-0.125rem); }
.btn i { font-size: 1.0625rem; }
.btn--wa { background: #25D366; color: #fff; box-shadow: 0 0.625rem 1.5rem rgba(37,211,102,.34); }
.btn--wa:hover { color: #fff; background: #1fbe5a; box-shadow: 0 0.875rem 1.875rem rgba(37,211,102,.44); }
.btn--red { background: #F04A42; color: #fff; box-shadow: 0 0.625rem 1.5rem rgba(240,74,66,.28); }
.btn--red:hover { color: #fff; background: #DE3A33; box-shadow: 0 0.875rem 1.875rem rgba(240,74,66,.38); }
.btn--white { background: #fff; color: #16181D; }
.btn--white:hover { color: #000; background: #fff; }
.btn--ghost-white { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-white:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); }
.btn--full { width: 100%; }

/* Header */
.hdr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  padding-top: 1.75rem;
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 5.25rem; gap: 1.5rem; }
.hdr__left { display: flex; align-items: center; gap: 2.25rem; }
.hdr__brand { display: inline-flex; align-items: center; }
.hdr__logo { height: 7rem; width: auto; }
.hdr__nav { display: flex; gap: 1.625rem; align-items: center; }
.hdr__nav__actions { display: none; }
.hdr__link { color: #2B2F36; font-weight: 500; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
.hdr__link:hover { color: #F04A42; }
.hdr__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1875rem; }
.hdr__phone { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.01em; white-space: nowrap; }
.hdr__phone:hover { color: #fff; opacity: 0.85; }
.hdr__phone i { display: none; }
.hdr__location { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: rgba(255,255,255,.92); white-space: nowrap; }
.hdr__location i { color: #fff; font-size: 0.8125rem; }
/* Pages whose fold is a light stage need dark header contact text to stay readable */
.hdr-on-light .hdr__phone { color: #16181D; }
.hdr-on-light .hdr__phone:hover { color: #F04A42; opacity: 1; }
.hdr-on-light .hdr__location { color: #5B616B; }
.hdr-on-light .hdr__location i { color: #F04A42; }

/* Pages whose fold is a dark or red stage: white logo + white nav so they read.
   The white logo is already fetched for the footer, so this costs no extra request. */
.hdr__logo--white { display: none; }
.hdr-on-dark .hdr__logo--red { display: none; }
.hdr-on-dark .hdr__logo--white { display: block; }
.hdr-on-dark .hdr__link { color: #fff; }
.hdr-on-dark .hdr__link:hover { color: rgba(255,255,255,.72); }
.hdr-on-dark .hdr__burger { background: #fff; color: #F04A42; }
.hdr-on-dark .hdr__burger:hover { background: rgba(255,255,255,.88); }
.hdr__burger {
  display: none; background: transparent; border: none; cursor: pointer; padding: 0.5rem;
  color: #16181D; font-size: 1.5rem; line-height: 1;
}
.hdr__burger .fa-xmark { display: none; }
.hdr.is-open .hdr__burger .fa-bars { display: none; }
.hdr.is-open .hdr__burger .fa-xmark { display: inline-block; }

/* Hero — light stage, big red circle right, cutout truck, stats row inside the fold */
.hero { background: #F4F3F0; color: #1A1A1A; position: relative; overflow: hidden; }
.hero__circle {
  position: absolute; z-index: 1; top: -7rem; right: -23rem;
  width: 47rem; height: 55rem; border-radius: 50%;
  background: linear-gradient(140deg,#F04A42 0%,#DE3A33 100%);
}
.hero__watermark {
  position: absolute; z-index: 0; top: 15%; left: -1rem;
  font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 6rem; line-height: 0.9;
  letter-spacing: -0.03em; color: #DED9CF; white-space: nowrap; pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 4; min-height: 34rem; display: flex; align-items: center;
  padding: 9.5rem var(--gutter) 4rem;
}
.hero__content { max-width: 34rem; }
.hero__title { font-size: 2.9rem; color: #16181D; font-weight: 800; line-height: 1.07; letter-spacing: -0.02em; }
.hero__sub { font-size: 1.1rem; color: #5B616B; font-weight: 400; margin-top: 1.5rem; max-width: 30rem; line-height: 1.55; }
.hero__actions { display: flex; align-items: center; gap: 1.75rem; margin-top: 2.25rem; flex-wrap: wrap; }
.hero__btns { display: flex; gap: 0.875rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__textlink {
  font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 0.9375rem; color: #5B616B;
  text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 0.0625rem;
}
.hero__textlink:hover { color: #F04A42; }
.hero__badges {
  display: flex; gap: 0.75rem 1.5rem; flex-wrap: wrap; margin-top: 2rem; align-items: center;
  color: #5B616B; font-size: 0.9375rem; font-family: 'Golos Text', sans-serif; font-weight: 500;
}
.hero__badges b { color: #16181D; font-weight: 600; }
.dot { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: rgba(20,20,20,.25); display: inline-block; }
.hero__truckwrap { display: contents; }
.hero__truck {
  position: absolute; z-index: 3; right: -1.5%; bottom: 17rem; width: 54%; max-width: 45rem; height: auto;
}

/* Stats — bottom row of the fold */
.hero__stats {
  position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1.75rem; margin-top: 0rem; padding-bottom: 3.5rem;
}
.stat {
  background: #fff; border-radius: 0; padding: 2.25rem 1.5rem; text-align: center;
  box-shadow: 0 0.75rem 2rem rgba(20,20,20,.08);
}
.stat__num { font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 2.75rem; color: #F04A42; line-height: 1; }
.stat__label { color: #5B616B; font-size: 0.95rem; font-family: 'Golos Text', sans-serif; font-weight: 500; margin-top: 0.75rem; }

/* Por qué Marina — cards */
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3.25rem; }
.cards--2 { grid-template-columns: repeat(2,1fr); }
.cards--3 { grid-template-columns: repeat(3,1fr); }
.card { background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 1.125rem; padding: 2rem 1.625rem; transition: transform .16s, box-shadow .16s; }
.card:hover { transform: translateY(-0.25rem); box-shadow: 0 1.375rem 2.75rem rgba(20,20,20,.08); }
.card__icon {
  width: 4rem; height: 4rem; border-radius: 1rem; background: #FCE9E9; color: #F04A42;
  display: flex; align-items: center; justify-content: center; font-size: 1.625rem; margin-bottom: 1.25rem;
}
.card__title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem; color: #1A1A1A; margin-bottom: 0.75rem; line-height: 1.18; }
.card__desc { color: #6B7280; font-size: 0.90625rem; }

/* Trust channels strip */
.canales { background: #000; color: #fff; position: relative; overflow: hidden; }
.canales__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/assets/img/canales-bg.webp') center left / cover no-repeat;
}
.canales__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 42%, #000 72%, #000 100%);
}
.canales__in { position: relative; z-index: 1; max-width: 34rem; margin-left: auto; padding: 5.5rem 3.5rem 5.5rem var(--gutter); text-align: left; }
.canales__eyebrow { justify-content: flex-start; }
.canales__list { align-items: flex-start; }
.canal-item { flex-direction: row; }
.canales__eyebrow { display: flex; align-items: center; gap: 0.5625rem; color: #F04A42; }
.canales__lead { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.25; color: #fff; margin-top: 0.75rem; }
.canales__list { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.75rem; }
.canal-item { display: flex; gap: 0.625rem; align-items: center; color: #c7cad0; font-size: 1.0625rem; text-decoration: none; transition: color .15s ease; }
.canal-item:hover { color: #fff; }
.canal-item i { color: #F04A42; width: 1.125rem; }
.canal-item b { color: #fff; font-family: 'Golos Text', sans-serif; font-weight: 700; }
.canal-note { color: #83878f; font-size: 0.875rem; margin-top: 1.75rem; }

/* Glosario */
.glosario__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; margin-top: 3rem; }
.glosario__def { color: #1A1A1A; font-size: 1.0625rem; }
.capacity { margin-top: 1.625rem; display: flex; gap: 1rem; align-items: center; background: #FCE9E9; border-radius: 1rem; padding: 1.25rem 1.5rem; }
.capacity__num { font-family: 'Golos Text', sans-serif; font-weight: 900; font-size: 2.375rem; color: #F04A42; line-height: 1; white-space: nowrap; }
.capacity__title { font-family: 'Golos Text', sans-serif; font-weight: 800; }
.capacity__desc { color: #6B7280; font-size: 0.90625rem; }
.type-card { border: 0.0625rem solid #EEEDEB; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: flex-start; }
.type-card i { color: #F04A42; font-size: 1.375rem; margin-top: 0.1875rem; }
.type-card h4 { font-size: 1.1875rem; margin-bottom: 0.4375rem; }
.type-card p { color: #6B7280; font-size: 0.90625rem; }

/* Como funciona — red section, white centered heading, ring badges like the countdown reference */
.como { background: linear-gradient(130deg,#F04A42 0%,#DE3A33 100%); }
.como__eyebrow { color: rgba(255,255,255,.85); }
.como__title { color: #fff; }
.pasos { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.625rem; margin-top: 4.5rem; }
.pasos::before {
  content: ''; position: absolute; top: 2.875rem; left: 16.6%; right: 16.6%; height: 0.125rem; margin-top: -0.0625rem;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 0.5rem, transparent 0.5rem, transparent 1rem);
}
.paso { position: relative; background: transparent; border: none; padding: 0; text-align: center; }
.paso__ring {
  width: 5.75rem; height: 5.75rem; border-radius: 50%; margin: 0 auto 1.375rem; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 0.125rem solid rgba(255,255,255,.4);
  background: linear-gradient(130deg,#F04A42 0%,#DE3A33 100%);
}
.paso__circle {
  width: 4.625rem; height: 4.625rem; border-radius: 50%; background: #fff; color: #F04A42;
  font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 1.875rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.75rem 1.625rem rgba(0,0,0,.25);
}
/* keep each step's text narrower than its column so the three don't crowd together */
.paso h4 { font-size: 1.25rem; line-height: 1.35; margin-bottom: 0.75rem; color: #fff; max-width: 17rem; margin-left: auto; margin-right: auto; }
.paso p { color: rgba(255,255,255,.8); font-size: 0.9375rem; max-width: 17rem; margin-left: auto; margin-right: auto; }

/* Cotiza / contact form — half black / half white split, condensed centered card */
.cotiza {
  position: relative; overflow: hidden; padding: 7rem 0;
  background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 50%, #fff 50%, #fff 100%);
}
.cotiza__img {
  position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 50%;
  background: url('/assets/img/cotiza-truck.webp') center / cover no-repeat;
}
.cotiza__wrap { position: relative; max-width: var(--content-max); margin: 0 auto; min-height: 26rem; }
.cotiza__text { position: relative; z-index: 1; max-width: 20rem; padding-top: 0.5rem; }
.cotiza__eyebrow { color: #F04A42; }
.cotiza__title { color: #fff; font-size: 2.25rem; }
.cotiza__sub { color: rgba(255,255,255,.72); font-size: 1rem; margin-top: 1rem; line-height: 1.55; }
.btn--sm { padding: 0.6875rem 1.375rem; font-size: 0.875rem; margin-top: 1.75rem; }
.cotiza__form {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(100%, 27rem);
}
.form { background: #fff; border-radius: 0; padding: 2.5rem; color: #1A1A1A; box-shadow: 0 2.5rem 5rem rgba(0,0,0,.35); }
.field { margin-bottom: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1A1A1A; margin-bottom: 0.5rem; }
.field input {
  width: 100%; padding: 0.85rem 1rem; border: 0.09375rem solid #E5E5E3; border-radius: 0;
  font-family: 'Golos Text', sans-serif; font-size: 0.9rem; background: #FAFAF9;
}
.field input:focus { outline: none; border-color: #F04A42; background: #fff; }
.form__note { color: #6B7280; font-size: 0.8125rem; margin-top: 1rem; text-align: center; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3.25rem; }
.marquee {
  margin-top: 3.25rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 55s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .tcard { flex: 0 0 22rem; margin-right: 1.5rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.tcard { background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 0; padding: 1.75rem; display: flex; flex-direction: column; }
.tcard__quote { color: #33363b; font-size: 0.9375rem; margin: 1rem 0 1.25rem; flex: 1; line-height: 1.6; }
.tcard__foot { display: flex; gap: 0.8125rem; align-items: center; }
.tcard__avatar {
  width: 2.875rem; height: 2.875rem; border-radius: 50%; background: #FCE9E9; color: #F04A42;
  font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 1.125rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tcard__name { font-family: 'Golos Text', sans-serif; font-weight: 700; color: #1A1A1A; font-size: 0.9375rem; }
.tcard__meta { color: #6B7280; font-size: 0.78125rem; display: flex; gap: 0.3125rem; align-items: center; margin-top: 0.0625rem; }
.tcard__meta i { color: #E8A33D; }

/* Rutas */
.rutas__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.125rem; margin-top: 3rem; }
.ruta {
  background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 1rem; padding: 1.625rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.ruta:hover { border-color: #F04A42; transform: translateY(-0.1875rem); box-shadow: 0 1.125rem 2.25rem rgba(240,74,66,.1); }
.ruta__left { display: flex; gap: 1rem; align-items: center; }
.ruta__icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: #FCE9E9; color: #F04A42; display: flex; align-items: center; justify-content: center; font-size: 1.1875rem; flex-shrink: 0; }
.ruta h4 { font-size: 1.25rem; color: #1A1A1A; }
.ruta span { color: #6B7280; font-size: 0.84375rem; }
.ruta__go { color: #F04A42; font-size: 1.1875rem; }

/* FAQ */
.faq-wrap { max-width: 52.5rem; margin: 3rem auto 0; }
.faq-item { border: 0.0625rem solid #EEEDEB; border-radius: 0.875rem; margin-bottom: 0.875rem; overflow: hidden; transition: box-shadow .14s; }
.faq-item.is-open { box-shadow: 0 0.875rem 1.875rem rgba(20,20,20,.07); }
.faq-q {
  width: 100%; background: #fff; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1.25rem; padding: 1.5rem 1.625rem; text-align: left; font-family: 'Golos Text', sans-serif; font-weight: 700;
  font-size: 1.0625rem; color: #1A1A1A;
}
.faq-chevron {
  width: 2.125rem; height: 2.125rem; flex-shrink: 0; border-radius: 50%; background: #FCE9E9; color: #F04A42;
  display: flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: transform .22s, background .22s;
}
.faq-item.is-open .faq-chevron { transform: rotate(45deg); background: #F04A42; color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: #6B7280; font-size: 0.96875rem; }
.faq-item.is-open .faq-a { max-height: 28rem; }
.faq-a p { padding: 0.5rem 1.625rem 1.625rem; }

/* Gallery marquee — small images sliding continuously */
.gallery { background: #FAFAF9; padding-bottom: 1rem; }
.gallery__marquee .marquee__track { animation-duration: 32s; }
.gallery__thumb {
  flex: 0 0 16rem; margin-right: 1rem; height: 8.75rem; object-fit: cover; background: #EEEDEB;
}

/* Final CTA */
.final-cta { background: linear-gradient(130deg,#F04A42,#DE3A33); color: #fff; text-align: center; position: relative; overflow: hidden; }
.final-cta::before {
  content: ''; position: absolute; top: -45%; right: -6%; width: 38.75rem; height: 38.75rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,0) 70%); pointer-events: none;
}
.final-cta .wrap { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; font-size: 3.125rem; line-height: 1.04; font-weight: 900; }
.final-cta p { color: #ffe2e4; font-size: 1.1875rem; margin: 1.25rem auto 0; max-width: 37.5rem; }
.final-cta__btns { justify-content: center; margin-top: 2.25rem; }

/* Footer */
.footer { background: #141414; color: #a2a6ac; }
.footer__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.75rem; padding: 4.25rem var(--gutter) 2.875rem; }
.footer__logo { height: 3.75rem; width: auto; margin-bottom: 1.375rem; }
.footer__desc { max-width: 20rem; color: #a2a6ac; }
.footer__credit {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;
  font-family: 'Golos Text', sans-serif; font-size: 0.8125rem; color: #6c6f75;
  opacity: 0.85; transition: opacity .14s;
}
.footer__credit:hover { opacity: 1; color: #6c6f75; }
.footer__credit img { height: 1rem; width: auto; }
.footer__col h5 { color: #fff; font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1.125rem; }
.footer__col a, .footer__col p { color: #a2a6ac; font-size: 0.90625rem; margin-bottom: 0.75rem; display: flex; gap: 0.5625rem; align-items: center; }
.footer__col a:hover { color: #fff; }
.footer__col i { color: #F04A42; width: 1rem; }
.footer__bar {
  border-top: 0.0625rem solid #262626; padding-top: 1.375rem; padding-bottom: 1.375rem;
  color: #6c6f75; font-size: 0.8125rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

/* Sticky mobile CTA bar */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 60; display: none; gap: 0.625rem;
  padding: 0.6875rem 0.875rem; background: #fff; border-top: 0.0625rem solid #E5E5E3;
  box-shadow: 0 -0.375rem 1.25rem rgba(0,0,0,.09); box-sizing: border-box;
}
.sticky-bar .btn { flex: 1; padding: 0.875rem; }

/* Floating WhatsApp chat bubble — desktop/tablet only, the mobile sticky bar
   above already covers <=768px so this is hidden there to avoid duplicating it */
.wa-float {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 65;
  width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; box-shadow: 0 0.75rem 1.75rem rgba(37,211,102,.4);
  transition: width .25s ease, border-radius .25s ease, box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.wa-float:hover {
  color: #fff; transform: translateY(-0.125rem);
  box-shadow: 0 1rem 2.25rem rgba(37,211,102,.5);
}
.wa-float__ring {
  position: absolute; inset: 0; border-radius: 50%; background: #25D366;
  animation: wa-float-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-float-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.wa-float i { position: relative; flex-shrink: 0; }
.wa-float__badge {
  position: absolute; top: -0.125rem; right: -0.125rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #F04A42; color: #fff; font-size: 0.6875rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 0.125rem solid #fff;
}
.wa-float:hover .wa-float__badge { display: none; }
.wa-float__label {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.25;
  margin-left: 0; transition: max-width .25s ease .05s, opacity .2s ease, margin-left .25s ease;
  text-align: left;
}
.wa-float__label b { font-size: 0.875rem; font-weight: 700; }
.wa-float:hover {
  width: auto; border-radius: 2.25rem; padding: 0 1.25rem 0 1.125rem; gap: 0.75rem;
}
.wa-float:hover .wa-float__label { max-width: 12rem; opacity: 1; margin-left: 0.125rem; }
@media (prefers-reduced-motion: reduce) { .wa-float__ring { animation: none; } }
@media (max-width: 768px) { .wa-float { display: none; } }

/* ============================================================
   Inner-page heroes — each page type gets a distinct treatment
   ============================================================ */

/* Photo hero — full-bleed image + gradient overlay (Servicios) */
.hero-img { position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; min-height: 34rem; }
.hero-img__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-img__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,14,.30) 0%, rgba(12,12,14,.55) 52%, rgba(12,12,14,.88) 100%); }
.hero-img__in { position: relative; z-index: 1; padding: 11.5rem var(--gutter) 3.75rem; }
.hero-img h1 { color: #fff; font-size: 3rem; line-height: 1.06; letter-spacing: -0.02em; }
.hero-img__lead { color: rgba(255,255,255,.9); font-size: 1.15rem; margin-top: 1.25rem; max-width: 38rem; line-height: 1.55; }
.hero-img__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }

/* Servicios fold — copy left, unloading image right, no circle */
.sfold { background: #F4F3F0; position: relative; overflow: hidden; }
.sfold__in { display: grid; grid-template-columns: minmax(0, 41rem) 1fr; gap: 2.5rem; align-items: center; padding: 9.5rem var(--gutter) 4.5rem; }
.sfold__content { max-width: 41rem; }
.sfold h1 { font-size: 3rem; color: #16181D; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; }
.sfold__lead { font-size: 1.1rem; color: #5B616B; margin-top: 1.5rem; max-width: 31rem; line-height: 1.6; }
/* the rig is long and low, so let it run out toward the right screen edge —
   cropping the truck's front is fine, the priority is the copy column width */
.sfold__media { margin-right: -6rem; }
.sfold__media img { width: 100%; max-width: none; height: auto; }

/* Red variant of the fold (Rutas) — same layout, brand red stage */
.sfold--red { background: linear-gradient(130deg,#F04A42 0%,#DE3A33 100%); }
.sfold--red::before { content: ''; position: absolute; top: -38%; right: -6%; width: 38rem; height: 38rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); pointer-events: none; }
.sfold--red h1 { color: #fff; }
.sfold--red .eyebrow { color: rgba(255,255,255,.85); }
.sfold--red .sfold__lead { color: rgba(255,255,255,.88); }
.sfold--red .hero__badges { color: rgba(255,255,255,.85); }
.sfold--red .hero__badges b { color: #fff; }
.sfold--red .dot { background: rgba(255,255,255,.45); }
.sfold--red .hero__textlink { color: #fff; }
.sfold--red .hero__textlink:hover { color: rgba(255,255,255,.8); }
.sfold--red .sfold__media { margin-right: 0; }
/* the map is a tall graphic, so give Rutas a wider copy column than Servicios.
   NOTE: this out-specifies the mobile collapse rule, so it must be reset inside
   the 1024px media query or the grid stays 2 columns and squeezes the map to 0. */
.sfold--red .sfold__in { grid-template-columns: minmax(0, 38rem) 1fr; }
.sfold--red .sfold__content { max-width: 38rem; }
/* no drop shadow here — the map is thin white line art and a shadow muddies it */

/* Editorial hero — dark solid slab, left or centered (Nosotros, Blog, Rutas) */
/* Plain black/footer-colour hero — Blog. No red glow: user wants this section
   read as black/footer colour, not red-tinted. */
.hero-ed { background: #141414; color: #fff; position: relative; overflow: hidden; }
/* Brand red variant of the editorial hero (Nosotros) — keeps Blog on footer black */
.hero-ed--brand { background: linear-gradient(130deg,#F04A42 0%,#DE3A33 100%); }
.hero-ed--brand::before { content: ''; position: absolute; top: -32%; right: -8%; width: 36rem; height: 36rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); pointer-events: none; }
.hero-ed--brand .eyebrow { color: rgba(255,255,255,.85) !important; }
.hero-ed--brand .hero-ed__lead { color: rgba(255,255,255,.9); }
.hero-ed--brand .hero-ed__chip b { color: #fff; }
.hero-ed--brand .hero-ed__chip span { color: rgba(255,255,255,.82); }
.hero-ed__in { position: relative; z-index: 1; padding: 11rem var(--gutter) 4rem; }
.hero-ed--center .hero-ed__in { text-align: center; }
.hero-ed--center h1, .hero-ed--center .hero-ed__lead { margin-left: auto; margin-right: auto; }
.hero-ed h1 { color: #fff; font-size: 3rem; line-height: 1.06; letter-spacing: -0.02em; max-width: 47rem; }
.hero-ed__lead { color: rgba(255,255,255,.78); font-size: 1.15rem; margin-top: 1.25rem; line-height: 1.55; max-width: 40rem; }
.hero-ed--center .hero-ed__lead { margin-left: auto; margin-right: auto; }
.hero-ed__actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-ed--center .hero-ed__actions { justify-content: center; }
.hero-ed__chips { display: flex; gap: 2.75rem; flex-wrap: wrap; margin-top: 2.75rem; }
.hero-ed--center .hero-ed__chips { justify-content: center; }
.hero-ed__chip b { display: block; font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 2rem; color: #F04A42; line-height: 1; }
.hero-ed__chip span { color: rgba(255,255,255,.68); font-size: 0.84375rem; }

/* Form hero — text + floating quote card (Precios) */
.hero-form { background: #F4F3F0; position: relative; overflow: hidden; }
.hero-form::before { content: ''; position: absolute; top: -12rem; right: -14rem; width: 40rem; height: 40rem; border-radius: 50%; background: linear-gradient(140deg,#F04A42 0%,#DE3A33 100%); }
.hero-form__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; padding: 10rem var(--gutter) 4rem; }
.hero-form h1 { font-size: 2.85rem; color: #16181D; line-height: 1.07; letter-spacing: -0.02em; }
.hero-form__lead { color: #5B616B; font-size: 1.1rem; margin-top: 1.25rem; max-width: 30rem; line-height: 1.6; }
.hero-form__points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.75rem; }
.hero-form__points li { display: flex; gap: 0.75rem; align-items: center; color: #33363b; font-size: 0.96875rem; }
.hero-form__points i { color: #F04A42; }
.hero-form .form { box-shadow: 0 2rem 4rem rgba(20,20,20,.16); }
.hero-form__card-h { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.25rem; margin-bottom: 1.25rem; color: #16181D; }

/* Breadcrumb — dark by default; light variant for dark/photo heroes */
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8125rem; color: #6B7280; margin-bottom: 1.5rem; flex-wrap: wrap; font-family: 'Golos Text', sans-serif; }
.breadcrumb a { color: #F04A42; }
.breadcrumb a:hover { color: #DE3A33; }
.breadcrumb__sep { color: #b8bcc4; }
.breadcrumb__current { color: #16181D; font-weight: 600; }
.breadcrumb--light { color: rgba(255,255,255,.62); }
.breadcrumb--light a { color: rgba(255,255,255,.85); }
.breadcrumb--light a:hover { color: #fff; }
.breadcrumb--light .breadcrumb__sep { color: rgba(255,255,255,.38); }
.breadcrumb--light .breadcrumb__current { color: #fff; }

/* Service steps — single compact row, keeps the fold to CTA path short (Servicios) */
.srow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 3rem; }
.scard { background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 1.125rem; padding: 1.625rem 1.25rem; transition: transform .16s, box-shadow .16s; }
.scard:hover { transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.5rem rgba(20,20,20,.08); }
.scard__no { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: #FCE9E9; color: #F04A42; font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 1.0625rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.125rem; }
.scard h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.25; margin-bottom: 0.5rem; }
.scard p { color: #6B7280; font-size: 0.875rem; line-height: 1.5; }

/* Company timeline (Nosotros) */
.timeline { margin-top: 3.25rem; position: relative; display: grid; gap: 2.25rem; max-width: 46rem; }
.timeline::before { content: ''; position: absolute; left: 1.1875rem; top: 0.75rem; bottom: 0.75rem; width: 0.125rem; background: #F1CBC9; }
.tl-item { position: relative; padding-left: 3.75rem; }
.tl-item__dot { position: absolute; left: 0; top: -0.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #F04A42; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; box-shadow: 0 0 0 0.375rem #fff; }
.tl-item .yr { color: #F04A42; font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; }
.tl-item h4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1875rem; margin-top: 0.15rem; }
.tl-item p { color: #6B7280; font-size: 0.9375rem; margin-top: 0.35rem; }

/* Blog magazine grid (Blog) */
.postgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; margin-top: 3.25rem; }
.postcard { background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 1.125rem; overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s; }
.postcard:hover { transform: translateY(-0.25rem); box-shadow: 0 1.375rem 2.75rem rgba(20,20,20,.1); color: inherit; }
.postcard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #EEEDEB; }
.postcard__body { padding: 1.625rem 1.625rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.postcard__cat { font-family: 'Golos Text', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.71875rem; color: #F04A42; margin-bottom: 0.6rem; }
.postcard h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.24; color: #1A1A1A; margin-bottom: 0.6rem; }
.postcard p { color: #6B7280; font-size: 0.90625rem; flex: 1; }
.postcard__more { margin-top: 1rem; color: #F04A42; font-weight: 700; font-size: 0.875rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.postcard--feat { grid-column: 1 / -1; flex-direction: row; }
.postcard--feat .postcard__img { width: 50%; aspect-ratio: auto; min-height: 20rem; }
.postcard--feat .postcard__body { padding: 2.75rem; justify-content: center; }
.postcard--feat h3 { font-size: 1.875rem; }
.postcard--feat p { flex: none; margin-top: 0.25rem; }

/* Long-form article block (Blog article anchors) */
.article { max-width: 44rem; margin: 0 auto; }
.article__img { width: 100%; border-radius: 1.25rem; margin-bottom: 1.75rem; max-height: 22rem; object-fit: cover; }
.article h2 { font-size: 1.9rem; line-height: 1.15; margin-top: 2.25rem; scroll-margin-top: 2rem; }
.article h2:first-of-type { margin-top: 0; }
.article p { color: #33363b; font-size: 1.03125rem; margin-top: 1.125rem; }

/* Author byline, shown under the article hero lead */
.byline { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; justify-content: center; text-align: left; }
.byline__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #F1F2F4; color: #5B616B; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.byline__name { font-weight: 700; color: #16181D; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.4rem; }
.byline__li { color: #5B616B; display: inline-flex; }
.byline__li:hover { color: #0A66C2; }
.byline__meta { color: #5B616B; font-size: 0.8125rem; margin-top: 0.125rem; }

/* Two-column article layout: content + sticky sidebar (share + table of contents) */
.article-layout { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 3rem; align-items: start; }
.article-layout .article { max-width: none; margin: 0; }
.article-side__sticky { position: sticky; top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

.share-box { background: #fff; border: 1px solid #ECEDEF; border-radius: 1rem; padding: 1.25rem; }
.share-box__title { font-weight: 700; font-size: 0.875rem; color: #16181D; margin-bottom: 0.875rem; }
.share-box__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.share-ico { width: 100%; aspect-ratio: 1; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; color: #fff; border: none; cursor: pointer; transition: opacity .15s ease; }
.share-ico:hover { opacity: 0.85; }
.share-ico--wa { background: #25D366; }
.share-ico--fb { background: #1877F2; }
.share-ico--x { background: #000; }
.share-ico--li { background: #0A66C2; }
.share-ico--mail { background: #5B616B; }
.share-ico--copy { background: #16181D; }
.share-ico--copy.is-copied { background: #1fbe5a; }

.toc { background: #fff; border: 1px solid #ECEDEF; border-radius: 1rem; padding: 1.25rem; }
.toc__title { font-weight: 700; font-size: 0.875rem; color: #16181D; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.toc__title::-webkit-details-marker { display: none; }
.toc__chevron { font-size: 0.75rem; color: #5B616B; transition: transform .2s ease; }
.toc[open] .toc__chevron { transform: rotate(180deg); }
.toc__list { list-style: none; margin-top: 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; }
.toc__list a { color: #5B616B; font-size: 0.8125rem; line-height: 1.35; display: block; transition: color .15s ease; }
.toc__list a:hover, .toc__list a.is-active { color: #F04A42; font-weight: 600; }

/* Image + text split band, reused across pages */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; height: 100%; max-height: 30rem; object-fit: cover; border-radius: 1.25rem; box-shadow: 0 1.5rem 3rem rgba(20,20,20,.14); }
.split__tag { position: absolute; left: 1.25rem; bottom: 1.25rem; background: #fff; color: #16181D; border-radius: 0.75rem; padding: 0.75rem 1.125rem; font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 0.75rem 1.5rem rgba(20,20,20,.16); }
.split__tag i { color: #F04A42; }
.split__body .eyebrow { margin-top: 0; }
.split__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.875rem; }
.split__list li { display: flex; gap: 0.75rem; align-items: flex-start; color: #33363b; font-size: 0.96875rem; }
.split__list i { color: #F04A42; margin-top: 0.28rem; font-size: 0.9375rem; flex-shrink: 0; }

/* Full-width image band with overlay text */
.imgband { position: relative; overflow: hidden; color: #fff; }
.imgband__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.imgband__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.62) 48%, rgba(10,10,10,.25) 100%); }
.imgband__in { position: relative; z-index: 1; padding: 5.5rem var(--gutter); }
.imgband h2 { color: #fff; font-size: 2.375rem; line-height: 1.1; max-width: 40rem; }
.imgband p { color: rgba(255,255,255,.86); font-size: 1.0625rem; margin-top: 1.125rem; max-width: 40rem; }
.imgband__actions { margin-top: 2rem; display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* Factor cards — used on Precios */
.factors { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 3.25rem; }
.factor { background: #fff; border: 0.0625rem solid #EEEDEB; border-radius: 1.125rem; padding: 1.875rem; display: flex; gap: 1.25rem; align-items: flex-start; }
.factor__icon { width: 3.25rem; height: 3.25rem; border-radius: 0.875rem; background: #FCE9E9; color: #F04A42; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.factor h4 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.factor p { color: #6B7280; font-size: 0.90625rem; }

/* Article accordion meta (Blog page reuses .faq-item / .faq-q / .faq-a) */
.faq-meta { display: block; font-family: 'Golos Text', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.71875rem; color: #F04A42; margin-bottom: 0.5rem; }
.faq-q__text { display: flex; flex-direction: column; }

/* Value / timeline cards — used on Nosotros */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3.25rem; }
.value-card { text-align: center; padding: 1rem; }
.value-card__icon { width: 4rem; height: 4rem; border-radius: 1rem; background: #FCE9E9; color: #F04A42; display: flex; align-items: center; justify-content: center; font-size: 1.625rem; margin: 0 auto 1.25rem; }
.value-card h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.1875rem; margin-bottom: 0.625rem; }
.value-card p { color: #6B7280; font-size: 0.90625rem; }

/* Inline CTA — low height conversion point placed between content sections */
.inline-cta { display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex-wrap: wrap; margin-top: 2.75rem; }
.inline-cta__link { font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 0.9375rem; color: #F04A42; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap .14s; }
.inline-cta__link:hover { color: #DE3A33; gap: 0.75rem; }

/* Coverage note strip */
.coverage-note { display: flex; align-items: center; gap: 1rem; background: #FCE9E9; border-radius: 1.125rem; padding: 1.5rem 1.75rem; margin-top: 3rem; }
.coverage-note i { color: #F04A42; font-size: 1.75rem; flex-shrink: 0; }
.coverage-note p { color: #33363b; font-size: 0.9375rem; }
.coverage-note b { color: #1A1A1A; }

/* Responsive */
@media (max-width: 1024px) {
  .section { padding: 3.75rem 0; }
  .hdr__location { display: none; }
  .hdr__logo { height: 3.5rem; }
  .hdr { padding-top: 1rem; }
  .hdr__in { height: 4.25rem; }
  .hdr__right { display: none; }
  .hdr__burger { position: relative; z-index: 71; margin-left: auto; }
  .hdr__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: #F04A42; color: #fff; font-size: 1.125rem;
    box-shadow: 0 0.375rem 1rem rgba(240,74,66,.35);
  }
  .hdr__burger:hover { background: #DE3A33; }
  .hdr__nav {
    display: none; position: fixed; z-index: 70; inset: 0;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    background: linear-gradient(160deg,#F04A42 0%,#C4121A 100%);
    padding: 8rem 1.25rem 2rem; overflow-y: auto;
  }
  .hdr.is-open .hdr__nav { display: flex; }
  .hdr__nav .hdr__link {
    padding: 1.125rem 0; font-size: 1.625rem; font-weight: 700; letter-spacing: 0.01em;
    text-transform: none; color: #fff; text-align: center;
    border-bottom: 0.0625rem solid rgba(255,255,255,.2);
  }
  .hdr__nav .hdr__link:hover { color: rgba(255,255,255,.8); }
  .hdr__nav .hdr__link:last-of-type { border-bottom: none; }
  .hdr__nav__actions {
    display: none; margin-top: 0; padding-top: 1.125rem;
    border-top: 0.0625rem solid rgba(255,255,255,.2);
  }
  .hdr.is-open .hdr__nav__actions { display: flex; flex-direction: column; gap: 0.875rem; }
  .hdr__nav__actions .btn { width: 100%; }
  .btn--nav-call { background: #fff; color: #F04A42; }
  .btn--nav-call:hover { color: #DE3A33; background: #fff; }
  body.nav-locked { overflow: hidden; }
  body.nav-locked .sticky-bar { display: none; }
  .glosario__grid, .footer__in { grid-template-columns: 1fr; gap: 2.125rem; }
  .cotiza { background: #0a0a0a; padding: 3.75rem 0; }
  .cotiza__img { display: none; }
  .cotiza__wrap { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2.25rem; }
  .cotiza__text { max-width: none; text-align: center; }
  .cotiza__form { position: static; transform: none; width: 100%; max-width: none; }
  .form { padding: 1.75rem 1.25rem; }
  .canales__bg { background-position: center center; }
  .canales__bg::after { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72) 100%); }
  .canales__in { max-width: none; margin-left: 0; padding: 3rem var(--gutter); text-align: center; }
  .canales__eyebrow { justify-content: center; }
  .canales__list { align-items: center; }
  .canal-item { flex-direction: row; }
  .canales__lead { font-size: 1.375rem; }
  .hero { display: flex; flex-direction: column; min-height: auto; }
  .hero__circle { display: none; }
  .hero__inner { order: 1; flex: none; min-height: 0; padding: 7.5rem var(--gutter) 1.5rem; }
  .hero__content { max-width: none; }
  .hero__title { font-size: 2.125rem; }
  .hero__sub { max-width: none; }
  .hero__truckwrap {
    display: block; position: relative; order: 2; margin-top: 5.5rem; padding: 2rem 0 0;
  }
  .hero__truckwrap::before {
    content: ''; position: absolute; z-index: 0; left: 50%; top: 52%; transform: translate(-50%,-50%);
    width: min(100%, 40rem); aspect-ratio: 1 / 1; border-radius: 50%;
    background: linear-gradient(140deg,#F04A42 0%,#DE3A33 100%);
  }
  .hero__truck {
    position: relative; z-index: 1; width: 100%; max-width: none; right: auto; bottom: auto;
    transform: none; margin: 0 auto;
  }
  .hero__stats { order: 3; width: 100%; padding: 2.5rem var(--gutter) 3rem; gap: 1rem; }
  .section-title { font-size: 1.875rem; }
  .final-cta h2 { font-size: 2.125rem; }
  .stat__num { font-size: 2.75rem; }
  .cards, .testimonials, .rutas__grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: repeat(3,1fr); }
  .footer__in { text-align: center; justify-items: center; }
  .footer__logo { margin-left: auto; margin-right: auto; }
  .footer__desc { max-width: 28rem; margin-left: auto; margin-right: auto; }
  .footer__col { display: flex; flex-direction: column; align-items: center; }
  .footer__col a, .footer__col p { justify-content: center; }
  .footer__bar { justify-content: center; text-align: center; gap: 0.375rem; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 4.375rem; }
  /* Inner-page heroes collapse cleanly on mobile */
  .sfold__in, .sfold--red .sfold__in { grid-template-columns: 1fr; gap: 2.5rem; padding: 7.5rem var(--gutter) 3.25rem; }
  .sfold__content, .sfold--red .sfold__content { max-width: none; }
  .sfold h1 { font-size: 2.125rem; }
  .sfold__lead { max-width: none; }
  .sfold__media { margin-right: 0; }
  .hero-img { min-height: 26rem; }
  .hero-img__in { padding: 8.5rem var(--gutter) 3rem; }
  .hero-img h1 { font-size: 2.125rem; }
  .hero-ed__in { padding: 8.5rem var(--gutter) 3.25rem; }
  .hero-ed h1 { font-size: 2.125rem; }
  .hero-ed__chips { gap: 1.75rem; }
  .hero-form__in { grid-template-columns: 1fr; gap: 2.25rem; padding: 8rem var(--gutter) 3.25rem; }
  .hero-form h1 { font-size: 2.125rem; }
  .hero-form__lead { max-width: none; }
  .postgrid { grid-template-columns: repeat(2,1fr); }
  .postcard--feat { flex-direction: column; }
  .postcard--feat .postcard__img { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
  .postcard--feat .postcard__body { padding: 1.75rem; }
  .postcard--feat h3 { font-size: 1.5rem; }
  .factors, .values { grid-template-columns: 1fr; }
  .srow { grid-template-columns: repeat(3, 1fr); }
  .paso h4, .paso p { max-width: 14rem; }
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--rev .split__media { order: -1; }
  .split__media img { max-height: 22rem; }
  .imgband__in { padding: 4rem var(--gutter); }
  .imgband__bg::after { background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.78) 100%); }
  .coverage-note { flex-direction: column; text-align: center; }
  .article-layout { grid-template-columns: 1fr; max-width: 44rem; gap: 2rem; }
  .article-side__sticky { position: static; }
  .share-box__icons { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
  .pasos { grid-template-columns: 1fr; }
  .pasos::before { display: none; }
  .paso { margin-bottom: 2rem; }
  .paso h4, .paso p { max-width: 20rem; }
  .values { grid-template-columns: 1fr; }
  .srow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards, .testimonials, .rutas__grid { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 1fr; }
  .postgrid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero__title { font-size: 1.75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .hero__actions .btn { width: 100%; }
  .hero__btns { flex-direction: column; align-items: stretch; }
  .hero__btns .btn { width: 100%; }
  .cotiza__text .btn { width: 100%; }
  .hero__stats { grid-template-columns: 1fr; gap: 0.75rem; }
  .stat {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.625rem;
    text-align: left; padding: 0.9375rem 1.25rem;
  }
  .stat__num { font-size: 1.5rem; flex-shrink: 0; }
  .stat__label { margin-top: 0; text-align: left; font-size: 0.8125rem; }
  .capacity { flex-direction: column; align-items: flex-start; text-align: left; }
}