/* Ruta Motors Chile - hoja de estilos propia.
   Rediseno negro + amarillo/dorado (direccion visual pedida por Felipe via
   mockups): fondo negro (no navy azulado) en header/hero/footer/CTAs, fondo
   gris claro en el resto, acento amarillo saturado para CTAs/precios/nav
   activo. Corregido el 24-08-2026: el logo real y las publicaciones de
   Instagram de Ruta Motors usan negro puro (~#010101, medido con Pillow),
   no el navy azulado que se habia usado en el primer rediseno.
   Tipografia condensada bold (Oswald) para titulares, Inter para texto. */

:root{
  /* Negro (marca). El nombre de variable sigue siendo --navy por historia
     del proyecto, pero el valor ya es negro neutro, no azul. */
  --navy:#0d0d0d;
  --navy-2:#1a1a1a;
  --navy-3:#050505;
  /* Amarillo / dorado (acento unico). Medido con Pillow sobre el logo real
     (static/img/brand/logo-rutamotors.jpg): el amarillo dominante de las
     letras es #FDBB05 (antes se usaba #f4b400, una aproximacion de mockup
     mas apagada/naranja que no calzaba con el archivo real de Felipe).
     --gold-dark y --gold-text se recalcularon en HSL a partir del mismo
     tono/saturacion de #FDBB05 para reproducir EXACTAMENTE los mismos
     ratios de contraste WCAG que ya se habian medido antes (no a ojo). */
  --gold:#fdbb05;
  --gold-dark:#c69102;
  /* Version oscura del dorado para TEXTO chico sobre fondos claros: #fdbb05
     como texto da ~1.7:1 de contraste sobre blanco (falla WCAG AA). Esta
     version da 5.54:1 (mismo ratio que la version anterior). El amarillo
     saturado se sigue usando en botones solidos (con texto navy encima) y
     sobre fondos navy, donde si cumple. */
  --gold-text:#866301;
  /* Superficies claras */
  --bg:#f3f5f9;
  --bg-2:#e8ecf3;
  --paper:#ffffff;
  --line:#dde3ec;
  --text:#16223b;
  --muted:#5c6b85;
  --white:#fff;
  --price-color:var(--navy);
  --input-bg:#fff;
  --radius:14px;
  --radius-sm:8px;
  /* Sombras con tinte del negro de marca (13,13,13), no negro puro generico. */
  --shadow:0 18px 45px rgba(13,13,13,.16);
  --shadow-sm:0 6px 18px rgba(13,13,13,.12);
  --ff-display:'Oswald','Segoe UI',system-ui,sans-serif;
  --ff-text:'Inter','Segoe UI',system-ui,sans-serif;
}

/* ===== Modo oscuro (sitio publico) =====
   El navy ya es la superficie oscura de marca (header/hero/footer/CTAs se
   mantienen navy en ambos temas: es identidad, no "modo claro"). Lo que
   cambia en modo oscuro son las superficies que en modo claro son gris
   claro: fondo de pagina, cards, inputs, bordes. Se recalculan los tokens
   de texto/acento que dependen de esas superficies para seguir cumpliendo
   contraste AA. No se usan negro puro ni blanco puro como fondo/texto. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0a0a;
    --bg-2:#121212;
    --paper:#161616;
    --line:#2a2a2a;
    --text:#eef1f6;
    --muted:#a3a3a3;
    --input-bg:#121212;
    --price-color:#ffcb3d;
    --gold-text:#fdbb05;
    --shadow:0 18px 45px rgba(13,13,13,.5);
    --shadow-sm:0 6px 18px rgba(13,13,13,.4);
  }
}

*{box-sizing:border-box}
/* 04-09-2026: Diego marco la barra de scroll nativa (gris, del navegador)
   como algo que "no deberia estar" -- tercera vez en la sesion (carrusel,
   miniaturas de fotos, y ahora la pagina entera). Se saca en todos lados
   por consistencia: el scroll en si sigue funcionando igual (rueda, touch,
   flechas de teclado), solo desaparece la barra visual. */
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
/* 04-09-2026: Diego pidio que el pinch-zoom SOLO funcione sobre las fotos
   de la galeria de la ficha de vehiculo, no en el resto del sitio (botones,
   formularios, etc. quedaban zoomeables por accidente al tocar la
   pantalla). touch-action, no el meta viewport: asi el zoom de
   accesibilidad del navegador/SO (Ctrl + rueda, gestos del sistema) sigue
   intacto, solo se saca el pinch-to-zoom DENTRO de la pagina. La foto
   principal de la galeria lo recupera explicitamente, ver .galeria-main. */
html,body{touch-action:pan-x pan-y}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.08;margin:0 0 .5rem;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
p{margin:0 0 1rem}
.container{width:min(1180px,92vw);margin:0 auto}
.section{padding:4.5rem 0}
.section-tight{padding:2.75rem 0}
.eyebrow{
  font-family:var(--ff-display);
  font-size:.76rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold-text);
  margin-bottom:.65rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold-text);display:inline-block}
.muted{color:var(--muted)}

/* Salta al contenido: accesibilidad de teclado, oculto hasta enfocarse */
.skip-link{
  position:absolute;left:1rem;top:-60px;background:var(--gold);color:var(--navy);
  padding:.7rem 1.2rem;border-radius:var(--radius-sm);font-weight:700;z-index:100;
  text-decoration:none;transition:top .15s;
}
.skip-link:focus{top:1rem}

/* 04-09-2026: Diego mando auto360.cl como referencia (la que le paso Pablo)
   marcando puntualmente los botones -- pill (borde 100% redondo) en vez del
   6px anterior. Se cambia en el componente base .btn, no solo en el hero:
   es el mismo boton reutilizado en nav, formularios, filtros, etc, cambiar
   la forma en un solo lugar y no dejar unos pill y otros cuadrados. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff-display);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-dark);color:var(--navy);box-shadow:0 8px 22px rgba(253,187,5,.35)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff}
.btn-outline{background:transparent;border-color:var(--text);color:var(--text)}
.btn-outline:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-sm{padding:.55rem 1.1rem;font-size:.78rem}
.btn-block{width:100%}

/* Link de "ver más" — reemplaza el botón-fantasma repetido en cada sección
   (mismo botón outline usado como affordance genérica en todos lados es lo
   que hace sentir el sitio a plantilla). Mismo lenguaje visual que .vc-cta
   (Ver detalles →) que ya existía en las tarjetas de vehículo. */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-display);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gold-text);
  text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.15rem;
  transition:border-color .16s,gap .16s,color .16s;
}
.link-arrow i{transition:transform .16s}
.link-arrow:hover{border-color:var(--gold-text);gap:.7rem}
.link-arrow:hover i{transform:translateX(3px)}
.link-arrow-light{color:#fff}
.link-arrow-light:hover{border-color:#fff}

/* ===== Franja de aviso: contenido de muestra ===== */
.aviso-muestra{
  background:var(--navy-3);color:#e9edf6;font-size:.8rem;text-align:center;
  padding:.5rem 1rem;letter-spacing:.02em;
}
.aviso-muestra strong{color:var(--gold)}

/* ===== Header ===== */
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.brand{display:flex;align-items:center;text-decoration:none;color:#fff;line-height:1;flex-shrink:0}
/* Logo real (JPG con fondo negro solido): se muestra dentro de una placa
   negra propia para que el fondo del archivo se funda sin borde visible,
   sea cual sea el color de fondo detras (navy en header/footer). */
.brand-logo-badge{
  display:inline-flex;align-items:center;
}
.brand-logo{height:50px;width:auto;display:block}
.footer-logo-badge{display:inline-flex}
.footer-logo{width:150px;height:150px;object-fit:contain;display:block}
@media(max-width:500px){.footer-logo{width:120px;height:120px}}

.main-nav{display:flex;align-items:center;gap:1.9rem}
.main-nav a{text-decoration:none;color:rgba(255,255,255,.82);font-size:.88rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;transition:color .15s;position:relative;padding-bottom:.3rem}
.main-nav a:hover{color:var(--gold)}
.main-nav a.active{color:#fff}
.main-nav a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
}
.header-actions{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:.45rem .6rem;font-size:1.1rem}
/* Copia mobile del "Cotiza ahora": oculta por default, solo aparece dentro
   del menu desplegable (ver el breakpoint de abajo). En desktop el boton
   real vive en .header-actions, este nunca se ve ahi. */
.nav-cta-mobile{display:none}

@media(max-width:1140px){
  .main-nav{position:fixed;inset:66px 0 auto 0;background:var(--navy);flex-direction:column;align-items:flex-start;
    padding:1rem 6vw 1.5rem;gap:0;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
    border-bottom:1px solid rgba(255,255,255,.12);}
  .main-nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
  .main-nav a{padding:.8rem 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .main-nav a.active::after{display:none}
  .nav-toggle{display:inline-block}
  /* Especificidad .main-nav .nav-cta-mobile (2 clases) > .main-nav a (clase
     + elemento): asi gana sobre el padding/border-bottom que .main-nav a le
     pone a los links normales del menu, y se ve como boton de verdad. */
  .main-nav .nav-cta-mobile{
    display:inline-flex;width:100%;margin-top:1.4rem;border-bottom:none;padding:.85rem 1.6rem;
  }
}

/* ===== Hero (home): foto de fondo llena + overlay navy ===== */
.hero{
  position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;
  background:var(--navy-3);
  /* vh clasico cuenta el alto de pantalla completo, TAPE la barra de
     direccion del navegador movil incluida -- en el celular real el hero
     terminaba mas apretado de lo que se ve en desktop. dvh es el alto
     visible de verdad; min-height con fallback a vh para navegadores viejos. */
  min-height:min(78vh,640px);
  min-height:min(78dvh,640px);
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, var(--navy) 8%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.38) 68%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;padding:3.5rem 0 3.25rem;width:100%}
.hero-inner .eyebrow{color:var(--gold)}
.hero-inner .eyebrow::before{background:var(--gold)}
/* 04-09-2026: "TU PROXIMO AUTO TE ESPERA" envuelve a 2 lineas (max-width:
   16ch) y hereda line-height:1.08 del h1 global -- pensado para titulos
   de 1 sola linea. En 2 lineas eso se ve como texto pegado/sin interlineado,
   NO era el espacio entre eyebrow/h1/parrafo (ya se subio 3 veces sin que
   arreglara esto -- porque el problema real estaba adentro del titulo). */
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);color:#fff;max-width:16ch;margin-bottom:.7rem;line-height:1.2}
.hero p.lead{color:rgba(255,255,255,.88);font-size:1.1rem;max-width:46ch;margin-bottom:1.75rem;text-transform:none}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}

@media(max-width:700px){
  .hero{min-height:min(88vh,560px);min-height:min(88dvh,560px)}
  /* 04-09-2026: dos rondas de ajuste chico (.9/1/2rem, despues 1.2/1.4/2.4rem)
     y en un celular real SEGUIA viendose pegado -- el titulo es gigante
     (2.3rem minimo) y al lado de eso hasta 1.2rem de margen se ve chico.
     Esta vez se sube en serio, no en incrementos de a poco. */
  .hero-inner{padding:2.8rem 0 3.2rem}
  .hero .eyebrow{margin-bottom:2rem}
  .hero h1{margin-bottom:1.6rem}
  .hero p.lead{margin-bottom:2.6rem}
  .hero-ctas{gap:1rem}
}

/* ===== Hero de pagina interior (catalogo / contacto): mas chico ===== */
.page-hero{position:relative;overflow:hidden;color:#fff;min-height:280px;display:flex;align-items:center;background:var(--navy-3)}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg, var(--navy) 30%, rgba(0,0,0,.55) 100%);pointer-events:none}
.page-hero-inner{position:relative;z-index:1;padding:2.6rem 0}
.page-hero h1{color:#fff;margin-bottom:.4rem;font-size:clamp(1.9rem,4vw,2.6rem)}
.page-hero p{color:rgba(255,255,255,.78);margin:0;font-size:1.02rem}

/* ===== Trust badges (franja debajo del hero) =====
   Antes: ícono de línea suelto, mismo layout que cualquier franja de "por
   qué elegirnos" genérica. Ahora: ícono dentro de placa dorada — mismo
   lenguaje del acento gold que ya usa .eyebrow/.badge-vendido, no un
   agregado nuevo. Costura superior en degradé (--gold-text a transparente)
   para que la franja no se sienta como un bloque plano pegado al hero. */
.trust-strip{
  background:var(--paper);border-bottom:1px solid var(--line);position:relative;
}
.trust-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-text) 20%,var(--gold-text) 80%,transparent);
  opacity:.55;
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:2.4rem 0}
.trust-item{display:flex;align-items:flex-start;gap:1rem}
.trust-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2.6rem;height:2.6rem;border-radius:50%;
  background:linear-gradient(155deg,var(--gold) 0%,var(--gold-dark) 100%);
  box-shadow:0 4px 14px rgba(253,187,5,.3);
}
.trust-item i{font-size:1.15rem;color:var(--navy);flex-shrink:0}
.trust-item b{display:block;font-family:var(--ff-display);font-size:.92rem;text-transform:uppercase;letter-spacing:.02em}
.trust-item span{font-size:.82rem;color:var(--muted)}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}}

/* ===== Contadores animados ===== */
.contadores{background:var(--navy-3);color:#fff}
.contadores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;text-align:center;padding:2.6rem 0}
.contador-num{font-family:var(--ff-display);font-size:clamp(2.1rem,4vw,3rem);font-weight:700;color:var(--gold)}
.contador-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.72);margin-top:.35rem}
@media(max-width:700px){.contadores-grid{grid-template-columns:1fr;gap:1.5rem}}

/* ===== Carrusel de vendidos ===== */
.vendidos-section{
  background:var(--navy);color:#fff;padding:4rem 0;position:relative;
  /* Costura con la seccion anterior: glow dorado sutil arriba, en vez del
     corte plano bloque-claro→bloque-oscuro. */
  background-image:radial-gradient(1200px 260px at 50% 0%, rgba(253,187,5,.09), transparent 70%);
}
.vendidos-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(253,187,5,.4) 30%,rgba(253,187,5,.4) 70%,transparent);
}
.vendidos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.vendidos-head h2{color:#fff}
.carousel-vendidos{position:relative}
/* Sin scrollbar nativa: ya hay flechas prev/next (.carousel-btn) para
   navegar, la barra del navegador es ruido redundante encima del carrusel. */
.carousel-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.vendido-card{
  flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start;background:var(--navy-2);
  border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.1);
  text-decoration:none;color:inherit;transition:transform .18s;
}
.vendido-card:hover{transform:translateY(-4px)}
.vendido-photo{position:relative;aspect-ratio:4/3;background:#000}
.vendido-photo img{width:100%;height:100%;object-fit:cover;opacity:.86}
.vendido-stamp{
  position:absolute;top:.8rem;right:-2.2rem;transform:rotate(35deg);
  background:var(--gold);color:var(--navy);font-family:var(--ff-display);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem 2.6rem;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.vendido-body{padding:1rem 1.15rem 1.25rem}
.vendido-body h3{font-size:1rem;color:#fff;margin-bottom:.2rem;text-transform:none}
.vendido-meta{font-size:.8rem;color:rgba(255,255,255,.6)}
.carousel-nav{display:flex;gap:.6rem;margin-top:1.2rem}
.carousel-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s;
}
.carousel-btn:hover{background:rgba(255,255,255,.12)}

/* ===== Grilla / cards de vehiculo =====
   Foto con overlay degradado (categoria + modelo + precio encima de la
   imagen), y una franja inferior con specs + "Ver detalles". Un solo
   componente reutilizado en home / catalogo / relacionados / vendidos. */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.vehiculo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.vehiculo-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;
}
.vehiculo-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.vc-photo{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
/* Las fotos van apiladas una encima de otra y se cruzan por opacidad. La
   primera queda en el flujo normal para que .vc-photo conserve su alto; las
   demas van absolutas encima. */
.vc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vc-photo .vc-foto{position:absolute;inset:0;opacity:0;transition:opacity .45s ease, transform .3s}
.vc-photo .vc-foto:first-child{position:relative}
.vc-photo .vc-foto.is-activa{opacity:1}
.vehiculo-card:hover .vc-photo img{transform:scale(1.05)}

/* Puntitos de posicion, arriba a la derecha para no chocar con las insignias
   (que van a la izquierda) ni con el titulo y el precio (que van abajo). */
.vc-puntos{
  position:absolute;top:.7rem;right:.7rem;z-index:2;display:flex;gap:.28rem;
  opacity:0;transition:opacity .25s;
}
.vehiculo-card:hover .vc-puntos{opacity:1}
.vc-puntos i{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .25s,transform .25s;
}
.vc-puntos i.is-activo{background:var(--gold);transform:scale(1.35)}

/* Sin mouse (celular y tablet) no hay hover que dispare nada: se ve la foto
   de portada y listo. No se fuerza el paso automatico ahi a proposito --
   serian 12 tarjetas animandose solas y bajando fotos con datos moviles. */
@media (hover:none){
  .vc-puntos{display:none}
}
.vc-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 55%, transparent 78%);
}
.vc-badges{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2}
.badge{
  font-family:var(--ff-display);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.28rem .6rem;border-radius:4px;background:var(--navy);color:#fff;
}
.badge-nuevo{background:var(--gold);color:var(--navy)}
.badge-ejemplo{background:var(--gold);color:var(--navy)}
.badge-outline{background:rgba(255,255,255,.92);color:var(--navy);border:1px solid var(--line)}
.badge-sold{position:absolute;top:.7rem;right:.7rem;background:var(--navy);color:#fff;z-index:2}
.badge-rust{background:var(--navy)}
.badge-olive{background:var(--navy-2)}
.badge-gold{background:var(--gold);color:var(--navy)}
.vc-video-flag{
  position:absolute;top:3.15rem;right:.7rem;background:rgba(0,0,0,.75);color:#fff;
  border-radius:999px;width:32px;height:32px;display:grid;place-items:center;font-size:.9rem;z-index:2;
}
.vc-overlay{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem .9rem;z-index:1;color:#fff}
.vc-category{font-family:var(--ff-display);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.vc-name{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:#fff;margin:.15rem 0 .3rem;text-transform:uppercase}
.vc-price-row{display:flex;align-items:baseline;gap:.5rem}
.vc-price{font-family:var(--ff-display);font-weight:700;font-size:1.35rem;color:var(--gold)}
.vc-price-antes{font-size:.78rem;color:rgba(255,255,255,.65);text-decoration:line-through}
.vc-footer{
  padding:.75rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border-top:1px solid var(--line);background:var(--paper);margin-top:auto;
}
.vc-specs{font-size:.76rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem}
.vc-cta{
  font-family:var(--ff-display);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--navy);display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.vc-cta i{color:var(--gold-text)}
.vc-mayorista{font-size:.66rem;color:var(--gold-text);font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ===== Seccion split: foto + panel navy ===== */
.split-section{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-photo{position:relative;min-height:360px;background:var(--bg-2)}
.split-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split-panel{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:3.5rem min(8vw,4.5rem)}
.split-panel .eyebrow{color:var(--gold)}
.split-panel .eyebrow::before{background:var(--gold)}
.split-panel h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);max-width:14ch}
.split-panel p{color:rgba(255,255,255,.82);max-width:42ch}
@media(max-width:860px){
  .split-section{grid-template-columns:1fr}
  .split-photo{min-height:280px}
  .split-panel{padding:2.6rem 6vw}
}

/* ===== Testimonios ===== */
.testimonios-section{background:var(--bg);padding:4.5rem 0}
/* 13-10-2026: 11 clientes reales, foto + frase. Una fila que se desliza
   (scroll-snap) en todo tamano: en grilla serian 3-4 filas de fotos altas.
   El desborde queda DENTRO de la fila, la pagina no se mueve de lado. En
   escritorio se ven 3 tarjetas y media, para que se note que hay mas. */
.testi-fila{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.2rem .2rem 1rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.testi-fila:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--radius)}
.testi-card{flex:0 0 calc((100% - 3 * 1.1rem) / 3.5);scroll-snap-align:start;margin:0;
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* height:auto es obligatorio: el atributo height="800" del <img> (que esta
   para reservar el espacio) si no gana y anula el aspect-ratio. */
.testi-media{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#000}
.testi-texto{margin:0;padding:1.1rem 1.1rem .6rem;font-size:.92rem;line-height:1.5;flex:1}
.testi-nombre{padding:0 1.1rem 1.1rem;font-family:var(--ff-display);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.testi-nombre::before{content:'';width:18px;height:2px;background:var(--gold)}
.testi-tag{font-family:inherit;font-size:.7rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.testi-flechas{display:flex;gap:.5rem}
.testi-flecha{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:inherit;
  display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:background .2s,border-color .2s}
.testi-flecha:hover{background:var(--gold);border-color:var(--gold);color:#0d0d0d}
.testi-flecha:disabled{opacity:.35;cursor:default;background:var(--paper);border-color:var(--line);color:inherit}
@media(max-width:920px){.testi-card{flex-basis:calc((100% - 1.1rem) / 2.3)}}
@media(max-width:560px){
  .testi-card{flex-basis:80%}
  /* En celular se desliza con el dedo; las flechas solo estorban. */
  .testi-flechas{display:none}
}

/* ===== Banner CTA (foto oscura + overlay navy) ===== */
.cta-banner{position:relative;overflow:hidden;color:#fff;padding:5rem 0;text-align:center}
.cta-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.cta-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.94));pointer-events:none}
.cta-banner-inner{position:relative;z-index:1}
.cta-banner h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.6rem}
.cta-banner p{color:rgba(255,255,255,.82);max-width:46ch;margin:0 auto 1.6rem}

/* ===== Catalogo: hero + pills + drawer de filtros ===== */
.catalog-pills{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:2rem}
.catalog-pill{
  font-family:var(--ff-display);font-weight:600;font-size:.82rem;padding:.55rem 1.2rem;text-transform:uppercase;letter-spacing:.02em;
  border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--paper);transition:background .15s,color .15s,border-color .15s;
}
.catalog-pill:hover{border-color:var(--navy)}
.catalog-pill.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.catalog-pill-spacer{flex:1}

.catalog-tabs{display:flex;gap:.6rem;margin:0 0 1.6rem}
.catalog-tab{
  font-family:var(--ff-display);font-weight:600;font-size:.82rem;padding:.5rem 1.1rem;text-transform:uppercase;
  border-radius:999px;text-decoration:none;color:var(--muted);border:1px solid var(--line);background:var(--paper);
}
.catalog-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}

.filter-toggle{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:#fff;border:0;border-radius:6px;
  padding:.6rem 1.2rem;font-family:var(--ff-display);font-weight:600;font-size:.82rem;text-transform:uppercase;cursor:pointer;
}
.filter-toggle:hover{background:var(--navy-2)}

.filters-aside{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);z-index:71;background:var(--paper);
  border-right:1px solid var(--line);overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease;
  box-shadow:var(--shadow);padding:1.5rem 1.4rem 2rem;
}
.filters-aside.open{transform:translateX(0)}
.filters-aside h2{font-size:1rem;margin-bottom:1rem}
.filters-close{
  display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.6rem;font-family:var(--ff-display);font-weight:600;font-size:.85rem;margin-bottom:1.2rem;cursor:pointer;
}
.filter-group{margin-bottom:1.1rem}
.filter-group label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem}
.filter-group select,.filter-group input{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;
  font-size:.88rem;background:var(--input-bg);color:var(--text);font-family:var(--ff-text);
}
.filter-range{display:flex;gap:.5rem}

.filters-scrim{
  display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.filters-scrim.open{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion: reduce){
  .filters-aside{transition:none}
  .filters-scrim{transition:none}
}

.results-count{font-size:.85rem;color:var(--muted);margin:0 0 1.2rem}
.pagination-row{display:flex;justify-content:center;gap:.4rem;margin-top:2.5rem;flex-wrap:wrap}
.page-btn{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);font-size:.85rem;
  transition:border-color .15s,background .15s,color .15s;
}
.page-btn:hover:not(.active){border-color:var(--gold-text);color:var(--gold-text)}
.page-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===== Ficha de vehiculo ===== */
/* minmax(0, ...) y no solo 1.35fr/1fr: sin el piso en 0 una columna de grid
   no puede encoger mas alla del min-content de su contenido, y una foto real
   de celular (2880x3854, mucho mas grande que el 900x675 de las fotos de
   stock que se usaban antes) empuja la columna entera fuera del viewport
   -- overflow horizontal real, no cosmetico (bug real reportado por Diego,
   reproducido: 990px de overflow a 1920px de ancho). */
.detalle-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.8rem;align-items:start}
.galeria-main{position:relative;aspect-ratio:4/3;background:var(--navy);border-radius:var(--radius);overflow:hidden}
.galeria-main img{touch-action:pinch-zoom}
.galeria-main img{width:100%;height:100%;object-fit:cover}
/* Contador "1/27": referencia tomada de auto360.cl (la web que el cliente
   mostro al cerrar). Con galerias reales de hasta 27 fotos por vehiculo,
   avisa cuantas mas hay sin que el usuario tenga que contar los thumbs. */
.galeria-contador{position:absolute;right:.9rem;bottom:.9rem;background:rgba(10,10,10,.72);color:#fff;
  font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;display:flex;align-items:center;gap:.35rem}
.descripcion-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.descripcion-lista li{position:relative;padding-left:1.3rem;font-size:.94rem;color:var(--text)}
.descripcion-lista li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.galeria-thumbs{display:flex;gap:.6rem;margin-top:.8rem;overflow-x:auto;scrollbar-width:none}
.galeria-thumbs::-webkit-scrollbar{display:none}
.galeria-thumbs img{
  width:74px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.6;
  border:2px solid transparent;transition:opacity .15s,border-color .15s;flex-shrink:0;
}
.galeria-thumbs img.active{opacity:1;border-color:var(--gold)}
.video-block{margin-top:1.6rem}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy)}
/* El <video> del archivo subido usa el mismo marco 16/9 que el iframe de
   YouTube. object-fit:contain y no cover: un clip grabado en vertical con el
   celular -- que es como los manda Felipe -- se veria recortado por los lados
   con cover, y en una ficha de auto eso corta justo la camioneta. */
.video-frame iframe,
.video-frame video{width:100%;height:100%;border:0}
.video-frame video{object-fit:contain;background:var(--navy);display:block}
.video-pending{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  color:rgba(255,255,255,.75);text-align:center;padding:2rem;
}
.video-pending i{font-size:2.2rem;color:var(--gold)}

.detalle-info h1{font-size:1.9rem;margin-bottom:.4rem}
.detalle-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.detalle-precio{font-family:var(--ff-display);font-weight:700;font-size:2.1rem;color:var(--price-color);margin-bottom:.2rem}
.detalle-precio-antes{font-size:1rem;text-decoration:line-through;color:var(--muted);margin-right:.5rem}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.2rem;margin:1.5rem 0;padding:1.3rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.spec-item{display:flex;flex-direction:column;gap:.15rem}
.spec-item span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.spec-item b{font-size:.94rem}
.mayorista-tag{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--gold-text);
  border:1px solid var(--gold-text);border-radius:999px;padding:.2rem .6rem;font-weight:700;
}
.consulta-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.5rem;margin-top:1.6rem}
.consulta-box h3{color:#fff;font-size:1.05rem;text-transform:none}
.consulta-box .form-control{
  width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;
  border-radius:var(--radius-sm);padding:.65rem .8rem;margin-bottom:.7rem;font-size:.9rem;
}
.consulta-box .form-control::placeholder{color:rgba(255,255,255,.45)}
.cupon-aplicado{background:rgba(253,187,5,.15);border:1px solid var(--gold);border-radius:var(--radius-sm);padding:.8rem 1rem;margin:1rem 0;font-size:.86rem}

@media(max-width:920px){.detalle-layout{grid-template-columns:minmax(0,1fr)}.specs-grid{grid-template-columns:1fr 1fr}}

/* ===== Pagina Contacto ("Reserva tu hora") ===== */
.contacto-cards{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:start}
.contacto-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.contacto-card h2{font-size:1.3rem;margin-bottom:.3rem}
.contacto-card .form-group{margin-bottom:1.1rem}
.contacto-card label{display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.4rem}
.contacto-card .form-control{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;
  font-size:.92rem;background:var(--input-bg);color:var(--text);font-family:var(--ff-text);
}
/* Honeypot anti-spam (ver ConsultaForm.pagina_web): fuera de pantalla, no
   display:none -- algunos bots detectan y saltan los display:none, esto
   sigue siendo un input "visible" para el DOM pero invisible para una
   persona. */
.hp-wrap{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.contacto-info-list{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.9rem}
.contacto-info-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:.94rem}
.contacto-info-list i{color:var(--gold-text);font-size:1.05rem;margin-top:.15rem}
.mapa-box{margin-top:1.2rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:var(--bg-2)}
.mapa-box iframe{width:100%;height:100%;border:0}
.mapa-placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  color:var(--muted);text-align:center;padding:2rem;
}
.mapa-placeholder i{font-size:2rem;color:var(--navy)}
@media(max-width:900px){
  .contacto-cards{grid-template-columns:1fr}
  /* El boton flotante de WhatsApp (fixed, z-index:60) tapaba la esquina del
     textarea "Mensaje" en una sola columna. Subimos el card por encima. */
  .contacto-card{position:relative;z-index:61}
}

/* ===== Footer ===== */
.site-footer{background:var(--navy);color:rgba(255,255,255,.78);padding:3.4rem 0 1.6rem;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.footer-grid h3{color:#fff;font-size:.82rem;margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.08em}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.88rem}
.footer-links a{text-decoration:none;color:inherit}
.footer-links a:hover{color:var(--gold)}
.footer-social{display:flex;gap:.7rem;margin-top:.9rem}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;text-decoration:none;color:#fff}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.4rem;font-size:.78rem;text-align:center;color:rgba(255,255,255,.5);line-height:1.8}
.copyright a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.copyright a:hover{color:var(--gold-text)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem}}
/* En celular real 2 columnas seguian muy apretadas para textos largos
   ("Consultar disponibilidad por WhatsApp", direcciones) -- se apila 1 sola. */
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:2.2rem}}

/* ===== WhatsApp / Instagram flotantes ===== */
.wa-float,.ig-float{
  position:fixed;right:1.4rem;width:56px;height:56px;border-radius:50%;
  color:#fff;display:grid;place-items:center;font-size:1.5rem;z-index:60;
  box-shadow:0 10px 26px rgba(0,0,0,.28);text-decoration:none;transition:transform .15s;
}
.wa-float{bottom:1.4rem;background:#25D366}
.wa-float:hover{transform:scale(1.06);color:#fff}
/* Apilado arriba del de WhatsApp (56px + gap 12px = 68px de bottom). */
.ig-float{
  bottom:5.65rem;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.ig-float:hover{transform:scale(1.06);color:#fff}

/* ===== Toasts (mensajes) ===== */
.toast-stack{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:.5rem;width:min(420px,92vw)}
.toast-msg{
  background:var(--navy);color:#fff;border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.86rem;
  box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s;
  display:flex;align-items:center;gap:.5rem;
}
.toast-msg.show{opacity:1;transform:translateY(0)}
.toast-success{border-left:4px solid #4a9d5f}
.toast-error{border-left:4px solid #d64545}
.toast-warning{border-left:4px solid var(--gold)}
.toast-info{border-left:4px solid var(--navy-2)}

/* ===== Reveal on scroll =====
   04-09-2026: la animacion en si (opacity/y/scale) ahora la maneja GSAP
   en site.js via inline styles -- si se dejara .reveal{opacity:0} aca y el
   CDN de GSAP no cargara, el contenido quedaria escondido para siempre
   (el mismo bug que tuvieron las tarjetas clonadas del carrusel). Sin
   regla de CSS, un fallo de CDN simplemente deja el contenido visible sin
   animar, nunca invisible. */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ===== Foco visible (WCAG 2.4.7) =====
   Varios elementos interactivos son links/botones sin el look nativo de
   navegador (badges, cards, botones de icono), asi que se define un anillo
   de foco propio, consistente en ambos temas y visible tanto sobre fondos
   claros como sobre el header/hero/footer navy. Solo aplica en navegacion
   por teclado (:focus-visible), no al hacer click con mouse. */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
.vehiculo-card:focus-visible,.vendido-card:focus-visible{
  outline-offset:4px;
}

/* ===== Estados de error de formulario ===== */
.form-error{
  color:#ffb4a0;background:rgba(214,69,69,.18);border:1px solid rgba(214,69,69,.5);
  border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:.82rem;margin:-.4rem 0 .7rem;
}
.consulta-box .is-invalid{border-color:#ff8a68 !important;box-shadow:0 0 0 2px rgba(255,138,104,.25)}
.contacto-card .form-error{color:#a3271f;background:rgba(214,69,69,.1);border-color:rgba(214,69,69,.35)}

/* ===== Utilidades varias ===== */
.text-center{text-align:center}
.mt-0{margin-top:0}
.empty-state{padding:3rem 1rem;text-align:center;color:var(--muted)}
.empty-state i{font-size:2.4rem;color:var(--line);margin-bottom:.8rem;display:block}

/* Carrusel de stock en la home (29-08-2026, pedido de Felipe).
   Reusa .carousel-track y .carousel-btn del carrusel de vendidos. Lo unico
   propio es el ancho de la tarjeta: dentro de un flex sin ancho, .vehiculo-card
   colapsa al minimo de su contenido y las fotos quedan como estampillas. */
.carrusel-stock{position:relative}
.carrusel-stock .carousel-track{gap:1.6rem;scroll-padding-left:2px}
.carrusel-stock .vehiculo-card{flex:0 0 320px;max-width:320px;scroll-snap-align:start}
.carrusel-stock .carousel-nav{margin-top:1.1rem}
.carousel-btn:disabled{opacity:.25;cursor:default}

/* Las flechas nacieron en la seccion de vendidos, que es OSCURA: borde y color
   blancos. En la home el fondo es claro y quedaban practicamente invisibles
   -- se veian solo al pasar el mouse por encima. Aca van en el color de la
   marca. Se vio mirando la captura; el HTML no lo dice. */
.carrusel-stock .carousel-btn{
  border-color:rgba(11,18,32,.28);color:var(--navy,#0b1220);background:#fff;
}
.carrusel-stock .carousel-btn:hover:not(:disabled){background:var(--navy,#0b1220);color:#fff}

@media (max-width:640px){
  /* En movil la tarjeta ocupaba casi todo el ancho y la siguiente NO asomaba:
     el carrusel se veia como una foto suelta y nadie descubria que hay mas.
     Con 78vw asoma el borde de la que viene, que es la unica senal de que se
     puede deslizar. */
  .carrusel-stock .vehiculo-card{flex-basis:78vw;max-width:78vw}
  .carrusel-stock .carousel-track{gap:1rem}
}

/* ===== Grano ===== */
/* Textura fija sobre toda la pagina, opacidad muy baja: rompe la planitud de
   los bloques de color solido (checklist: "flat design con cero textura").
   Un solo overlay global en vez de uno por seccion — mas simple, funciona
   igual de bien sobre fondo claro u oscuro a esta opacidad. */
.grain-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){.grain-overlay{display:none}}

/* Aviso de consulta enviada: el ultimo paso es que el cliente mande su
   WhatsApp. Se muestra pegado abajo para que no compita con el toast y para
   que siga a la vista aunque la pagina se haya scrolleado. */
.aviso-wa {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1200;
  width: min(420px, calc(100vw - 2rem));
  background: #10151c;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.15rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  text-align: center;
}
.aviso-wa p {
  margin: 0 0 .85rem;
  color: #e8ecf2;
  font-size: .94rem;
  line-height: 1.45;
}
.aviso-wa .btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  /* 48px de alto: es el objetivo tactil minimo comodo en celular, que es
     desde donde llega la mayoria. */
  min-height: 48px;
  padding: 0 1.1rem;
  border-radius: 10px;
  background: #25d366;
  color: #06231a;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aviso-wa .btn-wa:hover { background: #1fb457; color: #06231a; }