@charset "UTF-8";
/* ==============================================
   GD HOME V3 — HOMEPAGE STYLES
   B3 Hero + B4 Discovery + B6 Carousels
   Fecha: 2026-05-23
   [Paso 6] Hex hardcoded eliminados: tokens → var(--gd-*) / var(--sth-*)
   Gradients de componentes → SCSS vars documentadas abajo.
   ============================================== */
/* =============================================
   B3: HERO — PREMIUM VISUAL SLIDER
   Visual-first, hospitality/travel style.
   Image dominant, centered text, minimal overlay.
   Ref: Figma "¡Un mes gratis!" hotel/lobby slide
   ============================================= */
.gd-hero-section {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}

/* --- FALLBACK (Phase A) --- */
.gd-hero-inner {
  background: linear-gradient(135deg, var(--gd-primary) 0%, var(--sth-color-brand-medium) 45%, var(--gd-accent) 100%);
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.gd-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(175, 59, 179, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.gd-hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 4rem 1.5rem 3rem;
}

.gd-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--gd-white);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.gd-hero-subtitle {
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

.gd-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gd-hero-cta-primary,
.gd-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.gd-hero-cta-primary {
  background: linear-gradient(135deg, var(--gd-accent) 0%, var(--sth-color-brand-accent) 100%);
  color: var(--gd-white);
  box-shadow: 0 4px 20px rgba(175, 59, 179, 0.4);
}

.gd-hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(175, 59, 179, 0.55);
  color: var(--gd-white);
}

.gd-hero-cta-secondary {
  background: transparent;
  color: var(--gd-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.gd-hero-cta-secondary:hover {
  border-color: var(--gd-white);
  background: rgba(255, 255, 255, 0.1);
  color: var(--gd-white);
  transform: translateY(-2px);
}

/* --- AD BANNER (Phase B — gd_ads_v2 hp_hero) --- */
.gd-hero-ad-link {
  display: block;
  text-decoration: none !important;
  color: var(--gd-white);
}

.gd-hero-ad-banner {
  position: relative;
  height: 380px !important;
  background: var(--gd-primary);
  overflow: hidden;
}

.gd-hero-ad-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 380px !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s ease;
}

.gd-hero-ad-link:hover .gd-hero-ad-img {
  transform: scale(1.03);
}

/* Very subtle overlay — image stays dominant */
.gd-hero-ad-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.45) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-hero-ad-content {
  text-align: center;
  max-width: 600px;
  padding: 3.5rem 1.5rem;
}

.gd-hero-ad-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1rem;
}

.gd-hero-ad-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gd-white);
  line-height: 1.15;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.gd-hero-ad-biz {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.gd-hero-ad-cta {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--gd-white);
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.gd-hero-ad-link:hover .gd-hero-ad-cta {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* --- SEARCH BAR (B2 — SSR Form, UX Polish) ---
   Premium search: Ubicación ▼ │ Buscar aquí │ 🔵
   Desktop: overlap hero, 58px height, 860px wide
   Mobile: stacked, thumb-friendly, full-width
   Ref: Figma header search bar */
.gd-search-section {
  position: relative;
  z-index: 10;
  margin-top: -34px;
  padding: 0 1rem 2rem;
}

.gd-search-bar {
  display: flex;
  align-items: center;
  background: var(--gd-white);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 5px 5px 5px 0;
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 58px;
  transition: box-shadow 0.3s ease;
}

.gd-search-bar:focus-within {
  box-shadow: 0 8px 40px rgba(0, 123, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 123, 255, 0.2);
}

/* Location dropdown */
.gd-search-location {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.5rem;
  min-width: 190px;
  flex-shrink: 0;
}

.gd-search-loc-icon {
  color: var(--gd-secondary);
  font-size: 1.15rem;
}

.gd-search-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sth-gray-700);
  cursor: pointer;
  outline: none;
  padding: 14px 22px 14px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  width: 100%;
}

.gd-search-select:focus {
  color: var(--sth-black);
}

/* Divider */
.gd-search-divider {
  width: 1px;
  height: 32px;
  background: var(--gd-gray-200);
  flex-shrink: 0;
}

/* Text input */
.gd-search-input {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
}

.gd-search-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sth-gray-900);
  width: 100%;
  padding: 10px 0;
}

.gd-search-text::placeholder {
  color: var(--sth-gray-300);
  font-weight: 400;
}

/* Blue circular button — prominent */
.gd-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--gd-secondary);
  color: var(--gd-white);
  border: none;
  border-radius: 50%;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.gd-search-btn:hover {
  background: var(--gd-secondary);
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.45);
  transform: scale(1.05);
}

/* Label hidden on desktop (icon-only circle) */
.gd-search-btn-label {
  display: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =============================================
   B6 SECTION LAYOUT
   Título + "Ver todos" a la izquierda
   Flechas ‹ › a la derecha
   ============================================= */
.gd-b6-section {
  padding: 2.5rem 0;
  background-color: var(--gd-white, var(--gd-white));
  border-top: 1px solid var(--gd-gray-100, var(--gd-gray-100));
}

.gd-b6-section:first-child {
  border-top: none;
}

.gd-b6-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.gd-b6-section-label {
  flex-shrink: 0;
}

.gd-b6-section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gd-primary, var(--gd-primary));
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.gd-b6-ver-todos {
  display: inline-block;
  background: var(--gd-secondary, var(--gd-secondary));
  color: var(--gd-white);
  border-radius: 999px;
  padding: 6px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gd-b6-ver-todos:hover {
  background: var(--gd-primary, var(--gd-primary));
  color: var(--gd-white);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Nav arrows */
.gd-b6-section-nav {
  display: flex;
  gap: 8px;
}

.gd-b6-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gd-gray-200, var(--gd-gray-200));
  background: var(--gd-white);
  color: var(--gd-primary, var(--gd-primary));
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  user-select: none;
}

.gd-b6-nav-btn:hover {
  background: var(--gd-gray-50, var(--gd-gray-50));
  border-color: var(--gd-primary, var(--gd-primary));
}

/* [Paso 3] Disabled state — set by gd_b6_carousel_js at scroll boundaries */
.gd-b6-nav-btn:disabled,
.gd-b6-nav-btn[aria-disabled=true] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Keyboard focus ring (accessible, not intrusive) */
.gd-b6-nav-btn:focus-visible {
  outline: 2px solid var(--gd-secondary, var(--gd-secondary));
  outline-offset: 2px;
}

/* =============================================
   HORIZONTAL SCROLL TRACK
   scroll-snap + hide scrollbar
   ============================================= */
.gd-b6-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0 1rem;
}

.gd-b6-track::-webkit-scrollbar {
  display: none;
}

/* =============================================
   CARD PORTRAIT FULL-BLEED
   Figma: ~260×380px, rounded 20px
   Image covers entire card
   ============================================= */
.gd-b6-card {
  position: relative;
  flex: 0 0 260px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none !important;
  display: block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  box-shadow: var(--gd-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.gd-b6-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gd-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
}

/* Full-bleed image layer */
.gd-b6-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  font-size: 0 !important;
  color: transparent !important;
  user-select: none;
}

.gd-b6-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  font-size: 0 !important;
  color: transparent !important;
}

/* ── Relleno cuando el negocio no tiene foto ───────────────────────────
   Aqui habia OCHO degradados inventados, uno por vertical: azul, rojo,
   verde, oliva, naranja, magenta... Ninguno salia del sistema de diseno.
   Como el 97% del directorio aun no tiene fotos, la portada entera era un
   mosaico de colores que no pertenecen a la marca.

   Ahora es una sola gama del azul institucional #121663. La portada queda
   sobria y deja que el color lo pongan las fotos, que es lo que se ve
   premium. Se mantienen los nombres de clase para no tocar 60 plantillas.

   Los colores por vertical (gd_color en la base) NO se usan aqui: quedan
   reservados para el diseno de las micropaginas de cada categoria.
   ------------------------------------------------------------------- */
.gd-b6-fallback-hotel,
.gd-b6-fallback-restaurant,
.gd-b6-fallback-motel,
.gd-b6-fallback-tours,
.gd-b6-fallback-rent,
.gd-b6-fallback-inmueble,
.gd-b6-fallback-professional,
.gd-b6-fallback-product,
.gd-b6-fallback-default {
  background: linear-gradient(
    160deg,
    var(--gd-primary, #121663) 0%,
    var(--gd-primary-dark, #0c0f4a) 100%
  );
}

/* =============================================
   HEART ICON (top-right, visual only)
   Figma: fa-heart-o outline, azul/blanco
   ============================================= */
.gd-b6-heart {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.gd-b6-heart:hover {
  color: var(--gd-white);
  transform: scale(1.15);
}

/* =============================================
   DARK OVERLAY (bottom gradient)
   Figma: gradient from solid dark to transparent
   Text white on top of overlay
   ============================================= */
.gd-b6-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
  padding: 3.5rem 1rem 0.85rem;
  color: var(--gd-white);
  z-index: 5;
}

.gd-b6-biz-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.gd-b6-biz-cat {
  font-size: 0.78rem;
  opacity: 0.9;
  margin-bottom: 3px;
}

.gd-b6-biz-loc {
  font-size: 0.73rem;
  opacity: 0.85;
  margin-bottom: 2px;
}

.gd-b6-biz-loc .fa {
  margin-right: 4px;
  font-size: 0.7rem;
}

.gd-b6-biz-map {
  font-size: 0.72rem;
  opacity: 0.8;
  margin-bottom: 6px;
}

.gd-b6-biz-map .fa {
  margin-right: 4px;
  font-size: 0.68rem;
}

/* =============================================
   CTA BUTTONS (pill, bottom of overlay)
   Figma: 2 botones pill — primary solid + secondary outline
   ============================================= */
.gd-b6-ctas {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.gd-b6-cta-primary,
.gd-b6-cta-secondary {
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.4;
  transition: background 0.2s ease;
}

.gd-b6-cta-primary {
  background: var(--gd-secondary, var(--gd-secondary));
  color: var(--gd-white);
}

.gd-b6-cta-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: var(--gd-white);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.gd-b6-card:hover .gd-b6-cta-primary {
  background: var(--gd-primary, var(--gd-primary));
}

.gd-b6-card:hover .gd-b6-cta-secondary {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
}

/* =============================================
   SPACING OVERRIDES (from previous B6.2-FIX)
   ============================================= */
/* =============================================
   B4 DISCOVERY CATEGORIES
   Figma: "Categorías" — horizontal icon grid
   Categorías discovery (NO duplican B6 verticals)
   Icons: FA fallback (pendiente SVGs de Figma)
   ============================================= */
.gd-b4-section {
  padding: 3rem 0 2.5rem;
  background-color: var(--gd-white);
}

.gd-b4-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gd-primary, var(--gd-primary));
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.gd-b4-grid {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.gd-b4-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  gap: 0.75rem;
  transition: transform 0.25s ease;
  cursor: pointer;
  min-width: 90px;
}

.gd-b4-item:hover {
  transform: translateY(-4px);
  text-decoration: none !important;
}

.gd-b4-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gd-white);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gd-b4-item:hover .gd-b4-icon-wrap {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: scale(1.06);
}

/* Per-category colors — aligned with brand palette */
.gd-b4-icon-nightlife {
  background: linear-gradient(145deg, #6C3483, #AF7AC5);
}

.gd-b4-icon-farmacias {
  background: linear-gradient(145deg, #1A8F5C, #2ECC71);
}

.gd-b4-icon-mecanicos {
  background: linear-gradient(145deg, #2C3E50, #5D6D7E);
}

.gd-b4-icon-tiendas {
  background: linear-gradient(145deg, #D4AC0D, #F4D03F);
}

.gd-b4-icon-belleza {
  background: linear-gradient(145deg, #C0392B, #E74C8B);
}

.gd-b4-icon-profesionales {
  background: linear-gradient(145deg, #1A5276, #2E86C1);
}

.gd-b4-icon-servicios {
  background: linear-gradient(145deg, #1B4F72, #3498DB);
}

.gd-b4-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gd-primary, var(--gd-primary));
  text-align: center;
  line-height: 1.2;
  max-width: 100px;
}

/* B5: REMOVED — consolidated into B4 (2026-05-23) */
/* B4 → B6 tight spacing: minimize gap between categories and carousels */
.gd-b4-section {
  padding-bottom: 1rem;
}

/* B6: Scroll anchor offset for sticky header */
#gd_b6_carousels {
  scroll-margin-top: 80px;
}

/* =============================================
   B8: UBICACIONES RECOMENDADAS
   Airbnb/Yelp destination discovery grid.
   2×2 desktop, 2-col tablet, stack mobile.
   Full-bleed images + dark gradient overlay.
   ============================================= */
.gd-b8-section {
  padding: 3.5rem 0 4rem;
  background: var(--gd-gray-50, var(--gd-gray-50));
}

.gd-b8-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.gd-b8-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gd-primary, var(--gd-primary));
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.gd-b8-subtitle {
  font-size: 1.05rem;
  color: var(--sth-gray-500);
  font-weight: 400;
  margin: 0;
}

.gd-b8-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.gd-b8-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  height: 280px;
  text-decoration: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.gd-b8-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.gd-b8-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.gd-b8-card:hover .gd-b8-card-img {
  transform: scale(1.06);
}

.gd-b8-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.72) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--gd-white);
  z-index: 2;
}

.gd-b8-card-info {
  margin-bottom: 0.25rem;
}

.gd-b8-card-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gd-white);
  margin: 0 0 0.25rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.gd-b8-card-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.gd-b8-card-count .fa {
  font-size: 0.8rem;
}

.gd-b8-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--gd-white);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
  width: fit-content;
  transition: all 0.25s ease;
}

.gd-b8-card:hover .gd-b8-card-cta {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(4px);
}

.gd-b8-card-cta .fa {
  font-size: 0.72rem;
  transition: transform 0.25s ease;
}

.gd-b8-card:hover .gd-b8-card-cta .fa {
  transform: translateX(3px);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 767.98px) {
  /* B3 Hero responsive */
  .gd-hero-inner {
    min-height: 480px;
  }
  .gd-hero-title {
    font-size: 2rem;
  }
  .gd-hero-subtitle {
    font-size: 1rem;
  }
  .gd-hero-cta-primary,
  .gd-hero-cta-secondary {
    padding: 11px 24px;
    font-size: 0.88rem;
  }
  /* B3 Hero Ad banner responsive */
  .gd-hero-ad-banner {
    height: 480px;
  }
  .gd-hero-ad-title {
    font-size: 1.8rem;
  }
  .gd-hero-ad-biz {
    font-size: 0.95rem;
  }
  /* Search bar responsive — tablet */
  .gd-search-section {
    margin-top: -28px;
    padding: 0 0.75rem 1.5rem;
  }
  .gd-search-bar {
    min-height: 52px;
  }
  .gd-search-location {
    min-width: 155px;
    padding: 0 1rem;
  }
  .gd-search-select {
    font-size: 0.9rem;
    padding: 12px 20px 12px 0;
  }
  .gd-search-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.05rem;
  }
  /* B4 responsive: scrollable on tablet */
  .gd-b4-grid {
    gap: 1.5rem;
  }
  .gd-b4-icon-wrap {
    width: 72px;
    height: 72px;
    font-size: 1.6rem;
  }
  .gd-b4-title {
    font-size: 1.6rem;
  }
  .gd-b4-label {
    font-size: 0.78rem;
  }
  /* B6 responsive */
  .gd-b6-card {
    flex: 0 0 220px;
    height: 320px;
  }
  .gd-b6-section-title {
    font-size: 1.35rem;
  }
  .gd-b6-section-header {
    align-items: flex-start;
  }
  .gd-b6-overlay {
    padding: 3rem 0.75rem 0.65rem;
  }
  .gd-b6-biz-name {
    font-size: 0.85rem;
  }
  .gd-b6-biz-cat,
  .gd-b6-biz-loc,
  .gd-b6-biz-map {
    font-size: 0.68rem;
  }
  .gd-b6-cta-primary,
  .gd-b6-cta-secondary {
    padding: 3px 10px;
    font-size: 0.65rem;
  }
  .gd-b6-ver-todos {
    padding: 5px 16px;
    font-size: 0.8rem;
  }
  /* B8 responsive — tablet */
  .gd-b8-section {
    padding: 2.5rem 0 3rem;
  }
  .gd-b8-title {
    font-size: 1.6rem;
  }
  .gd-b8-card {
    height: 240px;
    border-radius: 16px;
  }
  .gd-b8-card-name {
    font-size: 1.25rem;
  }
}
@media (max-width: 575.98px) {
  /* B3 Hero: reduced on mobile to prioritize search */
  .gd-hero-section {
    border-radius: 0 0 16px 16px;
  }
  .gd-hero-inner {
    min-height: 380px;
  }
  .gd-hero-title {
    font-size: 1.5rem;
  }
  .gd-hero-subtitle {
    font-size: 0.88rem;
    margin-bottom: 1rem;
  }
  .gd-hero-ctas {
    flex-direction: column;
    gap: 0.6rem;
  }
  .gd-hero-cta-primary,
  .gd-hero-cta-secondary {
    text-align: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.85rem;
  }
  /* B3 Hero Ad: mobile */
  .gd-hero-ad-banner {
    height: 380px;
  }
  .gd-hero-ad-title {
    font-size: 1.35rem;
  }
  .gd-hero-ad-badge {
    font-size: 0.6rem;
    padding: 3px 10px;
  }
  .gd-hero-ad-cta {
    padding: 8px 20px;
    font-size: 0.82rem;
  }
  .gd-hero-ad-biz {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  /* Search bar: mobile — stacked, thumb-friendly */
  .gd-search-section {
    margin-top: -20px;
    padding: 0 0.75rem 1.25rem;
  }
  .gd-search-bar {
    flex-direction: column;
    border-radius: 18px;
    padding: 12px;
    gap: 0;
    min-height: unset;
  }
  .gd-search-location {
    width: 100%;
    min-width: unset;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sth-gray-200);
    gap: 0.5rem;
  }
  .gd-search-select {
    padding: 6px 20px 6px 0;
    font-size: 0.92rem;
  }
  .gd-search-divider {
    display: none;
  }
  .gd-search-input {
    width: 100%;
    padding: 0 12px;
    min-height: 44px;
  }
  .gd-search-text {
    font-size: 0.95rem;
    padding: 8px 0;
  }
  .gd-search-btn {
    width: 100%;
    height: 46px;
    min-width: unset;
    border-radius: 12px;
    font-size: 1rem;
    margin-top: 8px;
  }
  .gd-search-btn-label {
    display: inline;
  }
  /* B4: horizontal scroll on small screens */
  .gd-b4-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1.25rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .gd-b4-grid::-webkit-scrollbar {
    display: none;
  }
  .gd-b4-icon-wrap {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
  }
  .gd-b4-title {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
  }
  /* B6 */
  .gd-b6-card {
    flex: 0 0 200px;
    height: 290px;
  }
  .gd-b6-section-nav {
    display: none; /* Hide nav arrows on very small screens */
  }
  /* B8 responsive — mobile */
  .gd-b8-section {
    padding: 2rem 0 2.5rem;
  }
  .gd-b8-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .gd-b8-card {
    height: 220px;
    border-radius: 14px;
  }
  .gd-b8-title {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }
  .gd-b8-subtitle {
    font-size: 0.92rem;
  }
  .gd-b8-header {
    margin-bottom: 1.5rem;
  }
  .gd-b8-card-name {
    font-size: 1.2rem;
  }
  .gd-b8-card-overlay {
    padding: 1.25rem;
  }
}
/* =============================================
   CS-B: COMMERCE SHOWCASE CARDS (B6)
   ============================================= */
.gd-commerce-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 380px !important;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.gd-commerce-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  height: 100%;
  width: 100%;
}

.gd-commerce-track::-webkit-scrollbar {
  display: none;
}

.gd-commerce-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Fallback demo styles to visually differentiate items without images */
.gd-slide-bg-0 {
  filter: hue-rotate(0deg);
}

.gd-slide-bg-1 {
  filter: hue-rotate(90deg) saturate(1.2);
}

.gd-slide-bg-2 {
  filter: hue-rotate(-90deg) brightness(0.85);
}

.gd-commerce-header {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gd-commerce-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gd-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.gd-commerce-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gd-commerce-avatar i {
  color: var(--gd-primary, var(--gd-primary));
  font-size: 1rem;
}

.gd-commerce-brand {
  flex: 1;
  color: var(--gd-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.gd-commerce-biz-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-commerce-biz-city {
  font-size: 0.75rem;
  opacity: 0.9;
}

.gd-commerce-heart {
  color: var(--gd-white);
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform 0.2s;
}

.gd-commerce-heart:hover {
  transform: scale(1.1);
}

.gd-commerce-overlay {
  z-index: 15;
  pointer-events: auto;
  padding-bottom: 1.2rem;
}

.gd-commerce-item-name {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--gd-white);
}

.gd-commerce-ctas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.gd-com-prev, .gd-com-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--gd-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  z-index: 20;
  opacity: 0;
  pointer-events: none; /* Only clickable when visible */
}

.gd-com-prev {
  left: 8px;
}

.gd-com-next {
  right: 8px;
}

.gd-com-prev:hover, .gd-com-next:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--gd-primary, var(--gd-primary));
  border-color: var(--gd-white);
}

/* Show arrows on card hover */
.gd-commerce-card:hover .gd-com-prev,
.gd-commerce-card:hover .gd-com-next {
  opacity: 1;
  pointer-events: auto;
}

.gd-com-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 20;
}

.gd-com-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gd-com-dot.active {
  background: var(--gd-white);
  transform: scale(1.2);
}

/* ============================================================
   ADS-B: SPONSORED BADGE — gd-sponsored-badge
   Discrete glassmorphism pill. Positioned top-right of card.
   Works on: gd-commerce-card (showcase) and gd-b6-card (standard).
   ============================================================ */
.gd-sponsored-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease;
}

.gd-sponsored-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

/* On standard cards (no glass background) — use a subtle dark tinted badge */
.gd-b6-card:not(.gd-commerce-card) .gd-sponsored-badge {
  background: rgba(18, 22, 99, 0.72);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

/* Responsive: slightly smaller on mobile */
@media (max-width: 480px) {
  .gd-sponsored-badge {
    font-size: 0.55rem;
    padding: 2px 8px 2px 6px;
    top: 8px;
    right: 8px;
  }
}
/* =============================================
   B7: OFERTAS ACTIVAS AHORA
   Sistema de ofertas de hora baja / low-demand promotions.
   Cross-partner horizontal scroll strip.
   Accent: $b7-orange (fire orange) → matches the 🔥 concept.
   Cards: 240×320px, full image, badge overlay, price unit.
   ============================================= */
.gd-b7-section {
  padding: 2.5rem 0 3rem;
  background: linear-gradient(180deg, var(--gd-white) 0%, rgb(255, 248, 244) 100%);
  border-top: 1px solid rgba(255, 107, 53, 0.1);
}

.gd-b7-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}

.gd-b7-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gd-b7-fire {
  font-size: 1.8rem;
  line-height: 1;
  animation: gd-b7-flicker 2.5s ease-in-out infinite;
}

@keyframes gd-b7-flicker {
  0%, 100% {
    transform: scale(1) rotate(-3deg);
  }
  30% {
    transform: scale(1.1) rotate(3deg);
  }
  60% {
    transform: scale(0.95) rotate(-2deg);
  }
}
.gd-b7-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--gd-primary, var(--gd-primary));
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.gd-b7-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  color: var(--sth-gray-500);
  margin: 0;
}

/* ── Track: horizontal scrollable row ── */
.gd-b7-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 1.25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gd-b7-track::-webkit-scrollbar {
  display: none;
}

/* ── Card ── */
.gd-b7-card {
  flex: 0 0 220px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(18, 22, 99, 0.08);
  text-decoration: none !important;
  background: var(--gd-white);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
}
.gd-b7-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(255, 107, 53, 0.2);
  text-decoration: none !important;
}

.gd-b7-card-img-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(255, 243, 236), #FFE0CC);
  flex-shrink: 0;
}

.gd-b7-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gd-b7-card:hover .gd-b7-card-img {
  transform: scale(1.06);
}

.gd-b7-card-img-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B35;
  opacity: 0.4;
}

/* ── Offer badge — pulsing ── */
.gd-b7-offer-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: linear-gradient(135deg, #FF6B35, #FF4757);
  color: var(--gd-white);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 50rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  animation: gd-b7-badge-pulse 2s ease-in-out infinite;
}

@keyframes gd-b7-badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  }
  50% {
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.65);
  }
}
/* ── Card body ── */
.gd-b7-card-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.gd-b7-biz-name {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sth-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-b7-item-name {
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gd-primary, var(--gd-primary));
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gd-b7-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.gd-b7-price {
  font-family: "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FF6B35;
}

.gd-b7-price-unit {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  color: var(--sth-gray-500);
}

.gd-b7-cta {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FF6B35;
  margin-top: 0.35rem;
  transition: gap 0.2s ease;
}
.gd-b7-card:hover .gd-b7-cta {
  color: #E05527;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .gd-b7-title {
    font-size: 1.6rem;
  }
  .gd-b7-card {
    flex: 0 0 195px;
  }
  .gd-b7-card-img-wrap {
    height: 140px;
  }
}
@media (max-width: 575.98px) {
  .gd-b7-section {
    padding: 2rem 0 2.5rem;
  }
  .gd-b7-title {
    font-size: 1.35rem;
  }
  .gd-b7-card {
    flex: 0 0 175px;
  }
  .gd-b7-card-img-wrap {
    height: 120px;
  }
  .gd-b7-item-name {
    font-size: 0.82rem;
  }
  .gd-b7-price {
    font-size: 1rem;
  }
}
/* =============================================
   MOTOR DE ATRIBUTOS: Chips en Commerce Cards
   ============================================= */
.gd-commerce-attr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}

.gd-commerce-attr-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Reset button styles para que .gd-catalog-cta en button se vea igual que el CTA normal */
button.gd-b6-cta-primary {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

button.gd-b6-cta-primary:hover {
  opacity: 0.9;
}

/*# sourceMappingURL=gd_homepage.css.map */

/* Lista de platos dentro de la tarjeta de restaurante.
   Sustituye al carrusel de Swiper anidado que nadie inicializaba. Se limita a
   tres lineas y recorta con puntos suspensivos para que la tarjeta no crezca
   por dentro y rompa la altura fija de 380px del carril. */
.gd-b6-platos {
  list-style: none;
  margin: .25rem 0 .35rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gd-b6-platos li {
  font-size: .78rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════
   CABECERA DE SECCION  (segun el diseño de Figma)
   ═══════════════════════════════════════════════════════════════════════
   .gd-b6-header, .gd-b6-title y .gd-b6-header-left no tenian NINGUNA regla:
   el titulo, el boton y las flechas caian juntos a la derecha en flujo
   normal. Por eso la portada se veia tan distinta al diseño aunque el
   contenido fuese el mismo.

   El diseño coloca el titulo arriba a la izquierda, el boton "Ver todos"
   DEBAJO del titulo, y las flechas al extremo derecho.
   ═══════════════════════════════════════════════════════════════════════ */
.gd-b6-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.gd-b6-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.gd-b6-title {
  margin: 0;
  font-family: var(--gd-font-display, var(--gd-font));
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--gd-primary);
  letter-spacing: -.01em;
}

/* Las flechas se alinean con el titulo, no con el boton. */
.gd-b6-nav {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  margin-top: .35rem;
}

@media (max-width: 640px) {
  .gd-b6-header { gap: .75rem; }
  .gd-b6-nav    { margin-top: 0; }
}

/* Precio del producto en la tarjeta del escaparate. */
.gd-b6-precio {
  margin-top: 4px;
  font-weight: 700;
  font-size: .9rem;
  color: #ffffff;
}

/* Distintivo de hueco pagado.
   Va arriba a la izquierda para no chocar con el corazon, que ocupa la
   derecha. Al visitante se le dice que es publicidad: mezclar lo pagado con
   lo organico sin avisar engaña y a la larga quema el sitio. */
.gd-b6-sponsored {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  color: var(--gd-primary);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(18, 22, 99, .18);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — texto sobre la diapositiva
   ═══════════════════════════════════════════════════════════════════════
   El payload traia titulo, subtitulo y boton en cada diapositiva y la
   plantilla los tiraba. Como ademas los banners de reserva dan 404, la
   franja salia completamente vacia: ni imagen ni mensaje.

   El fondo de marca va en el propio contenedor para que, aunque no cargue
   ninguna imagen, el hero siga siendo legible y siga trabajando: mientras
   no haya publicidad vendida, el sitio se anuncia a si mismo.
   ═══════════════════════════════════════════════════════════════════════ */
.gd-hero-ad-banner {
  position: relative;
  background: linear-gradient(135deg, var(--gd-primary) 0%, var(--gd-primary-dark, #0a0d40) 100%);
}

.gd-hero-ad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gd-hero-texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
  padding: 1.5rem;
  /* Velo oscuro: el texto tiene que leerse tambien sobre una foto clara. */
  background: linear-gradient(180deg, rgba(10,13,64,.35) 0%, rgba(10,13,64,.55) 100%);
}

.gd-hero-titulo {
  margin: 0;
  font-family: var(--gd-font-display, var(--gd-font));
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.gd-hero-sub {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

.gd-hero-cta {
  margin-top: .35rem;
  display: inline-block;
  background: #fff;
  color: var(--gd-primary);
  font-weight: 800;
  font-size: .95rem;
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

@media (max-width: 640px) {
  .gd-hero-texto { gap: .5rem; padding: 1rem; }
  .gd-hero-cta   { padding: 10px 22px; font-size: .88rem; }
}