/* ════════════════════════════════════════════════════════════════
   ELOGBOX MARITIMO — /maritimo
   Pagina autonoma: no depende de styles.css para poder cargar sola
   y ligera. Usa los mismos tokens de marca que la portada.
   ════════════════════════════════════════════════════════════════ */
:root{
  --dark:#061421;--ink:#050d18;--ink-2:#0a1929;--ink-3:#122740;
  --blue:#1c8dd6;--cyan:#24c7ec;--cyan-soft:#c7f1fb;
  --orange:#ff7a1a;--green:#8bc53f;
  --text:#11293a;--muted:#64798a;--paper:#f4f8fb;
  --r-md:22px;--r-lg:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-body:'Sora',system-ui,sans-serif;
  --font-heading:'Instrument Serif',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--text);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* ── Nav ── */
.mrNav{
  position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:26px;
  padding:10px 18px;border-radius:99px;
  background:rgba(6,20,33,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(159,215,242,.16);
  box-shadow:0 12px 40px rgba(3,12,22,.4);
}
.mrBrand img{height:30px;width:auto}
.mrNavLinks{display:flex;gap:20px}
.mrNavLinks a{color:#cfe6f4;font-size:.82rem;font-weight:600;transition:color .25s}
.mrNavLinks a:hover{color:var(--cyan)}
.mrNavCta{
  padding:9px 16px;border-radius:99px;background:var(--cyan);color:var(--ink);
  font-size:.8rem;font-weight:800;transition:transform .25s var(--ease),box-shadow .25s;
}
.mrNavCta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(36,199,236,.4)}

/* ── Hero ── */
.mrHero{
  position:relative;min-height:100svh;display:grid;align-content:center;
  padding:130px clamp(20px,6vw,90px) 0;overflow:hidden;
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(28,141,214,.35), transparent 60%),
    linear-gradient(180deg,#04101c 0%,#061a2c 46%,#0a2c47 78%,#0d3a5c 100%);
  color:#eaf6fd;
}
.mrStars{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #cfe6f4 60%, transparent),
    radial-gradient(1px 1px at 34% 9%, #9fd7f2 60%, transparent),
    radial-gradient(1.2px 1.2px at 58% 22%, #cfe6f4 60%, transparent),
    radial-gradient(1px 1px at 76% 12%, #9fd7f2 60%, transparent),
    radial-gradient(1.4px 1.4px at 90% 26%, #cfe6f4 60%, transparent);
}
.mrHeroCopy{position:relative;z-index:3;max-width:640px}
.mrKicker{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.mrKicker i{width:26px;height:3px;border-radius:99px;background:var(--green)}
.mrHero h1{
  margin:16px 0 18px;font-family:var(--font-heading);font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.01em;
}
.mrHero h1 em{color:var(--cyan)}
.mrHero p{max-width:520px;color:#b7d5e8;font-size:.98rem}
.mrHeroActions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mrBtn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:99px;font-size:.88rem;font-weight:800;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.mrBtn svg{width:17px;height:17px}
.mrBtn--primary{background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04121f;box-shadow:0 10px 30px rgba(36,199,236,.35)}
.mrBtn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(36,199,236,.5)}
.mrBtn--ghost{border:1.5px solid rgba(159,215,242,.45);color:inherit}
.mrBtn--ghost:hover{transform:translateY(-2px);border-color:var(--cyan)}
.mrSection .mrBtn--ghost{border-color:rgba(17,41,58,.25)}
.mrHeroMeta{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;color:#9dbdd4;font-size:.78rem}
.mrHeroMeta b{color:var(--cyan);margin-right:5px}

/* ── Escena marina ── */
.mrSea{position:absolute;right:0;bottom:0;left:0;height:300px;pointer-events:none}
.mrShip{
  position:absolute;bottom:66px;left:50%;width:min(620px,86vw);
  transform:translateX(-38%);
  animation:mrNavegar 7s ease-in-out infinite;
}
@keyframes mrNavegar{
  0%,100%{transform:translateX(-38%) translateY(0) rotate(-.5deg)}
  50%{transform:translateX(-38%) translateY(-9px) rotate(.6deg)}
}
.mrSmoke{animation:mrHumo 3.2s ease-out infinite}
.mrSmoke2{animation-delay:1.4s}
@keyframes mrHumo{
  0%{opacity:.5;transform:translate(0,0) scale(.8)}
  100%{opacity:0;transform:translate(14px,-26px) scale(1.7)}
}
.mrWave{
  position:absolute;right:-60px;left:-60px;height:110px;border-radius:44% 56% 0 0/100% 100% 0 0;
}
.mrWave1{bottom:-38px;background:#0d3a5c;animation:mrOla 6s ease-in-out infinite}
.mrWave2{bottom:-18px;background:rgba(28,141,214,.5);animation:mrOla 8s ease-in-out infinite reverse}
.mrWave3{bottom:2px;background:rgba(36,199,236,.22);animation:mrOla 10s ease-in-out infinite}
@keyframes mrOla{
  0%,100%{transform:translateX(0) scaleY(1)}
  50%{transform:translateX(38px) scaleY(1.12)}
}

/* ── Cifras ──
   El bloque se rehizo con el patrón de guía horizontal (ver «Cifras con guía»
   al final del archivo). Las reglas de tarjeta blanca que había aquí se
   quitaron: `.mrStats div` alcanzaba también a la guía y a cada cifra, les
   ponía fondo blanco y borde, y tapaba el diseño nuevo. */

/* ── Secciones ── */
.mrSection{padding:clamp(76px,9vw,130px) clamp(20px,6vw,90px);max-width:1180px;margin:0 auto}
.mrSection--alt{max-width:none;background:#fff}
.mrSection--alt>*{max-width:1180px;margin-left:auto;margin-right:auto}
.mrEyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--blue);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.mrEyebrow::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--green)}
.mrTitle{
  margin:12px 0 34px;font-family:var(--font-heading);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;
}
.mrTitle em{color:var(--blue)}
.mrLead{max-width:520px;color:var(--muted);font-size:.95rem}

/* ── Cards de servicios ── */
.mrCards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mrCard{
  padding:28px 24px;border-radius:var(--r-md);background:#fff;
  border:1px solid #dceaf4;box-shadow:0 16px 44px rgba(18,75,122,.08);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.mrCard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(18,75,122,.16)}
.mrCardIcon{
  display:grid;width:46px;height:46px;place-items:center;border-radius:13px;
  background:linear-gradient(135deg,rgba(36,199,236,.16),rgba(28,141,214,.16));color:var(--blue);
}
.mrCardIcon svg{width:24px;height:24px}
.mrCard h3{margin:16px 0 8px;font-size:1.02rem}
.mrCard p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.6}

/* ── Pasos ── */
.mrSteps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  margin:0;padding:0;list-style:none;counter-reset:paso;
}
.mrSteps li{
  position:relative;padding:24px 18px 20px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid #dceaf4;
}
.mrSteps li::after{
  content:"";position:absolute;top:38px;right:-16px;width:16px;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.mrSteps li:last-child::after{display:none}
.mrSteps b{font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:.8rem}
.mrSteps h3{margin:10px 0 7px;font-size:.95rem}
.mrSteps p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.55}

/* ── Tablero de rutas ── */
.mrRouteBoard{
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#07182a,#0b2b46);
  border:1px solid rgba(159,215,242,.14);box-shadow:0 30px 70px rgba(5,20,35,.35);
}
.mrRouteMap{display:block;width:100%;height:auto}
.mrDashSea{animation:mrMarcha 1.4s linear infinite}
.mrDashLand{animation:mrMarcha 1.1s linear infinite}
@keyframes mrMarcha{to{stroke-dashoffset:-24}}
.mrNode circle{fill:#24c7ec;stroke:#062033;stroke-width:3}
.mrNode--mid{fill:#9fd7f2}
.mrNode--bo{fill:#8bc53f}
.mrNode text{fill:#cfe6f4;font-family:var(--font-body);font-size:13px;font-weight:600;text-anchor:middle}
.mrRouteShip{animation:mrViaje 14s linear infinite}
@keyframes mrViaje{
  0%{transform:translate(80px,80px)}
  30%{transform:translate(360px,52px)}
  70%{transform:translate(600px,170px)}
  100%{transform:translate(700px,300px)}
}
.mrRouteFacts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(159,215,242,.12);
}
.mrRouteFacts div{padding:20px 18px;background:#0a2137}
.mrRouteFacts b{display:block;color:var(--cyan);font-size:.84rem}
.mrRouteFacts span{display:block;margin-top:6px;color:#9dbdd4;font-size:.73rem;line-height:1.5}

/* ── Navieras (marquee) ── */
.mrLines{overflow:hidden;padding:26px 0;background:var(--dark)}
.mrLinesTrack{
  display:flex;gap:64px;width:max-content;
  animation:mrMarquee 26s linear infinite;
}
.mrLinesTrack span{
  color:#5d7f97;font-size:1.15rem;font-weight:800;letter-spacing:.12em;white-space:nowrap;
}
@keyframes mrMarquee{to{transform:translateX(-50%)}}

/* ── Split (liquidacion / tracking) ── */
.mrSplit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,70px);align-items:center}
.mrSplit--reverse{grid-template-columns:.9fr 1.1fr}
.mrGuides{display:grid;gap:10px;margin-top:26px;max-width:420px}
.mrGuides a{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:14px;background:var(--paper);
  border:1px solid #dceaf4;font-size:.84rem;font-weight:700;
  transition:transform .25s var(--ease),border-color .25s;
}
.mrGuides a:hover{transform:translateX(4px);border-color:var(--cyan)}
.mrGuides i{font-style:normal}

.mrQuoteMock{
  padding:26px 24px;border-radius:var(--r-md);background:#0a2137;color:#eaf6fd;
  border:1px solid rgba(159,215,242,.16);box-shadow:0 30px 70px rgba(5,20,35,.3);
  font-size:.84rem;
}
.mrQuoteMock__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mrQuoteMock__head span{width:10px;height:10px;border-radius:50%;background:var(--green)}
.mrQuoteMock__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(159,215,242,.12);color:#b7d5e8}
.mrQuoteMock__row b{color:#eaf6fd;font-family:'JetBrains Mono',monospace;font-weight:600}
.mrQuoteMock__total{display:flex;justify-content:space-between;padding:14px 0 4px;font-weight:800}
.mrQuoteMock__total b{color:var(--cyan);font-family:'JetBrains Mono',monospace}
.mrQuoteMock em{display:block;margin-top:12px;color:#7fa2ba;font-size:.68rem;font-style:normal}

.mrTrackPromo{padding-top:0}
.mrTrackMock{
  border-radius:var(--r-md);overflow:hidden;background:#fff;
  border:1px solid #dceaf4;box-shadow:0 30px 70px rgba(18,75,122,.16);
}
.mrTrackMock__map{background:linear-gradient(160deg,#e9f5fc,#dceef8);padding:10px}
.mrTrackMock__panel{display:grid;gap:5px;padding:16px 20px;font-size:.8rem}
.mrTrackMock__panel b{font-family:'JetBrains Mono',monospace}
.mrTrackMock__panel .ok{color:#13865d;font-weight:700}
.mrTrackMock__panel span:last-child{color:var(--muted)}

/* ── Footer ── */
.mrFooter{padding:0 clamp(20px,6vw,90px) 60px;background:#fff}
.mrFooterCard{
  max-width:900px;margin:0 auto;padding:clamp(40px,6vw,64px);
  border-radius:var(--r-lg);text-align:center;color:#eaf6fd;
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(36,199,236,.28), transparent 60%),
    linear-gradient(160deg,#07182a,#0b2b46);
}
.mrFooterCard h2{margin:0 0 10px;font-family:var(--font-heading);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem)}
.mrFooterCard p{margin:0 auto;max-width:440px;color:#b7d5e8;font-size:.9rem}
.mrFooterCard .mrHeroActions{justify-content:center}
.mrFooterMeta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  margin-top:34px;color:var(--muted);font-size:.76rem;
}
.mrFooterMeta a{color:var(--blue);font-weight:700}

/* ── Revelado ──
   Gateado por html.mrJs: sin JavaScript todo queda visible. Ocultar por
   defecto y confiar en el observer dejaria la pagina vacia si el script
   no corre. */
html.mrJs [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.mrJs [data-reveal].is-in{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:980px){
  .mrCards{grid-template-columns:repeat(2,1fr)}
  .mrSteps{grid-template-columns:repeat(2,1fr)}
  .mrSteps li::after{display:none}
  .mrStats{grid-template-columns:repeat(2,1fr)}
  .mrSplit,.mrSplit--reverse{grid-template-columns:1fr}
  .mrSplit--reverse .mrTrackMock{order:2}
  .mrRouteFacts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .mrNavLinks{display:none}
  .mrCards{grid-template-columns:1fr}
  .mrSteps{grid-template-columns:1fr}
  .mrHero{padding-top:110px}
  .mrShip{width:120vw;transform:translateX(-46%)}
  @keyframes mrNavegar{
    0%,100%{transform:translateX(-46%) translateY(0) rotate(-.5deg)}
    50%{transform:translateX(-46%) translateY(-8px) rotate(.5deg)}
  }
  .mrRouteFacts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mrShip,.mrWave,.mrSmoke,.mrDashSea,.mrDashLand,.mrRouteShip,.mrLinesTrack{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ── Diferenciales + solicitud de cotización ─────────────────────────────────
   Dos columnas al estilo de las páginas de forwarder: los argumentos a la
   izquierda, numerados, y el formulario a la derecha en una tarjeta blanca
   elevada. En pantalla chica se apilan y el formulario queda primero, que es
   lo que la persona vino a hacer. */

.mrValue{background:linear-gradient(180deg,#f2f9fd 0%,#eaf4fb 100%)}

.mrSplit--quote{align-items:start;gap:64px}

/* La lista numerada, unida por una guía vertical. */
.mrValueList{
  counter-reset:mrv;
  list-style:none;
  margin:34px 0 0;
  padding:0;
}

.mrValueList li{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:18px;
  padding-bottom:30px;
}

.mrValueList li:last-child{padding-bottom:0}

/* La guía que enhebra los pasos: se corta en el último. */
.mrValueList li::before{
  content:"";
  position:absolute;
  left:25px;
  top:52px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg,#cfe6f4,rgba(207,230,244,0));
}

.mrValueList li:last-child::before{display:none}

.mrValueList b{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(36,199,236,.12),0 6px 16px rgba(11,44,77,.12);
  color:#0b2c4d;
  font-family:var(--font-head,inherit);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.02em;
}

.mrValueList h3{
  margin:8px 0 6px;
  color:#0b2c4d;
  font-size:1.16rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.mrValueList p{
  margin:0;
  color:#4a6478;
  font-size:.94rem;
  line-height:1.6;
}

/* ── El formulario ───────────────────────────────────────────────────────── */

.mrQuote{
  padding:32px 30px 26px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(11,44,77,.13),0 6px 18px rgba(11,44,77,.06);
}

.mrQuote__title{
  margin:0;
  color:#0b2c4d;
  font-size:1.72rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.mrQuote__sub{
  margin:8px 0 22px;
  color:#5c7488;
  font-size:.9rem;
}

.mrField{display:block;margin-bottom:14px}

.mrField>span{
  display:block;
  margin-bottom:6px;
  color:#4a6478;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
}

.mrField input,
.mrField select{
  width:100%;
  padding:12px 14px;
  border:1px solid #d8e6ef;
  border-radius:11px;
  background:#fbfdfe;
  color:#0b2c4d;
  /* 16px reales: por debajo de eso iOS hace zoom al enfocar el campo. */
  font-size:16px;
  font-family:inherit;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.mrField input::placeholder{color:#9db4c4}

.mrField input:focus,
.mrField select:focus{
  outline:0;
  border-color:#24c7ec;
  box-shadow:0 0 0 3px rgba(36,199,236,.16);
}

.mrField2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.mrQuote__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.mrQuote__go{flex:1 1 190px;justify-content:center;border:0;cursor:pointer;font-family:inherit}

.mrQuote__nota{
  margin:14px 0 0;
  color:#7c93a6;
  font-size:.76rem;
  line-height:1.5;
}

/* Aviso de campo faltante: se muestra solo cuando el script lo pide. */
.mrQuote__aviso{
  margin:12px 0 0;
  padding:10px 13px;
  border-radius:10px;
  background:#fff4e5;
  color:#8a5a12;
  font-size:.82rem;
}

@media(max-width:960px){
  .mrSplit--quote{gap:38px}
}

@media(max-width:640px){
  .mrQuote{padding:24px 18px 20px}
  .mrQuote__title{font-size:1.42rem}
  .mrField2{grid-template-columns:1fr}
  .mrValueList li{grid-template-columns:44px 1fr;gap:14px}
  .mrValueList b{width:44px;height:44px;font-size:.78rem}
  .mrValueList li::before{left:21px;top:46px}
}

/* ════════════════════════════════════════════════════════════════════════════
   CAPA DE ESTILO — patrón de forwarder internacional
   ----------------------------------------------------------------------------
   Sistema tomado de la referencia que pidió el usuario (oceanimportpty.com),
   medido en el sitio real con el navegador, no a ojo:

     · azul marino #001d67 como color corporativo de bloques sólidos
     · cian #34ccff para las llamadas a la acción
     · celeste #eaf7ff como fondo de las secciones claras
     · gris azulado #5b7d9a para el texto de cuerpo
     · botones de radio 6 px, 20/38 de relleno y transición .4s ease-out
     · revelado al hacer scroll con fadeInUp / fadeInLeft / fadeInRight
       escalonado por retardos de 0,2 · 0,4 · 0,6 s

   Lo que se replica es el PATRÓN, no el código: allá lo mueve WOW.js sobre
   jQuery y animate.css —tres dependencias— y aquí lo hace el
   IntersectionObserver que la página ya tenía, sin sumar un solo kilobyte.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#001d67;          /* azul corporativo de los bloques sólidos */
  --navy-soft:#0b2f8a;
  --sky:#eaf7ff;           /* fondo de sección claro */
  --steel:#5b7d9a;         /* texto de cuerpo */
  --steel-soft:#a7b6d3;
}

/* El cian de la marca se alinea con el de la referencia. */
:root{--cyan:#34ccff;--cyan-soft:#d4f2ff}

body{color:var(--text)}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.mrBtn{
  border-radius:6px;
  transition:background .4s ease-out,color .4s ease-out,transform .4s ease-out,box-shadow .4s ease-out;
}

.mrBtn--primary{
  padding:17px 34px;
  background:var(--cyan);
  color:#04283a;
  font-weight:700;
  letter-spacing:.01em;
}

.mrBtn--primary:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-2px);
}

.mrBtn--ghost{
  padding:17px 30px;
  border:1px solid rgba(91,125,154,.34);
}

.mrBtn--ghost:hover{border-color:var(--cyan);color:var(--navy)}

/* ── Bloque de servicios en azul marino ──────────────────────────────────────
   Es el contraste que ordena la página: la referencia pone los servicios
   sobre el color corporativo y el resto sobre blanco o celeste. Sin ese
   bloque oscuro las secciones claras se suceden sin respiro. */

#servicios{
  background:
    radial-gradient(120% 90% at 82% 0%,rgba(52,204,255,.14),transparent 58%),
    var(--navy);
  color:#fff;
}

#servicios .mrEyebrow{color:var(--cyan)}
#servicios .mrTitle{color:#fff}
#servicios .mrTitle em{color:var(--cyan)}

#servicios .mrCard{
  border:1px solid rgba(167,182,211,.18);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  box-shadow:none;
  /* La transición se declara ENTERA, con las cuatro propiedades, porque este
     selector es más específico que el del revelado y con un shorthand parcial
     lo pisaba: las tarjetas aparecían de golpe en vez de subir con desvanecido.
     Mientras entra, `transform` va lento; ya dentro pasa a la velocidad de un
     hover (ver la regla `.is-in` de abajo). */
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease),
    background .4s ease-out,
    border-color .4s ease-out;
}

html.mrJs #servicios .mrCard.is-in{
  transition:
    opacity .7s var(--ease),
    transform .32s ease-out,
    background .4s ease-out,
    border-color .4s ease-out;
}

#servicios .mrCard:hover{
  transform:translateY(-6px);
  border-color:rgba(52,204,255,.45);
  background:rgba(255,255,255,.08);
}

#servicios .mrCard h3{color:#fff}
#servicios .mrCard p{color:var(--steel-soft)}

#servicios .mrCardIcon{
  color:var(--cyan);
  border-radius:10px;
  background:rgba(52,204,255,.12);
  box-shadow:inset 0 0 0 1px rgba(52,204,255,.24);
}

/* ── Secciones claras ────────────────────────────────────────────────────── */

.mrSection--alt,.mrValue{background:var(--sky)}
.mrSection p,.mrLead{color:var(--steel)}

/* ── Revelado al hacer scroll ────────────────────────────────────────────────
   Tres direcciones y retardos escalonados, como la referencia. El desplazado
   inicial es corto —22 px— a propósito: un recorrido largo llama la atención
   sobre la animación en vez de sobre el contenido, y en una página de precios
   eso estorba. */

html.mrJs [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}

html.mrJs [data-reveal="left"]{transform:translateX(-26px)}
html.mrJs [data-reveal="right"]{transform:translateX(26px)}
html.mrJs [data-reveal].is-in{opacity:1;transform:none}

/* Los retardos los escribe el HTML con data-delay; el CSS solo los aplica.
   Van con !important a propósito: son una utilidad de escalonado que tiene que
   ganar por encima de cualquier bloque que declare su propia `transition`
   —el shorthand reinicia el retardo a cero— y esos bloques suelen ser más
   específicos que este selector. */
html.mrJs [data-delay="1"].is-in{transition-delay:.12s!important}
html.mrJs [data-delay="2"].is-in{transition-delay:.24s!important}
html.mrJs [data-delay="3"].is-in{transition-delay:.36s!important}
html.mrJs [data-delay="4"].is-in{transition-delay:.48s!important}

@media (prefers-reduced-motion: reduce){
  html.mrJs [data-reveal],
  html.mrJs [data-reveal].is-in{
    opacity:1;transform:none;transition:none;transition-delay:0s;
  }
}

/* ── Cifras con guía ─────────────────────────────────────────────────────────
   Cuatro iconos de línea sobre una guía horizontal con nodos, y la cifra
   grande debajo. La guía es lo que hace el trabajo: sin ella son cuatro datos
   sueltos; con ella se leen como una cadena, que es de lo que va el negocio.

   Va sobre una foto velada en azul, como la referencia: el velo tiene que ser
   fuerte —el texto encima es blanco y fino— pero dejar ver que hay un almacén
   detrás. */
.mrStats{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:64px 5vw 58px;
  background:
    linear-gradient(180deg,rgba(0,29,103,.93),rgba(0,29,103,.88)),
    url('assets/fondo3.webp') center/cover no-repeat;
  color:#fff;
  text-align:center;
  overflow:hidden;
}

/* La guía. Se dibuja detrás de los iconos, a su altura. */
.mrStatsRail{
  position:absolute;
  left:calc(5vw + 8%);
  right:calc(5vw + 8%);
  top:calc(64px + 30px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 12%,rgba(255,255,255,.34) 88%,transparent);
  pointer-events:none;
}

.mrStat{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}

.mrStatIco{
  display:grid;
  place-items:center;
  width:62px;height:62px;
  color:var(--cyan);
}

.mrStatIco svg{width:46px;height:46px}

/* El nodo de la guía: el punto que ata cada icono a la línea. */
.mrStat::after{
  content:"";
  position:absolute;
  top:66px;
  left:50%;
  width:7px;height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(52,204,255,.18);
}

.mrStat b{
  margin-top:22px;
  font-family:var(--font-body);
  font-size:clamp(2.1rem,4vw,3.1rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:#fff;
}

.mrStatTxt{
  color:rgba(220,232,245,.82);
  font-size:.85rem;
  line-height:1.5;
}

@media(max-width:760px){
  .mrStats{grid-template-columns:repeat(2,1fr);gap:34px 16px;padding:44px 6vw 40px}
  /* Con dos columnas la guía uniría filas distintas y solo confunde. */
  .mrStatsRail{display:none}
  .mrStat::after{display:none}
  .mrStatIco{width:52px;height:52px}
  .mrStatIco svg{width:38px;height:38px}
  .mrStat b{margin-top:12px}
}

/* ════════════════════════════════════════════════════════════════════════════
   AJUSTE FINO CONTRA LA REFERENCIA
   ----------------------------------------------------------------------------
   Los tokens de arriba acertaban la paleta pero no la FORMA, y la forma es la
   mitad del parecido. Medido en el sitio real (ver docs/referencia-maritimo-
   tokens.md), los cuatro desajustes eran:

     1. RADIOS. La referencia usa 3 y 6 px; aquí había 22 y 32. Una página
        angular contra una redondeada se leen como dos marcas distintas por
        más que compartan los colores. Este es el cambio que más se nota.
     2. SOMBRAS. Allá son cortas y DE COLOR (0 8px 16px con el tinte del
        elemento); aquí eran grises y muy difusas, que envejece el aspecto.
     3. TITULARES. La referencia no tiene una sola serif: son sans de 100 px,
        peso 700 y tracking −3 px. Aquí los `<em>` iban en serif itálica, que
        es justo lo contrario.
     4. RESPIRO. ~100 px de aire arriba de cada sección.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Radios ───────────────────────────────────────────────────────────── */

:root{--r-md:6px;--r-lg:6px}

.mrCard,.mrQuote,.mrQuoteMock,.mrTrackMock,.mrFooterCard,
.mrSteps li,.mrValueList b,.mrGuides a,.mrField input,.mrField select{
  border-radius:6px;
}

.mrBtn,.mrNavCta,.mrQuote__go{border-radius:6px}

/* El pin del kicker y los círculos siguen redondos: son la excepción que la
   referencia también hace (radios de 50 % solo en piezas circulares). */
.mrValueList b{border-radius:50%}

/* ── 2. Sombras cortas y de color ────────────────────────────────────────── */

.mrQuote{box-shadow:0 8px 16px rgba(197,217,255,.35)}
.mrCard{box-shadow:0 8px 16px rgba(197,217,255,.22)}
.mrBtn--primary{box-shadow:0 8px 16px rgba(52,204,255,.4)}
.mrBtn--primary:hover{box-shadow:0 8px 16px rgba(0,29,103,.34)}
.mrValueList b{box-shadow:0 8px 16px rgba(197,217,255,.4)}
.mrFooterCard{box-shadow:0 8px 16px rgba(197,217,255,.3)}

/* ── 3. Titulares sans, pesados y apretados ──────────────────────────────── */

.mrTitle,.mrHero h1,.mrQuote__title,.mrFooterCard h2,.mrValueList h3,.mrCard h3{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:-.03em;
}

/* La referencia pone 100 px porque su titular son DOS palabras. El de aquí es
   una frase de ocho: al mismo cuerpo se come la pantalla entera y empuja los
   botones fuera del primer golpe de vista. Se conserva el carácter —peso 800 y
   tracking cerrado— con el cuerpo que la frase admite. */
.mrHero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08;max-width:15ch}
.mrTitle{font-size:clamp(1.8rem,3.3vw,2.7rem);line-height:1.12}

/* El acento deja de ser una serif itálica y pasa a ser color, como allá. */
.mrTitle em,.mrHero h1 em,.mrFooterCard h2 em{
  font-family:inherit;
  font-style:normal;
  font-weight:800;
  color:var(--blue);
}

#servicios .mrTitle em{color:var(--cyan)}
.mrHero h1 em{color:var(--cyan)}

/* ── 4. Respiro de sección ───────────────────────────────────────────────── */

.mrSection{padding-top:100px;padding-bottom:92px}

@media(max-width:760px){
  .mrSection{padding-top:60px;padding-bottom:56px}
  .mrHero h1{font-size:clamp(2rem,8.4vw,2.9rem)}
}

/* ── El bloque de color va a sangre ──────────────────────────────────────────
   `.mrSection` tiene max-width 1180 para que el TEXTO no se estire, y eso
   está bien; pero al pintarle un fondo, el color se corta a esos 1180 y deja
   dos franjas blancas a los lados. En la referencia los bloques de color
   ocupan el ancho completo de la ventana y lo que se limita es el contenido.

   Se separa: la sección ocupa todo y su contenido lleva el ancho máximo. */
#servicios{
  max-width:none;
  margin-inline:0;
  padding-inline:0;
}

#servicios > *{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,86px);
}

/* La rejilla de tarjetas necesita el padding en el propio contenedor, no
   heredado, o las tarjetas de los extremos quedan pegadas al borde. */
#servicios .mrCards{box-sizing:content-box;padding-inline:clamp(20px,5vw,86px)}

/* ── Tira de servicios ───────────────────────────────────────────────────────
   La estructura de la referencia: fotos PEGADAS entre sí ocupando la mitad
   izquierda de la sección, y el texto al lado derecho. Las fotos salen por el
   borde izquierdo de la pantalla — no hay margen ni borde ni radio.

   El detalle que lo hace funcionar: el rótulo se apoya sobre la propia
   imagen, abajo a la izquierda, sobre un degradado que baja a negro. Sin ese
   degradado el texto blanco desaparece en cuanto la foto tiene un cielo. */

/* El selector lleva el id a propósito: `#servicios > *` centra y limita a
   1180 px a todos los hijos, y con un id de por medio una clase sola nunca
   iba a ganar — la tira quedaba a 195 px del borde en vez de pegada a él. */
#servicios > .mrSvcTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:0;
  max-width:none;
  margin:0 0 76px;
  padding:0;
}

.mrSvcStrip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  min-height:430px;
}

.mrSvcTile{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:7px;
  padding:22px 18px 24px;
  overflow:hidden;
  color:#fff;
  /* La foto va en una variable para que el HTML solo declare la ruta. */
  background:var(--foto) center/cover no-repeat;
  isolation:isolate;
}

/* Degradado que sostiene el rótulo. Va como pseudo-elemento y no como capa en
   el `background` para poder animarlo en hover sin recargar la imagen. */
.mrSvcTile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,29,103,.16) 0%,rgba(0,17,60,.5) 52%,rgba(0,12,42,.88) 100%);
  transition:background .45s ease-out;
}

.mrSvcTile:hover::before{
  background:linear-gradient(180deg,rgba(0,29,103,.3) 0%,rgba(0,20,70,.62) 46%,rgba(0,12,42,.92) 100%);
}

.mrSvcIco{color:var(--cyan)}
.mrSvcIco svg{width:34px;height:34px}

.mrSvcTile b{
  font-family:var(--font-body);
  font-size:1.32rem;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.15;
}

.mrSvcMas{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--cyan);
  font-size:.85rem;
  font-weight:700;
}

.mrSvcMas i{font-style:normal;transition:transform .35s ease-out;display:inline-block}
.mrSvcTile:hover .mrSvcMas i{transform:translateX(5px)}

/* El texto de la sección, centrado en vertical contra la tira. */
.mrSvcCopy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px clamp(20px,5vw,86px);
}

.mrSvcCopy .mrTitle{margin-top:10px}

.mrSvcCopy p{
  margin:18px 0 0;
  max-width:46ch;
  color:var(--steel-soft);
  font-size:1rem;
  line-height:1.65;
}

@media(max-width:980px){
  /* Apiladas: primero el texto, que es el que explica de qué va la sección. */
  .mrSvcTop{grid-template-columns:1fr;margin-bottom:48px}
  .mrSvcCopy{order:-1;padding:0 clamp(20px,5vw,86px) 34px}
  .mrSvcStrip{min-height:300px}
}

@media(max-width:640px){
  /* Con tres columnas de 100 px no entra ni el rótulo: pasa a fila con
     desplazamiento lateral, que conserva el carácter de tira. */
  .mrSvcStrip{
    grid-template-columns:repeat(3,72vw);
    min-height:260px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .mrSvcTile{scroll-snap-align:start}
  .mrSvcTile b{font-size:1.12rem}
}

/* La referencia cambia de una cabecera transparente a una superficie blanca
   cuando comienza el contenido. Se mantiene la navegación flotante existente,
   pero el estado deja claro que el hero terminó sin alterar su estructura. */
.mrNav{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,top .35s ease;
}
.mrNav.is-scrolled{
  top:9px;
  background:rgba(255,255,255,.96);
  border-color:rgba(0,29,103,.1);
  box-shadow:0 8px 24px rgba(0,29,103,.14);
}
.mrNav.is-scrolled .mrNavLinks a{color:var(--navy)}
.mrNav.is-scrolled .mrNavLinks a:hover{color:#087ca4}
.mrNav.is-scrolled .mrNavCta{box-shadow:0 8px 16px rgba(52,204,255,.3)}

@media(prefers-reduced-motion:reduce){
  .mrNav{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   AJUSTE VISUAL MEDIDO EN LA REFERENCIA · cabecera, hero e introducción
   ════════════════════════════════════════════════════════════════════════════ */
.mrTopbar{
  position:fixed;z-index:52;inset:0 0 auto;
  display:flex;justify-content:flex-end;gap:28px;
  height:32px;padding:7px max(24px,calc((100vw - 1180px)/2));
  background:rgba(0,20,71,.9);color:#c9d8ed;
  font-size:.66rem;font-weight:600;
}
.mrNav{
  top:32px;left:0;width:100%;transform:none;
  justify-content:flex-start;gap:34px;
  min-height:76px;padding:14px max(24px,calc((100vw - 1180px)/2));
  border:0;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;
  background:rgba(0,20,71,.26);box-shadow:none;
}
.mrBrand{margin-right:auto}
.mrBrand img{height:42px}
.mrNavLinks{gap:28px}
.mrNavLinks a{font-size:.77rem;color:#fff}
.mrNavCta{padding:13px 20px;border-radius:3px}
.mrMenu{display:none;width:42px;height:42px;padding:10px;border:1px solid rgba(255,255,255,.25);border-radius:3px;background:transparent}
.mrMenu span{display:block;height:2px;margin:5px 0;background:currentColor;transition:transform .25s,opacity .25s}
.mrNav.is-scrolled{top:0;min-height:66px;padding-top:9px;padding-bottom:9px}
.mrNav.is-scrolled + .mrHero{margin-top:0}
.mrNav.is-scrolled .mrBrand img{filter:none}
.mrNav.is-scrolled .mrBrand img{content:url('assets/logo-elemental.webp')}
.mrNav.is-scrolled .mrMenu{color:var(--navy);border-color:rgba(0,29,103,.2)}

.mrHero{
  min-height:830px;
  align-content:center;
  padding:150px max(24px,calc((100vw - 1180px)/2)) 70px;
  background:
    linear-gradient(90deg,rgba(0,20,71,.9) 0%,rgba(0,29,103,.72) 42%,rgba(0,29,103,.2) 76%),
    linear-gradient(0deg,rgba(0,20,71,.32),rgba(0,20,71,.32)),
    url('assets/fondo3.webp') center/cover no-repeat;
}
.mrHeroCopy{max-width:680px}
.mrHero h1{font-size:clamp(3.3rem,5.3vw,4.75rem);line-height:1;max-width:13ch;letter-spacing:-.05em}
.mrHero p{font-size:1rem;max-width:570px}
.mrSea{display:none}

.mrIntro{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:0;
  max-width:1180px;margin:0 auto;padding:120px 0;
}
.mrIntroPhoto{min-height:520px;background:url('assets/fondo3.webp') 52% center/cover no-repeat}
.mrIntroCopy{padding:54px 0 54px 70px}
.mrIntroCopy .mrTitle{margin-bottom:24px;color:var(--navy);font-size:clamp(2.3rem,4vw,3.55rem)}
.mrIntroCopy p{color:var(--steel);font-size:.94rem;line-height:1.7}
.mrIntroCopy strong{display:block;margin-top:22px;color:var(--navy);font-size:.86rem}

/* La referencia coloca el bloque de servicios antes de las cifras. */
#servicios{padding-top:0;padding-bottom:0}
#servicios > .mrSvcTop{margin-bottom:0}
#servicios .mrCards{padding-top:76px;padding-bottom:82px}

@media(max-width:980px){
  .mrIntro{grid-template-columns:1fr;padding:72px 20px}
  .mrIntroPhoto{min-height:400px}
  .mrIntroCopy{padding:38px 0 0}
  #servicios > .mrSvcTop{grid-template-columns:1fr}
  #servicios .mrSvcCopy{order:-1;padding:64px clamp(20px,5vw,86px) 38px}
}

@media(max-width:640px){
  .mrTopbar{display:none}
  .mrNav,.mrNav.is-scrolled{
    top:0;left:0;width:100%;min-height:70px;padding:10px 16px;
    background:rgba(0,20,71,.92);border-bottom-color:rgba(255,255,255,.12);
  }
  .mrNav.is-scrolled{background:rgba(255,255,255,.97)}
  .mrBrand img{height:36px}
  .mrNavCta{display:none}
  .mrMenu{display:block;color:#fff}
  .mrNavLinks{
    position:absolute;top:100%;left:0;right:0;
    display:grid;gap:0;padding:8px 16px 16px;
    background:rgba(255,255,255,.98);box-shadow:0 16px 30px rgba(0,29,103,.18);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s ease;
  }
  .mrNavLinks a{padding:12px 8px;border-bottom:1px solid #e4eef5;color:var(--navy)}
  .mrNav.menu-open .mrNavLinks{opacity:1;visibility:visible;transform:none}
  .mrNav.menu-open .mrMenu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mrNav.menu-open .mrMenu span:nth-child(2){opacity:0}
  .mrNav.menu-open .mrMenu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mrHero{
    min-height:650px;padding:96px 20px 40px;align-content:center;
    background:
      linear-gradient(90deg,rgba(0,20,71,.9),rgba(0,29,103,.55)),
      url('assets/fondo3.webp') 58% center/cover no-repeat;
  }
  .mrHero h1{font-size:38px;line-height:1.04;max-width:10ch}
  .mrHero p{font-size:.88rem;line-height:1.55}
  .mrHeroMeta{display:none}
  .mrHeroActions{margin-top:20px}
  .mrHero .mrBtn{padding:13px 18px}
  .mrIntro{padding:64px 20px}
  .mrIntroPhoto{min-height:310px;margin-inline:-20px}
  .mrIntroCopy .mrTitle{font-size:32px}
  #servicios .mrSvcCopy{padding:54px 20px 30px}
  #servicios .mrSvcStrip{grid-template-columns:repeat(3,86vw);min-height:390px}
  #servicios .mrCards{padding:46px 20px 54px}
}

/* ════════════════════════════════════════════════════════════════════════════
   PALETA ELEMENTAL · tomada del isotipo turquesa, verde, naranja y magenta
   Los colores se asignan por función para conservar jerarquía y contraste.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#08263d;
  --navy-soft:#0d3f5c;
  --sky:#edf8fa;
  --steel:#52748a;
  --steel-soft:#b7cbd4;
  --cyan:#42c7d4;
  --cyan-soft:#d9f5f6;
  --blue:#1698bc;
  --green:#79bd43;
  --orange:#f47b2a;
  --coral:#d94b7d;
  --paper:#f5fbfc;
  --text:#12364a;
  --muted:#5d7a8b;
}

body{background:#f5fbfc}
.mrTopbar{background:#061c30}
.mrNav{background:rgba(6,28,48,.58)}
.mrBrand{
  display:flex;align-items:center;padding:7px 11px;border-radius:3px;
  background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(2,20,34,.15);
}
.mrBrand img{width:42px;height:42px;object-fit:contain}
.mrBrandWords{display:grid;margin-left:7px;line-height:1}
.mrBrandWords strong{color:var(--cyan);font-family:var(--font-heading);font-size:1.42rem;font-style:italic;font-weight:400;letter-spacing:-.02em}
.mrBrandWords small{margin-top:3px;color:var(--coral);font-size:.47rem;font-weight:800;letter-spacing:.075em}
.mrNav.is-scrolled .mrBrand img{content:normal}
.mrNavCta{background:linear-gradient(120deg,var(--cyan),#6ed5cb);color:#062d38}
.mrNavCta:hover{box-shadow:0 8px 24px rgba(66,199,212,.36)}

.mrHero{
  background:
    linear-gradient(90deg,rgba(6,28,48,.93) 0%,rgba(8,38,61,.78) 44%,rgba(8,38,61,.2) 78%),
    linear-gradient(0deg,rgba(6,28,48,.28),rgba(6,28,48,.28)),
    url('assets/fondo3.webp') center/cover no-repeat;
}
.mrKicker{color:#7ee2e8}
.mrKicker i,.mrEyebrow::before{background:var(--green)}
.mrHero h1 em{
  color:var(--cyan);
  background:linear-gradient(100deg,var(--cyan) 0%,#6ed5cb 48%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mrBtn--primary{
  background:linear-gradient(110deg,var(--orange),#ed6961 55%,var(--coral));
  color:#fff;box-shadow:0 8px 18px rgba(217,75,125,.27);
}
.mrBtn--primary:hover{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(8,38,61,.3)}
.mrHero .mrBtn--primary{background:linear-gradient(110deg,var(--cyan),#63d3c8 60%,var(--green));color:#062d38}

.mrEyebrow{color:var(--blue)}
.mrTitle{color:var(--navy)}
.mrTitle em,.mrIntroCopy .mrTitle em{color:var(--cyan)}
.mrIntro{background:#f5fbfc}
.mrIntroCopy strong{color:var(--navy)}

#servicios{
  background:
    radial-gradient(90% 100% at 92% 0%,rgba(66,199,212,.14),transparent 58%),
    radial-gradient(70% 80% at 8% 100%,rgba(121,189,67,.08),transparent 60%),
    var(--navy);
}
#servicios .mrTitle em{color:var(--cyan)}
.mrSvcTile:nth-child(1) .mrSvcIco{color:var(--cyan)}
.mrSvcTile:nth-child(2) .mrSvcIco{color:var(--orange)}
.mrSvcTile:nth-child(3) .mrSvcIco{color:var(--green)}
.mrSvcTile:nth-child(1) .mrSvcMas{color:var(--cyan)}
.mrSvcTile:nth-child(2) .mrSvcMas{color:#ffad74}
.mrSvcTile:nth-child(3) .mrSvcMas{color:#a8dd72}

/* La información detallada se conserva, pero se presenta como el carrusel de
   servicios de la referencia en vez de alargar la página con tres filas. */
#servicios .mrCards{
  grid-template-columns:repeat(9,minmax(280px,320px));
  justify-content:start;gap:16px;max-width:none;
  padding:68px max(20px,calc((100vw - 1180px)/2)) 76px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(255,255,255,.08);
}
#servicios .mrCard{min-height:238px;scroll-snap-align:center;border-top:3px solid var(--cyan)}
#servicios .mrCard:nth-child(3n+2){border-top-color:var(--orange)}
#servicios .mrCard:nth-child(3n){border-top-color:var(--green)}
#servicios .mrCard:nth-child(3n+2) .mrCardIcon{color:var(--orange);background:rgba(244,123,42,.12);box-shadow:inset 0 0 0 1px rgba(244,123,42,.25)}
#servicios .mrCard:nth-child(3n) .mrCardIcon{color:var(--green);background:rgba(121,189,67,.12);box-shadow:inset 0 0 0 1px rgba(121,189,67,.25)}

.mrStats{
  background:
    linear-gradient(180deg,rgba(8,38,61,.94),rgba(13,63,92,.91)),
    url('assets/fondo3.webp') center/cover no-repeat;
}
.mrStat:nth-of-type(2) .mrStatIco{color:var(--cyan)}
.mrStat:nth-of-type(3) .mrStatIco{color:var(--orange)}
.mrStat:nth-of-type(4) .mrStatIco{color:var(--green)}
.mrStat:nth-of-type(5) .mrStatIco{color:#e76b9b}
.mrStat:nth-of-type(2)::after{background-color:var(--cyan)}
.mrStat:nth-of-type(3)::after{background-color:var(--orange)}
.mrStat:nth-of-type(4)::after{background-color:var(--green)}
.mrStat:nth-of-type(5)::after{background-color:#e76b9b}

.mrSection--alt,.mrValue{background:var(--sky)}
.mrSteps b{color:var(--blue)}
.mrSteps li:nth-child(2) b,.mrSteps li:nth-child(5) b{color:var(--orange)}
.mrSteps li:nth-child(3) b{color:var(--green)}
.mrSteps li:nth-child(4) b{color:var(--coral)}
.mrRouteBoard,.mrQuoteMock,.mrFooterCard{background:linear-gradient(150deg,#061c30,var(--navy-soft))}
.mrGuides a:hover{border-color:var(--green)}
.mrQuote{border-top:4px solid var(--cyan)}
.mrField input:focus,.mrField select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(66,199,212,.17)}
.mrTrackMock__panel .ok{color:#5b9f28}
.mrFooterMeta a{color:var(--blue)}

@media(max-width:640px){
  .mrNav,.mrNav.is-scrolled{background:rgba(6,28,48,.96)}
  .mrNav.is-scrolled .mrMenu{color:#fff;border-color:rgba(255,255,255,.25)}
  .mrBrand{padding:6px 8px}
  .mrBrand img{width:34px;height:34px}
  .mrBrandWords strong{font-size:1.12rem}
  .mrBrandWords small{font-size:.39rem}
  .mrHero{
    background:
      linear-gradient(90deg,rgba(6,28,48,.92),rgba(8,38,61,.58)),
      url('assets/fondo3.webp') 58% center/cover no-repeat;
  }
  #servicios .mrCards{
    grid-template-columns:repeat(9,82vw);gap:14px;
    padding:44px 20px 54px;
  }
  #servicios .mrCard{min-height:226px}
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVIDAD — el mismo par de reglas que protege la portada
   ----------------------------------------------------------------------------
   Esta página está mucho mejor de origen que la portada: a 360 px se le escapan
   6 px por `.mrIntroCopy` y nada más. Pero seis píxeles bastan para que el dedo
   arrastre la página de lado, y eso se lee como "está mal hecha".

   `clip` en vez de `hidden`: no crea contenedor de scroll, así que no rompe
   `position:sticky`. Ver el bloque equivalente en landing-brand-sides.css.
   ════════════════════════════════════════════════════════════════════════════ */
html{overflow-x:clip}
body{overflow-x:clip}

/* Safari en iPhone amplía la página al enfocar un campo de menos de 16 px y no
   siempre deshace el zoom al salir. El formulario de cotización de abajo es
   justo donde más duele. */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
}

/* ════════════════════════════════════════════════════════════════════════════
   REORDEN — el formulario subió al tercer lugar y los diferenciales quedaron
   solos en su sección
   ----------------------------------------------------------------------------
   La lista 01-04 ya no comparte fila con el formulario. Si se quedara con el
   reparto de `.mrSplit` (1.1fr para la izquierda) el título tendría más aire
   que el contenido, así que se invierte: manda la lista.

   OJO con la especificidad: `#diferentes .mrSplit` gana por el id, de modo que
   la media query genérica de 980 px (`.mrSplit{grid-template-columns:1fr}`) NO
   lo colapsa en móvil. Hay que repetir el colapso con el mismo id.
   ════════════════════════════════════════════════════════════════════════════ */
#diferentes .mrSplit{grid-template-columns:.85fr 1.15fr}

@media (max-width:980px){
  #diferentes .mrSplit{grid-template-columns:1fr}
}

/* El formulario, ya sin la lista al lado, queda como columna alta (≈850 px)
   frente a un texto corto: si el texto se ancla arriba deja medio metro de
   vacío debajo. Se centra contra la tarjeta y se le da algo más de ancho al
   formulario, que es lo que la persona vino a llenar. */
#cotizar .mrSplit{grid-template-columns:1fr .95fr;align-items:center}

@media (max-width:980px){
  #cotizar .mrSplit{grid-template-columns:1fr;align-items:start}
}

/* ════════════════════════════════════════════════════════════════════════════
   PIE EN COLUMNAS
   ----------------------------------------------------------------------------
   La tarjeta de cierre («¿Tienes una importación en mente?») se queda igual.
   Debajo, lo que antes era una sola línea de datos se reparte en cuatro
   columnas: marca, servicios, herramientas y contacto. La línea legal queda al
   final, con la política de privacidad y la vuelta a la portada.
   ════════════════════════════════════════════════════════════════════════════ */
.mrFooterGrid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:36px clamp(24px,4vw,56px);
  max-width:1180px;
  margin:64px auto 0;
  padding-top:48px;
  border-top:1px solid #dcebf2;
}

.mrFooterCol{display:grid;gap:9px;align-content:start;font-size:.82rem}
.mrFooterCol h4{
  margin:0 0 6px;
  color:var(--navy);
  font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.mrFooterCol a{color:var(--steel);font-weight:500;transition:color .2s var(--ease)}
.mrFooterCol a:hover{color:var(--blue)}
.mrFooterCol span,.mrFooterCol address{color:var(--steel);font-style:normal;line-height:1.55}

.mrFooterMarca{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.mrFooterMarca img{width:40px;height:40px;border-radius:10px}
.mrFooterMarca span{display:grid;line-height:1.05}
.mrFooterMarca strong{color:var(--navy);font-size:1.02rem;letter-spacing:-.02em}
.mrFooterMarca small{color:var(--steel);font-size:.58rem;letter-spacing:.14em}
.mrFooterCol--marca p{margin:0;max-width:300px;color:var(--steel);font-size:.82rem;line-height:1.6}

/* La línea legal ya existía; solo cambia el reparto: legal a la izquierda,
   enlaces a la derecha. */
.mrFooterMeta{
  justify-content:space-between;
  max-width:1180px;
  margin:34px auto 0;
  padding-top:22px;
  border-top:1px solid #dcebf2;
}

@media (max-width:980px){
  .mrFooterGrid{grid-template-columns:1fr 1fr}
  .mrFooterCol--marca{grid-column:1/-1}
}
@media (max-width:640px){
  .mrFooterGrid{grid-template-columns:1fr;gap:30px;margin-top:48px;padding-top:36px}
  .mrFooterMeta{justify-content:flex-start}
}

/* ════════════════════════════════════════════════════════════════════════════
   PIE OSCURO
   ----------------------------------------------------------------------------
   Servicios ya es oscuro y el pie venia en blanco justo despues: el corte se
   leia como si la pagina terminara antes de tiempo. Ahora el pie cierra en el
   mismo azul de la barra superior, y la tarjeta de contacto lleva borde para
   no fundirse con el fondo.
   ════════════════════════════════════════════════════════════════════════════ */
/* PIE OSCURO */
.mrFooter{padding-top:clamp(56px,7vw,96px);background:#061c30;color:#cfe0e8}
.mrFooterCard{border:1px solid rgba(66,199,212,.28);box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.mrFooterGrid{border-top-color:rgba(255,255,255,.08)}
.mrFooterCol h4{color:#fff}
.mrFooterCol a,.mrFooterCol span,.mrFooterCol address,.mrFooterCol--marca p{color:#b7cbd4}
.mrFooterCol a:hover{color:var(--cyan)}
.mrFooterMarca strong{color:#fff}
.mrFooterMarca small{color:#8fb0bf}
.mrFooterMarca img{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.mrFooterMeta{border-top-color:rgba(255,255,255,.08);color:#7f98a8}
.mrFooterMeta a{color:var(--cyan)}

/* FORMULARIO PULIDO */
#cotizar{background:linear-gradient(180deg,#eef8fb 0%,#e6f3f9 100%)}
#cotizar .mrQuote{border-top:0;box-shadow:0 30px 70px rgba(11,44,77,.16),0 0 0 1px rgba(66,199,212,.18)}
#cotizar .mrQuote::before{content:"";display:block;height:5px;margin:-32px -30px 24px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--green))}
#cotizar .mrField input:hover,#cotizar .mrField select:hover{border-color:rgba(66,199,212,.6)}
#cotizar .mrQuote__go{box-shadow:0 12px 28px rgba(22,152,188,.3)}
@media (max-width:640px){#cotizar .mrQuote::before{margin:-24px -18px 18px}}