/* ===========================
   HOME – Estilos de Inicio
   (El fondo global ÚNICO está en base.css)
   =========================== */

/* Asegurar que el home no tape el fondo global */
main{ background: transparent !important; }

/* ===========================
   HOME – Sección HERO
   =========================== */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
 letter-spacing: -0.02em;
}

.hero-copy p {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===========================
   HOME – Secciones genéricas
   =========================== */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-header h2 {
  font-size: 1.5rem;
  
  color: #111111;
}

.home-featured,
.home-process,
.home-benefits,
.home-cta-final {
  padding: 0 0 30px;
}

/* Link "Ver todos" en la cabecera de sección */
.section-header a,
.home-section-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1.3rem;
}

/* ===========================
   HOME – Grid de vehículos
   =========================== */

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ===========================
   HOME – Cards de vehículos
   (con animación tipo "hover details")
   =========================== */

.vehicle-card {
  position: relative;
  border-radius: 24px;
  background-color: #ffffff;
  color: #111111;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  height: 329px; /* ~220px de imagen visible + 109px de panel de texto */
}

/* La imagen ocupa todo el alto del card; el panel blanco de texto
   tapa sólo la parte inferior (109px), por eso se ve ~220px de foto */
.vehicle-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-out;
}

/* Panel de texto que se anima en altura */
.vehicle-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #ffffff;
  padding: 14px 16px 16px;
  box-sizing: border-box;

  height: 109px;               /* altura "normal" (como en tu diseño actual) */
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}

/* Leve zoom de la foto al hacer hover */
.vehicle-card:hover img {
  transform: scale(1.04);
}

/* Tipografía interna */
.vehicle-card-title {
  color: #111111;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.vehicle-card-meta {
  color: #4b5563;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.vehicle-card-price {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ===========================
   HOME – CTA final
   =========================== */

.home-cta-final {
  text-align: center;
}

.home-cta-final h2 {
  font-size: 1.7rem;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  color: #111111;
}

.home-cta-final p {
  color: #111111;
  margin-bottom: 16px;
}

/* ===========================
   HOME – Responsive
   =========================== */

@media (max-width: 992px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vehicle-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   HOME – Tipos de vehículo
   =========================== */

.home-body-styles {
  padding: 40px 0 24px;
  background: transparent;
}

.home-body-styles-header {
  text-align: center;
  margin-bottom: 24px;
}

.home-body-styles-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111111;
}

/* Wrapper */
.body-style-shell {
  margin-top: 8px;
  position: relative;
}

/* GRID centrado (si tenés 5, 6, 7... siempre queda centrado) */
.body-style-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
}

.body-style-grid li {
  list-style: none;
}

/* link clickeable sin subrayado */
.body-style-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card: imagen + texto */
.body-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
}

/* Imagen */
.body-style-card img {
  width: 170px;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.22s ease-out, filter 0.22s ease-out;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  -webkit-user-drag: none;
}

/* Texto */
.body-style-card figcaption {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111111;
  transition: color 0.2s ease-out;
}

/* Hover SOLO en dispositivos con mouse (evita hover pegajoso en móvil) */
@media (hover: hover) and (pointer: fine) {
  .body-style-link:hover img {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.32));
  }
  .body-style-link:hover figcaption {
    color: var(--color-primary);
  }
}

/* Focus accesible (teclado) */
.body-style-link:focus-visible {
  outline: 3px solid rgba(59,130,246,.45);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Tablet */
@media (max-width: 992px) {
  .body-style-card img {
    width: 150px;
  }
}

@media (max-width: 640px) {
  .body-style-shell {
    margin: 0 -16px;
    padding: 0 16px;
    overflow: hidden;
    position: relative;
  }

  .body-style-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px 52px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .body-style-grid li {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .body-style-grid::-webkit-scrollbar {
    display: none;
  }

  /* ====== FADE REAL AL CONTENIDO (sin manchas) ====== */
    .body-style-grid{
      -webkit-mask-image: none;
      mask-image: none;
    }

  /* ====== OVERLAY BLANCO SUAVE EN LOS BORDES (sin backdrop-filter) ====== */
    .body-style-shell::before,
    .body-style-shell::after {
      display: none;
    }

    .body-style-grid {
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
      );
      mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
      );
    }

  /* (opcional) suaviza un poco el “corte” del overlay */
  .body-style-shell::before,
  .body-style-shell::after{
    filter: blur(2px);
  }
}

@media (max-width: 640px){
  .body-style-link:hover img{
    transform: none;
    filter: none;
  }
}

@media (max-width: 640px){
  .body-style-card{ position: relative; }

    .body-style-card::after{
    display: none;
  }

  .body-style-card img{
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 640px) {
  /* Evita el rectángulo azul/gris al tocar y deslizar */
  .body-style-link {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
    background: transparent;
  }

  /* Evita seleccionar texto mientras scrolleás */
  .body-style-card figcaption,
  .body-style-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Por si iOS te deja “activo” un hover igual */
  .body-style-link:hover img,
  .body-style-link:hover figcaption {
    transform: none;
    filter: none;
    color: inherit;
  }
  
  
}





/* ===========================
   HOME – Slider hero banners (tipo Sote)
   =========================== */

.hero-slider-section {
  padding: 32px 0 72px;
}

/* Caja principal: 1881×500, bordes y sombra */
.hero-slider-shell {
  max-width: 1600px;
  height: 500px;
  margin: 0 auto;
  border-radius: 45px;
  overflow: hidden;
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.25);
  background: #000;
  position: relative;
  touch-action: pan-y; /* permite swipe horizontal sin romper scroll vertical */
}

.hero-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease; /* acá está la animación */
  will-change: transform;
}

.hero-slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Puntitos */
.hero-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.hero-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.hero-slider-dot.is-active {
  width: 18px;
  background-color: #f5b428;
}

/* Mobile – slider más bajo */
@media (max-width: 768px) {
  .hero-slider-section {
    padding: 20px 0 40px;
  }

  .hero-slider-shell {
    height: 260px;
    border-radius: 24px;
  }
}

/* ===============================
   BUSCADOR HOME – HERO
   =============================== */

.home-search-hero {
  position: relative;
  margin-top: -70px;        /* hace que el buscador "muerda" el banner */
  margin-bottom: 40px;
  z-index: 30;              /* por encima del contenido de debajo */
}

/* Ajustá si el solapamiento con el banner no queda exacto */
@media (min-width: 1200px) {
  .home-search-hero {
    margin-top: -90px;
  }
}

.home-search-shell {
  max-width: 1128px;         /* ancho muy parecido al de tu SVG */
  margin: 0 auto;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: stretch;
  padding: 10px 10px 10px 18px;
  gap: 10px;
}

.home-search-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Cada campo (Marcas / Modelos / Precios) */
.hs-field {
  position: relative;
}

/* Botón "pastilla" superior */
.hs-pill {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background 0.2s ease-out;
}

.hs-pill-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.hs-pill-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
}

.hs-pill-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111827;
}

/* Iconito de desplegar (tipo chevron) */
.hs-pill-arrow {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #6b7280;
  position: relative;
}

.hs-pill-arrow::before,
.hs-pill-arrow::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease-out;
}

.hs-pill-arrow::before {
  transform: translateX(-1.5px) rotate(45deg);
}

.hs-pill-arrow::after {
  transform: translateX(1.5px) rotate(-45deg);
}

/* Estado abierto: flecha apuntando hacia arriba */
.hs-field.is-open .hs-pill-arrow::before {
  transform: translateX(-1.5px) rotate(-45deg);
}

/* =========================================
   FIX: truncar valor seleccionado con "..."
   (evita que MODELOS se expanda / haga wrap)
   ========================================= */

/* Permite que el bloque de texto se achique dentro del flex */
.hs-pill-main{
  flex: 1;
  min-width: 0; /* CLAVE para que funcione text-overflow en flex */
}

/* Valor seleccionado: 1 línea + ... */
.hs-pill-value{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (Opcional) también por si alguna vez el label se hace largo */
.hs-pill-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Asegura que el ícono no se achique */
.hs-pill-arrow{
  flex: 0 0 auto;
}


.hs-field.is-open .hs-pill-arrow::after {
  transform: translateX(1.5px) rotate(45deg);
}

.hs-pill:hover {
  border-color: #d1d5db;
  box-shadow: 0 20px 25px rgba(15, 23, 42, 0.12);
}

/* Panel desplegable */
.hs-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 25px rgba(15, 23, 42, 0.35);
  padding: 8px;
  display: none;
  z-index: 40;
}

.hs-field.is-open .hs-panel {
  display: block;
}

/* Contenedor scroll + degradé al final */
.hs-panel-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  position: relative;
}

/* Degradé tipo blur en la parte baja */
.hs-panel-scroll::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
}

/* Opciones (multi selección) */
.hs-option {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid transparent;
  text-align: left;
  font-size: 0.9rem;
  color: #111827;
  cursor: pointer;
  transition:
    background 0.15s ease-out,
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.05s ease-out;
}

.hs-option:last-child {
  margin-bottom: 0;
}

.hs-option:hover {
  background: #f3f4f6;
}

.hs-option.is-selected {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

/* Botón "Buscar autos" */
.hs-submit {
  border-radius: 999px;
  border: none;
  padding: 0 28px;
  min-width: 190px;
  background: linear-gradient(90deg, rgba(13, 119, 190, 1) 0%, rgba(12, 93, 152, 1) 65%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* FIX: box-shadow válido (antes tu CSS quedaba roto acá) */
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);

  transition:
    transform 0.10s ease-out,
    box-shadow 0.10s ease-out,
    background 0.10s ease-out;
  white-space: nowrap;
}


.hs-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(37, 99, 235, 0.7);
}

.hs-submit:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.55);
}

.hs-submit-label {
  line-height: 1;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 960px) {
  .home-search-shell {
    flex-direction: column;
    border-radius: 32px;
    padding: 12px;
    gap: 12px;
  }

  .home-search-fields {
    grid-template-columns: 1fr;
  }

  .hs-submit {
    width: 100%;
    justify-content: center;
  }

  .home-search-hero {
    margin-top: -40px;
  }
}

/* =========================
   HERO HIGHLIGHT (derecha) – limpio (sin borde/gradiente)
   ========================= */
.hero-highlight{
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* =========================
   HERO HIGHLIGHT – Carrusel clientes satisfechos
   ========================= */
.hl-carousel{
  width: min(430px, 44vw);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.hl-track{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hl-track::-webkit-scrollbar{ display:none; }
.hl-track.is-dragging{ cursor: grabbing; }

.hl-img{
  flex: 0 0 100%;
  width: 100%;

  /* clave para que NO haya bordes negros */
  aspect-ratio: 16 / 10;
  object-fit: cover;

  scroll-snap-align: center;

  -webkit-user-drag: none;
}

/* Mobile */
@media (max-width: 992px){
  .hero-highlight{
    justify-content: center;
  }
  .hl-carousel{
    width: 100%;
    max-width: 560px;
  }
}

/* ==========================
   FIX Slider HERO: 1 slide por pantalla (evita 50%/50% en mobile)
   ========================== */
.hero-slider-track{
  gap: 0 !important;
}

.hero-slide{
  flex: 0 0 100% !important;     /* clave: no se achica */
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* ==========================
   Botón Buscar: label mobile + ancho más prolijo
   ========================== */
.hs-submit-label--mobile{ display: none; }

@media (max-width: 480px){
  .hs-submit-label--desktop{ display: none; }
  .hs-submit-label--mobile{ display: inline; }

  /* si no querés “barra infinita” en celular */
  .hs-submit{
    width: 100%;
    max-width: 320px;     /* limita el estirado */
    margin: 0 auto;       /* lo centra */
    min-width: 0;         /* anula el min-width:190px */
    padding: 12px 18px;   /* mejor tacto */
  }
}

/* =========================================================
   FIX MOBILE: quitar card del buscador + slider atrás (overlay)
   NO modifica estilos de .hs-pill / .hs-panel / etc.
   ========================================================= */
@media (max-width: 640px){

  /* Ajustá este valor si querés el buscador más arriba/abajo */
  :root{
    --home-search-lift: 190px; /* probá 160–220 según tu alto de slider */
  }

  /* Asegura capas */
  .hero-slider-section{
    position: relative;
    z-index: 1;
  }

  .home-search-hero{
    position: relative;
    z-index: 5;                 /* por arriba del slider */
    margin-top: calc(-1 * var(--home-search-lift)); /* lo monta sobre el slider */
    background: transparent !important;
  }

  /* Elimina SOLO la card envolvente (fondo + sombra + borde + padding) */
  .home-search-shell{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Por si el fondo blanco venía del wrapper */
  .home-search-hero .container{
    background: transparent !important;
  }
}

/* =========================================================
   MOBILE: slider SIN redondeo + blur/fade inferior + menos separación
   (NO toca estilos de pills)
   ========================================================= */
@media (max-width: 640px){

  :root{
    --lift: 150px;       /* cuánto sube el buscador sobre la imagen */
    --after-gap: 14px;   /* separación hasta el título “Encontrá…” */
  }

  /* Slider sin redondeo */
  .hero-slider-shell{
    border-radius: 0 !important;
    overflow: hidden;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-slide img{
    border-radius: 0 !important;
  }

  /* Difuminado inferior (fade + blur) al terminar la imagen */
  .hero-slider-section{
    position: relative;
  }
  .hero-slider-section::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fade-h);
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
      to bottom,
      rgba(238,244,247,0) 0%,
      rgba(238,244,247,0.72) 55%,
      rgba(238,244,247,1) 100%
    );

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Buscador encima de la imagen + más cerca del título */
  .home-search-hero{
    position: relative;
    z-index: 5;
    margin-top: calc(-1 * var(--lift));
    margin-bottom: var(--after-gap);
    background: transparent !important;
  }

  /* Quitar SOLO la card envolvente (si existía) */
  .home-search-shell{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .home-search-hero .container{
    background: transparent !important;
  }
}

/* =========================
   HOME - Marcas (dinámico)
   Centrado automático de filas (incluye última fila incompleta)
   ========================= */
.home-brands{
  padding: 0 0 62px;
}

.brands-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brands-header h2{
  margin: 0;
  font-size: 2.0rem;
  letter-spacing: -0.02em;
}

.brands-all-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  transition: transform .14s ease, box-shadow .14s ease;
}

.brands-all-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* Flex wrap: centra cada fila automáticamente */
.brands-grid{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* clave: centra la última fila */
  gap: 34px;

  align-items: flex-start;
}

/* ancho fijo por item para que el wrap quede prolijo */
.brand-item{
  flex: 0 0 150px;          /* ajustable (140–170) */
  display: flex;
  justify-content: center;
}

.brand-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;
}

.brand-logo{
  width: 92px;
  height: 54px;
  object-fit: contain;
  opacity: 0.92;
  transition: transform .14s ease, opacity .14s ease;
}

.brand-link:hover .brand-logo{
  transform: translateY(-2px);
  opacity: 1;
}

.brand-name{
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px){
  .brands-header h2{ font-size: 1.7rem; }
  .brand-item{ flex-basis: 140px; }
}

@media (max-width: 640px){
  .brands-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .brands-all-btn{
    width: 100%;
    justify-content: center;
  }

    .brands-grid{
    gap: 24px 16px;
  }

    .brand-item{
    flex: 0 0 calc(33.33% - 12px);
  }

    .brand-logo{
    width: 72px;
    height: 44px;
  }
}

/* ==========================
   Instagram Promo Section (ACTUALIZADO)
   ========================== */
.ig-promo{
  position: relative;
  overflow: hidden;

  /* ANTES: padding: 72px 0; */
  padding: 60px 0 18px; /* más pegado al footer */

  background: transparent; /* usa el fondo global de la página */
}

.ig-promo__inner{
  display: grid;

  /* ANTES: 1.05fr 0.95fr */
  grid-template-columns: 1fr 1.15fr; /* la media gana espacio */

  gap: 44px;
  align-items: center;
}

.ig-promo__title{
  margin: 0 0 10px 0;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ig-promo__text{
  margin: 0 0 18px 0;
  max-width: 56ch;
  color: #111111;
  font-size: 15.5px;
  line-height: 1.55;
}

.ig-promo__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.10);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ig-promo__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  background: rgba(255,255,255,.96);
}

.ig-promo__btnIcon{
  font-size: 14px;
  opacity: .85;
}

.ig-promo__media{
  display: flex;
  justify-content: flex-end;
  align-items: center;

  /* ayuda a que el visual “caiga” un poco más hacia el footer */
  padding-bottom: 6px;
}

.ig-promo__mediaLink{
  display: inline-block;

  /* Control real de tamaño del mock */
  width: 100%;
  max-width: 620px; /* ANTES: 520px */
}

/* La imagen NO debe tener rotate propio:
   la rotación ahora la maneja ry-scrollfx (30° -> 0°) */
.ig-promo__img{
  width: 100%;
  height: auto;
  display: block;

  /* Sombra pro sin “cuadrado” (funciona bien con PNG transparente) */
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.28));

  /* IMPORTANTE: no rotar acá (lo hace el JS sobre el link) */
  transform: none !important;
  transform-origin: 60% 55%;
}

/* Responsive */
@media (max-width: 960px){
  .ig-promo{
    /* ANTES: padding: 56px 0; */
    padding: 52px 0 14px;
  }

  .ig-promo__inner{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ig-promo__media{
    justify-content: center;
    padding-bottom: 0;
  }

  .ig-promo__mediaLink{
    max-width: 620px;
  }
}

@media (max-width: 480px){
  .ig-promo__btn{
    width: 100%;
    justify-content: center;
  }
}

/* ==========================
   WhatsApp Strip Marquee
   ========================== */

.wa-strip{
  margin: 0;
  padding: 6px 0 0;          /* pegado al footer */
  background: transparent;
}

.wa-strip__viewport{
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Fades laterales */
.wa-strip__viewport::before,
.wa-strip__viewport::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  pointer-events:none;
  z-index: 2;
}
.wa-strip__viewport::before{
  left:0;
  background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.wa-strip__viewport::after{
  right:0;
  background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* Track animado */
.wa-strip__track{
  --wa-distance: 900px;  /* lo setea el JS */
  --wa-duration: 16s;    /* lo setea el JS */
  display: flex;
  width: max-content;
  will-change: transform;
  animation: wa-strip-marquee var(--wa-duration) linear infinite;
}

/* Pausa al hover */
.wa-strip__viewport:hover .wa-strip__track{
  animation-play-state: paused;
}

/* Grupo */
.wa-strip__group{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  white-space: nowrap;
}

/* Item: link sin “píldora” */
.wa-strip__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(15,23,42,.88);
  font-size: 12.5px;
  line-height: 1;
}

.wa-strip__item:hover{
  color: rgba(13,119,190,.98);
}

.wa-strip__icon{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(13,119,190,.12);
  color: #0d77be;
  flex: 0 0 auto;
}

.wa-strip__svg{
  width: 16px;
  height: 16px;
  display: block;
}

.wa-strip__sep{
  opacity: .25;
}

.wa-strip__hint{
  opacity: .55;
  font-size: 12px;
}

/* Animación */
@keyframes wa-strip-marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--wa-distance)),0,0); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .wa-strip__track{ animation: none !important; }
  .wa-strip__viewport{ overflow-x: auto; }
  .wa-strip__viewport::before,
  .wa-strip__viewport::after{ display:none; }
}

/* ===========================
   WhatsApp strip – smooth marquee (no stutter)
   =========================== */

.wa-strip{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}

.wa-strip__viewport{
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.wa-strip__track{
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Cada “grupo” (la fila repetible) */
.wa-strip__group{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}

/* Item estilo pill */
.wa-strip__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  font-size: 13px;
  color: #111;
  white-space: nowrap;
}

/* Icono */
.wa-strip__icon{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* Accesibilidad: reduce motion => sin movimiento */
@media (prefers-reduced-motion: reduce){
  .wa-strip__track{ transform: none !important; }
}

/* HOME – Nuevos ingresos (Swiper) */
.home-latest-shell .vcard-media{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  background:#eef2f6;
  overflow:hidden;
}
.home-latest-shell .vcard-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   HERO HIGHLIGHT – Ancla overlays
   ========================= */
.hero-highlight{
  position: relative;   /* CLAVE: ancla absolutos */
  overflow: visible;    /* para que no recorte overlays */
  isolation: isolate;   /* z-index predecible */
}

/* Carrusel por encima de marcas */
.hero-highlight .hl-carousel{
  position: relative;
  z-index: 2;
}

/* Mano por encima de todo */
.hero-highlight .hl-overlay{
  position: absolute;
  z-index: 4;

  top: -26px;
  left: -22px;

  width: 120px;
  height: auto;

  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.18));
}

/* =========================================
   BRAND SIDES – Logos laterales con scrub (sección actual)
   ========================================= */

[data-brand-sides]{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* El contenido real arriba */
[data-brand-sides] > *:not(.brand-side){
  position: relative;
  z-index: 2;
}

/* Fallback: si NO hay JS, que se vean igual */
.brand-side{
  position: absolute;
  bottom: 0;
  height: 380px;
  width: auto;

  max-width: none;
  pointer-events: none;
  user-select: none;

  opacity: 1;
  transform: translate3d(0,0,0) rotate(0deg) scale(1);

  z-index: 1;
  will-change: transform, opacity;
}

/* Posición lateral (ajustable) */
.brand-side--right{ right: -7%; }
.brand-side--left{ left: -7%; }

/* Cuando el JS está activo, ahí sí arrancan ocultas (estado inicial) */
html.js .brand-side{
  opacity: 0;
  transform: translate3d(200px, 0, 0) rotate(10deg) scale(0.9);
}
html.js .brand-side--left{
  transform: translate3d(-200px, 0, 0) rotate(-10deg) scale(0.9);
}

/* Mobile: opcional ocultarlas */
@media (max-width: 992px){
  .brand-side{ display:none; }
}

@media (max-width: 640px) {
    .js-hero-slider,
    .hero-slider-shell,
    .hero-slider-track {
      display: none !important;
    }

    .home-search-hero {
      margin-top: 0;
      padding-top: 80px;
    }

    .hero-slider-section::after {
      display: none;
    }
  }
  
    @media (max-width: 640px) {
    .home-search-hero {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .hero-slider-section + *,
    .home-search-hero + * {
      padding-top: 35px;
    }
  }
  
    @media (max-width: 640px) {
    #openConsignar,
    .btn-consignar {
      display: none !important;
    }
  }