/* ==================================================
   VIDRIERA TREVIÑO — PREMIUM NAVBAR (override)
   Pegar al FINAL de style2.css
   ================================================== */

:root{
  --vt-red: #ff4f4f;
  --vt-red2:#e63946;
  --vt-ink:#101218;
  --vt-muted: rgba(16,18,24,.62);
  --vt-border: rgba(16,18,24,.10);
  --vt-shadow: 0 18px 55px rgba(0,0,0,.12);
  --vt-radius: 18px;
}

/* NAVBAR: blanco premium + blur suave + sombra limpia */
.navbar.navbar-glass{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--vt-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 0 !important;
}

/* línea elegante inferior con acento rojo */
.navbar.navbar-glass::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.35), transparent);
  opacity:.75;
  pointer-events:none;
}

/* brand / logo */
.navbar.navbar-glass .navbar-brand img{
  height: 100px;
  width: auto;
  display:block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.12));
}

/* Toggler más elegante */
.navbar.navbar-glass .navbar-toggler{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.navbar.navbar-glass .navbar-toggler:focus{
  box-shadow: 0 0 0 4px rgba(255,79,79,.14), 0 10px 25px rgba(0,0,0,.10);
}

/* ==================================================
   NAV LINKS (pills + underline glow fino)
   ================================================== */

.navbar.navbar-glass .navbar-nav .nav-link{
  color: rgba(16,18,24,.64) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 12px !important;
  border-radius: 999px;
  position: relative;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.navbar.navbar-glass .navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.95), transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

.navbar.navbar-glass .navbar-nav .nav-link:hover{
  color: rgba(16,18,24,.90) !important;
  background: rgba(255,79,79,.08);
  transform: translateY(-1px);
}

.navbar.navbar-glass .navbar-nav .nav-link:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* dropdown caret más discreto */
.navbar.navbar-glass .dropdown-toggle::after{
  opacity: .55;
  vertical-align: .18em;
}

/* ==================================================
   DROPDOWN (premium glass)
   ================================================== */

.navbar.navbar-glass .dropdown-menu{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0,0,0,.14);
  padding: 10px;
  overflow: hidden;
  transform-origin: top;
  animation: vtDrop .16s ease-out;
}

@keyframes vtDrop{
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.navbar.navbar-glass .dropdown-item{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  color: rgba(16,18,24,.80);
  transition: background .14s ease, transform .14s ease, color .14s ease;
}

.navbar.navbar-glass .dropdown-item:hover{
  background: rgba(255,79,79,.10);
  color: rgba(16,18,24,.96);
  transform: translateX(2px);
}

/* ==================================================
   SEARCH BAR (pro: borde fino + glow + botón rojo premium)
   Tu HTML actual: .search-container + .input-group + #searchButton
   ================================================== */

/* el li que contiene el buscador (si aplicas el fix) */
.vt-search-li{
  display:flex;
  align-items:center;
}

/* contenedor */
.search-container{
  position: relative;
  width: 100%;
  max-width: 460px !important; /* un poco más ancho que antes */
}

/* input */
.search-container .form-control{
  height: 48px;
  border-radius: 16px 0 0 16px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  padding-left: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 14px 30px rgba(0,0,0,.06);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.search-container .form-control::placeholder{
  color: rgba(16,18,24,.42);
}

.search-container .form-control:focus{
  border-color: rgba(255,79,79,.45) !important;
  box-shadow:
    0 0 0 4px rgba(255,79,79,.12),
    0 18px 40px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* botón lupa */
#searchButton{
  height: 48px;
  width: 56px;
  border-radius: 0 16px 16px 0 !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--vt-red), var(--vt-red2)) !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgba(255,79,79,.26);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#searchButton:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 48px rgba(255,79,79,.30);
  filter: brightness(.98);
}
#searchButton:active{
  transform: translateY(0);
  box-shadow: 0 14px 28px rgba(255,79,79,.22);
}

/* dropdown resultados (más premium) */
.search-results{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 26px 60px rgba(0,0,0,.14);
  overflow: hidden;
  margin-top: 8px;
}

/* ==================================================
   SWITCH (halo elegante sin “mancha”)
   Usa tu .theme-switch existente
   ================================================== */

.navbar.navbar-glass .theme-switch{
  margin-left: 8px;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.18));
}

/* slider premium */
.navbar.navbar-glass .theme-switch .slider{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* knob */
.navbar.navbar-glass .theme-switch .slider::before{
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

/* ==================================================
   COLLAPSE (mobile): panel bonito
   ================================================== */
@media (max-width: 992px){

  /* el collapse como panel */
  .navbar.navbar-glass .navbar-collapse{
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 55px rgba(0,0,0,.12);
  }

  /* buscador full width */
  .search-container{
    max-width: 100% !important;
  }

  /* links más grandes al tacto */
  .navbar.navbar-glass .navbar-nav{
    gap: 8px !important;
  }
}

/* ==================================================
   NAVBAR DARK MODE (Vidriera Treviño) — FIX COMPLETO
   Cuando: <html data-bs-theme="dark">
   Pegar al FINAL de style2.css
   ================================================== */

html[data-bs-theme="dark"] .navbar.navbar-glass{
  background: rgba(12, 12, 14, .78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.60);
}

html[data-bs-theme="dark"] .navbar.navbar-glass::after{
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.35), transparent);
  opacity: .85;
}

/* Logo */
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-brand img{
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.65));
}

/* Toggler */
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-toggler{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-toggler-icon{
  filter: invert(1) opacity(.85);
}

/* Links */
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-nav .nav-link{
  color: rgba(255,255,255,.72) !important;
}
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-nav .nav-link:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,79,79,.10);
}
html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-nav .nav-link::after{
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.95), transparent);
}

/* Dropdown */
html[data-bs-theme="dark"] .navbar.navbar-glass .dropdown-menu{
  background: rgba(18, 18, 20, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 34px 80px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] .navbar.navbar-glass .dropdown-item{
  color: rgba(255,255,255,.78);
}
html[data-bs-theme="dark"] .navbar.navbar-glass .dropdown-item:hover{
  background: rgba(255,79,79,.14);
  color: rgba(255,255,255,.96);
}

/* =========================================
   SEARCH (tu estructura actual)
   ========================================= */
html[data-bs-theme="dark"] .search-container .form-control{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 40px rgba(0,0,0,.55);
}

html[data-bs-theme="dark"] .search-container .form-control::placeholder{
  color: rgba(255,255,255,.42);
}

html[data-bs-theme="dark"] .search-container .form-control:focus{
  border-color: rgba(255,79,79,.50) !important;
  box-shadow:
    0 0 0 4px rgba(255,79,79,.14),
    0 22px 50px rgba(0,0,0,.65);
}

html[data-bs-theme="dark"] #searchButton{
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
}

/* Resultados autocomplete */
html[data-bs-theme="dark"] .search-results{
  background: rgba(18,18,20,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] .search-result-item{
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
html[data-bs-theme="dark"] .search-result-item:hover{
  background: rgba(255,255,255,.06);
}

/* =========================================
   MOBILE collapse panel
   ========================================= */
@media (max-width: 992px){
  html[data-bs-theme="dark"] .navbar.navbar-glass .navbar-collapse{
    background: rgba(18,18,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 26px 70px rgba(0,0,0,.70);
  }
}

/* =========================================
   Toggle dentro del navbar (se integra al dark)
   ========================================= */
html[data-bs-theme="dark"] .navbar.navbar-glass .theme-switch .slider{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.16);
}

/* ==================================================
   SEARCH UI — Vidriera Treviño (Pro)
   Compatible con:
   #searchInput, #searchResults, #searchButton, .search-container
   ================================================== */

.search-container { position: relative; }

/* Afinar input-group para que se vea premium */
.search-container .input-group{
  border-radius: 16px;
  overflow: hidden;
}

/* Dropdown premium (light) */
#searchResults.search-results{
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 2000;
  display: none;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 28px 70px rgba(0,0,0,.14);
  overflow: hidden;
}

/* animación */
#searchResults.search-results.vt-open{
  display: block;
  animation: vtSearchDrop .16s ease-out;
}

@keyframes vtSearchDrop{
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Item */
#searchResults .search-result-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#searchResults .search-result-item:last-child{
  border-bottom: none;
}

#searchResults .search-result-item:hover{
  background: rgba(255,79,79,.08);
}

/* Estado seleccionado por teclado */
#searchResults .search-result-item.is-active{
  background: rgba(255,79,79,.12);
}

/* Thumb */
#searchResults .search-result-item img{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* Textos */
#searchResults .result-text{
  flex: 1;
  min-width: 0;
}

#searchResults .result-title{
  font-weight: 800;
  color: rgba(16,18,24,.90);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#searchResults .result-meta{
  font-size: 12.5px;
  color: rgba(16,18,24,.58);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* resaltado de match */
#searchResults mark{
  background: rgba(255,79,79,.18);
  color: inherit;
  padding: 0 .12em;
  border-radius: 6px;
}

/* Footer opcional dentro del dropdown */
#searchResults .vt-search-footer{
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(16,18,24,.55);
  background: rgba(0,0,0,.02);
}

/* Dark mode dropdown */
html[data-bs-theme="dark"] #searchResults.search-results{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,18,20,.94);
  box-shadow: 0 30px 80px rgba(0,0,0,.70);
}

html[data-bs-theme="dark"] #searchResults .search-result-item{
  border-bottom: 1px solid rgba(255,255,255,.06);
}

html[data-bs-theme="dark"] #searchResults .search-result-item:hover{
  background: rgba(255,255,255,.06);
}

html[data-bs-theme="dark"] #searchResults .search-result-item.is-active{
  background: rgba(255,79,79,.16);
}

html[data-bs-theme="dark"] #searchResults .result-title{
  color: rgba(255,255,255,.92);
}
html[data-bs-theme="dark"] #searchResults .result-meta{
  color: rgba(255,255,255,.60);
}
html[data-bs-theme="dark"] #searchResults mark{
  background: rgba(255,79,79,.22);
}

/* ==================================================
   THEME SWITCH — Vidriera Treviño (Light/Dark skins)
   HTML:
   <label class="theme-switch">
     <input type="checkbox" id="themeToggle">
     <span class="slider"></span>
   </label>
   ================================================== */

:root{
  --vt-red: #ff4f4f;
  --vt-red2:#e63946;

  --vt-sun: #ffb703;
  --vt-moon:#bcd0ff;

  --vt-ink:#101218;
}

/* Size + base */
.theme-switch{
  width: 56px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.theme-switch input{
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

/* Track */
.theme-switch .slider{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Light skin (default) */
html[data-bs-theme="light"] .theme-switch .slider{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,245,.78));
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 28px rgba(0,0,0,.12);
}

/* subtle glow */
html[data-bs-theme="light"] .theme-switch .slider::after{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle at 25% 50%, rgba(255,183,3,.22), transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(255,79,79,.12), transparent 60%);
  pointer-events:none;
}

/* Dark skin (when html is dark) */
html[data-bs-theme="dark"] .theme-switch .slider{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 34px rgba(0,0,0,.55);
}

html[data-bs-theme="dark"] .theme-switch .slider::after{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle at 75% 50%, rgba(188,208,255,.18), transparent 60%),
              radial-gradient(circle at 25% 50%, rgba(255,79,79,.12), transparent 60%);
  pointer-events:none;
}

/* ==================================================
   Knob (the moving circle)
   ================================================== */
.theme-switch .slider::before{
  content:"";
  position:absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

/* knob light */
html[data-bs-theme="light"] .theme-switch .slider::before{
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.80));
  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* knob dark */
html[data-bs-theme="dark"] .theme-switch .slider::before{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(220,230,255,.82));
  box-shadow:
    0 12px 22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.60);
}

/* Move knob when checked */
.theme-switch input:checked + .slider::before{
  transform: translate(26px, -50%);
}

/* ==================================================
   Icons (sun / moon) inside the track
   ================================================== */

/* Sun icon (left) */
.theme-switch .slider .vt-sun,
.theme-switch .slider .vt-moon{ display:none; } /* (no HTML nodes needed) */

.theme-switch .slider{
  background-image: none; /* keep clean */
}

/* Use pseudo elements for icons */
.theme-switch .slider span{ display:none; } /* safety */

.theme-switch .slider{
  /* nothing here */
}

.theme-switch .slider{
  /* icons layer using gradients */
}

.theme-switch .slider{
  /* we draw icons with pseudo elements below */
}

.theme-switch .slider{
  /* keep */
}

.theme-switch .slider{
  /* keep */
}

/* Sun + Moon via ::marker style with pseudo elements */
.theme-switch .slider{
  /* enable pseudo icons */
}

.theme-switch .slider{
  /* no-op */
}

/* Actually place icons */
.theme-switch .slider{
  /* keep track */
}

.theme-switch .slider{
  /* icons: use ::before for knob already, so use ::after for glow and use extra via box-shadow on background */
}

/* Icons as background drawings (simple but crisp) */
html[data-bs-theme="light"] .theme-switch .slider{
  background-image:
    radial-gradient(circle at 16px 50%, rgba(255,183,3,.95) 0 3px, transparent 4px), /* sun core */
    radial-gradient(circle at 16px 50%, rgba(255,183,3,.35) 0 7px, transparent 8px); /* sun halo */
  background-repeat: no-repeat;
}

html[data-bs-theme="dark"] .theme-switch .slider{
  background-image:
    radial-gradient(circle at 40px 50%, rgba(188,208,255,.95) 0 3px, transparent 4px), /* moon core */
    radial-gradient(circle at 40px 50%, rgba(188,208,255,.30) 0 7px, transparent 8px); /* moon halo */
  background-repeat: no-repeat;
}

/* When checked we want moon visible in light and sun visible in dark */
html[data-bs-theme="light"] .theme-switch input:checked + .slider{
  background-image:
    radial-gradient(circle at 40px 50%, rgba(188,208,255,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 40px 50%, rgba(188,208,255,.26) 0 7px, transparent 8px);
}

html[data-bs-theme="dark"] .theme-switch input:checked + .slider{
  background-image:
    radial-gradient(circle at 16px 50%, rgba(255,183,3,.92) 0 3px, transparent 4px),
    radial-gradient(circle at 16px 50%, rgba(255,183,3,.22) 0 7px, transparent 8px);
}

/* ==================================================
   Hover / Active / Focus
   ================================================== */

.theme-switch:hover .slider{
  box-shadow:
    0 0 0 4px rgba(255,79,79,.10),
    0 18px 36px rgba(0,0,0,.14);
}

html[data-bs-theme="dark"] .theme-switch:hover .slider{
  box-shadow:
    0 0 0 4px rgba(255,79,79,.10),
    0 24px 54px rgba(0,0,0,.65);
}

.theme-switch:active .slider::before{
  transform: translateY(-50%) scale(.96);
}
.theme-switch input:checked:active + .slider::before{
  transform: translate(26px, -50%) scale(.96);
}

.theme-switch input:focus-visible + .slider{
  outline: 3px solid rgba(255,79,79,.22);
  outline-offset: 3px;
}

/* ==================================================
   FOOTER FIX — consistente con navbar (sin franja rosita)
   Pegar al FINAL de style2.css
   ================================================== */

.site-footer{
  /* reset fuerte para matar lo rosita/imagenes/overlays anteriores */
  background: rgba(255,255,255,.92) !important;
  background-image: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -18px 55px rgba(0,0,0,.10);

  padding: 48px 0 24px !important;
  margin-top: 64px;
  overflow: hidden;
  position: relative;
}

/* APAGA pseudo overlays anteriores (la franja/gradiente) */
.site-footer::before,
.site-footer::after{
  content: none !important;
}

/* Línea de acento igual que el header (muy sutil) */
.site-footer .container{
  position: relative;
}
.site-footer .container::before{
  content:"";
  position:absolute;
  left: 12px; right: 12px; top: -18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.35), transparent);
  opacity: .9;
}

/* Tipografía / espaciado */
.site-footer h5{
  font-weight: 800;
  font-size: 16px;
  color: rgba(16,18,24,.92);
  margin: 0 0 14px;
}

.site-footer p{
  color: rgba(16,18,24,.62);
  line-height: 1.7;
  font-size: 14.5px;
  margin: 12px 0 16px;
  max-width: 44ch;
}

/* Logo (tamaño correcto) */
.footer-brand img{
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.10));
}

/* Links */
.site-footer a{
  color: rgba(16,18,24,.70);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.site-footer a:hover{
  color: #ff4f4f;
}

.site-footer ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer ul li{
  padding: 8px 0;
}
.site-footer ul li a{
  font-weight: 600;
  font-size: 14px;
  color: rgba(16,18,24,.68);
  display: inline-flex;
  align-items: center;
}
.site-footer ul li a:hover{
  transform: translateX(2px);
}

/* Social: menos “globo”, más premium */
.site-footer .social-icons{
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.site-footer .social-icons a{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);

  color: rgba(16,18,24,.70);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.site-footer .social-icons a:hover{
  transform: translateY(-2px);
  background: rgba(255,79,79,.08);
  border-color: rgba(255,79,79,.30);
  color: #ff4f4f;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

/* Footer bottom */
.footer-bottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(16,18,24,.55);
  font-size: 13.5px;
}

/* ==================================================
   DARK MODE (mismo lenguaje del navbar dark)
   ================================================== */

html[data-bs-theme="dark"] .site-footer{
  background: rgba(12,12,14,.78) !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -22px 65px rgba(0,0,0,.70);
}

html[data-bs-theme="dark"] .site-footer .container::before{
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.35), transparent);
}

html[data-bs-theme="dark"] .site-footer h5{
  color: rgba(255,255,255,.92);
}

html[data-bs-theme="dark"] .site-footer p{
  color: rgba(255,255,255,.62);
}

html[data-bs-theme="dark"] .site-footer a{
  color: rgba(255,255,255,.72);
}

html[data-bs-theme="dark"] .site-footer ul li a{
  color: rgba(255,255,255,.70);
}

html[data-bs-theme="dark"] .site-footer .social-icons a{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
  color: rgba(255,255,255,.78);
}

html[data-bs-theme="dark"] .site-footer .social-icons a:hover{
  background: rgba(255,79,79,.12);
  border-color: rgba(255,79,79,.35);
  color: #ff4f4f;
}

html[data-bs-theme="dark"] .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}

/* Responsive */
@media (max-width: 768px){
  .site-footer{ padding: 42px 0 22px !important; }
  .site-footer p{ max-width: 100%; }
}

/* ==================================================
   FOOTER HOVERS = MISMO LENGUAJE QUE HEADER
   (pill + underline glow + lift)
   Pegar AL FINAL de style2.css
   ================================================== */

/* Links del footer: pill + underline glow como nav */
.site-footer a{
  position: relative;
  border-radius: 999px;
  padding: 6px 10px;              /* pill */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* underline glow */
.site-footer a::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,79,79,.95), transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

/* hover (igual que header) */
.site-footer a:hover{
  background: rgba(255,79,79,.08);
  transform: translateY(-1px);
  color: #ff4f4f;
}

.site-footer a:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Evitar que el logo sea pill */
.site-footer .footer-brand,
.site-footer .footer-brand:hover{
  background: transparent !important;
  padding: 0 !important;
  transform: none !important;
}
.site-footer .footer-brand::after{ content:none !important; }

/* Social icons: mismo lift + glow */
.site-footer .social-icons a{
  position: relative;
  overflow: hidden;
}

/* glow sutil al hover */
.site-footer .social-icons a::after{
  content:"";
  position:absolute;
  inset:-20px;
  background: radial-gradient(circle at 60% 40%, rgba(255,79,79,.18), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.site-footer .social-icons a:hover{
  transform: translateY(-2px);
  background: rgba(255,79,79,.08);
  border-color: rgba(255,79,79,.30);
  color: #ff4f4f;
  box-shadow: 0 20px 40px rgba(0,0,0,.14);
}

.site-footer .social-icons a:hover::after{
  opacity: 1;
}

/* Dark mode: hover mismo pero ajustado */
html[data-bs-theme="dark"] .site-footer a:hover{
  background: rgba(255,79,79,.12);
}

html[data-bs-theme="dark"] .site-footer .social-icons a:hover{
  background: rgba(255,79,79,.12);
  border-color: rgba(255,79,79,.35);
  box-shadow: 0 24px 54px rgba(0,0,0,.65);
}

/* ==================================================
   HERO PRO v2 — Vidriera Treviño (más premium)
   Pegar al FINAL de style2.css
   ================================================== */

.hero{
  /* más control */
  min-height: clamp(520px, 82vh, 760px);
  padding-top: 96px; /* por navbar fixed */
  isolation: isolate;
}

/* Fondo: menos “blanco lavado”, más contraste elegante */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.78) 0 26%, rgba(255,255,255,.42) 52%, rgba(255,255,255,.18) 70%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.06));
  pointer-events:none;
}

/* Glow suave de marca (no rosita) */
.hero::after{
  content:"";
  position:absolute;
  inset:-120px;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 55%, rgba(255,79,79,.10), transparent 55%),
    radial-gradient(circle at 72% 48%, rgba(0,0,0,.06), transparent 60%);
  pointer-events:none;
}

/* CARD (overlay) -> glass real */
.hero .overlay.glass{
  position: relative;
  z-index: 1;

  width: min(980px, calc(100% - 28px));
  padding: clamp(26px, 3.2vw, 44px);

  border-radius: 26px;
  background: rgba(255,255,255,.66);

  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 30px 90px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.85);

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

/* Borde luminoso premium (como “glass edge”) */
.hero .overlay.glass::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,79,79,.35), rgba(255,255,255,.65), rgba(0,0,0,.06));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* TITULO: más elegante, menos “bloque” */
.hero .glass-text{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(16,18,24,.92);
  text-wrap: balance;
  margin-bottom: 10px;

  /* tamaño más fino */
  font-size: clamp(38px, 5.2vw, 84px);
  line-height: 1.02;

  /* micro sombra para legibilidad */
  text-shadow: 0 1px 0 rgba(255,255,255,.70);
}

/* Subtítulo */
.hero .lead{
  margin: 0;
  font-weight: 600;
  letter-spacing: .2px;
  color: rgba(16,18,24,.62) !important;
  font-size: clamp(14px, 1.35vw, 20px);
}

/* Botones del hero: marca */
.hero .btn{
  border-radius: 14px;
  padding: 10px 18px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: none;
}

/* Botón rojo premium */
.hero .btn-danger{
  background: linear-gradient(135deg, #ff4f4f, #e63946);
  border: 0;
  box-shadow: 0 18px 40px rgba(255,79,79,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hero .btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 56px rgba(255,79,79,.30);
  filter: brightness(.98);
}
.hero .btn-danger:active{
  transform: translateY(0);
  box-shadow: 0 16px 36px rgba(255,79,79,.22);
}

/* Outline pro */
.hero .btn-outline-dark{
  border: 1px solid rgba(0,0,0,.18);
  color: rgba(16,18,24,.82);
  background: rgba(255,255,255,.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.hero .btn-outline-dark:hover{
  transform: translateY(-1px);
  background: rgba(255,79,79,.08);
  border-color: rgba(255,79,79,.28);
}

/* ==================================================
   DARK MODE
   ================================================== */

html[data-bs-theme="dark"] .hero::before{
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.10) 0 18%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
}

html[data-bs-theme="dark"] .hero::after{
  background:
    radial-gradient(circle at 30% 55%, rgba(255,79,79,.12), transparent 55%),
    radial-gradient(circle at 72% 48%, rgba(255,255,255,.06), transparent 60%);
}

html[data-bs-theme="dark"] .hero .overlay.glass{
  background: rgba(12,12,14,.58);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 38px 110px rgba(0,0,0,.75);
}

html[data-bs-theme="dark"] .hero .glass-text{
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

html[data-bs-theme="dark"] .hero .lead{
  color: rgba(255,255,255,.62) !important;
}

html[data-bs-theme="dark"] .hero .btn-outline-dark{
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
html[data-bs-theme="dark"] .hero .btn-outline-dark:hover{
  background: rgba(255,79,79,.12);
  border-color: rgba(255,79,79,.30);
}

/* Responsive: card menos gigante en móvil */
@media (max-width: 768px){
  .hero{ min-height: 640px; padding-top: 92px; }
  .hero .overlay.glass{ border-radius: 20px; }
  .hero .glass-text{ font-size: clamp(34px, 10vw, 54px); }
}

/* HERO glow sin romper viewport */
.hero::after{
  inset: 0 !important;
  filter: blur(0);
  opacity: 1;
}

/* ==================================================
   FIX TRANSICIÓN HERO -> PRODUCTOS (sin franja culera)
   ================================================== */

/* 1) HERO: menos alto y con final más limpio */
.hero{
  min-height: clamp(460px, 72vh, 680px) !important;
  padding-bottom: 40px; /* evita hueco exagerado */
}

/* mueve ligeramente el overlay hacia arriba para que no quede tanto vacío abajo */
.hero .overlay.glass{
  transform: translateY(-18px);
}

/* 2) PRODUCTOS: “tapa” el fondo del hero y se monta arriba */
#productos{
  position: relative;
  z-index: 3;                    /* arriba del hero */
  margin-top: -80px;             /* sube la sección */
  padding-top: 90px;             /* compensa el margen negativo */

  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-top-left-radius: 28px;
  border-top-right-radius: 28px;

  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -18px 60px rgba(0,0,0,.10);
}

/* 3) DARK MODE para que también cierre elegante */
html[data-bs-theme="dark"] #productos{
  background: rgba(10,10,12,.92) !important;
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -24px 80px rgba(0,0,0,.70);
}

/* 4) Mobile: menos margen para que no se pase */
@media (max-width: 768px){
  #productos{
    margin-top: -54px;
    padding-top: 76px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .hero .overlay.glass{
    transform: translateY(-10px);
  }
}

/* ==================================================
   CARDS PRO — Vidriera Treviño (Premium)
   Se engancha a tu template:
   .glass-card.product-card, .product-img, .product-title, etc.
   ================================================== */

:root{
  --vt-red:#ff4f4f;
  --vt-red2:#e63946;
  --vt-ink:#101218;
}

/* Grid: consistencia */
#product-grid{
  margin-top: 18px;
}
#product-grid .col-md-4{
  display:flex;
}
#product-grid .glass-card.product-card{
  width:100%;
}

/* Card shell */
.glass-card.product-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(255,255,255,.64);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 22px 60px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Glass edge (fino) */
.glass-card.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,79,79,.22), rgba(255,255,255,.55), rgba(0,0,0,.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.9;
}

/* Glow suave (no rosita) */
.glass-card.product-card::after{
  content:"";
  position:absolute;
  inset:-30px -30px auto -30px;
  height: 140px;
  background: radial-gradient(circle at 25% 50%, rgba(255,79,79,.12), transparent 65%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.glass-card.product-card:hover{
  transform: translateY(-5px);
  border-color: rgba(255,79,79,.22);
  box-shadow: 0 32px 90px rgba(0,0,0,.14);
}
.glass-card.product-card:hover::after{
  opacity: 1;
}

/* Imagen: más pro, sin verse “pegada” */
.glass-card.product-card .product-img{
  height: 360px !important; /* más elegante que 400 */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  transition: transform .25s ease, filter .25s ease;
}

.glass-card.product-card:hover .product-img{
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.02);
}

/* Título */
.glass-card.product-card .product-title{
  color: rgba(16,18,24,.92);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* Specs */
.glass-card.product-card dt{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(16,18,24,.52) !important;
}
.glass-card.product-card dd{
  font-size: 14px;
  font-weight: 700;
  color: rgba(16,18,24,.78);
}

/* CTA: flotante tipo e-commerce */
.glass-card.product-card .btn.btn-danger{
  position: absolute;
  bottom: 18px;

  border-radius: 14px;
  border: 0;
  font-weight: 900;
  letter-spacing: .15px;
  padding: 10px 14px;

  background: linear-gradient(135deg, var(--vt-red), var(--vt-red2));
  box-shadow: 0 18px 40px rgba(255,79,79,.24);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .15s ease, filter .15s ease;
}

.glass-card.product-card:hover .btn.btn-danger{
  opacity: 1;
  transform: translateY(0);
}

.glass-card.product-card .btn.btn-danger:hover{
  box-shadow: 0 24px 56px rgba(255,79,79,.30);
  filter: brightness(.98);
}
.glass-card.product-card .btn i{
  transition: transform .15s ease;
}
.glass-card.product-card .btn:hover i{
  transform: translateX(2px);
}

/* para que el botón flotante no tape texto */
.glass-card.product-card .card-body{
  padding-bottom: 64px !important;
}

/* En móvil: CTA siempre visible (no hay hover) */
@media (max-width: 768px){
  .glass-card.product-card .btn.btn-danger{
    opacity: 1;
    transform: translateY(0);
  }
  .glass-card.product-card .product-img{
    height: 320px !important;
  }
}

/* ==================================================
   DARK MODE
   ================================================== */
html[data-bs-theme="dark"] .glass-card.product-card{
  background: rgba(12,12,14,.58);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 34px 90px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] .glass-card.product-card::before{
  background: linear-gradient(135deg, rgba(255,79,79,.22), rgba(255,255,255,.10), rgba(0,0,0,.35));
  opacity: .95;
}
html[data-bs-theme="dark"] .glass-card.product-card:hover{
  border-color: rgba(255,79,79,.25);
  box-shadow: 0 44px 120px rgba(0,0,0,.78);
}
html[data-bs-theme="dark"] .glass-card.product-card .product-title{
  color: rgba(255,255,255,.92);
}
html[data-bs-theme="dark"] .glass-card.product-card dt{
  color: rgba(255,255,255,.52) !important;
}
html[data-bs-theme="dark"] .glass-card.product-card dd{
  color: rgba(255,255,255,.78);
}
html[data-bs-theme="dark"] .glass-card.product-card .product-img{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 70px rgba(0,0,0,.72);
}

/* ==================================================
   PRODUCT IMAGES — que no se vean gigantes
   ================================================== */

/* Contenedor de imagen dentro de la card */
.glass-card.product-card .product-img{
  width: 100%;
  height: clamp(240px, 28vw, 330px) !important; /* ajusta automático */
  object-fit: contain !important;              /* 🔥 muestra completo */
  object-position: center;
  background: #fff;                            /* fondo limpio */
  padding: 14px;                               /* aire alrededor */
  border-radius: 18px;
}

/* En móvil: un poco más baja */
@media (max-width: 768px){
  .glass-card.product-card .product-img{
    height: 260px !important;
    padding: 12px;
  }
}

/* ==================================================
   PRODUCT SPECS — más bonito y ordenado
   Aplica a tu <dl class="row mb-4"> dentro de .product-card
   ================================================== */

.glass-card.product-card dl{
  margin: 14px 0 18px !important;
}

/* Convierte el dl a grid limpio */
.glass-card.product-card dl.row{
  display: grid;
  grid-template-columns: 1fr; /* móvil */
  gap: 10px;
}

/* Cada dt/dd como fila “spec” */
.glass-card.product-card dl.row dt,
.glass-card.product-card dl.row dd{
  margin: 0 !important;
  padding: 0 !important;
}

/* Oculta el layout de bootstrap row/cols */
.glass-card.product-card dl.row .col-4,
.glass-card.product-card dl.row .col-8{
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}

/* Cada par dt+dd: los juntamos visualmente */
.glass-card.product-card dl.row dt{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(16,18,24,.50) !important;
  text-align: left !important;
}

.glass-card.product-card dl.row dd{
  font-size: 14.5px;
  font-weight: 800;
  color: rgba(16,18,24,.86);
  line-height: 1.25;
  padding-top: 2px !important;
}

/* Caja de cada spec (separador premium) */
.glass-card.product-card dl.row dt{
  position: relative;
}
.glass-card.product-card dl.row dt::after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 1px;
  background: rgba(0,0,0,.06);
}

/* Último sin línea */
.glass-card.product-card dl.row dt:last-of-type::after{
  display:none;
}

/* En pantallas medianas: 2 columnas para que se vea pro */
@media (min-width: 768px){
  .glass-card.product-card dl.row{
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  /* Para que la línea no se vea rara en grid, la hacemos más sutil */
  .glass-card.product-card dl.row dt::after{
    background: rgba(0,0,0,.05);
  }
}

/* Dark mode */
html[data-bs-theme="dark"] .glass-card.product-card dl.row dt{
  color: rgba(255,255,255,.55) !important;
}
html[data-bs-theme="dark"] .glass-card.product-card dl.row dd{
  color: rgba(255,255,255,.86);
}
html[data-bs-theme="dark"] .glass-card.product-card dl.row dt::after{
  background: rgba(255,255,255,.08);
}

/* ==================================================
   Chips (Tapa/Corcho) — Vidriera Treviño
   ================================================== */

.product-lid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* chip base */
.vt-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .15px;

  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(16,18,24,.78);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.glass-card.product-card:hover .vt-chip{
  border-color: rgba(255,79,79,.22);
}

/* variantes */
.vt-chip.is-black{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}
.vt-chip.is-white{
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.12);
}
.vt-chip.is-gold{
  background: rgba(255,183,3,.14);
  border-color: rgba(255,183,3,.28);
}
.vt-chip.is-silver{
  background: rgba(160,160,160,.14);
  border-color: rgba(160,160,160,.28);
}
.vt-chip.is-cork{
  background: rgba(160,110,60,.14);
  border-color: rgba(160,110,60,.28);
}

/* Dark mode */
html[data-bs-theme="dark"] .vt-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
}
html[data-bs-theme="dark"] .vt-chip.is-black{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
html[data-bs-theme="dark"] .vt-chip.is-white{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* ==================================================
   SPECS PRO — 2 columnas, ordenado (DL -> grid)
   ================================================== */

.vt-specs{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px 18px;
  margin: 14px 0 18px !important;
}

/* Cada DT/DD se vuelve un bloque limpio */
.vt-specs dt,
.vt-specs dd{
  margin: 0 !important;
  padding: 0 !important;
}

/* Desactiva columnas bootstrap */
.vt-specs .col-4,
.vt-specs .col-8{
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}

/* Contenedor por spec: usamos el dt como “header” y dd como valor */
.vt-specs dt{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(16,18,24,.52) !important;
}

.vt-specs dd{
  font-size: 14.5px;
  font-weight: 850;
  color: rgba(16,18,24,.86);
  line-height: 1.25;
  padding-top: 2px !important;
}

/* Separador fino */
.vt-specs dt{
  position: relative;
  padding-bottom: 8px !important;
}
.vt-specs dt::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,.06);
}

/* En desktop: 2 columnas */
@media (min-width: 768px){
  .vt-specs{
    grid-template-columns: 1fr 1fr;
  }
}

/* Dark mode */
html[data-bs-theme="dark"] .vt-specs dt{
  color: rgba(255,255,255,.55) !important;
}
html[data-bs-theme="dark"] .vt-specs dd{
  color: rgba(255,255,255,.86);
}
html[data-bs-theme="dark"] .vt-specs dt::after{
  background: rgba(255,255,255,.08);
}

.glass-card.product-card::after{ content:none !important; }

/* ==================================================
   FIX: quitar espacio enorme y acomodar CTA bonito
   ================================================== */

/* La card se comporta como columna */
.glass-card.product-card{
  display: flex;
  flex-direction: column;
}

/* Imagen arriba, cuerpo abajo */
.glass-card.product-card .product-img{
  flex: 0 0 auto;
}

/* El body no debe generar espacio raro */
.glass-card.product-card .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Specs más compactos */
.glass-card.product-card dl.row.vt-specs{
  margin: 8px 0 6px !important;
  gap: 10px 18px !important;
}

/* Botón: siempre abajo del contenido, centrado, SIN irse al fondo exagerado */
.glass-card.product-card .btn.btn-danger{
  margin: 12px auto 0 !important;
  align-self: center;
}

/* Si hay pocas specs, evita que el botón baje demasiado */
.glass-card.product-card .card-body > .btn.btn-danger{
  margin-top: 10px !important;
}

/* Reduce padding total de la card para que no se vea “vacía” */
.glass-card.product-card{
  padding-bottom: 10px;
}

.glass-card.product-card dl.row{ margin-bottom: 10px !important; }

/* ==================================================
   LOAD MORE — Vidriera button
   ================================================== */

#loadMoreBtn{
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  letter-spacing: .15px;

  border: 1px solid rgba(255,79,79,.20) !important;
  background: linear-gradient(135deg, #ff4f4f, #e63946) !important;
  color: #fff !important;

  box-shadow: 0 18px 44px rgba(255,79,79,.22) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#loadMoreBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 62px rgba(255,79,79,.28) !important;
  filter: brightness(.98);
}

#loadMoreBtn:active{
  transform: translateY(0);
  box-shadow: 0 16px 36px rgba(255,79,79,.20) !important;
}

/* Dark mode */
html[data-bs-theme="dark"] #loadMoreBtn{
  box-shadow: 0 26px 70px rgba(0,0,0,.65) !important;
}

/* ==================================================
   WHATSAPP FLOAT — premium
   ================================================== */

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1300;

  width: 54px;
  height: 54px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* ícono */
.whatsapp-float i{
  color: #25D366 !important; /* whatsapp */
  font-size: 28px !important;
  filter: drop-shadow(0 10px 20px rgba(37,211,102,.25));
}

.whatsapp-float:hover{
  transform: translateY(-2px);
  border-color: rgba(37,211,102,.35);
  box-shadow: 0 28px 76px rgba(0,0,0,.16);
}

/* Dark mode */
html[data-bs-theme="dark"] .whatsapp-float{
  background: rgba(12,12,14,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
}

/* ==================================================
   BACK TO TOP — premium + no choca con WhatsApp
   ================================================== */

#backToTop{
  position: fixed;
  right: 18px;
  bottom: 86px; /* arriba del WhatsApp */
  z-index: 1300;

  width: 50px;
  height: 50px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;

  cursor: pointer;
}

#backToTop i{
  font-size: 18px;
  color: rgba(16,18,24,.78);
}

#backToTop:hover{
  transform: translateY(-2px);
  border-color: rgba(255,79,79,.30);
  box-shadow: 0 28px 76px rgba(0,0,0,.16);
}

/* Dark mode */
html[data-bs-theme="dark"] #backToTop{
  background: rgba(12,12,14,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] #backToTop i{
  color: rgba(255,255,255,.78);
}

/* ==================================================
   PRODUCTO / INFOGRAFÍA (infografic-product.js)
   Scope: SOLO #productInfo
   ================================================== */

#productInfo{
  --vt-red:#ff4f4f;
  --vt-red2:#e63946;
  --vt-ink:#101218;

  max-width: 1180px;
  margin: 0 auto;
}

/* Tarjeta general para que se sienta “premium” */
#productInfo .row.g-5{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.10);
}

/* Imagen principal: look estudio */
#productInfo #mainImage{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.06);
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10) !important;
}

/* Título */
#productInfo h2{
  font-weight: 950 !important;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(16,18,24,.92);
}

/* Barra “¿Te gustaría… + COTIZAR” */
#productInfo .border-bottom{
  border-color: rgba(0,0,0,.08) !important;
}
#productInfo .text-muted{
  color: rgba(16,18,24,.60) !important;
  font-weight: 700;
}

/* Botón COTIZAR (reemplaza el azul de bootstrap) */
#productInfo .btn.btn-primary{
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .15px;
  padding: 10px 16px !important;

  background: linear-gradient(135deg, var(--vt-red), var(--vt-red2)) !important;
  box-shadow: 0 18px 40px rgba(255,79,79,.24) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#productInfo .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 56px rgba(255,79,79,.30) !important;
  filter: brightness(.98);
}

/* =========================
   TAPAS (color dots)
   ========================= */

#productInfo #capColors{
  gap: 10px !important;
}

#productInfo .color-dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  outline: 0;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#productInfo .color-dot:hover{
  transform: translateY(-1px);
  border-color: rgba(255,79,79,.25);
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
}

/* Ring del activo */
#productInfo .color-dot.active{
  border-color: rgba(255,79,79,.55);
  box-shadow: 0 22px 60px rgba(255,79,79,.20);
}
#productInfo .color-dot.active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 2px solid rgba(255,79,79,.42);
  pointer-events:none;
}

/* Label del color seleccionado */
#productInfo #selectedCapColor{
  font-weight: 950;
  color: rgba(16,18,24,.86) !important;
}

/* =========================
   TAMAÑOS (botones)
   ========================= */

#productInfo #sizeButtons{
  gap: 10px !important;
}

/* Outline premium */
#productInfo #sizeButtons .btn{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .2px;

  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(16,18,24,.86) !important;

  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#productInfo #sizeButtons .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,79,79,.28) !important;
  background: rgba(255,79,79,.08) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

/* Cuando tu JS cambia a btn-primary (tamaño activo) */
#productInfo #sizeButtons .btn.btn-primary{
  background: linear-gradient(135deg, var(--vt-red), var(--vt-red2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 18px 40px rgba(255,79,79,.24) !important;
}

/* Bullets */
#productInfo ul.small{
  color: rgba(16,18,24,.62) !important;
  font-weight: 700;
  margin-bottom: 14px !important;
}
#productInfo ul.small li{
  margin: 6px 0;
}

/* =========================
   Caja “Categoría” (tu .bg-light)
   ========================= */
#productInfo .bg-light{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px !important;
}

/* =========================
   Compartir: iconos como botones
   ========================= */
#productInfo .mb-3.d-flex a{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#productInfo .mb-3.d-flex a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,79,79,.28);
  background: rgba(255,79,79,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

#productInfo .mb-3.d-flex a i{
  color: rgba(16,18,24,.78);
}

/* =========================
   Tabla Especificaciones
   ========================= */

#productInfo .table{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}

/* Quita el look “borde duro” */
#productInfo .table-bordered > :not(caption) > *{
  border-color: rgba(0,0,0,.06) !important;
}
#productInfo .table td{
  padding: 12px 14px;
  font-weight: 650;
  color: rgba(16,18,24,.82);
}
#productInfo .table td strong{
  font-weight: 950;
  color: rgba(16,18,24,.72);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 992px){
  #productInfo .row.g-5{
    padding: 16px;
    border-radius: 18px;
  }
  #productInfo #mainImage{
    padding: 12px;
    border-radius: 16px !important;
  }
}

/* =========================
   Dark mode
   ========================= */
html[data-bs-theme="dark"] #productInfo .row.g-5{
  background: rgba(12,12,14,.58);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 100px rgba(0,0,0,.78);
}

html[data-bs-theme="dark"] #productInfo h2{
  color: rgba(255,255,255,.92);
}

html[data-bs-theme="dark"] #productInfo .text-muted{
  color: rgba(255,255,255,.60) !important;
}

html[data-bs-theme="dark"] #productInfo #mainImage{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.72) !important;
}

html[data-bs-theme="dark"] #productInfo .color-dot{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] #productInfo #selectedCapColor{
  color: rgba(255,255,255,.86) !important;
}

html[data-bs-theme="dark"] #productInfo #sizeButtons .btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.86) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] #productInfo .bg-light{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}
html[data-bs-theme="dark"] #productInfo .mb-3.d-flex a{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
}
html[data-bs-theme="dark"] #productInfo .mb-3.d-flex a i{
  color: rgba(255,255,255,.82);
}
html[data-bs-theme="dark"] #productInfo .table{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.80);
}
html[data-bs-theme="dark"] #productInfo .table td{
  color: rgba(255,255,255,.84);
}
html[data-bs-theme="dark"] #productInfo .table td strong{
  color: rgba(255,255,255,.78);
}

/* ==================================================
   Color dots (swatches) — PREMIUM
   ================================================== */

#productInfo #capColors{
  gap: 12px !important;
  align-items: center;
}

/* Base */
#productInfo .color-dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background-clip: padding-box;

  /* look “glass” */
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  position: relative;
  cursor: pointer;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
  outline: none;
}

/* Brillito diagonal */
#productInfo .color-dot::after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* Hover */
#productInfo .color-dot:hover{
  transform: translateY(-1px);
  border-color: rgba(255,79,79,.28);
  box-shadow:
    0 14px 34px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.90);
  filter: saturate(1.05);
}

/* Activo: un solo ring pro + halo suave */
#productInfo .color-dot.active{
  border-color: rgba(255,79,79,.55);
  box-shadow:
    0 18px 46px rgba(0,0,0,.16),
    0 0 0 4px rgba(255,79,79,.18),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* Check centrado (limpio) */
#productInfo .color-dot.active::before{
  content:"";
  position:absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 14px;
  border-right: 3px solid rgba(16,18,24,.92);
  border-bottom: 3px solid rgba(16,18,24,.92);
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Si el color es oscuro, check blanco */
#productInfo .color-dot[data-color="negro"].active::before,
#productInfo .color-dot[style*="black"].active::before{
  border-right-color: rgba(255,255,255,.92);
  border-bottom-color: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* Si el swatch es blanco, que se vea (borde extra) */
#productInfo .color-dot[data-color="blanco"],
#productInfo .color-dot[style*="white"]{
  border-color: rgba(0,0,0,.18);
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Dark mode */
html[data-bs-theme="dark"] #productInfo .color-dot{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.20);
}

html[data-bs-theme="dark"] #productInfo .color-dot.active{
  box-shadow:
    0 22px 70px rgba(0,0,0,.80),
    0 0 0 4px rgba(255,79,79,.22),
    inset 0 1px 0 rgba(255,255,255,.24);
}

/* Dark mode: check claro por default */
html[data-bs-theme="dark"] #productInfo .color-dot.active::before{
  border-right-color: rgba(255,255,255,.92);
  border-bottom-color: rgba(255,255,255,.92);
}

#productInfo .color-dot[data-color="oro"]{
  background: linear-gradient(135deg, #f7d774, #d7a83a) !important;
}

/* ==================================================
   Swatches: mejorar blanco / negro / corcho (oro ya OK)
   ================================================== */

/* Blanco: que se vea “material” (no círculo vacío) */
#productInfo .color-dot[data-color="blanco"],
#productInfo .color-dot[style*="white"]{
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%) !important;
  border-color: rgba(0,0,0,.22) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Negro: profundidad (no “plano”) */
#productInfo .color-dot[data-color="negro"],
#productInfo .color-dot[style*="black"]{
  background: radial-gradient(circle at 30% 25%, #3a3a3a 0%, #151515 55%, #0b0b0b 100%) !important;
  border-color: rgba(0,0,0,.35) !important;
}

/* Corcho: tono madera claro (tu JS usa data-color="corcho") */
#productInfo .color-dot[data-color="corcho"]{
  background: radial-gradient(circle at 30% 25%, #f2dfc2 0%, #d3b58f 55%, #b4895e 100%) !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* Check: más limpio (sin verse “grueso”) */
#productInfo .color-dot.active::before{
  width: 7px !important;
  height: 12px !important;
  border-right-width: 2.5px !important;
  border-bottom-width: 2.5px !important;
  transform: translate(-50%,-55%) rotate(45deg) !important;
}

/* Si el fondo es claro (blanco/corcho/oro), check oscuro; si es negro, check blanco (ya lo tienes, reforzamos) */
#productInfo .color-dot[data-color="negro"].active::before,
#productInfo .color-dot[style*="black"].active::before{
  border-right-color: rgba(255,255,255,.94) !important;
  border-bottom-color: rgba(255,255,255,.94) !important;
}

/* Dark mode: blanco/corcho no se pierden */
html[data-bs-theme="dark"] #productInfo .color-dot[data-color="blanco"],
html[data-bs-theme="dark"] #productInfo .color-dot[style*="white"]{
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ==================================================
   MODAL COTIZAR — Vidriera Treviño (glass + pro)
   ================================================== */

/* Fondo (backdrop) */
.modal-backdrop.show{
  opacity: .55;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Contenedor modal */
#cotizarModal .modal-dialog{
  max-width: 520px;
}

#cotizarModal .modal-content{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 34px 110px rgba(0,0,0,.22);
  overflow: hidden;
}

/* Header */
#cotizarModal .modal-header{
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

#cotizarModal .modal-title{
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(16,18,24,.92);
}

/* Botón cerrar */
#cotizarModal .btn-close{
  opacity: .7;
  transform: scale(1.05);
}
#cotizarModal .btn-close:hover{ opacity: 1; }

/* Body / Form */
#cotizarModal .modal-body{
  padding: 18px 20px 20px;
}

/* Inputs */
#cotizarModal .form-control,
#cotizarModal .form-select{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  padding: 12px 14px;
  font-weight: 650;
  color: rgba(16,18,24,.88);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#cotizarModal textarea.form-control{ min-height: 110px; resize: vertical; }

/* Focus */
#cotizarModal .form-control:focus,
#cotizarModal .form-select:focus{
  border-color: rgba(255,79,79,.45);
  box-shadow:
    0 16px 38px rgba(0,0,0,.08),
    0 0 0 4px rgba(255,79,79,.16);
  transform: translateY(-1px);
}

/* Campo readonly (producto) */
#cotizarModal #productoNombre{
  background: rgba(0,0,0,.03);
}

/* Botón enviar (rojo VT) */
#cotizarModal button.btn{
  border: 0 !important;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 950;
  letter-spacing: .2px;
  background: linear-gradient(135deg, #ff4f4f, #e63946) !important;
  box-shadow: 0 18px 44px rgba(255,79,79,.26);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#cotizarModal button.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 60px rgba(255,79,79,.32);
  filter: brightness(.98);
}

#cotizarModal button.btn:active{
  transform: translateY(0px) scale(.99);
}

/* =========================================
   Dark mode
   ========================================= */
html[data-bs-theme="dark"] #cotizarModal .modal-content{
  background: rgba(12,12,14,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.80);
}

html[data-bs-theme="dark"] #cotizarModal .modal-title{
  color: rgba(255,255,255,.92);
}

html[data-bs-theme="dark"] #cotizarModal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

html[data-bs-theme="dark"] #cotizarModal .form-control,
html[data-bs-theme="dark"] #cotizarModal .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
}

html[data-bs-theme="dark"] #cotizarModal #productoNombre{
  background: rgba(255,255,255,.06);
}


/* ==================================================
   MODAL COTIZAR — polish final (marca + jerarquía)
   ================================================== */

/* Acento superior tipo Vidriera (línea/gradiente) */
#cotizarModal .modal-content{
  position: relative;
}

#cotizarModal .modal-content::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 5px;
  background: linear-gradient(90deg, #ff4f4f, #e63946, #ff7a7a);
  opacity: .95;
}

/* Header más pro */
#cotizarModal .modal-header{
  padding: 18px 22px 14px !important;
}

#cotizarModal .modal-title{
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* Línea separadora más sutil */
#cotizarModal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html[data-bs-theme="light"] #cotizarModal .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

/* Body: menos “alto” y más compacto */
#cotizarModal .modal-body{
  padding: 14px 22px 20px !important;
}

/* Inputs: menos “bloque”, más fino */
#cotizarModal .form-control,
#cotizarModal .form-select{
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  border-width: 1px !important;
}

/* Dark mode: textura sutil en inputs para que no se vean “muertos” */
html[data-bs-theme="dark"] #cotizarModal .form-control,
html[data-bs-theme="dark"] #cotizarModal .form-select{
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

html[data-bs-theme="dark"] #cotizarModal .form-control::placeholder{
  color: rgba(255,255,255,.55);
}

/* Focus: aro rojo más fino (elegante) */
#cotizarModal .form-control:focus,
#cotizarModal .form-select:focus{
  transform: none !important;
  box-shadow: 0 0 0 3px rgba(255,79,79,.18) !important;
  border-color: rgba(255,79,79,.55) !important;
}

/* Campo producto (readonly) como “tag” */
#cotizarModal #productoNombre{
  font-weight: 850;
  letter-spacing: -0.01em;
  border-color: rgba(255,79,79,.18) !important;
}

/* Textarea: más elegante */
#cotizarModal textarea.form-control{
  min-height: 120px !important;
}

/* Botón: más “premium” (menos alto y mejor glow) */
#cotizarModal button.btn{
  border-radius: 18px !important;
  padding: 12px 16px !important;
  font-size: 16px;
  box-shadow:
    0 18px 44px rgba(255,79,79,.22) !important;
}

#cotizarModal button.btn:hover{
  box-shadow:
    0 24px 60px rgba(255,79,79,.28) !important;
}

/* En pantallas medianas: 2 columnas (se ve pro y no ta*

/* ==================================================
   MODAL: Labels tipo "Nombre:" arriba del campo (sin HTML)
   OJO: depende del orden actual de tus inputs dentro de #cotizarForm
   ================================================== */

#cotizarModal #cotizarForm{
  display: grid;
  gap: 14px;
}

/* Cada campo envuelto visualmente */
#cotizarModal #cotizarForm > *{
  position: relative;
}

/* Estilo general del label */
#cotizarModal #cotizarForm > *::before{
  position: absolute;
  top: -10px;
  left: 8px;
  padding: 0 8px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;

  color: rgba(255,255,255,.78);
  background: rgba(12,12,14,.85);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;

  content: "";
}

/* Light mode labels */
html[data-bs-theme="light"] #cotizarModal #cotizarForm > *::before{
  color: rgba(16,18,24,.72);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
}

/* 1) Nombre */
#cotizarModal #cotizarForm > :nth-child(1)::before{ content: "Nombre *"; }
/* 2) Email */
#cotizarModal #cotizarForm > :nth-child(2)::before{ content: "Email *"; }
/* 3) Teléfono */
#cotizarModal #cotizarForm > :nth-child(3)::before{ content: "Teléfono"; }
/* 4) Producto */
#cotizarModal #cotizarForm > :nth-child(4)::before{ content: "Producto"; }
/* 5) Tapa/Corcho */
#cotizarModal #cotizarForm > :nth-child(5)::before{ content: "Tapa / Corcho"; }
/* 6) Cantidad */
#cotizarModal #cotizarForm > :nth-child(6)::before{ content: "Cantidad"; }
/* 7) Mensaje */
#cotizarModal #cotizarForm > :nth-child(7)::before{ content: "Mensaje"; }

/* Para que no se encime con el label */
#cotizarModal #cotizarForm .form-control,
#cotizarModal #cotizarForm .form-select{
  padding-top: 14px !important;
}

/* Quitar labels fake (los ::before) */
#cotizarModal #cotizarForm > *::before{
  content: none !important;
  display: none !important;
}

/* Quitar el padding-top extra que pusimos */
#cotizarModal #cotizarForm .form-control,
#cotizarModal #cotizarForm .form-select{
  padding-top: 12px !important;
}

/* Card producto */
.vt-card{
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.vt-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.vt-card .vt-thumb{
  background: #fff;
}

.vt-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
}

.vt-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0,0,0,.04);
}

/* Empty state (categoría) */
.vt-empty{
  padding: 56px 12px 90px;
  display: grid;
  place-items: center;
}

.vt-empty__card{
  width: min(720px, 100%);
  text-align: center;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  padding: 26px 18px 22px;
}

.vt-empty__img{
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: .18;
  margin: 6px auto 14px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.10));
}

.vt-empty__title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 22px;
}

.vt-empty__text{
  margin: 0 auto 14px;
  max-width: 480px;
  color: rgba(0,0,0,.6);
  font-size: 14px;
}

.vt-empty__actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Botones empty state */
.vt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  text-decoration: none;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.vt-btn:active{
  transform: translateY(1px) scale(.99);
}

/* CTA principal */
.vt-btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #111827 0%, #000 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.2);
}

.vt-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

/* Secundario tipo “glass” */
.vt-btn--ghost{
  color: #111827;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.vt-btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Mejor separación / centrado */
.vt-empty__actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* FIX: el nombre trae "text-dark" y en dark se ve negro.
   Solo lo corregimos dentro del grid de categoría */
html[data-bs-theme="dark"] #productsGrid .text-dark{
  color: rgba(255,255,255,.92) !important;
}

/* =========================
   Footer premium Vidriera
========================= */
.vt-footer{
  margin-top: 60px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: radial-gradient(1200px 400px at 20% 0%, rgba(255,0,0,.06), transparent 60%),
              radial-gradient(900px 350px at 80% 10%, rgba(0,0,0,.06), transparent 55%),
              #fff;
}

html[data-bs-theme="dark"] .vt-footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(1200px 400px at 20% 0%, rgba(255,0,0,.10), transparent 60%),
              radial-gradient(900px 350px at 80% 10%, rgba(255,255,255,.06), transparent 55%),
              #0b0f14;
}

.vt-footer__top{
  padding: 44px 0 28px;
}

.vt-footer__brand{
  padding-right: 10px;
}

.vt-footer__logo{
  width: 150px;
  height: auto;
  display:block;
  margin-bottom: 12px;
}

.vt-footer__desc{
  color: rgba(0,0,0,.62);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 0 14px;
}

html[data-bs-theme="dark"] .vt-footer__desc{
  color: rgba(255,255,255,.62);
}

.vt-footer__social{
  display:flex;
  gap: 10px;
  margin-bottom: 14px;
}

.vt-ic{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: rgba(0,0,0,.72);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vt-ic:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.18);
}

html[data-bs-theme="dark"] .vt-ic{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}
html[data-bs-theme="dark"] .vt-ic:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.20);
}

.vt-footer__cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #111827 0%, #000 100%);
  color: #fff;
  text-decoration:none;
  font-weight: 700;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
}
.vt-footer__cta:hover{ transform: translateY(-1px); }

.vt-footer__title{
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 2px 0 14px;
  color: rgba(0,0,0,.86);
}
html[data-bs-theme="dark"] .vt-footer__title{
  color: rgba(255,255,255,.90);
}

.vt-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.vt-footer__item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.vt-dot{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: rgba(0,0,0,.70);
  flex: 0 0 auto;
}

html[data-bs-theme="dark"] .vt-dot{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}

.vt-footer__label{
  font-size: 12px;
  color: rgba(0,0,0,.52);
  margin-bottom: 2px;
}
html[data-bs-theme="dark"] .vt-footer__label{
  color: rgba(255,255,255,.55);
}

.vt-footer__value{
  color: rgba(0,0,0,.78);
  line-height: 1.4;
}
html[data-bs-theme="dark"] .vt-footer__value{
  color: rgba(255,255,255,.82);
}

.vt-footer__link{
  color: rgba(0,0,0,.70);
  text-decoration: none;
  font-weight: 650;
}
.vt-footer__link:hover{ text-decoration: underline; }

html[data-bs-theme="dark"] .vt-footer__link{
  color: rgba(255,255,255,.80);
}

.vt-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.vt-footer__links a{
  text-decoration:none;
  color: rgba(0,0,0,.66);
  font-weight: 600;
}
.vt-footer__links a:hover{
  color: rgba(0,0,0,.92);
  text-decoration: underline;
}
html[data-bs-theme="dark"] .vt-footer__links a{
  color: rgba(255,255,255,.70);
}
html[data-bs-theme="dark"] .vt-footer__links a:hover{
  color: rgba(255,255,255,.92);
}

.vt-footer__map{
  margin-top: 14px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
}
.vt-footer__map iframe{
  width:100%;
  height: 170px;
  border: 0;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
html[data-bs-theme="dark"] .vt-footer__map{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}
html[data-bs-theme="dark"] .vt-footer__map iframe{
  filter: grayscale(.2) contrast(1.05) brightness(.92);
}

.vt-footer__bottom{
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}
html[data-bs-theme="dark"] .vt-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.10);
}

.vt-footer__copy{
  color: rgba(0,0,0,.55);
  font-size: 13px;
}
html[data-bs-theme="dark"] .vt-footer__copy{
  color: rgba(255,255,255,.55);
}

.vt-footer__mini{
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(0,0,0,.35);
  font-size: 13px;
}
.vt-footer__mini a{
  color: rgba(0,0,0,.60);
  text-decoration:none;
  font-weight: 650;
}
.vt-footer__mini a:hover{ text-decoration: underline; }

html[data-bs-theme="dark"] .vt-footer__mini{
  color: rgba(255,255,255,.25);
}
html[data-bs-theme="dark"] .vt-footer__mini a{
  color: rgba(255,255,255,.65);
}

/* =========================
   Footer simple premium
========================= */

.vt-footer-simple{
  margin-top: 60px;
  padding: 48px 0 0;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

html[data-bs-theme="dark"] .vt-footer-simple{
  background: #070a0f;
  border-top: 1px solid rgba(255,255,255,.12);
}

.vt-footer-logo{
  width: 150px;
  margin-bottom: 14px;
}

.vt-footer-desc{
  max-width: 360px;
  line-height: 1.6;
  color: rgba(0,0,0,.65);
}

html[data-bs-theme="dark"] .vt-footer-desc{
  color: rgba(255,255,255,.65);
}

/* Social */
.vt-footer-social{
  display: flex;
  gap: 10px;
  margin: 16px 0;
}

.vt-footer-social a{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.75);
  transition: transform .15s ease, box-shadow .15s ease;
}

.vt-footer-social a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

html[data-bs-theme="dark"] .vt-footer-social a{
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}

/* CTA */
.vt-footer-cta{
  display: inline-block;
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #111827, #000);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Info */
.vt-footer-title{
  font-weight: 800;
  margin-bottom: 14px;
}

.vt-footer-info{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vt-footer-info li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(0,0,0,.75);
}

.vt-footer-info i{
  margin-top: 3px;
}

html[data-bs-theme="dark"] .vt-footer-info li{
  color: rgba(255,255,255,.8);
}

.vt-footer-info a{
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Mapa */
.vt-footer-map{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
}

.vt-footer-map iframe{
  width: 100%;
  height: 220px;
  border: 0;
}

html[data-bs-theme="dark"] .vt-footer-map{
  border: 1px solid rgba(255,255,255,.12);
}

/* Bottom */
.vt-footer-bottom{
  margin-top: 32px;
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(0,0,0,.55);
  border-top: 1px solid rgba(0,0,0,.06);
}

html[data-bs-theme="dark"] .vt-footer-bottom{
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.1);
}