/* ============================
   Altitud 100K — LOGÍSTICA
   Luna + camión (sin librerías)
   ============================ */

:root{
  --bg:#061b3a;
  --bg2:#0b234b;
  --ink:#fff;
  --muted:#9fb3d1;
  --brand:#F21651;
  --accent:#2efad9;

  --world-speed:16s;    /* fondo */
  --wheel-speed:1.4s;   /* giro ruedas más suave */
  --truck-bob:2.8s;     /* vaivén sutil */

  /* Tierra visible desde el primer frame */
  --earth-x0: 1140px;
  --earth-y0: 120px;
  --earth-x1: -140px;
  --earth-speed: 48s;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}

/* Helpers */
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.btn{display:inline-block; background:var(--brand); color:#fff;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800;
  border:1px solid transparent; transition:transform .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.ghost{background:transparent; color:#fff; border-color:#ffffff55}
.btn.small{padding:8px 12px}

/* Topbar */
.topbar{position:sticky; top:0; z-index:10; background:linear-gradient(180deg,#020a1dcc,#020a1d99 70%,transparent); border-bottom:1px solid #ffffff22; backdrop-filter:blur(6px)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:#fff}
.brand-logo{width:36px; height:36px; object-fit:contain}
.brand-text{font-weight:900; letter-spacing:1px}
.brand-text span{color:var(--brand)}
.mainnav{display:flex; gap:18px; align-items:center}
.mainnav a{color:#fff; opacity:.9; text-decoration:none; text-transform:uppercase; letter-spacing:.06em}
.mainnav a:hover{opacity:1; color:var(--brand)}

/* Hero */
#logistics-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:72px 0 56px; border-bottom:1px solid #ffffff22;
  background: radial-gradient(1200px 600px at 18% 28%, rgba(2,24,61,.85), rgba(2,24,61,.45) 60%, rgba(2,24,61,.25) 100%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  min-height:520px;
}
#logistics-hero .hero-copy{position:relative; z-index:3}
#logistics-hero .overline{color:#9fb3d1; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin:0 0 12px}
#logistics-hero h1{
  margin:0 0 12px; font-weight:900; letter-spacing:.2px; line-height:1.05;
  font-size:clamp(34px, 6vw, 72px); color:#fff;
}
#logistics-hero .lead{max-width:860px; color:var(--muted); margin:8px 0 18px}
#logistics-hero .cta-row{display:flex; gap:12px}

/* Lienzo */
#hero-canvas{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero-svg{width:100%; height:100%; display:block; overflow:hidden;
  background:linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Estrellas */
.star{fill:#fff; opacity:.7; animation:twinkle var(--world-speed) ease-in-out infinite}
#stars .star:nth-child(4n+1){animation-duration:5s;   animation-delay:-1.2s}
#stars .star:nth-child(4n+2){animation-duration:6.5s; animation-delay:-2.3s}
#stars .star:nth-child(4n+3){animation-duration:8s;   animation-delay:-.8s}
#stars .star:nth-child(4n+4){animation-duration:9.5s; animation-delay:-3.1s}
@keyframes twinkle{0%,100%{opacity:.25} 45%{opacity:.9}}

/* Tierra (visible al instante) */
#earth{
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--earth-x0), var(--earth-y0));
  animation: earthDrift var(--earth-speed) linear infinite;
  filter: url(#spaceGlow);
}
@keyframes earthDrift{
  0%   { transform: translate(var(--earth-x0), var(--earth-y0)); }
  100% { transform: translate(var(--earth-x1), var(--earth-y0)); }
}

/* Mundo en bucle */
#world{animation:worldMove var(--world-speed) linear infinite; will-change:transform}
@keyframes worldMove{0%{transform:translateX(0)} 100%{transform:translateX(-1200px)}}

/* Crestas/Horizonte y relieves */
.ridge{fill:#1a2240; opacity:.85}
.ridge.mid-1{fill:#222c4a; opacity:.95}
.ground .ripples{fill:none; stroke:#2a3458; stroke-width:2; opacity:.55}

/* Camión */
#truck{z-index:2}
.truck-bob{animation:bob var(--truck-bob) ease-in-out infinite alternate; transform-origin:50% 50%}
@keyframes bob{0%{transform:translateY(-1px)} 100%{transform:translateY(1.5px)}}

/* Ruedas */
.wheel{ transform-box: fill-box; transform-origin:50% 50%; }
.wheel .tyre, .wheel .rim, .wheel .hub{ transform-box: fill-box; transform-origin:50% 50%; will-change:transform; }
.wheel .tyre{ animation: wheelSpin var(--wheel-speed) linear infinite; }
.wheel .rim { animation: wheelSpin var(--wheel-speed) linear infinite; opacity:.95; }
.wheel .hub { animation: wheelSpin var(--wheel-speed) linear infinite; }
@keyframes wheelSpin{ to{ transform: rotate(360deg); } }

/* Secciones inferiores */
.section{padding:56px 0}
.section.alt{background:#ffffff08; border-top:1px solid #ffffff22; border-bottom:1px solid #ffffff22}
.grid-3{display:grid; gap:24px; grid-template-columns:repeat(3, 1fr)}
.grid-2{display:grid; gap:24px; grid-template-columns:1.1fr .9fr}
.card{background:#0b1430; border:1px solid #ffffff22; border-radius:16px; padding:18px}
.panel{background:#0b1430; border:1px solid #ffffff22; border-radius:16px; padding:18px}
.check{margin:8px 0 0; padding-left:18px}
.check li{margin:6px 0}

/* Footer */
.foot{border-top:1px solid #ffffff22; padding:20px 0; color:#9fb3d1}
.foot-flex{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-nav{display:flex; gap:14px}
.foot-nav a{color:#9fb3d1; text-decoration:none}
.foot-nav a:hover{color:#fff}
.foot-copy{display:flex; align-items:center; gap:0; color:#9fb3d1; opacity:.92}
.foot-copy .sig{margin-left:12px; padding-left:12px; border-left:1px dashed #ffffff22; opacity:.85; white-space:nowrap}
.foot-copy .sig a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor}
.foot-copy .sig a:hover{color:#fff; border-bottom-color:transparent}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  #logistics-hero{min-height:500px}
}
@media (max-width: 720px){
  .topbar .wrap{height:56px}
  .mainnav a{display:none}
  .mainnav .btn.small{display:inline-block}
  #logistics-hero{padding:56px 0 42px; min-height:460px}
  #logistics-hero .cta-row{flex-direction:column; align-items:flex-start}
  .btn, .btn.ghost{width:100%; text-align:center}
}

/* ====== Solo móvil: despeje para ruedas/CTAs y gap título-subtítulo ====== */
@media (max-width: 600px){
  #logistics-hero{
    padding:44px 0 0;
    /* el SVG sigue ocupando el 100% del hero, sin huecos */
    min-height: clamp(560px, 82svh, 700px);
  }
  /* IMPORTANTE: NO tocar height de .hero-svg en móvil */
  #logistics-hero .hero-copy{
    margin-bottom:340px; /* ajusta 320–360 si lo necesitas */
    position:relative; z-index:3;
  }
  #logistics-hero h1{ margin-bottom:60px; } /* control del espacio con el subtítulo */
}

/* pantallas muy bajas */
@media (max-width: 600px) and (max-height: 720px){
  #logistics-hero .hero-copy{ margin-bottom:360px; }
}

/* Tierra visible al instante y centrada en móvil */
@media (max-width: 600px){
  :root{
    --earth-x0: 600px;  /* mitad del viewBox (1200/2) => se ve al abrir */
    --earth-y0: 110px;  /* ajusta altura si la quieres un poco más arriba/abajo */
    --earth-speed: 36s; /* cruza más rápido en móvil (opcional) */
  }
}