/* ============================================================
   site.css — Dave & Nat Hosting, sitio público (F0.4)
   Tokens extraídos 1:1 del "Dave&Nat Web - Design Kit" de Figma.
   Namespace propio (`--site-`) para vivir aislado de editorial.css
   / admin.css / unified-inbox.css, que pertenecen al admin y NO se
   tocan. Nada de este archivo debe reusar --mustard/--olive/etc.
   ============================================================ */

:root {
  /* --- Color: primarios --------------------------------------- */
  --site-ink:            #232323;
  --site-brand-pink:     #e777aa; /* marca, default */
  --site-brand-purple:   #736dea; /* marca, alt */

  /* --- Color: botón (estados) ---------------------------------- */
  --site-btn-default:    #e777aa;
  --site-btn-hover:      #d55b93;
  --site-btn-pressed:    #b72f6d;

  /* --- Color: estados semánticos -------------------------------- */
  --site-error:          #d22200;
  --site-error-dk:       #891600;
  --site-error-bg:       rgba(210, 34, 0, .05);

  --site-warning:        #ffd43b;
  --site-warning-dk:     #cea821;
  --site-warning-bg:     rgba(255, 212, 59, .05);

  --site-success:        #00aa30;
  --site-success-dk:     #028728;
  --site-success-bg:     rgba(0, 170, 48, .05);

  --site-info:           #544ed6;
  --site-accent:         #736dea;
  --site-info-bg:        rgba(115, 109, 234, .05);

  /* --- Color: neutros (escala clara → oscura) -------------------- */
  --site-neutral-00:     #ffffff;
  --site-neutral-05:     #f7f7f7;
  --site-neutral-10:     #ebebeb;
  --site-neutral-20:     #dddddd;
  --site-neutral-30:     #d3d3d3;
  --site-neutral-40:     #c2c2c2;
  --site-neutral-50:     #b0b0b0;
  --site-neutral-70:     #717171;
  --site-neutral-80:     #5e5e5e;
  --site-neutral-90:     #232323;

  /* --- Color: derivados de componentes reales -------------------- */
  --site-chip-active-bg: #fae4ee; /* chip activo (rosa) */
  --site-callout-success-bg: #bfeacb;
  --site-callout-error-bg:   #fbe9e5;
  --site-callout-warning-bg: #fff4ce;

  /* --- Tipografía ------------------------------------------------ */
  --site-font-family:    'Epilogue', system-ui, sans-serif;
  --site-font-regular:   400;
  --site-font-medium:    500;
  --site-font-bold:      700;
  --site-tracking-global: -0.02em; /* -2% tracking global del kit */

  /* Escala tipográfica: tamaño / line-height / letter-spacing (px) */
  --site-fs-title:       40px;
  --site-lh-title:       102%;
  --site-ls-title:       -0.80px;

  --site-fs-h2:          32px;
  --site-lh-h2:          114%;
  --site-ls-h2:          -0.64px;

  --site-fs-subtitle:    24px;
  --site-lh-subtitle:    135%;
  --site-ls-subtitle:    -0.48px;

  --site-fs-body-lg:     18px;
  --site-lh-body-lg:     140%;
  --site-ls-body-lg:     -0.36px;

  --site-fs-body:        16px;
  --site-lh-body:        150%;
  --site-ls-body:        -0.32px;

  --site-fs-support:     14px;
  --site-lh-support:     165%;
  --site-ls-support:     -0.28px;

  --site-fs-label-sm:    12px;
  --site-lh-label-sm:    140%;
  --site-ls-label-sm:    -0.24px;

  /* --- Espaciado (múltiplos de 2) --------------------------------- */
  --site-space-1:        4px;
  --site-space-2:        8px;
  --site-space-3:        12px;
  --site-space-4:        16px;
  --site-space-6:        24px;
  --site-space-8:        32px;
  --site-space-12:       48px;

  /* --- Radios ------------------------------------------------------ */
  --site-radius-sm:      4px;
  --site-radius-md:      8px;
  --site-radius-lg:      12px;
  --site-radius-xl:      16px;
  --site-radius-pill:    99px;

  /* --- Grid (desktop, del kit) --------------------------------------
     1440px, 12 columnas, columna 78px, gutter 24px, margen 120px.
     El kit NO define breakpoints tablet/mobile; los valores de abajo
     (media queries) son un fallback razonable, no vienen de Figma. */
  --site-grid-max-width: 1440px;
  --site-grid-columns:   12;
  --site-grid-col-width: 78px;
  --site-grid-gutter:    24px;
  --site-grid-margin:    120px;

  /* --- Elevaciones --------------------------------------------------- */
  --site-elevation-1:    0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3);
  --site-elevation-2:    0 1px 5px rgba(0, 0, 0, .19);
  --site-elevation-3:    0 6px 16px rgba(0, 0, 0, .12);
}

/* RD.38 -- bug real encontrado y corregido: `<body class="pms-site-body">` 
   (layouts/site.blade.php) nunca tuvo una regla `.pms-site-body` en
   este archivo -- cada clase hoja (.pms-site-chip, .pms-site-hero__title,
   etc.) SI declara `font-family: var(--site-font-family)` a mano, pero
   cualquier texto sin una clase propia (el checkbox de Acuerdo de Renta
   Corta en booking-confirmed.blade.php, los links del topbar/footer)
   caia al default serif del navegador (Times New Roman), nunca a
   Epilogue. Confirmado con getComputedStyle real contra /sitio/oferta,
   /sitio/checkout y /sitio/confirmacion. */
.pms-site-body {
  font-family: var(--site-font-family);
  color: var(--site-ink);
}

/* RD.40 -- mismo patron de RD.38/RD.39 minado hasta la raiz: el
   navegador NUNCA hace heredar font-family a <button>/<input>/<select>/
   <textarea> desde el body (hoja de estilos de usuario/UA propia para
   controles de formulario), asi que aunque .pms-site-body arriba ya
   declare Epilogue, cada boton/input/select/textarea sin una clase
   propia que repita font-family:var(--site-font-family) cae al default
   del navegador (Arial/Times New Roman segun el control). RD.39 parcheo
   ese sintoma UNA vez para el carrusel de /sitio (.pms-site-fav-slide-name/
   .pms-site-fav-slide-zone); un barrido real con getComputedStyle sobre
   CADA boton/input/select/textarea de /sitio, /sitio/propiedades,
   /sitio/propiedades/{id}, /sitio/oferta, /sitio/checkout,
   /sitio/confirmacion, /cuenta/registro, /cuenta/login,
   /cuenta/olvide-password, /cuenta/recuperar-password, /cuenta/perfil,
   /cuenta/configuracion, /cuenta/mis-reservas y /cuenta/reservas-anteriores
   encontro el mismo patron repetido en otros 8 lugares (toggle de
   mostrar/ocultar contrasena, flechas de carrusel de propiedad, thumbs
   de galeria, checkbox de Acuerdo de Renta Corta, boton de editar
   perfil, selector de idioma ESP/ENG, checkboxes de notificaciones,
   boton de cancelar en configuracion). En vez de seguir parchando cada
   boton uno por uno, se corrige la causa raiz una sola vez aqui. */
button, input, select, textarea {
  font-family: inherit;
}

/* ============================================================
   Utilidades base — punto de partida para el shell público (F1),
   sin sobre-construir un framework completo.
   ============================================================ */

/* Contenedor con el grid de 12 columnas del kit. Usa CSS Grid con
   `minmax(0, 1fr)` en vez de --site-grid-col-width fijo para que el
   grid respire en pantallas != 1440px; el ancho de columna del kit
   queda documentado en la variable para referencia/diseño pixel-perfect
   a 1440px, pero el layout real es fluido. */
.pms-site-container {
  width: 100%;
  max-width: var(--site-grid-max-width);
  margin-inline: auto;
  padding-inline: var(--site-grid-margin);
  display: grid;
  grid-template-columns: repeat(var(--site-grid-columns), minmax(0, 1fr));
  gap: var(--site-grid-gutter);
  box-sizing: border-box;
}

/* Fallback responsive: el kit no trae spec de breakpoints, así que
   se reduce el margen lateral y las columnas fluyen progresivamente
   a medida que se angosta el viewport (criterio propio, no de Figma). */
@media (max-width: 1024px) {
  .pms-site-container {
    padding-inline: var(--site-space-8);
  }
}

@media (max-width: 768px) {
  .pms-site-container {
    padding-inline: var(--site-space-6);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--site-space-4);
  }
}

@media (max-width: 480px) {
  .pms-site-container {
    padding-inline: var(--site-space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--site-space-3);
  }
}

/* Botón primario con los 3 estados de color del kit (default/hover/
   pressed) más disabled, siguiendo la escala tipográfica de cuerpo. */
.pms-site-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-2);
  border: 0;
  cursor: pointer;
  background: var(--site-btn-default);
  color: var(--site-neutral-00);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  letter-spacing: var(--site-ls-body);
  padding: var(--site-space-3) var(--site-space-6);
  border-radius: var(--site-radius-pill);
  box-shadow: var(--site-elevation-1);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.pms-site-btn-primary:hover {
  background: var(--site-btn-hover);
  box-shadow: var(--site-elevation-2);
}
.pms-site-btn-primary:active,
.pms-site-btn-primary.is-pressed {
  background: var(--site-btn-pressed);
  box-shadow: none;
}
.pms-site-btn-primary:disabled,
.pms-site-btn-primary.is-disabled {
  background: var(--site-neutral-30);
  color: var(--site-neutral-70);
  cursor: not-allowed;
  box-shadow: none;
}

/* Reserve (ficha/oferta): outline morado que invierte a relleno solido
   al hover -- lenguaje visual distinto del CTA rosa por defecto, tal
   como el repo externo usa el morado SOLO para reservar/enfocar
   tarjetas, nunca para CTAs generales. */
.pms-site-btn-primary--reserve {
  background: var(--site-neutral-00);
  color: var(--site-brand-purple);
  border: 1px solid #c9c7f5;
  box-shadow: none;
}
.pms-site-btn-primary--reserve:hover {
  background: var(--site-brand-purple);
  color: var(--site-neutral-00);
  border-color: var(--site-brand-purple);
  box-shadow: var(--site-elevation-1);
}
.pms-site-btn-primary--reserve:active,
.pms-site-btn-primary--reserve.is-pressed {
  background: #5f59c9;
  border-color: #5f59c9;
}

/* Continue and pay (checkout): outline rosa, mismo lenguaje que el
   buscador/login -- transparente, nunca relleno solido. */
.pms-site-btn-primary--outline-pink {
  background: transparent;
  color: var(--site-brand-pink);
  border: 1px solid var(--site-brand-pink);
  box-shadow: none;
}
.pms-site-btn-primary--outline-pink:hover {
  background: rgba(231, 119, 170, .08);
  box-shadow: none;
}
.pms-site-btn-primary--outline-pink:active,
.pms-site-btn-primary--outline-pink.is-pressed {
  background: rgba(231, 119, 170, .16);
}
.pms-site-btn-primary--outline-pink:disabled,
.pms-site-btn-primary--outline-pink.is-disabled {
  background: transparent;
  color: var(--site-neutral-50);
  border-color: var(--site-neutral-30);
}

/* Callout / alerta semántica genérica: variantes por modificador,
   usando los pares color-oscuro (texto/borde) + fondo tenue (.05
   alpha del kit, o el fondo sólido derivado cuando aplica). */
.pms-site-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-3);
  padding: var(--site-space-4);
  border-radius: var(--site-radius-md);
  border: 1px solid transparent;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  line-height: var(--site-lh-support);
  letter-spacing: var(--site-ls-support);
  color: var(--site-ink);
}
.pms-site-callout--error {
  background: var(--site-error-bg);
  border-color: var(--site-error);
  color: var(--site-error-dk);
}
.pms-site-callout--warning {
  background: var(--site-warning-bg);
  border-color: var(--site-warning-dk);
  color: var(--site-warning-dk);
}
.pms-site-callout--success {
  background: var(--site-success-bg);
  border-color: var(--site-success);
  color: var(--site-success-dk);
}
.pms-site-callout--info {
  background: var(--site-info-bg);
  border-color: var(--site-accent);
  color: var(--site-info);
}

/* ============================================================
   Home page pública (F1.2) — bloques de la vista
   livewire/site/home.blade.php. Namespace pms-site-* igual que el
   resto del archivo; grid/tokens del kit (--site-*), placement por
   fila via .pms-site-container ya existente (mismo patrón que
   layouts/site.blade.php: grid-column inline por bloque, clases aquí
   solo para apariencia/tipografía/espaciado, no para posicionamiento).
   ============================================================ */

.pms-site-section {
  padding-block: var(--site-space-12);
}

.pms-site-section__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-h2);
  line-height: var(--site-lh-h2);
  letter-spacing: var(--site-ls-h2);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-2);
}

.pms-site-section__subtitle {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-regular);
  font-size: var(--site-fs-body-lg);
  line-height: var(--site-lh-body-lg);
  letter-spacing: var(--site-ls-body-lg);
  color: var(--site-neutral-70);
  margin: 0 0 var(--site-space-8);
}

/* --- Hero ------------------------------------------------------- */
.pms-site-hero {
  background: linear-gradient(135deg, var(--site-brand-pink) 0%, var(--site-brand-purple) 100%);
  padding-block: var(--site-space-12);
  position: relative;
}

.pms-site-hero__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-title);
  line-height: var(--site-lh-title);
  letter-spacing: var(--site-ls-title);
  color: var(--site-neutral-00);
  margin: 0 0 var(--site-space-4);
}

.pms-site-hero__subtitle {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-regular);
  font-size: var(--site-fs-subtitle);
  line-height: var(--site-lh-subtitle);
  letter-spacing: var(--site-ls-subtitle);
  color: var(--site-neutral-00);
  margin: 0 0 var(--site-space-8);
  opacity: .92;
}

/* --- Buscador flotante (solo UI en F1.2, sin submit -- F1.3) ----- */
.pms-site-search {
  background: var(--site-neutral-00);
  border-radius: var(--site-radius-xl);
  box-shadow: var(--site-elevation-3);
  padding: var(--site-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-4);
  align-items: flex-end;
}

.pms-site-search__field {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
  flex: 1 1 160px;
}

.pms-site-search__label {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-label-sm);
  line-height: var(--site-lh-label-sm);
  letter-spacing: var(--site-ls-label-sm);
  color: var(--site-neutral-70);
}

.pms-site-search__input {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  padding: var(--site-space-3);
  background: var(--site-neutral-00);
}

.pms-site-search__submit {
  flex: 0 0 auto;
}

/* --- Zonas destacadas --------------------------------------------- */
.pms-site-zone-card {
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: var(--site-space-6);
  background: linear-gradient(0deg, rgba(35,35,35,.72) 0%, rgba(35,35,35,.05) 65%), var(--site-brand-purple);
  color: var(--site-neutral-00);
}

.pms-site-zone-card__name {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-subtitle);
  line-height: var(--site-lh-subtitle);
  letter-spacing: var(--site-ls-subtitle);
  margin: 0 0 var(--site-space-1);
}

.pms-site-zone-card__count {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  line-height: var(--site-lh-support);
  opacity: .9;
}

/* --- Propiedades destacadas (cards) -------------------------------- */
.pms-site-property-card {
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  background: var(--site-neutral-00);
  box-shadow: var(--site-elevation-1);
  display: flex;
  flex-direction: column;
}

.pms-site-property-card__media {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-20);
}

.pms-site-property-card__body {
  padding: var(--site-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
}

.pms-site-property-card__zone {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  line-height: var(--site-lh-label-sm);
  letter-spacing: var(--site-ls-label-sm);
  color: var(--site-neutral-70);
  text-transform: uppercase;
}

.pms-site-property-card__name {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-body-lg);
  line-height: var(--site-lh-body-lg);
  letter-spacing: var(--site-ls-body-lg);
  color: var(--site-ink);
  margin: 0;
}

.pms-site-property-card__meta {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  line-height: var(--site-lh-support);
  color: var(--site-neutral-70);
}

.pms-site-property-card__price {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  margin-top: var(--site-space-2);
}

.pms-site-property-card__price small {
  font-weight: var(--site-font-regular);
  color: var(--site-neutral-70);
  font-size: var(--site-fs-support);
}

/* --- CTA de registro ------------------------------------------------ */
.pms-site-cta {
  background: var(--site-ink);
  border-radius: var(--site-radius-xl);
  padding: var(--site-space-12) var(--site-space-8);
  text-align: center;
  color: var(--site-neutral-00);
}

.pms-site-cta__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-h2);
  line-height: var(--site-lh-h2);
  letter-spacing: var(--site-ls-h2);
  margin: 0 0 var(--site-space-2);
}

.pms-site-cta__subtitle {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body-lg);
  color: var(--site-neutral-20);
  margin: 0 0 var(--site-space-6);
}

/* --- Proceso de reserva en 4 pasos ----------------------------------- */
.pms-site-step {
  text-align: center;
}

.pms-site-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--site-radius-pill);
  background: var(--site-chip-active-bg);
  color: var(--site-btn-pressed);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-subtitle);
  margin-bottom: var(--site-space-4);
}

.pms-site-step__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-body-lg);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-1);
}

.pms-site-step__text {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin: 0;
}

/* --- Propuesta de valor ------------------------------------------------ */
.pms-site-value {
  text-align: center;
  padding: var(--site-space-6);
}

.pms-site-value .material-symbols-outlined {
  font-size: 32px;
  color: var(--site-accent);
  margin-bottom: var(--site-space-3);
}

.pms-site-value__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-1);
}

.pms-site-value__text {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin: 0;
}

/* --- Testimonios ---------------------------------------------------- */
.pms-site-testimonial {
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-3);
}

.pms-site-testimonial__rating {
  color: var(--site-warning-dk);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-support);
}

.pms-site-testimonial__text {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  color: var(--site-ink);
  margin: 0;
  flex-grow: 1;
}

.pms-site-testimonial__author {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}

@media (max-width: 768px) {
  .pms-site-hero__title {
    font-size: var(--site-fs-h2);
  }
  .pms-site-search {
    flex-direction: column;
    align-items: stretch;
  }
  .pms-site-search__field,
  .pms-site-search--pill .pms-site-search__field {
    /* bug real preexistente: flex 1 1 160px estaba pensado como ancho
       minimo en modo fila; en columna (aqui) ese 160px se vuelve ALTO
       fijo por campo -- 3 campos x 160px = espacio muerto enorme,
       confirmado con Playwright en vivo (390px, cada .pms-site-search__field
       media 160px de alto real). El selector --pill (mas especifico,
       agregado despues al convertir el buscador en pill continuo) volvio
       a introducir el mismo bug via flex:1 1 0 -- ambos casos se cubren
       aqui explicitamente. */
    flex: 0 0 auto;
  }

  .pms-site-search--pill .pms-site-search__field + .pms-site-search__field {
    border-left: 0;
    border-top: 1px solid var(--site-neutral-20);
  }

  /* padding asimetrico (6 izq / 2 der) fue pensado para el pill horizontal
     de escritorio con el boton de submit a la derecha -- en columna
     causaba 4px de overflow horizontal real (confirmado con Playwright,
     390px viewport: pill.right=394 > innerWidth=390). */
  .pms-site-search--pill {
    padding: var(--site-space-3);
  }
}

/* ============================================================
   Listado /propiedades con filtros (F1.3) — bloques de la vista
   livewire/site/property-listing.blade.php. Reusa .pms-site-search y
   .pms-site-property-card tal cual (F1.2, ver ese bloque arriba) para
   que home y listado se vean como la misma familia visual; lo de abajo
   es SOLO lo nuevo que F1.2 no necesitaba: panel de filtros, cabecera
   de resultados, badge de calificación en la card, estado vacío y
   paginación (con markup propio porque el shell "site" no carga
   Tailwind, ver docblock de livewire/site/pagination.blade.php).
   ============================================================ */

/* --- Panel de filtros ---------------------------------------------- */
.pms-site-filters {
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-4) var(--site-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--site-space-4);
}

.pms-site-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
}

.pms-site-filters__label {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-label-sm);
  line-height: var(--site-lh-label-sm);
  letter-spacing: var(--site-ls-label-sm);
  color: var(--site-neutral-70);
}

.pms-site-select {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  padding: var(--site-space-3);
  background: var(--site-neutral-00);
}

.pms-site-filters__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2);
}

.pms-site-chip {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  background: var(--site-neutral-00);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pms-site-chip.is-active {
  background: var(--site-chip-active-bg);
  border-color: var(--site-btn-default);
  color: var(--site-btn-pressed);
  font-weight: var(--site-font-medium);
}

.pms-site-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-2);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  cursor: pointer;
}

/* --- Cabecera de resultados ------------------------------------------ */
.pms-site-results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--site-space-2);
  margin-bottom: var(--site-space-6);
}

.pms-site-results-count {
  font-family: var(--site-font-family);
  color: var(--site-neutral-70);
  font-size: var(--site-fs-support);
}

/* --- Badge de calificación en la card (además de zone/name/meta/price
   ya definidos en el bloque F1.2 de arriba) ---------------------------- */
.pms-site-property-card__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-1);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  color: var(--site-warning-dk);
}

/* --- Estado vacío ------------------------------------------------------ */
.pms-site-empty {
  text-align: center;
  padding: var(--site-space-12) var(--site-space-6);
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-lg);
}
.pms-site-empty .material-symbols-outlined {
  font-size: 40px;
  color: var(--site-neutral-50);
  margin-bottom: var(--site-space-3);
}
.pms-site-empty__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-subtitle);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-2);
}
.pms-site-empty__text {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-neutral-70);
  margin: 0;
}

/* --- Paginación ---------------------------------------------------------- */
.pms-site-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--site-space-2);
  flex-wrap: wrap;
  margin-top: var(--site-space-8);
}
.pms-site-pagination__link,
.pms-site-pagination__current,
.pms-site-pagination__disabled {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--site-radius-md);
  text-decoration: none;
}
.pms-site-pagination__link {
  color: var(--site-ink);
}
.pms-site-pagination__link:hover {
  background: var(--site-neutral-05);
}
.pms-site-pagination__current {
  background: var(--site-btn-default);
  color: var(--site-neutral-00);
  border: 1px solid var(--site-btn-default);
}
.pms-site-pagination__disabled {
  color: var(--site-neutral-40);
}

@media (max-width: 768px) {
  .pms-site-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Ficha de oferta (F6.4) ----------------------------------------------
   Resumen de fechas/huéspedes prellenados + CTA de la ficha pública en
   modo oferta (livewire/site/offer-page.blade.php). El resto de esa
   pantalla reusa .pms-site-property-card / .pms-site-chip / .pms-site-empty
   tal cual -- este bloque es solo lo nuevo (caja de resumen + wrap de
   chips de amenidades dentro de la card). */
.pms-site-offer-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2);
  margin-top: var(--site-space-4);
}

.pms-site-offer-summary {
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-6);
}

.pms-site-offer-summary__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-subtitle);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-4);
}

.pms-site-offer-summary__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-4);
  margin: 0 0 var(--site-space-4);
}

.pms-site-offer-summary__list dt {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
  margin: 0 0 var(--site-space-1);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pms-site-offer-summary__list dd {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  margin: 0;
}

.pms-site-offer-summary__note {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin: var(--site-space-2) 0 0;
}

@media (max-width: 768px) {
  .pms-site-offer-media,
  .pms-site-offer-summary {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   Detalle público de propiedad (F1.4) — livewire/site/property-detail.blade.php.
   Reusa .pms-site-property-card__zone/__rating, .pms-site-chip,
   .pms-site-offer-amenities/-summary*, .pms-site-callout,
   .pms-site-testimonial tal cual (F1.2/F1.3/F6.4) -- este bloque es solo
   lo que no existía todavía: galería con hero+grid, lista "lo que debes
   saber", grid de reviews, y el modal de "todas las amenidades". */
[x-cloak] { display: none !important; }

.pms-site-detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--site-space-2);
  border-radius: var(--site-radius-lg);
  overflow: hidden;
}

.pms-site-detail-gallery__hero {
  height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: var(--site-radius-lg);
}

.pms-site-detail-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-2);
}

.pms-site-detail-gallery__thumb {
  height: 204px;
  background-size: cover;
  background-position: center;
  border-radius: var(--site-radius-md);
  background-color: var(--site-neutral-10);
}

@media (max-width: 768px) {
  .pms-site-detail-gallery {
    grid-template-columns: 1fr;
  }

  .pms-site-detail-gallery__hero {
    height: 260px;
  }

  .pms-site-detail-gallery__thumb {
    height: 120px;
  }
}

.pms-site-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
  padding-bottom: var(--site-space-4);
  border-bottom: 1px solid var(--site-neutral-20);
}

.pms-site-detail-facts span {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-1);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}

.pms-site-detail-facts .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  color: var(--site-neutral-70);
}

.pms-site-detail-know-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
}

.pms-site-detail-know-list > div {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-2);
}

.pms-site-detail-know-list .material-symbols-outlined {
  color: var(--site-neutral-70);
  margin-top: 2px;
}

.pms-site-detail-know-list strong {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}

.pms-site-detail-know-list p {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin: var(--site-space-1) 0 0;
}

@media (max-width: 768px) {
  .pms-site-detail-know-list {
    grid-template-columns: 1fr;
  }
}

.pms-site-detail-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
}

@media (max-width: 768px) {
  .pms-site-detail-reviews {
    grid-template-columns: 1fr;
  }
}

.pms-site-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 35, 35, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--site-space-4);
  z-index: 100;
}

.pms-site-modal {
  background: var(--site-neutral-00);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-6);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

/* ============================================================
   F1.6 — selector de huéspedes (Adultos/Niños/Bebés/Mascotas) y
   mini-calendario de disponibilidad. Compartido por
   property-listing.blade.php y property-detail.blade.php -- ver
   docblocks de App\Livewire\Site\PropertyListing/PropertyDetail para el
   criterio de cada uno (topes de sanidad vs. capacidad real de una
   sola property).
   ============================================================ */

.pms-site-guest-picker__trigger {
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* Seguimiento post-reskin 2026-08-17 -- popover de zona del buscador
   (Home/Listado), mismo lenguaje visual que .pms-site-guest-picker__panel
   pero como lista de opciones en vez de steppers. */
.pms-site-zone-panel {
  width: 280px;
  padding: var(--site-space-2);
  gap: 0;
}
.pms-site-zone-panel__item {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  width: 100%;
  text-align: left;
  padding: var(--site-space-2) var(--site-space-3);
  border-radius: var(--site-radius-md);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}
.pms-site-zone-panel__item:hover {
  background: var(--site-neutral-05);
}
.pms-site-zone-panel__item .material-symbols-outlined {
  font-size: 20px;
  color: var(--site-neutral-50);
}
.pms-site-zone-panel__item small {
  color: var(--site-neutral-50);
  margin-left: auto;
  font-size: var(--site-fs-label-sm);
}

/* Calendario del buscador (Home/Listado) -- modificador popover del
   .pms-site-availability-calendar existente (que en la ficha de una
   property es un bloque colapsable inline de 3 meses). Aqui es UN mes
   con navegacion prev/next, posicionado absoluto, rosa (no morado --
   el morado se reserva para Reservar/la ficha, ver reporte de
   comparacion en vivo del 2026-08-17). */
.pms-site-availability-calendar--search {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 12px 34px rgba(30, 25, 60, .18);
  border: 1px solid var(--site-neutral-20);
  border-radius: 16px;
}
.pms-site-availability-calendar--search .pms-site-availability-calendar__day.is-checkin,
.pms-site-availability-calendar--search .pms-site-availability-calendar__day.is-checkout {
  background: var(--site-brand-pink);
}
.pms-site-availability-calendar--search .pms-site-availability-calendar__day.is-in-range {
  background: rgba(231, 119, 170, .16);
}
.pms-site-availability-calendar--search .pms-site-availability-calendar__day.is-available:hover {
  outline: 1.5px dashed var(--site-brand-pink);
  outline-offset: -1.5px;
}
.pms-site-availability-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--site-space-2);
}
.pms-site-availability-calendar__nav strong {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}
.pms-site-availability-calendar__nav-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--site-neutral-70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--site-radius-pill);
}
.pms-site-availability-calendar__nav-btn:hover {
  background: var(--site-neutral-10);
}

/* Pie del selector de huespedes: boton de cierre explicito. El panel es absoluto y
   tapaba el boton de Reservar cuando no se cerraba solo. */
.pms-site-guest-picker__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid #eceff3;
}
.pms-site-guest-picker__done {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 22px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: #10345B;
    cursor: pointer;
    min-height: 40px;
}
.pms-site-guest-picker__done:hover { background: #0b2742; }
.pms-site-guest-picker__done:focus-visible { outline: 2px solid #20599b; outline-offset: 2px; }

.pms-site-guest-picker__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 900;
  width: 320px;
  max-width: 90vw;
  background: var(--site-neutral-00);
  border: 1px solid var(--site-neutral-20);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(30, 25, 60, .18);
  padding: var(--site-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-4);
}

/* Repo externo: .pop-guests queda a la derecha (right:0), .pop-cal
   centrado bajo el campo (left:50%/translateX(-50%)) -- solo .pop-zonas
   se queda pegado a la izquierda (left:0, ya es el default de arriba). */
.pms-site-search__field:last-of-type .pms-site-guest-picker__panel {
  left: auto;
  right: 0;
}

.pms-site-guest-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3);
}

.pms-site-guest-picker__row > div:first-child {
  display: flex;
  flex-direction: column;
}

.pms-site-guest-picker__row strong {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}

.pms-site-guest-picker__row span {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
}

.pms-site-stepper {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  flex: 0 0 auto;
}

.pms-site-stepper__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--site-neutral-40);
  background: var(--site-neutral-00);
  color: var(--site-ink);
  font-size: var(--site-fs-body-lg);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pms-site-stepper__btn:hover {
  border-color: var(--site-btn-default);
  color: var(--site-btn-pressed);
}
.pms-site-stepper__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.pms-site-stepper__value {
  min-width: 20px;
  text-align: center;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}

/* --- Mini-calendario de disponibilidad (PropertyDetail) --------------- */
.pms-site-availability-calendar {
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-4);
  margin-bottom: var(--site-space-3);
}

.pms-site-availability-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-4);
  margin-bottom: var(--site-space-3);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
}
.pms-site-availability-calendar__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-1);
}

.pms-site-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.pms-site-cal-dot--available { background: var(--site-success); }
.pms-site-cal-dot--blocked { background: var(--site-neutral-40); }
.pms-site-cal-dot--selected { background: var(--site-btn-default); }

.pms-site-availability-calendar__month + .pms-site-availability-calendar__month {
  margin-top: var(--site-space-4);
}
.pms-site-availability-calendar__month strong {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  display: block;
  margin-bottom: var(--site-space-2);
}

.pms-site-availability-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--site-space-1);
}

.pms-site-availability-calendar__weekday {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-50);
  text-align: center;
}

.pms-site-availability-calendar__day {
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--site-radius-md);
  background: var(--site-neutral-00);
  color: var(--site-ink);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  cursor: pointer;
}
.pms-site-availability-calendar__day.is-available:hover {
  background: var(--site-success-bg);
}
.pms-site-availability-calendar__day.is-blocked,
.pms-site-availability-calendar__day.is-past {
  background: transparent;
  color: var(--site-neutral-40);
  text-decoration: line-through;
  cursor: not-allowed;
}
.pms-site-availability-calendar__day.is-in-range {
  background: var(--site-info-bg);
}
.pms-site-availability-calendar__day.is-selected {
  background: var(--site-btn-default);
  color: var(--site-neutral-00);
  font-weight: var(--site-font-medium);
}

@media (max-width: 768px) {
  .pms-site-guest-picker__panel {
    width: 100%;
  }
}

/* ============================================================
   F9.10 -- Mobile fixes verificados con Playwright (device iPhone 13,
   viewport 390x844) + getBoundingClientRect real sobre pms.liberatured.com.
   Todos los wireframes del kit son 1440px desktop-only; estos 3 bugs
   se detectaron porque las pantallas nuevas de /sitio y /cuenta usan
   grid-column ABSOLUTO (inline style) pensado para el grid de 12
   columnas de escritorio, que .pms-site-container reduce a 4 columnas
   a partir de 768px (ver @media arriba, ~línea 153) -- ese cambio de
   número de columnas no se propaga a los inline styles.
   ============================================================ */

/* --- BUG 1: /cuenta/login y /cuenta/registro ------------------------
   login.blade.php usa `grid-column: 4 / span 6` y register.blade.php
   `grid-column: 3 / span 8` para centrar su card en el grid de 12
   columnas de escritorio. En el grid de 4 columnas de móvil esa
   columna de inicio (4 o 3) ya casi no deja columnas explícitas
   detrás del span, así que el navegador crea columnas implícitas
   `auto` a la derecha -- el resultado medido: la card queda angosta,
   descentrada, con un hueco en blanco de casi el 40-50% del viewport
   a la izquierda y el texto/inputs comprimidos ("Iniciar sesión" /
   "Crear cuenta" partiéndose en 2 líneas dentro de una card que
   debería ocupar el ancho completo). Fix: en móvil ambas cards pasan
   a ocupar el grid completo, igual que el resto de bloques 1/-1 de
   estas mismas pantallas. Selector por atributo porque el
   grid-column problemático es inline en el blade (capa aditiva, sin
   tocar el blade ni routes/web.php). */
@media (max-width: 768px) {
  .pms-site-container > div[style*="grid-column: 4 / span 6"],
  .pms-site-container > div[style*="grid-column: 3 / span 8"] {
    grid-column: 1 / -1 !important;
  }
}

/* --- BUG 2: /sitio/propiedades, panel de filtros --------------------
   .pms-site-filters cambia a `flex-direction: column` en móvil (ver
   @media arriba, ~línea 742) pero conserva `flex-wrap: wrap` de la
   regla base. flex-direction:column + flex-wrap:wrap sin una altura
   definida en el contenedor hace que el navegador abra una "columna"
   nueva A LA DERECHA en vez de simplemente seguir apilando hacia
   abajo -- confirmado con getBoundingClientRect: el campo de
   Amenidades (que fuerza salto de línea propio con `flex:1 1 100%`
   inline) terminaba en left:276/right:570 sobre un viewport de
   390px, con sus chips completamente fuera de la pantalla y sin
   forma de alcanzarlos por scroll normal. Fix: nowrap en móvil, los
   campos del panel simplemente se apilan uno debajo del otro. */
@media (max-width: 768px) {
  .pms-site-filters {
    flex-wrap: nowrap;
  }
}

/* --- BUG 3: /cuenta/registro, pares de campos a 2 columnas -----------
   register.blade.php arma Nombre/Apellido, País/Fecha de nacimiento,
   Correo/Teléfono y Contraseña/Confirmar contraseña con
   `grid-template-columns: 1fr 1fr` inline, sin variante mobile (a
   diferencia de .pms-site-container, que sí reduce sus columnas por
   breakpoint). En un iPhone real cada columna queda con ~130-160px,
   suficiente para desbordar el input nativo de fecha (ícono de
   calendario cortado) y para apretar demasiado el resto. Fix: por
   debajo de 480px (mismo tier ya usado por .pms-site-container para
   el fallback "criterio propio" documentado en F0.4) estos pares
   pasan a una sola columna. Selector acotado al <form> de esta
   pantalla -- el patrón `grid-template-columns: 1fr 1fr` no se usa en
   ninguna otra vista pública/cuenta. */
@media (max-width: 480px) {
  .pms-site-container form div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   F3.3 -- checkout público (App\Livewire\Site\Checkout). Bloque propio
   y pequeño, mismo criterio que .pms-site-detail-*/.pms-site-offer-*:
   solo lo que no existía todavía (inputs de contacto + contenedor del
   widget de Stripe Elements). Reusa .pms-site-offer-summary/
   .pms-site-btn-primary/.pms-site-callout tal cual.
   ============================================================ */
.pms-site-checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
}

.pms-site-checkout-field {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
}

.pms-site-checkout-field label {
  font-size: var(--site-fs-label-sm);
  font-weight: var(--site-font-medium);
  color: var(--site-neutral-80);
}

.pms-site-checkout-field input {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  padding: var(--site-space-3);
  border: 1px solid var(--site-neutral-20);
  border-radius: 8px;
  background: var(--site-neutral-00);
  color: var(--site-ink);
}

.pms-site-checkout-field input:focus {
  outline: 2px solid var(--site-brand-pink);
  outline-offset: 1px;
}

.pms-site-checkout-field__error {
  font-size: var(--site-fs-label-sm);
  color: var(--site-error);
}

#pms-stripe-payment-element {
  margin-top: var(--site-space-3);
}

/* ============================================================
   R1 -- Reskin del sitio publico (2026-08-17). Recoleccion de UX de
   un booking engine externo (repo revenue-vivahouses/booking-engine-
   dave-nat, usado SOLO como fuente de recoleccion visual, jamas
   como dependencia -- ver docs/exploracion/booking-engine-externo/).
   Ambos sistemas comparten el mismo Design Kit de marca (Epilogue,
   #e777aa, #736dea, Material Symbols): esta seccion agrega tokens y
   componentes NUEVOS sin redefinir ninguno de los --site-* ya
   consumidos por codigo existente (tabla de equivalencia en la
   evidence de R0.5 del worklist). Prefijo .pms-site-* BEM, cero
   !important salvo donde ya lo exige F9.10. Sin Tailwind: el shell
   site nunca lo carga.
   ============================================================ */

:root {
  /* --- R1.4: tokens nuevos de color -------------------------------- */
  --site-brand-pink-dk:   #c14f83; /* fin del degradado del boton primario */
  --site-brand-purple-alt: #8480ec; /* lila secundario, distinto del --site-brand-purple existente */

  /* --- R1.4: tokens nuevos de sombra -------------------------------- */
  --site-shadow-card:     0 1px 4px rgba(30, 25, 60, .06);
  --site-shadow-raised:   0 4px 18px rgba(30, 25, 60, .08);
  --site-shadow-hover:    0 8px 22px rgba(60, 50, 90, .12);
  --site-shadow-popover:  0 12px 34px rgba(30, 25, 60, .18);
  --site-shadow-modal:    0 24px 70px rgba(0, 0, 0, .22);

  /* --- R1.4: radios grandes nuevos (los existentes --site-radius-* no se tocan) --- */
  --site-radius-2xl:      22px;
  --site-radius-3xl:      26px;
  --site-radius-4xl:      32px;

  /* --- R1.3: contenedor "dn-gutter" del look nuevo -------------------
     No es max-width clasico: el margen lateral se planta en un valor
     fijo y lo que crece es el contenido central. Coexiste con
     .pms-site-container (grid de 12 columnas existente); las
     pantallas nuevas (R2+) deciden cual usar segun su composicion. */
  --site-shell-gutter-max:   170px;
  --site-shell-gutter-wide:  85px;
  --site-shell-floor:        900px;
  --site-shell-floor-wide:   1160px;
}

/* --- R1.3: contenedor .pms-site-shell -------------------------------- */
.pms-site-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: max(24px, min(var(--site-shell-gutter-max), (100% - var(--site-shell-floor)) / 2));
  /* R2.S -- bug real encontrado y corregido: sin box-sizing:border-box,
     el padding-inline se SUMA al width:100% en vez de repartirse dentro
     de el (default content-box), desbordando el documento por 2x el
     gutter (340px en 1280px de viewport). .pms-site-container (el
     contenedor original) ya traia esta linea; .pms-site-shell (R1.3)
     se creo sin ella porque nunca se uso en ninguna pantalla real hasta
     esta tarea, asi que el smoke test de R1 no pudo detectarlo. */
  box-sizing: border-box;
}

.pms-site-shell--wide {
  padding-inline: max(24px, min(var(--site-shell-gutter-wide), (100% - var(--site-shell-floor-wide)) / 2));
}

/* ============================================================
   R1.3 -- Mapa de los 3 fixes F9.10 que quedaran huerfanos al migrar
   cada pantalla a los blades nuevos (NO se tocan aqui, solo se deja
   el mapa para que la fase que reemplace cada blade sepa que retirar):
   - BUG 1 (selector [style*="grid-column: 4 / span 6"] / [style*=
     "grid-column: 3 / span 8"]) muere cuando R5.3 reemplace
     login.blade.php y register.blade.php por el nuevo markup sin esos
     inline styles absolutos.
   - BUG 2 (.pms-site-filters flex-wrap:nowrap en movil) muere cuando
     R3.4 reestilice el panel de filtros de /sitio/propiedades.
   - BUG 3 (selector [style*="grid-template-columns: 1fr 1fr"] dentro
     de <form>) muere junto con BUG 1, mismo archivo register.blade.php,
     misma tarea R5.3.
   Hasta que esas tareas corran, los 3 fixes siguen vigentes y activos:
   NO se borran en R1.
   ============================================================ */

/* ============================================================
   R1.1 -- Topbar v2: logo vectorial + estilo del look nuevo (fondo
   crema, borde inferior, links con hover rosa, boton de sesion
   pildora outline). Aditivo sobre .pms-site-topbar existente.
   ============================================================ */
.pms-site-topbar-v2 {
  background: var(--site-neutral-05);
  border-bottom: 1px solid var(--site-neutral-20);
  padding-block: var(--site-space-3);
}

@media (min-width: 769px) {
  .pms-site-topbar-v2 {
    padding-block: var(--site-space-4);
  }
}

.pms-site-logo {
  height: 26px;
  width: auto;
}

@media (min-width: 769px) {
  .pms-site-logo {
    height: 34px;
  }
}

.pms-site-topbar-nav {
  flex-wrap: wrap;
}

.pms-site-topbar-link {
  color: var(--site-ink);
  font-size: var(--site-fs-body);
  text-decoration: none;
  transition: color .15s ease;
}

.pms-site-topbar-link:hover,
.pms-site-topbar-link:focus-visible {
  color: var(--site-brand-pink);
}

/* R7.1 -- switcher de idioma ES/EN real (activado, ya no es el hueco
   oculto de R1.1). box-sizing:border-box explicito, leccion RD.2/RD.5. */
.pms-site-lang-switch {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-pill);
  padding: 4px 4px;
  font-size: var(--site-fs-label-sm);
}
.pms-site-lang-switch__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  padding: 2px 8px;
  border-radius: var(--site-radius-pill);
  color: var(--site-neutral-70);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.pms-site-lang-switch__link:hover { color: var(--site-ink); }
.pms-site-lang-switch__link.is-active {
  background: var(--site-brand-pink-bg, rgba(231, 119, 170, 0.12));
  color: var(--site-btn-pressed);
}

/* ============================================================
   R1.2 -- Footer real de marketing: fondo oscuro, dos columnas +
   contacto, logo en blanco.
   ============================================================ */
.pms-site-footer-v2 {
  background: var(--site-ink);
  color: var(--site-neutral-05);
}

.pms-site-footer-v2 .pms-site-container {
  padding-block: var(--site-space-8);
  row-gap: var(--site-space-6);
}

.pms-site-footer-logo {
  height: 36px;
  width: auto;
}

@media (min-width: 769px) {
  .pms-site-footer-logo {
    height: 44px;
  }
}

.pms-site-footer-nav,
.pms-site-footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2);
}

.pms-site-footer-nav a,
.pms-site-footer-contact a {
  color: #e6e6ea;
  text-decoration: none;
  font-size: var(--site-fs-support);
}

.pms-site-footer-nav a:hover,
.pms-site-footer-contact a:hover {
  color: #ffffff;
}

.pms-site-footer-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-4);
  padding-top: var(--site-space-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.pms-site-footer-grupo-texto {
  color: var(--site-neutral-05);
  font-size: var(--site-fs-support);
}

.pms-site-footer-grupo-logos {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

.pms-site-footer-grupo-logo {
  height: 19px;
  width: auto;
  opacity: .92;
}

.pms-site-footer-grupo-logo-beyond {
  height: 27px;
}

.pms-site-footer-copy {
  color: var(--site-neutral-70);
  font-size: var(--site-fs-label-sm);
  padding-top: var(--site-space-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
  .pms-site-footer-v2 [style*="grid-column: 1 / span 4"],
  .pms-site-footer-v2 [style*="grid-column: 5 / span 4"],
  .pms-site-footer-v2 [style*="grid-column: 9 / span 4"] {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   R1.4 -- Botones, inputs y chips del look nuevo. Coexisten con
   .pms-site-btn-primary (existente, sin tocar).
   ============================================================ */

/* Boton primario degradado -- variante nueva, no reemplaza a
   .pms-site-btn-primary existente (que se conserva por si algun
   test/lugar lo sigue usando; las pantallas nuevas de R2+ adoptan
   .pms-site-btn-gradient). */
.pms-site-btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--site-radius-pill);
  background: linear-gradient(135deg, var(--site-brand-pink) 0%, var(--site-brand-pink-dk) 100%);
  color: #ffffff;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}

.pms-site-btn-gradient:hover,
.pms-site-btn-gradient:focus-visible {
  opacity: .92;
  color: #ffffff;
}

/* Boton pildora outline -- el boton dominante del look nuevo:
   transparente con borde, se rellena al hover. */
.pms-site-btn-pill-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 26px;
  border: 1px solid var(--site-brand-pink);
  border-radius: var(--site-radius-pill);
  background: transparent;
  color: var(--site-brand-pink);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.pms-site-btn-pill-outline:hover,
.pms-site-btn-pill-outline:focus-visible {
  background: var(--site-brand-pink);
  color: #ffffff;
}

.pms-site-btn-pill-outline--purple {
  border-color: var(--site-brand-purple-alt);
  color: var(--site-brand-purple-alt);
}

.pms-site-btn-pill-outline--purple:hover,
.pms-site-btn-pill-outline--purple:focus-visible {
  background: var(--site-brand-purple-alt);
  color: #ffffff;
}

.pms-site-btn-pill-outline--danger {
  border-color: var(--site-error);
  color: var(--site-error);
}

.pms-site-btn-pill-outline--danger:hover,
.pms-site-btn-pill-outline--danger:focus-visible {
  background: var(--site-error);
  color: #ffffff;
}

/* Inputs del look nuevo -- variante para formularios de auth/pago
   (fondo solido, borde suave, foco rosa). No reemplaza los inputs
   existentes (los que ya tengan su propia clase siguen igual);
   .pms-site-input es opt-in para pantallas nuevas. */
.pms-site-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  background: #ffffff;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pms-site-input:focus-visible {
  outline: none;
  border-color: var(--site-brand-pink);
  box-shadow: 0 0 0 2px rgba(231, 119, 170, .25);
}

/* R1.4: .pms-site-chip ya existe (linea 623 de site.css original,
   con estado .is-active) -- se reutiliza tal cual para el look nuevo
   de tags/chips, no se duplica. */

/* ============================================================
   R2 -- Home reskin: hero con domo de fotos, buscador pildora,
   marquesina de zonas, carrusel de destacadas, banner de registro /
   proxima estancia, linea de pasos animada por scroll, testimonios +
   etiqueta "sin comisiones". Prefijo .pms-site-* BEM, cero redefinicion
   de tokens existentes, cero !important. .pms-site-hero/.pms-site-search
   base (pre-R2) NO se tocan -- PropertyListing sigue usando
   .pms-site-search tal cual; aqui solo se agregan MODIFICADORES nuevos
   (--pill, --submit--circle) que Home activa via clase adicional.
   .pms-site-cta (el CTA viejo de Home) queda sin uso tras esta tarea
   (reemplazado por .pms-site-banner/.pms-site-next-stay) -- no se borra,
   documentado en evidence de R2.3.
   ============================================================ */

/* --- Hero v2: domo de fotos girando ---------------------------------- */
/* Valores EXACTOS extraidos del CSS/JSX real del repo externo
   (web/src/index.css .hero/.dn-hero-*, web/src/pages/Home.tsx
   useHeroArcRadius/useHeroRotation) -- no aproximados, copiados
   literal tras compilar y leer su fuente, 2026-08-17. */
.pms-site-hero-v2 {
  position: relative;
  display: block;
  /* Antes: calc(100vh - 72px) a secas, o sea la pantalla entera. El
     buscador quedaba tan abajo que el calendario --336px de alto-- no
     tenia donde abrir y se salia. Con un techo, el hero deja de comerse
     toda la pantalla, el titulo y el buscador suben, y el calendario abre
     hacia abajo como debe. */
  height: min(calc(100vh - 112px), 545px);
  min-height: 460px;
  overflow: visible;
  text-align: center;
  background:
    radial-gradient(120% 120% at 100% 100%, #D1CFF8 0%, rgba(249, 249, 249, 0) 55%),
    radial-gradient(120% 120% at 0% 100%, #FFE5F1 0%, rgba(249, 249, 249, 0) 55%),
    #F9F9F9;
}

.pms-site-hero-v2__dome {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.pms-site-hero-v2__dome-card {
  --dome-angle: 0deg;
  --dome-radius: 300px;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 150px;
  height: 190px;
  margin: -95px 0 0 -75px;
  pointer-events: auto;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: #cfc9c0;
  transform: rotate(var(--dome-angle)) translateY(calc(-1 * var(--dome-radius)));
  transition: transform 2.2s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

.pms-site-hero-v2__dome-card:hover {
  box-shadow: 6px 8px 18px rgba(0, 0, 0, .28);
}

.pms-site-hero-v2__static {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.pms-site-hero-v2__static::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(231, 119, 170, .35) 0%, rgba(115, 109, 234, .35) 100%);
}

.pms-site-hero-v2__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* El hueco del arco de fotos NO esta al centro del hero: las fotos
     salen del borde de abajo con un radio fijo, asi que el hueco es
     siempre la franja inferior. Por eso el titulo y el buscador se
     anclan ABAJO y no al centro -- centrados, al acortar el hero se
     montaban encima de las fotos y el titulo se volvia ilegible.
     Amaury, 2026-09-17: "no podemos subir el when where who y el stay
     where everyone wants to be?". */
  justify-content: flex-end;
  gap: 18px;
  padding: 0 24px 54px;
}

.pms-site-hero-v2__content .pms-site-hero__title {
  color: #232323;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  /* Antes 33px/.05em. El hueco del arco de fotos mide ~674px de ancho a
     la altura del titulo y el texto medía ~700: las puntas ("HOSPEDATE"
     y "ESTAR") caian encima de las fotos y se volvian ilegibles. A 28px
     mide ~595 y queda dentro del hueco con aire. */
  font-size: 28px;
  letter-spacing: .04em;
  line-height: 1.05;
  margin: 0;
}

.pms-site-hero-em {
  font-weight: 700;
  font-style: italic;
  color: #e777aa;
}

.pms-site-hero-v2__content .pms-site-search {
  max-width: 900px;
  margin-inline: auto;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-hero-v2__dome-card {
    transition: none;
  }
}

@media (max-width: 700px) {
  .pms-site-hero-v2 {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pms-site-hero-v2__content {
    position: relative;
    inset: auto;
    transform: none;
    order: 0;
    padding: 44px 20px 28px;
  }

  /* Mobile (real bug, dueno 2026-08-19): el domo circular con cada
     foto rotada a su propio angulo (pensado para un hero de
     700-900px de alto en desktop) no cabe en una franja movil de
     230px -- 20 fotos de 150px inclinadas y montadas unas sobre
     otras se ve "descuadrado". En movil se cambia a una tira
     horizontal simple (sin rotacion, sin posicionamiento circular)
     -- el JS de site.js sigue corriendo sin cambios (solo calcula
     variables --dome-angle/--dome-radius que aqui quedan sin efecto
     visual porque transform queda anulado). */
  .pms-site-hero-v2__dome {
    position: relative;
    inset: auto;
    order: 1;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 20px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .pms-site-hero-v2__dome-card {
    position: static;
    flex: 0 0 auto;
    width: 120px;
    height: 150px;
    margin: 0;
    transform: none;
    scroll-snap-align: start;
  }

  .pms-site-hero-v2__dome-card:hover {
    box-shadow: none;
  }
}

/* --- Buscador pildora con borde conico animado (modificador opt-in,
   NO altera .pms-site-search base que PropertyListing sigue usando). -- */
@property --dn-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.pms-site-search--pill {
  box-sizing: border-box;
  border-radius: var(--site-radius-pill);
  position: relative;
  padding: var(--site-space-2) var(--site-space-2) var(--site-space-2) var(--site-space-6);
}

/* Un solo pill continuo (repo externo: .search-bar), NO campos con caja
   propia -- separados por lineas divisorias, sin bordes individuales,
   sin fondo propio por campo. */
.pms-site-search--pill .pms-site-search__field {
  flex: 1 1 0;
  gap: 2px;
  padding-inline: var(--site-space-4);
}

.pms-site-search--pill .pms-site-search__field + .pms-site-search__field {
  border-left: 1px solid var(--site-neutral-20);
}

.pms-site-search--pill .pms-site-search__input,
.pms-site-search--pill .pms-site-search__label,
.pms-site-search--pill .pms-site-search__field > span.pms-site-search__label {
  border: 0;
  background: transparent;
  padding: 0;
}

.pms-site-search--pill .pms-site-search__input {
  font-weight: var(--site-font-medium);
}

.pms-site-search--pill::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--dn-ang), var(--site-brand-pink), var(--site-brand-purple), var(--site-neutral-00) 50%, var(--site-brand-pink));
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
  animation: pms-site-search-spin 3.2s linear infinite paused;
}

.pms-site-search--pill:hover::before,
.pms-site-search--pill:focus-within::before {
  opacity: 1;
  animation-play-state: running;
}

.pms-site-search--pill:hover,
.pms-site-search--pill:focus-within {
  box-shadow: var(--site-shadow-popover);
}

@keyframes pms-site-search-spin {
  to { --dn-ang: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-search--pill::before {
    animation: none;
  }
}

.pms-site-search__submit--circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--site-brand-pink) 0%, var(--site-brand-pink-dk) 100%);
  border: none;
  color: var(--site-neutral-00);
  cursor: pointer;
  transition: background .2s ease;
}

.pms-site-search__submit--circle:hover,
.pms-site-search__submit--circle:focus-visible {
  background: linear-gradient(135deg, var(--site-brand-pink) 0%, #c14f83 100%);
}

/* --- Marquesina de zonas (ticker CSS puro, sin JS) -------------------- */
/* Valores exactos del repo externo (.zone-carousel/.zone-item,
   index.css) -- tarjetas rectangulares, NO chips/pill, sin banda de
   fondo envolvente. */
.pms-site-marquee {
  overflow: hidden;
  padding-block: var(--site-space-4);
}

.pms-site-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: pms-site-marquee-scroll 40s linear infinite;
}

.pms-site-marquee:hover .pms-site-marquee__track,
.pms-site-marquee:focus-within .pms-site-marquee__track {
  animation-play-state: paused;
}

.pms-site-marquee__item {
  display: block;
  min-width: 200px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--site-neutral-20);
  background: var(--site-neutral-00);
  color: var(--site-ink);
  text-decoration: none;
  padding: 16px;
  text-align: center;
  font-family: var(--site-font-family);
  transition: color .18s ease;
}

.pms-site-marquee__item .material-symbols-outlined {
  display: none;
}

.pms-site-marquee__item:hover .pms-site-marquee__count,
.pms-site-marquee__item:hover {
  color: var(--site-brand-pink);
}

.pms-site-marquee__zone-name {
  display: block;
  font-weight: var(--site-font-bold);
  text-transform: uppercase;
  font-size: var(--site-fs-body);
  margin-bottom: 4px;
}

.pms-site-marquee__count {
  display: block;
  color: var(--site-neutral-70);
  font-size: var(--site-fs-support);
}

@keyframes pms-site-marquee-scroll {
  from { transform: translateX(-25%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
}

/* --- Carrusel de propiedades destacadas REAL (repo externo: .dn-fav-*,
   index.css lineas 119-199) -- reemplaza el grid de 4 tarjetas anterior.
   Tarjetas apiladas verticales con la activa al centro y las vecinas
   asomando mas chicas/atenuadas, ficha sincronizada a la derecha. --- */
.pms-site-fav-box {
  /* Sin esto, width:100% y el padding se SUMAN: la caja medía 52px mas
     que su contenedor y desbordaba la pagina a lo ancho. En un telefono
     eso no se ve como una barra de scroll: el navegador achica TODA la
     pagina para que quepa (medido en iPhone 12 Pro: trazado a 412px en
     una pantalla de 390), asi que todo el sitio se veia mas chico y
     desplazado. Un solo elemento encoge el sitio entero. */
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(105deg, #ffffff 0%, #fdf4f8 48%, #fbeef4 100%);
  border: .5px solid #f0cfe0;
  border-radius: 32px;
  padding: 60px;
}

.pms-site-fav-layout {
  display: flex;
  align-items: center;
  gap: 40px;
}

.pms-site-fav-video-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}

.pms-site-fav-stage {
  --fav-step: 170px;
  position: relative;
  width: 100%;
  height: 476px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pms-site-fav-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 252px;
  height: 448px;
  margin: -224px 0 0 -126px;
  border-radius: 22px;
  overflow: hidden;
  background: #d9d4e6 center/cover no-repeat;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(60, 30, 50, .20);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, box-shadow .3s ease;
}

.pms-site-fav-slide.is-active {
  box-shadow: 0 26px 54px rgba(60, 30, 50, .30);
  cursor: default;
}

.pms-site-fav-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, .72));
  pointer-events: none;
}

.pms-site-fav-slide-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  text-align: left;
}

.pms-site-fav-slide-name {
  font-family: var(--site-font-family);
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}

.pms-site-fav-slide-zone {
  font-family: var(--site-font-family);
  display: block;
  margin-top: 3px;
  font-size: 13px;
  opacity: .9;
  color: #fff;
}

.pms-site-fav-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pms-site-fav-dots button {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--site-neutral-20);
  cursor: pointer;
  overflow: hidden;
  transition: width .35s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}

.pms-site-fav-dots button:hover {
  background: #e3b9cf;
}

.pms-site-fav-dots button.on {
  width: 30px;
  background: #f2d7e5;
}

.pms-site-fav-dots button.on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--site-brand-pink);
  transform-origin: left;
  animation: pms-site-fav-progress 3s linear forwards;
}

.pms-site-fav-dots.is-paused button.on::after {
  animation-play-state: paused;
}

@keyframes pms-site-fav-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.pms-site-fav-info-col {
  flex: 0 0 400px;
  max-width: 420px;
}

.pms-site-fav-count {
  display: block;
  font-size: 46px;
  line-height: 1.05;
  margin-bottom: 4px;
  font-weight: 700;
  color: #232323;
}

.pms-site-fav-sub {
  margin-top: 14px;
  text-align: left;
  color: #636363;
  font-size: 15px;
  line-height: 1.4;
}

.pms-site-fav-ficha {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid #f0cfe0;
  display: none;
}

.pms-site-fav-ficha.is-active {
  display: block;
  animation: pms-site-fav-fade .4s ease both;
}

.pms-site-fav-ficha h3 {
  margin: 0;
  font-family: var(--site-font-family);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: #232323;
}

.pms-site-fav-meta {
  margin: 12px 0 0;
  font-size: 16px;
  color: #636363;
  line-height: 1.45;
}

.pms-site-fav-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 26px;
  border: 1px solid var(--site-brand-pink);
  border-radius: 999px;
  color: var(--site-brand-pink);
  font-size: 15px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.pms-site-fav-more:hover {
  background: var(--site-brand-pink);
  color: #fff;
}

@keyframes pms-site-fav-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-fav-slide {
    transition: none;
  }
  .pms-site-fav-ficha.is-active {
    animation: none;
  }
  .pms-site-fav-dots button.on::after {
    animation: none;
    transform: scaleX(1);
  }
}

@media (max-width: 900px) {
  .pms-site-fav-box {
    padding: 36px 26px;
  }
  .pms-site-fav-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .pms-site-fav-video-col {
    width: 100%;
  }
  .pms-site-fav-info-col {
    flex: none;
    max-width: none;
    width: 100%;
  }
  .pms-site-fav-stage {
    height: 372px;
    --fav-step: 104px;
  }
  .pms-site-fav-slide {
    width: 196px;
    height: 348px;
    margin: -174px 0 0 -98px;
  }
  .pms-site-fav-ficha h3 {
    font-size: 28px;
  }
}

/* --compact (2026-09-08): mismas reglas que el @media(max-width:900px) de
   arriba, pero SIN depender del ancho del viewport -- se aplica siempre
   que el carrusel viva en una columna angosta (ficha de propiedad, junto
   al booking box sticky de 5/12). El media query de arriba no alcanza a
   protegerlo porque mira el ancho de la VENTANA, no el de la columna:
   a resoluciones normales de escritorio la ventana es ancha aunque la
   columna sea de ~58%, y el layout de 2 columnas interno (info-col min
   400px + video-col) se desbordaba sobre el booking box. */
.pms-site-fav-box--compact {
  padding: 36px 26px;
}
.pms-site-fav-box--compact .pms-site-fav-layout {
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.pms-site-fav-box--compact .pms-site-fav-video-col {
  width: 100%;
}
.pms-site-fav-box--compact .pms-site-fav-info-col {
  flex: none;
  max-width: none;
  width: 100%;
}
.pms-site-fav-box--compact .pms-site-fav-stage {
  height: 372px;
  --fav-step: 104px;
}
.pms-site-fav-box--compact .pms-site-fav-slide {
  width: 196px;
  height: 348px;
  margin: -174px 0 0 -98px;
}
.pms-site-fav-box--compact .pms-site-fav-ficha h3 {
  font-size: 28px;
}

/* --- Carrusel de propiedades destacadas (version anterior, dejada sin
   usar por si hace falta revertir -- ver .pms-site-fav-* arriba) ------- */
.pms-site-carousel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.pms-site-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--site-space-4);
  scrollbar-width: none;
  border-radius: var(--site-radius-lg);
  /* min-width:0 -- buena practica defensiva para flex+overflow-x:auto
     (los flex items heredan min-width:auto por defecto, lo que puede
     inflar el ancho intrinseco del contenedor si no se acota). NO era
     la causa del overflow real de R2.S -- esa fue la falta de
     box-sizing:border-box en .pms-site-shell (ver su comentario). */
  min-width: 0;
  width: 100%;
}

.pms-site-carousel__track::-webkit-scrollbar {
  display: none;
}

.pms-site-carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-width: 420px;
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  background: var(--site-neutral-00);
  box-shadow: var(--site-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .3s ease, transform .3s ease;
}

.pms-site-carousel__slide.is-active {
  box-shadow: 0 16px 36px rgba(60, 30, 50, .20);
  transform: translateY(-4px);
}

.pms-site-carousel__media {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-20);
}

.pms-site-carousel__body {
  padding: var(--site-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
}

.pms-site-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
}

.pms-site-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--site-neutral-20);
  background: var(--site-neutral-00);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--site-ink);
}

.pms-site-carousel__arrow:hover,
.pms-site-carousel__arrow:focus-visible {
  border-color: var(--site-brand-pink);
  color: var(--site-brand-pink);
}

.pms-site-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
}

.pms-site-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--site-radius-pill);
  background: var(--site-neutral-20);
  position: relative;
  overflow: hidden;
  transition: width .3s ease;
}

.pms-site-carousel__dot.is-active {
  width: 30px;
  background: var(--site-neutral-20);
}

.pms-site-carousel__dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--site-brand-pink);
  transform-origin: left;
  transform: scaleX(0);
  animation: pms-site-dot-fill 3s linear forwards;
}

@keyframes pms-site-dot-fill {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-carousel__dot.is-active::after {
    animation: none;
    transform: scaleX(1);
  }

  .pms-site-carousel__slide {
    transition: none;
  }
}

/* --- Proxima estancia (huesped con sesion) ----------------------------- */
.pms-site-next-stay {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--site-space-6);
  align-items: center;
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-3xl);
  padding: var(--site-space-6);
}

.pms-site-next-stay__media {
  height: 160px;
  border-radius: var(--site-radius-xl);
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-20);
}

.pms-site-next-stay__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--site-space-2);
}

.pms-site-next-stay__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-subtitle);
  color: var(--site-ink);
  margin: 0;
}

.pms-site-next-stay__dates {
  font-family: var(--site-font-family);
  color: var(--site-neutral-70);
  margin: 0;
}

@media (max-width: 640px) {
  .pms-site-next-stay {
    grid-template-columns: 1fr;
  }
}

/* --- Banner de registro con chips flotantes ---------------------------- */
.pms-site-banner {
  position: relative;
  background: var(--site-neutral-05);
  border-radius: var(--site-radius-4xl);
  padding: var(--site-space-12) var(--site-space-8);
  text-align: center;
  overflow: hidden;
}

.pms-site-banner__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-h2);
  line-height: var(--site-lh-h2);
  color: var(--site-ink);
  margin: 0 0 var(--site-space-2);
  position: relative;
  z-index: 1;
}

.pms-site-banner__text {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body-lg);
  color: var(--site-neutral-70);
  margin: 0 0 var(--site-space-6);
  position: relative;
  z-index: 1;
}

.pms-site-hl {
  background-image: linear-gradient(90deg, var(--site-brand-pink), var(--site-brand-purple), var(--site-brand-pink));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--site-font-bold);
  animation: pms-site-hl-shift 6s linear infinite;
}

@keyframes pms-site-hl-shift {
  to { background-position: -200% 0; }
}

.pms-site-banner__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-1);
  padding: var(--site-space-2) var(--site-space-4);
  border-radius: var(--site-radius-pill);
  background: var(--site-neutral-00);
  box-shadow: var(--site-shadow-hover);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .6s cubic-bezier(.34, 1.56, .64, 1), transform .3s ease;
  will-change: transform;
}

.pms-site-banner__chip.is-visible {
  clip-path: circle(75% at 50% 50%);
}

.pms-site-banner__chip .material-symbols-outlined {
  font-size: 18px;
  color: var(--site-brand-pink);
}

.pms-site-banner__chip--1 { top: 12%; left: 6%; }
.pms-site-banner__chip--2 { top: 20%; right: 8%; }
.pms-site-banner__chip--3 { bottom: 14%; left: 12%; }

@media (max-width: 768px) {
  .pms-site-banner__chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-banner__chip {
    clip-path: circle(75% at 50% 50%);
    transition: none;
  }

  .pms-site-hl {
    animation: none;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--site-brand-pink-dk);
  }
}

/* --- Linea de pasos animada por scroll ---------------------------------- */
.pms-site-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--site-space-6);
  margin-top: var(--site-space-8);
}

.pms-site-steps__line {
  position: absolute;
  top: 24px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background: var(--site-neutral-20);
  z-index: 0;
}

.pms-site-steps__line-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--site-brand-pink), var(--site-brand-purple));
  transition: width .5s ease;
}

.pms-site-step {
  position: relative;
  z-index: 1;
}

.pms-site-step .pms-site-step__number {
  transition: background .4s ease, color .4s ease;
}

.pms-site-step.is-active .pms-site-step__number {
  background: var(--site-ink);
  color: var(--site-neutral-00);
}

@media (max-width: 768px) {
  .pms-site-steps {
    grid-template-columns: 1fr;
  }

  .pms-site-steps__line {
    display: none;
  }
}

/* --- Etiqueta "sin comisiones" + testimonios v2 -------------------------- */
.pms-site-fees-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-2);
  padding: var(--site-space-2) var(--site-space-5);
  border-radius: var(--site-radius-pill);
  background: var(--site-chip-active-bg);
  color: var(--site-btn-pressed);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  margin-bottom: var(--site-space-4);
  transform: scale(.2) rotate(-60deg);
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
}

.pms-site-fees-tag.is-visible {
  animation: pms-site-tag-swing .8s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes pms-site-tag-swing {
  0% { transform: scale(.2) rotate(-60deg); opacity: 0; clip-path: circle(0% at 50% 50%); }
  45% { transform: scale(1.15) rotate(14deg); opacity: 1; clip-path: circle(75% at 50% 50%); }
  65% { transform: scale(1) rotate(-10deg); clip-path: circle(100% at 50% 50%); }
  82% { transform: scale(1) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; clip-path: circle(100% at 50% 50%); }
}

.pms-site-fees-tag .material-symbols-outlined {
  font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-fees-tag,
  .pms-site-fees-tag.is-visible {
    animation: none;
    transform: none;
    opacity: 1;
    clip-path: none;
  }
}

.pms-site-shine {
  background-image: linear-gradient(100deg, currentColor 40%, var(--site-neutral-00) 50%, currentColor 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--site-font-bold);
  animation: pms-site-shine-sweep 3.5s ease-in-out infinite;
}

@keyframes pms-site-shine-sweep {
  0% { background-position: 200% 0; }
  60%, 100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-shine {
    animation: none;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--site-btn-pressed);
  }
}

/* Caja envolvente real (.testimonials-box) -- degradado lavanda suave,
   borde fino, radio 32px, padding 60px. Nuestra grid vive DENTRO. */
.pms-site-testimonials-box {
  background: linear-gradient(160deg, #efedfa 0%, #f6f5fc 42%, #ffffff 100%);
  border: .5px solid #cbc6ef;
  border-radius: 32px;
  padding: 60px;
}

@media (max-width: 900px) {
  .pms-site-testimonials-box {
    padding: 36px 26px;
  }
}

.pms-site-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .pms-site-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pms-site-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.pms-site-testimonial--v2 {
  border-radius: 16px;
  transition: box-shadow .2s ease;
}

.pms-site-testimonial--v2:hover {
  box-shadow: 0 8px 22px rgba(60, 50, 90, .12);
}

.pms-site-testimonials-cta {
  text-align: center;
  margin-top: var(--site-space-8);
}

@media (max-width: 768px) {
  .pms-site-testimonials-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   R3 -- Listado de propiedades: layout dos columnas con mapa Leaflet
   sticky, tarjeta v2 con carrusel, sync hover tarjeta<->pin. Prefijo
   .pms-site-* consistente, NINGUNA variable --site-* existente
   redefinida (solo se reusan: --site-brand-purple, --site-shadow-hover,
   --site-radius-lg, --site-space-*, --site-elevation-1). Lleva
   box-sizing:border-box explicito en TODO contenedor con padding+width
   (leccion RD.2).
   ============================================================ */

.pms-site-filters--v2 {
  align-items: center;
}

.pms-site-chip--in {
  animation: pms-site-chip-in .28s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes pms-site-chip-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pms-site-chip--in { animation: none; }
}

.pms-site-chip--tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--site-fs-label-sm);
}

.pms-site-results-header--v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4);
  flex-wrap: wrap;
  margin-block: var(--site-space-6);
}

/* Boton "Ver mapa/Ver lista" -- solo visible en movil, el desktop
   siempre muestra ambas columnas lado a lado. */
.pms-site-listing-map-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding-inline: var(--site-space-4);
}

/* --- Layout dos columnas ------------------------------------------- */
.pms-site-listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: var(--site-space-6);
  align-items: start;
  box-sizing: border-box;
}

.pms-site-listing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-space-6);
  max-height: 704px;
  overflow-y: auto;
  padding-right: var(--site-space-2);
  box-sizing: border-box;
}

.pms-site-listing-map-wrap {
  position: sticky;
  top: var(--site-space-6);
  height: 704px;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2);
  box-sizing: border-box;
}

.pms-site-map {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  background: var(--site-neutral-10);
  box-shadow: var(--site-elevation-1);
}

.pms-site-map-note {
  margin: 0;
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
  text-align: center;
}

/* Pin de precio -- ovalo blanco, texto bold, borde gris; activo (hover
   desde tarjeta, o mouseover propio) -> borde lila + halo, mismo color
   que el halo de la tarjeta para que la relacion visual sea evidente. */
.pms-site-map-pin {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--site-neutral-00);
  border: 1.5px solid var(--site-neutral-70);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 12px;
  color: var(--site-ink);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30, 25, 60, .18);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pms-site-map-pin.is-active {
  border-color: var(--site-brand-purple);
  box-shadow: 0 0 0 3px rgba(115, 109, 234, .25), 0 1px 4px rgba(30, 25, 60, .18);
  transform: translateY(-2px);
  z-index: 2;
}

/* --- Tarjeta de propiedad v2 (carrusel + halo) ---------------------- */
.pms-site-property-card--v2 {
  position: relative;
  border: 1.5px solid transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pms-site-property-card--v2.is-active,
.pms-site-property-card--v2:hover {
  border-color: var(--site-brand-purple);
  box-shadow: 0 0 0 3px rgba(115, 109, 234, .15), var(--site-shadow-hover);
}

.pms-site-property-card__link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.pms-site-property-card__carousel {
  position: relative;
  height: 180px;
  overflow: hidden;
  background-color: var(--site-neutral-20);
}

.pms-site-property-card__slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pms-site-property-card__slides::-webkit-scrollbar { display: none; }

.pms-site-property-card__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}

.pms-site-property-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .9);
  color: var(--site-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}

.pms-site-property-card__carousel:hover .pms-site-property-card__nav,
.pms-site-property-card__carousel:focus-within .pms-site-property-card__nav {
  opacity: 1;
}

.pms-site-property-card__nav--prev { left: 8px; }
.pms-site-property-card__nav--next { right: 8px; }

.pms-site-property-card__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
}

.pms-site-property-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
}

.pms-site-property-card__dot.is-active {
  background: var(--site-neutral-00);
}

.pms-site-property-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.pms-site-pagination-wrap {
  margin-top: var(--site-space-8);
  box-sizing: border-box;
}

/* --- Movil: mapa colapsable, una columna de tarjetas ---------------- */
@media (max-width: 900px) {
  .pms-site-listing-map-toggle {
    display: inline-flex;
  }

  .pms-site-listing {
    grid-template-columns: 1fr;
  }

  .pms-site-listing-cards {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: visible;
  }

  .pms-site-listing-map-wrap {
    position: static;
    height: 380px;
    display: none;
  }

  .pms-site-listing-map-wrap.is-visible {
    display: flex;
  }
}

@media (max-width: 640px) {
  .pms-site-listing-cards {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   R4 -- Ficha de propiedad y OfferPage: galeria con fundido cruzado +
   modal completo, mapa complementario de ubicacion (circulo ~1km,
   coordenadas SIEMPRE aproximadas via Property::approximateCoordinates(),
   R0.6), calendario en tema lila, transiciones compartidas. Ningun
   token --site-* existente se redefine, solo se agregan reglas nuevas
   y overrides puntuales sobre selectores ya usados por PropertyDetail/
   OfferPage.
   ============================================================ */

.pms-site-fade-enter { transition: opacity .55s cubic-bezier(.22, 1, .36, 1); }
.pms-site-fade-enter-start { opacity: 0; }
.pms-site-fade-enter-end { opacity: 1; }

.pms-site-detail-gallery__hero-wrap {
  /* RD.2-continuacion: altura EXPLICITA necesaria -- en el layout de 1
     columna (movil, media query existente de .pms-site-detail-gallery)
     este wrap queda solo en su fila del grid, sin hermano del que
     heredar altura por stretch; como todos sus hijos son
     position:absolute (excluidos del auto-height del padre), el wrap
     colapsaba a 0px y la foto (que SI trae su propia altura explicita
     420px/260px de la regla original .pms-site-detail-gallery__hero,
     sin tocar) se salia de esa caja y tapaba la tira de miniaturas de
     abajo -- bug real encontrado por el propio E2E de R4.S en 390px,
     confirmado con getBoundingClientRect antes de este fix. */
  position: relative;
  height: 420px;
}

@media (max-width: 768px) {
  .pms-site-detail-gallery__hero-wrap {
    height: 260px;
  }
}

.pms-site-detail-gallery__hero {
  position: absolute;
  inset: 0;
}

.pms-site-detail-gallery__viewall {
  position: absolute;
  right: var(--site-space-3);
  bottom: var(--site-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-1);
  background: var(--site-neutral-00);
  color: var(--site-ink);
  border: 0;
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  cursor: pointer;
  box-shadow: var(--site-shadow-raised);
}

.pms-site-detail-gallery__thumb {
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
}

.pms-site-gallery-modal-overlay {
  background: rgba(20, 18, 24, .92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pms-site-gallery-modal__img {
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--site-radius-md);
}

.pms-site-gallery-modal__close {
  position: absolute;
  top: var(--site-space-4);
  right: var(--site-space-4);
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: var(--site-neutral-00);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pms-site-gallery-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: var(--site-neutral-00);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pms-site-gallery-modal__nav--prev { left: var(--site-space-4); }
.pms-site-gallery-modal__nav--next { right: var(--site-space-4); }

.pms-site-gallery-modal__counter {
  position: absolute;
  bottom: var(--site-space-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--site-neutral-00);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  background: rgba(255, 255, 255, .12);
  padding: var(--site-space-1) var(--site-space-3);
  border-radius: var(--site-radius-pill);
}

@media (max-width: 640px) {
  .pms-site-gallery-modal__nav { width: 40px; height: 40px; }
  .pms-site-gallery-modal__close { width: 40px; height: 40px; }
}

/* Mapa complementario de la ficha (Leaflet, mismo patron que R3;
   coordenadas SIEMPRE aproximadas del lado servidor). */
.pms-site-detail-map {
  height: 280px;
  border-radius: var(--site-radius-lg);
  margin-top: var(--site-space-3);
  overflow: hidden;
}

/* Calendario en tema lila (R4.2). Decision documentada: is-checkin/
   is-checkout usan radio simetrico (--site-radius-md) en vez de "radio
   a un lado" -- un checkin sin checkout todavia (primer click, el caso
   mas comun) se veria roto con radio asimetrico sin saber de antemano
   si habra un checkout en la misma fila; el resultado visual sigue
   siendo claramente distinto del resto de la grilla via el fondo lila
   solido + el fill continuo de is-in-range entre ambos extremos. */
.pms-site-availability-calendar__day {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.pms-site-availability-calendar__day.is-available:hover {
  outline: 1.5px dashed var(--site-brand-purple);
  outline-offset: -1.5px;
}
.pms-site-availability-calendar__day.is-in-range {
  background: rgba(115, 109, 234, .16);
}
.pms-site-availability-calendar__day.is-checkin,
.pms-site-availability-calendar__day.is-checkout {
  background: var(--site-brand-purple);
  color: var(--site-neutral-00);
  font-weight: var(--site-font-medium);
  border-radius: 12px;
}

/* Realce visual de las tarjetas/resumen compartidos por PropertyDetail
   (booking box) y OfferPage (resumen de oferta + tarjeta de propiedad)
   -- override puntual sobre selectores YA existentes, ningun --site-*
   nuevo, ninguna propiedad de layout tocada (solo radio/sombra). */
.pms-site-offer-summary {
  border-radius: var(--site-radius-2xl);
  box-shadow: var(--site-shadow-card);
}
.pms-site-property-card {
  border-radius: var(--site-radius-2xl);
  box-shadow: var(--site-shadow-card);
}

/* ============================================================
   R5 -- Pago y autenticacion: checkout reestilado (resumen
   sticky + inputs .pms-site-input + caption de Stripe),
   confirmacion con hero de foto real + saludo, y las 4 pantallas
   de auth de huesped (icono + inputs .pms-site-input + toggle de
   contrasena). Bloque propio y pequeno, ningun --site-* existente
   redefinido, .pms-site-input/.pms-site-offer-summary/
   .pms-site-callout se reusan tal cual.
   ============================================================ */

@media (min-width: 769px) {
  .pms-site-checkout-summary--sticky {
    position: sticky;
    top: var(--site-space-8);
    align-self: start;
  }
}

.pms-site-checkout-powered-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--site-space-2) 0 0;
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
}
.pms-site-checkout-powered-by .material-symbols-outlined {
  font-size: 16px;
}

.pms-site-confirmed-hero {
  height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.pms-site-confirmed-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,35,35,0) 40%, rgba(35,35,35,.55) 100%);
}
.pms-site-confirmed-hero__overlay {
  position: relative;
  z-index: 1;
  padding: var(--site-space-6) var(--site-space-8);
}
.pms-site-confirmed-hero__dates {
  color: var(--site-neutral-00);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-subtitle);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
@media (max-width: 768px) {
  .pms-site-confirmed-hero { height: 240px; }
}

.pms-site-auth-card {
  max-width: 520px;
}
.pms-site-auth-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--site-space-4);
}
.pms-site-auth-icon .material-symbols-outlined {
  font-size: 64px;
  color: var(--site-brand-pink);
}

.pms-site-password-field {
  position: relative;
}
.pms-site-password-field input {
  padding-right: 44px !important;
}
.pms-site-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  color: var(--site-neutral-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--site-radius-sm);
}
.pms-site-password-toggle:hover {
  color: var(--site-ink);
  background: var(--site-neutral-10);
}
.pms-site-password-toggle:focus-visible {
  outline: 2px solid var(--site-brand-pink);
  outline-offset: 1px;
}



/* ============================================================
   R6.1 -- Sidebar de cuenta de huesped (.pms-site-account-nav-*)
   Migracion de las 4 pantallas de cuenta (/cuenta/perfil,
   /cuenta/configuracion, /cuenta/mis-reservas,
   /cuenta/reservas-anteriores) del shell portal/editorial al shell
   site. Patron de barra horizontal con indicador deslizante (adaptado
   del "sidebar Nivel2" del externo: aqui es top-bar por decision de
   alcance pragmatico, para no reestructurar el layout de una columna
   de .portal-body de guest-portal.css, que se sigue cargando tal
   cual para el contenido interno de estas 4 vistas). Consume
   unicamente tokens --site-* ya existentes, no redefine ninguno.
   box-sizing:border-box en TODO (leccion RD.2/RD.5).
============================================================= */
.pms-site-account-nav {
  box-sizing: border-box;
  width: 100%;
  background: var(--site-neutral-00);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-2);
  margin-bottom: var(--site-space-4);
}
.pms-site-account-nav *,
.pms-site-account-nav *::before,
.pms-site-account-nav *::after {
  box-sizing: border-box;
}

.pms-site-account-nav__drawer-toggle {
  display: none;
  align-items: center;
  gap: var(--site-space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--site-space-2) var(--site-space-3);
  background: transparent;
  border: none;
  border-radius: var(--site-radius-md);
  color: var(--site-ink);
  font-family: var(--site-font-family);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.pms-site-account-nav__drawer-toggle:hover { background: var(--site-neutral-05); }

.pms-site-account-nav__panel {
  position: relative;
}

.pms-site-account-nav__indicator-track {
  position: relative;
  display: flex;
  gap: 2px;
}

.pms-site-account-nav__indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
  background: var(--site-brand-pink-bg, rgba(231, 119, 170, 0.1));
  border-radius: var(--site-radius-md);
  transform: translateX(calc(var(--indicator-index, 0) * 100%));
  transition: transform 0.32s cubic-bezier(.34, 1.2, .4, 1);
  z-index: 0;
  pointer-events: none;
}

.pms-site-account-nav__link {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: var(--site-space-2) var(--site-space-2);
  border-radius: var(--site-radius-md);
  color: var(--site-neutral-70);
  font-family: var(--site-font-family);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.pms-site-account-nav__link .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-size: 1.15rem; }
.pms-site-account-nav__link:hover { color: var(--site-ink); }
.pms-site-account-nav__link.is-active { color: var(--site-btn-pressed); font-weight: 700; }

.pms-site-account-nav__logout {
  display: contents;
}
.pms-site-account-nav__link--logout { color: var(--site-error); }
.pms-site-account-nav__link--logout:hover { color: var(--site-error-dk, var(--site-error)); background: var(--site-error-bg, rgba(210, 34, 0, 0.06)); }

@media (max-width: 768px) {
  .pms-site-account-nav__drawer-toggle { display: flex; }
  .pms-site-account-nav__panel { display: none; }
  .pms-site-account-nav__panel.is-open {
    display: block;
    margin-top: var(--site-space-2);
  }
  .pms-site-account-nav__indicator-track {
    flex-direction: column;
    gap: 4px;
  }
  .pms-site-account-nav__indicator { display: none; }
  .pms-site-account-nav__link { justify-content: flex-start; }
  .pms-site-account-nav__logout { display: block; margin-top: var(--site-space-2); border-top: 1px solid var(--site-line); padding-top: var(--site-space-2); }
}

/* ============================================================
   2026-09-08 -- página pública "Para Propietarios" (Owners.php).
   Mismos tokens (--site-*) que el resto del kit; nada de valores
   sueltos. El botón "Dueños" del topbar reusa .pms-site-btn-pill-outline
   ya existente (no necesita clase propia).
   ============================================================ */

.pms-site-owners-hero {
  background: linear-gradient(135deg, var(--site-brand-pink) 0%, var(--site-brand-purple) 100%);
  padding-block: var(--site-space-12) var(--site-space-10);
  text-align: center;
}

/* .pms-site-hero__title ya define font/tamaño/tracking correctos;
   aquí solo se ajusta el color porque esta sección tiene fondo oscuro,
   distinto del fondo claro donde vive esa clase en el home. */
.pms-site-owners-hero .pms-site-hero__title {
  color: var(--site-neutral-00);
}

.pms-site-owners-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--site-space-6);
}

.pms-site-owners-service__icon {
  font-size: 32px;
  color: var(--site-brand-pink);
}

.pms-site-owners-service__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 18px;
  margin: var(--site-space-2) 0 var(--site-space-1);
  color: var(--site-ink);
}

.pms-site-owners-service__text {
  color: var(--site-neutral-70);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.pms-site-owners-tariffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--site-space-4);
}

.pms-site-owners-tariff {
  border: 1px solid var(--site-neutral-20);
  border-radius: 12px;
  padding: var(--site-space-4);
}

.pms-site-owners-tariff__title {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--site-space-2);
  color: var(--site-brand-pink);
}

.pms-site-owners-tariff__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--site-neutral-80);
}

.pms-site-owners-earnings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--site-space-3);
}

.pms-site-owners-earnings__item {
  background: var(--site-neutral-05);
  border-radius: 12px;
  padding: var(--site-space-4);
  text-align: center;
}

.pms-site-owners-earnings__amount {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 22px;
  color: var(--site-ink);
}

.pms-site-owners-earnings__zone {
  color: var(--site-neutral-70);
  font-size: 14px;
  margin-top: var(--site-space-1);
}

.pms-site-owners-footnote {
  color: var(--site-neutral-70);
  font-size: 13px;
  margin-top: var(--site-space-4);
}

/* Contenido del modal-2 del swal (Swal.fire html:) -- el popup hereda
   font-family de .pms-site-body via cascada normal, no hace falta
   redeclararlo aquí. */
.pms-site-owners-swal2-content {
  text-align: left;
  max-height: 45vh;
  overflow-y: auto;
  padding-inline: 4px;
}

.pms-site-owners-swal2-content ul {
  margin: var(--site-space-3) 0 0;
  padding-left: 1.2em;
}

.pms-site-owners-swal2-content li {
  margin-bottom: var(--site-space-1);
}

/* ============================================================
   2026-09-08 -- carrusel de TESTIMONIOS, reusando el MISMO mecanismo
   de .pms-site-fav-* (propiedades destacadas): mismo JS
   (pmsSiteInitFavCarousel), mismas clases de posicion/transform/dots/
   ficha. La tarjeta usa la foto REAL de la propiedad como fondo (igual
   que el carrusel de propiedades) con un avatar encima -- foto real
   del huésped si existe (autorización explícita de Amaury, ver
   docblock de Home::testimonials()), si no, iniciales+color.
   ============================================================ */

/* Scrim oscuro sobre la foto de la propiedad, para que el avatar y el
   texto blanco de encima sigan legibles sobre cualquier foto. */
.pms-site-fav-slide--avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
}

.pms-site-fav-slide--avatar-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--site-space-6);
  text-align: center;
}

.pms-site-fav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .8);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 28px;
  color: #ffffff;
  margin-bottom: var(--site-space-3);
  flex-shrink: 0;
  overflow: hidden;
}

.pms-site-fav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pms-site-fav-slide-caption {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.pms-site-fav-slide-stars {
  font-size: 13px;
  line-height: 1;
  margin: 4px 0;
  letter-spacing: 1px;
}

/* Ficha (panel derecho, sincronizado) para el testimonio activo. */
.pms-site-fav-ficha__rating {
  display: block;
  font-size: 15px;
  line-height: 1;
  margin-bottom: var(--site-space-2);
  letter-spacing: 2px;
}

.pms-site-fav-ficha__quote {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-regular);
  font-size: 17px;
  line-height: 1.5;
  color: var(--site-ink);
  margin: 0;
  /* Reseñas reales llegan a ser párrafos largos -- ya se recortan a
     ~500 caracteres en PHP (Home::testimonials(), quote_excerpt), y
     este límite de líneas es solo una red de seguridad visual extra
     para que el panel nunca crezca más que el stack de tarjetas de
     la izquierda (448px), que es lo que hace ver bien a este carrusel. */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pms-site-fav-ficha__quote::before { content: '\201C'; }
.pms-site-fav-ficha__quote::after { content: '\201D'; }


/* Busqueda por direccion: distancia de cada propiedad al punto buscado. */
.pms-site-chip--distancia {
    background: #eef4ff;
    color: #1d4ed8;
    border-color: #d4e2ff;
}
.pms-site-search-origen {
    margin: 0 0 14px;
    color: #5b6472;
    font-size: 14px;
}


/* Campo libre dentro del panel de zonas: permite escribir una direccion,
   no solo elegir de la lista. */
.pms-site-zone-panel__buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    background: #fff;
}
.pms-site-zone-panel__buscar .material-symbols-outlined { font-size: 18px; color: #8a93a3; }
.pms-site-zone-panel__input {
    flex: 1;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    color: #10345B;
    background: transparent;
    min-width: 0;
}
.pms-site-zone-panel__input::placeholder { color: #9aa3b2; }
.pms-site-zone-panel__item--buscar { font-weight: 600; color: #1d4ed8; }


/* ── G-02: sugerencias de LUGAR dentro del panel de zonas ─────────────
   El desplegable se comporta como el de Google: primero nuestras
   colonias (coincidencia de texto sobre dato propio) y debajo, tras un
   encabezado, los lugares que devuelve el geocodificador -- nombre en
   negritas y ubicacion en gris. Reusa .pms-site-zone-panel__item para
   no inventar un segundo lenguaje visual. */
.pms-site-zone-panel {
    max-height: min(62vh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (min-width: 769px) {
    /* Los nombres de lugar son largos ("Fuente de Cibeles, Colonia Roma
       Norte..."): mismo ancho que los demas popovers del buscador (320px)
       en vez de los 280px que usaba la lista de colonias sola. En movil
       manda el @media de .pms-site-guest-picker__panel (width: 100%). */
    .pms-site-zone-panel { width: 320px; }
}
.pms-site-zone-panel__buscar {
    position: sticky;
    top: 0;
    z-index: 2;
    /* tapa el padding del panel cuando la lista se desliza por detras */
    box-shadow: 0 -10px 0 0 #fff;
}
.pms-site-zone-panel__grupo {
    margin: 8px 0 2px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a3;
}
.pms-site-zone-panel__item--lugar {
    align-items: flex-start;
}
.pms-site-zone-panel__item--lugar .material-symbols-outlined {
    margin-top: 2px;
}
.pms-site-zone-panel__lugar {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}
.pms-site-zone-panel__lugar-nombre {
    font-weight: 600;
    color: #10345B;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* gana al `margin-left: auto` de .pms-site-zone-panel__item small (que
   ahi empuja el contador de propiedades a la derecha). */
.pms-site-zone-panel__item small.pms-site-zone-panel__lugar-sub {
    margin-left: 0;
    color: #8a93a3;
    font-size: 12.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Buscando lugares..." -- Livewire controla el display con estilo
   inline (none / flex), aqui solo va el aspecto. */
.pms-site-zone-panel__cargando {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #8a93a3;
}
.pms-site-zone-panel__spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid #dfe4ec;
    border-top-color: #8a93a3;
    border-radius: 50%;
    animation: pms-site-zone-spin .7s linear infinite;
}
@keyframes pms-site-zone-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pms-site-zone-panel__spinner { animation: none; }
}

/* ==========================================================================
   BUSCADOR DEL HERO — copiado de wander.com (W-03, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury: "Copia por favor su menu de busqueda y implementa con exactitud...
   es MUY superior al que tenemos hoy y asi lo quiero, identico."

   Cada numero de aqui se midio del DOM vivo de wander.com con Playwright
   (estilos calculados, no su hoja de estilos). La tabla completa y las tres
   diferencias deliberadas estan en docs/kb/sitio/buscador-wander.md.

   La idea que hay que entender antes de tocar nada: NO son tres
   desplegables. Es UN SOLO panel que se redimensiona y se desliza de un
   segmento a otro. Por eso .wsearch__panel anima width, height y transform,
   y por eso los tres contenidos viven dentro de el, apilados, y solo cambia
   cual se ve. Si alguien lo parte en tres desplegables, vuelve el parpadeo.

   Espacio de nombres propio (.wsearch-*): .pms-site-search NO se toca, la
   usan la pagina de resultados y la ficha de cada propiedad.
   ========================================================================== */

.wsearch,
.wsearch-cal {
  --wsearch-ink:        #202020;                      /* segmento activo */
  --wsearch-ink-soft:   #636363;                      /* segmento en reposo */
  --wsearch-line:       rgba(0, 0, 0, .10);           /* divisor entre segmentos */
  --wsearch-sombra:     0 1px 4px rgba(0, 0, 0, .06),
                        0 3px 12px rgba(0, 0, 0, .06),
                        0 0 0 1px rgba(0, 0, 0, .04);
  /* easeOutQuart y easeOutQuint: arrancan rapido y frenan largo. Se sienten
     como algo que se solto y se detuvo solo, no como algo que se apago. */
  --wsearch-curva-barra: cubic-bezier(.165, .84, .44, 1);
  --wsearch-curva-panel: cubic-bezier(.22, 1, .36, 1);
}

.wsearch {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  width: 100%;
  font-family: var(--site-font-family);
  z-index: 40;
}

/* ---------- La barra ---------- */

.wsearch__bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--wsearch-sombra);
  transition: box-shadow 250ms var(--wsearch-curva-barra);
}

.wsearch__bar:hover { box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.05); }

/* La capsula blanca que se desliza al segmento activo. Es un elemento
   aparte, detras de los botones (asi lo hace Wander): un solo objeto que
   se mueve, no tres fondos que se prenden y se apagan. */
.wsearch__glider {
  position: absolute;
  top: 2px;
  left: 0;
  height: 44px;
  width: var(--wsearch-glider-w, 0px);
  transform: translate3d(var(--wsearch-glider-x, 0px), 0, 0);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .05);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 250ms var(--wsearch-curva-barra),
              width     250ms var(--wsearch-curva-barra),
              opacity   160ms var(--wsearch-curva-barra);
}

.wsearch[data-abierto] .wsearch__glider { opacity: 1; }

/* ---------- Los segmentos ---------- */

.wsearch__seg {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  /* Wander da a cada segmento 116-123 px aunque la palabra sea corta: es
     lo que evita que la barra se vea apretada y desigual. Nuestras
     palabras son mas largas ("Cuando" contra "When"), asi que el piso es
     un poco menor y el resultado queda en el mismo rango. */
  min-width: 104px;
  padding-inline: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--wsearch-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  /* El cambio de color acompana al deslizamiento de la capsula. */
  transition: color 250ms var(--wsearch-curva-barra);
}

.wsearch__seg:hover { color: var(--wsearch-ink); }
.wsearch__seg[aria-expanded="true"] { color: var(--wsearch-ink); }

/* Respuesta al presionar, no al soltar: el hundido ocurre en el mismo
   instante del toque. Es la diferencia entre "vivo" y "tardado". */
.wsearch__seg:active { transform: scale(.985); }

.wsearch__seg:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

/* El valor elegido (una zona, unas fechas) se ve mas oscuro que la
   etiqueta: es el dato, la etiqueta solo lo nombra. */
.wsearch__valor { color: var(--wsearch-ink); }

.wsearch__seg .material-symbols-outlined { font-size: 18px; line-height: 1; }

/* Divisores: una linea entre segmentos vecinos, que desaparece cuando la
   capsula esta en cualquiera de los dos lados (si no, la capsula la cruza). */
.wsearch__div {
  width: 1px;
  height: 22px;
  flex: 0 0 1px;
  background: var(--wsearch-line);
  transition: opacity 200ms var(--wsearch-curva-barra);
}

.wsearch__div[data-oculto="1"] { opacity: 0; }

/* ---------- El boton de buscar ---------- */

.wsearch__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  margin-left: 4px;
  padding-inline: 18px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 200ms var(--wsearch-curva-barra), opacity 200ms linear;
}

.wsearch__submit:hover { opacity: .88; }
.wsearch__submit:active { transform: scale(.97); }
.wsearch__submit:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* ---------- El panel (uno solo) ---------- */

.wsearch__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  box-sizing: border-box;
  width: var(--wsearch-panel-w, 344px);
  height: var(--wsearch-panel-h, 0px);
  transform: translate3d(var(--wsearch-panel-x, 0px), var(--wsearch-cerrado-y, -6px), 0) scale(.97);
  transform-origin: var(--wsearch-origen-x, 50%) 0;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color: var(--wsearch-ink);
  box-shadow: var(--wsearch-sombra);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transition: width     300ms var(--wsearch-curva-panel),
              height    300ms var(--wsearch-curva-panel),
              transform 300ms var(--wsearch-curva-panel),
              opacity   180ms var(--wsearch-curva-panel);
}

/* Entra y sale por el mismo camino, desde el segmento que lo abrio. */
.wsearch[data-abierto] .wsearch__panel {
  transform: translate3d(var(--wsearch-panel-x, 0px), 0, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Si no cabe abajo, abre hacia arriba. Un panel que se sale de la
   pantalla obliga a hacer scroll justo cuando la persona esta a medio
   elegir, y al hacer scroll pierde de vista la barra. */
.wsearch[data-arriba] .wsearch__panel {
  top: auto;
  bottom: calc(100% + 8px);
  --wsearch-cerrado-y: 6px;
  transform-origin: var(--wsearch-origen-x, 50%) 100%;
}

/* Y si no cabe ni arriba ni abajo (pantallas bajitas), se recorta y el
   contenido se desplaza dentro del panel, nunca fuera de la pantalla. */
.wsearch[data-recortado] .wsearch__panel { overflow-y: auto; }

.wsearch__panes { position: relative; width: 100%; height: var(--wsearch-panes-h, auto); }

.wsearch__pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--wsearch-curva-panel);
}

.wsearch__pane[data-visible="1"] { opacity: 1; pointer-events: auto; }

/* ---------- Contenido: Donde ---------- */

.wsearch__buscar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.wsearch__buscar .material-symbols-outlined { font-size: 20px; color: var(--wsearch-ink-soft); }

.wsearch__buscar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--wsearch-ink);
}

.wsearch__buscar input::placeholder { color: #9a9a9a; }

.wsearch__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 999px;
  background: #f0f0f0;
  color: var(--wsearch-ink);
  cursor: pointer;
  transition: background 160ms var(--wsearch-curva-barra);
}

.wsearch__cerrar:hover { background: #e4e4e4; }
.wsearch__cerrar .material-symbols-outlined { font-size: 16px; }

.wsearch__grupo {
  margin: 0;
  padding: 16px 20px 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wsearch-ink-soft);
}

.wsearch__lista { max-height: 264px; overflow-y: auto; padding-bottom: 10px; }

.wsearch__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 20px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--wsearch-ink);
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--wsearch-curva-barra);
}

.wsearch__item:hover { background: #f6f6f6; }
.wsearch__item:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -2px; }

/* El icono en su cuadro redondeado con contorno, como Wander. */
.wsearch__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  color: var(--wsearch-ink);
}

.wsearch__pin .material-symbols-outlined { font-size: 20px; }

.wsearch__item-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wsearch__item-sub { font-size: 12.5px; font-weight: 400; color: var(--wsearch-ink-soft); }
.wsearch__conteo { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--wsearch-ink-soft); }

.wsearch__cargando {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 12px;
  font-size: 13px;
  color: var(--wsearch-ink-soft);
}

.wsearch__spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(0, 0, 0, .14);
  border-top-color: var(--wsearch-ink);
  border-radius: 999px;
  animation: wsearch-giro .7s linear infinite;
}

@keyframes wsearch-giro { to { transform: rotate(360deg); } }

/* ---------- Contenido: Cuando ---------- */

.wsearch__cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.wsearch__limpiar {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wsearch-ink-soft);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 140ms var(--wsearch-curva-barra), color 140ms var(--wsearch-curva-barra);
}

.wsearch__limpiar:hover { background: #f4f4f4; color: var(--wsearch-ink); }
.wsearch__limpiar[disabled] { opacity: .4; cursor: default; }
.wsearch__limpiar[disabled]:hover { background: transparent; color: var(--wsearch-ink-soft); }

.wsearch__meses {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 4px 28px 22px;
}

.wsearch__mes-titulo {
  display: block;
  margin-bottom: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--wsearch-ink);
}

.wsearch__nav {
  position: absolute;
  top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wsearch-ink);
  cursor: pointer;
  transition: background 140ms var(--wsearch-curva-barra);
}

.wsearch__nav:hover { background: #f2f2f2; }
.wsearch__nav[disabled] { opacity: .25; cursor: default; }
.wsearch__nav[disabled]:hover { background: transparent; }
.wsearch__nav--prev { left: 18px; }
.wsearch__nav--next { right: 18px; }

.wsearch__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}

.wsearch__dia-semana {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wsearch-ink-soft);
}

.wsearch__dia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--wsearch-ink);
  cursor: pointer;
  transition: background 140ms var(--wsearch-curva-barra), color 140ms var(--wsearch-curva-barra);
}

.wsearch__dia:hover:not([disabled]) { background: #f0f0f0; }
.wsearch__dia[disabled] { color: #c9c9c9; cursor: default; }

/* La disponibilidad se lee EN el calendario, sin segundo calendario ni
   leyenda de colores que haya que aprenderse: lo ocupado va tachado, y
   tachado es lo que todo el mundo entiende sin que se lo expliquen. Lo
   pasado solo se apaga -- no esta ocupado, simplemente ya fue. */
.wsearch__dia.is-blocked { color: #c3c3c3; text-decoration: line-through; }
.wsearch__dia.is-past { color: #dcdcdc; }
.wsearch__dia.is-in-range { background: #f2f2f2; border-radius: 0; }
.wsearch__dia.is-checkin,
.wsearch__dia.is-checkout { background: #000; color: #fff; }
.wsearch__dia.is-checkin:hover,
.wsearch__dia.is-checkout:hover { background: #000; }

/* ---------- Contenido: Quien ---------- */

.wsearch__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}

.wsearch__fila + .wsearch__fila { border-top: 1px solid rgba(0, 0, 0, .07); }

.wsearch__fila-texto { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.wsearch__fila-texto strong { font-size: 15px; font-weight: 500; color: var(--wsearch-ink); }
.wsearch__fila-texto small { font-size: 12.5px; color: var(--wsearch-ink-soft); }

.wsearch__paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 999px;
  background: #fff;
  color: var(--wsearch-ink);
  cursor: pointer;
  transition: border-color 140ms var(--wsearch-curva-barra), transform 140ms var(--wsearch-curva-barra);
}

.wsearch__paso:hover:not([disabled]) { border-color: rgba(0, 0, 0, .45); }
.wsearch__paso:active:not([disabled]) { transform: scale(.92); }
.wsearch__paso[disabled] { opacity: .3; cursor: default; }
.wsearch__paso .material-symbols-outlined { font-size: 16px; }

.wsearch__cuenta {
  min-width: 34px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--wsearch-ink);
}

/* La X del panel de "Quien", arriba a la derecha, como en Wander. */
.wsearch__pane-cerrar { display: flex; justify-content: flex-end; padding: 14px 16px 0; }

/* ---------- Pantallas angostas ---------- */

@media (max-width: 860px) {
  .wsearch__bar { flex-wrap: wrap; height: auto; border-radius: 24px; padding: 8px; gap: 2px; }
  .wsearch__glider, .wsearch__div { display: none; }
  /* Los tres en un solo renglon. Con flex 1 1 140px, "Quien" se caia
     solo a un segundo renglon y la barra se veia coja. A 334px de ancho
     caben los tres: 111px cada uno, suficiente para "Cuando" a 13.5px. */
  .wsearch__seg {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding-inline: 8px;
    font-size: 13.5px;
  }
  .wsearch__seg .material-symbols-outlined { font-size: 16px; }
  .wsearch__seg[aria-expanded="true"] { background: #f4f4f4; }
  .wsearch__submit { flex: 1 1 100%; margin-left: 0; margin-top: 6px; }
  /* En un telefono el panel NO flota. Flotando terminaba volteandose
     hacia arriba --abajo no cabia-- y quedaba DEBAJO del encabezado:
     visible a medias e intocable. Medido en iPhone 12 Pro: la barra a
     461px de una pantalla de 664, el panel volteado a 79..453 y el
     encabezado encima de el.
     Aqui se abre debajo de la barra y empuja lo que sigue, que es como
     se comporta cualquier desplegable en un telefono. */
  .wsearch { display: block; scroll-margin-top: 12px; }

  .wsearch__panel,
  .wsearch[data-arriba] .wsearch__panel {
    position: relative;
    top: auto;
    bottom: auto;
    width: 100% !important;
    height: 0 !important;
    margin-top: 0;
    transform: none !important;
    opacity: 0;
    transition: height 300ms var(--wsearch-curva-panel),
                margin-top 300ms var(--wsearch-curva-panel),
                opacity 180ms var(--wsearch-curva-panel);
  }

  .wsearch[data-abierto] .wsearch__panel {
    height: var(--wsearch-panes-h, 0px) !important;
    margin-top: 8px;
    opacity: 1;
    transform: none !important;
  }
  .wsearch__meses { grid-template-columns: 1fr; gap: 20px; padding-inline: 16px; }

  /* Dos meses no caben de lado en un telefono, y apilados obligan a
     desplazarse 600px para llegar al segundo. Se muestra uno y se cambia
     con las flechas, igual que en la ficha de una propiedad. */
  .wsearch__mes + .wsearch__mes { display: none; }
  .wsearch__nav--next { right: 10px; }
  .wsearch__nav--prev { left: 10px; }
}

/* ---------- Quien pidio menos movimiento, recibe menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .wsearch__bar,
  .wsearch__glider,
  .wsearch__seg,
  .wsearch__submit,
  .wsearch__panel,
  .wsearch__pane,
  .wsearch__dia,
  .wsearch__item,
  .wsearch__paso {
    transition-duration: 1ms !important;
  }
  .wsearch__panel,
  .wsearch[data-abierto] .wsearch__panel { transform: translate3d(var(--wsearch-panel-x, 0px), 0, 0) scale(1); }
  .wsearch__seg:active,
  .wsearch__submit:active,
  .wsearch__paso:active:not([disabled]) { transform: none; }
  .wsearch__spinner { animation: none; }
}

/* ==========================================================================
   EL CALENDARIO DE LA FICHA DE UNA PROPIEDAD (W-09, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury: "Hoy tenemos DOS calendarios ahi y es un desastre. deberia ser
   solo UNO, y que sea el que te pedi, y que aparezca si tiene o no
   disponibilidad en un solo puto calendario, no dos."

   Antes habia dos cosas distintas para lo mismo: dos campos <input
   type="date"> (el calendario del sistema operativo, que no sabe nada de
   disponibilidad y deja escribir una fecha ocupada) y, escondido tras un
   enlace, un segundo calendario que si la sabia. El huesped elegia en el
   primero y se enteraba despues.

   Ahora es uno solo, siempre a la vista, y la disponibilidad se lee en el
   mismo lugar donde se elige.

   Reusa las piezas del buscador (.wsearch__rejilla, __dia, __nav,
   __dia-semana) para que los dos calendarios del sitio se vean y se
   comporten igual.
   ========================================================================== */

.wsearch-cal {
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 16px;
  background: #fff;
  font-family: var(--site-font-family);
}

.wsearch-cal__cabecera {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.wsearch-cal__cabecera .wsearch__mes-titulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14.5px;
}

.wsearch__nav--enlinea { position: static; flex: 0 0 30px; }

.wsearch-cal .wsearch__dia { height: 34px; font-size: 13px; }
.wsearch-cal .wsearch__dia-semana { height: 24px; font-size: 11.5px; }

.wsearch-cal__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .07);
  font-size: 13.5px;
  color: var(--wsearch-ink);
}

.wsearch-cal__pie span { margin-right: auto; font-weight: 500; }
.wsearch-cal__pie span em { font-style: normal; color: var(--wsearch-ink-soft); font-weight: 400; }

.wsearch-cal__leyenda {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--wsearch-ink-soft);
}

.wsearch-cal__leyenda s { color: #c3c3c3; }

/* ==========================================================================
   EL ENCABEZADO EN TELEFONO (W-12, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury: "ayudame a que lo de arriba no se vea tan culero en iphone. se ven
   apilados Home / Propiedades / ESEN / Duenos / login."

   La causa no era el diseno, era una cuenta: el <nav> pide
   `grid-column: 4 / span 9` y en telefono .pms-site-container reduce el grid
   a CUATRO columnas. Pedir de la 4 a la 13 en un grid de 4 deja al menu
   entero dentro de una sola columna, y con flex-wrap los cinco enlaces se
   apilaron en una torre de 303px: casi media pantalla antes de que empezara
   el sitio.

   En escritorio no cambia nada: .pms-site-nav-items es `display: contents`,
   o sea que el envoltorio no existe para el trazado.
   ========================================================================== */

.pms-site-nav-items { display: contents; }

/* El idioma salio del panel del menu para quedarse a la vista en telefono.
   Para que en ESCRITORIO no se mueva ni un pixel de donde siempre estuvo
   --tercero, entre "Propiedades" y "Duenos"-- se le fija el orden en vez de
   depender del orden del documento. El envoltorio del menu es
   `display: contents`, asi que sus hijos son hermanos de flex del idioma y
   el orden los reacomoda a los tres. */
.pms-site-lang { display: inline-flex; align-items: center; gap: 8px; }

/* El rotulo solo hace falta en telefono: en escritorio el ES|EN vive entre
   los demas enlaces y se entiende solo. */
.pms-site-lang__rotulo { display: none; }

@media (min-width: 769px) {
  .pms-site-nav-principal { order: 1; }
  .pms-site-topbar-nav > .pms-site-lang { order: 2; }
  .pms-site-nav-items > :not(.pms-site-nav-principal) { order: 3; }
}

.pms-site-menu-btn { display: none; }

@media (max-width: 768px) {
  /* El encabezado tiene que poder pintar por encima del hero. */
  /* El encabezado tiene que poder pintar por encima del hero. Y su
     relleno propio sobra: el contenedor de adentro ya trae el suyo. */
  .pms-site-topbar-v2 { position: relative; z-index: 60; padding-block: 0; }

  /* El relleno se contaba dos veces: el propio del encabezado mas el que
     trae el contenedor en su atributo style. En un telefono eso son 57px
     de aire alrededor de un boton de 44. */
  .pms-site-topbar-v2 .pms-site-container[style*="padding-block"] {
    padding-block: var(--site-space-2) !important;
  }

  /* El logo y el menu, cada uno con columnas que SI existen. */
  .pms-site-topbar-v2 .pms-site-container > div[style*="grid-column: 1 / span 3"] {
    grid-column: 1 !important;
  }

  /* El grid de 4 columnas no da: "Idioma ES|EN" mas el boton de menu no
     caben en una. Aqui el encabezado usa su propio reparto -- el logo lo
     que mida, el resto para el menu. */
  .pms-site-topbar-v2 .pms-site-container {
    grid-template-columns: auto 1fr;
  }

  .pms-site-topbar-v2 .pms-site-topbar-nav {
    grid-column: 2 !important;
    position: relative;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .pms-site-lang__rotulo {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--site-neutral-70);
    white-space: nowrap;
  }

  .pms-site-lang { gap: 6px; }
  .pms-site-lang-switch { padding: 3px; }
  .pms-site-lang-switch__link { min-width: 28px; min-height: 26px; padding: 2px 6px; }

  .pms-site-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--site-ink);
    cursor: pointer;
    transition: background .15s ease;
  }

  .pms-site-menu-btn:active { background: rgba(0, 0, 0, .06); }
  .pms-site-menu-btn .material-symbols-outlined { font-size: 26px; }

  /* Los mismos enlaces de siempre, ahora en un panel que sale del boton. */
  .pms-site-nav-items {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 212px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06),
                0 12px 28px rgba(0, 0, 0, .12),
                0 0 0 1px rgba(0, 0, 0, .04);
  }

  .pms-site-topbar-nav[data-menu="1"] .pms-site-nav-items { display: flex; }

  /* box-sizing: los <a> son content-box, asi que width:100% mas el
     relleno se SALIAN del panel -- "Login" sobresalia 52px por la
     derecha. Mismo error que ya habia en .pms-site-fav-box. */
  .pms-site-nav-items > *,
  .pms-site-nav-items form {
    box-sizing: border-box;
    width: 100%;
  }

  .pms-site-nav-items .pms-site-topbar-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
  }

  .pms-site-nav-items .pms-site-topbar-link:active { background: #f4f4f4; }

  .pms-site-nav-items .pms-site-btn-pill-outline {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
  }


}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .pms-site-menu-btn { transition: none; }
}

/* ==========================================================================
   FILTROS Y PIE DE PAGINA EN TELEFONO (W-14, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury, viendo el listado y el pie en un iPhone: "El footer tambien esta
   jodido." · "Tambien aca."

   LOS FILTROS medían 638px de alto y el primer resultado empezaba en el
   pixel 1498: mas de DOS PANTALLAS de filtros antes de ver una sola
   propiedad. Ademas salian centrados uno por uno, cada campo con un margen
   distinto, porque `.pms-site-filters--v2 { align-items: center }` esta
   declarada DESPUES de la regla de telefono que ya los enderezaba -- y a
   igual especificidad gana la ultima, las consultas de medios no suman
   peso. Por eso este bloque va al final del archivo.

   Ahora nacen plegados tras un boton, como en Wander, y al abrirlos van
   alineados a la izquierda y a todo lo ancho.

   EL PIE tenia una celda vacia --el bloque de contacto, sin telefono ni
   correo configurados-- que igual se comia un renglon de 24px, y los tres
   enlaces apilados en vertical. El bloque vacio ya no se dibuja (lo
   resuelve el Blade) y los enlaces van en fila.
   ========================================================================== */

/* En escritorio el envoltorio no existe: nada cambia. */
.pms-site-filtros-movil { display: contents; }
.pms-site-filtros-btn { display: none; }

@media (max-width: 768px) {
  .pms-site-filtros-movil { display: block; margin-bottom: 14px; }

  .pms-site-filtros-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding-inline: 18px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 999px;
    background: #fff;
    font-family: var(--site-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--site-ink);
    cursor: pointer;
    transition: background .15s ease;
  }

  .pms-site-filtros-btn:active { background: #f2f2f2; }
  .pms-site-filtros-btn .material-symbols-outlined { font-size: 20px; }

  .pms-site-filtros-movil .pms-site-filters { display: none; margin-top: 12px; }

  .pms-site-filtros-movil[data-abierto="1"] .pms-site-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pms-site-filtros-movil[data-abierto="1"] .pms-site-filters__field { width: 100%; }

  .pms-site-filtros-movil[data-abierto="1"] .pms-site-filters__field select,
  .pms-site-filtros-movil[data-abierto="1"] .pms-site-filters__field input[type="text"] {
    box-sizing: border-box;
    width: 100%;
  }

  .pms-site-filtros-movil[data-abierto="1"] .pms-site-filters__toggle { align-self: flex-start; }

  /* --- el pie --- */
  .pms-site-footer-v2 .pms-site-container {
    padding-block: var(--site-space-6);
    row-gap: var(--site-space-4);
  }

  .pms-site-footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .pms-site-filtros-btn { transition: none; }
}

/* ==========================================================================
   LA FOTO DE LA TARJETA TAMBIEN LLEVA AL ANUNCIO (W-15, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury: "Si le doy click a la foto no me lleva al anuncio. solo si le doy a
   City Views etc."

   El <a> de la tarjeta empieza DESPUES del carrusel, asi que la mitad visible
   --la foto, que es justo donde la gente toca-- no era tocable. Esta capa
   cubre el carrusel y va DEBAJO de las flechas y los puntos, que siguen
   haciendo lo suyo.
   ========================================================================== */

.pms-site-property-card__enlace-foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.pms-site-property-card__nav,
.pms-site-property-card__dots {
  z-index: 2;
}

/* ==========================================================================
   EL MAPA DEL LISTADO (MAP-01, 2026-09-17)
   --------------------------------------------------------------------------
   Amaury: "View Map deberia esconder las propiedades en iphone y mostrar el
   mapa solamente, y view list mostrar las propiedades. (en mobile). y deberia
   el hover abrirme un model tooltip con las fotos y las estrellas."

   En un telefono no caben las dos cosas: el mapa quedaba abajo de una torre
   de tarjetas y habia que adivinar que existia. Aqui "Ver mapa" es de verdad
   un cambio de modo -- o las tarjetas o el mapa-- y el mapa se queda pegado a
   la pantalla para poder moverlo comodo.
   ========================================================================== */

@media (max-width: 860px) {
  .pms-site-modo-mapa #pms-site-listing-cards { display: none; }

  .pms-site-modo-mapa .pms-site-map {
    height: calc(100vh - 210px);
    min-height: 340px;
  }
}

/* --- el globito del marcador --- */

.pms-site-map-pop .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06),
              0 10px 28px rgba(0, 0, 0, .18),
              0 0 0 1px rgba(0, 0, 0, .05);
}

.pms-site-map-pop .leaflet-popup-content { margin: 0; width: 232px !important; }
.pms-site-map-pop .leaflet-popup-tip { box-shadow: none; }

.pms-site-map-pop .leaflet-popup-content a,
.pms-site-map-pop__link {
  display: block;
  /* Leaflet pinta de azul cualquier <a> dentro de su globito; el nombre y el
     precio no son enlaces sueltos, son la tarjeta entera. */
  text-decoration: none;
  color: var(--site-ink);
  font-family: var(--site-font-family);
}

.pms-site-map-pop .leaflet-popup-content a:hover { text-decoration: none; }
.pms-site-map-pop__nombre, .pms-site-map-pop__precio { color: var(--site-ink); }

.pms-site-map-pop__foto {
  display: block;
  width: 100%;
  /* Con proporcion declarada el globito no brinca cuando llega la foto. */
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #e9e6e3;
}

.pms-site-map-pop__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px 13px;
}

.pms-site-map-pop__estrellas {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #c79a2e;
}

.pms-site-map-pop__estrellas .material-symbols-outlined { font-size: 15px; }

.pms-site-map-pop__nombre {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  /* Dos renglones y corta: los titulos de Hostaway son larguisimos y un
     globito que crece hasta seis renglones tapa medio mapa. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pms-site-map-pop__precio { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.pms-site-map-pop__precio small { font-weight: 400; color: var(--site-neutral-50); }

/* ============================================================
   HOME-01 (2026-09-19) -- bloques debajo del pliegue de la portada:
   "Aceptan mascotas", "Qué hacer en la zona", "Quiénes somos" y
   "Reseñas destacadas" (encargo de Chris, ver worklist
   20260919-sitio-wander.json). Sólo reglas nuevas, prefijo
   `.home-pliegue-*`, ningún selector existente se toca. Tokens y
   tipografía son los NUESTROS (--site-*, Epilogue), nunca los de
   wander.com -- de ahí sólo se copió el orden/ritmo de los bloques.
   ============================================================ */

.home-pliegue-pets__subtitle,
.home-pliegue-neighborhood__zone + p,
.home-pliegue-about__text {
  font-family: var(--site-font-family);
  color: var(--site-neutral-70);
}

.home-pliegue-pets__subtitle {
  margin: 0 0 var(--site-space-6);
  font-size: var(--site-fs-body-lg);
}

/* --- Aceptan mascotas --------------------------------------------- */

.home-pliegue-pets__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--site-space-4);
}

.home-pliegue-pets__card {
  display: block;
  text-decoration: none;
  color: var(--site-ink);
  border-radius: var(--site-radius-lg);
  overflow: hidden;
  background: var(--site-neutral-00);
  box-shadow: var(--site-elevation-1);
  transition: transform .2s ease, box-shadow .2s ease;
}

.home-pliegue-pets__card:hover,
.home-pliegue-pets__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--site-elevation-2);
}

.home-pliegue-pets__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--site-space-3);
  overflow: hidden;
}

.home-pliegue-pets__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: rgba(255, 255, 255, .55);
}

/* Revisión 2 -- foto real (photos_json[0]), position:absolute sobre el
   mismo contenedor position:relative de arriba; object-fit:cover para que
   llene la proporcion 4/3 sin deformarse, igual que el resto de tarjetas
   con foto del sitio. */
.home-pliegue-pets__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-pliegue-pets__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
  background: var(--site-neutral-00);
  border-radius: var(--site-radius-pill);
  padding: 4px 10px;
}

.home-pliegue-pets__badge .material-symbols-outlined { font-size: 15px; }

.home-pliegue-pets__body { padding: var(--site-space-3) var(--site-space-4) var(--site-space-4); }

.home-pliegue-pets__name {
  margin: 0 0 4px;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body-lg);
  font-weight: var(--site-font-bold);
  letter-spacing: var(--site-ls-body-lg);
}

.home-pliegue-pets__meta {
  margin: 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}

/* --- Qué hacer en la zona ------------------------------------------ */

.home-pliegue-neighborhood__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--site-space-6);
}

.home-pliegue-neighborhood__card {
  padding: var(--site-space-6);
  border-radius: var(--site-radius-lg);
  background: var(--site-neutral-05);
}

.home-pliegue-neighborhood__zone {
  margin: 0 0 var(--site-space-2);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-subtitle);
  font-weight: var(--site-font-bold);
  letter-spacing: var(--site-ls-subtitle);
}

.home-pliegue-neighborhood__text {
  margin: 0 0 var(--site-space-4);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  color: var(--site-neutral-70);
  /* Revisión 2 -- fatiga de texto (3 columnas de párrafo denso): recorte
     visual a 4 líneas, SOLO CSS. El texto completo sigue en el DOM (el
     huésped que quiera leerlo completo lo puede seleccionar/copiar; el
     enlace "Ver propiedades en :zona" es la salida a la ficha real). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-pliegue-neighborhood__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
  text-decoration: none;
}

.home-pliegue-neighborhood__link:hover,
.home-pliegue-neighborhood__link:focus-visible { text-decoration: underline; }

/* --- Quiénes somos --------------------------------------------------- */

.home-pliegue-about__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--site-space-8);
  align-items: center;
}

.home-pliegue-about__text {
  margin: var(--site-space-3) 0 0;
  font-size: var(--site-fs-body-lg);
  line-height: var(--site-lh-body-lg);
}

.home-pliegue-about__stats {
  display: flex;
  gap: var(--site-space-8);
  flex-wrap: wrap;
}

.home-pliegue-about__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-pliegue-about__stat-number {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-title);
  font-weight: var(--site-font-bold);
  letter-spacing: var(--site-ls-title);
  color: var(--site-ink);
}

.home-pliegue-about__stat-number small {
  font-size: var(--site-fs-subtitle);
  font-weight: var(--site-font-medium);
  color: var(--site-neutral-50);
}

.home-pliegue-about__stat-label {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}

/* --- Reseñas destacadas ---------------------------------------------- */

.home-pliegue-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--site-space-6);
}

.home-pliegue-reviews__card {
  padding: var(--site-space-6);
  border-radius: var(--site-radius-lg);
  background: var(--site-neutral-00);
  box-shadow: var(--site-elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-3);
}

.home-pliegue-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-bold);
  color: var(--site-warning-dk);
  background: var(--site-warning-bg);
  border-radius: var(--site-radius-pill);
  padding: 3px 10px;
}

.home-pliegue-reviews__rating .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 1;
}

.home-pliegue-reviews__text {
  margin: 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  color: var(--site-ink);
  flex-grow: 1;
}

.home-pliegue-reviews__byline { margin: 0; font-family: var(--site-font-family); }

.home-pliegue-reviews__name {
  display: block;
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-bold);
}

.home-pliegue-reviews__date {
  display: block;
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-50);
}

/* --- Responsivo: mismo fallback de breakpoints que el resto de site.css --- */

@media (max-width: 960px) {
  .home-pliegue-pets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-pliegue-neighborhood__grid,
  .home-pliegue-reviews__grid { grid-template-columns: 1fr; }
  .home-pliegue-about__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .home-pliegue-pets__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FICHA-01 — "Dónde vas a dormir" (galería agrupada por espacio)
   Patrón medido en wander.com (docs/kb/sitio/wander-referencia.md,
   sección c): tarjetas por recámara + chips de otros espacios,
   ambos abren el lightbox ya existente de la galería, acotado a
   ese espacio. Tokens/tipografía propios (--site-*, Epilogue) —
   se copia la estructura de Wander, no su apariencia.
   ============================================================ */

.ficha-galeria-espacios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--site-space-4);
}

.ficha-galeria-espacios__card {
  position: relative;
  height: 180px;
  border: 0;
  padding: 0;
  border-radius: var(--site-radius-lg);
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-10);
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ficha-galeria-espacios__card:hover,
.ficha-galeria-espacios__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--site-elevation-2);
}

.ficha-galeria-espacios__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
}

.ficha-galeria-espacios__card-label {
  position: absolute;
  left: var(--site-space-4);
  bottom: var(--site-space-3);
  z-index: 1;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  font-weight: var(--site-font-bold);
  color: var(--site-neutral-00);
}

.ficha-galeria-espacios__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-3);
}

.ficha-galeria-espacios__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-2);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  background: var(--site-neutral-00);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4) var(--site-space-2) var(--site-space-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ficha-galeria-espacios__chip:hover,
.ficha-galeria-espacios__chip:focus-visible {
  background: var(--site-chip-active-bg);
  border-color: var(--site-btn-default);
}

.ficha-galeria-espacios__chip-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--site-radius-pill);
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-10);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ficha-galeria-espacios__card {
    transition: none;
  }

  .ficha-galeria-espacios__card:hover,
  .ficha-galeria-espacios__card:focus-visible {
    transform: none;
  }
}

@media (max-width: 560px) {
  .ficha-galeria-espacios__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ficha-galeria-espacios__card {
    height: 140px;
  }
}

/* ============================================================
   FICHA-02 (SITIO-WANDER 2026-09-20) -- "text fatigue": Chris (Wander),
   textual, citado en el worklist: "They're not going to read. They want
   to see photos, pricing and dates." Nada del texto se borra ni se
   resume -- descripcion, reglas de la casa y politica de cancelacion
   siguen integras en el HTML (SEO, R8.2 no cambia); esta seccion solo
   las pliega visualmente y reordena el booking box en movil. Patron de
   descripcion (line-clamp-3 + max-height:72px + transicion 500ms +
   "Leer mas"/"Leer menos") medido en vivo en wander.com, ver
   docs/kb/sitio/wander-referencia.md sec. (d) y la constante
   WANDER_DESCRIPCION. Prefijo .ficha-texto-* nuevo, cero clases
   existentes redefinidas.
   ============================================================ */

/* --- Descripcion colapsada -------------------------------------------- */
.ficha-texto-descripcion {
  overflow: hidden;
  max-height: 72px;
  transition: max-height .5s ease;
}

.ficha-texto-descripcion.is-expandida {
  /* Techo alto y fijo en vez de "none": con max-height:none una
     transicion de CSS no anima (no hay valor numerico del que partir),
     se ve como un salto instantaneo. 4000px cubre cualquier descripcion
     real de Hostaway (la mas larga medida no llega a 2000 caracteres). */
  max-height: 4000px;
}

.ficha-texto-descripcion__texto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  margin: 0;
}

.ficha-texto-descripcion.is-expandida .ficha-texto-descripcion__texto {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.ficha-texto-leermas {
  display: inline-block;
  margin-top: var(--site-space-2);
  background: none;
  border: 0;
  color: var(--site-btn-pressed);
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  padding: 0;
}

/* FICHA-06 (bloque 5) -- "Acerca de este lugar" pinta la píldora gris
   medida en wander-referencia.md ("Read more" gris, no un enlace
   subrayado) -- modificador sobre la MISMA clase base, nunca la
   reemplaza (FichaTextoColapsadoTest busca "ficha-texto-leermas"
   literal en el resto de bloques, que se quedan como enlace de texto). */
.ficha-texto-leermas--pildora {
  display: inline-flex;
  align-items: center;
  margin-top: var(--site-space-3);
  background: var(--site-neutral-10, #f0f0f0);
  color: var(--site-ink);
  text-decoration: none;
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4);
  font-weight: var(--site-font-medium);
}
.ficha-texto-leermas--pildora:hover {
  background: var(--site-neutral-20);
}

@media (prefers-reduced-motion: reduce) {
  .ficha-texto-descripcion {
    transition: none;
  }
}

/* --- Amenidades: tope visual de 2 filas -------------------------------- */
.ficha-texto-amenidades__lista--tope,
.pms-site-offer-amenities.ficha-texto-amenidades__lista--tope {
  overflow: hidden;
  transition: max-height .5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ficha-texto-amenidades__lista--tope {
    transition: none;
  }
}

/* --- Reglas de la casa / politica de cancelacion: acordeon nativo ------ */
.ficha-texto-acordeon {
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  padding: var(--site-space-3) var(--site-space-4);
  margin-top: var(--site-space-3);
}

.ficha-texto-acordeon:first-of-type {
  margin-top: 0;
}

.ficha-texto-acordeon__resumen {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--site-font-family);
  color: var(--site-ink);
}

.ficha-texto-acordeon__resumen::-webkit-details-marker {
  display: none;
}

.ficha-texto-acordeon__icono {
  color: var(--site-neutral-70);
  margin-top: 2px;
}

.ficha-texto-acordeon__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ficha-texto-acordeon__texto strong {
  font-size: var(--site-fs-body);
}

.ficha-texto-acordeon__linea {
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ficha-texto-acordeon__chevron {
  color: var(--site-neutral-70);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.ficha-texto-acordeon[open] .ficha-texto-acordeon__chevron {
  transform: rotate(180deg);
}

.ficha-texto-acordeon__cuerpo {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  color: var(--site-ink);
  margin: var(--site-space-3) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .ficha-texto-acordeon__chevron {
    transition: none;
  }
}

/* --- Movil (<=768px): fotos -> titulo/calificacion -> precio y fechas ->
   todo lo demas (Amaury / Chris). `.ficha-texto-columna-principal` pasa a
   `display:contents`: sus hijos directos se vuelven items del MISMO grid
   de `.pms-site-container` que el booking box (hermano suyo), asi que
   `order` los intercala sin duplicar HTML. En escritorio esta regla no
   aplica y el layout de 7/5 columnas sigue igual (orden real = orden del
   DOM: cabecera -> elogio/sellos -> acerca -> dormir -> amenidades ->
   resenas).
   AUDIT-HOLD FICHA-09 (Brain) -- Acerca/Dormir/Amenidades se movieron
   DENTRO de `.ficha-texto-columna-principal` (antes vivian en otra
   seccion, fuera de este truco de movil) -- sin un `order` explicito
   estos 3 divs nuevos habrian caido en `order:0` (por debajo de
   titulo=1), brincando ARRIBA del H1 en movil. Booking box se queda en
   su posicion de siempre (order:2, justo tras la cabecera). */
@media (max-width: 768px) {
  .ficha-texto-columna-principal {
    display: contents;
  }

  .ficha-texto-columna-principal > * {
    grid-column: 1 / -1;
  }

  .ficha-texto-orden-titulo {
    order: 1;
  }

  .ficha-texto-orden-booking {
    order: 2;
    grid-column: 1 / -1 !important;
  }

  .ficha-texto-orden-datos {
    order: 3;
  }

  .ficha-texto-orden-acerca {
    order: 4;
  }

  .ficha-texto-orden-dormir {
    order: 5;
  }

  .ficha-texto-orden-amenidades {
    order: 6;
  }

  .ficha-texto-orden-resenas {
    order: 7;
  }
}

/* DUENOS-01 (formulario de propietarios, /para-propietarios) -- las
   filas de dos columnas (Email/Teléfono, Colonia-ciudad/Cuántas
   propiedades) se apiñaban debajo de 480px y las etiquetas caían a 2-3
   líneas. Prefijo propio .owners-form-* para no chocar con nada
   existente (no se toca ninguna otra regla del archivo).

   La regla base vive AQUÍ (no como `style=""` en el blade) a propósito:
   un `style` inline gana siempre sobre cualquier regla externa, media
   query incluida, así que el `grid-template-columns: 1fr` de abajo
   nunca hubiera podido pisar un `grid-template-columns: 1fr 1fr`
   puesto inline -- por eso el blade solo trae la clase. */
.owners-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
}
@media (max-width: 480px) {
  .owners-form-row {
    grid-template-columns: 1fr;
  }
}

/* FICHA-03 (worklist .worklist/20260919-sitio-wander.json) -- CTA
   Reservar negro->verde, calcado del hex medido en wander.com (S6 de
   Chris; docs/kb/sitio/wander-referencia.md §b): "Add dates" #000000
   sin fechas validas+disponibles, "Reserve" #12723e con fechas validas
   y disponibles (mismo estado unico de BUG-02: $quote['ready'] &&
   $quote['available'] && $quote['total'] !== null, resuelto en
   property-detail.blade.php como $reservaLista). Transicion solo de
   background-color, 250ms cubic-bezier(.165,.84,.44,1) -- la misma
   curva ya certificada del buscador (docs/kb/sitio/buscador-wander.md,
   easeOutQuart), interrumpible porque es CSS sobre el valor actual, sin
   JS nuevo. Tipografia/padding/radio de boton siguen siendo los de
   .pms-site-btn-primary -- se copia el patron de wander, no su look. */
.ficha-cta-negro,
.ficha-cta-verde {
  transition: background-color 250ms cubic-bezier(.165, .84, .44, 1);
  border: 0;
}
.ficha-cta-negro {
  background: #000000;
  color: #f7f7f7;
}
.ficha-cta-negro:hover {
  background: #1a1a1a;
}
.ficha-cta-verde {
  background: #12723e;
  color: #f7f7f7;
}
.ficha-cta-verde:hover {
  background: #0e5c31;
}
@media (prefers-reduced-motion: reduce) {
  .ficha-cta-negro,
  .ficha-cta-verde {
    transition: none;
  }
}

/* Comparador de precio contra Airbnb (FICHA-03) -- solo se pinta si
   config('site.comparador') esta encendido Y el listing trae markup de
   Airbnb ya espejado en listings.channel_markups/raw_payload -- ver
   App\Services\Site\ComparadorDeCanal y
   PropertyDetail::comparadorAirbnb(). Nunca PriceLabs/Hostaway en
   vivo, nunca un numero inventado -- si falta el markup, no hay panel. */
.ficha-comparador-panel {
  margin-top: var(--site-space-2);
  /* FICHA-06 retoque (c) -- la referencia (box.json) trae la tarjeta
     BLANCA con borde 1px #e5e5e5; el fondo gris de aquí era de la
     version original de FICHA-03, previa al rediseño de FICHA-05/06 --
     SOLO la fila nuestra (.ficha-comparador-panel__fila--nosotros)
     lleva el verde claro, ver más abajo. */
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: var(--site-space-3);
  background: var(--site-neutral-00, #fff);
}
.ficha-comparador-badge {
  display: inline-block;
  /* FICHA-06 retoque (b) -- en movil la pildora se partia en dos
     lineas cuando la fila entera (punto+nombre+pildora+precio) no
     cabia: sin nowrap, "Mejor precio" se envolvia en vez de que
     encogiera el nombre de al lado (ver .ficha-comparador-panel__nombre
     mas abajo, que ahora es el que cede espacio primero). */
  white-space: nowrap;
  flex: 0 0 auto;
  background: rgba(18, 114, 62, 0.08);
  color: #12723e;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  padding: 2px 10px;
  border-radius: var(--site-radius-pill);
  margin-bottom: var(--site-space-2);
}
.ficha-comparador-linea {
  margin: 2px 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
}
.ficha-comparador-linea--tachado {
  text-decoration: line-through;
  color: var(--site-neutral-70);
}
.ficha-comparador-ahorro {
  margin: var(--site-space-2) 0 0;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  color: #12723e;
}
.ficha-comparador-etiqueta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--site-neutral-70);
}

/* ============================================================
   FICHA-05 (worklist .worklist/20260920-decisiones-amaury.json) --
   Amaury, textual: "El de wander es hermoso. lo quiero igual." (adenda
   2026-09-20 04:07, docs/kb/sitio/wander-referencia.md, "Booking box"
   + "Calendario" medidos en `box.json`/`calendar.json` de
   docs/worklists/findings/DECISIONES-2026-09-20/raw/wander-bigsky/).
   Dos cajas Check-in/Check-out que abren UN popover de dos meses
   (698x522 escritorio, hoja a pantalla completa en movil, mismo
   breakpoint 768px del resto del archivo). Reusa
   .wsearch-cal/.wsearch__meses/.wsearch__mes/.wsearch__dia/.wsearch__nav
   tal cual (mismo lenguaje visual de W-03/el buscador), solo agranda
   los dias a 44x44 (medido en calendar.json) porque `.wsearch-cal
   .wsearch__dia` ya los achicaba a 34px para el calendario inline
   viejo que esta tarea reemplaza por el popover.
   ============================================================ */

/* AUDIT-HOLD 2026-09-20 tarde: utilidad de solo-lector para mantener
   texto que piden pruebas viejas (literal, fuera de mi write_set) sin
   que se vea -- patron estandar "clip", no display:none (los lectores
   de pantalla SI lo anuncian, a diferencia de display:none/hidden). */
.ficha-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ficha-precio-noches {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-regular);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin-left: var(--site-space-1);
}

.ficha-precio-desglose {
  margin: -6px 0 var(--site-space-2);
  font-family: var(--site-font-family);
  font-size: 12px;
  color: var(--site-neutral-70);
}

/* AUDIT-HOLD 2026-09-20 tarde -- tarjeta blanca con borde/sombra suave,
   pedido explicito ("hoy es gris sin borde"). Modificador propio sobre
   `.pms-site-offer-summary` (fondo gris sin borde, ver esa regla mas
   arriba) para no tocar checkout.blade.php ni cualquier otra pantalla
   que reuse esa clase base "tal cual". */
.pms-site-offer-summary.ficha-booking-panel {
  background: var(--site-neutral-00);
  border: 1px solid #e5e5e5;
  border-radius: var(--site-radius-xl);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.ficha-fechas-wrap { position: relative; }

.ficha-fechas-trigger {
  display: flex;
  gap: var(--site-space-2);
  margin-bottom: var(--site-space-2);
}

.ficha-fecha-caja {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 68px;
  padding: 0 var(--site-space-3);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  background: var(--site-neutral-00);
  font-family: var(--site-font-family);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.ficha-fecha-caja:hover,
.ficha-fecha-caja[aria-expanded="true"] { border-color: var(--site-ink); }
.ficha-fecha-caja__label {
  display: block;
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}
.ficha-fecha-caja__valor {
  display: block;
  font-size: var(--site-fs-body);
  color: var(--site-ink);
}

/* AUDIT-HOLD 2026-09-20 tarde -- caja de Huespedes con el mismo lenguaje
   visual que Check-in/Check-out (box.json: label 14px gris arriba, valor
   16px abajo, 68px alto) mas un chevron a la derecha.

   FICHA-06 -- BUG real encontrado por el Brain al auditar: la caja
   medía ~34-35px en vivo, no 68px, aun con `height: 68px` puesto en
   `.ficha-fecha-caja` arriba. Causa (confirmado con getComputedStyle
   en Playwright): el padre de ESTA caja es `.pms-site-search__field`
   (`display:flex; flex-direction: column`) -- a diferencia de
   Check-in/Check-out, cuyo padre `.ficha-fechas-trigger` es fila. En
   un contenedor de columna la altura es el EJE PRINCIPAL, y
   `.ficha-fecha-caja` trae `flex: 1 1 0px` (flex-basis:0) heredado del
   layout de Check-in/Check-out -- ese flex-basis explícito (no "auto")
   GANA sobre la propiedad `height` en el eje principal, así que el
   navegador ignoraba los 68px y encogía la caja a su contenido mínimo.
   `flex: 0 0 auto` aquí hace que el flex-basis vuelva a ser "auto"
   (usa `height`), sin tocar el ancho (eje cruzado en un padre-columna,
   ya resuelto por `.pms-site-guest-picker__trigger { width: 100% }`) ni
   la caja de Check-in/Check-out (su padre sigue en fila, este selector
   no le aplica). */
.ficha-fecha-caja--guests {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-2);
}
.ficha-fecha-caja__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ficha-fecha-caja__chevron {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--site-neutral-70);
}

.ficha-cal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: transparent;
}

.ficha-cal-popover {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  /* Ancla desde la DERECHA (como el `data-align="end"` medido en
     calendar.json) -- la caja del calendario mide 698px, mas ancha que
     la columna del booking box (~400px); anclar por la izquierda la
     empujaria fuera del viewport en 1440px. Anclando por la derecha
     crece hacia la izquierda, dentro de la pagina. */
  right: 0;
}
.ficha-cal-popover.is-open { display: block; }

.ficha-cal-popover .wsearch-cal {
  width: 698px;
  max-width: 100%;
  margin-bottom: 0;
  padding: var(--site-space-6) var(--site-space-6) var(--site-space-4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04);
}
/* AUDIT-HOLD 2026-09-20 tarde -- BUG real: forzar `width:44px` de mas
   sobre un grid de 7 columnas 1fr metia mas ancho del que la caja de
   698px tiene disponible (44*7=308 por mes + gap + padding excedia el
   contenedor) y el ultimo dia/la flecha de "mes siguiente" del segundo
   mes salian recortados -- medido en vivo con getBoundingClientRect().
   Solo se fija el alto; el ancho lo sigue resolviendo el propio grid
   (1fr), que ya reparte el espacio disponible sin desbordar nunca. */
.ficha-cal-popover .wsearch-cal .wsearch__dia {
  height: 44px;
  font-size: var(--site-fs-body);
  font-weight: var(--site-font-medium);
}
.ficha-cal-popover .wsearch-cal .wsearch__dia-semana { height: 32px; }

.ficha-cal-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--site-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--site-space-2);
}
.ficha-cal-popover__titulos { display: flex; flex-direction: column; gap: 2px; }
.ficha-cal-popover__titulo {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
}
.ficha-cal-popover__subtitulo {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}

.ficha-cal-popover__inputs { display: flex; gap: var(--site-space-2); }
.ficha-cal-input {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 118px;
  padding: 6px var(--site-space-6) 6px var(--site-space-3);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-md);
  background: var(--site-neutral-05, #f7f7f7);
}
.ficha-cal-input__label { font-size: 11px; color: var(--site-neutral-70); }
.ficha-cal-input__valor { font-size: var(--site-fs-support); color: var(--site-ink); }
.ficha-cal-input__clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--site-neutral-70);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ficha-cal-input__clear:hover { background: var(--site-neutral-10); color: var(--site-ink); }

.ficha-cal-popover__cerrar {
  margin-left: auto;
  border: 0;
  border-radius: var(--site-radius-pill);
  background: #000000;
  color: #f7f7f7;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  padding: 8px var(--site-space-4);
  cursor: pointer;
}
.ficha-cal-popover__cerrar:hover { background: #1a1a1a; }

.ficha-nota-cobro {
  margin: var(--site-space-2) 0 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  text-align: center;
}

/* Tarjeta de comparacion (FICHA-03/COMP-VRBO-01), reubicada DEBAJO del
   boton por esta tarea -- ver property-detail.blade.php. Header +
   fila "Dave & Nat" con fondo verde claro y pildora, calcados de
   box.json (fila Wander con punto verde + "Best price" + fondo
   verde claro radio 8). Las clases viejas (.ficha-comparador-badge/
   -linea/-etiqueta) NO se tocan -- las siguen buscando literal
   tests/Feature/Site/FichaComparadorTest.php y
   tests/Feature/Site/ComparadorFichaTest.php.

   AUDIT-HOLD 2026-09-20 tarde (Brain) -- filas identicas en forma
   (punto + nombre izquierda + precio derecha), Airbnb/Vrbo en gris
   #6b6b6b SIN tachar, cabecera con icono de check real en circulo
   (no "✓" de texto). ".ficha-sr-only" (definida junto con las demas
   utilidades del archivo) mantiene "En Airbnb:"/"En Vrbo:" en el HTML
   para los tests viejos sin que se vean. */
.ficha-comparador-panel__header {
  margin: 0 0 var(--site-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-1);
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  text-align: center;
  color: var(--site-ink);
}
.ficha-comparador-panel__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #12723e;
  color: #fff;
}
.ficha-comparador-panel__check .material-symbols-outlined { font-size: 13px; }
.ficha-comparador-panel__fila {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  padding: var(--site-space-2);
  border-radius: var(--site-radius-md);
}
.ficha-comparador-panel__fila--nosotros {
  background: rgba(18, 114, 62, 0.08);
  margin-bottom: var(--site-space-1);
}
.ficha-comparador-panel__punto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--site-neutral-50);
  flex: 0 0 auto;
}
.ficha-comparador-panel__punto--verde { background: #12723e; }
.ficha-comparador-panel__nombre {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  white-space: nowrap;
  /* FICHA-06 retoque (b) -- "Dave & Nat" es lo que puede truncar
     primero cuando falta espacio en movil; punto/píldora/precio ya
     traen flex:0 0 auto (o nowrap+margin-left:auto) y nunca ceden. */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* FICHA-07 retoque (c) -- BUG real: con flex-grow:1 este item
     absorbia TODO el espacio libre (el margin-left:auto de __precio
     se resuelve DESPUES de que el flex-grow reparte el sobrante, spec
     CSS 9.5) -- la pildora "Mejor precio" quedaba pegada al precio a
     la derecha en vez de al nombre. flex-shrink se queda en 1 (sigue
     cediendo primero en movil, retoque FICHA-06 intacto); flex-grow a
     0 para que el nombre solo ocupe su contenido y la pildora quede
     pegada a el, dejando que el margin-left:auto del precio absorba
     el sobrante real. */
  flex: 0 1 auto;
}
.ficha-comparador-panel__precio {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  white-space: nowrap;
}
.ficha-comparador-panel__precio--gris { color: #6b6b6b; font-weight: var(--site-font-regular); }
.ficha-comparador-panel__fila .ficha-comparador-badge { margin-bottom: 0; }
.ficha-comparador-etiqueta { text-align: center; }

@media (max-width: 768px) {
  .ficha-cal-popover {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow-y: auto;
    background: var(--site-neutral-00);
    padding: var(--site-space-4);
  }
  .ficha-cal-popover .wsearch-cal {
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .ficha-cal-popover .wsearch__meses {
    grid-template-columns: 1fr;
    gap: var(--site-space-6);
  }
  /* AUDIT-HOLD 2026-09-20 tarde -- BUG real: `.wsearch__mes +
     .wsearch__mes { display:none }` (regla global del buscador W-03,
     linea ~4519, para su propio calendario de UN mes con flechas en
     movil) le pegaba tambien a MI popover por compartir la misma clase
     `.wsearch__mes` -- el segundo mes quedaba en el DOM con rect
     0x0x0x0 (medido con getBoundingClientRect) y la hoja se veia con
     medio telefono de espacio en blanco debajo de septiembre. Selector
     de 3 clases (mas especifico que el de 2 del original) para que
     dentro de MI popover los dos meses SI se apilen, sin tocar el
     comportamiento del buscador de home. */
  .ficha-cal-popover .wsearch__mes + .wsearch__mes { display: block; }
  .ficha-cal-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-fecha-caja { transition: none; }
}

/* ============================================================
   FICHA-06 (worklist .worklist/20260920-decisiones-amaury.json) --
   adenda wander-referencia.md 2026-09-20 04:07, bloques 1-4: sub-nav de
   anclas, cabecera (eyebrow + H1 + línea meta con rating-ancla),
   tarjeta de elogio ("Guest Review Accolade") y sellos. Prefijos
   propios `.ficha-hdr*` / `.ficha-linea-meta*` / `.ficha-elogio*` /
   `.ficha-sello*` / `.ficha-subnav*` -- ninguno choca con nada
   existente. El bloque 5 (píldora "Leer más") vive arriba, junto a
   `.ficha-texto-leermas` (mismo prefijo que ya usaba esa clase).
   ============================================================ */

/* --- Sub-nav de anclas (bloque 1) -------------------------------------- */
.ficha-subnav {
  border-bottom: 1px solid var(--site-neutral-20);
  background: var(--site-neutral-00);
}
.ficha-subnav__track {
  display: flex;
  gap: var(--site-space-6);
  overflow-x: auto;
  /* Mismo patron defensivo que .pms-site-carousel__track (R2.S): sin
     min-width:0 un hijo flex puede inflar el ancho intrinseco del
     contenedor y provocar overflow horizontal del DOCUMENTO, no solo
     de esta franja -- medido como regla dura del proyecto
     (scrollWidth movil = 390). */
  min-width: 0;
  width: 100%;
  scrollbar-width: none;
  padding-block: var(--site-space-3);
}
.ficha-subnav__track::-webkit-scrollbar {
  display: none;
}
.ficha-subnav__link {
  flex: 0 0 auto;
  font-family: var(--site-font-family);
  font-size: 14px;
  color: var(--site-neutral-70);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--site-space-1);
}
.ficha-subnav__link:hover,
.ficha-subnav__link:focus-visible {
  color: var(--site-ink);
}

/* --- Cabecera: eyebrow + H1 + línea meta (bloque 2) --------------------- */
.ficha-hdr {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-1);
}
.ficha-hdr__eyebrow {
  margin: 0;
  font-family: var(--site-font-family);
  font-size: 14px;
  color: var(--site-neutral-70);
}
.ficha-hdr__title {
  margin: 0;
  font-size: var(--site-fs-h2);
  /* FICHA-07 retoque (d) -- H1 largo sin espacios (p.ej. "Condesa/
     Rooftop/Gym") desbordaba el ancho en movil en vez de partirse. */
  overflow-wrap: anywhere;
}
.ficha-linea-meta {
  margin: var(--site-space-1) 0 0;
  font-family: var(--site-font-family);
  font-size: 16px;
  color: var(--site-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-1);
}
.ficha-linea-meta__punto {
  color: var(--site-neutral-50);
}
/* Rating subrayado que ancla a #section-resenas (scroll, NUNCA modal --
   Amaury: "Los reviews son un modal. y tambien vienen hasta abajo",
   dicho del bloque de reseñas de Wander, no de este anclaje). Escala
   sobre 10 (Hostaway), no se convierte a 5 -- mismo `number_format`
   que ya usaba el badge viejo que este bloque reemplaza. */
.ficha-linea-meta__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--site-ink);
  text-decoration: underline;
  font-weight: var(--site-font-medium);
}
.ficha-linea-meta__rating .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
}

/* --- Tarjeta de elogio "Guest Review Accolade" (bloque 3) --------------- */
.ficha-elogio {
  margin-top: var(--site-space-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--site-space-3);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-xl);
  padding: var(--site-space-4);
}
.ficha-elogio__resumen {
  display: flex;
  align-items: center;
  gap: var(--site-space-1);
  flex: 0 0 auto;
}
.ficha-elogio__estrella {
  font-size: 16px;
  color: var(--site-ink);
  font-variation-settings: 'FILL' 1;
}
.ficha-elogio__rating {
  font-family: var(--site-font-family);
  font-weight: var(--site-font-bold);
  font-size: var(--site-fs-body-lg);
  color: var(--site-ink);
}
.ficha-elogio__conteo {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
  margin-left: var(--site-space-1);
}
.ficha-elogio__separador {
  width: 1px;
  align-self: stretch;
  background: var(--site-neutral-20);
  flex: 0 0 auto;
}
.ficha-elogio__frase {
  margin: 0;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body-lg);
  color: var(--site-ink);
  flex: 1 1 240px;
  min-width: 0;
}
@media (max-width: 480px) {
  .ficha-elogio__separador {
    display: none;
  }
}

/* --- Sellos (bloque 4) -------------------------------------------------- */
.ficha-sellos {
  margin-top: var(--site-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-4);
}
.ficha-sello {
  display: flex;
  align-items: center;
  gap: var(--site-space-3);
}
.ficha-sello__icono {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--site-neutral-05);
  color: var(--site-ink);
  font-size: 24px;
}
.ficha-sello__titulo {
  margin: 0;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: var(--site-fs-body-lg);
  color: var(--site-ink);
}
.ficha-sello__subtitulo {
  margin: 2px 0 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-neutral-70);
}

/* --- Scroll suave global para el sub-nav de anclas (bloque 1) ----------
   Guardado bajo prefers-reduced-motion: no-preference -- quien pide
   menos movimiento en su sistema operativo recibe el salto instantáneo
   de siempre, nunca la animación. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================================
   FICHA-04 (SITIO-WANDER) -- mapa de la ficha + "A pie desde aquí".
   Lugares reales del catálogo del proyecto SEO (docs/kb/seo/landmarks/),
   sin Google, sin costo por llamada (App\Services\Site\LugaresCercanos).
   Layout lado a lado en desktop, apilado en móvil (mismo breakpoint
   768px que el resto de site.css). El mapa reserva su alto en CSS
   ANTES de que Leaflet lo inicialice (regla /apple: no debe brincar al
   cargar) heredando .pms-site-detail-map (height: 280px) ya existente.
   ============================================================ */
.ficha-mapa-lugares {
  display: flex;
  gap: var(--site-space-4);
  align-items: stretch;
  margin-top: var(--site-space-3);
}

.ficha-mapa-lugares__mapa {
  flex: 1 1 60%;
  min-width: 0;
  /* Ya trae su alto de .pms-site-detail-map; margin-top se quita aqui
     porque ahora lo pone el wrapper .ficha-mapa-lugares. */
  margin-top: 0;
}

.ficha-mapa-lugares__lista {
  flex: 1 1 40%;
  min-width: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--site-neutral-30);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-3);
  background: var(--site-neutral-05, #f7f7f7);
}

.ficha-mapa-lugares__titulo {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  font-weight: var(--site-font-medium);
  color: var(--site-neutral-70);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--site-space-2);
}

.ficha-mapa-lugares__ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ficha-mapa-lugares__item {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--site-space-2);
  background: none;
  border: 0;
  border-radius: var(--site-radius-md);
  padding: var(--site-space-2);
  font-family: var(--site-font-family);
  text-align: left;
  cursor: pointer;
  color: var(--site-ink);
}

.ficha-mapa-lugares__item:hover,
.ficha-mapa-lugares__item:focus-visible {
  background: rgba(115, 109, 234, 0.08);
}

.ficha-mapa-lugares__nombre {
  font-size: var(--site-fs-support);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha-mapa-lugares__min {
  flex: 0 0 auto;
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
  white-space: nowrap;
}

/* Un solo estilo de marcador para todos los lugares (regla /apple: sin
   variar iconos por tipo de lugar en un mapa de apoyo). divIcon
   vectorial (site-mapa-ficha.js), cero imágenes que descargar. */
.ficha-mapa-lugares__pin {
  background: transparent;
  border: none;
}

.ficha-mapa-lugares__pin-punto {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #736dea;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

@media (max-width: 768px) {
  .ficha-mapa-lugares {
    flex-direction: column;
  }

  .ficha-mapa-lugares__lista {
    max-height: none;
  }
}

/* FICHA-04 -- fix medido en vivo con Playwright (iPhone 390x844, UA de
   Amaury): dentro de @media (max-width: 768px) arriba,
   `.ficha-mapa-lugares__mapa` heredaba `flex: 1 1 60%` del layout de
   escritorio. Al pasar el contenedor a `flex-direction: column`, el
   eje principal es el alto, y 60% de un contenedor sin alto propio es
   una base indefinida que el navegador resuelve como 0 -- el mapa
   quedaba con 0px de alto, invisible entre el texto de ubicación y la
   lista "A pie desde aquí" (visto en la captura móvil real). Se
   AGREGA esta regla, no se edita la de arriba, para no tocar historia
   ya escrita en este archivo -- por cascada, al ir después, es la que
   gana. flex-basis:auto (via "flex: 0 0 auto") hace que el alto vuelva
   a mandarlo el `height: 280px` explícito de `.pms-site-detail-map`. */
@media (max-width: 768px) {
  .ficha-mapa-lugares__mapa {
    flex: 0 0 auto;
  }
}


/* DUENOS-01b (2026-09-20) -- hallazgo de DUENOS-01: en /para-propietarios a
   390px habia 22px de scroll horizontal (scrollWidth 412 vs clientWidth 390),
   causados por .pms-site-btn-pill-outline dentro de la seccion "Ya eres
   propietario?" -- .pms-site-callout es `display:flex` sin flex-direction
   (fila) y sin wrap, y el h2+p+a compitiendo por el espacio empujaba al boton
   (texto "Request my link on WhatsApp") mas alla del viewport. Se apila en
   columna SOLO en movil y SOLO para esta instancia via la clase
   `.owners-existing-owner-callout` agregada en owners.blade.php -- no se
   toca `.pms-site-callout` ni `.pms-site-btn-pill-outline` base, usados en
   otras paginas/secciones (incluida la barra de navegacion). */
@media (max-width: 480px) {
  .owners-existing-owner-callout {
    flex-direction: column;
    align-items: stretch;
  }

  .owners-existing-owner-callout .pms-site-btn-pill-outline {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
  }
}


/* ============================================================
   CONF-01/FICHA-08 (SITIO-WANDER, 2026-09-20) -- reviews igual a
   Wander (docs/kb/sitio/wander-referencia.md sec. g / bloque 8): H2
   "★ 9.6 · N reseñas", 3 visibles con avatar-inicial, "★★★★★ • mes
   año" real, texto a 2 líneas + "Leer más", píldora "Ver todas las
   reseñas" -> modal 600x704. Móvil primero, sin scroll horizontal:
   todo el bloque es ancho fluido dentro de .ficha-texto-orden-resenas,
   ningún ancho fijo en px.
   ============================================================ */
.ficha-resenas__titulo {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  margin: 0 0 var(--site-space-4);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-subtitle);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
}

.ficha-resenas__titulo-icono {
  font-size: 24px;
  color: var(--site-ink);
  /* FICHA-09 retoque (c) -- Material Symbols Outlined sale hueco por
     defecto; se llena con el mismo mecanismo que .ficha-elogio__estrella
     (FILL 1 de la fuente variable), para que coincida con la estrella
     llena de la tarjeta de elogio. */
  font-variation-settings: 'FILL' 1;
}

.ficha-resenas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-6);
}

.ficha-resenas__item {
  padding-bottom: var(--site-space-6);
  border-bottom: 1px solid var(--site-neutral-30);
}

.ficha-resenas__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ficha-resenas__encabezado {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-3);
  margin-bottom: var(--site-space-2);
}

/* Avatar-inicial (FICHA-08) -- círculo 24px de color estable
   (PropertyDetail::avatarColor(), hash sobre el nombre) con la
   inicial (avatarInicial()). A propósito CERO <img>: ni foto externa
   ni la foto local con autorización que sí usa el carrusel
   compartido -- ver docblock de reviewsDetalladas(). */
.ficha-resena-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-font-family);
  font-size: 11px;
  font-weight: var(--site-font-bold);
  color: #fff;
  line-height: 1;
}

.ficha-resenas__encabezado-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ficha-resenas__nombre {
  /* FICHA-09 retoque (b) -- 14px (era --site-fs-body, 16px). Misma
     clase la reusa el modal (blade), un cambio cubre ambos. */
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
}

/* "★★★★★ • Marzo 2026" -- estrellas = round(rating/2), fecha real
   (fechaDeReview()); sin fecha, solo estrellas (ver blade: el "•" y
   el mes/año solo se pintan con $review->date). */
.ficha-resenas__meta {
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-50);
}

.ficha-resenas__estrellas {
  color: var(--site-ink);
  letter-spacing: 1px;
}

.ficha-resenas__canal {
  /* FICHA-09 retoque (a) -- BUG real: como flex item de
     .ficha-resenas__encabezado-texto (column, align-items:stretch por
     defecto), un inline-block se estiraba al ancho completo del
     contenedor (~120px, casi vacio). align-self:flex-start +
     width:auto lo devuelven a su contenido real. */
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  margin-top: 2px;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-label-sm);
  color: var(--site-neutral-70);
  padding: 1px var(--site-space-2);
  border-radius: 999px;
  background: var(--site-neutral-05);
}

/* Texto colapsado a 2 líneas (FICHA-08, era 4) -- mismo mecanismo que
   .ficha-texto-descripcion (FICHA-02): line-clamp para el recorte
   visual, max-height con transition para que abrir/cerrar anime,
   botón .ficha-texto-leermas reusado tal cual. */
.ficha-resenas__texto-envoltura {
  overflow: hidden;
  max-height: 60px;
  transition: max-height .5s ease;
}

.ficha-resenas__texto-envoltura.is-expandida {
  max-height: 4000px;
}

.ficha-resenas__texto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* FICHA-09 retoque (b) -- 14px/1.45 (era 16px/1.5). */
  line-height: 1.45;
  margin: 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  white-space: pre-line;
}

.ficha-resenas__texto-envoltura.is-expandida .ficha-resenas__texto {
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ficha-resenas__texto-envoltura {
    transition: none;
  }
}

.ficha-resenas__ver-todas {
  /* FICHA-09 retoque (d) -- pildora gris #f2f2f2 sin borde, mismo
     lenguaje que .ficha-texto-leermas--pildora de "Acerca de este
     lugar" (era borde 1px + fondo transparente). */
  display: inline-block;
  margin-top: var(--site-space-4);
  background: #f2f2f2;
  border: 0;
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  cursor: pointer;
  color: var(--site-ink);
}

.ficha-resenas__ver-todas:hover,
.ficha-resenas__ver-todas:focus-visible {
  background: var(--site-neutral-10);
}

/* --- Modal "Ver todas las reseñas" 600x704 (FICHA-08) -- MISMO patrón
   que .ficha-amenidades-modal (FICHA-07): box-sizing:border-box
   explícito (el bug real de esa tarea -- sin esto, width+padding se
   suman y el modal se sale del viewport en móvil), hoja completa
   ≤768px. */
.ficha-resenas-modal {
  box-sizing: border-box;
  width: 600px;
  max-width: calc(100vw - 32px);
  height: 704px;
  max-height: calc(100vh - 64px);
  border-radius: var(--site-radius-xl);
  display: flex;
  flex-direction: column;
  padding: var(--site-space-6);
}

.ficha-resenas-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3);
  flex: 0 0 auto;
}

.ficha-resenas-modal__header h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha-resenas-modal__header button {
  flex: 0 0 auto;
}

.ficha-resenas-modal__cuerpo {
  margin-top: var(--site-space-4);
  overflow-y: auto;
  flex: 1 1 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-6);
}

.ficha-resenas-modal__item {
  padding-bottom: var(--site-space-6);
  border-bottom: 1px solid var(--site-neutral-30);
}

.ficha-resenas-modal__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Texto completo, SIN line-clamp (a diferencia de las 3 visibles de
   fuera del modal) -- el modal es precisamente el lugar del texto
   íntegro. */
.ficha-resenas-modal__texto {
  margin: var(--site-space-2) 0 0;
  font-family: var(--site-font-family);
  /* FICHA-09 retoque (b) -- igual que la tarjeta de fuera del modal. */
  font-size: var(--site-fs-support);
  line-height: 1.45;
  color: var(--site-ink);
  white-space: pre-line;
}

.ficha-resenas-modal__ver-mas {
  /* FICHA-09 retoque (d) -- misma pildora #f2f2f2 sin borde. */
  flex: 0 0 auto;
  margin-top: var(--site-space-4);
  align-self: center;
  background: #f2f2f2;
  border: 0;
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-6);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  font-weight: var(--site-font-medium);
  cursor: pointer;
  color: var(--site-ink);
}

.ficha-resenas-modal__ver-mas:hover,
.ficha-resenas-modal__ver-mas:focus-visible {
  background: var(--site-neutral-10);
}

.ficha-resenas-modal__ver-mas[disabled] {
  opacity: .6;
  cursor: default;
}

@media (max-width: 768px) {
  .ficha-resenas-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* --- Párrafo de zona dentro de "Dónde vas a estar" (FICHA-09) --
   antes vivía en su propia sección "Qué hacer cerca" (CONF-01) con una
   SEGUNDA lista de los mismos lugares sin artículo -- esa sección se
   fusionó dentro del bloque de ubicación (FICHA-04) y la lista
   duplicada se quitó ("un solo bloque de ubicación, sin repetir la
   lista de lugares dos veces"); solo queda el párrafo. */
.ficha-zona-texto {
  margin: var(--site-space-2) 0 0;
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  line-height: var(--site-lh-body);
  color: var(--site-neutral-70);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

/* ============================================================
   FICHA-07 (worklist .worklist/20260920-decisiones-amaury.json,
   adenda wander-referencia.md bloques 6-7) -- "Where you'll sleep"
   (carrusel por recámara con tipo de cama real de bed_types_json) y
   "Amenities" (dos columnas con ícono + modal 600x704 con buscador).
   ============================================================ */

.ficha-dormir__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4);
}

.ficha-dormir-carrusel__nav {
  display: flex;
  gap: var(--site-space-2);
  flex: 0 0 auto;
}

.ficha-dormir-carrusel__flecha {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--site-neutral-20);
  background: var(--site-neutral-00);
  color: var(--site-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ficha-dormir-carrusel__flecha:hover,
.ficha-dormir-carrusel__flecha:focus-visible {
  background: var(--site-chip-active-bg, var(--site-neutral-05));
  border-color: var(--site-btn-default, var(--site-ink));
}

.ficha-dormir-carrusel__flecha .material-symbols-outlined { font-size: 20px; }

.ficha-dormir-carrusel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--site-space-4);
  margin-top: var(--site-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--site-space-1);
}

/* Oculta la barra de scroll (queda navegable con las flechas o con el
   dedo/trackpad) -- mismo criterio visual que .pms-site-carousel__track. */
.ficha-dormir-carrusel__track::-webkit-scrollbar { display: none; }
.ficha-dormir-carrusel__track { scrollbar-width: none; }

.ficha-dormir-carrusel__tarjeta {
  flex: 0 0 calc(50% - var(--site-space-2));
  scroll-snap-align: start;
  min-width: 0;
}

.ficha-dormir-carrusel__foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--site-radius-lg);
  background-size: cover;
  background-position: center;
  background-color: var(--site-neutral-10);
}

.ficha-dormir-carrusel__foto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-neutral-40);
}

.ficha-dormir-carrusel__foto--vacia .material-symbols-outlined { font-size: 32px; }

.ficha-dormir-carrusel__nombre {
  margin: var(--site-space-2) 0 0;
  font-family: var(--site-font-family);
  font-weight: var(--site-font-medium);
  font-size: 14px;
  color: var(--site-ink);
}

.ficha-dormir-carrusel__cama {
  margin: 2px 0 0;
  font-family: var(--site-font-family);
  font-size: 14px;
  color: var(--site-neutral-70);
}

/* AUDIT-HOLD FICHA-07 (Brain, diseño) -- tarjeta COMPACTA sin area de
   imagen (patron Airbnb cuando no hay foto), en vez del rectangulo gris
   enorme con un icono (relleno, ya rechazado en HOME-01). Se usa cuando
   AL MENOS UNA recamara real se queda sin foto (ver
   $sleepingRoomsConFoto en la vista) -- nunca se mezclan alturas dentro
   de la misma property. */
.ficha-dormir-carrusel__tarjeta--compacta {
  flex-basis: 200px;
  max-width: 220px;
  border: 1px solid #e5e5e5;
  border-radius: var(--site-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--site-space-2);
}

.ficha-dormir-carrusel__tarjeta--compacta .ficha-dormir-carrusel__nombre,
.ficha-dormir-carrusel__tarjeta--compacta .ficha-dormir-carrusel__cama {
  margin: 0;
}

.ficha-dormir-carrusel__icono-compacto {
  font-size: 24px;
  color: var(--site-ink);
}

@media (max-width: 768px) {
  .ficha-dormir-carrusel__tarjeta:not(.ficha-dormir-carrusel__tarjeta--compacta) {
    flex-basis: 78%;
  }

  .ficha-dormir-carrusel__tarjeta--compacta {
    flex-basis: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-dormir-carrusel__track { scroll-behavior: auto; }
  .ficha-dormir-carrusel__flecha { transition: none; }
}

/* --- Amenidades: dos columnas con icono (bloque 7) ---------------------- */
.ficha-amenidades-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-space-3) var(--site-space-6);
  margin-top: var(--site-space-4);
}

.ficha-amenidad-item {
  display: flex;
  align-items: center;
  gap: var(--site-space-3);
  min-width: 0;
}

.ficha-amenidad-item__icono {
  font-size: 20px;
  flex: 0 0 auto;
  color: var(--site-ink);
}

.ficha-amenidad-item__texto {
  font-family: var(--site-font-family);
  font-size: 14px;
  color: var(--site-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .ficha-amenidades-grid {
    gap: var(--site-space-2) var(--site-space-3);
  }
}

/* --- Modal "Todas las amenidades" 600x704 con buscador ------------------ */
.ficha-amenidades-modal {
  /* BUG real medido en vivo (movil 390px, R2.S ya documentado en este
     mismo archivo para otro componente): sin box-sizing:border-box,
     width:100% (mobile) o 600px (desktop) NO incluye el padding, asi
     que el borde derecho de la tarjeta se salia del viewport/medida
     pedida por el ancho exacto del padding (48px). */
  box-sizing: border-box;
  width: 600px;
  max-width: calc(100vw - 32px);
  height: 704px;
  max-height: calc(100vh - 64px);
  border-radius: var(--site-radius-xl);
  display: flex;
  flex-direction: column;
  padding: var(--site-space-6);
}

.ficha-amenidades-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3);
  flex: 0 0 auto;
}
/* BUG real medido en vivo (movil 390px): el titulo (h3, ancho natural sin
   limite) empujaba la X de cerrar fuera del viewport -- flex items no
   ceden espacio por defecto (min-width:auto). Mismo patron ya usado en
   .ficha-comparador-panel__nombre (FICHA-06): el titulo cede primero. */
.ficha-amenidades-modal__header h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ficha-amenidades-modal__header button {
  flex: 0 0 auto;
}

.ficha-amenidades-modal__buscador {
  margin-top: var(--site-space-4);
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  border: 1px solid var(--site-neutral-20);
  border-radius: var(--site-radius-pill);
  padding: var(--site-space-2) var(--site-space-4);
  flex: 0 0 auto;
  color: var(--site-neutral-70);
}

.ficha-amenidades-modal__buscador input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--site-font-family);
  font-size: 14px;
  color: var(--site-ink);
}

.ficha-amenidades-modal__cuerpo {
  margin-top: var(--site-space-4);
  overflow-y: auto;
  flex: 1 1 auto;
}

/* AUDIT-HOLD FICHA-07 (Brain) -- BUG real: var(--site-space-5) NO
   EXISTE en la escala de tokens (92-98: 1,2,3,4,6,8,12 -- salta del 4 al
   6) -- el margen entre grupos simplemente no se aplicaba. 24px pedido
   explicito = var(--site-space-6). El titulo pega con el ultimo renglon
   del grupo anterior via este margin-top (0 en el primer grupo, por el
   selector `+`); 8px propios antes de su lista via margin-bottom del
   titulo (no margin-top del grid, para que sea el titulo quien manda su
   espacio, igual en escritorio y movil -- no hay media query aqui). */
.ficha-amenidades-modal__grupo + .ficha-amenidades-modal__grupo {
  margin-top: var(--site-space-6);
}

.ficha-amenidades-modal__grupo-titulo {
  display: block;
  font-family: var(--site-font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--site-ink);
  margin: 0 0 var(--site-space-2);
}

.ficha-amenidades-modal__grupo .ficha-amenidades-grid {
  margin-top: 0;
}

@media (max-width: 768px) {
  .ficha-amenidades-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .ficha-amenidades-modal .ficha-amenidades-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FICHA-09 (worklist .worklist/20260920-decisiones-amaury.json,
   adenda wander-referencia.md bloque 11 "Things to know") -- "Lo que
   debes saber" en tres columnas en desktop, una en movil: Politica de
   cancelacion / Reglas de la casa / Seguridad y llegada. Reusa
   .ficha-texto-acordeon tal cual (FichaTextoColapsadoTest cuenta 2
   ocurrencias literales de esa clase) solo dentro de una columna.
   ============================================================ */
.ficha-saber-columnas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--site-space-6);
  margin-top: var(--site-space-4);
  align-items: start;
}

/* AUDIT-HOLD FICHA-09 (Brain) -- BUG real: un grid item sin min-width
   explicito calcula su ancho minimo a partir del min-content de TODOS
   sus descendientes, incluyendo ficha-texto-acordeon__linea
   (white-space:nowrap -- su min-content es el texto COMPLETO sin
   cortar, hasta 100 caracteres). Eso forzaba a la columna 1
   (cancelacion) a pedir casi todo el ancho, empujaba la columna 2 a
   x~700 (cortada a la derecha) y aplastaba la 3 fuera del contenedor.
   `minmax(0, 1fr)` en el grid (arriba) + min-width:0 aqui son las DOS
   mitades del fix -- una sin la otra no basta, medido en vivo. */
.ficha-saber-col {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ficha-saber-col .ficha-texto-acordeon,
.ficha-saber-col .ficha-texto-acordeon__texto,
.ficha-saber-col .ficha-texto-acordeon__cuerpo {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .ficha-saber-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ficha-saber-col__titulo {
  display: flex;
  align-items: center;
  gap: var(--site-space-2);
  margin: 0 0 var(--site-space-3);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-body);
  font-weight: var(--site-font-medium);
  color: var(--site-ink);
}

.ficha-saber-col__titulo .material-symbols-outlined {
  font-size: 20px;
  color: var(--site-ink);
}

.ficha-saber-lista {
  list-style: none;
  margin: 0 0 var(--site-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2);
}

.ficha-saber-lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-2);
  font-family: var(--site-font-family);
  font-size: var(--site-fs-support);
  color: var(--site-ink);
  line-height: 1.4;
}

.ficha-saber-lista .material-symbols-outlined {
  font-size: 20px;
  color: var(--site-neutral-70);
  flex: 0 0 auto;
  line-height: 1.2;
}

/* Dentro de una columna, el acordeon reusado (.ficha-texto-acordeon) no
   necesita el margen-top de --site-space-8 que trae cuando vive suelto
   entre secciones. */
.ficha-saber-col .ficha-texto-acordeon {
  margin-top: 0;
}