/* ==========================================================================
   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 .gc-topbar / .gc-navbar / .gc-footer para no
   contaminar el resto. Se conservan los hooks/IDs que usa el JS
   (contacto_compartido.js, i18n.js, main.js).
   ========================================================================== */

:root {
  --gc-ink: #171b26;          /* fondo oscuro topbar / hero */
  --gc-ink-2: #1f2431;
  --gc-gold: #ffc107;         /* ámbar corporativo (primario) */
  --gc-gold-hi: #e0a800;      /* hover, algo más oscuro */
  --gc-gold-soft: #ffce54;    /* ámbar sobre fondo oscuro */
  --gc-accent: #c8951a;       /* ámbar profundo para TEXTO sobre claro (legible) */
  --gc-gold-ink: #1f2431;     /* texto/icono sobre relleno ámbar */
  --gc-on-gold: #1f2431;
  --gc-text: #2c3242;
  --gc-muted: #8b93a3;
  --gc-line: #e9e7e2;
  --gc-surface: #ffffff;
  --gc-ease: cubic-bezier(.4, 0, .2, 1);
  --gc-nav-h: 76px;
}

/* ========================================================================== */
/*  TOPBAR                                                                    */
/* ========================================================================== */
.gc-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(--gc-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .005em;
  color: #aeb5c1;
}
.gc-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;
}
.gc-topbar__contact {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.gc-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(--gc-ease);
}
.gc-topbar__item i { font-size: .78rem; color: var(--gc-gold-soft); transition: transform .25s var(--gc-ease); }
.gc-topbar__item:hover { color: #fff; }
.gc-topbar__item:hover i { transform: translateY(-1px) scale(1.12); }

.gc-topbar__right {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gc-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(--gc-ease), color .25s var(--gc-ease),
              background .25s var(--gc-ease), transform .25s var(--gc-ease);
}
#topbar-social-container a:hover {
  border-color: var(--gc-gold);
  background: var(--gc-gold);
  color: var(--gc-gold-ink) !important;
  transform: translateY(-2px);
}

/* ------------------------------------------------------ Selector idioma --- */
.gc-topbar .language-selector { position: relative; }
.gc-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(--gc-ease), border-color .2s var(--gc-ease);
}
.gc-topbar .lang-btn:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.gc-topbar .lang-btn .chevron { transition: transform .25s var(--gc-ease); opacity: .8; }
.gc-topbar .lang-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.gc-topbar .selected-lang { text-transform: uppercase; }

.gc-topbar .dropdown-menu {
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--gc-line);
  border-radius: 12px;
  padding: .35rem;
  margin-top: .5rem;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
}
.gc-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(--gc-text);
  text-decoration: none;
  transition: background .18s var(--gc-ease), color .18s var(--gc-ease);
}
.gc-topbar .dropdown-item:hover,
.gc-topbar .dropdown-item.active {
  background: rgba(255, 193, 7, .1);
  color: var(--gc-accent);
}
.gc-topbar .dropdown-item .selected-check { opacity: 0; color: var(--gc-accent); }
.gc-topbar .dropdown-item.active .selected-check { opacity: 1; }

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

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

/* ---------------------------------------------------------------- Marca --- */
.gc-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
}
.gc-brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gc-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 20px -10px rgba(255, 193, 7, .9);
  transition: transform .3s var(--gc-ease), box-shadow .3s var(--gc-ease);
}
/* El logo original es multicolor: se blanquea para leerse sobre el bronce */
.gc-brand__mark img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  filter: brightness(0);   /* logo oscuro sobre el ámbar, buen contraste */
}
.gc-brand:hover .gc-brand__mark {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 12px 26px -10px rgba(255, 193, 7, 1);
}
.gc-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ú ---- */
.gc-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 auto;
}
.gc-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(--gc-ease), background .22s var(--gc-ease);
}
.gc-nav__link::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--gc-ease);
}
.gc-nav__link:hover { color: var(--gc-accent); }
.gc-nav__link:hover::after { transform: scaleX(1); }
.gc-nav__link.active { color: var(--gc-accent); }
.gc-nav__link.active::after { transform: scaleX(1); }

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

.gc-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--gc-gold);
  color: var(--gc-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 rgba(255, 193, 7, .95);
  transition: background .25s var(--gc-ease), transform .25s var(--gc-ease), box-shadow .25s var(--gc-ease);
}
/* Barrido de brillo al pasar el cursor */
.gc-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(--gc-ease);
}
.gc-cta:hover::before { transform: translateX(120%); }
.gc-cta:hover {
  background: var(--gc-gold-hi);
  color: var(--gc-gold-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(255, 193, 7, 1);
}
.gc-cta:active { transform: translateY(0); }

/* Icono en cápsula clara dentro del botón */
.gc-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(--gc-ease), transform .45s var(--gc-ease);
}
.gc-cta:hover .gc-cta__ic {
  background: rgba(255, 255, 255, .32);
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .gc-cta::before { display: none; }
  .gc-cta, .gc-cta__ic { transition: none; }
}

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

@media (max-width: 1199.98px) {
  .gc-burger { display: inline-flex; }
  .gc-navbar__inner { flex-wrap: wrap; }
  .gc-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(--gc-line);
  }
  .gc-navbar__menu.is-open { display: flex; animation: gcMenuIn .25s var(--gc-ease); }
  .gc-nav { flex-direction: column; align-items: stretch; margin: 0; gap: .1rem; }
  .gc-nav__link { padding: .7rem .5rem; }
  .gc-nav__link::after { display: none; }
  .gc-nav__link:hover, .gc-nav__link.active { background: rgba(255, 193, 7, .08); }
  .gc-navbar__actions { flex-direction: column; align-items: stretch; padding-top: .4rem; }
  .gc-cta, .gc-track__toggle { justify-content: center; }
  .gc-track, .gc-track .dropdown-menu { width: 100%; }
}
@keyframes gcMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1200px) {
  .gc-navbar__menu {
    display: contents;   /* nav + acciones se reparten en la fila del flex padre */
  }
}

/* ========================================================================== */
/*  FOOTER                                                                    */
/* ========================================================================== */
.gc-foot {
  background: var(--gc-ink);
  color: #a9b0bd;
  font-family: 'Inter', system-ui, sans-serif;
}
.gc-foot__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.gc-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 ---- */
.gc-foot__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.gc-foot__mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--gc-gold);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.gc-foot__mark img { width: 72%; height: 72%; object-fit: contain; filter: brightness(0); }
.gc-foot__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.gc-foot__tagline {
  font-size: .9rem;
  line-height: 1.65;
  color: #9aa1ae;
  margin: 0 0 1.35rem;
  max-width: 34ch;
}
.gc-foot__social { display: flex; gap: .6rem; }
.gc-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: #a9b0bd;
  text-decoration: none;
  transition: background .22s var(--gc-ease), color .22s var(--gc-ease),
              border-color .22s var(--gc-ease), transform .22s var(--gc-ease);
}
.gc-foot .btn-social:hover {
  background: var(--gc-gold);
  border-color: var(--gc-gold);
  color: var(--gc-gold-ink);
  transform: translateY(-3px);
}

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

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

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

/* ---- Rastreo ---- */
.gc-foot__tracktext { font-size: .88rem; line-height: 1.6; color: #9aa1ae; margin: 0 0 1.1rem; }
.gc-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(--gc-ease), box-shadow .2s var(--gc-ease);
}
.gc-foot__form:focus-within {
  border-color: var(--gc-accent);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, .18);
}
.gc-foot__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: .9rem;
  padding: .6rem .8rem;
}
.gc-foot__input::placeholder { color: #7d8493; }
.gc-foot__btn {
  flex: none;
  border: none;
  border-radius: 9px;
  background: var(--gc-gold);
  color: var(--gc-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(--gc-ease);
}
.gc-foot__btn:hover { background: var(--gc-gold-hi); }

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

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

  /* `text-align: center` no centra una lista flexible: sus elementos los
     coloca `justify-content`, que por defecto es `flex-start`. Por eso los
     enlaces legales se quedaban pegados a la izquierda aunque el bloque que los
     contiene estuviera centrado. */
  .gc-foot__legal { justify-content: center; gap: .5rem 1.15rem; }

  /* Hueco para los dos botones flotantes: el asistente abajo a la izquierda y
     el de volver arriba abajo a la derecha. Sin él, los enlaces de la última
     fila quedan debajo de alguno de los dos y no se pueden pulsar. */
  .gc-foot__bottom { padding-bottom: 5.5rem; }
}

/* ========================================================================== */
/*  POPUP DESCARGA APP (APV) — compartido en todas las páginas                */
/*  Marcado en includes/app_popup.php. Sustituye al antiguo apv_promo_banner. */
/* ========================================================================== */
/* Por encima del chatbot (9999), como el aviso de cookies: es un diálogo que
   ocupa la pantalla y tenerlo por debajo del botón flotante dejaba el asistente
   pintado encima del texto. Por debajo de `.gc-cookies` (10050), que es lo
   único que debe poder taparlo. */
.gc-popup {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.gc-popup[hidden] { display: none; }
.gc-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; } }
.gc-popup__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  background: #fff; 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; } }
.gc-popup__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border: none; cursor: pointer;
  border-radius: 50%; background: #f1efe9; color: #4b5563;
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
  transition: background .2s ease, transform .2s ease;
}
.gc-popup__close:hover { background: #e6e3db; transform: rotate(90deg); }
.gc-popup__icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--gc-gold); color: var(--gc-gold-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 14px 26px -10px rgba(255, 193, 7, .8);
}
.gc-popup__icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 0 rgba(255, 193, 7, .5);
  animation: gcPopupPulse 2s var(--gc-ease) infinite;
}
@keyframes gcPopupPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
/* eyebrow autosuficiente (no depende de home-redesign.css) */
.gc-popup .gc-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(--gc-accent);
}
.gc-popup__title { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; color: #171b26; line-height: 1.25; }
.gc-popup__text { margin: 0; font-size: .95rem; line-height: 1.65; color: #6f7787; }
.gc-popup__stores { display: flex; gap: .75rem; margin-top: .25rem; }
.gc-popup .gc-store {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem; border-radius: 12px; background: #171b26; color: #fff; text-decoration: none;
  transition: background .2s ease;
}
.gc-popup .gc-store:hover { background: #262c3b; }
.gc-popup .gc-store i { font-size: 1.35rem; }
.gc-popup .gc-store span { display: flex; flex-direction: column; line-height: 1.1; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .9rem; }
.gc-popup .gc-store small { font-weight: 500; font-size: .62rem; color: #b9c0cc; }
.gc-popup__later { background: none; border: none; cursor: pointer; text-align: center; font-size: .85rem; color: #6f7787; margin-top: .25rem; }
.gc-popup__later:hover { color: #171b26; }
@media (max-width: 480px) { .gc-popup__card { padding: 1.75rem; } }
@media (prefers-reduced-motion: reduce) {
  .gc-popup__icon::after, .gc-popup__backdrop, .gc-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(--gc-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(--gc-gold);
  -webkit-mask-image: url('../img/GECOTEL.png'), url('../img/GECOTEL.png');
          mask-image: url('../img/GECOTEL.png'), url('../img/GECOTEL.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(--gc-gold);
  -webkit-mask-image: url('../img/GECOTEL.png');
          mask-image: url('../img/GECOTEL.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;
}
/* ── Cabecera con foto de fondo (administrable desde el panel) ─────────────
   Cada página interna admite UNA foto fija. Al ponerla se retiran los logos de
   marca de agua —competirían con la imagen— y entra un velo oscuro, sin el
   cual el título blanco desaparece sobre una foto clara.
   Sin foto no se añade la clase y la cabecera queda como siempre. */
.jumbotron.jumbotron-fluid.gc-hero-foto,
.tarifas-hero.gc-hero-foto {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.jumbotron.jumbotron-fluid.gc-hero-foto::before,
.tarifas-hero.gc-hero-foto::before {
  background: linear-gradient(180deg, rgba(11, 18, 32, .58), rgba(11, 18, 32, .82));
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 1;
  animation: none;
}
.jumbotron.jumbotron-fluid.gc-hero-foto::after,
.tarifas-hero.gc-hero-foto::after { content: 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: #fff !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(--gc-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(--gc-ease) .1s both; }
.jumbotron.jumbotron-fluid .d-inline-flex p { color: #c9ced8 !important; margin: 0; }
.jumbotron.jumbotron-fluid .d-inline-flex a { color: var(--gc-gold-soft) !important; text-decoration: none; transition: color .2s var(--gc-ease); }
.jumbotron.jumbotron-fluid .d-inline-flex a:hover { color: #fff !important; }
.jumbotron.jumbotron-fluid .fa-circle { font-size: .32rem !important; color: var(--gc-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;
  /* Visible siempre en el flujo, pero apagado: el `display: none` de antes lo
     dejaba a merced de `fadeIn`/`fadeOut` de jQuery, que encolaban una
     animación por cada evento de scroll. Ahora se enciende con una clase y el
     navegador se encarga de la transición, sin cola que se atasque. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  /* Todo en una sola declaración y en un solo sitio: `home-redesign.css`,
     `servicios.css` y `tarifas.css` tenían la suya propia y, al ganar por orden
     o por especificidad, se llevaban por delante el desvanecido. */
  transition: opacity .2s var(--gc-ease), transform .2s var(--gc-ease),
              visibility .2s, background .22s var(--gc-ease);
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 48px;
  text-align: center;
  border: none !important;
  border-radius: 14px !important;
  background: var(--gc-gold) !important;
  color: var(--gc-gold-ink) !important;
  box-shadow: 0 14px 28px -12px rgba(255, 193, 7, .95);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* El botón del asistente ocupa la esquina inferior IZQUIERDA (`left: 24px;
   bottom: 24px`, 58px de lado), así que este no choca con él: se queda en la
   derecha y se alinea a su misma altura, que es como se leen los dos como una
   pareja de controles flotantes y no como dos cosas sueltas. */
@media (max-width: 768px) {
  /* 29px y no 24: el del asistente mide 58px de lado y este 48, así que
     igualando el borde inferior el pequeño parece hundido. Alineando los
     CENTROS —24 + (58-48)/2— se leen a la misma altura. */
  .back-to-top { right: 24px; bottom: 29px; }
}
@media (max-width: 420px) {
  /* El asistente se pega más al borde a este ancho; este lo acompaña. */
  .back-to-top { right: 16px; }
}
.back-to-top:hover {
  background: var(--gc-gold-hi) !important;
  color: var(--gc-gold-ink) !important;
  transform: translateY(-3px);
}

/* ========================================================================== */
/*  TIENDAS TODAVÍA NO PUBLICADAS                                             */
/*  Se pinta como el botón real pero apagado y sin cursor de enlace: quien lo */
/*  ve entiende que llegará, y quien lo pulsa no se queda esperando.          */
/* ========================================================================== */
.gc-popup .gc-store--pronto {
  background: #f1f0ec;
  color: #6f7787;
  cursor: default;
  border: 1px dashed #cfd3da;
}
.gc-popup .gc-store--pronto:hover { background: #f1f0ec; }
.gc-popup .gc-store--pronto i { opacity: .55; }
.gc-popup .gc-store--pronto small { color: var(--gc-accent); font-weight: 700; }

.gc-popup__nota {
  margin: 0;
  font-size: .82rem;
  color: var(--gc-muted);
  text-align: center;
  line-height: 1.5;
}

/* ========================================================================== */
/*  AVISO DE COOKIES                                                          */
/*  Abajo y a lo ancho, no como ventana centrada: no debe tapar la página que */
/*  se vino a leer, pero sí verse sin buscarlo.                               */
/* ========================================================================== */
/* El aviso de cookies va POR ENCIMA DE TODO, chatbot incluido.
   Con 1080 quedaba debajo del botón flotante del asistente (9999) y de su
   burbuja de saludo (9998): al entrar por primera vez, el texto que hay que
   leer para decidir aparecía tapado. Es lo único de la página que exige una
   respuesta antes de seguir, así que manda sobre cualquier otra superficie. */
.gc-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  padding: 1rem;
  animation: gcCookiesEntra .35s ease both;
}

@keyframes gcCookiesEntra {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.gc-cookies__caja {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.15rem 1.35rem;
  border-radius: 16px;
  background: var(--gc-surface, #fff);
  border: 1px solid var(--gc-line, #e9e7e2);
  box-shadow: 0 12px 40px rgba(23, 27, 38, .18);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.75rem;
  align-items: center;
}

.gc-cookies__titulo {
  margin: 0 0 .35rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gc-ink, #171b26);
}

.gc-cookies__texto p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--gc-text, #2c3242);
  max-width: 68ch;
}

.gc-cookies__mas {
  margin-top: .4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--gc-accent, #c8951a);
  cursor: pointer;
  text-decoration: underline;
}

.gc-cookies__detalle {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  background: #faf9f6;
  border: 1px solid var(--gc-line, #e9e7e2);
}

.gc-cookies__grupo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  cursor: pointer;
  font-size: .88rem;
}

.gc-cookies__grupo input { margin-top: .25rem; }
.gc-cookies__grupo b { display: block; color: var(--gc-ink, #171b26); }
.gc-cookies__grupo small { display: block; color: var(--gc-muted, #8b93a3); line-height: 1.5; }

/* Las necesarias no se pueden desactivar; el candado visual lo dice sin texto. */
.gc-cookies__grupo input:disabled { cursor: not-allowed; }
.gc-cookies__grupo input:disabled + span b::after {
  content: ' · siempre activas';
  font-weight: 500;
  font-size: .8rem;
  color: var(--gc-muted, #8b93a3);
}

.gc-cookies__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-end;
}

.gc-cookies__btn {
  padding: .65rem 1.15rem;
  border-radius: 10px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}

/* Rechazar pesa lo mismo que aceptar: un aviso donde solo se puede aceptar
   no recoge un consentimiento, cobra un peaje. */
.gc-cookies__btn--suave {
  background: #fff;
  border: 1px solid var(--gc-line, #e9e7e2);
  color: var(--gc-text, #2c3242);
}
.gc-cookies__btn--suave:hover { background: #f6f5f1; border-color: #d8d5cd; }

.gc-cookies__btn--principal {
  background: var(--gc-gold, #ffc107);
  border: 1px solid var(--gc-gold, #ffc107);
  color: var(--gc-on-gold, #1f2431);
}
.gc-cookies__btn--principal:hover { background: var(--gc-gold-hi, #e0a800); }

.gc-cookies__btn:focus-visible,
.gc-cookies__mas:focus-visible {
  outline: 2px solid var(--gc-accent, #c8951a);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .gc-cookies__caja { grid-template-columns: 1fr; }
  .gc-cookies__acciones { justify-content: stretch; }
  .gc-cookies__btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-cookies { animation: none; }
}