/*
Theme Name: Astra Child - Vivelo Apartamentos
Theme URI: https://viveloapartamentos.com/
Description: Child theme premium para Vivelo Apartamentos por ROCA Marketing Digital. Optimizado para UX/UI, Core Web Vitals y conversion de reservas directas.
Author: ROCA Marketing Digital
Author URI: https://rocamarketingdigital.com/
Version: 1.0.3
*/

/* ==========================================================================
   1. DESIGN TOKENS (UI/UX PRO MAX)
   ========================================================================== */
:root {
  /* Marca Vivelo Apartamentos */
  --vivelo-gold: #D2BB9B;
  --vivelo-gold-hover: #c4a984;
  --vivelo-gold-light: rgba(210, 187, 155, 0.16);
  --vivelo-gold-glow: rgba(210, 187, 155, 0.35);

  --vivelo-navy: #11202A;
  --vivelo-navy-light: #1D394B;
  --vivelo-sage: #8B9B9B;

  --vivelo-bg: #F8F9FA;
  --vivelo-surface: #FFFFFF;
  --vivelo-border: #E8ECEF;
  --vivelo-border-focus: #D2BB9B;

  --vivelo-text-main: #11202A;
  --vivelo-text-muted: #64748B;
  --vivelo-text-disabled: #CBD5E1;

  /* Estados de Calendario */
  --cal-available-bg: #FFFFFF;
  --cal-available-text: #11202A;
  --cal-booked-bg: #F1F5F9;
  --cal-booked-text: #94A3B8;
  --cal-selected-bg: #D2BB9B;
  --cal-selected-text: #11202A;
  --cal-range-bg: rgba(210, 187, 155, 0.24);

  /* Sombras y Radios */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 6px rgba(17, 32, 42, 0.04);
  --shadow-card: 0 12px 32px -8px rgba(17, 32, 42, 0.08);
  --shadow-dropdown: 0 20px 45px -12px rgba(17, 32, 42, 0.18);
  --transition-smooth: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  /* Tipografia */
  --font-family-vivelo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Prevenir overflow horizontal en toda la web */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body {
  font-family: var(--font-family-vivelo);
  color: var(--vivelo-text-main);
  background-color: var(--vivelo-bg);
}

/* ==========================================================================
   2. REGLAS BASE DE NAVEGACION
   ========================================================================== */
@media (min-width: 922px) {
  .main-navigation .sub-menu {
    background-color: var(--vivelo-navy) !important;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
  }
}

@media (max-width: 921px) {
  .ast-mobile-popup-content .sub-menu {
    background-color: #ffffff !important;
  }
  .ast-mobile-popup-content .sub-menu a {
    color: var(--vivelo-navy) !important;
  }
}

/* ==========================================================================
   3. CONTENEDORES Y GRIDS EN FICHAS DE APARTAMENTOS (DESKTOP & RESPONSIVE)
   ========================================================================== */
.wp-block-uagb-container.uagb-layout-grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container > .uagb-container-inner-blocks-wrap {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3.1. REDISEÑO DEL CALENDARIO MOTOPRESS (AIRBNB STYLE & MOBILE FIRST)
   ========================================================================== */
.mphb_sc_availability_calendar-wrapper,
.mphb_sc_booking_form-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mphb-calendar.mphb-datepick,
.datepick-popup .datepick,
.mphb_sc_availability_calendar-wrapper .mphb-calendar {
  background: var(--vivelo-surface) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.25rem !important;
  font-family: var(--font-family-vivelo) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Forzar ancho completo del contenedor jQuery Datepick (Previene colapso inline a 205px) */
.datepick,
.datepick-months,
.datepick-month,
.datepick-month-row {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Barra superior de navegación y mes (Eliminar barra gris tosca de Slate Blue) */
.mphb-calendar .mphb-datepicker-slate-blue .datepick-nav,
.datepick-popup .mphb-datepicker-slate-blue .datepick-nav,
.datepick-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 1.25rem !important;
  position: relative !important;
  padding: 0.25rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

.datepick-nav a {
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Botones Anterior y Siguiente (Circulares, Alto Contraste y Siempre Visibles) */
.datepick-nav .datepick-cmd-prev,
.datepick-nav .datepick-cmd-next,
.datepick-cmd-prev,
.datepick-cmd-next {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: var(--vivelo-navy) !important; /* Azul oscuro solido: 100% visible */
  color: #ffffff !important;
  border: 2px solid var(--vivelo-navy) !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  transition: var(--transition-smooth) !important;
  position: relative !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 12px rgba(17, 32, 42, 0.25) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.datepick-nav .datepick-cmd-prev:hover,
.datepick-nav .datepick-cmd-next:hover,
.datepick-cmd-prev:hover,
.datepick-cmd-next:hover {
  background-color: var(--vivelo-gold) !important;
  border-color: var(--vivelo-gold) !important;
  color: var(--vivelo-navy) !important;
  transform: scale(1.08) !important;
}

.datepick-nav .datepick-cmd-prev::after,
.datepick-cmd-prev::after {
  content: "‹" !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: block !important;
  position: absolute !important;
  top: 46% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
}

.datepick-nav .datepick-cmd-next::after,
.datepick-cmd-next::after {
  content: "›" !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: block !important;
  position: absolute !important;
  top: 46% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
}

.datepick-nav .datepick-cmd-prev:hover::after,
.datepick-nav .datepick-cmd-next:hover::after,
.datepick-cmd-prev:hover::after,
.datepick-cmd-next:hover::after {
  color: var(--vivelo-navy) !important;
}

.datepick-cmd-today {
  display: none !important;
}

/* Filtros de Mes y Año en el Header (Alineados en una sola fila sin saltos) */
.datepick-month-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--vivelo-navy) !important;
  text-align: center !important;
}

/* Estilo mejorado para selects de mes y año */
.datepick-month-header select {
  font-family: var(--font-family-vivelo) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--vivelo-navy) !important;
  background-color: var(--vivelo-bg) !important;
  border: 1.5px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.4rem 0.8rem !important;
  min-height: 42px !important;
  height: 42px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  flex: 0 1 auto !important;
}

.datepick-month-header select:hover,
.datepick-month-header select:focus {
  border-color: var(--vivelo-gold) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px var(--vivelo-gold-light) !important;
}

/* Popup datepicker para inputs de Check-in y Check-out */
.datepick-popup {
  z-index: 9999 !important;
}

.datepick-popup .datepick {
  background: #ffffff !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: 1.25rem !important;
  border: 1px solid var(--vivelo-border) !important;
  box-sizing: border-box !important;
}

@media (min-width: 641px) {
  .datepick-popup .datepick-month-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
  }
  .datepick-popup .datepick-month {
    flex: 1 1 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .datepick-popup .datepick-month {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

.datepick-month table {
  width: 100% !important;
  table-layout: fixed !important; /* Distribuye exactamente las 7 columnas al 100% */
  border-collapse: separate !important;
  border-spacing: 2px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Encabezados Días de la Semana (Mo, Tu, We...) */
.datepick-month th {
  color: var(--vivelo-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.5rem 0 !important;
  text-align: center !important;
  border: none !important;
  width: 14.28% !important; /* 7 columnas exactas */
}

/* Celdas del Calendario */
.datepick-month td {
  padding: 2px !important;
  border: none !important;
  text-align: center !important;
  vertical-align: middle !important;
  height: 46px !important;
  box-sizing: border-box !important;
}

/* Contenido dentro de la celda */
.datepick-month td a,
.datepick-month td span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 42px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--cal-available-text) !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Precios por noche en la celda */
.mphb-calendar .mphb-price {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--vivelo-text-muted) !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

/* Estado: Día Disponible */
.datepick-month td.mphb-available-date a {
  background-color: var(--cal-available-bg) !important;
  color: var(--cal-available-text) !important;
  border: 1px solid var(--vivelo-border) !important;
}

.datepick-month td.mphb-available-date a:hover {
  background-color: var(--vivelo-gold-light) !important;
  border-color: var(--vivelo-gold) !important;
  color: var(--vivelo-navy) !important;
  transform: translateY(-1px);
}

/* Estado: Días Seleccionados (Check-in / Check-out) */
.datepick-month td.datepick-selected a,
.datepick-month td.mphb-check-in-date a,
.datepick-month td.mphb-check-out-date a {
  background: var(--vivelo-gold) !important;
  color: var(--vivelo-navy) !important;
  border: 1px solid var(--vivelo-gold-hover) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px var(--vivelo-gold-glow) !important;
}

.datepick-month td.datepick-selected a .mphb-price,
.datepick-month td.mphb-check-in-date a .mphb-price,
.datepick-month td.mphb-check-out-date a .mphb-price {
  color: var(--vivelo-navy) !important;
  font-weight: 700 !important;
}

/* Estado: Rango de Fechas Intermedio */
.datepick-month td.mphb-date-in-range a,
.datepick-month td.datepick-highlight a {
  background-color: var(--cal-range-bg) !important;
  color: var(--vivelo-navy) !important;
  border-radius: 0 !important;
}

/* Estado: Días Ocupados / Bloqueados por Airbnb */
.datepick-month td.mphb-booked-date span,
.datepick-month td.mphb-not-stay-in-date span,
.datepick-month td.datepick-unselectable span {
  background-color: var(--cal-booked-bg) !important;
  color: var(--cal-booked-text) !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  border: 1px dashed var(--vivelo-border) !important;
}

/* Estado: Días Pasados */
.datepick-month td.mphb-past-date span {
  color: var(--vivelo-text-disabled) !important;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  border: none !important;
}

/* Ocultar recuadro tosco superior de fechas */
.mphb-calendar__selected-dates {
  display: none !important;
}

/* ==========================================================================
   4. AJUSTES ESPECÍFICOS PARA MÓVILES (FIX OVERFLOW Y ESPACIO EN BLANCO)
   ========================================================================== */
@media (max-width: 768px) {
  .mphb-calendar.mphb-datepick,
  .datepick-popup .datepick,
  .mphb_sc_availability_calendar-wrapper .mphb-calendar {
    padding: 0.85rem 0.4rem !important; /* Menor padding lateral para no desbordar */
    border-radius: var(--radius-sm) !important;
  }

  .datepick-month table {
    border-spacing: 1px !important;
  }

  .datepick-month td {
    height: 42px !important;
    padding: 1px !important;
  }

  .datepick-month td a,
  .datepick-month td span {
    min-height: 38px !important;
    font-size: 0.88rem !important;
    border-radius: 5px !important;
  }

  .datepick-month-header {
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
  }

  .datepick-month-header select {
    font-size: 0.92rem !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  .datepick-nav .datepick-cmd-prev,
  .datepick-nav .datepick-cmd-next {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .mphb-calendar .mphb-price {
    font-size: 0.62rem !important;
  }
}

/* ==========================================================================
   5. FORMULARIO DE RESERVA (BOOKING FORM & CTAS)
   ========================================================================== */
.mphb_sc_booking_form-wrapper {
  background: var(--vivelo-surface) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
  margin-top: 1.5rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mphb-booking-form p {
  margin-bottom: 1.2rem !important;
}

.mphb-booking-form label {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--vivelo-navy) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.mphb-booking-form input[type="text"],
.mphb-booking-form select {
  width: 100% !important;
  height: 48px !important;
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  color: var(--vivelo-navy) !important;
  background-color: #ffffff !important;
  transition: var(--transition-smooth) !important;
  box-sizing: border-box !important;
}

.mphb-booking-form input[type="text"]:focus,
.mphb-booking-form select:focus {
  border-color: var(--vivelo-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--vivelo-gold-light) !important;
}

/* Botones de Reserva CTA */
.button.mphb-confirm-reservation,
.button.mphb-reserve-btn,
.mphb-booking-form .mphb-reserve-btn,
.mphb_sc_checkout-wrapper .button.mphb-book-button {
  background: var(--vivelo-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-vivelo) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.75rem !important;
  min-height: 50px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--vivelo-navy) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(17, 32, 42, 0.18) !important;
  transition: var(--transition-smooth) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.button.mphb-confirm-reservation:hover,
.button.mphb-reserve-btn:hover,
.mphb-booking-form .mphb-reserve-btn:hover,
.mphb_sc_checkout-wrapper .button.mphb-book-button:hover {
  background: #1c3545 !important;
  border-color: #1c3545 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(17, 32, 42, 0.28) !important;
}

.button.mphb-confirm-reservation:active,
.button.mphb-reserve-btn:active,
.mphb-booking-form .mphb-reserve-btn:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   5.1. SIDEBAR DE RESERVA EN DESKTOP (STICKY & UI/UX PRO MAX)
   ========================================================================== */
@media (min-width: 922px) {
  /* Contenedor del Sidebar Desktop: Sticky al hacer scroll */
  .wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container:nth-child(2),
  .wp-block-uagb-container.uagb-block-391e157d {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
  }

  .wp-block-uagb-container.uagb-block-391e157d > .uagb-container-inner-blocks-wrap {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Asegurar que las tarjetas de calendario y formulario ocupen el ancho completo */
  .wp-block-uagb-container.uagb-block-391e157d .mphb_sc_availability_calendar-wrapper,
  .wp-block-uagb-container.uagb-block-391e157d .mphb_sc_booking_form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   6. REDISEÑO DEL PASO AL CHECKOUT (CHECKOUT & WOMPI)
   ========================================================================== */
.mphb_sc_checkout-wrapper {
  max-width: 1100px !important;
  margin: 2rem auto !important;
  font-family: var(--font-family-vivelo) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Contenedores de secciones en checkout */
.mphb-reserve-rooms-details,
.mphb-customer-details,
.mphb-billing-details,
.mphb-gateway-chooser {
  background: var(--vivelo-surface) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
  box-sizing: border-box !important;
}

/* Encabezados de sección */
.mphb_sc_checkout-wrapper h3,
.mphb_sc_checkout-wrapper h4 {
  color: var(--vivelo-navy) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.2rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 2px solid var(--vivelo-gold-light) !important;
}

/* Tabla de Desglose de Precios */
.mphb-price-breakdown {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
  box-sizing: border-box !important;
}

.mphb-price-breakdown th,
.mphb-price-breakdown td {
  padding: 0.75rem 0.5rem !important;
  border-bottom: 1px solid var(--vivelo-border) !important;
  color: var(--vivelo-text-main) !important;
}

.mphb-price-breakdown tr:last-child td {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--vivelo-navy) !important;
  border-top: 2px solid var(--vivelo-gold) !important;
  border-bottom: none !important;
  padding-top: 1rem !important;
}

/* Selector de métodos de pago (Wompi, etc.) */
.mphb-gateway-chooser ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mphb-gateway-chooser li {
  background: var(--vivelo-bg) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1rem !important;
  margin-bottom: 0.75rem !important;
  transition: var(--transition-smooth) !important;
  box-sizing: border-box !important;
}

.mphb-gateway-chooser li:hover {
  border-color: var(--vivelo-gold) !important;
  background-color: var(--vivelo-gold-light) !important;
}

.mphb-gateway-chooser input[type="radio"] {
  accent-color: var(--vivelo-gold) !important;
  margin-right: 0.5rem !important;
  transform: scale(1.15) !important;
}

/* ==========================================================================
   6. CATALOGO DE APARTAMENTOS (PAGE-APARTMENTS.PHP) - MOBILE FIRST
   ========================================================================== */
.vivelo-apartments-page {
  background-color: var(--vivelo-bg);
  min-height: 100vh;
  padding: 1.5rem 0 3.5rem;
  font-family: var(--font-family-vivelo);
}

.vivelo-catalog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.vivelo-catalog-header {
  text-align: center;
  margin-bottom: 1.75rem;
  padding: 0 0.5rem;
}

.vivelo-catalog-badge {
  display: inline-block;
  background: var(--vivelo-gold-light);
  color: var(--vivelo-navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(210, 187, 155, 0.4);
}

.vivelo-catalog-title {
  color: var(--vivelo-navy) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.02em;
}

.vivelo-catalog-subtitle {
  color: var(--vivelo-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto;
}

/* Filtros por Ciudad (Sticky Horizontal Bar en Móvil) */
.vivelo-filter-nav {
  position: sticky;
  top: 70px;
  z-index: 100;
  background: rgba(248, 249, 250, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 0;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--vivelo-border);
}

.vivelo-filter-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vivelo-filter-scroll::-webkit-scrollbar {
  display: none;
}

.vivelo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  background: var(--vivelo-surface);
  color: var(--vivelo-text-main);
  border: 1.5px solid var(--vivelo-border);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-family: inherit;
  flex-shrink: 0;
}

.vivelo-pill:hover {
  border-color: var(--vivelo-gold);
  background: var(--vivelo-gold-light);
}

.vivelo-pill.active {
  background: var(--vivelo-navy);
  color: #FFFFFF;
  border-color: var(--vivelo-navy);
  box-shadow: 0 4px 14px rgba(17, 32, 42, 0.2);
}

.vivelo-pill-count {
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
}

.vivelo-pill.active .vivelo-pill-count {
  background: var(--vivelo-gold);
  color: var(--vivelo-navy);
}

/* Grid de Apartamentos */
.vivelo-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .vivelo-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .vivelo-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .vivelo-catalog-title {
    font-size: 2.35rem !important;
  }
}

/* Tarjeta de Apartamento */
.vivelo-property-card {
  background: var(--vivelo-surface);
  border: 1px solid var(--vivelo-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.vivelo-property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(210, 187, 155, 0.6);
}

/* Media de Tarjeta */
.vivelo-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #E2E8F0;
}

.vivelo-card-media a {
  display: block;
  width: 100%;
  height: 100%;
}

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

.vivelo-property-card:hover .vivelo-card-img {
  transform: scale(1.04);
}

.vivelo-badge-location {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(17, 32, 42, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.vivelo-badge-rating {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--vivelo-navy);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Contenido de la Tarjeta */
.vivelo-card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.vivelo-card-title {
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.25rem 0 !important;
}

.vivelo-card-title a {
  color: var(--vivelo-navy) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.vivelo-card-title a:hover {
  color: var(--vivelo-gold-hover) !important;
}

.vivelo-card-zone {
  color: var(--vivelo-text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.9rem;
  font-weight: 500;
}

/* Comodidades */
.vivelo-card-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--vivelo-border);
  border-bottom: 1px solid var(--vivelo-border);
  margin-bottom: 1rem;
}

.vivelo-amenity-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--vivelo-text-muted);
  font-weight: 500;
}

.vivelo-amenity-item svg {
  color: var(--vivelo-navy);
  flex-shrink: 0;
}

/* Footer de Tarjeta con Precio y Botón CTA */
.vivelo-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.vivelo-card-pricing {
  display: flex;
  flex-direction: column;
}

.vivelo-price-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--vivelo-text-muted);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.vivelo-price-value {
  display: flex;
  flex-direction: column;
}

.vivelo-price-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--vivelo-navy);
  line-height: 1.15;
}

.vivelo-price-period {
  font-size: 0.72rem;
  color: var(--vivelo-text-muted);
}

.vivelo-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--vivelo-navy);
  color: #FFFFFF !important;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  transition: var(--transition-smooth);
  box-shadow: 0 3px 8px rgba(17, 32, 42, 0.12);
  white-space: nowrap;
}

.vivelo-card-cta:hover {
  background: #1c3545;
  box-shadow: 0 5px 14px rgba(17, 32, 42, 0.22);
  transform: translateY(-1px);
}

.vivelo-card-cta svg {
  transition: transform 0.2s ease;
}

.vivelo-card-cta:hover svg {
  transform: translateX(3px);
}

/* Bloque de Confianza (Trust Banner) */
.vivelo-trust-banner {
  margin-top: 3.5rem;
  background: var(--vivelo-surface);
  border: 1px solid var(--vivelo-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .vivelo-trust-banner {
    grid-template-columns: repeat(3, 1fr);
    padding: 2rem;
    gap: 1.75rem;
  }
}

.vivelo-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.vivelo-trust-icon {
  background: var(--vivelo-navy);
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vivelo-trust-item h4 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--vivelo-navy) !important;
  margin: 0 0 0.2rem 0 !important;
}

.vivelo-trust-item p {
  font-size: 0.82rem;
  color: var(--vivelo-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   7. LAVADO DE CARA HOME & REDISEÑO DE FORMULARIOS (PRO MAX)
   ========================================================================== */

/* --- A. SECCIÓN DE CONTACTO & FORMULARIO (HOME & CONTACTO) --- */
.wp-block-uagb-container.uagb-block-771d78d9 {
  background-color: var(--vivelo-bg) !important;
  padding-top: 5rem !important;
  padding-bottom: 5.5rem !important;
}

/* Tarjeta del formulario (reemplazo del bloque plano gris) */
.wp-block-uagb-container.uagb-block-d6e56739 {
  background-color: var(--vivelo-surface) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 2.75rem 2.25rem !important;
  box-shadow: 0 16px 40px -10px rgba(17, 32, 42, 0.09) !important;
  transition: var(--transition-smooth) !important;
}

@media (max-width: 767px) {
  .wp-block-uagb-container.uagb-block-d6e56739 {
    padding: 2rem 1.25rem !important;
  }
}

/* Título "Ask Your Queries" */
.uagb-block-cb65194a .uagb-heading-text {
  color: var(--vivelo-navy) !important;
  font-family: var(--font-family-vivelo) !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
  text-align: left !important;
}

/* Forminator UI Global Tweaks */
.forminator-ui.forminator-custom-form-943,
.forminator-ui {
  font-family: var(--font-family-vivelo) !important;
}

.forminator-ui.forminator-custom-form-943 .forminator-label,
.forminator-ui .forminator-label {
  color: var(--vivelo-navy) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.45rem !important;
  display: block !important;
}

.forminator-ui.forminator-custom-form-943 .forminator-required,
.forminator-ui .forminator-required {
  color: var(--vivelo-gold-hover) !important;
  font-weight: 800 !important;
}

/* Inputs de texto y Textarea */
.forminator-ui.forminator-custom-form-943 .forminator-input,
.forminator-ui.forminator-custom-form-943 .forminator-textarea,
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
  background-color: #F8F9FA !important;
  border: 1.5px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.85rem 1.15rem !important;
  font-size: 0.95rem !important;
  color: var(--vivelo-text-main) !important;
  font-family: var(--font-family-vivelo) !important;
  transition: var(--transition-smooth) !important;
  box-shadow: none !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.forminator-ui.forminator-custom-form-943 .forminator-textarea,
.forminator-ui .forminator-textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Estados de Focus con Aura Dorada */
.forminator-ui.forminator-custom-form-943 .forminator-input:focus,
.forminator-ui.forminator-custom-form-943 .forminator-textarea:focus,
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
  background-color: #FFFFFF !important;
  border-color: var(--vivelo-gold) !important;
  box-shadow: 0 0 0 3px rgba(210, 187, 155, 0.28) !important;
  outline: none !important;
}

/* Botón de Envío SEND */
.forminator-ui.forminator-custom-form-943 .forminator-button-submit,
.forminator-ui .forminator-button-submit {
  background: var(--vivelo-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-vivelo) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 2rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  width: 100% !important;
  min-height: 50px !important;
  box-shadow: 0 4px 14px rgba(17, 32, 42, 0.18) !important;
  margin-top: 0.75rem !important;
}

.forminator-ui.forminator-custom-form-943 .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:hover {
  background: #1c3545 !important;
  box-shadow: 0 8px 24px rgba(17, 32, 42, 0.26) !important;
  transform: translateY(-2px) !important;
}

/* Tarjeta Lateral de Información de Contacto ("Have questions?") */
.uagb-block-643c7bc5 {
  background: var(--vivelo-surface) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 2.75rem 2.25rem !important;
  box-shadow: 0 16px 40px -10px rgba(17, 32, 42, 0.09) !important;
  box-sizing: border-box !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.uagb-block-643c7bc5 .uagb-ifb-title {
  color: var(--vivelo-navy) !important;
  font-family: var(--font-family-vivelo) !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
}

.uagb-block-643c7bc5 .uagb-ifb-desc {
  color: var(--vivelo-text-muted) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  font-family: var(--font-family-vivelo) !important;
}

/* --- B. FORMULARIO DE RESERVA RÁPIDA / DIRECT BOOKING (HOME Y FICHAS DE APARTAMENTOS) --- */
.mphb-booking-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Evitar tarjeta duplicada anidada cuando el formulario está dentro de su wrapper */
.mphb_sc_booking_form-wrapper form.mphb-booking-form,
.mphb_sc_booking_form-wrapper.is-direct-booking form.mphb-booking-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mphb-booking-form .mphb-required-fields-tip {
  display: none !important;
}

.mphb-booking-form .mphb-check-in-date-wrapper,
.mphb-booking-form .mphb-check-out-date-wrapper {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mphb-booking-form label {
  color: var(--vivelo-navy) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

.mphb-booking-form .mphb-datepick {
  background: #F8F9FA !important;
  border: 1.5px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
  font-family: var(--font-family-vivelo) !important;
  color: var(--vivelo-navy) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  transition: var(--transition-smooth) !important;
}

.mphb-booking-form .mphb-datepick:focus {
  background: #FFFFFF !important;
  border-color: var(--vivelo-gold) !important;
  box-shadow: 0 0 0 3px rgba(210, 187, 155, 0.25) !important;
  outline: none !important;
}

.mphb-booking-form .mphb-reserve-btn-wrapper,
.mphb-booking-form .mphb-reserve-room-section,
.mphb-booking-form .mphb-errors-wrapper {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mphb-booking-form .mphb-reserve-btn,
.mphb-booking-form .mphb-confirm-reservation {
  background: var(--vivelo-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-vivelo) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  width: 100% !important;
  min-height: 48px !important;
  cursor: pointer !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 4px 12px rgba(17, 32, 42, 0.16) !important;
  margin-top: 0.25rem !important;
  display: block !important;
  text-align: center !important;
}

.mphb-booking-form .mphb-reserve-btn:hover,
.mphb-booking-form .mphb-confirm-reservation:hover {
  background: #1c3545 !important;
  box-shadow: 0 6px 18px rgba(17, 32, 42, 0.25) !important;
  transform: translateY(-2px) !important;
}

.mphb-booking-form .mphb-period-price {
  background: var(--vivelo-bg) !important;
  border: 1px solid var(--vivelo-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.85rem 1rem !important;
  margin: 0.5rem 0 0.25rem 0 !important;
  font-size: 0.9rem !important;
  color: var(--vivelo-navy) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mphb-booking-form .mphb-rooms-quantity-single {
  font-size: 0.85rem !important;
  color: var(--vivelo-text-muted) !important;
  margin: 0.25rem 0 !important;
}

.mphb-booking-form .mphb-errors-wrapper {
  color: #dc2626 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin: 0.25rem 0 !important;
}

/* --- C. HERO SECTION & CALL TO ACTIONS --- */
.uagb-block-e44d0d60 a.wp-block-button__link {
  background: var(--vivelo-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-vivelo) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.06em !important;
  padding: 0.9rem 2.25rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--vivelo-gold) !important;
  box-shadow: 0 8px 24px rgba(17, 32, 42, 0.35) !important;
  transition: var(--transition-smooth) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.uagb-block-e44d0d60 a.wp-block-button__link:hover {
  background: var(--vivelo-gold) !important;
  color: var(--vivelo-navy) !important;
  border-color: var(--vivelo-gold) !important;
  box-shadow: 0 10px 30px rgba(210, 187, 155, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Botón Airbnb de la sección destacada */
a.wp-block-button__link[href*="airbnb"] {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-vivelo) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 14px rgba(255, 90, 95, 0.25) !important;
  transition: var(--transition-smooth) !important;
}

a.wp-block-button__link[href*="airbnb"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 90, 95, 0.38) !important;
}

/* Banner de Conversión Inferior */
.uagb-block-ef62bc00 a.wp-block-button__link {
  background: var(--vivelo-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-vivelo) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.95rem 2.4rem !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid var(--vivelo-gold) !important;
  box-shadow: 0 8px 24px rgba(17, 32, 42, 0.25) !important;
  transition: var(--transition-smooth) !important;
}

.uagb-block-ef62bc00 a.wp-block-button__link:hover {
  background: var(--vivelo-gold) !important;
  color: var(--vivelo-navy) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(210, 187, 155, 0.45) !important;
}

/* --- D. TARJETAS DE DESTINO ("Explore Our Exclusive Destinations") --- */
.uagb-block-3ecf915d,
.uagb-block-d3391637,
.uagb-block-c17c9f77 {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.uagb-block-3ecf915d:hover,
.uagb-block-d3391637:hover,
.uagb-block-c17c9f77:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 30px -8px rgba(17, 32, 42, 0.14) !important;
}

.uagb-block-3ecf915d img,
.uagb-block-d3391637 img,
.uagb-block-c17c9f77 img {
  border-radius: var(--radius-md) !important;
  transition: transform 0.4s ease !important;
}

.uagb-block-3ecf915d:hover img,
.uagb-block-d3391637:hover img,
.uagb-block-c17c9f77:hover img {
  transform: scale(1.03) !important;
}