/* ==========================================================================
   chrome.css — Topbar + Navbar + Footer (GECOTEL web)
   --------------------------------------------------------------------------
   Autosuficiente: NO depende de style.css (plantilla). Se carga en todas las
   páginas públicas. Todo va bajo .vx-topbar / .vx-navbar / .vx-footer para no
   contaminar el resto. Se conservan los hooks/IDs que usa el JS
   (contacto_compartido.js, i18n.js, main.js).
   ========================================================================== */

:root {
  --vx-ink: var(--marca-primario);          /* fondo oscuro topbar / hero */
  --vx-ink-2: var(--marca-primario-2);
  --vx-gold: var(--marca-acento);         /* ámbar corporativo (primario) */
  --vx-gold-hi: color-mix(in srgb, var(--marca-acento) 86%, #000);      /* hover, algo más oscuro */
  --vx-gold-soft: var(--marca-realce);    /* ámbar sobre fondo oscuro */
  --vx-accent: var(--marca-acento-hondo);       /* ámbar profundo para TEXTO sobre claro (legible) */
  --vx-gold-ink: var(--marca-sobre-acento);     /* texto/icono sobre relleno ámbar */
  --vx-on-gold: var(--marca-sobre-acento);
  --vx-text: var(--marca-texto-2);
  --vx-muted: var(--marca-tenue);
  --vx-line: var(--marca-linea);
  --vx-surface: var(--marca-superficie);
  --vx-ease: cubic-bezier(.4, 0, .2, 1);
  --vx-nav-h: 76px;
}

/* ========================================================================== */
/*  TOPBAR                                                                    */
/* ========================================================================== */
.vx-topbar {
  /* Por encima del navbar sticky (z-index 1030): si no, el desplegable de
     idioma queda por debajo del botón de seguimiento. */
  position: relative;
  z-index: 1040;
  background: var(--vx-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .005em;
  color: #aeb5c1;
}
.vx-topbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: .55rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.vx-topbar__contact {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.vx-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #aeb5c1;
  font-variant-numeric: tabular-nums;   /* los teléfonos no bailan al cambiar de idioma */
  text-decoration: none;
  transition: color .2s var(--vx-ease);
}
.vx-topbar__item i { font-size: .78rem; color: var(--vx-gold-soft); transition: transform .25s var(--vx-ease); }
.vx-topbar__item:hover { color: var(--marca-sobre-primario); }
.vx-topbar__item:hover i { transform: translateY(-1px) scale(1.12); }

.vx-topbar__right {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.vx-topbar__sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .16);
}

/* Redes sociales: el JS regenera los <a> dentro del contenedor → estilamos por descendencia */
#topbar-social-container { display: inline-flex; align-items: center; gap: .5rem; }
#topbar-social-container a {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c9cdd6 !important;
  font-size: .75rem;
  text-decoration: none;
  padding: 0 !important;
  transition: border-color .25s var(--vx-ease), color .25s var(--vx-ease),
              background .25s var(--vx-ease), transform .25s var(--vx-ease);
}
#topbar-social-container a:hover {
  border-color: var(--vx-gold);
  background: var(--vx-gold);
  color: var(--vx-gold-ink) !important;
  transform: translateY(-2px);
}

/* ------------------------------------------------------ Selector idioma --- */
.vx-topbar .language-selector { position: relative; }
.vx-topbar .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #f1f2f5;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  padding: .32rem .6rem;
  cursor: pointer;
  transition: background .2s var(--vx-ease), border-color .2s var(--vx-ease);
}
.vx-topbar .lang-btn:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.vx-topbar .lang-btn .chevron { transition: transform .25s var(--vx-ease); opacity: .8; }
.vx-topbar .lang-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.vx-topbar .selected-lang { text-transform: uppercase; }

.vx-topbar .dropdown-menu {
  min-width: 170px;
  background: var(--marca-superficie);
  border: 1px solid var(--vx-line);
  border-radius: 12px;
  padding: .35rem;
  margin-top: .5rem;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--marca-primario) 45%, transparent);
}
.vx-topbar .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: 8px;
  padding: .5rem .7rem;
  font-size: .86rem;
  font-weight: 500;
  color: var(--vx-text);
  text-decoration: none;
  transition: background .18s var(--vx-ease), color .18s var(--vx-ease);
}
.vx-topbar .dropdown-item:hover,
.vx-topbar .dropdown-item.active {
  background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
  color: var(--vx-accent);
}
.vx-topbar .dropdown-item .selected-check { opacity: 0; color: var(--vx-accent); }
.vx-topbar .dropdown-item.active .selected-check { opacity: 1; }

@media (max-width: 767.98px) {
  .vx-topbar__inner { justify-content: center; text-align: center; }
  .vx-topbar__contact { justify-content: center; gap: 1rem; }
}

/* ========================================================================== */
/*  NAVBAR                                                                    */
/* ========================================================================== */
.vx-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--vx-surface);
  border-bottom: 1px solid var(--vx-line);
  transition: box-shadow .3s var(--vx-ease);
}
.vx-navbar.is-stuck { box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--marca-primario) 35%, transparent); }
.vx-navbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  min-height: var(--vx-nav-h);
  padding: .75rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* ---------------------------------------------------------------- Marca --- */
.vx-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
}
.vx-brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--vx-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--marca-acento) 90%, transparent);
  transition: transform .3s var(--vx-ease), box-shadow .3s var(--vx-ease);
}
/* El logo original es multicolor: se blanquea para leerse sobre el bronce */
.vx-brand__mark img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  filter: brightness(0);   /* logo oscuro sobre el ámbar, buen contraste */
}
.vx-brand:hover .vx-brand__mark {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--marca-acento) 100%, transparent);
}
.vx-brand__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #101522;
  margin: 0;
  line-height: 1;
}

/* ---------------------------------------------------------------- Menú ---- */
.vx-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 auto;
}
.vx-nav__link {
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .005em;
  color: #4b5262;
  text-decoration: none;
  padding: .55rem .8rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .22s var(--vx-ease), background .22s var(--vx-ease);
}
.vx-nav__link::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--vx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--vx-ease);
}
.vx-nav__link:hover { color: var(--vx-accent); }
.vx-nav__link:hover::after { transform: scaleX(1); }
.vx-nav__link.active { color: var(--vx-accent); }
.vx-nav__link.active::after { transform: scaleX(1); }

/* --------------------------------------------------- CTA + Seguimiento ---- */
.vx-navbar__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.vx-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--vx-gold);
  color: var(--vx-on-gold) !important;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: .94rem;
  letter-spacing: .01em;
  border: none;
  border-radius: 999px;
  padding: .68rem 1.5rem .68rem .7rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--marca-acento) 95%, transparent);
  transition: background .25s var(--vx-ease), transform .25s var(--vx-ease), box-shadow .25s var(--vx-ease);
}
/* Barrido de brillo al pasar el cursor */
.vx-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--vx-ease);
}
.vx-cta:hover::before { transform: translateX(120%); }
.vx-cta:hover {
  background: var(--vx-gold-hi);
  color: var(--vx-gold-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px color-mix(in srgb, var(--marca-acento) 100%, transparent);
}
.vx-cta:active { transform: translateY(0); }

/* Icono en cápsula clara dentro del botón */
.vx-cta__ic {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  transition: background .25s var(--vx-ease), transform .45s var(--vx-ease);
}
.vx-cta:hover .vx-cta__ic {
  background: rgba(255, 255, 255, .32);
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .vx-cta::before { display: none; }
  .vx-cta, .vx-cta__ic { transition: none; }
}

/* --------------------------------------------------------- Menú móvil ----- */
.vx-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--vx-line);
  border-radius: 10px;
  background: var(--marca-superficie);
  color: var(--vx-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s var(--vx-ease), color .2s var(--vx-ease);
}
.vx-burger:hover { border-color: var(--vx-accent); color: var(--vx-accent); }

@media (max-width: 1199.98px) {
  .vx-burger { display: inline-flex; }
  .vx-navbar__inner { flex-wrap: wrap; }
  .vx-navbar__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding-top: .85rem;
    margin-top: .85rem;
    border-top: 1px solid var(--vx-line);
  }
  .vx-navbar__menu.is-open { display: flex; animation: gcMenuIn .25s var(--vx-ease); }
  .vx-nav { flex-direction: column; align-items: stretch; margin: 0; gap: .1rem; }
  .vx-nav__link { padding: .7rem .5rem; }
  .vx-nav__link::after { display: none; }
  .vx-nav__link:hover, .vx-nav__link.active { background: color-mix(in srgb, var(--marca-acento) 8%, transparent); }
  .vx-navbar__actions { flex-direction: column; align-items: stretch; padding-top: .4rem; }
  .vx-cta, .vx-track__toggle { justify-content: center; }
  .vx-track, .vx-track .dropdown-menu { width: 100%; }
}
@keyframes gcMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1200px) {
  .vx-navbar__menu {
    display: contents;   /* nav + acciones se reparten en la fila del flex padre */
  }
}

/* ========================================================================== */
/*  FOOTER                                                                    */
/* ========================================================================== */
.vx-foot {
  background: var(--vx-ink);
  color: var(--marca-tenue);
  font-family: 'Inter', system-ui, sans-serif;
}
.vx-foot__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.vx-foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* ---- Marca ---- */
.vx-foot__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.vx-foot__mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--marca-superficie);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.vx-foot__mark img { width: 84%; height: 84%; object-fit: contain; }
.vx-foot__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--marca-sobre-primario);
}
.vx-foot__tagline {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--marca-tenue);
  margin: 0 0 1.35rem;
  max-width: 34ch;
}
.vx-foot__social { display: flex; gap: .6rem; }
.vx-foot .btn-social {
  width: 38px; height: 38px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--marca-tenue);
  text-decoration: none;
  transition: background .22s var(--vx-ease), color .22s var(--vx-ease),
              border-color .22s var(--vx-ease), transform .22s var(--vx-ease);
}
.vx-foot .btn-social:hover {
  background: var(--vx-gold);
  border-color: var(--vx-gold);
  color: var(--vx-gold-ink);
  transform: translateY(-3px);
}

/* ---- Columnas ---- */
.vx-foot__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--marca-sobre-primario);
  margin: 0 0 1.25rem;
  position: relative;
  padding-bottom: .7rem;
}
.vx-foot__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  border-radius: 2px;
  background: var(--vx-gold);
}

.vx-foot__contact,
.vx-foot__links { list-style: none; margin: 0; padding: 0; }
.vx-foot__contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: .8rem;
}
.vx-foot__contact i { color: var(--vx-gold-soft); font-size: .82rem; margin-top: .28rem; flex: none; }
.vx-foot__contact a, .vx-foot__links a { color: var(--marca-tenue); text-decoration: none; transition: color .2s var(--vx-ease); }
.vx-foot__contact a:hover { color: var(--marca-sobre-primario); }

.vx-foot__links li { margin-bottom: .7rem; }
.vx-foot__links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
}
.vx-foot__links i { color: var(--vx-gold-soft); font-size: .72rem; transition: transform .2s var(--vx-ease); }
.vx-foot__links a:hover { color: var(--marca-sobre-primario); }
.vx-foot__links a:hover i { transform: translateX(3px); }

/* ---- Rastreo ---- */
.vx-foot__tracktext { font-size: .88rem; line-height: 1.6; color: var(--marca-tenue); margin: 0 0 1.1rem; }
.vx-foot__form {
  display: flex;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: .35rem;
  transition: border-color .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
.vx-foot__form:focus-within {
  border-color: var(--vx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 18%, transparent);
}
.vx-foot__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--marca-sobre-primario);
  font-size: .9rem;
  padding: .6rem .8rem;
}
.vx-foot__input::placeholder { color: #7d8493; }
.vx-foot__btn {
  flex: none;
  border: none;
  border-radius: 9px;
  background: var(--vx-gold);
  color: var(--vx-gold-ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: .55rem 1.35rem;
  cursor: pointer;
  transition: background .2s var(--vx-ease);
}
.vx-foot__btn:hover { background: var(--vx-gold-hi); }

/* ---- Barra inferior ---- */
.vx-foot__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.vx-foot__bottominner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
}
.vx-foot__copy { margin: 0; font-size: .86rem; color: var(--marca-tenue); }
.vx-foot__copy .text-primary {
  color: var(--vx-gold-soft);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
}
.vx-foot__legal { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; }
.vx-foot__legal a { color: var(--marca-tenue); text-decoration: none; font-size: .86rem; transition: color .2s var(--vx-ease); }
.vx-foot__legal a:hover { color: var(--marca-sobre-primario); }

@media (max-width: 992px) {
  .vx-foot__grid { grid-template-columns: 1fr 1fr; }
  .vx-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .vx-foot__grid { grid-template-columns: 1fr; }
  .vx-foot__bottominner { flex-direction: column; text-align: center; }
}

/* ========================================================================== */
/*  POPUP DESCARGA APP (APV) — compartido en todas las páginas                */
/*  Marcado en includes/app_popup.php. Sustituye al antiguo apv_promo_banner. */
/* ========================================================================== */
.vx-popup {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.vx-popup[hidden] { display: none; }
.vx-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 25, 37, .55);
  backdrop-filter: blur(2px);
  animation: gcFadeIn .3s ease;
}
@keyframes gcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vx-popup__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  background: var(--marca-superficie); border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 1rem;
  animation: gcPopupIn .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes gcPopupIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
.vx-popup__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border: none; cursor: pointer;
  border-radius: 50%; background: #f1efe9; color: var(--marca-tenue);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
  transition: background .2s ease, transform .2s ease;
}
.vx-popup__close:hover { background: #e6e3db; transform: rotate(90deg); }
.vx-popup__icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--vx-gold); color: var(--vx-gold-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--marca-acento) 80%, transparent);
}
.vx-popup__icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca-acento) 50%, transparent);
  animation: gcPopupPulse 2s var(--vx-ease) infinite;
}
@keyframes gcPopupPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca-acento) 50%, transparent); }
  70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--marca-acento) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca-acento) 0%, transparent); }
}
/* eyebrow autosuficiente (no depende de home-redesign.css) */
.vx-popup .vx-eyebrow {
  margin: 0;
  display: inline-block;
  font-family: 'Manrope', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  font-weight: 800;
  color: var(--vx-accent);
}
.vx-popup__title { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--marca-texto); line-height: 1.25; }
.vx-popup__text { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--marca-tenue); }
.vx-popup__stores { display: flex; gap: .75rem; margin-top: .25rem; }
.vx-popup .vx-store {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem; border-radius: 12px; background: var(--marca-primario); color: var(--marca-sobre-primario); text-decoration: none;
  transition: background .2s ease;
}
.vx-popup .vx-store:hover { background: #262c3b; }
.vx-popup .vx-store i { font-size: 1.35rem; }
.vx-popup .vx-store span { display: flex; flex-direction: column; line-height: 1.1; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .9rem; }
.vx-popup .vx-store small { font-weight: 500; font-size: .62rem; color: #b9c0cc; }
.vx-popup__later { background: none; border: none; cursor: pointer; text-align: center; font-size: .85rem; color: var(--marca-tenue); margin-top: .25rem; }
.vx-popup__later:hover { color: var(--marca-texto); }
@media (max-width: 480px) { .vx-popup__card { padding: 1.75rem; } }
@media (prefers-reduced-motion: reduce) {
  .vx-popup__icon::after, .vx-popup__backdrop, .vx-popup__card { animation: none; }
}

/* ========================================================================== */
/*  CABECERA DE PÁGINAS INTERNAS (no home)                                    */
/*  Fondo oscuro con el logo GECOTEL como marca de agua. Cubre el .jumbotron  */
/*  de la mayoría de páginas y el .tarifas-hero de tarifas.                    */
/* ========================================================================== */
.jumbotron.jumbotron-fluid,
.tarifas-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--vx-ink) !important;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
  padding: 0 !important;
  border: none !important;
}
/* Marca de agua: 2-3 logos GECOTEL en ámbar que aparecen/desaparecen.
   Se usa `mask` para teñir el logo con el color primario (relleno ámbar
   recortado con la forma del logo). ::before = 2 logos; ::after = 1 logo,
   en fase opuesta, para que siempre se vean 2-3. */
.jumbotron.jumbotron-fluid::before,
.tarifas-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vx-gold);
  -webkit-mask-image: url('../img/marca/icono.png'), url('../img/marca/icono.png');
          mask-image: url('../img/marca/icono.png'), url('../img/marca/icono.png');
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 13% 30%, 80% 66%;
          mask-position: 13% 30%, 80% 66%;
  -webkit-mask-size: min(180px, 38vw) auto, min(140px, 30vw) auto;
          mask-size: min(180px, 38vw) auto, min(140px, 30vw) auto;
  opacity: .16;
  animation: gcLogoA 9s ease-in-out infinite;
  pointer-events: none;
}
.jumbotron.jumbotron-fluid::after,
.tarifas-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vx-gold);
  -webkit-mask-image: url('../img/marca/icono.png');
          mask-image: url('../img/marca/icono.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 48% 82%;
          mask-position: 48% 82%;
  -webkit-mask-size: min(155px, 32vw) auto;
          mask-size: min(155px, 32vw) auto;
  opacity: .16;
  animation: gcLogoB 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcLogoA { 0%, 100% { opacity: .07; } 50% { opacity: .2; } }
@keyframes gcLogoB { 0%, 100% { opacity: .2; } 50% { opacity: .06; } }

@media (prefers-reduced-motion: reduce) {
  .jumbotron.jumbotron-fluid::before, .tarifas-hero::before,
  .jumbotron.jumbotron-fluid::after, .tarifas-hero::after { animation: none; opacity: .14; }
}
/* En móvil, los logos se bajan y encogen para no pegarse al logo del navbar */
@media (max-width: 767.98px) {
  .jumbotron.jumbotron-fluid::before,
  .tarifas-hero::before {
    -webkit-mask-position: 16% 72%, 84% 46%;
            mask-position: 16% 72%, 84% 46%;
    -webkit-mask-size: min(120px, 30vw) auto, min(96px, 24vw) auto;
            mask-size: min(120px, 30vw) auto, min(96px, 24vw) auto;
  }
  .jumbotron.jumbotron-fluid::after,
  .tarifas-hero::after {
    -webkit-mask-position: 50% 90%;
            mask-position: 50% 90%;
    -webkit-mask-size: min(110px, 26vw) auto;
            mask-size: min(110px, 26vw) auto;
  }
}
.jumbotron.jumbotron-fluid > .container,
.tarifas-hero > .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 6rem) !important;
}
.jumbotron.jumbotron-fluid h1,
.tarifas-hero h1 {
  color: var(--marca-sobre-primario) !important;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 1rem !important;
  animation: gcHeadIn .6s var(--vx-ease) both;
}
.tarifas-hero .lead,
.tarifas-hero p { color: #c9ced8 !important; }
@keyframes gcHeadIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Breadcrumb (páginas con jumbotron) */
.jumbotron.jumbotron-fluid .d-inline-flex { gap: .25rem; animation: gcHeadIn .6s var(--vx-ease) .1s both; }
.jumbotron.jumbotron-fluid .d-inline-flex p { color: #c9ced8 !important; margin: 0; }
.jumbotron.jumbotron-fluid .d-inline-flex a { color: var(--vx-gold-soft) !important; text-decoration: none; transition: color .2s var(--vx-ease); }
.jumbotron.jumbotron-fluid .d-inline-flex a:hover { color: var(--marca-sobre-primario) !important; }
.jumbotron.jumbotron-fluid .fa-circle { font-size: .32rem !important; color: var(--vx-gold-soft) !important; align-self: center; }
@media (prefers-reduced-motion: reduce) {
  .jumbotron.jumbotron-fluid h1, .tarifas-hero h1,
  .jumbotron.jumbotron-fluid .d-inline-flex { animation: none !important; }
}

/* ========================================================================== */
/*  BOTÓN "VOLVER ARRIBA" — compartido (main.js lo muestra/oculta al hacer    */
/*  scroll). Sin esto quedaba en el flujo, debajo del footer.                 */
/* ========================================================================== */
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1050;
  /* Apagado con opacidad y no con `display: none`: main.js lo enciende con
     `.is-visible` y la transición la hace el navegador. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 48px;
  text-align: center;
  border: none !important;
  border-radius: 14px !important;
  background: var(--vx-gold) !important;
  color: var(--vx-gold-ink) !important;
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--marca-acento) 95%, transparent);
  transition: opacity .2s var(--vx-ease), transform .22s var(--vx-ease),
              visibility .2s, background .22s var(--vx-ease);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--vx-gold-hi) !important;
  color: var(--vx-gold-ink) !important;
  transform: translateY(-3px);
}

/* ========================================================================== */
/*  ACCIONES DE TIENDA (iconos: cuenta · favoritos · carrito · soporte)       */
/* ========================================================================== */
.vx-shopactions { gap: .2rem; }
.vx-iconbtn {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: #2b3140;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.14rem;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s var(--vx-ease), transform .2s var(--vx-ease);
}
.vx-iconbtn > i { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
/* Relleno ámbar que emerge desde el centro al pasar el cursor */
.vx-iconbtn::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
  opacity: 0; transform: scale(.55);
  transition: opacity .22s var(--vx-ease), transform .22s var(--vx-ease);
  z-index: -1;
}
.vx-iconbtn:hover { color: var(--marca-acento-hondo); transform: translateY(-2px); }
.vx-iconbtn:hover::before { opacity: 1; transform: scale(1); }
.vx-iconbtn:hover > i { transform: scale(1.12); }
.vx-iconbtn:active { transform: translateY(0) scale(.94); }
.vx-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 38%, transparent); }

/* Badges (favoritos / carrito) con aparición elástica */
.vx-iconbtn__badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--vx-gold);
  color: var(--vx-gold-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .64rem; font-weight: 800;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .25);
  animation: gcBadgePop .3s cubic-bezier(.34, 1.56, .64, 1);
}
.vx-iconbtn__badge[hidden] { display: none; }
#fav-count { background: #e5484d; color: var(--marca-sobre-primario); }
@keyframes gcBadgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* Cuenta SIN sesión: indicador neutro (icono tachado en gris, ya no en rojo) */

/* corazón activo (hay favoritos) */
.vx-iconbtn.has-favs { color: #e5484d; }
.vx-iconbtn.has-favs > i { animation: gcHeartBeat .5s var(--vx-ease); }
@keyframes gcHeartBeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } 55% { transform: scale(.92); } }

/* Soporte: latido sutil e intermitente que invita al clic */
.vx-iconbtn--support > i { animation: gcSupportPulse 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes gcSupportPulse { 0%, 86%, 100% { transform: scale(1) rotate(0); } 90% { transform: scale(1.16) rotate(-7deg); } 94% { transform: scale(1.16) rotate(7deg); } }

@media (prefers-reduced-motion: reduce) {
  .vx-iconbtn, .vx-iconbtn > i, .vx-iconbtn::before,
  .vx-iconbtn--support > i, .vx-iconbtn.has-favs > i,
  .vx-iconbtn__badge { animation: none !important; transition: none !important; }
}

@media (max-width: 1199.98px) {
  .vx-shopactions {
    flex-direction: row !important;
    justify-content: center;
    gap: .4rem;
    padding-top: .6rem;
  }
  .vx-iconbtn { background: var(--marca-fondo); }
}

/* ========================================================================== */
/*  FOCO VISIBLE — común a todo el sitio                                      */
/*                                                                            */
/*  Había decenas de `outline: none` repartidos por el CSS: quien navega con  */
/*  teclado no veía dónde estaba. Anillo de dos tonos —oscuro por fuera,      */
/*  blanco por dentro— para que se vea igual sobre el fondo claro que sobre   */
/*  el azul marino del menú y el footer. `:focus-visible` solo lo enseña al   */
/*  navegar con teclado, no al pulsar con el ratón.                           */
/*                                                                            */
/*  `!important` a propósito: tiene que ganar a cualquier `outline: none`     */
/*  más específico que haya por ahí, presente o futuro.                       */
/*                                                                            */
/*  Los CAMPOS DE TEXTO quedan fuera. En ellos el navegador activa            */
/*  `:focus-visible` también al hacer clic (hay que escribir), así que este   */
/*  anillo salía siempre, encima del borde del propio campo: un marco doble   */
/*  y grueso. Llevan su propio indicador, más abajo. Las casillas sí lo       */
/*  conservan: son pequeñas y sin él el foco no se ve.                        */
/* ========================================================================== */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), [role="button"],
       input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"])):focus-visible {
  outline: 3px solid var(--marca-primario) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

/*  Campos de texto: UN solo indicador, el borde y un halo suave.             */
/*  El borde va en ocre oscuro y no en el ámbar de marca: el ámbar sobre      */
/*  blanco no llega al 3:1 que pide WCAG a un indicador de foco.              */
/*  `:where` deja la especificidad mínima: la regla propia de cada campo      */
/*  (cotizador, checkout…) sigue mandando. La de `.form-control` va aparte    */
/*  para ganarle al halo azul de Bootstrap, que tiene más especificidad.      */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                 [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
       select, textarea, [contenteditable="true"]):focus-visible {
  outline: none;
  border-color: var(--marca-acento-hondo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 28%, transparent);
}
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--marca-acento-hondo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 28%, transparent);
}

/* Marca en el copyright. Antes `text-primary`: el azul de Bootstrap con
   !important, 3,8:1 sobre el azul marino del footer. */
.vx-foot__marca { color: var(--vx-gold, var(--marca-acento-hondo)); font-weight: 700; }

/* ========================================================================== */
/*  CABECERA DE TIENDA (2026-10-29)                                           */
/*  Dos franjas oscuras, como un comercio: marca + buscador + acciones arriba */
/*  y la barra de categorías debajo. Sustituye al menú de la web pública,     */
/*  que queda a un enlace («Volver a la web»).                                */
/*  `.vx-navbar` se conserva en la raíz: `data-sesion` lo leen tres scripts.  */
/* ========================================================================== */
.vx-navbar.vx-shopbar {
  background: var(--vx-ink);
  border-bottom: 0;
}
.vx-shopbar.is-stuck { box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--marca-primario) 45%, transparent); }
/* Fila principal en CLARO (2026-10-30): con la de categorías oscura debajo,
   es la combinación inversa a la de la referencia de la que partió el diseño,
   que llevaba las dos filas oscuras. */
.vx-shopbar__main { background: var(--marca-superficie); border-bottom: 1px solid var(--vx-line); }
.vx-shopbar__inner,
.vx-shopcats__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.vx-shopbar__inner { min-height: 72px; padding-block: .7rem; }

/* Marca: el símbolo sobre baldosa blanca, como en la web */
.vx-brand--tienda .vx-brand__mark--icono {
  background: var(--marca-superficie);
  border: 1px solid var(--vx-line);
  box-shadow: none;
}
.vx-brand--tienda .vx-brand__mark--icono img { width: 80%; height: 80%; filter: none; }
.vx-brand--tienda:hover .vx-brand__mark--icono { box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--marca-primario) 45%, transparent); }
.vx-brand--tienda .vx-brand__name {
  color: var(--vx-ink);
  display: flex; flex-direction: column; gap: .18rem;
}
.vx-brand--tienda .vx-brand__name small {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .16em;
  color: var(--vx-accent);
}

/* Buscador */
/* Buscador (2026-10-29): una barra en pastilla integrada en la cabecera
   (clara desde el 2026-10-30), con la lupa dentro. Al enfocarlo se aclara; el botón de enviar va
   dentro del campo y solo aparece cuando hay algo escrito. */
.vx-shopsearch {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  margin-inline: auto;
  display: flex; align-items: center;
  height: 46px;
  padding: 0 .35rem 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f2f1ed;
  transition: background .25s var(--vx-ease), border-color .25s var(--vx-ease), box-shadow .25s var(--vx-ease);
}
.vx-shopsearch:hover { border-color: #dedbd3; background: #efeee9; }
.vx-shopsearch:focus-within {
  background: var(--marca-superficie);
  border-color: #d9d5cb;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-acento) 30%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--marca-primario) 35%, transparent);
}
.vx-shopsearch__lupa { flex: none; font-size: .92rem; color: #7d8493; transition: color .25s var(--vx-ease), transform .25s var(--vx-ease); }
.vx-shopsearch:focus-within .vx-shopsearch__lupa { color: var(--vx-accent); transform: scale(1.1); }
.vx-shopsearch input {
  flex: 1; min-width: 0;
  height: 100%;
  border: 0;
  padding: 0 .75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .94rem;
  color: var(--vx-ink);
  background: transparent;
}
.vx-shopsearch input::placeholder { color: #8a909b; transition: color .25s var(--vx-ease); }
.vx-shopsearch:focus-within input::placeholder { color: #a3a8b2; }
.vx-shopsearch input:focus-visible { outline: none; box-shadow: none; }
.vx-shopsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* La × de limpiar: aparece en cuanto hay texto, como el botón de buscar.
   Sin fondo propio para no competir con «Buscar»: un círculo que solo se
   nota al pasar por encima, y una raya fina que la separa del botón. */
.vx-shopsearch__limpiar {
  position: relative;
  flex: none;
  width: 32px; height: 32px; margin-right: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: #8a909b;
  font-size: .95rem;
  cursor: pointer;
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .2s var(--vx-ease), transform .2s var(--vx-ease), background .2s var(--vx-ease), color .2s var(--vx-ease);
}
.vx-shopsearch__limpiar::after {
  content: "";
  position: absolute; right: -.4rem; top: 50%;
  width: 1px; height: 20px; margin-top: -10px;
  background: #d9d5cb;
  transition: background .2s var(--vx-ease);
}
.vx-shopsearch__limpiar i { transition: transform .25s var(--vx-ease); }
.vx-shopsearch input:not(:placeholder-shown) ~ .vx-shopsearch__limpiar { opacity: 1; transform: none; pointer-events: auto; }
.vx-shopsearch__limpiar:hover { background: #e6e3db; color: var(--vx-ink); }
.vx-shopsearch__limpiar:hover i { transform: rotate(90deg); }
.vx-shopsearch__limpiar:active { transform: scale(.88); }
.vx-shopsearch:focus-within .vx-shopsearch__limpiar:hover { background: #f1eee7; }
.vx-shopsearch__ir {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 1rem;
  border: 0; border-radius: 999px;
  background: var(--vx-gold); color: var(--vx-gold-ink);
  font-family: 'Manrope', system-ui, sans-serif; font-size: .84rem; font-weight: 800;
  cursor: pointer;
  /* Escondido hasta que haya texto: un botón sin nada que buscar sobra. */
  opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity .2s var(--vx-ease), transform .2s var(--vx-ease), background .2s var(--vx-ease);
}
.vx-shopsearch input:not(:placeholder-shown) ~ .vx-shopsearch__ir { opacity: 1; transform: none; pointer-events: auto; }
.vx-shopsearch__ir:hover { background: var(--vx-gold-hi); }
.vx-shopsearch__ir i { font-size: .78rem; transition: transform .2s var(--vx-ease); }
.vx-shopsearch__ir:hover i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .vx-shopsearch, .vx-shopsearch__lupa, .vx-shopsearch__ir,
  .vx-shopsearch__limpiar, .vx-shopsearch__limpiar i { transition: none; }
}

/* Acciones (2026-10-30): en fila, con el rótulo al lado y no debajo. Cuenta
   lleva texto; favoritos y ayuda, solo icono (el rótulo queda para el lector
   de pantalla); el carrito es la pastilla oscura, que es la acción que manda. */
.vx-shopbar .vx-shopactions { display: flex; align-items: center; gap: .35rem; flex: none; }
.vx-shopbar .vx-iconbtn {
  width: auto; min-width: 42px; height: 42px;
  padding: 0 .7rem;
  flex-direction: row; gap: .5rem;
  border-radius: 999px;
  color: var(--vx-ink);
  font-size: 1rem;
}
.vx-shopbar .vx-iconbtn::before { background: #f2f1ed; border-radius: 999px; }
.vx-shopbar .vx-iconbtn:hover { color: var(--vx-ink); transform: none; }
.vx-iconbtn__txt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .84rem; font-weight: 600;
  line-height: 1;
  color: inherit;
}
.vx-shopbar .vx-iconbtn--solo { padding: 0; width: 42px; }
.vx-shopbar .vx-iconbtn--solo .vx-iconbtn__txt {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vx-shopbar .vx-iconbtn__badge { top: 2px; right: 2px; border-color: #fff; }
.vx-shopbar .vx-iconbtn.has-favs { color: #e5484d; }

.vx-shopbar .vx-iconbtn--carrito {
  margin-left: .2rem; padding: 0 1rem;
  background: var(--vx-ink); color: var(--marca-sobre-primario);
}
.vx-shopbar .vx-iconbtn--carrito::before { display: none; }
.vx-shopbar .vx-iconbtn--carrito:hover { background: #2a3142; color: var(--marca-sobre-primario); }
/* El contador va dentro de la pastilla, no colgado de una esquina; con
   contador, la pastilla recorta su margen derecho para que no quede cojo. */
.vx-shopbar .vx-iconbtn--carrito:has(.vx-iconbtn__badge:not([hidden])) { padding-right: .45rem; }
.vx-shopbar .vx-iconbtn--carrito .vx-iconbtn__badge {
  position: static;
  min-width: 24px; height: 24px; padding: 0 6px;
  border: 0;
  background: var(--vx-gold); color: var(--vx-gold-ink);
  font-size: .74rem;
}

/* Barra de categorías */
.vx-shopcats {
  background: var(--vx-ink-2);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.vx-shopcats__inner { min-height: 46px; gap: .75rem; }
.vx-shopcats__menu { position: relative; flex: none; }
/* «Categorías» (2026-10-30): una pestaña de la fila, no un botón relleno.
   La raya ámbar de abajo la distingue de los criterios, y un filete la separa. */
.vx-shopcats__menu { padding-right: .6rem; border-right: 1px solid rgba(255, 255, 255, .12); }
.vx-shopcats__todas {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 46px;
  padding: 0 .9rem 0 .15rem;
  border: 0; border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--vx-gold);
  color: var(--marca-sobre-primario);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .88rem; font-weight: 800;
  cursor: pointer;
  transition: color .2s var(--vx-ease), background .2s var(--vx-ease);
}
.vx-shopcats__todas > .fa-bars { color: var(--vx-gold); }
.vx-shopcats__todas:hover { color: var(--vx-gold-soft); }
.vx-shopcats__todas[aria-expanded="true"] { color: var(--vx-gold-soft); background: rgba(255, 255, 255, .05); }
.vx-shopcats__chev { font-size: .68rem; transition: transform .25s var(--vx-ease); }
.vx-shopcats__todas[aria-expanded="true"] .vx-shopcats__chev { transform: rotate(180deg); }

.vx-shopcats__links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* el borde derecho se difumina: deja ver que la lista sigue */
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.vx-shopcats__links::-webkit-scrollbar { display: none; }
.vx-shopcats__link {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .84rem; font-weight: 600;
  color: #d6d9e0;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--vx-ease), background .2s var(--vx-ease);
}
.vx-shopcats__link:hover { color: var(--marca-sobre-primario); background: rgba(255, 255, 255, .07); }
.vx-shopcats__link.is-activa { color: var(--vx-gold-soft); background: color-mix(in srgb, var(--marca-acento) 10%, transparent); }
.vx-shopcats__link--oferta { color: var(--vx-gold-soft); }
.vx-shopcats__sep { flex: none; width: 1px; height: 18px; margin: 0 .35rem; background: rgba(255, 255, 255, .14); }
.vx-shopcats__web {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem; font-weight: 600;
  color: var(--marca-tenue);
  text-decoration: none;
}
.vx-shopcats__web:hover { color: var(--marca-sobre-primario); }

/* Panel desplegable de categorías */
.vx-catpanel {
  position: absolute;
  top: calc(100% + 10px); left: 0;
  z-index: 1040;
  width: min(760px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: 16px;
  background: var(--marca-superficie);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--marca-primario) 45%, transparent);
  animation: gcMenuIn .2s var(--vx-ease);
}
.vx-catpanel[hidden] { display: none; }
.vx-catpanel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem 1.25rem;
}
.vx-catpanel__raiz {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .92rem; font-weight: 800;
  color: var(--marca-texto);
  text-decoration: none;
}
.vx-catpanel__raiz:hover { color: var(--vx-accent); }
.vx-catpanel__ic {
  flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
  color: var(--vx-accent);
  font-size: .9rem;
}
.vx-catpanel__grupo ul { list-style: none; margin: .45rem 0 0; padding: 0 0 0 2.6rem; }
.vx-catpanel__grupo li a {
  display: block;
  padding: .2rem 0;
  font-size: .85rem;
  color: var(--vx-muted);
  text-decoration: none;
}
.vx-catpanel__grupo li a:hover { color: var(--vx-accent); }
.vx-catpanel__todo {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem; padding-top: .9rem;
  width: 100%;
  border-top: 1px solid var(--vx-line);
  font-size: .85rem; font-weight: 700;
  color: var(--vx-accent);
  text-decoration: none;
}

/* Las reglas de menú móvil de la web (≤1199px) no valen para esta cabecera */
@media (max-width: 1199.98px) {
  .vx-shopbar .vx-shopactions { padding-top: 0; justify-content: flex-end; }
  .vx-shopbar .vx-iconbtn:not(.vx-iconbtn--carrito) { background: transparent; }
}
/* Tableta: los rótulos de las acciones se van */
@media (max-width: 991.98px) {
  .vx-iconbtn__txt { display: none; }
  .vx-shopbar .vx-iconbtn { min-width: 42px; height: 42px; }
  .vx-shopbar .vx-iconbtn--carrito { padding: 0 .75rem; }
  .vx-shopcats__web span { display: none; }
}
/* Móvil: el buscador baja a su propia fila, a todo lo ancho */
@media (max-width: 767.98px) {
  .vx-shopbar__inner { flex-wrap: wrap; gap: .6rem 1rem; padding-block: .6rem; }
  .vx-shopbar .vx-shopactions { margin-left: auto; }
  .vx-shopsearch { order: 3; flex-basis: 100%; max-width: none; height: 44px; }
  .vx-shopsearch__ir span { display: none; }
  .vx-shopsearch__ir { width: 36px; padding: 0; justify-content: center; }
  .vx-brand--tienda .vx-brand__mark { width: 36px; height: 36px; }
  .vx-brand--tienda .vx-brand__name { font-size: 1.1rem; }
  .vx-shopbar .vx-shopactions { gap: .1rem; }
  .vx-shopbar .vx-iconbtn { min-width: 36px; height: 38px; padding: 0 .5rem; }
  .vx-shopbar .vx-iconbtn--solo { width: 36px; padding: 0; }
  .vx-shopbar .vx-iconbtn--carrito { margin-left: .15rem; padding: 0 .6rem; }
  .vx-shopcats__todas span { display: none; }
}
@media (max-width: 380px) {
  .vx-brand--tienda .vx-brand__name small { display: none; }
}

/* ===========================================================================
   CRITERIOS DEL CATÁLOGO EN LA CABECERA (2026-10-29)
   Sustituyen a la fila de categorías y a los filtros del catálogo. Los paneles
   cuelgan de `.vx-shopcats__inner` (y no del botón) porque la fila se desliza
   y su `overflow-x` los recortaría; navbar.php los coloca bajo su botón.
   =========================================================================== */
.vx-shopcats__inner { position: relative; }
.vx-shopcats__todas.is-elegida span { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vx-crits { display: flex; align-items: center; gap: .3rem; padding-right: 1.5rem; }
.vx-crits__sep { flex: none; width: 1px; height: 18px; margin: 0 .3rem; background: rgba(255, 255, 255, .14); }
/* Criterios (2026-10-30): pestañas de texto, sin caja ni icono delante; el
   que está abierto o puesto se subraya en ámbar, como «Categorías». */
.vx-crit {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  height: 46px; padding: 0 .7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -2px 0 transparent;
  color: #d6d9e0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: color .2s var(--vx-ease), background .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
/* Sin icono delante: las pestañas son de texto (el marcado lo conserva). */
.vx-crit__ic { display: none; font-size: .78rem; color: #8f97a6; }
.vx-crit:hover { color: var(--marca-sobre-primario); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35); }
.vx-crit:focus-visible { outline: 2px solid var(--vx-gold); outline-offset: -4px; }
.vx-crit[aria-expanded="true"] { color: var(--marca-sobre-primario); background: rgba(255, 255, 255, .05); box-shadow: inset 0 -2px 0 var(--vx-gold); }
.vx-crit.is-activo { color: var(--vx-gold-soft); box-shadow: inset 0 -2px 0 var(--vx-gold); }
.vx-crit__n {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--vx-gold); color: var(--vx-gold-ink);
  font-size: .68rem; font-weight: 800;
}
.vx-crit__chev { font-size: .62rem; opacity: .7; transition: transform .25s var(--vx-ease); }
.vx-crit[aria-expanded="true"] .vx-crit__chev { transform: rotate(180deg); }
.vx-crit__x { font-size: .72rem; opacity: .8; }
.vx-crit--limpiar { border-style: dashed; color: #aeb4bf; }

/* Paneles */
.vx-fpanel {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  z-index: 1040;
  width: min(320px, calc(100vw - 2rem));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 1rem;
  border-radius: 16px;
  background: var(--marca-superficie);
  color: var(--vx-ink);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--marca-primario) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--marca-primario) 5%, transparent);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .18s var(--vx-ease), transform .22s var(--vx-ease);
  animation: none;
}
.vx-fpanel.is-abierto { opacity: 1; transform: none; }
.vx-fpanel[hidden] { display: none; }
.vx-catpanel.vx-fpanel { width: min(760px, calc(100vw - 2rem)); padding: 1.25rem; }
.vx-catpanel__raiz.is-activa, .vx-catpanel__grupo li a.is-activa { color: var(--vx-accent); }

.vx-fpanel__tit {
  margin: 0 0 .75rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vx-muted);
}
.vx-fpanel__rango { display: flex; align-items: flex-end; gap: .5rem; }
.vx-fpanel__rango label { flex: 1; display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: .75rem; font-weight: 600; color: var(--vx-muted); }
.vx-fpanel__rango > span { padding-bottom: .6rem; color: #b5b9c2; }
.vx-fpanel__rango input {
  width: 100%; height: 40px; padding: 0 .7rem;
  border: 1px solid var(--vx-line); border-radius: 10px;
  font: inherit; font-size: .9rem; color: var(--vx-ink);
}
.vx-fpanel__rango input:focus { outline: none; border-color: var(--vx-gold-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 20%, transparent); }
.vx-fpanel__atajos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.vx-fpanel__atajo {
  padding: .35rem .7rem;
  border: 1px solid var(--vx-line); border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--vx-text);
  text-decoration: none;
  transition: border-color .2s var(--vx-ease), background .2s var(--vx-ease);
}
.vx-fpanel__atajo:hover { border-color: var(--vx-gold-hi); background: #fffaeb; color: var(--vx-ink); }
.vx-fpanel__atajo.is-activo { border-color: var(--vx-gold-hi); background: #fff3c4; color: var(--vx-ink); }

.vx-fpanel__lista { display: flex; flex-direction: column; gap: .1rem; max-height: 280px; overflow-y: auto; }
.vx-fpanel__op {
  display: flex; align-items: center; gap: .65rem;
  margin: 0; padding: .5rem .55rem;
  border-radius: 10px;
  font-size: .88rem; color: var(--vx-ink);
  cursor: pointer;
  transition: background .15s var(--vx-ease);
}
.vx-fpanel__op:hover { background: #f6f4ee; }
.vx-fpanel__op input { width: 17px; height: 17px; accent-color: var(--vx-gold-hi); }
.vx-fpanel__op span { flex: 1; }
.vx-fpanel__op small { color: #9aa0ab; font-weight: 600; }

.vx-fpanel__pie { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--vx-line); }
.vx-fpanel__quitar { margin-right: auto; font-size: .82rem; font-weight: 600; color: var(--vx-muted); }
.vx-fpanel__quitar:hover { color: var(--vx-ink); }
.vx-fpanel__aplicar {
  height: 38px; padding: 0 1.2rem;
  border: 0; border-radius: 999px;
  background: var(--vx-ink); color: var(--marca-sobre-primario);
  font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer;
  transition: background .2s var(--vx-ease), transform .15s var(--vx-ease);
}
.vx-fpanel__aplicar:hover { background: #2a3142; }
.vx-fpanel__aplicar:active { transform: scale(.97); }

.vx-fpanel--menu { width: min(260px, calc(100vw - 2rem)); padding: .75rem; }
.vx-fpanel__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  font-size: .88rem; color: var(--vx-ink);
  text-decoration: none;
  transition: background .15s var(--vx-ease);
}
.vx-fpanel__item:hover { background: #f6f4ee; color: var(--vx-ink); }
.vx-fpanel__item .fa-check { width: 14px; font-size: .75rem; color: transparent; }
.vx-fpanel__item.is-activo { font-weight: 700; background: #fff6d9; }
.vx-fpanel__item.is-activo .fa-check { color: var(--vx-accent); }
.vx-fpanel__item--quitar { color: var(--vx-muted); font-size: .82rem; }
.vx-fpanel__estrellas { letter-spacing: 1px; color: #dcd8cf; }
.vx-fpanel__estrellas b { color: var(--vx-gold-hi); font-weight: 400; }

@media (max-width: 767.98px) {
  .vx-crit { height: 30px; padding: 0 .6rem; font-size: .78rem; }
  /* En móvil el panel ocupa el ancho de la barra: es más fácil de tocar. */
  .vx-fpanel { left: 0 !important; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-fpanel, .vx-crit, .vx-crit__chev { transition: none; }
}
.vx-crits { padding-right: .75rem; gap: .25rem; }
.vx-crit { padding: 0 .65rem; }
.vx-shopcats__web {
  width: 32px; height: 32px; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%;
}
.vx-shopcats__web:hover { border-color: rgba(255, 255, 255, .25); }

/* ---------- Pie: sección GECONOT (2026-10-29, la misma que el pie de la web) ---------- */
.vx-store {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .75rem .9rem; border-radius: 12px; background: var(--marca-primario); color: var(--marca-sobre-primario); text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
a.vx-store:hover { background: #c4000a; color: var(--marca-sobre-primario); transform: translateY(-1px); }
.vx-store i { font-size: 1.35rem; }
.vx-store span { display: flex; flex-direction: column; line-height: 1.15; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .92rem; text-align: left; }
.vx-store small { font-weight: 500; font-size: .64rem; color: #b9c0cc; }
a.vx-store:hover small { color: #ffd9d6; }
/* Tienda todavía no publicada: se pinta apagada y sin cursor de enlace. */
.vx-store--pronto { background: #f4f3ef; color: var(--marca-tenue); cursor: default; border: 1px dashed #cfd3da; }
.vx-store--pronto i { opacity: .55; }
.vx-store--pronto small { color: var(--vx-accent); font-weight: 700; }

.vx-foot__app {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem; border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.vx-foot__applogo { width: 56px; height: auto; flex: none; }
.vx-foot__apptext { flex: 1 1 280px; min-width: 0; }
.vx-foot__apptitle { margin: 0 0 .25rem; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--marca-sobre-primario); }
.vx-foot__apptext p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--marca-tenue); }
.vx-foot__stores { display: flex; gap: .65rem; flex-wrap: wrap; }
.vx-foot__stores .vx-store { flex: 0 0 auto; min-width: 170px; background: var(--marca-superficie); color: var(--marca-texto); }
.vx-foot__stores .vx-store small { color: var(--marca-tenue); }
.vx-foot__stores a.vx-store:hover { background: #c4000a; color: var(--marca-sobre-primario); }
.vx-foot__stores a.vx-store:hover small { color: #ffd9d6; }
.vx-foot__stores .vx-store--pronto { background: transparent; color: var(--marca-tenue); border-color: rgba(255, 255, 255, .22); }
.vx-foot__stores .vx-store--pronto small { color: var(--vx-gold); }
@media (max-width: 560px) {
  .vx-foot__app { flex-direction: column; text-align: center; }
  .vx-foot__stores { width: 100%; flex-direction: column; }
  .vx-foot__stores .vx-store { min-width: 0; }
}

/* ---- Paneles de filtros: casillas propias y «Quitar» (2026-10-29) ----
   La casilla del navegador era lo único sin el estilo de la tienda. La de
   verdad sigue ahí —oculta pero enfocable y con su teclado—; lo que se ve es
   la caja de al lado, que la imita. */
.vx-fpanel__lista { gap: .3rem; }
.vx-fpanel__op {
  position: relative;
  gap: .75rem;
  padding: .6rem .7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .15s var(--vx-ease), border-color .15s var(--vx-ease);
}
.vx-fpanel__op:hover { background: #f7f5ef; }
.vx-fpanel__op .vx-fpanel__chk {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.vx-fpanel__op .vx-fpanel__caja {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #c9ccd3; border-radius: 6px;
  background: var(--marca-superficie); color: transparent;
  font-size: .62rem;
  transition: background .15s var(--vx-ease), border-color .15s var(--vx-ease), color .15s var(--vx-ease), transform .15s var(--vx-ease);
}
.vx-fpanel__op:hover .vx-fpanel__caja { border-color: var(--vx-gold-hi); }
.vx-fpanel__chk:checked + .vx-fpanel__caja {
  background: var(--vx-gold); border-color: var(--vx-gold); color: var(--vx-gold-ink);
  transform: scale(1.05);
}
.vx-fpanel__chk:focus-visible + .vx-fpanel__caja { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 35%, transparent); }
.vx-fpanel__op:has(.vx-fpanel__chk:checked) { background: #fff8e1; border-color: #ffe08a; }
.vx-fpanel__op .vx-fpanel__nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-fpanel__n {
  flex: none;
  min-width: 26px; padding: .1rem .45rem;
  border-radius: 999px;
  background: #f0eee8; color: var(--vx-muted) !important;
  font-size: .72rem; font-weight: 700; text-align: center;
}
.vx-fpanel__op:has(.vx-fpanel__chk:checked) .vx-fpanel__n { background: var(--marca-superficie); color: var(--vx-accent) !important; }

.vx-fpanel__quitar {
  margin-right: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .95rem;
  border: 1px solid #e2dfd6; border-radius: 999px;
  background: var(--marca-superficie); color: var(--vx-ink);
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: background .2s var(--vx-ease), border-color .2s var(--vx-ease), color .2s var(--vx-ease);
}
.vx-fpanel__quitar i { font-size: .78rem; color: #c62f35; transition: color .2s var(--vx-ease); }
.vx-fpanel__quitar:hover { background: #fdecec; border-color: #f5c2c4; color: #b4232a; }
.vx-fpanel__pie--menu { justify-content: flex-start; margin-top: .5rem; padding-top: .6rem; }
.vx-fpanel__pie--menu .vx-fpanel__quitar { margin-right: 0; }