/*
 * Guardabox · Sistema de diseño 2026
 * Se carga después de Bootstrap 5.3 y ando.css.
 * Principios: esquinas rectas (como el logo), una sola escala tipográfica,
 * un solo sistema de botones y campos, verde Guardabox como color de acción.
 * Puntos de corte (Bootstrap): sm 576 · md 768 · lg 992 · xl 1200.
 */

/* ======================================================================
   1. Tokens
   ==================================================================== */
:root {
  --gbx-verde: #69b447;
  --gbx-verde-700: #4f9132;
  --gbx-verde-800: #3d7326;
  --gbx-verde-50: #f0f8eb;
  --gbx-lima: #bed600;
  --gbx-negro: #121416;
  --gbx-carbon: #1d2125;
  --gbx-gris-700: #454b52;
  --gbx-gris-500: #6c737a;
  --gbx-gris-300: #cfd4d9;
  --gbx-gris-200: #e3e6e9;
  --gbx-gris-100: #f4f5f6;
  --gbx-blanco: #fff;

  --gbx-fuente-titulos: "Plus Jakarta Sans", "Open Sans", system-ui, sans-serif;
  --gbx-fuente-texto: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica única (fluida entre móvil y escritorio) */
  --gbx-t-display: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --gbx-t-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --gbx-t-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --gbx-t-h3: 1.25rem;
  --gbx-t-h4: 1.0625rem;
  --gbx-t-texto: 1rem;
  --gbx-t-chico: .875rem;
  --gbx-t-mini: .75rem;

  --gbx-sombra-1: 0 1px 2px rgba(18, 20, 22, .06), 0 1px 3px rgba(18, 20, 22, .08);
  --gbx-sombra-2: 0 10px 30px rgba(18, 20, 22, .10);
  --gbx-alto-header: 64px;

  /* Bootstrap: color primario y esquinas rectas en todos los componentes */
  --bs-primary: #69b447;
  --bs-primary-rgb: 105, 180, 71;
  --bs-link-color: #4f9132;
  --bs-link-color-rgb: 79, 145, 50;
  --bs-link-hover-color: #3d7326;
  --bs-link-hover-color-rgb: 61, 115, 38;
  --bs-body-font-family: var(--gbx-fuente-texto);
  --bs-body-color: #1d2125;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
  --bs-border-color: #e3e6e9;
  --bs-focus-ring-color: rgba(105, 180, 71, .35);
}
@media (min-width: 992px) { :root { --gbx-alto-header: 112px; } }

/* ======================================================================
   2. Base y tipografía
   ==================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gbx-alto-header) + 12px); }
body {
  padding-top: var(--gbx-alto-header) !important;
  font-family: var(--gbx-fuente-texto) !important;
  font-size: var(--gbx-t-texto);
  line-height: 1.6;
  color: var(--gbx-carbon);
  background: var(--gbx-blanco);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--gbx-fuente-titulos);
  color: var(--gbx-negro);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}
h1, .h1 { font-size: var(--gbx-t-h1); }
h2, .h2 { font-size: var(--gbx-t-h2); }
h3, .h3, h3 a { font-size: var(--gbx-t-h3); color: var(--gbx-negro); }
h4, .h4 { font-size: var(--gbx-t-h4); font-weight: 700; }
h5, h6 { font-size: var(--gbx-t-texto); font-weight: 700; }
p { margin-bottom: 1rem; }
small, .small { font-size: var(--gbx-t-chico); }

a { color: var(--gbx-verde-700); text-decoration: none; }
a:hover { color: var(--gbx-verde-800); text-decoration: underline; }
.text-justify, [style*="text-align: justify"], [style*="text-align:justify"] { text-align: left !important; }

img { max-width: 100%; height: auto; }
.gm-style img, [id^="map"] img, .map img { max-width: none; }

::selection { background: var(--gbx-verde); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--gbx-lima);
  outline-offset: 2px;
  box-shadow: none;
}

.gbx-saltar { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--gbx-negro); color: #fff; padding: .75rem 1rem; }
.gbx-saltar:focus { left: 1rem; top: 1rem; color: #fff; }

/* Elementos de texto reutilizables */
.gbx-eyebrow { display: inline-block; font-family: var(--gbx-fuente-titulos); font-size: var(--gbx-t-mini); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gbx-verde-700); margin-bottom: .5rem; }
.gbx-lead { font-size: 1.125rem; color: var(--gbx-gris-700); }
.gbx-seccion { padding: 4rem 0; }
.gbx-seccion-gris { background: var(--gbx-gris-100); }
.gbx-seccion-titulo { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.gbx-seccion-titulo h2 { margin-bottom: .75rem; }
.gbx-seccion-titulo p { color: var(--gbx-gris-700); margin: 0; }
@media (max-width: 767.98px) { .gbx-seccion { padding: 3rem 0; } .gbx-seccion-titulo { margin-bottom: 2rem; } }

/* ======================================================================
   3. Botones: esquinas rectas, una sola familia
   ==================================================================== */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  font-family: var(--gbx-fuente-titulos);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-font-size: .75rem; min-height: 38px; }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: 1rem; --bs-btn-font-size: .9375rem; min-height: 56px; }

/* Principal: verde sólido (incluye las clases heredadas del sitio) */
.btn-primary, .btn-success, .btn-submit, .btn-enviar, .btn-reserver, .btn-reservar, .btn_negro,
.btn-src-index, .btn-reserva, .nueva_sucursal_boton, .nueva_sucursal_box .nueva_sucursal_boton,
.foot_contacto .btn-primary, .home_busca .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gbx-verde);
  --bs-btn-border-color: var(--gbx-verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gbx-verde-700);
  --bs-btn-hover-border-color: var(--gbx-verde-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--gbx-verde-800);
  --bs-btn-active-border-color: var(--gbx-verde-800);
  --bs-btn-disabled-bg: var(--gbx-gris-300);
  --bs-btn-disabled-border-color: var(--gbx-gris-300);
  color: #fff !important;
  background: var(--gbx-verde) !important;
  border-color: var(--gbx-verde) !important;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  font-size: var(--bs-btn-font-size) !important;
  transform: none !important;
}
.btn-primary:hover, .btn-success:hover, .btn-submit:hover, .btn-enviar:hover, .btn-reserver:hover, .btn-reservar:hover,
.btn_negro:hover, .btn-src-index:hover, .btn-reserva:hover, .nueva_sucursal_boton:hover,
.btn-primary:focus, .btn-primary:active, .btn-check:checked + .btn-primary {
  color: #fff !important;
  background: var(--gbx-verde-700) !important;
  border-color: var(--gbx-verde-700) !important;
}

/* Secundario: contorno verde */
.btn-outline-primary, .btn-outline-success, .btn-gris, .btn-guia, .btn-secundario {
  --bs-btn-color: var(--gbx-verde-700);
  --bs-btn-border-color: var(--gbx-verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gbx-verde);
  --bs-btn-hover-border-color: var(--gbx-verde);
  --bs-btn-active-bg: var(--gbx-verde-700);
  --bs-btn-active-border-color: var(--gbx-verde-700);
  color: var(--gbx-verde-700) !important;
  background: transparent !important;
  border: 2px solid var(--gbx-verde) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-gris:hover, .btn-guia:hover, .btn-secundario:hover {
  color: #fff !important;
  background: var(--gbx-verde) !important;
}
/* Sobre fondo verde u oscuro: blanco */
.btn-blanco { color: var(--gbx-verde-800) !important; background: #fff !important; border: 2px solid #fff !important; }
.btn-blanco:hover { color: #fff !important; background: transparent !important; }
.btn-contorno-blanco { color: #fff !important; background: transparent !important; border: 2px solid rgba(255, 255, 255, .8) !important; }
.btn-contorno-blanco:hover { color: var(--gbx-verde-800) !important; background: #fff !important; border-color: #fff !important; }

/* Botón de Google con su estilo oficial */
a.btn.btn-danger[href*="accounts.google.com"] {
  color: #3c4043 !important; background: #fff !important; border: 1px solid #dadce0 !important;
  text-transform: none; letter-spacing: 0; font-family: var(--gbx-fuente-texto); font-weight: 600; font-size: .9375rem;
}
a.btn.btn-danger[href*="accounts.google.com"] .fa-google { color: #4285f4; font-size: 1.1rem; }
a.btn.btn-danger[href*="accounts.google.com"]:hover { background: #f8f9fa !important; }

/* Botones planos dentro de componentes heredados (inventario, resultados, lista de espera) */
.sec-cuadro button, .agotada button, .flex-column button, .flex-column .agotada button {
  border-radius: 0 !important;
  font-family: var(--gbx-fuente-titulos);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .6875rem;
  padding: .4rem .6rem;
  border: 2px solid currentColor;
  background: #fff;
}
.flex-column button { color: var(--gbx-verde-800) !important; background: #fff !important; border-color: var(--gbx-verde) !important; }
.flex-column .agotada button { color: #fff !important; background: var(--gbx-gris-700) !important; border-color: var(--gbx-gris-700) !important; }

/* ======================================================================
   4. Campos de formulario: esquinas rectas
   ==================================================================== */
.form-control, .form-select, .input-group-text, .caja-buscar, .caja-grupo,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  border-radius: 0 !important;
}
.form-control, .form-select {
  min-height: 48px;
  padding: .625rem .875rem;
  font-size: 1rem;
  color: var(--gbx-carbon);
  background-color: #fff;
  border: 1px solid var(--gbx-gris-300);
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 110px; }
.form-control::placeholder { color: var(--gbx-gris-500); }
.form-control:focus, .form-select:focus {
  border-color: var(--gbx-verde);
  box-shadow: 0 0 0 3px rgba(105, 180, 71, .2) !important;
}
.form-label, label { font-weight: 600; font-size: var(--gbx-t-chico); color: var(--gbx-gris-700); }
.form-check-input { border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--gbx-verde); border-color: var(--gbx-verde); }
@media (max-width: 767.98px) { input, select, textarea, .form-control, .form-select { font-size: 16px !important; } }

/* Buscador grande (portada, guía, buscador) */
.gbx-busqueda-label { display: block; font-family: var(--gbx-fuente-titulos); font-size: .9375rem; font-weight: 800; color: var(--gbx-negro); margin-bottom: .5rem; }
.gbx-busqueda { display: flex; width: 100%; background: #fff; border: 2px solid var(--gbx-negro); box-shadow: var(--gbx-sombra-2); }
.gbx-busqueda .form-control { flex: 1 1 auto; border: 0; min-height: 58px; font-size: 1.0625rem; padding-left: 1.125rem; }
.gbx-busqueda .form-control:focus { box-shadow: none !important; }
.gbx-busqueda .btn { min-height: 58px; flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .gbx-busqueda { flex-direction: column; }
  .gbx-busqueda .btn { width: 100%; }
}

/* ======================================================================
   5. Componentes de Bootstrap con esquinas rectas
   ==================================================================== */
.card, .modal-content, .dropdown-menu, .accordion, .accordion-item, .accordion-button, .alert, .badge, .nav-tabs .nav-link,
.nav-pills .nav-link, .toast, .popover, .tooltip-inner, .img-thumbnail, .page-link, .list-group, .offcanvas, .progress,
.table, .well, .cuadro-blog, .res_cel .card, .res_cel .card-body, #paso2 .card-body, .caja_verde, .seleccionabodega,
.nueva_sucursal_box, .cuenta_key i, .num_cuenta, .msjreserva, .ando_login input, .modal-lg .modal-content {
  border-radius: 0 !important;
}
.alert { border-width: 0 0 0 4px; }
.alert-info { background: var(--gbx-verde-50); border-color: var(--gbx-verde); color: var(--gbx-verde-800); }
.alert-warning { background: #fff8e5; border-color: #e0a800; color: #6b4e00; }
.alert-danger { background: #fdecec; border-color: #d63a3a; color: #8a1c1c; }
.accordion-button:not(.collapsed) { color: var(--gbx-verde-800); background: var(--gbx-verde-50); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.badge.bg-success, .gbx-tag {
  display: inline-block;
  background: var(--gbx-lima) !important;
  color: var(--gbx-negro) !important;
  font-family: var(--gbx-fuente-titulos);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .4rem;
  line-height: 1.2;
  vertical-align: middle;
}
.page-link { color: var(--gbx-verde-700); }
.page-item.active .page-link { background: var(--gbx-verde); border-color: var(--gbx-verde); }
.dropdown-menu { border: 1px solid var(--gbx-gris-200); box-shadow: var(--gbx-sombra-2); padding: .5rem 0; }
.dropdown-item { font-size: .9375rem; padding: .55rem 1.25rem; color: var(--gbx-carbon); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gbx-verde-50); color: var(--gbx-verde-800); }
.dropdown-menu li { border-bottom: 0 !important; line-height: 1.4 !important; font-size: inherit; }

/* ======================================================================
   6. Encabezado
   ==================================================================== */
.gbx-header { background: #fff; border-bottom: 1px solid var(--gbx-gris-200); transition: box-shadow .2s ease; z-index: 1030; }
.gbx-header.gbx-scrolled { box-shadow: 0 4px 16px rgba(18, 20, 22, .08); }

.gbx-util { background: var(--gbx-gris-100); border-bottom: 1px solid var(--gbx-gris-200); font-size: .8125rem; }
.gbx-util .container { min-height: 40px; }
.gbx-util-tel { color: var(--gbx-gris-700); font-weight: 600; }
.gbx-util-tel:hover { color: var(--gbx-verde-700); text-decoration: none; }
.gbx-util-nav { display: flex; align-items: center; gap: 1.5rem; }
.gbx-util-link { background: none; border: 0; padding: .5rem 0; color: var(--gbx-gris-700); font-size: .8125rem; font-weight: 600; text-decoration: none !important; }
.gbx-util-link:hover, .gbx-util-link[aria-expanded="true"] { color: var(--gbx-verde-700); }
.gbx-util-link .fa { margin-right: .25rem; }

.gbx-main .container { min-height: var(--gbx-alto-header); }
@media (min-width: 992px) { .gbx-main .container { min-height: 72px; } }
.gbx-logo { display: block; flex: 0 0 auto; }
.gbx-logo img { display: block; width: 190px; height: auto; margin: 0; }
@media (min-width: 992px) { .gbx-logo img { width: 230px; } }

.gbx-nav { align-items: center; gap: 2rem; }
.gbx-nav-link {
  background: none; border: 0; padding: .5rem 0;
  font-family: var(--gbx-fuente-titulos); font-size: .9375rem; font-weight: 700; color: var(--gbx-negro);
  border-bottom: 3px solid transparent;
}
.gbx-nav-link:hover, .gbx-nav-link[aria-expanded="true"] { color: var(--gbx-verde-700); border-bottom-color: var(--gbx-verde); }
.gbx-nav .dropdown-toggle::after, .gbx-util .dropdown-toggle::after { vertical-align: .15em; margin-left: .35rem; border-top-width: .3em; }
.gbx-nav .dropdown-menu { margin-top: .9rem !important; }

/* Mega menú de sucursales */
.gbx-main .container { position: relative; }
.gbx-nav .gbx-mega { position: static; }
.gbx-nav .gbx-mega .gbx-mega-panel { position: absolute; top: 100%; right: .75rem; left: auto; margin-top: 0 !important; }
.gbx-mega-panel { width: min(880px, calc(100vw - 2rem)); padding: 0; }
.gbx-mega-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; background: var(--gbx-gris-100); border-bottom: 1px solid var(--gbx-gris-200); }
.gbx-mega-todas { font-weight: 700; font-size: .875rem; }
.gbx-mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.gbx-mega-col ul { list-style: none; margin: 0; padding: 0; }
.gbx-mega-col li a { display: block; padding: .3rem 0; color: var(--gbx-carbon); font-size: .875rem; }
.gbx-mega-col li a:hover { color: var(--gbx-verde-700); }
.gbx-mega-titulo { font-family: var(--gbx-fuente-titulos); font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gbx-gris-500); margin: 0 0 .5rem; }

/* Hamburguesa */
.gbx-burger { width: 46px; height: 46px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--gbx-negro); border: 0; }
.gbx-burger span { display: block; width: 20px; height: 2px; background: #fff; }
.gbx-cta-mini { min-height: 46px; }

/* Panel lateral (celular y tableta) */
.gbx-offcanvas { --bs-offcanvas-width: min(360px, 88vw); }
.gbx-offcanvas .offcanvas-header { border-bottom: 1px solid var(--gbx-gris-200); }
.gbx-offcanvas .offcanvas-title { font-family: var(--gbx-fuente-titulos); font-weight: 800; font-size: 1.125rem; margin: 0; }
.gbx-acordeon .accordion-item { border-left: 0; border-right: 0; }
.gbx-acordeon .accordion-button { font-family: var(--gbx-fuente-titulos); font-weight: 800; font-size: 1rem; padding: 1rem .25rem; background: #fff; }
.gbx-acordeon .accordion-button:not(.collapsed) { background: #fff; color: var(--gbx-verde-700); }
.gbx-acordeon .accordion-body { padding: 0 .25rem 1rem; }
.gbx-acordeon .gbx-mega-titulo { margin-top: .9rem; }
.gbx-om-link { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .55rem 0; color: var(--gbx-carbon); font-size: .9375rem; text-decoration: none !important; }
.gbx-om-link:hover { color: var(--gbx-verde-700); }
.gbx-om-destacado { font-weight: 700; color: var(--gbx-verde-700); }
.gbx-om-secundario { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gbx-gris-200); }
.gbx-om-secundario .gbx-mega-titulo { margin-top: 1rem; }
.gbx-om-acciones { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gbx-gris-200); }
.gbx-om-tel { display: block; text-align: center; font-family: var(--gbx-fuente-titulos); font-weight: 800; font-size: 1.125rem; color: var(--gbx-negro); }

/* Oculta restos del encabezado anterior si alguna vista los incluye */
.head_menu { display: none !important; }

/* ======================================================================
   7. Encabezados de página (antes franja gris oscuro)
   ==================================================================== */
.info_titulo, .barra_titulo, .title_style_nar {
  background: var(--gbx-gris-100) !important;
  color: var(--gbx-negro) !important;
  border-bottom: 1px solid var(--gbx-gris-200);
  padding: 2rem 0 !important;
  margin-bottom: 2.5rem !important;
}
.info_titulo h1, .barra_titulo h2, .title_style_nar h1, .title_style_nar h2 {
  font-size: var(--gbx-t-h1) !important;
  color: var(--gbx-negro) !important;
  margin: 0;
  text-transform: none;
}
.info_titulo h1::before, .barra_titulo h2::before {
  content: ""; display: block; width: 40px; height: 6px; background: var(--gbx-verde); margin-bottom: .9rem;
}
.gbx-migas { font-size: var(--gbx-t-chico); color: var(--gbx-gris-500); margin-bottom: .5rem; }
.gbx-migas a { color: var(--gbx-gris-700); }
.gbx-migas span { margin: 0 .35rem; }
.sucu_titulo h1 { font-size: var(--gbx-t-h1) !important; color: var(--gbx-negro) !important; background: none !important; text-align: left !important; }
.sucu_titulo { background: none !important; }

.info_titulo:not(:has(h1)) { display: none !important; }

/* Listas de sucursales (página Sucursales) */
.ul-item { display: grid; gap: .5rem; margin-bottom: 2.5rem; }
.ul-item li { margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--gbx-gris-200); text-align: left !important; }
.ul-item li a, .ul-item li a.sucu-item {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  padding: 1rem 1.25rem; color: var(--gbx-negro) !important; font-family: var(--gbx-fuente-titulos); font-size: 1rem !important; font-weight: 700 !important; text-align: left !important; text-decoration: none;
  border-left: 4px solid var(--gbx-verde);
}
.ul-item li a::after { content: "→"; color: var(--gbx-verde-700); margin-left: auto; }
.ul-item li a:hover { background: var(--gbx-verde-50); text-decoration: none; }
main.container .ul-item + h2, main.container h2.text-center { text-align: left !important; }

/* Contenido de páginas del CMS */
main.container, .content-cms { max-width: 1140px; }
main.container h2 { color: var(--gbx-negro); margin-top: 2rem; }
main.container h3 { color: var(--gbx-verde-800); }
main.container ul li::marker { color: var(--gbx-verde); }

/* ======================================================================
   8. Pie de página
   ==================================================================== */
.gbx-contacto { background: var(--gbx-gris-100); padding: 4rem 0; border-top: 1px solid var(--gbx-gris-200); }
.gbx-contacto-info h2 { margin-bottom: 1rem; }
.gbx-contacto-info p { color: var(--gbx-gris-700); }
.gbx-contacto-tel { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--gbx-fuente-titulos); font-size: 1.5rem; font-weight: 800; color: var(--gbx-negro); text-decoration: none !important; }
.gbx-contacto-tel .fa { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--gbx-verde); color: #fff; font-size: 1.25rem; }
.gbx-contacto-form { background: #fff; padding: 2rem; border: 1px solid var(--gbx-gris-200); box-shadow: var(--gbx-sombra-1); }
.gbx-contacto-form .form-control, .gbx-contacto-form .form-select { background: var(--gbx-gris-100); border-color: var(--gbx-gris-100); }
.gbx-contacto-form .form-control:focus, .gbx-contacto-form .form-select:focus { background: #fff; }
@media (max-width: 575.98px) { .gbx-contacto { padding: 3rem 0; } .gbx-contacto-form { padding: 1.25rem; } }

.gbx-footer { background: var(--gbx-carbon); color: #c8cdd2; padding: 4rem 0 0; font-size: var(--gbx-t-chico); }
.gbx-footer a { color: #e6e9ec; text-decoration: none; }
.gbx-footer a:hover { color: var(--gbx-lima); text-decoration: none; }
.gbx-footer-logo { display: inline-block; background: #fff; padding: .75rem 1rem; margin-bottom: 1.25rem; }
.gbx-footer-logo img { display: block; width: 190px; margin: 0; }
.gbx-footer-tel { display: block; font-family: var(--gbx-fuente-titulos); font-size: 1.375rem; font-weight: 800; color: #fff !important; margin-bottom: 1rem; }
.gbx-footer-titulo { font-family: var(--gbx-fuente-titulos); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.gbx-footer ul { list-style: none; margin: 0; padding: 0; }
.gbx-footer li { margin-bottom: .55rem; }
.gbx-footer-social { display: flex; gap: .5rem; }
.gbx-footer-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #454b52; color: #fff; font-size: 1rem; }
.gbx-footer-social a:hover { background: var(--gbx-verde); border-color: var(--gbx-verde); color: #fff; }
.gbx-footer-bajo { margin-top: 3rem; padding: 1.25rem 0; border-top: 1px solid #343a40; font-size: var(--gbx-t-mini); color: #9aa1a8; }
.gbx-footer-bajo .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.gbx-footer-bajo nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.gbx-footer-bajo a { color: #c8cdd2; }
.gbx-legal summary { cursor: pointer; color: #c8cdd2; list-style: none; }
.gbx-legal summary::-webkit-details-marker { display: none; }
.gbx-legal summary::after { content: " +"; }
.gbx-legal[open] summary::after { content: " −"; }
.gbx-legal-texto { margin-top: .75rem; padding: 1rem 0 0; font-size: var(--gbx-t-mini); line-height: 1.6; color: #9aa1a8; border-top: 1px solid #343a40; width: 100%; }
@media (max-width: 767.98px) {
  .gbx-footer { padding-top: 3rem; }
  .gbx-footer-col { border-top: 1px solid #343a40; padding-top: 1.25rem; }
}

/* Botón fijo en celular */
.gbx-barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--gbx-gris-200); box-shadow: 0 -6px 18px rgba(18, 20, 22, .08);
  transform: translateY(110%); transition: transform .25s ease;
}
.gbx-barra-movil.visible { transform: translateY(0); }
.gbx-barra-movil .btn { width: 100%; }
@media (min-width: 992px) { .gbx-barra-movil { display: none; } }

/* ======================================================================
   9. Portada
   ==================================================================== */
.gbx-hero { position: relative; background: #fff; overflow: hidden; }
.gbx-hero-grid { display: grid; grid-template-columns: 1fr; }
.gbx-hero-texto { position: relative; z-index: 2; padding: 3rem 0 2.5rem; }
.gbx-hero h1 { font-size: var(--gbx-t-display); margin-bottom: 1rem; }
.gbx-hero h1 em { font-style: normal; color: var(--gbx-verde); }
.gbx-hero .gbx-lead { max-width: 560px; margin-bottom: 1.75rem; }
.gbx-hero-ubicacion { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-weight: 600; font-size: var(--gbx-t-chico); }
@media (max-width: 991.98px) {
  .gbx-hero-texto { display: flex; flex-direction: column; padding-top: 2rem; }
  .gbx-hero-texto .gbx-lead { order: 5; margin: 1.5rem 0 0; font-size: 1rem; }
  .gbx-hero-ubicacion { order: 4; }
}
.gbx-hero-img { min-height: 260px; background: url("../img/bgmovil.jpg") center/cover no-repeat; }
@media (min-width: 992px) {
  .gbx-hero { min-height: 560px; }
  .gbx-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; background-image: url("../img/home_index.jpg"); background-position: right center; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .gbx-hero-texto { width: 50%; padding: 5rem 2rem 5rem 0; }
}

.gbx-beneficios { background: var(--gbx-negro); color: #fff; }
.gbx-beneficios .row > div { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.gbx-beneficio { display: flex; align-items: center; gap: .9rem; }
.gbx-beneficio .fa { flex: 0 0 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--gbx-verde); color: #fff; font-size: 1.125rem; }
.gbx-beneficio strong { display: block; font-family: var(--gbx-fuente-titulos); font-size: .9375rem; line-height: 1.3; }
.gbx-beneficio span { display: block; font-size: var(--gbx-t-mini); color: #b9c0c6; line-height: 1.4; }
@media (min-width: 992px) { .gbx-beneficios .row > div + div { border-left: 1px solid #2d3238; } }

/* Tarjetas genéricas */
.gbx-card { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gbx-gris-200); transition: box-shadow .2s ease, border-color .2s ease; }
.gbx-card:hover { box-shadow: var(--gbx-sombra-2); border-color: transparent; }
.gbx-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gbx-gris-100); }
.gbx-card-img img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.gbx-card-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; padding: 1.5rem; }
.gbx-card-cuerpo h3 { margin-bottom: .6rem; }
.gbx-card-cuerpo p { color: var(--gbx-gris-700); font-size: .9375rem; }
.gbx-card-cuerpo .btn, .gbx-card-cuerpo .gbx-link { margin-top: auto; align-self: flex-start; }
.gbx-link { font-family: var(--gbx-fuente-titulos); font-weight: 800; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gbx-verde-700); }
.gbx-link::after { content: " →"; }
.gbx-link:hover { text-decoration: none; color: var(--gbx-verde-800); }

.gbx-sucursal-nueva { border-top: 6px solid var(--gbx-verde); }
.gbx-sucursal-nueva .gbx-card-cuerpo { padding: 1.75rem; }
.gbx-sucursal-nueva address { font-style: normal; color: var(--gbx-gris-700); font-size: .9375rem; margin-bottom: 1.25rem; }

.gbx-servicio { display: flex; gap: 1.5rem; align-items: flex-start; }
.gbx-servicio img { flex: 0 0 110px; width: 110px; margin: 0; }
@media (max-width: 575.98px) { .gbx-servicio { flex-direction: column; } }

.gbx-quienes img { width: 100%; margin: 0; }

/* ======================================================================
   10. Onboarding (pop-up "Cómo rentar")
   ==================================================================== */
.gbx-modal .modal-content { border: 0; overflow: hidden; }
.gbx-modal .modal-dialog { max-width: 880px; }
.gbx-modal-grid { display: grid; grid-template-columns: 1fr; }
.gbx-modal-lado { background: var(--gbx-verde); color: #fff; padding: 2rem; }
.gbx-modal-lado h2 { color: #fff; font-size: var(--gbx-t-h2); margin-bottom: .75rem; }
.gbx-modal-lado p { color: rgba(255, 255, 255, .9); margin: 0; }
.gbx-modal-lado .gbx-eyebrow { color: var(--gbx-negro); }
.gbx-modal-cuerpo { padding: 2rem; }
.gbx-modal-cerrar { position: absolute; top: .75rem; right: .75rem; z-index: 3; width: 40px; height: 40px; background-color: #fff; border: 1px solid var(--gbx-gris-300); opacity: 1; border-radius: 0; }
.gbx-modal-cerrar:hover { border-color: var(--gbx-negro); }
.gbx-pasos-modal { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: paso; }
.gbx-pasos-modal li { position: relative; padding: 0 0 1.25rem 3.5rem; counter-increment: paso; }
.gbx-pasos-modal li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gbx-fuente-titulos); font-weight: 800; color: #fff; background: var(--gbx-negro);
}
.gbx-pasos-modal li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 2px; background: var(--gbx-gris-200); }
.gbx-pasos-modal strong { display: block; font-family: var(--gbx-fuente-titulos); font-size: 1rem; color: var(--gbx-negro); margin-bottom: .15rem; }
.gbx-pasos-modal span { display: block; font-size: .9rem; color: var(--gbx-gris-700); line-height: 1.5; }
.gbx-pasos-modal a { font-weight: 600; font-size: .875rem; }
.gbx-modal-acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.gbx-modal-no { background: none; border: 0; color: var(--gbx-gris-500); font-size: var(--gbx-t-chico); text-decoration: underline; padding: .5rem 0; }
@media (min-width: 768px) {
  .gbx-modal-grid { grid-template-columns: 5fr 7fr; }
  .gbx-modal-lado { padding: 3rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }
  .gbx-modal-cuerpo { padding: 2.75rem 2.5rem; }
}

/* ======================================================================
   11. Mi cuenta (progreso) y login
   ==================================================================== */
.gbx-progreso { height: 8px; background: var(--gbx-gris-200); overflow: hidden; }
.gbx-progreso-barra { height: 100%; background: var(--gbx-verde); transition: width .4s ease; }
.gbx-pasos { margin: 0; padding: 0; }
.gbx-paso { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: -1px; background: #fff; border: 1px solid var(--gbx-gris-200); }
.gbx-paso-num { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-family: var(--gbx-fuente-titulos); font-weight: 800; color: var(--gbx-negro); border: 2px solid var(--gbx-negro); }
.gbx-paso-ok .gbx-paso-num { background: var(--gbx-verde); border-color: var(--gbx-verde); color: #fff; }
.gbx-paso-txt { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.4; text-align: left; }
.gbx-paso-txt strong { font-family: var(--gbx-fuente-titulos); color: var(--gbx-negro); font-size: .9375rem; }
.gbx-paso-txt span { color: var(--gbx-gris-700); font-size: .875rem; }
.gbx-paso .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 575.98px) {
  .gbx-paso { flex-wrap: wrap; }
  .gbx-paso .btn { margin-left: calc(38px + 1rem); width: calc(100% - 38px - 1rem); }
  .mi_cuenta .cuenta_centro { order: -1; margin-bottom: 1.5rem; }
}
.mi_cuenta h3 { font-size: var(--gbx-t-h3) !important; }
.col_gris, .col_gris_home { background: var(--gbx-gris-100) !important; }
.cuenta_left { padding: 2rem !important; border: 1px solid var(--gbx-gris-200); }
.cuenta_left a { width: 100%; }
.cuenta_key i { font-size: 28px !important; padding: 22px 24px !important; border: 2px solid var(--gbx-verde) !important; }
.num_cuenta { display: inline-block; font-family: var(--gbx-fuente-titulos); font-weight: 800; font-size: 2.25rem !important; padding: .5rem 1.5rem !important; border: 0 !important; color: var(--gbx-verde-700) !important; }

.ando_login { background-size: cover !important; background-position: center !important; }
.ando_login .well { box-shadow: var(--gbx-sombra-2); padding: 2rem !important; }
.ando_login input { background: #fff !important; border: 1px solid var(--gbx-gris-300) !important; }

/* ======================================================================
   12. Sucursal, inventario, reserva y buscador
   ==================================================================== */
.sucu_titulo { padding-top: 1rem; }
.col_gris { padding: 1.5rem !important; border: 1px solid var(--gbx-gris-200); }
.nav-tabs { border-bottom: 2px solid var(--gbx-negro); gap: 0; }
.nav-tabs .nav-link {
  background: #fff !important; color: var(--gbx-gris-700) !important;
  border: 0 !important; border-bottom: 4px solid transparent !important;
  font-family: var(--gbx-fuente-titulos); font-size: .9375rem !important; font-weight: 800; margin-bottom: -2px;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--gbx-negro) !important; border-bottom-color: var(--gbx-verde) !important; }

/* Mosaicos de tamaños (sucursal y buscador) */
.sec-cuadro .nav-tabs { border-bottom: 0; }
.sec-cuadro .nav-tabs > li { background: var(--gbx-verde) !important; border: 3px solid #fff !important; }
.sec-cuadro .nav-tabs .agotada { background: var(--gbx-gris-700) !important; }
.sec-cuadro .nav-tabs > li a { color: #fff !important; font-family: var(--gbx-fuente-titulos); text-decoration: none; }

/* Tablas de inventario */
.table { --bs-table-striped-bg: var(--gbx-gris-100); }
.tabresdiv th, .table thead th, table.dataTable thead th {
  background: var(--gbx-negro) !important; color: #fff !important; font-family: var(--gbx-fuente-titulos); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 0 !important;
}
.table-resultados td { font-size: .9375rem; vertical-align: middle; }
.tache { color: var(--gbx-gris-500); }
.promo, .promoweb { color: var(--gbx-verde-700) !important; font-weight: 800; }
select.seleccionabodega, .form-select.seleccionabodega {
  background-color: #fff !important; color: var(--gbx-negro) !important; border: 2px solid var(--gbx-negro) !important;
  font-family: var(--gbx-fuente-titulos); font-weight: 700; font-size: 1rem !important; min-height: 52px;
}
.seltexto { color: #fff; }
.flex-column { background: var(--gbx-gris-100) !important; }
.flex-column .active { border-right: 4px solid var(--gbx-verde) !important; }
.msjreserva { background: var(--gbx-verde) !important; }
.ini_reserva { background: var(--gbx-gris-100) !important; }
.ini_reserva h1 { color: var(--gbx-negro) !important; }
.res_cel .card-body { background: var(--gbx-verde) !important; }
.res_cel .card-body .promo, .res_cel .card-body .promoweb, .res_cel .card-body strong.promo { color: #fff !important; }
.res_cel .card-body .tache { color: rgba(255, 255, 255, .8) !important; }
.res_cel .card-body .fa-tag { color: #fff; }

/* Resultados del buscador en celular: foto arriba y mosaicos a todo lo ancho */
@media (max-width: 575.98px) {
  .row.mb-4 > .col-3:has(> .img-thumbnail),
  .row.mb-4 > .col-3:has(> .img-thumbnail) + .col-9 { flex: 0 0 100%; max-width: 100%; }
  .row.mb-4 > .col-3 > .img-thumbnail { width: 100%; max-height: 170px; object-fit: cover; margin-bottom: .75rem; padding: 0; border: 0; }
  .sec-cuadro .nav-tabs > li a { font-size: 13px !important; word-break: keep-all; overflow-wrap: normal; }
  .sec-cuadro .nav-tabs > li label { font-size: 11px; }
  .table-resultados, .tabresdiv table, .content-cms table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
#resultado h3 a { color: var(--gbx-negro) !important; }

/* Blog */
.cuadro-blog { border: 1px solid var(--gbx-gris-200); border-bottom: 4px solid var(--gbx-verde); }
.lista-blog { background: var(--gbx-gris-100); }

/* ======================================================================
   13. Guía de tamaños (nativa)
   ==================================================================== */
.gbx-guia { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.gbx-guia-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gbx-guia-opcion {
  width: 100%; height: 100%; text-align: left; background: #fff; border: 2px solid var(--gbx-gris-200);
  padding: .75rem .9rem; transition: border-color .15s ease;
}
.gbx-guia-opcion strong { display: block; font-family: var(--gbx-fuente-titulos); font-size: 1.0625rem; color: var(--gbx-negro); }
.gbx-guia-opcion span { display: block; font-size: .8125rem; color: var(--gbx-gris-700); line-height: 1.35; }
.gbx-guia-opcion:hover { border-color: var(--gbx-verde); }
.gbx-guia-opcion[aria-pressed="true"] { background: var(--gbx-verde); border-color: var(--gbx-verde); }
.gbx-guia-opcion[aria-pressed="true"] strong, .gbx-guia-opcion[aria-pressed="true"] span { color: #fff; }
.gbx-guia-detalle { border: 1px solid var(--gbx-gris-200); background: #fff; }
.gbx-guia-img { background: var(--gbx-gris-100); padding: 1.5rem; text-align: center; }
.gbx-guia-img img { max-height: 340px; width: auto; margin: 0 auto; }
.gbx-guia-texto { padding: 1.75rem; }
.gbx-guia-medida { font-family: var(--gbx-fuente-titulos); font-size: var(--gbx-t-h2); font-weight: 800; color: var(--gbx-verde-700); margin-bottom: .25rem; }
.gbx-guia-texto h3 { margin-bottom: .75rem; }
.gbx-guia-texto p { color: var(--gbx-gris-700); }
.gbx-guia-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
@media (min-width: 576px) { .gbx-guia-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) {
  .gbx-guia { grid-template-columns: 340px 1fr; align-items: start; }
  .gbx-guia-lista { grid-template-columns: 1fr 1fr; position: sticky; top: calc(var(--gbx-alto-header) + 1rem); }
}

/* ======================================================================
   14. Utilidades y accesibilidad
   ==================================================================== */
.foot_contacto, .foot_social, .foot_copy { display: none !important; } /* pie anterior */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}