#cmr{
  --blue:#12448e; --blue-d:#0d3163; --blue-dd:#08213f;
  --yellow:#fcb900; --yellow-s:#ffd766;
  --paper:#f4f6fa; --ink:#12315c;
  --txt:#33507d;
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; position:relative; overflow-x:clip;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600;700&display=swap');
#cmr *{box-sizing:border-box; margin:0; padding:0}
/* Reset defensivo: evita que el tema de WordPress pise estos elementos */
#cmr p{margin:0; padding:0; text-transform:none; letter-spacing:normal}
#cmr h1,#cmr h2,#cmr h3{margin:0; padding:0; text-transform:none; letter-spacing:inherit}
#cmr a{text-decoration:none; box-shadow:none}
#cmr ol,#cmr ul,#cmr li{list-style:none; margin:0; padding:0}
#cmr ol{padding:0 !important}
#cmr span{letter-spacing:inherit}

.cmr-track{height:720vh; position:relative}
.cmr-stick{position:sticky; top:0; height:100svh; overflow:hidden}

.cmr-bg{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper) calc(100% - var(--dark,0)*100%), var(--blue)) 0%,
    color-mix(in srgb, #e9edf4 calc(100% - var(--dark,0)*100%), var(--blue)) 100%);}

.cmr-scene{position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,6vw,90px);
  /* Visible por defecto: en reposo (scroll=0) el globo siempre está a la vista,
     así que ese debe ser el estado inicial en CSS. Si se deja en opacity:0 a la
     espera de que hero.js la corrija, cualquier demora en el script (fuentes,
     otros scripts de la página) se ve como un parpadeo/orden equivocado al
     cargar. El fade solo debe animar los cambios que pasan DESPUÉS de esto,
     mientras se hace scroll. */
  opacity:1; pointer-events:auto; transition:opacity .45s ease;}

/* ===== GLOBO ===== */
.cmr-scene--globe{gap:clamp(36px,7vw,110px); flex-wrap:wrap}
.cmr-globe{position:relative; width:min(56vw,640px); aspect-ratio:1853/2012; flex:0 0 auto;
  filter:drop-shadow(0 40px 90px rgba(13,49,99,.3));}
.cmr-globe__svg{-webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);mask-image:linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; overflow:visible}
.cmr-globe__overlay{position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible}
.cmr-route{stroke:var(--yellow); stroke-width:11; stroke-dasharray:22 26; stroke-linecap:round;
  animation:cmr-dash 3s linear infinite;}
@keyframes cmr-dash{to{stroke-dashoffset:-96}}
.cmr-dot{fill:var(--yellow); stroke:#fff; stroke-width:7}
.cmr-halo{fill:var(--yellow); opacity:.5; transform-origin:center; transform-box:fill-box;
  animation:cmr-ping 2s ease-out infinite;}
@keyframes cmr-ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.cmr-lbl{position:absolute; font:700 1.05rem/1 var(--font-body); letter-spacing:.02em;
    color:var(--blue); background:#fff; padding:0.5em 1.4em !important; border-radius:100px;
    box-shadow:0 8px 22px -4px rgba(13,49,99,.5); white-space:nowrap;
  border:2px solid rgba(252,185,0,.6); z-index:4;}

.cmr-lbl--usa{top:27%; left:32%}
.cmr-lbl--ecu{top:64%; left:42%}

.cmr-globe__copy{max-width:500px}
.cmr-globe__copy .cmr-eyebrow{margin-bottom:1.8rem}
.cmr-globe__copy h1{font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,7vw,5.6rem); line-height:1.02; letter-spacing:-.02em;
  color:var(--blue); margin:0 0 1.8rem;}
.cmr-globe__copy h1 em{font-style:normal; color:var(--yellow)}
.cmr-globe__copy p{font-family:"Poppins",var(--font-body) !important; font-weight:400 !important;
  font-size:14px !important; line-height:1.7 !important; color:var(--txt) !important; max-width:42ch; margin:0 !important;}

.cmr-eyebrow{display:inline-block !important; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); font-weight:700; padding:.6em 1.1em !important; line-height:1 !important;
  border:1.5px solid rgba(18,68,142,.28); border-radius:100px; text-decoration:none !important;
  margin:0 0 1.6rem !important;}
.cmr-eyebrow--gold{color:var(--yellow); border-color:rgba(252,185,0,.55); background:rgba(252,185,0,.1)}

.cmr-scrollhint{position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem;
  color:var(--blue); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  animation:cmr-bob 2.2s ease-in-out infinite}
.cmr-scrollhint svg{width:18px;height:18px}
@keyframes cmr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ===== CAMIÓN (extremo a extremo) ===== */
#cmr-truck{position:absolute; z-index:3; left:0; top:47%;
  width:min(64vw,720px); height:auto;

  transform-origin:center; opacity:var(--to,0);
  filter:drop-shadow(0 34px 44px rgba(8,33,63,.45));
  will-change:transform,opacity; pointer-events:none;}

/* ===== TÍTULO GIGANTE DE FONDO (cambia con scroll) ===== */
.cmr-logo { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.5s; width: 280px; }
.cmr-ghostwrap{position:absolute; inset:0; z-index:1; pointer-events:none}
.cmr-ghost{position:absolute; top:12%; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:800; text-align:center;
  font-size:clamp(2.6rem,9vw,7rem); line-height:.95; letter-spacing:-.02em;
  color:rgba(255,255,255,.14); white-space:nowrap; opacity:0; transition:opacity .3s ease;}
.cmr-ghost.on{opacity:1}

/* ===== FILA DE 3 CARDS (se desplaza con --rowx en vw) ===== */
.cmr-cardsrow{position:absolute; z-index:2; top:56%; left:50%;
  display:flex; gap:clamp(16px,2.5vw,34px); align-items:stretch;
  transform:translate(calc(-50% + var(--rowx,85) * 1vw), -50%);
  will-change:transform;}
.cmr-cardsrow .cmr-panel{
  flex:0 0 auto; width:min(360px,80vw); height:min(64vh,480px);
  display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden;
  background:rgba(8,33,63,.82); border:1px solid rgba(252,185,0,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:22px; padding:clamp(24px,2.4vw,34px) !important; color:#eaf1fb;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);}
.cmr-cardsrow .cmr-panel .cmr-btn{margin-top:auto !important; align-self:flex-start}
.cmr-panel .cmr-eyebrow{margin-bottom:1rem !important}
.cmr-panel h3{font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.9rem); line-height:1.14 !important; color:#fff !important;
  margin:0 0 1rem !important; padding:0 !important;}
.cmr-panel h3 em{font-style:normal; color:var(--yellow)}
.cmr-panel p{font-family:"Poppins",var(--font-body) !important; font-weight:400 !important;
  font-size:14px !important; line-height:1.7 !important; color:#d0dcef !important;
  margin:0 0 1.5rem !important;}

.cmr-btn{display:inline-flex !important; align-items:center; justify-content:center;
  font-weight:700 !important; font-size:.95rem; line-height:1 !important;
  padding:1em 2em !important; border-radius:100px !important; text-decoration:none !important;
  background:var(--yellow) !important; color:#3a2c00 !important; border:0 !important;
  box-shadow:0 14px 32px -10px rgba(252,185,0,.6); transition:transform .25s ease, box-shadow .25s ease;
  margin:0 !important;}
.cmr-btn:hover{transform:translateY(-2px); box-shadow:0 20px 44px -10px rgba(252,185,0,.75); color:#3a2c00 !important}

.cmr-steps--col{list-style:none; display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:.2rem}
.cmr-steps--col li{display:flex; gap:.7rem; align-items:baseline}
.cmr-steps--col b{font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--yellow); min-width:1.5em}
.cmr-steps--col span{font-family:"Poppins",var(--font-body) !important; font-weight:400 !important; font-size:13px !important; line-height:1.6 !important; color:#d5e1f2 !important}

.cmr-addr--2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem; margin:.4rem 0 1.5rem !important}
.cmr-addr--2 div{font-family:"Poppins",var(--font-body) !important; font-size:13px !important; font-weight:500 !important; color:#fff; line-height:1.45 !important}
.cmr-addr--2 span{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#95aecd; font-weight:600; margin:0 0 .3rem !important;}

/* ===== CAMIÓN (delante de las cards, rueda) ===== */
#cmr-truck{position:absolute; z-index:5; left:50%; top:56%;
  width:min(65vw,720px); height:auto;
  transform:translate(calc(-50% + var(--tx,60) * 1vw), -50%) scaleX(var(--flip,1));
  transform-origin:center; opacity:var(--to,0);
  margin: 10px;
  filter:drop-shadow(0 30px 40px rgba(8,33,63,.45));
  will-change:transform,opacity; pointer-events:none;}

/* ===== MODO COMPACTO (tablet y móvil): sin scroll-hijack ni camión arrastrando cards.
   El efecto de "pin + transform" necesita ancho de sobra para que el camión y las
   cards no se superpongan; por debajo de 1024px se reemplaza por un flujo normal
   con un fade-up al entrar en viewport (ver hero.js). ===== */
@media (max-width:1024px){
  .cmr-track{height:auto}
  .cmr-stick{position:relative; height:auto; min-height:0; overflow:visible;
    display:flex; flex-direction:column}

  .cmr-bg{background:linear-gradient(180deg,var(--paper) 0%, #e9edf4 100%) !important}

  .cmr-scene{position:relative; inset:auto; opacity:1 !important; pointer-events:auto !important;
    padding:clamp(32px,8vw,56px) clamp(20px,6vw,40px) !important}
  .cmr-scene--globe{flex-direction:column; text-align:center; gap:2.2rem}
  .cmr-globe{width:min(78vw,380px)}
  .cmr-globe__copy{max-width:100%}
  .cmr-globe__copy p{margin:0 auto}
  .cmr-scrollhint{display:none}

  .cmr-ghostwrap{display:none}

  .cmr-cardsrow{position:relative; top:auto; left:auto; z-index:2; transform:none !important;
    flex-direction:column; align-items:center; width:100%;
    padding:0 clamp(16px,5vw,32px) clamp(40px,8vw,64px) !important; gap:20px}
  .cmr-cardsrow .cmr-panel{width:100%; max-width:440px; height:auto; padding:28px !important;
    opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
  .cmr-cardsrow .cmr-panel.cmr-reveal{opacity:1 !important; transform:translateY(0)}

  #cmr-truck{position:relative; left:auto; top:auto; z-index:2; transform:none !important;
    width:min(52vw,200px); margin:0 auto clamp(20px,5vw,32px); display:block;
    opacity:0; transition:opacity .6s ease, transform .6s ease}
  #cmr-truck.cmr-reveal{opacity:1 !important}
}
@media (max-width:480px){
  .cmr-cardsrow .cmr-panel{padding:22px !important}
  .cmr-panel h3{font-size:clamp(1.4rem,5.5vw,1.8rem)}
  .cmr-addr--2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cmr-route,.cmr-halo,.cmr-scrollhint{animation:none}
  #cmr-truck,.cmr-cardsrow,.cmr-scene,.cmr-ghost,.cmr-panel{transition:none}
}