* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* border: 1px solid black; */
}

/* —— Design tokens (STYLE): tipografía, color, radios y sombras coherentes —— */
:root {
  --vc-font-sans:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --vc-page-bg: rgba(255, 195, 0, 0.35);
  --vc-page-bg-vip: rgba(255, 175, 40, 0.42);
  --vc-text-primary: #0f172a;
  --vc-text-secondary: #334155;
  --vc-text-muted: #64748b;
  --vc-surface: #ffffff;
  --vc-surface-glass: rgba(255, 255, 255, 0.72);
  --vc-border: rgba(15, 23, 42, 0.12);
  --vc-border-strong: rgba(15, 23, 42, 0.2);
  --vc-accent: #d97706;
  --vc-accent-soft: rgba(217, 119, 6, 0.15);
  --vc-radius-sm: 8px;
  --vc-radius-md: 12px;
  --vc-radius-lg: 16px;
  --vc-shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
  --vc-shadow-md:
    0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08);
  --vc-transition-fast: 0.15s ease;
  --vc-touch-min: 2.75rem;
}

html {
  scroll-behavior: smooth;
  font-family: var(--vc-font-sans);
  /* Mismo tono que body: canvas y overscroll */
  background-color: var(--vc-page-bg);
}

/* !important: Bootstrap define body { background-color: var(--bs-body-bg) } (#fff);
   si el bundle de Astro carga después de este archivo, sin esto el fondo queda blanco. */
body {
  background-color: var(--vc-page-bg) !important;
}

/* Sesión VIP: tinte un poco más cálido (sin cambiar el layout general) */
html:has(body.vip-session-active) {
  background-color: var(--vc-page-bg-vip) !important;
}

body.vip-session-active {
  background-color: var(--vc-page-bg-vip) !important;
}

#navbar-main.navbar.vip-navbar-session {
  background-color: #ffe9b0 !important;
  background-image: none !important;
  border-bottom: 3px solid rgba(217, 134, 0, 0.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.vip-nav-display-wrap {
  max-width: min(100vw - 5rem, 15rem);
}

/* Badge de mensajes de soporte sin leer (navbar, sesión VIP) */
.vip-nav-initials-wrap {
  min-width: 1.75rem;
  min-height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.vip-nav-activity-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 4px;
  font-size: 0.62rem;
  line-height: 1rem;
  font-weight: 700;
  color: #fff;
  background: #dc2626;
  border-radius: 999px;
  border: 2px solid #fff;
  text-align: center;
  box-sizing: content-box;
  z-index: 2;
  pointer-events: none;
}

/* Contador de referencias de catálogo (navbar, junto al marcador) */
.vip-nav-refs-link {
  min-width: 2rem;
  min-height: 2rem;
}

.vip-nav-refs-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 3px;
  font-size: 0.58rem;
  line-height: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  background: #fbbf24;
  border-radius: 999px;
  border: 2px solid #fff;
  text-align: center;
  box-sizing: content-box;
  z-index: 2;
  pointer-events: none;
}

#navbar-main.navbar.vip-navbar-session .vip-nav-refs-badge {
  border-color: #ffe9b0;
}

#navbar-main a.nav-link[data-vip-mi-cuenta-link].vip-nav-mi-cuenta--alert {
  font-weight: 700;
}

@media (min-width: 992px) {
  .vip-nav-display-wrap {
    max-width: 9.5rem;
  }

  /* Una sola fila con Contacto: sin wrap del menú en desktop */
  #navbar-main .navbar-nav-main {
    flex-wrap: nowrap;
    column-gap: 0.125rem;
    max-width: 100%;
    min-width: 0;
  }

  /* El bloque VIP no debe anchar el li al 100% (evita segunda fila en fichas estáticas / mismo CSS). */
  #navbar-main .navbar-nav-main > .nav-item.nav-vip-user-only {
    width: auto;
    max-width: max-content;
    flex: 0 0 auto;
  }

  #navbar-main .vip-nav-user-cluster {
    width: auto !important;
    max-width: max-content;
  }

  /* Evita que el panel de resultados de búsqueda quede recortado o “volteado” */
  #navbar-main .navbar-collapse-main,
  #navbar-main .navbar-center-stack,
  #navbar-main .navbar-search-contact-row,
  #navbar-main .navbar-search-row {
    overflow: visible;
  }

  #navbar-main .search-navbar {
    overflow: visible;
  }
}

/* Desplegables del menú: misma tipografía base que los .nav-link */
#navbar-main .navbar-nav-main .dropdown-menu {
  font-size: 0.8125rem;
}

#navbar-main .navbar-nav-main .dropdown-menu .dropdown-item,
#navbar-main .navbar-nav-main .dropdown-menu .dropdown-header {
  font-size: inherit;
}

#navbar-main .navbar-nav-main .dropdown-menu .dropdown-header {
  font-weight: 600;
}

#navbar-main .navbar-nav-main .vip-nav-user-cluster .nav-link,
#navbar-main .navbar-nav-main .vip-nav-user-cluster .dropdown-toggle {
  font-size: 0.8125rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

#navbar-main .navbar-nav-main .vip-nav-user-cluster .vip-nav-initials {
  font-size: 0.8125rem;
}

/* Loader Styles */
#loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

#loader-container.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #d98800;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

/* Efecto de desenfoque cuando el modal esta abierto */
.modal-backdrop.show {
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

header,
main {
  font-family: var(--vc-font-sans);
}

/* Focus visible consistente (accesibilidad + aspecto “pro”) */
:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.visual-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-container {
  display: inline-block;
  width: 100%;
  max-width: 260px; /* El tamaño máximo que quieres en PC */
}

.banners {
  scroll-snap-align: start;
  scroll-margin-top: 110px;
  margin-top: 6rem;
  margin-bottom: 6rem;
}

/* Home: despeje del navbar fijo (sin sumar el margin-top de .banners en el carrusel). */
main.home-below-nav {
  padding-top: clamp(4.75rem, 1.75vw + 3.35rem, 5.75rem);
}

/* Fuera de cualquier @media: antes estaba dentro de max-width 356px y en desktop NO aplicaba. */
main.home-below-nav > section.banners:first-of-type {
  margin-top: 0;
}

/* figure suele traer margen por defecto del navegador */
main.home-below-nav section.banners > figure.carousel {
  margin-block: 0;
}

.container-products {
  border: 1px solid grey;
  border-radius: 10px;
  padding: 0.3rem;
  padding-bottom: 3rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.navbar-collapse span {
  cursor: pointer;
}

.titulo-seccion {
  border: 1px solid grey;
  border-radius: 10px;
  padding: 0.3rem;
  background-color: rgba(255, 255, 255, 0.5);
}

#case,
#fiatallis,
#newHolland {
  scroll-snap-align: start;
  scroll-margin-top: 150px;
  margin-top: 15rem;
  margin-bottom: 15rem;
}

#otrasMarcas,
#marcas,
#products,
#services {
  scroll-snap-align: start;
  scroll-margin-top: 110px;
  margin-bottom: 6rem;
}

#contactUs {
  scroll-snap-align: start;
  scroll-margin-top: 110px;
  margin-bottom: 0rem;
}

#aboutUs {
  scroll-snap-align: start;
  scroll-margin-top: 110px;
  margin-bottom: 15rem;
}

/* Header: logo | columna (fila búsqueda + .call-us misma altura | menú) */
@media (min-width: 992px) {
  #navbar-main .navbar-main-inner {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }

  #navbar-main .navbar-collapse-main {
    flex-grow: 1;
    min-width: 0;
  }

  #navbar-main .navbar-center-stack {
    min-width: 0;
    min-height: 0;
  }

  #navbar-main .navbar-search-row .search-navbar {
    max-width: 100%;
  }

  #navbar-main .vip-nav-initials {
    letter-spacing: 0.03em;
  }
}

/* Misma fila que el input: estirar y igualar altura con la barra de búsqueda */
#navbar-main .navbar-search-contact-row {
  align-items: stretch;
}

#navbar-main .navbar-search-row .search-navbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

#navbar-main .navbar-search-row .input-group {
  flex: 1 1 auto;
  width: 100%;
}

#navbar-main .navbar-call-us-wrap {
  min-width: 0;
}

#navbar-main .navbar-search-contact-row .call-us {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  min-width: 12.5rem;
}

#navbar-main .navbar-search-contact-row .call-us:hover {
  font-size: 1.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

#navbar-main .navbar-nav-main {
  row-gap: 0.25rem;
}

/* Segunda fila del header: enlaces más compactos */
#navbar-main .navbar-nav-main > .nav-item > .nav-link,
#navbar-main .navbar-nav-main > .nav-item > .dropdown-toggle {
  font-size: 0.8125rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.call-us {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px solid grey;
  border-radius: 10px;
  font-size: 30px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  gap: 0.5rem;
}

.call-us:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  border-radius: 10px;
  font-size: 30px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  gap: 0.5rem;
}

/* Menú colapsado (<lg): fila búsqueda + contacto al ancho útil */
@media (max-width: 991.98px) {
  #navbarSupportedContent .navbar-center-stack {
    width: 100%;
    max-width: 100%;
  }

  #navbarSupportedContent .navbar-search-contact-row {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  #navbarSupportedContent .navbar-search-row .search-navbar {
    width: 100% !important;
  }

  #navbarSupportedContent .navbar-call-us-wrap {
    flex-shrink: 1;
    min-width: 0;
  }

  #navbarSupportedContent .navbar-search-contact-row .call-us {
    min-width: 0;
    font-size: 1.35rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    justify-content: space-evenly;
    width: 100%;
  }

  #navbarSupportedContent .navbar-search-contact-row .call-us:hover {
    font-size: 1.35rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  #navbarSupportedContent .navbar-call-us-wrap .call-us {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Home: caption sobre el slide, proporcional al ancho del carrusel (container queries). */
section.banners .carousel-inner {
  container-name: home-banner-carousel;
  container-type: inline-size;
  /* Márgenes respecto al borde del slide (misma caja que la imagen w-100). */
  --banner-cap-inset-x: clamp(0.4rem, 1.8cqi, 1rem);
  --banner-cap-inset-bottom: clamp(0.4rem, 2.2cqi, 0.95rem);
  --banner-cap-top: max(
    clamp(1.1rem, 2vh + 0.75rem, 2.35rem),
    clamp(0.35rem, 1.5cqi, 0.65rem)
  );
}

section.banners .carousel-inner .carousel-caption.caption-banner {
  position: absolute;
  top: var(--banner-cap-top);
  bottom: auto;
  left: var(--banner-cap-inset-x);
  right: auto;
  /* Nunca más ancho que el slide menos margen izquierdo y derecho. */
  width: min(40cqi, 16.25rem, calc(100% - 2 * var(--banner-cap-inset-x)));
  max-width: calc(100% - 2 * var(--banner-cap-inset-x));
  min-width: 0;
  /* Alto = contenido cuando cabe (sin hueco bajo el CTA en pantallas grandes); tope = slide. */
  max-height: calc(
    100% - var(--banner-cap-top) - var(--banner-cap-inset-bottom)
  );
  margin: 0;
  padding: 0;
  color: red;
  font-weight: bolder;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
  border-color: rgb(255, 195, 0);
  border-width: clamp(1px, 0.32cqi, 3px);
  border-radius: clamp(6px, 1.1cqi, 10px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
  animation-name: slideInFromLeft;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

section.banners .carousel-inner .caption-banner__inner {
  font-size: clamp(0.66rem, 2.5cqi, 1rem);
  line-height: 1.28;
  padding: clamp(0.35em, 2cqi, 0.85em);
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

section.banners .carousel-inner .caption-banner__inner strong,
section.banners .carousel-inner .caption-banner__inner .link-color {
  font-size: inherit;
}

section.banners .carousel-inner .caption-banner__logo {
  width: 75%;
  max-width: 100%;
  height: auto;
}

/* Logos más chicos cuando aún no cabe todo con tagline corto (lo aplica el JS). */
section.banners
  .carousel-inner
  .caption-banner__inner--compact-logos
  .caption-banner__logo {
  width: 50%;
}

section.banners .carousel-inner .caption-banner__cta {
  font-size: clamp(0.62rem, 2.1cqi, 0.88rem);
  padding: clamp(0.3em, 1.5cqi, 0.45em) clamp(0.45em, 2cqi, 0.7em);
  line-height: 1.2;
}

/* 1. Define la animación */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%); /* Empieza 100% a la izquierda */
    opacity: 0; /* Opcional: empieza invisible */
  }
  100% {
    transform: translateX(0); /* Termina en su posición normal */
    opacity: 1; /* Termina visible */
  }
}

#case,
#fiatallis,
#newHolland,
#aboutUs article {
  background-color: rgba(255, 255, 255, 1);
}

.banner-phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  border-radius: 10px;
}

a,
.phone,
.email,
.telegram,
.whatsapp,
.link-color {
  text-decoration: none;
}

.carousel-control-prev-icon {
  color: red;
}

.marcas div .col {
  border: 1px solid grey;
  border-radius: 10px;
}

.marcas div .col:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

#carouselProducts article,
#carouselServices article {
  margin: 0.5em;
  padding: 0.2em;
}

/*FOOTER --------------------------------------------------------------------------------------------------------------*/

.link-color {
  color: red;
}

.link-color:hover {
  color: black;
}

.font-caption-banner {
  font-weight: bold;
  color: red;
}

.contact-us {
  background-color: rgb(255, 195, 0);
  background-image: url(../img/contacto/fondo.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;

  padding: 2rem;
  margin-left: 10%;
  margin-right: 10%;
  border: 1px solid grey;
  border-radius: 10px;
}

.redes {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: 35px;
  gap: 1rem;
}

.facebook {
  color: rgb(24, 119, 242);
}
.instagram {
  background: linear-gradient(
    to bottom,
    #405de6,
    #833ab4,
    #c13584,
    #f56040,
    #ffdc80
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.threads {
  color: black;
}
.twitter {
  color: black;
}

.facebook:hover {
  color: hsl(214, 89%, 32%);
}
.instagram:hover {
  background: linear-gradient(
    to bottom,
    hsl(230, 77%, 38%),
    hsl(276, 51%, 27%),
    hsl(326, 57%, 28%),
    hsl(11, 90%, 41%),
    hsl(43, 100%, 55%)
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.threads:hover {
  color: grey;
}
.twitter:hover {
  color: grey;
}

.chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  width: fit-content;
  bottom: 35px;
  right: 10px;
  z-index: 5;
}

.whatsapp {
  color: #25d366;
}

.telegram {
  color: #0088cc;
}

.email {
  color: orange;
}

.phone {
  color: grey;
}

.whatsapp:hover {
  color: hsl(142, 70%, 29%);
}
.telegram:hover {
  color: #0041cc;
}

.email:hover {
  color: red;
}

.phone:hover {
  color: black;
}

.chat div {
  margin-top: 10px;
  border: 4px solid #d98800;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.home {
  font-size: 28px;
  color: #d98800;
  border-bottom: 2px solid #d98800;
}

.foot {
  font-size: 28px;
  color: #d98800;
  border-top: 2px solid #d98800;
}

.tyc {
  padding: 15px;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 195, 0, 1);
  color: brown;
  font-size: smaller;
}

.footer-dev-credit {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(128, 128, 128, 0.45);
  text-align: center;
}

/*-------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 991px) {
  #case,
  #fiatallis,
  #newHolland {
    scroll-snap-align: start;
    scroll-margin-top: 150px;
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  #otrasMarcas,
  #marcas {
    scroll-snap-align: start;
    scroll-margin-top: 110px;
    margin-bottom: 6rem;
  }

  #contactUs {
    scroll-snap-align: start;
    scroll-margin-top: 110px;
    margin-bottom: 0rem;
  }

  #aboutUs {
    scroll-snap-align: start;
    scroll-margin-top: 110px;
    margin-bottom: 6rem;
  }
}

@media (max-width: 356px) {
  .img-logo {
    width: 100%;
    margin-right: auto;
  }
  .burger {
    width: 100%; /* Ancho completo por defecto */
    padding-right: 15px; /* Espacio a la derecha */
    padding-left: 15px; /* Espacio a la izquierda */
    margin-right: auto; /* Centrado */
    margin-left: auto; /* Centrado */
  }
}

@media (max-width: 228px) {
  .call-us {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/* Ficha de detalle de producto (Astro + HTML estático + dinámica) */
.product-detail-ficha-wrap {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.product-detail-ficha-breadcrumb {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(30, 41, 59, 0.14);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.product-detail-ficha-breadcrumb .breadcrumb {
  padding: 0;
  margin: 0;
  background: transparent;
  flex-wrap: wrap;
}

.product-detail-ficha-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(30, 41, 59, 0.45);
}

.product-detail-ficha-breadcrumb .breadcrumb-item.active {
  color: #1e293b;
  font-weight: 600;
}

.related-product-card:hover {
  border-color: rgba(255, 193, 7, 0.55) !important;
  background-color: #fffbeb !important;
}

.related-product-card .vip-catalog-ref-host--related {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 576px) {
  .related-product-card .vip-catalog-ref-host--related {
    border-top: none;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* —— Catálogo (/catalogo): layout sin estilos inline —— */
.page-catalog-main {
  min-height: 100vh;
  padding-top: clamp(5rem, 4vw + 4rem, 7.5rem);
  padding-bottom: 3.75rem;
}

.catalog-hero {
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 1.25rem;
}

.catalog-hero__toolbar {
  text-align: start;
}

.catalog-hero__title {
  font-size: clamp(1.75rem, 2vw + 1.25rem, 2.5rem);
  font-weight: 800;
  color: var(--vc-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0;
}

.catalog-hero__lead {
  color: var(--vc-text-muted);
  margin-bottom: 0;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  max-width: 40rem;
}

.catalog-hero__links a {
  color: var(--vc-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--vc-transition-fast);
}

.catalog-hero__links a:hover {
  color: var(--vc-text-primary);
  text-decoration: underline;
}

.catalog-count-badge {
  padding: 0.5rem 1rem !important;
  border-radius: var(--vc-radius-md) !important;
  box-shadow: var(--vc-shadow-sm);
  font-weight: 600 !important;
}

/* —— Navbar: buscador dropdown + skeleton —— */
.search-navbar--wrap {
  position: relative;
}

.search-navbar-dropdown {
  top: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  margin-top: 0.25rem;
  max-height: min(55vh, 22rem);
  overflow-y: auto;
  z-index: 1050;
  transform: none;
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-md);
  border: 1px solid var(--vc-border);
}

.search-navbar-dropdown .dropdown-item--result {
  white-space: normal;
  transition: background-color var(--vc-transition-fast);
}

.search-navbar-dropdown .dropdown-item--result .search-result-title {
  font-size: 0.9rem;
}

.search-navbar-dropdown .dropdown-header--brand {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--vc-text-muted);
  background: rgba(248, 250, 252, 0.98);
  border-bottom: 1px solid var(--vc-border);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.search-navbar-skeleton-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--vc-border);
  pointer-events: none;
}

.search-navbar-skeleton-line {
  height: 0.65rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 45%, #e2e8f0 90%);
  background-size: 200% 100%;
  animation: vc-shimmer 1.1s ease-in-out infinite;
}

.search-navbar-skeleton-line--short {
  width: 55%;
  margin-top: 0.45rem;
}

@keyframes vc-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.search-navbar-dropdown .dropdown-item--footer-catalog {
  border-top: 1px solid var(--vc-border);
  background: rgba(248, 250, 252, 0.95) !important;
}

/* Iconos de contacto: área táctil mínima ~44px */
#navbar-main .navbar-search-contact-row .call-us a.phone,
#navbar-main .navbar-search-contact-row .call-us a.email,
#navbar-main .navbar-search-contact-row .call-us a.telegram,
#navbar-main .navbar-search-contact-row .call-us a.whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vc-touch-min);
  min-height: var(--vc-touch-min);
  border-radius: var(--vc-radius-sm);
  transition:
    background-color var(--vc-transition-fast),
    transform 0.12s ease;
}

#navbar-main .navbar-search-contact-row .call-us a.phone:hover,
#navbar-main .navbar-search-contact-row .call-us a.email:hover,
#navbar-main .navbar-search-contact-row .call-us a.telegram:hover,
#navbar-main .navbar-search-contact-row .call-us a.whatsapp:hover {
  background-color: var(--vc-accent-soft);
}

/* Móvil: búsqueda arriba del bloque de menú dentro del colapsable */
@media (max-width: 991.98px) {
  #navbarSupportedContent .navbar-center-stack {
    flex-direction: column;
  }

  #navbarSupportedContent .navbar-search-contact-row {
    order: -1;
  }

  #navbarSupportedContent .navbar-nav-main {
    order: 0;
  }
}