/* Eco Express Logística · estilos propios (complementan Tailwind) */
[x-cloak] { display: none !important; }
h1, h2, h3 { font-family: var(--fuente-titulos); }

/* Botones */
.btn-lima, .btn-borde, .btn-negro {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; border-radius: 999px; padding: .95rem 1.6rem;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-lima { background: var(--eco-lima); color: #000; box-shadow: 0 8px 30px rgba(165,249,6,.25); }
.btn-lima:hover { background: var(--eco-lima-hover); transform: translateY(-2px); }
.btn-borde { border: 1.5px solid rgba(255,255,255,.25); color: #fff; }
.btn-borde:hover { border-color: var(--eco-lima); color: var(--eco-lima); }
.btn-negro { background: #000; color: #fff; }
.btn-negro:hover { background: #1a1a1a; color: var(--eco-lima); transform: translateY(-2px); }

/* Títulos de sección */
.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--eco-lima);
}
.kicker::before { content: ""; width: 28px; height: 3px; background: currentColor; border-radius: 2px; transform: skewX(-20deg); }
.kicker-claro { color: var(--eco-verde-texto); }
.titulo-seccion {
  margin-top: .8rem; font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em;
}
.subrayado-lima { background: linear-gradient(transparent 62%, var(--eco-lima) 62%, var(--eco-lima) 92%, transparent 92%); padding: 0 .1em; }

/* Fondos */
.hero-fondo {
  background:
    radial-gradient(60% 60% at 80% 30%, rgba(165,249,6,.18), transparent 60%),
    radial-gradient(40% 50% at 10% 90%, rgba(165,249,6,.08), transparent 60%),
    linear-gradient(180deg, #000 0%, var(--eco-carbon) 100%);
}
/* Líneas de velocidad, como las del logotipo */
.speed-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.speed-lines::before, .speed-lines::after {
  content: ""; position: absolute; left: -30%; width: 60%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--eco-lima), transparent);
  animation: velocidad 3.2s linear infinite; opacity: .5;
}
.speed-lines::before { top: 22%; }
.speed-lines::after  { top: 68%; animation-delay: 1.6s; width: 40%; }
@keyframes velocidad { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }

/* Tarjetas */
.card-oscura { background: var(--eco-grafito); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radio); padding: 1.25rem; transition: border-color .3s, transform .3s; }
.card-oscura:hover { border-color: rgba(165,249,6,.5); transform: translateY(-3px); }
.card-servicio {
  position: relative; background: #fff; border-radius: 20px; padding: 1.5rem; border: 1px solid rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.card-servicio:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.12); background: #000; color: #fff; }
.card-servicio--destacada { background: #000; color: #fff; }
.icono-servicio {
  width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.3rem;
  border-radius: 14px; background: var(--eco-lima); color: #000; transform: skewX(-8deg);
}

/* Etiqueta de maqueta */
.tag-prov {
  display: inline-block; margin-top: .4rem; font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #7c2d12; background: #fed7aa; border: 1px dashed #c2410c; border-radius: 6px; padding: .15rem .5rem; font-style: normal;
}
.foto-prov {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center;
  background: repeating-linear-gradient(135deg, #111 0 14px, #161B14 14px 28px); border: 2px dashed rgba(165,249,6,.35);
  color: rgba(255,255,255,.55); font-weight: 600;
}
.foto-prov i { font-size: 3rem; color: var(--eco-lima); }

/* Mapa del hero */
.mapa-mini { background: #0d120c; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.ruta-anim { stroke-dasharray: 600; stroke-dashoffset: 600; animation: dibujar 3s ease forwards .4s; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
.moto-ruta { position: absolute; top: 34%; left: 55%; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(165,249,6,.35); animation: flotar 2s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-6px); } }

/* Línea de pasos */
.linea-pasos { animation: marcha 1.2s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -20; } }

/* Marquee de integraciones */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-pista { display: flex; gap: 1rem; width: max-content; animation: desplazar 28s linear infinite; }
.marquee:hover .marquee-pista { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; gap: .6rem; white-space: nowrap; padding: 1rem 1.6rem; border-radius: 999px; background: var(--eco-grafito); border: 1px solid rgba(255,255,255,.08); font-weight: 600; color: rgba(255,255,255,.8); }
.marquee-item i { color: var(--eco-lima); font-size: 1.2rem; }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* Mapa de cobertura */
.mapa-grilla { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; }
.zona-punto { position: absolute; transform: translate(-50%, -50%); }
.zona-pulso { display: block; width: calc(130px * var(--o)); height: calc(130px * var(--o)); border-radius: 50%; background: rgba(165,249,6,calc(.35 * var(--o))); border: 2px solid rgba(165,249,6,.7); animation: pulso 2.4s ease-in-out infinite; }
.zona-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 800; font-size: .8rem; color: #fff; white-space: nowrap; text-shadow: 0 1px 4px #000; }
@keyframes pulso { 50% { transform: scale(1.08); } }

/* Formularios */
.campo { display: block; }
.campo > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: .75rem .9rem; background: #fafafa; outline: none; transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: #000; box-shadow: 0 0 0 3px rgba(165,249,6,.6); background: #fff; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; cursor: pointer; font-size: .8rem; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid #e5e7eb; transition: all .2s; }
.chip input:checked + span { background: #000; color: var(--eco-lima); border-color: #000; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(165,249,6,.8); }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; color: #fff; background: #25D366; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.08); }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .ruta-anim { stroke-dashoffset: 0; }
}