/* ==========================================================================
   AMAYA PERFORMANCE — Taller automotriz
   Estilo: negro + amarillo, premium, con animaciones
   Diseñado por Estilo Gráfico
   ========================================================================== */

:root{
  --negro:#08090a;
  --carbon:#0e1012;
  --grafito:#15181b;
  --grafito-2:#1c2024;
  --linea:rgba(255,255,255,.09);
  --linea-fuerte:rgba(253,206,30,.35);
  --amarillo:#fdce1e;
  --amarillo-2:#f5b301;
  --amarillo-3:#ffe680;
  --crema:#f7f4ec;
  --texto:#d7dadd;
  --texto-2:#949aa1;
  --rojo:#e21b21;
  --max:1220px;
  --radio:18px;
  --radio-chico:12px;
  --disp:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sombra:0 26px 60px rgba(0,0,0,.55);
  --barra:78px;
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--negro);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.sin-scroll,body.sin-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);color:#fff;margin:0;line-height:.98;letter-spacing:.005em;text-transform:uppercase}
p{margin:0}
button{font-family:inherit}
::selection{background:var(--amarillo);color:#0a0a0a}

/* ------- scrollbar ------- */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0c0d}
::-webkit-scrollbar-thumb{background:#2a2f34;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--amarillo-2)}

/* ------- utilidades ------- */
.envoltura{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.seccion{position:relative;padding:clamp(72px,9vw,130px) 0}
.centrado{text-align:center}
.oro{color:var(--amarillo)}
.punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amarillo);
  box-shadow:0 0 0 4px rgba(253,206,30,.18)}

/* etiqueta pequeña sobre los titulos */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--amarillo);margin-bottom:18px;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--amarillo);display:block}

/* titulos */
.titulo{font-size:clamp(34px,5.4vw,62px);font-weight:700}
.titulo-xl{font-size:clamp(44px,8vw,104px);font-weight:700}
.titulo .resalte{color:var(--amarillo)}
.bajada{margin-top:20px;color:var(--texto-2);font-size:clamp(16px,1.6vw,19px);max-width:62ch;line-height:1.75}
.centrado .bajada{margin-left:auto;margin-right:auto}
.titulo-linea{width:70px;height:3px;background:linear-gradient(90deg,var(--amarillo),transparent);
  margin-top:24px;border-radius:3px}
.centrado .titulo-linea{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--amarillo),transparent)}

/* ------- botones (con fondo explicito, nunca heredado) ------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 30px;border:0;border-radius:60px;cursor:pointer;overflow:hidden;
  font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(120deg,var(--amarillo),var(--amarillo-2));
  color:#0b0b0b;box-shadow:0 14px 34px rgba(253,206,30,.20);
  transition:transform .32s var(--curva), box-shadow .32s var(--curva);
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(253,206,30,.34)}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg);transition:left .65s var(--curva);
}
.btn:hover::after{left:125%}
.btn.contorno{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32);
  box-shadow:none;backdrop-filter:blur(6px);
}
.btn.contorno:hover{border-color:var(--amarillo);color:var(--amarillo);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.btn.grande{padding:19px 38px;font-size:19px}
.btn.chico{padding:12px 22px;font-size:16px;letter-spacing:.1em}
.btn.ancho{width:100%}

/* link con flecha */
.enlace-flecha{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:17px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);
  transition:gap .3s var(--curva);
}
.enlace-flecha:hover{gap:16px}

/* ------- animacion de aparicion ------- */
.rev{opacity:0;transform:translateY(34px);transition:opacity .85s var(--curva),transform .85s var(--curva);
  transition-delay:var(--d,0ms)}
.rev.dentro{opacity:1;transform:none}
.rev-izq{transform:translateX(-40px)}
.rev-der{transform:translateX(40px)}
.rev-zoom{transform:scale(.93)}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--barra);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(8,9,10,.92),rgba(8,9,10,.55) 70%,transparent);
  transition:background .4s var(--curva),height .4s var(--curva),box-shadow .4s var(--curva),
             backdrop-filter .4s var(--curva);
}
.barra.pegada{
  height:66px;background:rgba(9,10,11,.94);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 34px rgba(0,0,0,.5);border-bottom:1px solid var(--linea);
}
.barra .envoltura{display:flex;align-items:center;gap:26px;max-width:1360px}

.marca{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.marca-logo{position:relative;width:60px;height:60px;flex:0 0 auto;transition:transform .4s var(--curva)}
.barra.pegada .marca-logo{width:50px;height:50px}
.marca-logo img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(253,206,30,.28))}
.marca-logo::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(253,206,30,.22);opacity:0;transition:opacity .5s var(--curva),transform .5s var(--curva);
  transform:scale(.86);
}
.marca:hover .marca-logo::after{opacity:1;transform:scale(1)}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-texto b{font-family:var(--disp);font-size:25px;font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.marca-texto span{font-family:var(--disp);font-size:13px;letter-spacing:.42em;color:var(--amarillo);text-transform:uppercase}

.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{
  position:relative;padding:10px 15px;font-family:var(--disp);font-size:17px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#e8eaec;transition:color .3s var(--curva);
}
.nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;background:var(--amarillo);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--curva);
}
.nav a:hover{color:var(--amarillo)}
.nav a:hover::after,.nav a.activo::after{transform:scaleX(1)}
.nav a.activo{color:var(--amarillo)}
.barra-acciones{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.barra-tel{
  display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:17px;font-weight:600;
  letter-spacing:.06em;color:#fff;
}
.barra-tel svg{width:17px;height:17px;color:var(--amarillo)}
.barra-tel:hover{color:var(--amarillo)}

/* boton hamburguesa */
.menu-btn{
  display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);
  background:rgba(255,255,255,.05);cursor:pointer;position:relative;flex:0 0 auto;
}
.menu-btn span{
  position:absolute;left:14px;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .38s var(--curva),opacity .3s var(--curva),width .3s var(--curva);
}
.menu-btn span:nth-child(1){top:17px}
.menu-btn span:nth-child(2){top:23px;width:14px}
.menu-btn span:nth-child(3){top:29px}
.menu-btn.abierto span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.abierto span:nth-child(2){opacity:0}
.menu-btn.abierto span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;height:3px;width:0;z-index:130;
  background:linear-gradient(90deg,var(--amarillo-2),var(--amarillo),var(--amarillo-3));
  box-shadow:0 0 14px rgba(253,206,30,.6)}

/* ==========================================================================
   MENU MOVIL
   ========================================================================== */
.menu-movil{
  position:fixed;inset:0;z-index:115;background:rgba(7,8,9,.99);
  display:flex;flex-direction:column;justify-content:center;padding:130px 30px 140px;
  clip-path:circle(0% at calc(100% - 46px) 54px);
  transition:clip-path .7s var(--curva);visibility:hidden;
}
.menu-movil.abierto{clip-path:circle(150% at calc(100% - 46px) 54px);visibility:visible}
.menu-movil nav{display:flex;flex-direction:column;gap:4px}
.menu-movil nav a{
  font-family:var(--disp);font-size:clamp(30px,9vw,44px);font-weight:700;text-transform:uppercase;
  color:#fff;padding:9px 0;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateX(-24px);transition:opacity .5s var(--curva),transform .5s var(--curva),color .3s;
}
.menu-movil.abierto nav a{opacity:1;transform:none;transition-delay:calc(120ms + var(--i,0) * 60ms)}
.menu-movil nav a:hover,.menu-movil nav a:active{color:var(--amarillo)}
.menu-movil nav a i{font-family:var(--sans);font-size:14px;font-style:normal;color:var(--amarillo);letter-spacing:.2em}
.menu-movil .menu-datos{margin-top:30px;display:flex;flex-direction:column;gap:12px;color:var(--texto-2);font-size:15px}
.menu-movil .menu-datos a{display:flex;align-items:center;gap:11px;color:#fff}
.menu-movil .menu-datos svg{width:17px;height:17px;color:var(--amarillo)}
.menu-movil .btn{margin-top:26px;align-self:flex-start}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada{
  position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;padding:calc(var(--barra) + 54px) 0 104px;
}
.portada-foto{position:absolute;inset:0;z-index:0}
/* carrusel de fotos: se van cruzando con un zoom lento */
.portada-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1s var(--curva),visibility 1s var(--curva)}
.portada-slide.activo{opacity:1;visibility:visible;z-index:1}
.portada-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.portada-slide.activo img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.4%,-1.6%,0)}
}
.portada-velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.82) 42%,rgba(8,9,10,.42) 72%,rgba(8,9,10,.72) 100%),
    linear-gradient(180deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.18) 34%,rgba(8,9,10,.55) 74%,var(--negro) 100%);
}
.portada-lineas{
  position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(253,206,30,.10) 0 1px,transparent 1px 118px);
  mask-image:linear-gradient(90deg,transparent,#000 60%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%,transparent);
}
.portada .envoltura{position:relative;z-index:2;max-width:1320px}
.portada-caja{max-width:830px}
.portada h1{margin-top:6px;font-size:clamp(42px,7.4vw,88px);font-weight:700;line-height:.95;
  text-shadow:0 18px 50px rgba(0,0,0,.6)}
.portada h1 .palabra{display:inline-block;opacity:0;transform:translateY(28px) rotate(2deg);
  animation:sube .95s var(--curva) forwards}
@keyframes sube{to{opacity:1;transform:none}}
.portada p.entrada{margin-top:20px;max-width:56ch;font-size:clamp(16px,1.9vw,20px);color:#cfd3d7;line-height:1.72}
.portada-botones{display:flex;flex-wrap:wrap;gap:15px;margin-top:30px}
.portada-sellos{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:32px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}
.sello{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-size:17px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#e9ebed}
.sello svg{width:20px;height:20px;color:var(--amarillo);flex:0 0 auto}

/* bloque de abajo del inicio: puntos del carrusel + "Desliza", centrados */
.portada-abajo{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:16px
}
.portada-puntos{display:flex;align-items:center;gap:9px}
.portada-puntos button{
  width:9px;height:9px;padding:0;border-radius:60px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.5);
  transition:width .35s var(--curva),background .35s var(--curva),border-color .35s var(--curva)
}
.portada-puntos button:hover{border-color:var(--amarillo)}
.portada-puntos button.activo{width:28px;background:var(--amarillo);border-color:var(--amarillo)}
.portada-scroll{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--disp);font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--texto-2);
}
.portada-scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--amarillo),transparent);
  position:relative;overflow:hidden}
.portada-scroll i::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;
  background:var(--amarillo-3);animation:baja 2.1s ease-in-out infinite}
@keyframes baja{0%{top:-44px}70%,100%{top:44px}}

/* cinta de servicios (marquesina) */
.cinta{
  position:relative;z-index:5;background:var(--amarillo);color:#0b0b0b;
  overflow:hidden;padding:15px 0;border-top:1px solid rgba(0,0,0,.15);
}
.cinta-pista{display:flex;width:max-content;animation:corre 42s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cinta span{
  display:inline-flex;align-items:center;gap:26px;padding:0 26px;
  font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.cinta span::after{content:"";width:7px;height:7px;background:#0b0b0b;transform:rotate(45deg);display:block}

/* ==========================================================================
   CONFIANZA (gif animados)
   ========================================================================== */
.confianza{background:linear-gradient(180deg,var(--negro),var(--carbon))}
.confianza-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.tile{
  position:relative;padding:34px 26px 30px;border-radius:var(--radio);
  background:linear-gradient(160deg,var(--grafito),#0d0f11);border:1px solid var(--linea);
  overflow:hidden;transition:transform .45s var(--curva),border-color .45s var(--curva),box-shadow .45s var(--curva);
}
.tile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(253,206,30,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s var(--curva);
}
.tile:hover{transform:translateY(-8px);border-color:var(--linea-fuerte);box-shadow:0 26px 50px rgba(0,0,0,.5)}
.tile:hover::before{opacity:1}
/* los gif son dibujos oscuros: van sobre placa clara para que se vean */
.tile-gif{
  width:104px;height:104px;border-radius:20px;background:var(--crema);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  box-shadow:0 12px 26px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .45s var(--curva);
}
.tile:hover .tile-gif{transform:translateY(-3px) rotate(-3deg)}
.tile-gif img{width:84px;height:84px;object-fit:contain}
.tile h3{font-size:24px;letter-spacing:.04em}
.tile p{margin-top:11px;color:var(--texto-2);font-size:15.5px;line-height:1.68}
.tile-ico{
  width:104px;height:104px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;background:rgba(253,206,30,.10);border:1px solid rgba(253,206,30,.28);
  transition:transform .45s var(--curva),background .45s var(--curva);
}
.tile:hover .tile-ico{transform:translateY(-3px) rotate(-3deg);background:rgba(253,206,30,.18)}
.tile-ico svg{width:50px;height:50px;color:var(--amarillo)}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.servicios{background:var(--carbon);position:relative;overflow:hidden}
.servicios::before{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(253,206,30,.10),transparent 65%);
}
.servicios-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.servicios-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.serv{
  position:relative;padding:34px 30px 32px;border-radius:var(--radio);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--linea);overflow:hidden;
  transition:transform .45s var(--curva),border-color .45s var(--curva),background .45s var(--curva);
}
.serv::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--amarillo),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--curva);
}
.serv:hover{transform:translateY(-8px);border-color:var(--linea-fuerte);background:linear-gradient(165deg,rgba(253,206,30,.075),rgba(255,255,255,.015))}
.serv:hover::after{transform:scaleX(1)}
.serv-num{
  position:absolute;top:22px;right:26px;font-family:var(--disp);font-size:44px;font-weight:700;
  color:rgba(255,255,255,.055);line-height:1;transition:color .45s var(--curva)
}
.serv:hover .serv-num{color:rgba(253,206,30,.20)}
.serv-ico{
  width:66px;height:66px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(253,206,30,.10);border:1px solid rgba(253,206,30,.26);margin-bottom:22px;
  transition:transform .5s var(--curva),background .5s var(--curva),box-shadow .5s var(--curva);
}
.serv:hover .serv-ico{transform:translateY(-4px) scale(1.05);background:var(--amarillo);
  box-shadow:0 14px 30px rgba(253,206,30,.25)}
.serv-ico svg{width:34px;height:34px;color:var(--amarillo);transition:color .4s var(--curva)}
.serv:hover .serv-ico svg{color:#0b0b0b}
.serv h3{font-size:27px;letter-spacing:.03em}
.serv p{margin-top:12px;color:var(--texto-2);font-size:15.5px;line-height:1.7;min-height:78px}
.serv-lista{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.serv-lista li{position:relative;padding-left:20px;font-size:14.5px;color:#b9bec3}
.serv-lista li::before{
  content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-top:2px solid var(--amarillo);border-right:2px solid var(--amarillo);transform:rotate(45deg)
}
.serv-pie{margin-top:24px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:14px}

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.nosotros{background:linear-gradient(180deg,var(--carbon),var(--negro))}
.nosotros-par{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
.nosotros-fotos{position:relative}
.nosotros-fotos .foto-principal{
  border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  border:1px solid var(--linea);
}
.nosotros-fotos .foto-principal img{width:100%;height:clamp(320px,44vw,520px);object-fit:cover;
  transition:transform 1.1s var(--curva)}
.nosotros-fotos:hover .foto-principal img{transform:scale(1.05)}
.nosotros-fotos .foto-secundaria{
  position:absolute;right:-22px;bottom:-42px;width:44%;border-radius:var(--radio-chico);
  overflow:hidden;border:5px solid var(--negro);box-shadow:var(--sombra);
}
.nosotros-fotos .foto-secundaria img{width:100%;height:190px;object-fit:cover}
.nosotros-placa{
  position:absolute;left:-18px;top:26px;background:var(--amarillo);color:#0b0b0b;
  padding:16px 22px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:rotate(-3deg)
}
.nosotros-placa b{display:block;font-family:var(--disp);font-size:30px;font-weight:700;line-height:1}
.nosotros-placa span{font-family:var(--disp);font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.puntos-fuerte{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:34px}
.fuerte{display:flex;gap:13px;align-items:flex-start}
.fuerte svg{width:22px;height:22px;color:var(--amarillo);flex:0 0 auto;margin-top:3px}
.fuerte b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;color:#fff;
  letter-spacing:.05em;text-transform:uppercase}
.fuerte span{font-size:14.5px;color:var(--texto-2);line-height:1.6}

/* ==========================================================================
   PROCESO
   ========================================================================== */
.proceso{background:var(--negro);position:relative;overflow:hidden}
.proceso .envoltura{position:relative;z-index:2}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:58px;position:relative}
.pasos::before{
  content:"";position:absolute;top:38px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,rgba(253,206,30,.5),rgba(253,206,30,.12));
  transform:scaleX(var(--linea-progreso,0));transform-origin:left;
  transition:transform 1.6s var(--curva);
}
.paso{position:relative;text-align:center;padding-top:0}
.paso-num{
  width:78px;height:78px;margin:0 auto 24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:31px;font-weight:700;color:var(--amarillo);
  background:var(--negro);border:2px solid rgba(253,206,30,.42);position:relative;z-index:2;
  transition:transform .5s var(--curva),background .5s var(--curva),color .5s var(--curva),box-shadow .5s var(--curva);
}
.paso:hover .paso-num{transform:scale(1.08);background:var(--amarillo);color:#0b0b0b;
  box-shadow:0 0 0 10px rgba(253,206,30,.10)}
.paso h3{font-size:23px}
.paso p{margin-top:10px;color:var(--texto-2);font-size:15px;line-height:1.7}

/* ==========================================================================
   MANTENCION POR KM
   ========================================================================== */
.mantencion{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--carbon),#0b0c0e);
}
.mantencion-foto{position:absolute;inset:0;z-index:0;opacity:.18}
.mantencion-foto img{width:100%;height:100%;object-fit:cover}
.mantencion .envoltura{position:relative;z-index:2}
.km-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.km{
  position:relative;border-radius:var(--radio);padding:34px 30px;overflow:hidden;
  background:linear-gradient(170deg,rgba(20,23,26,.92),rgba(12,14,16,.92));
  border:1px solid var(--linea);transition:transform .45s var(--curva),border-color .45s var(--curva)
}
.km:hover{transform:translateY(-8px);border-color:var(--linea-fuerte)}
.km.destacado{background:linear-gradient(170deg,rgba(253,206,30,.13),rgba(12,14,16,.94));
  border-color:rgba(253,206,30,.42)}
.km-etiqueta{
  position:absolute;top:0;right:0;background:var(--amarillo);color:#0b0b0b;
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 14px;border-bottom-left-radius:12px;
}
.km b.km-cifra{display:block;font-family:var(--disp);font-size:52px;font-weight:700;color:#fff;line-height:1}
.km b.km-cifra small{font-size:22px;font-weight:600;color:var(--amarillo);margin-left:4px}
.km h3{margin-top:8px;font-size:23px}
.km ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.km li{position:relative;padding-left:24px;font-size:15px;color:#c3c8cd}
.km li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:8px;
  border-left:2px solid var(--amarillo);border-bottom:2px solid var(--amarillo);transform:rotate(-45deg)
}
.km-nota{margin-top:26px;font-size:14px;color:var(--texto-2)}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.galeria{background:var(--negro)}
.galeria-rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px;
  grid-auto-rows:180px;
}
.gfoto{
  position:relative;overflow:hidden;border-radius:var(--radio-chico);cursor:pointer;
  border:1px solid var(--linea);background:#111;
}
.gfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva),filter .6s var(--curva)}
.gfoto::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,9,10,.82));
  opacity:0;transition:opacity .5s var(--curva)
}
.gfoto:hover img{transform:scale(1.09)}
.gfoto:hover::after{opacity:1}
.gfoto-txt{
  position:absolute;left:18px;bottom:16px;z-index:2;opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--curva),transform .45s var(--curva)
}
.gfoto:hover .gfoto-txt{opacity:1;transform:none}
.gfoto-txt b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:.08em}
.gfoto-txt span{font-size:13px;color:var(--amarillo);letter-spacing:.14em;text-transform:uppercase}
.gfoto.grande{grid-column:span 2;grid-row:span 2}
.gfoto.alto{grid-row:span 2}
.gfoto.ancho{grid-column:span 2}
.galeria-pie{margin-top:40px;display:flex;justify-content:center}

/* visor de fotos */
.visor{
  position:fixed;inset:0;z-index:200;background:rgba(5,6,7,.96);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:60px 20px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--curva),visibility .4s
}
.visor.abierto{opacity:1;visibility:visible}
.visor img{max-width:min(1200px,94vw);max-height:84vh;border-radius:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.7);transform:scale(.94);transition:transform .45s var(--curva)}
.visor.abierto img{transform:scale(1)}
/* las flechas y la cruz van SIEMPRE por encima de la foto (con z-index propio;
   sin esto, en el celular la foto las tapaba y no se podian tocar) */
.visor-cerrar{
  position:absolute;top:22px;right:22px;z-index:6;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(15,16,18,.72);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:all .35s var(--curva)
}
.visor-cerrar:hover{background:var(--amarillo);color:#0b0b0b;transform:rotate(90deg)}
.visor-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(15,16,18,.72);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--curva)
}
.visor-nav:hover{background:var(--amarillo);color:#0b0b0b}
.visor-nav.prev{left:22px}
.visor-nav.next{right:22px}
.visor-pie{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  font-family:var(--disp);font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-2)}

/* ==========================================================================
   UBICACION / MAPA
   ========================================================================== */
.ubicacion{background:linear-gradient(180deg,var(--negro),var(--carbon))}
.ubicacion-par{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,54px);margin-top:54px;align-items:stretch}
.datos{display:flex;flex-direction:column;gap:16px}
.dato{
  display:flex;gap:16px;padding:24px;border-radius:var(--radio);
  background:linear-gradient(160deg,var(--grafito),#0d0f11);border:1px solid var(--linea);
  transition:transform .4s var(--curva),border-color .4s var(--curva)
}
.dato:hover{transform:translateX(5px);border-color:var(--linea-fuerte)}
/* el recuadro amarillo centra su icono en las dos direcciones.
   OJO: el recuadro es un <span>, por eso la regla de abajo apunta a
   ".dato div > span" y no a ".dato span" (que le pisaba el display) */
.dato .dato-ico{
  width:48px;height:48px;border-radius:13px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(253,206,30,.12);border:1px solid rgba(253,206,30,.3)
}
.dato .dato-ico svg{display:block;width:23px;height:23px;color:var(--amarillo)}
.dato b{display:block;font-family:var(--disp);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amarillo);margin-bottom:6px}
.dato p{color:#dfe2e5;font-size:16px;line-height:1.6}
.dato div > span{display:block;color:var(--texto-2);font-size:14.5px;margin-top:3px}
.mapa{
  position:relative;border-radius:var(--radio);overflow:hidden;min-height:440px;
  border:1px solid var(--linea);box-shadow:var(--sombra);background:#111
}
.mapa iframe{width:100%;height:100%;min-height:440px;border:0;display:block;
  filter:grayscale(.35) contrast(1.06) brightness(.92)}
.mapa-etiqueta{
  position:absolute;left:20px;bottom:20px;z-index:3;background:rgba(9,10,11,.9);
  backdrop-filter:blur(8px);border:1px solid var(--linea);border-left:3px solid var(--amarillo);
  padding:15px 20px;border-radius:12px;max-width:78%
}
.mapa-etiqueta b{font-family:var(--disp);font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.08em;display:block}
.mapa-etiqueta span{font-size:13.5px;color:var(--texto-2)}

/* ==========================================================================
   COTIZAR (tarjeta + modal)
   ========================================================================== */
.cotizar{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(253,206,30,.12),transparent 55%),
    linear-gradient(180deg,var(--carbon),#0a0b0c);
}
.cotizar-caja{
  position:relative;z-index:2;border-radius:26px;padding:clamp(30px,4.6vw,60px);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--linea-fuerte);box-shadow:var(--sombra);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center;
}
.cotizar-lista{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cotizar-lista li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#d3d7db}
.cotizar-lista svg{width:20px;height:20px;color:var(--amarillo);flex:0 0 auto;margin-top:3px}
.cotizar-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cotizar-panel{
  border-radius:20px;padding:30px;background:rgba(9,10,11,.72);border:1px solid var(--linea);
  backdrop-filter:blur(6px)
}
.cotizar-panel h3{font-size:24px;margin-bottom:6px}
.cotizar-panel > p{color:var(--texto-2);font-size:15px;margin-bottom:20px}
.mini-campos{display:grid;gap:12px}
.mini-campo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--linea)}
.mini-campo svg{width:19px;height:19px;color:var(--amarillo);flex:0 0 auto}
.mini-campo span{font-size:15px;color:#dfe2e5}
.disponible{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--disp);
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#cdd2d6}
.disponible i{width:9px;height:9px;border-radius:50%;background:#42d17a;display:block;position:relative}
.disponible i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#42d17a;
  animation:late 1.9s ease-out infinite}
@keyframes late{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}

/* --- ventana de cotizacion --- */
.modal{
  position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,5,6,.86);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .38s var(--curva),visibility .38s
}
.modal.abierto{opacity:1;visibility:visible}
.modal-caja{
  width:100%;max-width:640px;max-height:90vh;overflow-y:auto;border-radius:22px;
  background:linear-gradient(165deg,#14171a,#0c0e10);border:1px solid var(--linea-fuerte);
  box-shadow:var(--sombra);transform:translateY(26px) scale(.97);
  transition:transform .45s var(--curva);
}
.modal.abierto .modal-caja{transform:none}
.modal-cab{
  position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;gap:16px;
  padding:26px 28px 20px;background:linear-gradient(180deg,#14171a 70%,rgba(20,23,26,.6));
  border-bottom:1px solid var(--linea)
}
.modal-cab h3{font-size:27px}
.modal-cab p{color:var(--texto-2);font-size:14.5px;margin-top:5px}
.modal-x{
  margin-left:auto;width:42px;height:42px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:1px solid var(--linea);background:rgba(255,255,255,.05);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--curva)
}
.modal-x:hover{background:var(--amarillo);color:#0b0b0b;transform:rotate(90deg)}
.modal-cuerpo{padding:24px 28px 30px}
.campo{margin-bottom:18px}
.campo label{display:block;font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#e6e9ec;margin-bottom:8px}
.campo label small{color:var(--texto-2);letter-spacing:.06em;text-transform:none;font-family:var(--sans);
  font-size:12.5px;font-weight:400}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:11px;font-family:var(--sans);font-size:16px;
  background:rgba(255,255,255,.045);border:1px solid var(--linea);color:#fff;outline:none;
  transition:border-color .3s var(--curva),background .3s var(--curva),box-shadow .3s var(--curva)
}
.campo textarea{resize:vertical;min-height:84px}
.campo input::placeholder,.campo textarea::placeholder{color:#6d7379}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--amarillo);background:rgba(253,206,30,.06);box-shadow:0 0 0 3px rgba(253,206,30,.12)}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdce1e' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px}
.campo select option{background:#14171a;color:#fff}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 15px;border-radius:60px;cursor:pointer;font-size:14.5px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);color:#dfe2e5;
  transition:all .3s var(--curva)
}
.chip:hover{border-color:var(--amarillo);color:var(--amarillo)}
.chip.marcado{background:var(--amarillo);border-color:var(--amarillo);color:#0b0b0b;font-weight:600}
.personas{display:flex;align-items:center;gap:14px}
.paso-boton{
  width:44px;height:44px;border-radius:12px;cursor:pointer;color:#fff;font-size:22px;line-height:1;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--curva)
}
.paso-boton:hover{background:var(--amarillo);color:#0b0b0b;border-color:var(--amarillo)}
.personas .valor{font-family:var(--disp);font-size:30px;font-weight:700;color:#fff;min-width:56px;text-align:center}
.personas small{color:var(--texto-2);font-size:14px}
.modal-aviso{
  display:flex;gap:12px;padding:15px 17px;border-radius:12px;margin-bottom:22px;
  background:rgba(253,206,30,.08);border:1px solid rgba(253,206,30,.26);font-size:14.5px;
  color:#e4e7ea;line-height:1.6
}
.modal-aviso svg{width:19px;height:19px;color:var(--amarillo);flex:0 0 auto;margin-top:2px}
.modal-acciones{
  position:sticky;bottom:0;display:flex;flex-direction:column;gap:12px;padding:20px 28px 26px;
  background:linear-gradient(0deg,#0c0e10 60%,rgba(12,14,16,.65));border-top:1px solid var(--linea)
}
.modal-acciones .btn{width:100%}
.modal-acciones small{text-align:center;color:var(--texto-2);font-size:13px}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{background:#060708;border-top:1px solid var(--linea);padding:72px 0 0;position:relative;overflow:hidden}
.pie::before{
  content:"";position:absolute;top:-140px;right:-80px;width:520px;height:420px;
  background:radial-gradient(ellipse at center,rgba(253,206,30,.10),transparent 68%);pointer-events:none
}
.pie-rejilla{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .8fr .9fr 1fr;gap:40px}
.pie-marca{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pie-marca img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(253,206,30,.25))}
.pie-marca b{font-family:var(--disp);font-size:27px;color:#fff;text-transform:uppercase;letter-spacing:.05em;display:block;line-height:1}
.pie-marca span{font-family:var(--disp);font-size:13px;letter-spacing:.3em;color:var(--amarillo);text-transform:uppercase}
.pie p{color:var(--texto-2);font-size:15px;line-height:1.75}
.pie h4{font-size:17px;letter-spacing:.2em;margin-bottom:20px;color:#fff}
.pie ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.pie li a,.pie li span{color:var(--texto-2);font-size:15px;transition:color .3s var(--curva)}
.pie li a:hover{color:var(--amarillo)}
.pie-contacto li{display:flex;gap:11px;align-items:flex-start}
.pie-contacto svg{width:17px;height:17px;color:var(--amarillo);flex:0 0 auto;margin-top:5px}
.pie-redes{display:flex;gap:11px;margin-top:22px}
.pie-redes a{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);color:#fff;
  transition:all .35s var(--curva)
}
.pie-redes a svg{width:18px;height:18px}
.pie-redes a:hover{background:var(--amarillo);color:#0b0b0b;border-color:var(--amarillo);transform:translateY(-4px)}
.pie-abajo{
  position:relative;z-index:2;margin-top:56px;padding:24px 0;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.pie-abajo p{font-size:14px}
.pie-credito{font-size:14px;color:var(--texto-2)}
.pie-credito a{color:var(--amarillo);font-weight:600}
.pie-credito a:hover{text-decoration:underline}

/* ==========================================================================
   FLOTANTES
   ========================================================================== */
.wsp-flotante{
  position:fixed;right:22px;bottom:26px;z-index:150;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(140deg,#3ddc6b,#0f9d4a);color:#04240f;display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 0 rgba(61,220,107,.5);
  transition:transform .35s var(--curva);
  animation:onda 2.8s ease-out infinite
}
.wsp-flotante svg{width:30px;height:30px;color:#fff}
.wsp-flotante:hover{transform:scale(1.09)}
@keyframes onda{0%{box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 0 rgba(61,220,107,.5)}
  70%{box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 20px rgba(61,220,107,0)}100%{box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 0 rgba(61,220,107,0)}}

.subir{
  position:fixed;right:26px;bottom:98px;z-index:150;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--linea);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:all .4s var(--curva);backdrop-filter:blur(8px)
}
.subir.visible{opacity:1;visibility:visible}
.subir:hover{background:var(--amarillo);color:#0b0b0b;border-color:var(--amarillo)}

/* barra inferior solo movil */
.barra-movil{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:160;
  background:rgba(9,10,11,.96);backdrop-filter:blur(12px);border-top:1px solid var(--linea);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
}
.barra-movil a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 4px;border-radius:12px;
  font-family:var(--disp);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#cfd3d7;
  transition:background .3s var(--curva),color .3s var(--curva)
}
.barra-movil a svg{width:21px;height:21px;color:var(--amarillo)}
.barra-movil a.destacado{background:var(--amarillo);color:#0b0b0b}
.barra-movil a.destacado svg{color:#0b0b0b}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* en pantallas bajas no hay altura para el "Desliza": se oculta y quedan los puntos */
@media (max-height:840px){
  .portada-scroll{display:none}
}
@media (max-width:1180px){
  .nav a{padding:10px 11px;font-size:16px}
  .barra-tel{display:none}
  .confianza-rejilla{grid-template-columns:1fr 1fr}
  .servicios-rejilla{grid-template-columns:1fr 1fr}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:980px){
  /* barra mas alta y con el contenido abajo: asi el boton queda fuera de la
     franja de arriba que tapan algunos navegadores de celular. --tapa la pone
     el JS midiendo la ventana visible (por si el navegador tapa mas todavia) */
  :root{--barra:96px}
  .barra{
    height:auto;
    min-height:calc(var(--barra) + var(--tapa,0px) + env(safe-area-inset-top,0px));
    padding-top:calc(var(--tapa,0px) + env(safe-area-inset-top,0px));
    padding-bottom:12px;
    align-items:flex-end;
  }
  .nav{display:none}
  .menu-btn{display:block}
  /* el menu ocupa la derecha: al esconderse .nav (que era el que empujaba) hay
     que empujar a mano las acciones, si no la hamburguesa queda al lado del logo */
  .barra-acciones{margin-left:auto}
  /* BARRA FIJA OPACA: con fondo semitransparente el contenido que pasaba por
     detras (la cinta amarilla, fotos claras) se comia el boton: la hamburguesa
     amarilla sobre amarillo no se ve. Sin backdrop-filter (en algunos moviles
     ese filtro pinta mal y borra la barra) y sin cambiar de alto al scrollear. */
  .barra{background:linear-gradient(180deg,rgba(9,10,11,.97) 0%,rgba(9,10,11,.90) 62%,rgba(9,10,11,.55) 100%);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    transform:translateZ(0);will-change:transform;backface-visibility:hidden}
  .barra.pegada{
    height:auto;
    min-height:calc(var(--barra) + var(--tapa,0px) + env(safe-area-inset-top,0px));
    padding-bottom:12px;
    background:#0b0c0d;backdrop-filter:none;-webkit-backdrop-filter:none
  }
  .barra.pegada .marca-logo{width:60px;height:60px}
  /* la hamburguesa va sobre un circulo OSCURO casi solido: asi se ve sobre
     cualquier cosa que pase por detras (foto, cinta amarilla, secciones oscuras) */
  .menu-btn{
    background:rgba(13,14,16,.94);border-color:rgba(253,206,30,.6);
    box-shadow:0 6px 18px rgba(0,0,0,.5)
  }
  .menu-btn span{background:var(--amarillo)}
  .barra.pegada .menu-btn{background:#141618;border-color:rgba(253,206,30,.75)}
  .barra.pegada .menu-btn span{background:var(--amarillo)}
  .barra-acciones .btn{display:none}
  .nosotros-par{grid-template-columns:1fr}
  .nosotros-fotos .foto-secundaria{width:38%;height:auto;right:10px;bottom:-30px}
  .pasos{grid-template-columns:1fr 1fr;gap:32px 22px}
  .pasos::before{display:none}
  .km-rejilla{grid-template-columns:1fr}
  .ubicacion-par{grid-template-columns:1fr}
  .cotizar-caja{grid-template-columns:1fr}
  .galeria-rejilla{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .gfoto.grande{grid-column:span 2;grid-row:span 1}
  .gfoto.alto{grid-row:span 1}
  .serv h3{font-size:24px}
  .serv p{min-height:0}
}
@media (max-width:680px){
  body{font-size:16px}
  .envoltura{padding:0 18px}
  .seccion{padding:66px 0}
  .confianza-rejilla,.servicios-rejilla{grid-template-columns:1fr}
  .puntos-fuerte{grid-template-columns:1fr}
  .tile{padding:28px 22px}
  .portada{padding:calc(var(--barra) + 30px) 0 84px;min-height:auto}
  .portada h1{font-size:clamp(38px,11.5vw,58px)}
  .portada-botones .btn{width:100%}
  .portada-sellos{gap:12px 20px;margin-top:34px}
  .sello{font-size:15px}
  .portada-scroll{display:none}
  .cinta span{font-size:16px;gap:18px;padding:0 18px}
  .nosotros-placa{left:8px;top:14px;padding:12px 16px}
  .nosotros-placa b{font-size:24px}
  .nosotros-fotos .foto-secundaria{display:none}
  .pie-rejilla{grid-template-columns:1fr}
  .pie-abajo{flex-direction:column;text-align:center;justify-content:center}
  .galeria-rejilla{grid-template-columns:1fr;grid-auto-rows:210px}
  .gfoto.grande,.gfoto.ancho{grid-column:span 1}
  .mapa,.mapa iframe{min-height:340px}
  .campo-doble{grid-template-columns:1fr}
  .modal{padding:0;align-items:flex-end}
  .modal-caja{max-width:100%;max-height:94vh;border-radius:22px 22px 0 0}
  .visor{padding:72px 14px 116px}
  .visor img{max-width:100%;max-height:64vh}
  /* en el celular las flechas van abajo, centradas y juntas, para que no tapen la foto */
  .visor-nav{top:auto;bottom:24px;transform:none;width:52px;height:52px}
  .visor-nav.prev{left:calc(50% - 60px)}
  .visor-nav.next{right:calc(50% - 60px)}
  .visor-pie{bottom:88px;font-size:14px}
  /* la cruz tambien abajo: arriba quedaba tapada por la barra del navegador */
  .visor-cerrar{top:auto;bottom:24px;right:16px;width:52px;height:52px}
  /* en movil el WhatsApp verde flotante no va: la barra de abajo ya tiene Cotizar */
  .wsp-flotante{display:none}
  .subir{display:none}
  .barra-movil{display:flex}
  .pie{padding-bottom:70px}
}