/* =====================================================================
   gig.mx Fase 1 · Componentes globales (ERS sección 5)
   ===================================================================== */

/* ---------- 5.3 Botones ---------- */
.gx-btn { --w: 280; --h: 60; position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--gx-u) * var(--h)); min-height: 44px; width: calc(var(--gx-u) * var(--w)); min-width: 160px;
  border-radius: var(--gx-r-pill); font-size: var(--gx-fs-body); line-height: 1.25; white-space: nowrap; cursor: pointer;
  transition: width var(--gx-d-btn) var(--gx-ease-in-out), background-color var(--gx-d-btn) var(--gx-ease-in-out), color var(--gx-d-btn) var(--gx-ease-in-out), opacity .3s; }
.gx-btn--350 { --w: 350; } .gx-btn--315 { --w: 315; } .gx-btn--200 { --w: 200; } .gx-btn--590 { --w: 590; } .gx-btn--full { width: 100%; }
.gx-btn[disabled], .gx-btn.is-disabled { opacity: .5; pointer-events: none; }
.gx-btn--light   { background: var(--gx-bg); color: var(--gx-purple); }
.gx-btn--primary { background: var(--gx-purple); color: var(--gx-bg); }
.gx-btn--outline { background: var(--gx-bg); color: var(--gx-purple); box-shadow: inset 0 0 0 1px var(--gx-purple); }
.gx-btn--outline:hover { background: var(--gx-purple); color: var(--gx-bg); }
.gx-btn--form    { background: var(--gx-surface); color: var(--gx-purple); }
.gx-btn--form:hover { opacity: .9; }
.gx-btn--glass   { background: rgba(37, 23, 92, .35); color: var(--gx-bg); box-shadow: inset 0 0 0 1px var(--gx-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gx-btn--glass:hover { background: var(--gx-bg); color: var(--gx-purple); }
/* Hover con círculo y flecha ↗ (light / primary) */
.gx-btn--arrow { margin-right: calc(var(--gx-u) * 65); }
.gx-btn--arrow::after { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--gx-u) * var(--h)); height: 100%; min-width: 44px;
  border-radius: 50%; background: inherit; opacity: 0; transform: translateX(0) scale(.6);
  -webkit-mask: none; transition: transform var(--gx-d-btn) var(--gx-ease-in-out), opacity var(--gx-d-btn) var(--gx-ease-in-out); }
.gx-btn--arrow::before { content: ""; position: absolute; top: 50%; right: calc(var(--gx-u) * (var(--h) / 2 - 9)); width: 18px; height: 18px; margin-top: -9px; z-index: 1;
  background: currentColor; opacity: 0; transform: translateX(0);
  -webkit-mask: url("../img/icons/arrow-up-right.svg") center / contain no-repeat; mask: url("../img/icons/arrow-up-right.svg") center / contain no-repeat;
  transition: transform var(--gx-d-btn) var(--gx-ease-in-out), opacity var(--gx-d-btn) var(--gx-ease-in-out); }
.gx-btn--arrow:hover { width: calc(var(--gx-u) * (var(--w) - 70)); }
.gx-btn--arrow:hover::after { opacity: 1; transform: translateX(calc(100% + var(--gx-u) * 5)) scale(1); }
.gx-btn--arrow:hover::before { opacity: 1; transform: translateX(calc(var(--gx-u) * var(--h) + var(--gx-u) * 5)); }
.gx-btn-row { display: flex; flex-wrap: wrap; gap: calc(var(--gx-u) * 20); align-items: center; }

/* ---------- 5.4 Flechas e indicadores ---------- */
.gx-arrow { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--gx-u) * 60); height: calc(var(--gx-u) * 60);
  min-width: 40px; min-height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--gx-purple-rgb), .2); color: var(--gx-purple);
  background: transparent; transition: background-color var(--gx-d-arrow) var(--gx-snap), color var(--gx-d-arrow) var(--gx-snap); }
.gx-arrow svg { width: 40%; height: 40%; }
.gx-arrow:hover, .gx-arrow.is-active { background: var(--gx-purple); color: var(--gx-bg); }
.gx-arrow[disabled] { opacity: .4; pointer-events: none; }
.gx-arrows { display: flex; gap: calc(var(--gx-u) * 25); }

.gx-dots { display: flex; gap: 10px; align-items: center; }
.gx-dots--vertical { flex-direction: column; }
.gx-dot { width: calc(var(--gx-u) * 12); height: calc(var(--gx-u) * 12); min-width: 8px; min-height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .6); transition: width var(--gx-d-slide) var(--gx-ease-in-out), height var(--gx-d-slide) var(--gx-ease-in-out), background-color var(--gx-d-slide); }
.gx-dot.is-active { background: #FFFFFF; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.gx-dots:not(.gx-dots--vertical) .gx-dot.is-active { width: calc(var(--gx-u) * 130); }
.gx-dots--vertical .gx-dot.is-active { height: calc(var(--gx-u) * 130); }
.gx-dots--on-light .gx-dot { background: rgba(var(--gx-purple-rgb), .3); }
.gx-dots--on-light .gx-dot.is-active { background: var(--gx-purple); }

/* ---------- Badges de estatus ---------- */
.gx-badge { display: inline-flex; align-items: center; gap: 8px; height: calc(var(--gx-u) * 40); min-height: 28px; padding: 0 calc(var(--gx-u) * 18);
  border-radius: 20px; background: rgba(250, 250, 250, .9); font-size: var(--gx-fs-eyebrow); line-height: 1; }
.gx-badge::before { content: ""; width: calc(var(--gx-u) * 12); height: calc(var(--gx-u) * 12); min-width: 8px; min-height: 8px; border-radius: 50%; background: currentColor; }
.gx-badge--preventa { color: var(--gx-status-preventa); } .gx-badge--activo { color: var(--gx-status-activo); } .gx-badge--proximamente { color: var(--gx-status-proximamente); }

/* ---------- 5.1 Header ---------- */
.gx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--gx-header-h); pointer-events: none; }
.gx-header__inner { max-width: var(--gx-max); margin: 0 auto; height: 100%; padding: calc(var(--gx-u) * 40) var(--gx-pad-x-sm) 0; display: flex; align-items: flex-start; gap: calc(var(--gx-u) * 53); }
.gx-header__inner > * { pointer-events: auto; }
.gx-header__logo { width: calc(var(--gx-u) * 101); min-width: 64px; height: calc(var(--gx-u) * 50); display: flex; align-items: center; }
.gx-header__logo img { width: 100%; height: auto; }
.gx-nav { display: flex; align-items: center; gap: calc(var(--gx-u) * 30); height: calc(var(--gx-u) * 60); min-height: 40px; padding: 0 calc(var(--gx-u) * 32);
  border-radius: var(--gx-r-pill); background: rgba(250, 250, 250, .15); mix-blend-mode: multiply; box-shadow: var(--gx-shadow-pill);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .4s; }
.gx-nav__link { font-size: var(--gx-fs-body); line-height: 1.25; letter-spacing: .2px; color: rgba(var(--gx-purple-rgb), .7); transition: color .3s, font-weight .3s; }
.gx-nav__link:hover, .gx-nav__link.is-active { color: var(--gx-ink); font-weight: 500; letter-spacing: 0; }
.gx-header__tools { margin-left: auto; display: flex; align-items: center; gap: calc(var(--gx-u) * 30); height: calc(var(--gx-u) * 60); min-height: 40px; }
.gx-user { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--gx-u) * 60); height: calc(var(--gx-u) * 60); min-width: 40px; min-height: 40px;
  border-radius: 50%; background: var(--gx-purple); color: var(--gx-surface); transition: background-color .4s, color .4s; }
.gx-user svg { width: 44%; height: 44%; }
.gx-lang { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gx-fs-body); color: var(--gx-purple); }
.gx-lang svg { width: 1em; height: 1em; }
.gx-lang.is-disabled { opacity: .4; cursor: default; }
.gx-burger { display: none; }
/* Sobre secciones oscuras */
.gx-header--on-dark .gx-nav { background: rgba(250, 250, 250, .8); mix-blend-mode: normal; } /* XD: multiply; normal para contraste AA sobre video/fotos */
.gx-header--on-dark .gx-user { background: transparent; color: var(--gx-surface); }
.gx-header--on-dark .gx-lang { color: var(--gx-surface); }

/* Menú móvil */
.gx-mobile-menu { position: fixed; inset: 0; z-index: 1100; background: var(--gx-purple); color: var(--gx-surface); padding: 96px 24px 32px;
  display: flex; flex-direction: column; gap: 24px; transform: translateY(-100%); transition: transform .5s var(--gx-ease-in-out); visibility: hidden; }
.gx-mobile-menu.is-open { transform: none; visibility: visible; }
.gx-mobile-menu a { font-size: 32px; }
.gx-mobile-menu__close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; color: var(--gx-surface); }

/* ---------- 5.2 Footer ---------- */
.gx-footer { max-width: var(--gx-max); margin: calc(var(--gx-u) * 120) auto 0; background: var(--gx-purple); color: var(--gx-surface);
  border-radius: var(--gx-r-xl) var(--gx-r-xl) 0 0; padding: calc(var(--gx-u) * 100) var(--gx-pad-x) calc(var(--gx-u) * 40); }
.gx-footer__logo { width: calc(var(--gx-u) * 195); min-width: 110px; margin-bottom: calc(var(--gx-u) * 95); }
.gx-footer__cols { display: grid; grid-template-columns: 1.55fr 1fr .95fr .9fr 1.1fr .6fr; gap: calc(var(--gx-u) * 40); }
.gx-footer__title { font-size: max(18px, calc(var(--gx-u) * 30)); line-height: 1.25; margin-bottom: calc(var(--gx-u) * 18); }
.gx-footer__list li { margin-bottom: calc(var(--gx-u) * 8); }
.gx-footer__list a, .gx-footer__list span { font-size: var(--gx-fs-body-l); line-height: 1.2; color: var(--gx-l-60); transition: color .3s; }
.gx-footer__list a:hover { color: var(--gx-surface); }
.gx-footer__contact li { display: flex; gap: 14px; align-items: flex-start; }
.gx-footer__contact .gx-ico { flex: 0 0 auto; width: calc(var(--gx-u) * 20); height: calc(var(--gx-u) * 20); min-width: 14px; min-height: 14px; margin-top: 3px; color: var(--gx-l-60); }
.gx-footer__mid { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--gx-u) * 45); gap: 24px; flex-wrap: wrap; }
.gx-footer__social { display: flex; gap: calc(var(--gx-u) * 18); }
.gx-footer__social a { width: calc(var(--gx-u) * 60); height: calc(var(--gx-u) * 60); min-width: 40px; min-height: 40px; border-radius: 50%;
  background: rgba(var(--gx-surface-rgb), .5); color: var(--gx-purple); display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s; }
.gx-footer__social a:hover { background: var(--gx-surface); }
.gx-footer__social svg { width: 45%; height: 45%; }
.gx-footer__apps { display: flex; gap: calc(var(--gx-u) * 40); align-items: center; flex-wrap: wrap; }
.gx-footer__app { display: flex; gap: calc(var(--gx-u) * 15); align-items: center; }
.gx-footer__app-name { font-size: max(18px, calc(var(--gx-u) * 30)); margin-right: calc(var(--gx-u) * 2); }
.gx-store { display: inline-flex; width: calc(var(--gx-u) * 96 * 1.67); min-width: 100px; height: calc(var(--gx-u) * 50); min-height: 32px; border-radius: 4px;
  background: rgba(var(--gx-surface-rgb), .5); align-items: center; justify-content: center; overflow: hidden; }
.gx-store img { height: 100%; width: auto; }
.gx-footer__legend { text-align: center; margin: calc(var(--gx-u) * 75) 0 calc(var(--gx-u) * 40); font-size: var(--gx-fs-body); color: var(--gx-l-60); }
.gx-footer__legal { border-top: 1px solid var(--gx-l-30); padding-top: calc(var(--gx-u) * 30); display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; }
.gx-footer__legal a, .gx-footer__legal span { font-size: var(--gx-fs-body-l); text-decoration: underline; color: var(--gx-surface); }
.gx-footer__legal span { text-decoration: none; }

/* ---------- 5.5 Formularios ---------- */
.gx-form { display: grid; gap: calc(var(--gx-u) * 14); }
.gx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gx-u) * 25); }
.gx-field { position: relative; display: block; }
.gx-input, .gx-textarea { width: 100%; height: calc(var(--gx-u) * 61); min-height: 44px; padding: 0 calc(var(--gx-u) * 33); border: 1px solid transparent; border-radius: var(--gx-r-input);
  background: var(--gx-l-10); color: var(--gx-l-95); font: inherit; font-size: var(--gx-fs-input); line-height: 1.2; letter-spacing: -.015em; outline: none;
  transition: border-color .3s, background-color .3s; -webkit-appearance: none; appearance: none; }
.gx-textarea { height: calc(var(--gx-u) * 102); min-height: 64px; padding-top: calc(var(--gx-u) * 15); resize: vertical; background: transparent; border-color: var(--gx-l-50); }
.gx-textarea--tall { height: calc(var(--gx-u) * 210); }
.gx-textarea--short { height: calc(var(--gx-u) * 61); min-height: 44px; }
.gx-input::placeholder, .gx-textarea::placeholder { color: var(--gx-l-30); opacity: 1; }
.gx-input:focus, .gx-textarea:focus { border-color: var(--gx-green); background: rgba(var(--gx-surface-rgb), .15); }
.gx-field.has-error .gx-input, .gx-field.has-error .gx-textarea { border-color: var(--gx-error); }
.gx-field__error { display: none; margin-top: 6px; font-size: 14px; color: #FF8A8A; }
.gx-field.has-error .gx-field__error { display: block; }
.gx-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--gx-fs-small); line-height: 1.33; color: rgba(250, 250, 250, .5); }
.gx-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gx-check__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(250, 250, 250, .5); display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s, border-color .3s; }
.gx-check__box svg { width: 11px; height: 9px; opacity: 0; color: #FFFFFF; }
.gx-check input:checked + .gx-check__box { background: var(--gx-green); border-color: var(--gx-green); }
.gx-check input:checked + .gx-check__box svg { opacity: 1; }
.gx-check input:focus-visible + .gx-check__box { outline: 2px solid var(--gx-green); outline-offset: 2px; }
.gx-check a { text-decoration: underline; color: inherit; }
.gx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gx-form__actions { display: flex; justify-content: flex-end; }

/* ---------- 5.7 Bloque de contacto ---------- */
.gx-contact-block { display: grid; grid-template-columns: 450fr 671fr 671fr; gap: calc(var(--gx-u) * 15); padding: 0 calc(var(--gx-u) * 25); margin-top: calc(var(--gx-u) * 160); }
.gx-contact-block__photo { border-radius: var(--gx-r-md); overflow: hidden; min-height: calc(var(--gx-u) * 790); }
.gx-contact-block__photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-contact-card { background: var(--gx-purple); color: var(--gx-surface); border-radius: var(--gx-r-md); padding: calc(var(--gx-u) * 38); }
.gx-contact-card__eyebrow { font-size: var(--gx-fs-body); color: rgba(250, 250, 250, .6); }
.gx-contact-card__title { font-size: var(--gx-fs-h2); line-height: 1.033; letter-spacing: -.015em; color: rgba(250, 250, 250, .95); margin: 4px 0 calc(var(--gx-u) * 12); }
.gx-contact-card__subtitle { font-size: var(--gx-fs-body); color: rgba(250, 250, 250, .6); margin-bottom: calc(var(--gx-u) * 30); }
.gx-contact-card__info { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gx-u) * 10) calc(var(--gx-u) * 30); padding-left: calc(var(--gx-u) * 20); margin-bottom: calc(var(--gx-u) * 25); }
.gx-contact-card__info .is-wide { grid-column: 1 / -1; }
.gx-contact-card__item { display: flex; gap: 10px; align-items: flex-start; font-size: var(--gx-fs-body-l); line-height: 1.136; color: rgba(250, 250, 250, .7); }
.gx-contact-card__item .gx-ico { flex: 0 0 auto; width: 1em; height: 1em; margin-top: .1em; }
.gx-contact-card__hours { display: block; color: rgba(250, 250, 250, .4); margin-top: 6px; }
.gx-map { width: 100%; aspect-ratio: 592 / 358; border-radius: var(--gx-r-img); overflow: hidden; background: #E9E7EE; }
.gx-map iframe, .gx-map > div { width: 100%; height: 100%; border: 0; }

/* ---------- 5.6 Modales ---------- */
.gx-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(250, 250, 250, .3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.gx-modal.is-open { opacity: 1; visibility: visible; }
.gx-modal__card { position: relative; width: min(calc(var(--gx-u) * 1130), 92vw); min-height: calc(var(--gx-u) * 665); border-radius: var(--gx-r-md);
  background: var(--gx-surface) url("../img/modal-sketch.png") center / cover no-repeat; padding: calc(var(--gx-u) * 85) calc(var(--gx-u) * 80);
  display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(20px); transition: transform .4s var(--gx-ease-out); }
.gx-modal.is-open .gx-modal__card { transform: none; }
.gx-modal__close { position: absolute; top: calc(var(--gx-u) * 40); right: calc(var(--gx-u) * 50); width: 32px; height: 32px; color: var(--gx-t-50); }
.gx-modal__icon { width: calc(var(--gx-u) * 140); height: calc(var(--gx-u) * 140); min-width: 80px; min-height: 80px; margin-bottom: calc(var(--gx-u) * 45); }
.gx-modal__icon--ok { color: var(--gx-green); } .gx-modal__icon--error { color: var(--gx-error); } .gx-modal__icon--warn { color: var(--gx-warning); }
.gx-modal__title { font-size: var(--gx-fs-h2); line-height: 1.033; letter-spacing: -.015em; color: var(--gx-t-70); margin-bottom: calc(var(--gx-u) * 20); }
.gx-modal__text { font-size: var(--gx-fs-body-l); line-height: 1.136; color: var(--gx-t-50); max-width: calc(var(--gx-u) * 820); margin-bottom: calc(var(--gx-u) * 55); }
.gx-modal__form { width: 100%; max-width: 760px; background: var(--gx-purple); border-radius: var(--gx-r-md); padding: 32px; text-align: left; }
body.gx-lock { overflow: hidden; }

/* Página 404 */
.gx-404 { position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--gx-header-h) 16px 40px; overflow: hidden; }
.gx-404__bg { position: absolute; inset: 0; z-index: -1; }
.gx-404__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.1); }
.gx-404 .gx-modal__card { transform: none; }

/* Tooltip del mapa */
.gx-tooltip { position: fixed; z-index: 1300; pointer-events: none; background: var(--gx-white); color: var(--gx-purple); border-radius: 16px; box-shadow: 0 8px 24px rgba(37, 23, 92, .18);
  padding: 14px 18px; min-width: 200px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.gx-tooltip.is-visible { opacity: 1; transform: none; }
.gx-tooltip__title { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.gx-tooltip__list li { font-size: 15px; color: var(--gx-t-60); line-height: 1.5; }

/* ---------- Contadores (Inicio INI-B y Nosotros NOS-A) ---------- */
.gx-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--gx-u) * 60); }
.gx-stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.gx-stat + .gx-stat { border-left: 1px solid var(--gx-green); }
.gx-stat__num { font-size: var(--gx-fs-display-xl); line-height: 1.1; letter-spacing: -.015em; font-weight: 500; color: var(--gx-purple); font-variant-numeric: tabular-nums; }
.gx-stat__label { font-size: var(--gx-fs-h4); line-height: 1.03; color: var(--gx-t-70); }
.gx-stats--light .gx-stat__num { color: var(--gx-surface); }
.gx-stats--light .gx-stat__label { color: rgba(247, 247, 250, .9); }

/* ---------- Botón flotante de WhatsApp (ventas) ---------- */
.gx-wa { position: fixed; z-index: 990; right: 20px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 26px;
  background: var(--gx-green); color: var(--gx-ink); box-shadow: 0 6px 18px rgba(37, 23, 92, .25); font-family: var(--gx-font); font-size: 17px; font-weight: 500; text-decoration: none; transition: transform .3s var(--gx-ease-out); }
.gx-wa:hover { transform: translateY(-2px); color: var(--gx-ink); }
.gx-wa .gx-ico { width: 24px; height: 24px; }
body.gx-lock .gx-wa { display: none; }
@media (max-width: 767px) { .gx-wa { right: 14px; bottom: 16px; width: 52px; padding: 0; justify-content: center; } .gx-wa__label { display: none; } }

/* ---------- Ventana de avisos (pop-up del administrador) ---------- */
.gx-modal__card--ad { min-height: 0; width: auto; max-width: min(720px, 92vw); padding: 56px 20px 20px; background-image: none; }
.gx-modal__card--ad img { display: block; max-width: 100%; max-height: 72vh; border-radius: var(--gx-r-img); }