/* Grúas K y F Búfalo — inspirado en la señalización vial colombiana */
:root{
  --asfalto:#24272C;
  --asfalto-2:#2F333A;
  --verde-via:#00703C;
  --verde-via-osc:#005A30;
  --amarillo:#FFC72C;
  --amarillo-osc:#E8AE00;
  --blanco:#FFFFFF;
  --hueso:#F1F2EF;
  --tinta:#1B1D21;
  --gris:#5B616B;
  --linea:#DADDD8;
  --wa:#25D366;
  --wa-osc:#1DA851;
  --max:1120px;
  --fuente:"Overpass",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fuente);color:var(--tinta);background:var(--blanco);line-height:1.6;font-size:17px;padding-bottom:78px}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:6px}
.cont{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---------- Encabezado ---------- */
.top{background:var(--asfalto);color:var(--blanco);position:sticky;top:0;z-index:20;border-bottom:1px solid #3a3e45}
.top .cont{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.1}
.marca img{width:38px;height:38px}
.marca b{font-weight:900;font-size:1.05rem;display:block;white-space:nowrap}
@media (max-width:400px){.marca small{display:none}.top-tel{padding:9px 11px;font-size:.9rem}}
.marca small{color:#B8BDC5;font-size:.8rem}
.nav{display:none;gap:26px;font-weight:600;font-size:.95rem}
.nav a{text-decoration:none;color:#D7DADF}
.nav a:hover{color:var(--amarillo)}
.top-tel{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);color:var(--tinta);text-decoration:none;font-weight:800;padding:9px 14px;border-radius:8px;font-size:.95rem;white-space:nowrap}
.top-tel svg{width:16px;height:16px}

/* ---------- Portada (asfalto) ---------- */
.hero{background:var(--asfalto);color:var(--blanco);position:relative;overflow:hidden;padding:40px 0 0}
.hero::before{ /* textura sutil de asfalto */
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px),radial-gradient(rgba(0,0,0,.25) 1px,transparent 1.2px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px
}
.hero .cont{position:relative;display:grid;gap:34px;padding-bottom:46px}
.estado{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:#CFE9D9;font-size:.95rem}
.estado i{width:10px;height:10px;border-radius:50%;background:#3DDC84;display:inline-block}
.hero h1{font-weight:900;font-size:clamp(2.6rem,9vw,4.6rem);line-height:.98;letter-spacing:-1.5px;margin:14px 0 18px}
.hero .lead{font-size:1.15rem;color:#D3D7DD;max-width:34ch}
.hero .lead strong{color:var(--blanco)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.08rem;padding:15px 22px;border-radius:10px;min-height:56px;border:2px solid transparent;transition:background-color .15s}
.btn svg{width:22px;height:22px;flex:none}
.btn-tel{background:var(--amarillo);color:var(--tinta)}
.btn-tel:hover{background:var(--amarillo-osc)}
.btn-wa{background:var(--wa);color:#0B2E18}
.btn-wa:hover{background:var(--wa-osc)}
.btn-linea{border-color:currentColor;color:inherit;background:transparent}
.sellos{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;color:#C9CED5;font-size:.95rem}
.sellos span{display:flex;align-items:center;gap:7px}
.sellos svg{width:17px;height:17px;color:var(--amarillo)}
.estrellas{color:var(--amarillo);letter-spacing:1px}

/* La señal verde de destinos */
.senal-wrap{position:relative;align-self:end}
.senal{
  background:var(--verde-via);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-1.2deg)
}
.senal-in{border:3px solid var(--blanco);border-radius:10px;padding:16px 18px 10px}
.senal h2{font-size:1rem;font-weight:700;color:#CFE6D8;margin-bottom:6px;letter-spacing:.2px}
.destino{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:2px solid rgba(255,255,255,.22);text-decoration:none;color:var(--blanco)}
.senal h2 + .destino{border-top:0}
.destino svg{width:30px;height:30px}
.destino b{font-size:1.35rem;font-weight:800;line-height:1.15}
.destino small{display:block;font-size:.85rem;color:#CFE6D8;font-weight:600}
.destino em{font-style:normal;font-weight:800;font-size:1.15rem;white-space:nowrap}
a.destino:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.postes{display:flex;justify-content:space-between;padding:0 22%;height:26px}
.postes i{width:12px;background:linear-gradient(90deg,#8C9096,#C3C6CA 45%,#7A7E84);display:block}

/* Línea de carretera (separador) */
.via{height:16px;background:var(--asfalto-2);position:relative}
.via::after{content:"";position:absolute;left:0;right:0;top:6px;height:4px;
  background:repeating-linear-gradient(90deg,var(--amarillo) 0 46px,transparent 46px 80px)}

/* ---------- Secciones ---------- */
.sec{padding:64px 0}
.sec-hueso{background:var(--hueso)}
.sec h2.t{font-weight:900;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.08;letter-spacing:-.6px;max-width:20ch}
.sec p.s{color:var(--gris);margin-top:10px;max-width:58ch;font-size:1.05rem}

/* Servicios: lista, no tarjetas */
.servicios{margin-top:30px;display:grid;border-top:2px solid var(--tinta)}
.serv{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--linea)}
.serv .ic{width:44px;height:44px;border-radius:10px;background:var(--hueso);display:grid;place-items:center;color:var(--verde-via)}
.serv .ic svg{width:24px;height:24px}
.serv h3{font-size:1.18rem;font-weight:800;line-height:1.25}
.serv p{color:var(--gris);margin-top:4px}
.serv a{font-weight:700;color:var(--verde-via)}

/* Compromisos */
.compromisos{display:grid;gap:22px;margin-top:30px}
.comp{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.rombo{width:46px;height:46px;transform:rotate(45deg);background:var(--amarillo);border:3px solid var(--tinta);border-radius:6px;display:grid;place-items:center;margin:6px}
.rombo svg{transform:rotate(-45deg);width:22px;height:22px}
.comp h3{font-size:1.15rem;font-weight:800}
.comp p{color:var(--gris);margin-top:2px}

/* Cobertura */
.zonas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.zonas span,.zonas a{padding:9px 16px;border-radius:8px;background:var(--blanco);border:1px solid var(--linea);font-weight:700;text-decoration:none}
.zonas a{background:var(--verde-via);border-color:var(--verde-via);color:var(--blanco)}
.zonas a:hover{background:var(--verde-via-osc)}

/* Pasos (es una secuencia real) */
.pasos{display:grid;gap:14px;margin-top:30px;counter-reset:p}
.paso{background:var(--asfalto);color:var(--blanco);border-radius:12px;padding:22px 22px 22px 74px;position:relative}
.paso::before{counter-increment:p;content:counter(p);position:absolute;left:20px;top:20px;width:38px;height:38px;border-radius:50%;background:var(--amarillo);color:var(--tinta);font-weight:900;font-size:1.2rem;display:grid;place-items:center}
.paso h3{font-weight:800;font-size:1.15rem}
.paso p{color:#C9CED5;margin-top:2px}

/* Reseñas */
.resenas{display:grid;gap:22px;align-items:center;background:var(--verde-via);color:var(--blanco);border-radius:16px;padding:30px 24px}
.resenas .nota{font-size:4.2rem;font-weight:900;line-height:.9}
.resenas .estrellas{font-size:1.5rem}
.resenas p{color:#DCEFE3;max-width:46ch}

/* Preguntas */
.faq{margin-top:26px;border-top:2px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--linea);padding:18px 0}
.faq summary{font-weight:800;font-size:1.08rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;border-right:3px solid var(--verde-via);border-bottom:3px solid var(--verde-via);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq details p{color:var(--gris);margin-top:10px;max-width:62ch}

/* Llamado final: señal de advertencia */
.final{background:var(--amarillo);padding:60px 0;text-align:center}
.final h2{font-weight:900;font-size:clamp(2rem,6vw,3rem);line-height:1.05;letter-spacing:-.8px}
.final p{margin-top:10px;font-size:1.1rem;color:#3E3204}
.final .acciones{justify-content:center}
.final .btn-tel{background:var(--tinta);color:var(--amarillo)}
.final .btn-tel:hover{background:#000}
.franja{height:14px;background:repeating-linear-gradient(-45deg,var(--tinta) 0 14px,var(--amarillo) 14px 28px)}

/* Pie */
.pie{background:var(--asfalto);color:#AEB3BB;padding:40px 0 26px;font-size:.95rem}
.pie .cont{display:grid;gap:26px}
.pie h4{color:var(--blanco);font-weight:800;margin-bottom:8px}
.pie ul{list-style:none;display:grid;gap:6px}
.pie a{color:#DADDE1;text-decoration:none}
.pie a:hover{color:var(--amarillo)}
.legal{border-top:1px solid #3A3E45;padding-top:16px;font-size:.85rem}

/* Migas */
.migas{font-size:.9rem;color:#B8BDC5}
.migas a{color:var(--amarillo);font-weight:700;text-decoration:none}

/* Barra fija (celular) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--asfalto);border-top:1px solid #3A3E45}
.barra .btn{min-height:54px;padding:10px;font-size:1.02rem}

/* ---------- Escritorio ---------- */
@media (min-width:820px){
  body{padding-bottom:0}
  .barra{display:none}
  .nav{display:flex}
  .hero{padding-top:64px}
  .hero .cont{grid-template-columns:1.1fr .9fr;gap:56px;align-items:end;padding-bottom:0}
  .hero .copy{padding-bottom:64px}
  .servicios{grid-template-columns:1fr 1fr;column-gap:48px}
  .compromisos{grid-template-columns:1fr 1fr;gap:30px 48px}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .resenas{grid-template-columns:auto 1fr auto;padding:36px 40px;gap:34px}
  .pie .cont{grid-template-columns:2fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}