@font-face{font-family:'Open Sauce Two';src:url('fonts/OpenSauceTwo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sauce Two';src:url('fonts/OpenSauceTwo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sauce Two';src:url('fonts/OpenSauceTwo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   TRADING CARGO — sistema visual
   Estructura y escala tomadas del sistema de rivian.com: lienzo blanco (Paper),
   bandas alternas en Chalk, tinta Graphite y bordes Concrete. El acento es el
   AZUL de Trading Solutions (Aqua Wash), una sola acción por pantalla.
   Escala de 8px, media a 20px de radio, botones a 40px.
   ========================================================================== */

:root{
  /* Lienzo */
  --fondo:#FFFFFF;          /* Paper */
  --superficie:#F2F2F2;     /* Chalk */
  --blanco:#FFFFFF;
  --oscuro:#151515;         /* Graphite */
  --oscuro-2:#212121;       /* Charcoal */

  /* Tinta */
  --texto:#151515;          /* Graphite */
  --texto-2:#616161;        /* Steel */
  --texto-3:#B8B8B8;        /* Fog */
  --sobre-oscuro:#FFFFFF;
  --sobre-oscuro-2:#CFD0D0; /* Ash */

  /* Bordes */
  --linea:#E5E7EB;          /* Concrete */
  --linea-oscura:rgba(255,255,255,.18);

  /* Acento de marca — Aqua Wash. La paleta es azules + neutros. */
  --azul:#2F88EC;
  --azul-2:#1E6FCB;
  --azul-suave:#EAF3FD;
  /* Alias por compatibilidad con clases previas */
  --amarillo:#2F88EC;
  --amarillo-2:#1E6FCB;
  --verde:#2F88EC;

  /* Compatibilidad con clases previas */
  --negro:#151515;
  --carbon:#212121;
  --claro-2:#F2F2F2;
  --claro-3:#FFFFFF;
  --verde-2:#4F8049;

  --fuente:'Open Sauce Two',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ancho:1440px;
  --gutter:40px;

  /* Radios del sistema */
  --r-input:4px;
  --r-icono:8px;
  --r-nav:12px;
  --r-media:20px;
  --r-boton:40px;
  --pill:9999px;
  --r:8px;
  --r-media-s:12px;
  --r-panel:20px;

  --barra:72px;
  --salto:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--fuente);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
::selection{background:var(--azul);color:#FFFFFF}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:var(--r-icono)}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* ---------------- Tipografía ---------------- */
.display{font-size:clamp(2.5rem,6.2vw,4.5rem);font-weight:600;letter-spacing:-.042em;line-height:1}
.titulo{font-size:clamp(1.9rem,3.9vw,3.5rem);font-weight:600;letter-spacing:-.036em;line-height:1.06}
.subtitulo{font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.etiqueta{
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--texto-2);margin:0 0 24px;
}
.oscuro .etiqueta{color:var(--sobre-oscuro-2)}
.entrada{font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.5;letter-spacing:-.012em;color:var(--texto-2)}
.oscuro .entrada{color:var(--sobre-oscuro-2)}
.parrafo{max-width:60ch;font-size:16px;line-height:1.65;color:var(--texto-2)}
.oscuro .parrafo{color:var(--sobre-oscuro-2)}

/* ---------------- Barra ---------------- */
.barra{
  position:sticky;top:0;z-index:60;background:var(--fondo);
  border-bottom:1px solid transparent;transition:border-color .25s var(--salto);
}
.barra.fijada{border-bottom-color:var(--linea)}
.barra .envoltura{display:flex;align-items:center;gap:16px;height:var(--barra)}
.marca{display:flex;align-items:center;flex:none;color:var(--texto)}
.marca svg{height:16px;width:auto;display:block}
.marca .punto{fill:var(--azul)}

/* Pestañas centradas, en píldora — el patrón de barra de Rivian */
.nav{display:flex;align-items:center;gap:4px;font-size:15px;margin:0 auto}
.nav > a,.desplegable > button{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--pill);color:var(--texto);
  font:inherit;font-size:15px;font-weight:500;background:transparent;border:0;cursor:pointer;
  transition:background .18s var(--salto);
}
.nav > a:hover,.desplegable > button:hover,.desplegable.abierto > button{background:var(--superficie)}
.desplegable > button svg{width:10px;height:10px;transition:transform .25s var(--salto)}
.desplegable.abierto > button svg{transform:rotate(180deg)}

/* Menú a todo el ancho, con miniaturas */
.desplegable{position:static}
.panel{
  position:absolute;top:calc(var(--barra) - 6px);left:var(--gutter);right:var(--gutter);
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-nav);
  padding:24px;display:none;box-shadow:0 24px 64px -28px rgba(21,21,21,.25);
}
.desplegable.abierto .panel{display:block}
.menu-servicios{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.menu-servicios a{display:block;color:var(--texto)}
.menu-servicios figure{
  margin:0 0 12px;aspect-ratio:16/11;overflow:hidden;
  border-radius:var(--r-media-s);background:var(--superficie);
}
.menu-servicios img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--salto)}
.menu-servicios a:hover img{transform:scale(1.06)}
.menu-servicios b{display:block;font-size:14px;font-weight:500;letter-spacing:-.012em;line-height:1.3}
.menu-servicios span{display:block;margin-top:4px;font-size:13px;color:var(--texto-2);line-height:1.4}

.acciones-barra{display:flex;align-items:center;gap:8px;flex:none}
.acciones-barra .boton{height:40px;padding:0 20px;font-size:14px}
.abrir{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.abrir span{display:block;width:20px;height:1.5px;background:var(--texto);margin:5px 0;border-radius:2px;transition:transform .25s var(--salto)}
.barra.desplegado .abrir span:first-child{transform:translateY(3.25px) rotate(45deg)}
.barra.desplegado .abrir span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------------- Botones ---------------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:var(--r-boton);
  font-size:15px;font-weight:500;white-space:nowrap;letter-spacing:-.008em;
  background:var(--texto);color:#FFFFFF;border:1px solid var(--texto);
  transition:background .18s var(--salto),color .18s var(--salto),border-color .18s var(--salto);
}
.boton:hover{background:var(--oscuro-2);border-color:var(--oscuro-2)}
.boton.linea{background:transparent;color:var(--texto);border-color:var(--texto)}
.boton.linea:hover{background:var(--superficie)}
/* Una sola acción en azul por pantalla */
.boton.destacado{background:var(--azul);color:#FFFFFF;border-color:var(--azul)}
.boton.destacado:hover{background:var(--azul-2);border-color:var(--azul-2)}
.boton svg{width:11px;height:11px;transition:transform .25s var(--salto)}
.boton:hover svg{transform:translate(2px,-2px)}
.oscuro .boton{background:#FFFFFF;color:var(--texto);border-color:#FFFFFF}
.oscuro .boton:hover{background:var(--sobre-oscuro-2);border-color:var(--sobre-oscuro-2)}
.oscuro .boton.destacado{background:var(--azul);color:#FFFFFF;border-color:var(--azul)}
.oscuro .boton.destacado:hover{background:var(--azul-2);border-color:var(--azul-2)}
.oscuro .boton.linea{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.oscuro .boton.linea:hover{background:rgba(255,255,255,.1);border-color:#FFFFFF}
.enlace{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;
  color:var(--azul);padding-bottom:3px;border-bottom:1px solid currentColor;
}
.enlace:hover{color:var(--azul-2)}
.enlace svg{width:11px;height:11px;transition:transform .25s var(--salto)}
.enlace:hover svg{transform:translate(3px,-3px)}
.oscuro .enlace{border-bottom-color:#FFFFFF}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}

/* ---------------- Portada ---------------- */
.portada{padding:8px var(--gutter) 0;max-width:var(--ancho);margin:0 auto}
.portada figure{
  margin:0;position:relative;border-radius:var(--r-media);overflow:hidden;
  height:clamp(380px,72vh,720px);background:var(--superficie);
}
.portada figure img{width:100%;height:100%;object-fit:cover}
.portada figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.26) 32%,rgba(0,0,0,0) 62%);
}
.portada .rotulo{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3.5vw,48px);color:#fff}
.portada .rotulo h1{color:#fff;max-width:15ch;text-wrap:balance}
.banda{background:var(--fondo)}
.banda .envoltura{
  display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:32px 56px;
  align-items:center;padding-top:40px;padding-bottom:8px;
}
.banda .entrada{max-width:48ch}
.banda .acciones{margin-top:0}

/* ---------------- Bloques ---------------- */
.bloque{padding:clamp(56px,8vw,112px) 0}
.bloque.ajustado{padding:clamp(40px,5vw,80px) 0 0}
.bloque.superficie{background:var(--superficie)}
.bloque.negro,.bloque.carbon{background:var(--superficie);color:var(--texto)}
.cabecera{max-width:20ch;text-wrap:balance}
.cabecera + .parrafo{margin-top:24px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.dos.centrado{align-items:center}

/* ---------------- Cifras ---------------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
.cifra{
  background:var(--superficie);border-radius:var(--r-media);padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;min-height:168px;
}
.superficie .cifra{background:var(--fondo)}
.oscuro .cifra{background:var(--oscuro-2)}
.cifra b{display:block;font-size:clamp(2.2rem,3.4vw,3rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.cifra span{display:block;margin-top:24px;font-size:14px;max-width:26ch;line-height:1.45;color:var(--texto-2)}
.oscuro .cifra span{color:var(--sobre-oscuro-2)}

/* ---------------- Lista numerada ---------------- */
.lista{margin-top:48px;display:grid;gap:8px}
.fila{
  display:grid;grid-template-columns:48px 1fr 1.3fr auto;gap:32px;align-items:center;
  padding:24px;border-radius:var(--r-media);background:var(--superficie);
  transition:background .2s var(--salto);
}
.superficie .fila{background:var(--fondo)}
a.fila:hover{background:#EAEAEA}
.superficie a.fila:hover{background:#FAFAFA}
.fila .num{font-size:14px;font-weight:500;color:var(--texto-2)}
.fila h3{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.032em}
.fila p{font-size:15px;line-height:1.6;max-width:52ch;color:var(--texto-2)}
.fila .marca-flecha{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--linea);flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--fondo);
  transition:background .22s var(--salto),border-color .22s var(--salto),color .22s var(--salto);
}
.fila .marca-flecha svg{width:11px;height:11px;transition:transform .25s var(--salto)}
a.fila:hover .marca-flecha{background:var(--texto);border-color:var(--texto);color:#FFFFFF}
a.fila:hover .marca-flecha svg{transform:translate(2px,-2px)}

/* ---------------- Rejillas y tarjetas ---------------- */
.rejilla{display:grid;gap:40px 24px;margin-top:48px}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
.rejilla.dos{grid-template-columns:repeat(2,1fr)}
.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}
.tarjeta{
  display:flex;flex-direction:column;gap:8px;
  background:var(--superficie);border-radius:var(--r-media);padding:24px;
}
.superficie .tarjeta{background:var(--fondo)}
.oscuro .tarjeta{background:var(--oscuro-2)}
.tarjeta h3{font-size:1.1rem;letter-spacing:-.028em}
.tarjeta p{font-size:15px;line-height:1.6;color:var(--texto-2)}
.oscuro .tarjeta p{color:var(--sobre-oscuro-2)}
.tarjeta .num{font-size:13px;font-weight:500;color:var(--texto-2);margin-bottom:4px}

/* ---------------- Media ---------------- */
.media{overflow:hidden;margin:0;border-radius:var(--r-media);background:var(--superficie)}
.media img{width:100%;height:100%;object-fit:cover}
.media.alta{aspect-ratio:4/5}
.media.ancha{aspect-ratio:16/10}
.media.cuadro{aspect-ratio:1/1}
.pie-foto{margin-top:12px;font-size:13px;color:var(--texto-2)}

/* ---------------- Vehículos ---------------- */
.vehiculo{display:flex;flex-direction:column}
.vehiculo .lienzo{
  margin:0 0 16px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-media);background:var(--superficie);
}
.vehiculo .lienzo img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--salto)}
.vehiculo:hover .lienzo img{transform:scale(1.04)}
.vehiculo h3{font-size:1.15rem;letter-spacing:-.03em;margin-bottom:8px}
.vehiculo p{font-size:15px;line-height:1.6;color:var(--texto-2)}
.ficha{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--texto-2);
}
.oscuro .ficha{border-color:var(--linea-oscura)}
.ficha b{font-weight:500;font-size:15px;color:var(--texto)}
.oscuro .ficha b{color:#FFFFFF}

/* ---------------- Servicio: qué incluye ---------------- */
.checks{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.checks li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:18px 20px;border-radius:var(--r-media-s);background:var(--superficie);
  font-size:15px;line-height:1.55;
}
.superficie .checks li{background:var(--fondo)}
.oscuro .checks li{background:var(--oscuro-2)}
.checks svg{width:16px;height:16px;margin-top:3px;flex:none;color:var(--azul)}

/* ---------------- Mapa ---------------- */
.panel-mapa{padding:0;background:transparent;border-radius:var(--r-media);overflow:hidden}
.superficie .panel-mapa,.oscuro .panel-mapa{background:transparent;border:0}
.mapa{width:100%;max-width:none;display:block;overflow:visible}
.mapa .tierra{fill:#F0F1F2}
.mapa .corredor path{
  fill:none;stroke:var(--azul);stroke-linecap:round;opacity:.6;
  stroke-dasharray:2 8;
}
.mapa .viaje circle{fill:var(--azul)}
.mapa .aeropuerto{fill:#98A2AE}
.mapa .puerto-otro{fill:#FFFFFF;stroke:#98A2AE;stroke-width:1.7}
.mapa .puerto-activo{fill:var(--azul);transition:r .25s var(--salto)}
.mapa .aro{fill:none;stroke:#FFFFFF;stroke-width:3}
.mapa .pulso{
  fill:none;stroke:var(--azul);stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:pulso 3.2s var(--salto) infinite;
}
.mapa .nodo:nth-of-type(2) .pulso{animation-delay:1.1s}
.mapa .nodo:nth-of-type(3) .pulso{animation-delay:2.2s}
@keyframes pulso{
  0%{opacity:.75;transform:scale(1)}
  75%{opacity:0;transform:scale(2.9)}
  100%{opacity:0;transform:scale(2.9)}
}
.mapa .nodo .nombre{
  font-family:var(--fuente);font-size:15px;font-weight:600;fill:var(--texto);
  letter-spacing:-.022em;
  paint-order:stroke;stroke:#FFFFFF;stroke-width:4.5;stroke-linejoin:round;
}
.mapa .nodo .sub{
  font-family:var(--fuente);font-size:11px;fill:var(--texto-2);
  paint-order:stroke;stroke:#FFFFFF;stroke-width:3.5;stroke-linejoin:round;
}
.mapa .nodo{cursor:pointer}
.mapa .nodo .zona{fill:transparent}
.mapa .nodo:focus{outline:none}
.mapa .rotulo text{
  font-family:var(--fuente);font-size:12.5px;font-weight:500;fill:var(--texto);
  paint-order:stroke;stroke:#FFFFFF;stroke-width:4;stroke-linejoin:round;
  transition:opacity .25s var(--salto);
}
.mapa .rotulo text.menor{font-size:10.5px;font-weight:400;fill:var(--texto-2)}
.mapa .oceano text{
  font-family:var(--fuente);font-size:11.5px;font-weight:500;fill:#C2C6CB;letter-spacing:.02em;
}

/* Resaltado cruzado entre el punto del mapa y su ficha */
.mapa.hay-foco .nodo:not(.activo){opacity:.3}
.mapa.hay-foco .rotulo text{opacity:.3}
.mapa .nodo{transition:opacity .25s var(--salto)}
.mapa .nodo.activo .puerto-activo{r:9}
.puerto[data-lugar]{cursor:pointer;transition:background .2s var(--salto),box-shadow .2s var(--salto)}
.puerto[data-lugar]:hover,.puerto[data-lugar].activo,.puerto[data-lugar]:focus-visible{
  background:var(--azul-suave);box-shadow:inset 0 0 0 1px var(--azul);outline:none;
}
.leyenda{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--texto-2);
}
.leyenda li{display:flex;align-items:center;gap:9px}
.leyenda svg{width:15px;height:15px;flex:none}
.puertos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.puerto{background:var(--superficie);border-radius:var(--r-media);padding:24px}
.superficie .puerto{background:var(--fondo)}
.oscuro .puerto{background:var(--oscuro-2)}
.puerto h4{font-size:1rem;margin-bottom:8px;letter-spacing:-.026em}
.puerto span{font-size:15px;line-height:1.55;color:var(--texto-2)}
.oscuro .puerto span{color:var(--sobre-oscuro-2)}
@media (prefers-reduced-motion:reduce){
  .mapa .pulso{animation:none;opacity:0}
  .mapa .viaje{display:none}
}

/* ---------------- Clientes ---------------- */
.clientes{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:48px;align-items:center}
.cliente{display:flex;align-items:center;justify-content:center}
.cliente img{max-height:48px;max-width:100%;width:auto;object-fit:contain}

/* ---------------- FAQ ---------------- */
.faq{margin-top:48px;max-width:84ch;display:grid;gap:8px}
.faq details{background:var(--superficie);border-radius:var(--r-media);padding:0 24px}
.superficie .faq details{background:var(--fondo)}
.oscuro .faq details{background:var(--oscuro-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(1rem,1.4vw,1.15rem);letter-spacing:-.026em;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:1.5px;background:currentColor;transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:9px;top:50%;width:1.5px;height:12px;background:currentColor;transform:translateY(-50%);transition:opacity .25s var(--salto)}
.faq details[open] summary::before{opacity:0}
.faq p{padding:0 44px 24px 0;font-size:15px;line-height:1.65;max-width:70ch;color:var(--texto-2)}
.oscuro .faq p{color:var(--sobre-oscuro-2)}

/* ---------------- Formulario ---------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:14px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--texto-2)}
.oscuro .campo label{color:var(--sobre-oscuro-2)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:16px;background:var(--fondo);color:var(--texto);
  border:1px solid var(--linea);border-radius:var(--r-input);padding:13px 14px;
  transition:border-color .18s var(--salto),box-shadow .18s var(--salto);
}
.oscuro .campo input,.oscuro .campo select,.oscuro .campo textarea{
  background:var(--oscuro-2);border-color:var(--linea-oscura);color:#FFFFFF;
}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--texto);box-shadow:0 0 0 3px rgba(21,21,21,.08);
}
.oscuro .campo input:focus,.oscuro .campo select:focus,.oscuro .campo textarea:focus{
  border-color:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.campo select option{color:#151515}
.form .acciones{grid-column:1/-1;margin-top:8px}
.aviso{grid-column:1/-1;font-size:13px;color:var(--texto-2)}
.oscuro .aviso{color:var(--sobre-oscuro-2)}

/* ---------------- Lámina de cierre ---------------- */
.lamina{padding:clamp(40px,5vw,80px) var(--gutter) clamp(56px,6vw,96px);max-width:var(--ancho);margin:0 auto}
.lamina figure{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r-media);
  min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;background:var(--superficie);
}
.lamina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lamina figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.05) 100%);
}
.lamina figcaption{
  position:relative;z-index:2;color:#FFFFFF;padding:clamp(28px,4vw,56px);max-width:60ch;
}
.lamina .etiqueta{color:rgba(255,255,255,.9);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.lamina .etiqueta::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--azul);flex:none}
.lamina h2{color:#FFFFFF;max-width:18ch;text-wrap:balance}
.lamina .entrada{color:rgba(255,255,255,.82);margin-top:16px;max-width:46ch}

/* ---------------- CTA ---------------- */
.cta{
  background:transparent;max-width:var(--ancho);margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--gutter) clamp(56px,6vw,96px);
}
.cta .envoltura{
  max-width:none;padding:0;overflow:hidden;
  background:var(--oscuro);color:#FFFFFF;border-radius:var(--r-media);
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;
}
.cta-texto{
  padding:clamp(36px,4.5vw,72px);
  display:flex;flex-direction:column;justify-content:center;
}
.cta h2{color:#FFFFFF;max-width:14ch;text-wrap:balance}
.cta-texto .parrafo{margin-top:20px;max-width:42ch}
.cta-foto{margin:0;position:relative;min-height:clamp(280px,32vw,420px);background:var(--oscuro-2)}
.cta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------------- Pie ---------------- */
.pie{background:var(--oscuro);color:#FFFFFF;padding:clamp(56px,6vw,96px) 0 40px}
.pie .superior{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:64px}
.pie .superior > div{min-width:0}
.pie .logo{display:block;color:#FFFFFF;margin-bottom:24px}
.pie .logo svg{height:16px;width:auto;display:block}
.pie .logo .punto{fill:var(--azul)}
.pie .lema{font-size:15px;max-width:28ch;line-height:1.6;color:var(--sobre-oscuro-2)}
.pie h4{font-size:14px;text-transform:none;letter-spacing:0;margin-bottom:20px;font-weight:500}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;
  color:var(--sobre-oscuro-2);min-width:0;overflow-wrap:anywhere}
.pie ul a{transition:color .18s var(--salto)}
.pie ul a:hover{color:var(--azul)}
.pie .inferior{
  border-top:1px solid var(--linea-oscura);padding-top:28px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:13px;color:var(--sobre-oscuro-2);
}

/* ---------------- Aparición al hacer scroll ---------------- */
.aparece{opacity:0;transform:translateY(18px);transition:opacity .65s var(--salto),transform .65s var(--salto)}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .nav{gap:0}
  .nav > a,.desplegable > button{padding:8px 12px;font-size:14.5px}
  .menu-servicios{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  :root{--gutter:24px}
  .rejilla.tres,.rejilla.cuatro,.clientes{grid-template-columns:repeat(2,1fr)}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .dos,.banda .envoltura{grid-template-columns:1fr;gap:32px}
  .cta .envoltura{grid-template-columns:1fr;gap:0}
  .cta-foto{order:-1;min-height:240px}
  .checks{grid-template-columns:1fr}
  .puertos{grid-template-columns:1fr}
  .pie .superior{grid-template-columns:1fr 1fr;gap:40px}
  .fila{grid-template-columns:40px 1fr auto;gap:20px;align-items:start}
  .fila p{grid-column:2/-1;margin-top:8px}
  .fila .marca-flecha{grid-row:1}
}
@media (max-width:760px){
  :root{--gutter:16px;--r-media:16px}
  .portada figure{height:clamp(400px,68vh,600px)}
  .abrir{display:block}
  .nav,.acciones-barra{display:none}
  .barra.desplegado{border-bottom-color:var(--linea)}
  .barra.desplegado .nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;
    position:absolute;left:0;right:0;top:var(--barra);background:var(--fondo);
    padding:8px 16px 24px;border-bottom:1px solid var(--linea);
    max-height:calc(100vh - var(--barra));overflow-y:auto;
  }
  .barra.desplegado .nav > a,.barra.desplegado .desplegable > button{
    padding:14px 0;font-size:16px;width:100%;text-align:left;border-radius:0;
    border-bottom:1px solid var(--linea);justify-content:space-between;
  }
  .barra.desplegado .nav > a:hover,.barra.desplegado .desplegable > button:hover{background:transparent}
  .barra.desplegado .panel{
    position:static;display:block;border:0;background:transparent;padding:8px 0 12px;box-shadow:none;
  }
  .menu-servicios{grid-template-columns:1fr 1fr;gap:12px}
  .menu-servicios span{display:none}
  .barra.desplegado .acciones-barra{display:flex;margin-top:20px}
  .barra.desplegado .acciones-barra .boton{flex:1;height:44px}
  .rejilla.tres,.rejilla.dos,.rejilla.cuatro,.clientes,.form{grid-template-columns:1fr}
  .rejilla,.clientes{gap:32px}
  .cifras{grid-template-columns:1fr}
  .cifra{min-height:0}
  .cifra span{margin-top:12px}
  .leyenda{grid-template-columns:1fr}
  .acciones .boton{width:100%}
  .faq p{padding-right:0}
  .fila{grid-template-columns:36px 1fr;gap:12px;padding:20px}
  .fila .marca-flecha{display:none}
  .pie .superior{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
}

/* ==========================================================================
   CARRUSEL DE FLOTA — los vehículos se desplazan con el scroll
   Mismo gesto que la sección de vehículos de rivian.com.
   ========================================================================== */
.carrusel{position:relative}
.carrusel-fijo{
  position:sticky;top:var(--barra);height:calc(100vh - var(--barra));
  min-height:560px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;background:var(--fondo);
}
.carrusel-fondo{
  position:absolute;left:50%;top:9%;transform:translateX(-50%);
  font-size:min(19vw,15rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
  color:var(--superficie);user-select:none;pointer-events:none;white-space:nowrap;z-index:0;
}
.carrusel-pista{
  position:relative;z-index:1;display:flex;align-items:stretch;gap:24px;
  padding:0 var(--gutter);will-change:transform;
}
.carrusel-intro{
  flex:0 0 clamp(300px,30vw,420px);display:flex;flex-direction:column;justify-content:center;
  padding-right:24px;
}
.carrusel-intro .titulo{font-size:clamp(1.8rem,2.8vw,2.6rem);margin-bottom:20px}
.carrusel-intro .parrafo{font-size:15px}
.carrusel .vehiculo{
  flex:0 0 clamp(270px,26vw,400px);
  background:var(--superficie);border-radius:var(--r-media);padding:16px;
}
.carrusel .vehiculo .lienzo{margin-bottom:16px;border-radius:var(--r-media-s)}
.carrusel .vehiculo .cuerpo{padding:0 4px 4px}
.carrusel .ficha{border-top-color:#DCDCDC}
.carrusel-barra{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;z-index:2;
  height:2px;background:var(--linea);border-radius:2px;overflow:hidden;
}
.carrusel-barra span{
  display:block;height:100%;background:var(--azul);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
}
@media (max-width:1080px){
  .carrusel-fondo{font-size:24vw;top:6%}
}
@media (max-width:760px){
  /* En móvil se vuelve un carrusel normal, arrastrable con el dedo */
  .carrusel-fijo{position:static;height:auto;min-height:0;padding:clamp(56px,8vw,112px) 0}
  .carrusel-fondo{display:none}
  .carrusel-pista{
    transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:16px;
  }
  .carrusel-pista::-webkit-scrollbar{display:none}
  .carrusel-intro{flex:0 0 78vw;scroll-snap-align:start}
  .carrusel .vehiculo{flex:0 0 78vw;scroll-snap-align:start}
  .carrusel-barra{position:static;margin:20px var(--gutter) 0}
}
@media (prefers-reduced-motion:reduce){
  .carrusel-fijo{position:static;height:auto;min-height:0;padding:80px 0}
  .carrusel-pista{transform:none !important;overflow-x:auto}
  .carrusel-fondo{display:none}
}

/* ==========================================================================
   MAPA INTERACTIVO
   ========================================================================== */
.mapa .nodo{cursor:pointer}
.mapa .nodo .zona{fill:transparent}
.mapa .nodo:focus{outline:none}
.mapa .nodo:focus-visible .puerto-activo{stroke:var(--texto);stroke-width:2}
.mapa .pulso{
  fill:none;stroke:var(--azul);stroke-width:1.5;opacity:0;transform-box:fill-box;
  transform-origin:center;animation:pulso 2.8s var(--salto) infinite;
}
.mapa .nodo:nth-of-type(2) .pulso{animation-delay:.9s}
.mapa .nodo:nth-of-type(3) .pulso{animation-delay:1.8s}
@keyframes pulso{
  0%{opacity:.7;transform:scale(1)}
  70%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(2.6)}
}
.mapa .viaje circle{fill:var(--azul)}
.mapa .puerto-activo,.mapa .puerto-punto{transition:r .25s var(--salto)}

/* Resaltado cruzado entre el punto y su ficha */
.mapa.hay-foco .nodo:not(.activo) .puerto-activo{opacity:.25}
.mapa.hay-foco .nodo:not(.activo) .puerto-punto{opacity:.25}
.mapa.hay-foco .rotulo text:not(.activo){opacity:.3}
.mapa .nodo.activo .puerto-activo{r:9.5}
.mapa .nodo.activo .puerto-punto{r:3.4}
.mapa .rotulo text{transition:opacity .25s var(--salto)}
.puerto[data-lugar]{cursor:pointer;transition:background .2s var(--salto),box-shadow .2s var(--salto)}
.puerto[data-lugar]:hover,.puerto[data-lugar].activo,.puerto[data-lugar]:focus-visible{
  background:var(--azul-suave);box-shadow:inset 0 0 0 1px var(--azul);outline:none;
}
@media (prefers-reduced-motion:reduce){
  .mapa .pulso{animation:none;opacity:0}
  .mapa .viaje{display:none}
}

/* ==========================================================================
   FICHA DE VEHÍCULO — cada equipo tiene su propia página
   ========================================================================== */
a.vehiculo{color:inherit}
.vehiculo h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vehiculo .marca-flecha{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--fondo);
  transition:background .22s var(--salto),border-color .22s var(--salto),color .22s var(--salto);
}
.vehiculo .marca-flecha svg{width:10px;height:10px;transition:transform .25s var(--salto)}
a.vehiculo:hover .marca-flecha{background:var(--texto);border-color:var(--texto);color:#FFFFFF}
a.vehiculo:hover .marca-flecha svg{transform:translate(2px,-2px)}
.carrusel .vehiculo .marca-flecha,.superficie .vehiculo .marca-flecha{background:var(--fondo)}

.ficha-tecnica{border-top:1px solid var(--linea);margin-top:4px}
.ficha-tecnica .dato{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:15px 0;border-bottom:1px solid var(--linea);font-size:15px;
}
.ficha-tecnica .dato span{color:var(--texto-2)}
.ficha-tecnica .dato b{font-weight:500;text-align:right}
.ficha-tecnica .dato i{font-style:normal;font-weight:400;color:var(--texto-3)}