/* ============================================================================
   🧭 BAQUEANO ECOSYSTEM — TRES PILARES CENTRALES (tres-pilares.css)
   ============================================================================

   🎯 1. POR QUÉ (WHY / PROPÓSITO):
   - Implementar la identidad diferenciadora de BAQUEANO frente a cualquier
     plataforma turística: no vendemos inventario, vendemos descubrimiento,
     conexión, territorio y experiencia nicaragüense.
   - Tres pilares conceptuales convertidos en funcionalidad técnica real:
     PILAR 1 — "¿Qué querés vivir?" (búsqueda por experiencia emocional)
     PILAR 2 — "Lo que no sale en el mapa" (toggle hidden_gem real)
     PILAR 3 — BAQUEANO Digital como guía territorial (evolución de Baqüi)

   ⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
   - Paleta BAQUEANO: #165D6F, #F65E01, #F4E6C1, #0F172A.
   - Componentes CSS modulares que se superponen a index-exact.css sin borrar nada.
   - Microinteracciones a 60fps, glassmorphism, animaciones orgánicas.
   - Responsivo total: Mobile-first → Tablet → Desktop.
   - Respeta prefers-reduced-motion.

   📦 3. QUÉ (WHAT / COMPONENTES EXPUESTOS):
   - .vivir-selector — Selector experiencial "¿Qué querés vivir?"
   - .hidden-gem-toggle — Toggle global "Lo que no sale en el mapa"
   - .baqui-guide-card — Card evolucionada de BAQUEANO Digital como guía real
   - .pillar-experience-grid — Grid de experiencias emocionales
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════════
   PILAR 1 — "¿QUÉ QUERÉS VIVIR?"
   Reemplaza el paradigma de búsqueda por destino con un selector experiencial
   que invita a la emoción antes que a la ubicación.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Contenedor principal del selector experiencial --- */
.vivir-selector {
  position: relative;
  padding: 3.5rem 0 2rem;
  overflow: hidden;
}

/* Fondo con textura sutil evocando papel artesanal nicaragüense */
.vivir-selector::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(22, 93, 111, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 20%, rgba(246, 94, 1, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* --- Cabecera editorial --- */
.vivir-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.vivir-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F65E01;
  margin-bottom: 0.75rem;
}

.vivir-eyebrow i {
  font-size: 0.85rem;
}

.vivir-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: #0F172A;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.vivir-title-accent {
  color: #165D6F;
  position: relative;
}

/* Subrayado orgánico en pincelada bajo "vivir" */
.vivir-title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 6px;
  background: #F65E01;
  border-radius: 3px;
  transform: skewX(-8deg);
  opacity: 0.8;
}

.vivir-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: #475569;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Grid de experiencias emocionales --- */
.vivir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* Cada opción emocional */
.vivir-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(22, 93, 111, 0.1);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.vivir-option::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.08), rgba(22, 93, 111, 0.06));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.vivir-option:hover::before,
.vivir-option:focus-visible::before {
  opacity: 1;
}

.vivir-option:hover,
.vivir-option:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(246, 94, 1, 0.35);
  box-shadow:
    0 8px 24px rgba(22, 93, 111, 0.12),
    0 2px 8px rgba(246, 94, 1, 0.08);
}

.vivir-option.is-active {
  background: linear-gradient(135deg, #165D6F, #0D6E77);
  border-color: #165D6F;
  color: #fff;
  box-shadow:
    0 8px 28px rgba(22, 93, 111, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.vivir-option.is-active .vivir-option-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #F4E6C1;
}

.vivir-option.is-active .vivir-option-label {
  color: #fff;
}

/* Icono emocional circular */
.vivir-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: linear-gradient(135deg, rgba(22, 93, 111, 0.1), rgba(22, 93, 111, 0.05));
  color: #165D6F;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.vivir-option:hover .vivir-option-icon {
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.15), rgba(246, 94, 1, 0.08));
  color: #F65E01;
  transform: scale(1.1);
}

/* Etiqueta de la experiencia */
.vivir-option-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: #0F172A;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PILAR 2 — "LO QUE NO SALE EN EL MAPA" (TOGGLE FUNCIONAL)
   Convierte el eslogan de BAQUEANO en un interruptor real que activa un modo
   de descubrimiento diferente: comunidades, patrimonio oculto, emprendimientos
   y destinos que no aparecen en guías convencionales.
   ═══════════════════════════════════════════════════════════════════════════════ */

.hidden-gem-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  margin: 0 auto 2rem;
  max-width: 720px;
  border-radius: 60px;
  background: linear-gradient(135deg, #0F172A 0%, #1a2e44 100%);
  border: 1px solid rgba(246, 94, 1, 0.25);
  box-shadow:
    0 4px 20px rgba(15, 23, 42, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Destello sutil animado en el borde */
.hidden-gem-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F65E01, #F4E6C1, transparent);
  animation: gem-shine 4s ease-in-out infinite;
}

@keyframes gem-shine {
  0%, 100% { left: -100%; opacity: 0; }
  50% { left: 100%; opacity: 1; }
}

.hidden-gem-icon {
  font-size: 1.35rem;
  color: #F65E01;
  flex-shrink: 0;
  animation: gem-pulse 3s ease-in-out infinite;
}

@keyframes gem-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(246, 94, 1, 0.3)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(246, 94, 1, 0.6)); }
}

.hidden-gem-text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #F4E6C1;
  letter-spacing: 0.01em;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.hidden-gem-text em {
  font-style: normal;
  color: #F65E01;
  font-weight: 700;
}

/* --- Toggle Switch personalizado --- */
.hidden-gem-switch {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.hidden-gem-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.hidden-gem-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hidden-gem-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: #94A3B8;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hidden-gem-switch input:checked + .hidden-gem-slider {
  background: linear-gradient(135deg, #F65E01, #E54D00);
  border-color: rgba(246, 94, 1, 0.6);
  box-shadow: 0 0 16px rgba(246, 94, 1, 0.35);
}

.hidden-gem-switch input:checked + .hidden-gem-slider::before {
  transform: translateX(24px);
  background: #fff;
  box-shadow:
    0 2px 8px rgba(246, 94, 1, 0.4),
    0 0 0 2px rgba(246, 94, 1, 0.15);
}

.hidden-gem-switch input:focus-visible + .hidden-gem-slider {
  outline: 3px solid #F65E01;
  outline-offset: 3px;
}

/* Estado activo del modo hidden_gem en toda la barra */
.hidden-gem-bar.is-active {
  background: linear-gradient(135deg, #1a0f05 0%, #2a1a0a 100%);
  border-color: rgba(246, 94, 1, 0.5);
  box-shadow:
    0 4px 24px rgba(246, 94, 1, 0.2),
    0 0 40px rgba(246, 94, 1, 0.08),
    inset 0 1px 0 rgba(246, 94, 1, 0.1);
}

.hidden-gem-bar.is-active .hidden-gem-text {
  color: #fff;
}

/* Contador de hidden gems descubiertos */
.hidden-gem-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(246, 94, 1, 0.2);
  color: #F65E01;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  margin-left: 6px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hidden-gem-bar.is-active .hidden-gem-count {
  opacity: 1;
  transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PILAR 3 — BAQUEANO DIGITAL COMO GUÍA TERRITORIAL REAL
   Evolución visual de la card de Baqüi para reflejar un guía completo:
   qué conocer, cómo llegar, cuánto gastar, quién te recibe, la historia,
   dónde comer, dónde dormir, qué está cerca y cómo construir tu viaje.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Mejora de la card existente sin destruir .ai-card-exact */
.ai-card-exact.baqui-guide-evolved {
  background: linear-gradient(145deg, #0a1e2e 0%, #0d2b3f 40%, #0f3347 100%);
  border: 1px solid rgba(22, 93, 111, 0.35);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* Patrón topográfico sutil en fondo (evocando mapa de relieve) */
.ai-card-exact.baqui-guide-evolved::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(22, 93, 111, 0.04) 20px,
      rgba(22, 93, 111, 0.04) 21px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(22, 93, 111, 0.03) 20px,
      rgba(22, 93, 111, 0.03) 21px
    );
  pointer-events: none;
  opacity: 0.5;
}

/* Subtítulo de capacidades del guía */
.baqui-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.baqui-cap-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(22, 93, 111, 0.2);
  border: 1px solid rgba(22, 93, 111, 0.25);
  color: rgba(244, 230, 193, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
}

.baqui-cap-tag i {
  font-size: 0.65rem;
  color: #F65E01;
}

.baqui-cap-tag:hover {
  background: rgba(246, 94, 1, 0.15);
  border-color: rgba(246, 94, 1, 0.3);
  color: #F4E6C1;
}

/* Indicador de estado "guía activo" */
.baqui-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.baqui-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4A7A5A;
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(16, 185, 129, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 8px rgba(16, 185, 129, 0.7); }
}

.baqui-status-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #4A7A5A;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Área de prompt contextual del guía */
.baqui-prompt-area {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(22, 93, 111, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.baqui-prompt-area:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(246, 94, 1, 0.3);
}

.baqui-prompt-placeholder {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(244, 230, 193, 0.5);
  font-style: italic;
}

.baqui-prompt-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #F65E01, #E54D00);
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.baqui-prompt-send:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(246, 94, 1, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Adaptar los tres pilares a todos los viewports
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .vivir-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    max-width: 700px;
  }

  .vivir-option {
    padding: 16px 10px 14px;
  }

  .vivir-option-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .hidden-gem-bar {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 14px 20px;
    gap: 12px;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .vivir-selector {
    padding: 2.5rem 0 1.5rem;
  }

  .vivir-header {
    margin-bottom: 1.5rem;
  }

  .vivir-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 8px;
  }

  .vivir-option {
    padding: 14px 8px 12px;
    border-radius: 12px;
  }

  .vivir-option-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .vivir-option-label {
    font-size: 0.7rem;
  }

  .hidden-gem-bar {
    margin: 0 12px 1.5rem;
    border-radius: 16px;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hidden-gem-text {
    font-size: 0.8rem;
    flex-basis: calc(100% - 80px);
  }

  .baqui-capabilities {
    gap: 4px;
  }

  .baqui-cap-tag {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}

/* Mobile compacto (≤ 480px) */
@media (max-width: 480px) {
  .vivir-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .vivir-option {
    padding: 12px 6px 10px;
    gap: 6px;
  }

  .vivir-option-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .vivir-option-label {
    font-size: 0.65rem;
  }

  .hidden-gem-bar {
    padding: 10px 14px;
  }

  .hidden-gem-icon {
    font-size: 1.1rem;
  }

  .hidden-gem-text {
    font-size: 0.75rem;
  }
}

/* Respeto de preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .hidden-gem-bar::before,
  .hidden-gem-icon,
  .baqui-status-dot {
    animation: none !important;
  }

  .vivir-option,
  .vivir-option-icon,
  .hidden-gem-slider::before,
  .baqui-prompt-send {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
 * POSTALES DE NICARAGUA — "¿Qué querés vivir?" (2026-10-03)
 * ----------------------------------------------------------------------------
 * 🎯 POR QUÉ: la grilla de íconos sobre tarjetas blancas era lo más genérico
 *   de la portada y es lo primero que el viajero elige. Un turista decide con
 *   imágenes: cada deseo se muestra con el lugar real que lo cumple.
 * ⚙️ CÓMO: se superpone a las reglas anteriores (no se borran). Foto por
 *   data-vivencia (WebP 4:5, 16–67 KB en assets/images/vivir/), marco de papel
 *   e inclinación alterna de postal que se endereza al pasar/enfocar.
 *   tres-pilares.js solo alterna .is-active: lógica intacta.
 *   Grilla 5×2 (≥600 px) y 2×5 (celular): las 10 opciones llenan filas
 *   completas, sin huérfanas.
 * 📦 QUÉ: postal con deseo (título), lugar · departamento (pie), ícono de
 *   sello y estado elegido visible (anillo naranja + "Elegido").
 * ========================================================================== */
.vivir-selector .vivir-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  max-width: 1180px;
  padding: 8px 12px 4px;
}

.vivir-grid .vivir-option {
  --postal-tilt: -1.4deg;
  --postal-photo: none;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  padding: clamp(10px, 1.2vw, 16px);
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(to top, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.55) 34%, rgba(15, 23, 42, 0) 62%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0) 22%),
    var(--postal-photo) center / cover no-repeat,
    #165D6F;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Marco de papel de postal impresa */
  box-shadow:
    0 0 0 5px #F7F3EA,
    0 0 0 6px rgba(15, 23, 42, 0.10),
    0 18px 32px -16px rgba(15, 23, 42, 0.45);
  color: #FFFFFF;
  text-align: left;
  transform: rotate(var(--postal-tilt));
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vivir-grid .vivir-option:nth-child(even) { --postal-tilt: 1.2deg; }
.vivir-grid .vivir-option:nth-child(3n) { --postal-tilt: -0.6deg; }
.vivir-grid .vivir-option::before { display: none; }

.vivir-grid .vivir-option[data-vivencia="aventura"]       { --postal-photo: url("../../assets/images/vivir/aventura.webp"); }
.vivir-grid .vivir-option[data-vivencia="naturaleza"]     { --postal-photo: url("../../assets/images/vivir/naturaleza.webp"); }
.vivir-grid .vivir-option[data-vivencia="cultura"]        { --postal-photo: url("../../assets/images/vivir/cultura.webp"); }
.vivir-grid .vivir-option[data-vivencia="descanso"]       { --postal-photo: url("../../assets/images/vivir/descanso.webp"); }
.vivir-grid .vivir-option[data-vivencia="historia"]       { --postal-photo: url("../../assets/images/vivir/historia.webp"); }
.vivir-grid .vivir-option[data-vivencia="gastronomia"]    { --postal-photo: url("../../assets/images/vivir/gastronomia.webp"); }
.vivir-grid .vivir-option[data-vivencia="comunidades"]    { --postal-photo: url("../../assets/images/vivir/comunidades.webp"); }
.vivir-grid .vivir-option[data-vivencia="romance"]        { --postal-photo: url("../../assets/images/vivir/romance.webp"); }
.vivir-grid .vivir-option[data-vivencia="familia"]        { --postal-photo: url("../../assets/images/vivir/familia.webp"); }
.vivir-grid .vivir-option[data-vivencia="algo-diferente"] { --postal-photo: url("../../assets/images/vivir/algo-diferente.webp"); }

/* Ícono como sello de correo, arriba a la derecha */
.vivir-grid .vivir-option .vivir-option-icon {
  position: absolute;
  top: clamp(8px, 1vw, 12px);
  right: clamp(8px, 1vw, 12px);
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.42);
  border: 1.5px dashed rgba(244, 230, 193, 0.75);
  color: #F4E6C1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.vivir-grid .vivir-option .vivir-option-label {
  font-family: var(--baqueano-font-display, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: clamp(1rem, 0.85rem + 0.55vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.55);
}
.vivir-grid .vivir-option .vivir-option-place {
  font-family: var(--baqueano-font-text, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: #F4E6C1;
}
.vivir-grid .vivir-option .vivir-option-place::before {
  content: "\f3c5"; /* fa-location-dot */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif;
  font-weight: 900;
  margin-right: 0.35em;
  color: #FF8A3D;
}

/* Pasar / enfocar: la postal se endereza, se acerca y la foto respira */
.vivir-grid .vivir-option:is(:hover, :focus-visible) {
  transform: rotate(0deg) translateY(-6px);
  background-size: auto, auto, 112%, auto;
  box-shadow:
    0 0 0 5px #F7F3EA,
    0 0 0 6px rgba(246, 94, 1, 0.45),
    0 28px 44px -18px rgba(15, 23, 42, 0.55);
}
.vivir-grid .vivir-option:focus-visible { outline: 3px solid #F65E01; outline-offset: 8px; }

/* Elegida: marco naranja y cinta "Elegido" */
.vivir-grid .vivir-option.is-active {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 0 0 5px #F65E01,
    0 0 0 7px #F7F3EA,
    0 26px 44px -16px rgba(197, 75, 1, 0.55);
  border: 0;
}
.vivir-grid .vivir-option.is-active::after {
  content: "Elegido";
  position: absolute;
  top: clamp(10px, 1.2vw, 14px);
  left: clamp(10px, 1.2vw, 14px);
  padding: 4px 10px;
  border-radius: 999px;
  background: #C54B01;
  color: #FFFFFF;
  font: 700 0.68rem/1.2 var(--baqueano-font-display, 'Montserrat', sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vivir-grid .vivir-option.is-active .vivir-option-icon {
  background: #F65E01;
  border-style: solid;
  border-color: #F7F3EA;
  color: #FFFFFF;
}

@media (max-width: 599px) {
  .vivir-selector .vivir-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    padding-inline: 8px;
  }
  .vivir-grid .vivir-option { aspect-ratio: 4 / 4.6; }
}

@media (prefers-reduced-motion: reduce) {
  .vivir-grid .vivir-option,
  .vivir-grid .vivir-option:is(:hover, :focus-visible),
  .vivir-grid .vivir-option.is-active {
    transition: none;
  }
}