@charset "UTF-8";

/* =========================
   Tipografías
========================= */
@import url("webfonts/Poppins_Regular/stylesheet.css");
@import url("webfonts/Poppins_Bold/stylesheet.css");
@import url("webfonts/Poppins_Medium/stylesheet.css");
@import url("webfonts/Poppins_SemiBold/stylesheet.css");

/* =========================
   Variables (tokens)
========================= */
:root{
  --packo-bg: #0F2232;
  --packo-header: #1C3D59;
  --packo-accent: #C4484A;
  --packo-text: #000000;
  --packo-muted: #BABABA;
  --packo-white: #FFFFFF;
  --packo-radius: 25px;
  --packo-header-h: 96px;
  --packo-primary: #17b5db;
  --container-max: 1200px;

  /* Asesor (perfil inmueble) */
  --asesor-foto-desktop: 120px;
  --asesor-foto-mobile: 120px;
  --asesor-gap-desktop: 28px;
  --asesor-gap-mobile: 12px;

  /* Grid con fondo */
  --grid-bg-size: 20rem auto;

  /* Main padding (fluido por breakpoint) */
  --pad-inline: 85px;

  /* Badges */
  --badge-rent: #3ba173;
  --badge-sale: #f3a530;
  --badge-base: #1C3D59;

  /* === Tamaño foto en TARJETAS de asesores (grid) === */
  --advisor-card-size: 140px; /* desktop por defecto */

  /* Tarjetas (grid) → espacio nombre */
  --advisor-name-gap-mobile: 0px;
  --advisor-name-gap-tablet: 0px;
  --advisor-name-gap-desktop: 0px;
  --advisor-name-gap-xl: 0px;
  --advisor-name-gap-xxl: 0px;

  /* Perfil individual */
  --profile-name-gap-mobile: 8px;
  --profile-name-gap-tablet: 10px;
  --profile-name-gap-desktop: 12px;
  --profile-name-gap-xl: 16px;
  --profile-name-gap-xxl: 20px;

  /* WhatsApp */
  --packo-whatsapp: #25D366;
}

/* =========================
   Reset / Utilidades
========================= */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iOS no reescala */

/* =========================
   Base / Layout general
========================= */
body{
  font-family: "Poppins Regular", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background-color: #E4E2E2;
  color: var(--packo-text);
}
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 15px;
}

/* =========================
   Header / Navegación
========================= */
header{
  background-color: var(--packo-header);
  padding: 15px 29px;
  position: relative;
  width: 100%;
}
header a img{ width: 200px; height: 50px; display: block; }
nav{ float: right; }
.mobile-view{ display: none; }
.desktop-view{ margin-top: -40px; display: block; }
.desktop-view ul{ margin:0; padding:0; list-style:none; }
.desktop-view ul li{ display:inline-block; }
.desktop-view ul li a{
  display:inline-block; padding:13px 34px 13px 0; color:var(--packo-white);
  text-decoration:none; font-family:"Poppins Regular";
}

/* =========================
   Main
========================= */
main{
  background-color: var(--packo-white);
  padding: 10px var(--pad-inline);
  min-height: 400px;
}

/* =========================
   Enlace: Volver al perfil
========================= */
.link-volver{ margin: 10px 0 20px; text-align: left; }
.link-volver a{
  font-family: "Poppins Regular"; font-size: 16px; color: var(--packo-header);
  text-decoration: none; transition: color .2s ease, text-decoration .2s ease;
}
.link-volver a:hover{ text-decoration: underline; color: var(--packo-accent); }

/* =========================
   Información del inmueble
========================= */
.inmueble-header{
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;
}
.inmueble-nombre{
  font-family:"Poppins SemiBold"; font-size:26px; margin:0; color:var(--packo-header); flex:1;
}
.asesores-titulo{
    font-family: "Poppins SemiBold";
    font-size: 22px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: -5px;
}
.inmueble-precio-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: -10px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 12px;
    font-family: "Poppins Regular";
}
.inmueble-precio{
  font-family: "Poppins Regular";
  font-size: 20px;
  color: var(--packo-header);
  margin-top: 0px;
}
.inmueble-ubicacion{
  font-family: "Poppins Regular";
  font-size: 16px;
  margin-top: -15px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 11px;
}
.inmueble-ubicacion img{ position:relative; top:2px; }

/* Compartir */
.inmueble-share img{ display:block; cursor:pointer; transition: transform .2s ease; }
.inmueble-share img:hover{ transform: scale(1.1); }

/* =========================
   Caracter�sticas (grid)
========================= */
.inmueble-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    align-items: start;
    margin-bottom: 20px;
    margin-top: 50px;
}
.inmueble-container::after{ content:""; display:block; clear:both; }

/* =========================
   Bloque asesor (perfil inmueble)
========================= */
.inmueble-asesor{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--asesor-gap-desktop);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  max-width: 900px;
  padding: 0 20px;
}
.asesor-foto{
    width: var(--asesor-foto-desktop);
    height: var(--asesor-foto-desktop);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-top: 15px;
    margin-bottom: -20px;
}
.asesor-contacto{
  display:flex; flex-direction:column; align-items:center; gap:6px; line-height:1.25;
  max-width:360px; width:100%; font-family:"Poppins Regular"; color:var(--packo-text); font-size:18px; margin-top:-10px;
}
.asesor-nombre{
  font-family:"Poppins SemiBold","Poppins Bold",sans-serif; font-size:22px; color:var(--packo-header); margin:0;
}
.asesor-empresa{
    font-size: 15px;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    color: #666;
    opacity: .95;
}
.asesor-telefono,.asesor-email{
    font-size: 16px;
    margin-top: -10px;
    margin-bottom: 7px;
}
.asesor-contacto a{ color:inherit; text-decoration:none; }

/* Redes */
.asesor-redes{
  display:flex; gap:14px; margin-top:12px; justify-content:center; align-items:center;
}
.asesor-redes a{
  width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  transition: transform .14s ease, box-shadow .14s ease; background:var(--packo-white); box-shadow:0 2px 6px rgba(0,0,0,.06);
  margin-top:-10px;
}
.asesor-redes a img{ width:30px; height:30px; object-fit:contain; }
.asesor-redes a:hover{ transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.asesor-redes a:focus-visible{ outline:3px solid rgba(0,0,0,.08); outline-offset:3px; }

/* =========================
   Galería de imágenes
========================= */
.images-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
  max-width: 1000px;
  margin-inline: auto;
}
.images-grid img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.images-grid.images-grid--wide{
  max-width: none;
  width: calc(100% + (var(--pad-inline) * 2));
  margin-left: calc(var(--pad-inline) * -1);
  margin-right: calc(var(--pad-inline) * -1);
}

/* =========================
   Footer
========================= */
footer{
  background-color: var(--packo-white);
  min-height: 125px;
  border-bottom-left-radius: var(--packo-radius);
  border-bottom-right-radius: var(--packo-radius);
  padding-bottom: 30px;
  box-shadow: 0 0 #D9D9D9;
}
.container footer div{
  margin-left: 10%;
  margin-right: 8%;
  text-align: center;
}
div a img{ margin: 15px; }
.social-footer{ padding-top: 30px; }
.ES-2025{ font-size: small; color: var(--packo-muted); margin-top: 17px; }
.grabovoi{
  font-size: 2px; color: var(--packo-header); text-align: right; padding-right: 40px; text-decoration: none;
}

/* =========================
   Top-line: Volver + Compartir
========================= */
.top-line{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap; width:100%;
  margin: -10px 0 -20px 0;
}
.top-line .link-volver{ flex:1 1 auto; min-width:0; margin:0; text-align:left; }
.top-line .link-volver a{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px; color:var(--packo-header); text-decoration:none;
}
.top-line .link-volver a:hover{ color:var(--packo-accent); text-decoration:underline; }
.top-line .inmueble-share-row{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; }
.top-line .inmueble-share{ display:inline-flex; align-items:center; justify-content:center; padding:4px; border-radius:8px; }
.top-line .inmueble-share img{ width:25px; height:25px; transition: transform .18s ease; }
.top-line .inmueble-share:hover img{ transform: scale(1.08); }

/* =========================
   Property Cards (Packo)
========================= */
.prop-listing{ margin-top: 24px; }
.prop-listing .prop-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap:22px;
}
.prop-listing .property-card{
  background: var(--packo-white); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.prop-listing .property-media img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
  margin-top: -3px;
  margin-left: 0px;
}
.prop-listing .property-media{
  position: relative;
  overflow: hidden;
  margin-top: -5%;
  margin-left: -10%;
}
.prop-listing .property-media:hover img{ transform: scale(1.02); }
.prop-listing .badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--badge-base);
  color: #fff;
  font: 500 12px/1 "Poppins Medium", sans-serif;
  padding: 6px 10px;
  border-radius: 999px;
  margin-left: 30px;
  margin-bottom: 18px;
}
.prop-listing .badge.badge--sale{ background: var(--badge-sale); }
.prop-listing .badge.badge--rent{ background: var(--badge-rent); }

.prop-listing .fav-btn{
  position:absolute; right:12px; bottom:12px; border:0; background:#ffffffd9;
  width:38px; height:38px; border-radius:999px; font-size:18px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.prop-listing .fav-btn:focus-visible{ outline:3px solid rgba(0,0,0,.15); outline-offset:2px; }
.prop-listing .property-info{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px 14px 16px; }
.prop-listing .price{
    margin-top: -20px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 4px;
    color: var(--packo-header);
    font-family: "Poppins Medium";
    font-size: 42px;
}
.prop-listing .price .price__suffix{
  font-size:14px; font-family:"Poppins Regular", sans-serif; color:#556; margin-left:4px;
}
.prop-listing .title{ margin:0 0 10px; font:600 16px/1.25 "Poppins Medium", sans-serif; color:#222; }
.prop-listing .facts{
  display:flex; flex-wrap:wrap; gap:8px 14px; padding:0; margin:0 0 10px;
  list-style:none; font:400 13px/1.2 "Poppins Regular", sans-serif; color:#444;
}
.prop-listing .address{ margin:0 0 14px; font:400 13px/1.4 "Poppins Regular", sans-serif; color:#6b7280; }
.prop-listing .actions{
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.prop-listing .btn{
  appearance:none; border:0; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px;
  font: 500 clamp(13px, 1.4vw, 14px)/1 "Poppins Medium", sans-serif;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.prop-listing .btn:active{ transform: translateY(1px); }
.prop-listing .btn--primary{ background: var(--packo-primary); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.10); align:center; }
.prop-listing .btn--primary:hover{ background:#0ea2c5; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.prop-listing .btn--ghost{ background:#fff; color:var(--packo-header); border:1px solid #e5e7eb; }
.prop-listing .btn--ghost:hover{ border-color:#d1d5db; }

/* === Single result: ancho amigable y alineado a la izquierda === */
.prop-listing .prop-grid.single-result{ grid-template-columns: 1fr; justify-items:start; }
.prop-listing .prop-grid.single-result > .property-card{ width: clamp(340px, 50%, 560px); margin-inline: 0 auto; }

/* =========================
   Textos sueltos
========================= */
.text-home{
  margin-top: 20px;
  font-family: "Poppins Regular";
  font-size: 16px;
  margin-bottom: 40px;
  text-align: justify;
}
/* =========================
   Hero Section
========================= */
.hero {
    position: relative;
    width: 100%;
    height: 350px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center 72%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* =========================
   Hero Section
========================= */
.hero{
    position: relative;
    width: 100%;
    height: 475px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center 72%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.hero-overlay{
  width: 100%;
  height: 100%;
  background-color: rgba(15,34,50,0.20);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10%;
}
.hero-content{ color:#fff; max-width:600px; }
.hero-title{
  line-height: 50px;
  font-size: 28px;
  margin: 0 0 15px;
  text-shadow: 2px 2px 6px rgba(0,0,0,.6);
  font-family: "Poppins Regular";
  letter-spacing: 2px;
}
.hero-subtitle{
  font:400 23px/1.3 "Poppins Regular"; margin:0 0 50px; text-shadow:2px 2px 6px rgba(0,0,0,.6);
}
.hero-actions{
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 230px;
}
.btn-hero{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-hero--light{
  background:#fff;
  color:var(--packo-header);
  border:1px solid rgba(0,0,0,.06);
}
.btn-hero--light:hover,
.btn-hero--light:focus{
  transform:translateY(-1px);
}
.btn-hero--explorasv{
  background: var(--packo-primary);
  color: #fff;
  border: 1px solid var(--packo-primary);
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
}
.btn-hero--explorasv:hover,
.btn-hero--explorasv:focus{
  background:#14a8cb;
  border-color:#14a8cb;
  transform:translateY(-1px);
}

/* =========================
   Grid de 3 imágenes (simple)
========================= */
.packo-grid{ background-color:#FFFFFF; }
.grid-container{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:30px;
}
.grid-item{ display:flex; align-items:center; justify-content:center; }
.grid-item img{ width:100%; height:auto; }

/* =========================
   Grid con imágenes / tarjetas CTA
========================= */
.packo-grid-bg {
    padding-top: 20px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 60px;
    background-color: #fff;
    margin-top: -20px;
}
.grid-bg-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .grid-bg-container {
    grid-template-columns: 1fr;
  }
}
.grid-bg-item {
  position: relative;
  border-radius: 16px;
  min-height: 220px;
  background: #f5f5f5; /* placeholder gris */
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.grid-bg-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.grid-bg-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}
.grid-bg-title {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: #000;
    margin: 0;
}
/* Evita subrayado/color enlace azul */
.grid-bg-item,
.grid-bg-item * {
  text-decoration: none !important;
  color: inherit !important;
}

/* Botón CTA dentro de tarjetas */
.btn-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    color: #fff !important;
    background: var(--packo-primary);
    border: 1px solid var(--packo-primary);
    border-radius: 12px;
    padding-top: 8px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 8px;
    min-width: 140px;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
    margin-top: 10px;
}
.btn-grid:hover,
.btn-grid:focus {
  background: #14a8cb;
  border-color: #14a8cb;
  transform: translateY(-1px);
}

/* =========================
   PACKO — Módulo Asesores (centrado)
========================= */
.advisor-grid{
  display:grid; gap:20px; grid-template-columns:1fr; align-items:stretch; margin-top:30px;
}
.container main {}
.asesore-titulo-explora {
    font-family: "Poppins Regular";
    font-size: 20px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: 0px;
    margin-top: -10px;
    text-align: center;
}
.text-asesores-explora {
  padding-left: 30px;
  margin-bottom: -10px;
}
.inmueble-titulo {
    font-family: "Poppins Medium";
    color: var(--packo-header);
    font-size: 25px;
    font-weight: normal;
}
.location-icon  { margin-right: 10px; }
@media (min-width:640px){  .advisor-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .advisor-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } /* =========================
   Grid con imágenes / tarjetas CTA
========================= */
}
.advisor-grid .advisor-card{ height:100%; }

/* Card base + overlay */
.advisor-card{
  position:relative; background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(16,24,40,.3);
  overflow:hidden; padding:18px;
}
.advisor-card__overlay{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  width: 0px;
}
.advisor-card .asesor-foto, .advisor-card .advisor-card__content{ position:relative; z-index:2; }

/* Variante centrada */
.advisor-card.is-centered{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-height:260px;
}
@media (min-width:1024px){ .advisor-card.is-centered{ min-height:280px; } }

/* Avatar / logo */
.advisor-card.is-centered .asesor-foto{
    width: var(--advisor-card-size);
    height: var(--advisor-card-size);
    border-radius: 999px;
    object-fit: cover;
    background: #0F2232;
    display: block;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
}
.advisor-card.is-centered .asesor-foto.is-logo{
  object-fit:contain; background:#fff; padding:8px;
}

/* Textos asesores */
.advisor-card.is-centered .advisor-card__name{
  margin:8px 0 2px;
  color:var(--packo-header);
  font-size:clamp(18px,2.4vw,18px);
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:"Poppins Medium";
}
.advisor-card.is-centered .advisor-card__org{
  margin:0 0 10px; color:#6b7280; font-size:15px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* Contactos */
.advisor-card.is-centered .advisor-card__contacts{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 10px; font-weight:600; color:var(--packo-text);
}
.advisor-card__contacts a{ color:inherit; text-decoration:none; }
.advisor-card__contacts a:hover{ text-decoration:underline; }
.advisor-card__contacts a:empty,
.advisor-card__contacts a[href="mailto:"],
.advisor-card__contacts a[href="tel:"]{ display:none; }
.advisor-card__contacts a + a::before{
  content:"·"; margin:0 8px 0 4px; color:#6b7280; font-weight:400;
}

/* Acciones */
.advisor-card.is-centered .advisor-card__actions{ display:flex; justify-content:center; gap:10px; }
.btn.btn--ghost{
  background:transparent; border:0; padding:0; box-shadow:none;
  color:var(--packo-header); font:600 14px/1 "Poppins Medium", system-ui; text-decoration:none;
}
.btn.btn--ghost:hover{ color:#0e2b40; }

/* Chip propiedades */
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#F1F5F9; color:var(--packo-header);
  font:600 12px/1 "Poppins Medium", system-ui; vertical-align:middle;
}

/* =========================
   Buscador asesores / utilidades
========================= */
.advisor-tools{ display:block; width:100%; clear:both; grid-column:1 / -1; margin-top:-45px; }
.advisor-search{ text-align:center; }
.advisor-search input[type="search"]{
  display:block; margin:0 auto; width:min(500px, 100%);
  color:#111 !important; background:#fff !important; -webkit-text-fill-color:#111;
  caret-color:#111; -webkit-appearance:none; appearance:none;
  border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:16px; line-height:1.2;
}
.advisor-search input[type="search"]::placeholder{ color:#6b7280; opacity:1; }
@media (prefers-color-scheme: dark){ .advisor-search{ color-scheme: light; } }
.advisor-search input[type="search"]:-webkit-autofill{
  box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color:#111 !important;
}
.result-count{ text-align:center; margin-top:8px; font:500 14px/1 "Poppins Medium"; color:#6b7280; }

/* =========================
   Botón global reutilizable
========================= */
.btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; border:0; text-decoration:none;
  font:600 14px/1 "Poppins Medium", system-ui, -apple-system, Segoe UI, Roboto;
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background:var(--packo-primary); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.btn--primary:hover{
  background:#0ea2c5; box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* =========================
   Advisor profile (tarjeta simple)
========================= */
.advisor-profile{
  display: flex;
  justify-content: center;
  padding: 0 10px 20px;
  clear: both;
  margin-top: 0px;
  align-items: center;
  text-align: center;
}
.advisor-profile-card{
  width:100%; max-width:480px;
  background:var(--packo-white); border-radius:var(--packo-radius);
  overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.08);
  padding:15px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
}
.advisor-profile__foto{
  width:75px; height:75px; border-radius:50%; object-fit:cover;
  flex-shrink:0; margin-right:0; display:none !important; /* ocultar en propiedad */
}
.advisor-profile__content{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.advisor-profile__name{
  font-size:1rem; font-weight:600; color:var(--packo-header); margin:0; text-align:center;
}
.advisor-profile__org{
  font-size:.9rem; color:#9CA3AF; margin:2px 0 6px; text-align:center;
}
.advisor-profile__contacts{
  font-size:.85rem; margin-bottom:8px;
  display:flex; justify-content:center; width:100%; margin-top:10px;
}
.advisor-profile__contacts a{ color:var(--packo-header); text-decoration:none; }
.advisor-profile__contacts a:hover{ text-decoration:underline; }
.advisor-profile__actions{
  display:flex; justify-content:center; margin:12px 0;
}
.advisor-profile__actions .btn{
  width:100%; max-width:220px;
  border-radius:9999px; text-align:center;
}
.advisor-profile .btn--whatsapp {
  min-width: 220px;
  height: 40px;
}

/* =========================
   PACKO Search Grid (#results)
========================= */
#results{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  align-content:start;
  max-width:1200px;
  margin:0 auto;
  padding:8px 0;
  justify-content:flex-start;
  justify-items:start;
}
#results .property-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
#results .property-media{
  position:relative;
  overflow:hidden;
  margin:0 !important;
}
#results .property-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
#results .badge{
  position:absolute;
  left:14px;
  bottom:16px;
  background: var(--badge-base);
  color:#fff;
  font:600 13px/1 "Poppins Medium", system-ui;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
#results .badge.badge--sale{ background: var(--badge-sale) !important; }
#results .badge.badge--rent{ background: var(--badge-rent) !important; }
#results .property-info{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:14px 14px 16px;
}
#results .price{
  margin:0 0 4px;
  color:var(--packo-header);
  font-family:"Poppins Medium";
  font-size:22px;
}
#results .price .price__suffix{
  font-size:14px;
  font-family:"Poppins Regular";
  color:#556;
  margin-left:4px;
}
#results .title{
  margin:8px 0 10px;
  font:600 16px/1.25 "Poppins Medium", system-ui;
  color:#222;
}
#results .facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:0;
  margin:0 0 10px;
  list-style:none;
  font:400 15px/1.2 "Poppins Regular";
  color:#444;
}
#results .address{
  margin:0 0 14px;
  font:400 13px/1.4 "Poppins Regular";
  color:#6b7280;
}
#results .property-card .actions{
  margin-top:auto;
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:0;
}
#results .property-card .actions .btn{
  width:80%;
  max-width:320px;
}
@media (max-width:480px){
  #results .property-card .actions .btn{
    width:100%;
    max-width:none;
  }
}
#results[data-single="true"] .property-card{
  max-width:560px;
  width:100%;
}

/* =========================
   Badges / Prop-grid (utilidades)
========================= */
.badge{
  position:absolute; bottom:10px; left:140px; background: var(--badge-base); color:#fff;
  font-size:15px; font-weight:600; border-radius:999px; padding:6px 14px; line-height:1.1;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.badge--sale{ background: var(--badge-sale); }
.badge--rent{ background: var(--badge-rent); }
.prop-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px;
}

/* =========================
   BLINDAJE ANTI-HOVER (override)
========================= */
.property-card, .property-card *, .property-media img{
  transition:none !important; transform:none !important; animation:none !important; cursor: default !important;
}
.property-card:hover, .property-media:hover img{
  transform:none !important; filter:none !important;
}

/* =========================================================
   BREAKPOINTS — Mobile-first (480 / 768 / 1024 / 1200)
========================================================= */

/* ≤1200 => contenedor fluido */
@media (max-width: 1199px){
  .container{ max-width:none; width:100%; padding-inline:0; }
  header{ border-radius:0; }
}

/* ≤1024 */
@media (max-width: 1024px){
  /* Hero */
  .hero-title{ font-size:40px; line-height:52px; }
  .hero-subtitle{ font-size:20px; }
  /* Grids simples → 1 col */
  .grid-bg-container, .grid-container{ grid-template-columns:1fr; gap:24px; }
  .grid-bg-container > :last-child, .grid-container > :last-child{
    grid-column:auto; justify-self:stretch; max-width:100%;
  }
.asesor-foto {
    width: var(--asesor-foto-desktop);
    height: var(--asesor-foto-desktop);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-top: 15px;
    margin-bottom: -10px;
}
}

/* ≤870 (drawer + padding main + asesor gaps) */
@media (max-width: 870px){
  .desktop-view{
    position: fixed; inset: 0; z-index: 2000; display: none;
    background: rgba(0,0,0,0.35); margin-top: 0 !important; text-align: left;
  }
  .desktop-view.expand{ display:block; }
  .desktop-view > ul{
    position:absolute; top:0; right:0; bottom:0; width:50vw; max-width:320px; background-color:var(--packo-header);
    margin:0; padding: var(--packo-header-h) 20px 24px; overflow:auto;
    transform:translateX(100%); transition: transform .25s ease;
  }
  .desktop-view.expand > ul{ transform: translateX(0); }
  .desktop-view ul li{ display:block !important; margin:0; }
  .desktop-view ul li a{ display:block; padding:14px 8px; color:var(--packo-white); text-decoration:none; }

  .mobile-view{ display:block !important; position:relative; z-index:2100; float:right; margin-top:-60px; }

  .images-grid{ grid-template-columns: repeat(2, 1fr); max-width:800px; }
  header a img{ width:200px; height:auto; max-width:300px; }

  main{ --pad-inline: 60px; padding: 20px var(--pad-inline); }
  .inmueble-asesor{ gap: var(--asesor-gap-mobile); }
  .asesores-titulo, .asesor-nombre{
    font-family: "Poppins SemiBold";
    font-size: 25px;
    color: var(--packo-header);
  }
.asesor-foto {
    width: var(--asesor-foto-desktop);
    height: var(--asesor-foto-desktop);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-top: 15px;
    margin-bottom: 0px;
}
/* =========================
   Hero Section
========================= */
.hero {
    position: relative;
    width: 100%;
    height: 350px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center 72%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
}

/* ≤768 */
@media (max-width: 768px){
  .images-grid{ grid-template-columns: 1fr; gap:12px; max-width: 100%; margin-top: 40px; }
  .images-grid.images-grid--wide{ width:100%; margin:0; }
  .hero-actions{ max-width: calc(100% - 32px); }
  .btn-hero{ max-width:100%; }

  .inmueble-container { grid-template-columns: 1fr !important; gap: 10px 0; }
  .inmueble-container .caracteristicas-text { font-size: 16px; }
}

/* ≤480 */
@media (max-width: 480px){
  .inmueble-asesor{ gap: var(--asesor-gap-mobile); }
  .inmueble-asesor .asesor-foto{
    width: var(--asesor-foto-mobile); height: var(--asesor-foto-mobile); aspect-ratio:1/1; margin: 0 0 8px 0;
  }

  .top-line{ gap:8px; }
  .top-line .link-volver a{ font-size:14px; }
  .top-line .inmueble-share img{ width:26px; height:26px; }

  header a img{ width:60%; height:auto; max-width:300px; }

  main{
    --pad-inline:25px;
    padding: 10px var(--pad-inline);
    min-height: 400px;
  }
  footer{ min-height:40px; padding-bottom:17px; }

  .caracteristicas-text{ font-size:12px; }

  .prop-listing .actions{ grid-template-columns:1fr; }

  .grid-bg-container, .grid-container{ gap:20px; }
  .grid-bg-container > :last-child, .grid-container > :last-child{ max-width:100%; }

  .hero-title{
    font-size: 35px;
    line-height: 45px;
    text-align: center;
}
  .hero-subtitle{ font-size: 18px; margin-bottom: 45px; text-align: center; }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .btn-hero{ width: 100%; margin-left: 5%; margin-right: 4%; }

  /* iOS zoom fix */
  .advisor-search input[type="search"], input, select, textarea{
    font-size:16px; line-height:1.2;
  }
  .asesores-titulo{
    font-family: "Poppins SemiBold";
    font-size: 25px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: -5px;
    text-align: center;
  }
  .text-asesores-explora{ padding-left: 30px; margin-bottom: -15px; }
}

/* ≤400 */
@media (max-width: 400px){
  main{ --pad-inline:18px; padding:12px var(--pad-inline); }
  .advisor-grid{ grid-template-columns:1fr; gap:16px; }
  .advisor-card{ width:100%; min-width:0; margin-inline:0; }
  .advisor-card__content{ min-width:0; }

  .hero {
    position: relative; width: 100%; height: 375px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex; align-items: center; justify-content: flex-start;
  }
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 0px;
    margin-left: -20px;
  }

  .inmueble-asesor .asesor-foto{
    width: var(--asesor-foto-desktop);
    height: var(--asesor-foto-desktop);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-top: 15px;
  }

  .text-home {
    margin-top: 30px;
    font-family: "Poppins Regular";
    font-size: 16px;
    margin-bottom: 40px;
    text-align: justify;
    margin-right: 2%;
    margin-left: 2%;
  }
.asesore-titulo-explora {
    font-family: "Poppins Regular";
    font-size: 18px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: -5px;
    padding-top: 0px;
    margin-top: -10px;
}
}

/* ≤360 */
@media (max-width: 360px){
  .hero{ height: 360px; }
  .hero-overlay{ padding:0 16px; justify-content:center; text-align:center; }
  .hero-title{ font-size:28px; line-height:38px; }
  .hero-subtitle{ font-size:15px; margin-bottom:30px; }
  .hero-button{ padding:10px 16px; font-size:.95rem; border-radius:10px; }
  main{ --pad-inline:16px; padding:10px var(--pad-inline); }

  .text-home {
    margin-top: 30px;
    font-family: "Poppins Regular";
    font-size: 16px;
    margin-bottom: 40px;
    text-align: justify;
    margin-right: 5%;
    margin-left: 5%;
  }
.hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 0px;
    margin-left: -50px;
    padding-left: 0px;
    margin-right: 25px;
  }
.promo-grid {
    grid-template-columns: 1fr;
    margin-right: 5px;
}
}

/* =========================
   Filtros (única versión)
========================= */
.filters{ margin:16px 0 10px; }

.filters__form{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* ✅ antes 7 */
  gap:10px;
  align-items:center;
}

/* ✅ El buscador siempre full */
.filters__form input[type="search"]{
  grid-column: 1 / -1;
}

/* ✅ Acciones siempre full */
.filters__actions{
  grid-column: 1 / -1;
}

.result-count{
  margin-top:10px; margin-inline:2px; font:500 14px/1 "Poppins Medium"; color:#6b7280;
}
@media (max-width:1199px){ .filters__form{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:870px){  .filters__form{ grid-template-columns: repeat(2,1fr); } .asesores-titulo {
    font-family: "Poppins SemiBold";
    font-size: 22px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: -5px;
}
}
@media (max-width:480px){
  .filters__form{ grid-template-columns: 1fr; }
  .text-home {
    margin-top: 30px; font-family: "Poppins Regular"; font-size: 16px;
    margin-bottom: 40px; text-align: justify; margin-right: 5%; margin-left: 5%;
  }
}

/* Layout específico #filters (ALOJA/PACKO portal) */
#filters.filters__form{
  display:grid;
  gap:10px;
  max-width:920px;
  margin:0 auto;
}

/* ✅ Mantener layout “grande” hasta 640px */
@media (min-width: 641px){
  #filters.filters__form{ grid-template-columns: repeat(12, minmax(0,1fr)); }

  /* fila 1 */
  #filters [name="q"]{ grid-column: 1 / -1; width:100%; }

  /* fila 2 (4 columnas iguales) */
  #filters select[name="department"]  { grid-column: 1 / span 3; }
  #filters select[name="destination"] { grid-column: 4 / span 3; }
  #filters select[name="guests"]      { grid-column: 7 / span 3; }
  #filters select[name="beds"]        { grid-column: 10 / span 3; }

  /* fila 3: min/max a la izquierda, checks toman el lugar “antes” de min/max */
  #filters input[name="min"]          { grid-column: 1 / span 3; }
  #filters input[name="max"]          { grid-column: 4 / span 3; }
  #filters [data-filter="pet"]        { grid-column: 7 / span 3; }
  #filters [data-filter="pool"]       { grid-column: 10 / span 3; }

  /* fila 4: acciones centradas */
  #filters .filters__actions{ grid-column: 1 / -1; display:flex; gap:10px; justify-content:center; }
  #filters .filters__actions .btn{ min-width: 180px; }
}

/* ✅ Mobile (<=640): 2 columnas */
@media (max-width: 640px){
  #filters.filters__form{ grid-template-columns: 1fr 1fr; row-gap:10px; }

  #filters [name="q"]{ grid-column: 1 / -1; }

  #filters select[name="department"]  { grid-column: 1 / -1; }
  #filters select[name="destination"] { grid-column: 1 / -1; }
  #filters select[name="guests"]      { grid-column: 1; }
  #filters select[name="beds"]        { grid-column: 2; }

  #filters input[name="min"]          { grid-column: 1; }
  #filters input[name="max"]          { grid-column: 2; }

  #filters [data-filter="pet"]        { grid-column: 1; }
  #filters [data-filter="pool"]       { grid-column: 2; }

  #filters .filters__actions{ grid-column: 1 / -1; display:flex; gap:10px; justify-content:center; }
}


/* =========================
   Interacción táctil
========================= */
@media (hover:none){
  .btn-hero:hover, .btn-hero:focus{ transform:none; }
}

/* =========================
   Mini-portal (layout buscador Aloja/Packo)
   Reemplaza el bloque viejo (type/operation)
========================= */

/* Chips/checkbox estilo “campo” */
.mini-portal .filters__toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  color:#0b2b44;
  font-weight:700;
  min-height:60px;
  width:100%;
}
.mini-portal .filters__toggle input{
  width:28px;
  height:28px;
  border-radius:8px;
  accent-color: var(--packo-primary);
}

/* --- Desktop / >= 640px (4 columnas arriba + 4 abajo) --- */
@media (min-width: 640px){
  .mini-portal #filters.filters__form{
    display:grid;
    gap:18px;
    grid-template-columns: repeat(12, minmax(0,1fr));
    align-items:center;
  }

  .mini-portal #filters [name="q"]{ grid-column: 1 / -1; }

  /* Fila 1: 4 selects */
  .mini-portal #filters select[name="department"]  { grid-column: 1 / span 3; }
  .mini-portal #filters select[name="destination"] { grid-column: 4 / span 3; }
  .mini-portal #filters select[name="guests"]      { grid-column: 7 / span 3; }
  .mini-portal #filters select[name="beds"]        { grid-column: 10 / span 3; }

  /* Fila 2: min/max a la izquierda + checks en el lugar viejo de min/max */
  .mini-portal #filters input[name="min"]{ grid-column: 1 / span 3; }
  .mini-portal #filters input[name="max"]{ grid-column: 4 / span 3; }

  .mini-portal #filters .filters__toggle--pet  { grid-column: 7 / span 3; }
  .mini-portal #filters .filters__toggle--pool { grid-column: 10 / span 3; }

  /* Acciones centradas */
  .mini-portal #filters .filters__actions{
    grid-column: 4 / span 6;
    display:flex;
    justify-content:center;
    gap:10px;
  }
  .mini-portal #filters .filters__actions .btn{ min-width:160px; }
}

/* --- Tablet / 481–639px --- */
@media (min-width: 481px) and (max-width: 639px){
  .mini-portal #filters.filters__form{
    display:grid;
    gap:14px;
    grid-template-columns: repeat(7, minmax(0,1fr));
    align-items:center;
  }

  .mini-portal #filters [name="q"]{ grid-column: 1 / -1; }

  .mini-portal #filters select[name="department"]  { grid-column: 1 / span 4; }
  .mini-portal #filters select[name="destination"] { grid-column: 5 / span 3; }

  .mini-portal #filters select[name="guests"]      { grid-column: 1 / span 4; }
  .mini-portal #filters select[name="beds"]        { grid-column: 5 / span 3; }

  .mini-portal #filters input[name="min"]{ grid-column: 1 / span 4; }
  .mini-portal #filters input[name="max"]{ grid-column: 5 / span 3; }

  .mini-portal #filters .filters__toggle--pet  { grid-column: 1 / span 4; }
  .mini-portal #filters .filters__toggle--pool { grid-column: 5 / span 3; }

  .mini-portal #filters .filters__actions{
    grid-column: 2 / span 5;
    display:flex;
    justify-content:center;
    gap:10px;
  }
}

/* --- Mobile / <= 480px --- */
@media (max-width: 480px){
  .mini-portal #filters.filters__form{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr;
  }

  .mini-portal #filters [name="q"],
  .mini-portal #filters select[name="department"],
  .mini-portal #filters select[name="destination"],
  .mini-portal #filters select[name="guests"],
  .mini-portal #filters select[name="beds"],
  .mini-portal #filters input[name="min"],
  .mini-portal #filters input[name="max"],
  .mini-portal #filters .filters__toggle{
    grid-column: 1 / -1;
    width:100%;
  }

  .mini-portal #filters .filters__actions{
    grid-column: 1 / -1;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .mini-portal #filters .filters__actions .btn{ width:100%; margin:0; }
}

/* =========================
   Explora Sugeridas – control de columnas
========================= */
@media (min-width:1024px){
  #explora-sugeridas .prop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:1023px) and (min-width:769px){
  #explora-sugeridas .prop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:768px){
  #explora-sugeridas .prop-grid {
    grid-template-columns: 1fr;
  }
/* =========================
   Hero Section
========================= */
.hero {
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center 72%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
}

.property-card .actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.property-card .actions .btn {
  width: 80%;
}

/* Hover primario consistente */
.btn--primary:hover {
  background: #14a8cb;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Badge correcto en páginas de asesores */
[data-advisor-id] .property-media .badge{
  position: absolute;
  left: 14px;
  right:auto;
  bottom: 14px;
  top: auto;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
/* =========================
   POSICIÓN BADGES
========================= */
[data-advisor-id] .badge.badge--sale{ background: var(--badge-sale) !important; }
[data-advisor-id] .badge.badge--rent{ background: var(--badge-rent) !important; }
.prop-listing .property-card .property-media .badge {
  position: absolute !important;
  left: 14px !important;
  bottom: 16px !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
  background: var(--badge-base) !important;
  z-index: 5 !important;
}
.prop-listing .property-card .badge.badge--sale { background: var(--badge-sale) !important; }
.prop-listing .property-card .badge.badge--rent { background: var(--badge-rent) !important; }

/* =========================
   Características del inmueble — ícono centrado con texto
========================= */
.caracteristicas-text {
  display: flex; align-items: center; gap: 8px;
  font-family: "Poppins Regular"; font-size: 14px; line-height: 1.4; color: var(--packo-text);
  margin-bottom: 6px;
}
.caracteristicas-text img {
  width: 12px; height: 12px; flex-shrink: 0; align-self: center;
}

/* =========================
   Justificación inteligente
========================= */
.text-home,
.caracteristicas-text,
.inmueble-descripcion,
.inmueble-ubicacion,
.property-info p,
.advisor-card__org,
.advisor-card__contacts,
.result-count {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.6;
  word-spacing: -0.02em;
}
@media (max-width: 480px) {
  .text-home, .caracteristicas-text, .inmueble-descripcion {
    text-align: justify;
    hyphens: auto;
    line-height: 1.55;
  }
}

/* =========================
   WhatsApp CTA
========================= */
.btn--whatsapp{
  background: var(--packo-whatsapp);
  color: #fff;
  border: 1px solid #1EBE5A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 0px 20px 0px 0px;
  border-radius: 30px;
  font: 500 14px/1 "Poppins Medium";
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: background-color .2s ease, box-shadow .15s ease, transform .15s ease;
  margin-top: -15px;
}
.btn--whatsapp:hover{
  background:#1EBE5A;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.btn--whatsapp img,
.btn--whatsapp .icon-whatsapp{
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.advisor-profile__actions .btn,
.advisor-profile .btn--whatsapp{
  width: auto;
  max-width: none;
  border-radius: 10px;
  padding: 10px 14px;
  font: 500 14px/1 "Poppins Medium";
}
@media (max-width: 480px){
  .advisor-profile__actions .btn,
  .advisor-profile .btn--whatsapp{
    width: 100%;
  }
}
.btn--whatsapp,
.btn--whatsapp:visited,
.btn--whatsapp:hover,
.btn--whatsapp:focus,
.btn--whatsapp:active {
  color: #fff !important;
  text-decoration: none !important;
}

/* Ajustes de org/contactos centrados */
.advisor-profile .advisor-card__org,
.advisor-profile .advisor-profile__org {
  text-align: center !important;
  width: 100%;
  display: block;
  margin: 2px 0 10px;
  color: #6b7280;
  font-size: 15px;
}
.advisor-card.is-centered .advisor-card__actions{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.advisor-card.is-centered .advisor-card__actions .btn.btn--ghost{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--packo-header);
  font: 600 14px/1 "Poppins Medium";
}
@media (max-width: 480px){
  .advisor-card.is-centered .advisor-card__actions .btn{
    width: auto;
  }
}
.advisor-card.is-centered .advisor-card__org{
  text-align: center !important;
  text-justify: auto;
  hyphens: manual;
  width: 100%;
  display: block;
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 15px;
}

/* Grid de imágenes ampliado */
.images-grid {
  max-width: none;
  width: calc(100% + (var(--pad-inline) * 1.2));
  margin-left: calc(var(--pad-inline) * -0.6);
  margin-right: calc(var(--pad-inline) * -0.6);
}
.images-grid img {
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 1024px){
  .images-grid {
    width: calc(100% + (var(--pad-inline) * 1.8));
    margin-left: calc(var(--pad-inline) * -0.9);
    margin-right: calc(var(--pad-inline) * -0.9);
  }
/* =========================
   Hero Section
========================= */
.hero {
    position: relative;
    width: 100%;
    height: 400px;
    background-image: url(images/packo-el-salvador.jpg);
    background-position: center 72%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
}
@media (max-width: 768px){
  .images-grid {
    width: calc(100% + (var(--pad-inline) * 1.8));
    margin-left: calc(var(--pad-inline) * -0.9);
    margin-right: calc(var(--pad-inline) * -0.9);
  }
.asesores-titulo {
    font-family: "Poppins SemiBold";
    font-size: 22px;
    color: var(--packo-header);
    flex: 1;
    margin-bottom: -5px;
}
}

/* Ocultar dirección corta debajo de la ubicación */
.inmueble-direccion { display: none; }
/* Ya lo forzamos arriba, pero por claridad: */
.advisor-profile .advisor-profile__foto { display: none !important; }

/* UX Enhancement — cursor mano */
.btn, .btn--primary, .btn--ghost, .btn--whatsapp,
.advisor-profile__overlay, .property-card, .property-card a, .advisor-card a {
  cursor: pointer !important;
}

/* =========================
   Toast Packo (azul institucional centrado)
========================= */
.packo-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--packo-header);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 32px;         /* más alta y más ancha */
  border-radius: 18px;        /* opcional: más redondeada */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
  z-index: 9999;

  text-align: center;                   /* texto centrado */
  min-width: 260px;                     /* ancho mínimo */
  max-width: min(90vw, 420px);          /* no crece más de esto en pantallas grandes */
}

.packo-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   Overlay clicable en tarjetas de asesores
========================= */
.advisor-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
}
.advisor-card.is-centered .asesor-foto,
.advisor-card.is-centered .advisor-card__content {
  position: relative;
  z-index: 6;
}
.advisor-card,
.advisor-card * {
  pointer-events: auto !important;
}
.advisor-card {
  position: relative;
  overflow: hidden;
}

/* =========================
   Packo-Leads (Prospectos)
========================= */
#leadsList{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:22px;
  margin-top:14px;
}
.lead-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  padding:16px 16px 14px;
  position:relative;
  display:flex;
  flex-direction:column;
}
.lead-badge{
  position:absolute;
  top:12px; left:12px;
  padding:6px 10px;
  border-radius:999px;
  font:600 12px/1 "Poppins Medium", system-ui;
  color:#00000;
  background:#1C3D59;
}
.lead-badge.ofrezco{ background:#BFD5C0; }
.lead-badge.busco{   background:#E8BFA0; }

.lead-card h3{
  margin:28px 0 6px;
  font:600 17px/1.2 "Poppins Medium", system-ui;
  color:#1C3D59;
}
.lead-card p{
  margin:0 0 10px;
  font:400 14px/1.45 "Poppins Regular", system-ui;
  color:#374151;
}
.lead-meta{
  display:flex; flex-wrap:wrap; gap:8px 14px;
  font:400 13px/1.2 "Poppins Regular", system-ui;
  color:#6b7280;
  margin:0 0 12px;
}
.lead-actions{ margin-top:auto; }
.lead-actions .btn{
  display:inline-flex; justify-content:center; align-items:center;
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  background:#4b5563; color:#fff; border:0;
  font:500 14px/1 "Poppins Medium", system-ui;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
}
.lead-actions .btn:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}
.filters-inline{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:16px; border-bottom:1px solid #e5e7eb; background:#fff;
  border-radius:10px; margin-bottom:10px;
}
.filters-inline select,
.filters-inline button{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:14px; min-height:40px;
  background:#fff;
}
#btnClear{ cursor:pointer; color:#1C3D59; }
@media (max-width:480px){
  .filters-inline{ flex-direction:column; align-items:stretch; }
/* =========================
   Grid con imágenes / tarjetas CTA
========================= */
.packo-grid-bg {
    padding-top: 0px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 60px;
    background-color: #fff;
    margin-top: 0px;
}
}

/* =========================
   Responsive gaps / foto tamaños Asesores
========================= */
@media (min-width: 1025px){
  :root{ --advisor-card-size: 120px; }
}
@media (max-width: 1024px){
  :root{ --advisor-card-size: 120px; }
}
@media (max-width: 480px){
  :root{ --advisor-card-size: 120px; }
}
@media (max-width: 400px){
  :root{ --advisor-card-size: 120px; }
}

/* Control de espacio nombre asesor por viewport */
.advisor-card.is-centered .advisor-card__name{
  margin-top: var(--advisor-name-gap-desktop);
}
@media (max-width: 1024px){
  .advisor-card.is-centered .advisor-card__name{
    margin-top: var(--advisor-name-gap-tablet);
  }
}
@media (max-width: 480px){
  .advisor-card.is-centered .advisor-card__name{
    margin-top: var(--advisor-name-gap-mobile);
  }
}
@media (min-width: 1025px){
  .advisor-card.is-centered .advisor-card__name{
    margin-top: var(--advisor-name-gap-xl);
  }
}
@media (min-width: 1440px){
  .advisor-card.is-centered .advisor-card__name{
    margin-top: var(--advisor-name-gap-xxl);
  }
}

/* Perfil individual (bloque del inmueble) */
.inmueble-asesor .asesor-nombre{
  margin-top: var(--profile-name-gap-desktop);
}
@media (max-width: 1024px){
  .inmueble-asesor .asesor-nombre{
    margin-top: var(--profile-name-gap-tablet);
  }
}
@media (max-width: 480px){
  .inmueble-asesor .asesor-nombre{
    margin-top: var(--profile-name-gap-mobile);
  }
}
@media (min-width: 1025px){
  .inmueble-asesor .asesor-nombre{
    margin-top: var(--profile-name-gap-xl);
  }
}
@media (min-width: 1440px){
  .inmueble-asesor .asesor-nombre{
    margin-top: var(--profile-name-gap-xxl);
  }
}

[data-property-id] {
  display: block;
  max-width: var(--content-width, 900px);
  margin: 0 auto;
  padding: var(--content-padding, 1rem);
}

/* =========================
   Aloja / Stay Card
   ========================= */

.stay-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.05);
  position: relative;
}

.stay-card__imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e5e7eb; /* fallback gris claro */
  overflow: hidden;
}

.stay-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stay-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--packo-accent, #C4484A);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.stay-card__body {
  padding: 16px 16px 20px;
  display: grid;
  gap: 8px;
}

.stay-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--packo-header, #1C3D59);
  margin: 0;
  line-height: 1.3;
}

.stay-card__meta {
  font-size: 13px;
  color: var(--packo-muted, #6b7280);
  line-height: 1.4;
  margin: 0;
}

.stay-card__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--packo-text, #000);
  margin: 0;
  line-height: 1.4;
}

.stay-card__cta {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  display: inline-block;
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
}

/* Grid de resultados Aloja */
#results-aloja {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap: 20px;
  margin-top: 24px;
}

#resultCount-aloja {
  font-size: 14px;
  color: var(--packo-muted, #6b7280);
  margin-top: 8px;
}


/* =========================
   Servicios / Service Card
   ========================= */

.service-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  padding: 16px 16px 20px;
  display: grid;
  gap: 12px;
  position: relative;
}

.service-card__head {
  display: grid;
  gap: 4px;
}

.service-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--packo-header, #1C3D59);
  margin: 0;
  line-height: 1.3;
}

.service-card__cat {
  font-size: 13px;
  font-weight: 500;
  color: var(--packo-accent, #C4484A);
  margin: 0;
  line-height: 1.4;
}

.service-card__zone {
  font-size: 12px;
  color: var(--packo-muted, #6b7280);
  margin: 0;
  line-height: 1.4;
}

.service-card__desc {
  font-size: 13px;
  color: var(--packo-text, #000);
  margin: 0;
  line-height: 1.4;
}

.service-card .btn--whatsapp {
  justify-self: start;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.2;
}

/* Grid de resultados Servicios */
#results-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 20px;
  margin-top: 24px;
}

#resultCount-servicios {
  font-size: 14px;
  color: var(--packo-muted, #6b7280);
  margin-top: 8px;
}

/* Pequeño ajuste responsive si quieres más aire en escritorio grande */
@media(min-width:1024px){
  #results-aloja,
  #results-servicios {
    gap: 24px;
  }
}

/* =========================
   Grid Aloja (listado alojamientos)
   ========================= */

.aloja-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}

@media(min-width:1024px){
  .aloja-grid {
    gap: 24px;
  }
}

/* Opcional: paginación */
.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 24px;
  font-size: 14px;
  color: var(--packo-muted, #6b7280);
}
.pager__info {
  font-size: 13px;
  color: var(--packo-muted, #6b7280);
}
.stay-card__badge {
  display: none !important;
}

/* >>> Explora sugeridas: botón siempre abajo y tarjetas igualadas <<< */
#explora-sugeridas #exploraSugeridasGrid.prop-grid{
  align-items: stretch;                /* las columnas estiran los hijos */
}

#explora-sugeridas .property-card{
  display: flex;
  flex-direction: column;              /* imagen arriba, cuerpo debajo */
  height: 100%;
}

#explora-sugeridas .property-info{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                      /* el cuerpo ocupa el alto libre */
  padding: 14px 14px 16px;             /* (mantén tu padding actual)   */
}

#explora-sugeridas .actions{
  margin-top: auto;                    /* empuja el botón al fondo del cuerpo */
  display: flex;
}

#explora-sugeridas .actions .btn{
  width: 100%;
}

/* Afecta solo al superíndice dentro de la línea de características */
.facts sup {
  font-size: 0.65em;      /* más pequeño */
  line-height: 0;         /* no aumenta la altura de la línea */
  vertical-align: baseline; /* lo anclamos a la línea base */
  position: relative;
  top: -0.3em;            /* lo subimos un poquito para que parezca superíndice */
}

/* Hero + mini-portal solapado */
.hero{
  position: relative;
  z-index: 1;
}

/* Hace que el recuadro se meta un poco dentro de la foto */
.mini-portal{
    position: relative;
    margin-top: -269px;      /* ajusta -40 / -80 según cuánto quieras que se meta */
    z-index: 2;             /* por encima de la imagen */
}

/* En móviles, mejor sin solape para que no se sienta apretado */
@media (max-width: 768px){
  .mini-portal{
    margin-top: 0;
  }
}

/* =========================
   Ajuste columnas — Buscador Aloja
   ========================= */

/* 12 columnas para control fino */
.mini-portal .filters__form{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

/* 1) Búsqueda libre ocupa toda la fila */
.mini-portal .filters__form input[name="q"]{
  grid-column: 1 / -1;
}

/* 2) Los 4 selects en una fila (3 cols cada uno = 12) */
.mini-portal .filters__form select[name="department"]{ grid-column: span 3; }
.mini-portal .filters__form select[name="destination"]{ grid-column: span 3; }
.mini-portal .filters__form select[name="guests"]{ grid-column: span 3; }
.mini-portal .filters__form select[name="beds"]{ grid-column: span 3; }

/* 3) Fila de precios + checks (3+3+3+3 = 12) */
.mini-portal .filters__form input[name="min"]{ grid-column: span 3; }
.mini-portal .filters__form input[name="max"]{ grid-column: span 3; }
.mini-portal .filters__form .filters__toggle{ grid-column: span 3; }

/* Toggle estilo “input blanco” */
.mini-portal .filters__toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  color:#0b1f33;
  min-height:56px; /* parecido a tus selects */
  font: 600 18px/1.1 "Poppins SemiBold", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.mini-portal .filters__toggle input{
  width:26px;
  height:26px;
  border-radius:8px;
  accent-color: #17b5db; /* azul Packo */
}

/* Tablet: 2 columnas por fila */
@media (max-width: 980px){
  .mini-portal .filters__form input[name="min"],
  .mini-portal .filters__form input[name="max"],
  .mini-portal .filters__form .filters__toggle{
    grid-column: span 6;
  }
}

/* Móvil: todo a una columna (ya lo tenés, pero por si acaso) */
@media (max-width: 560px){
  .mini-portal .filters__form .filters__toggle{
    grid-column: auto;
  }
}


/* 4) Acciones en una fila completa y alineadas a la derecha */
.mini-portal .filters__actions{
  grid-column: 1 / -1;
  display:flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

/* =========================
   Responsive
   ========================= */

/* Tablet: 2 columnas por select, precios en 2, acciones full */
@media (max-width: 980px){
  .mini-portal .filters__form select[name="department"],
  .mini-portal .filters__form select[name="destination"],
  .mini-portal .filters__form select[name="guests"],
  .mini-portal .filters__form select[name="beds"]{
    grid-column: span 6;
  }
}

/* Móvil: todo a una columna */
@media (max-width: 560px){
  .mini-portal .filters__form{
    grid-template-columns: 1fr;
  }
  .mini-portal .filters__form input[name="q"],
  .mini-portal .filters__form select,
  .mini-portal .filters__form input[name="min"],
  .mini-portal .filters__form input[name="max"],
  .mini-portal .filters__actions{
    grid-column: auto;
  }
  .mini-portal .filters__actions{
    justify-content: stretch;
  }
  .mini-portal .filters__actions .btn{
    width: 100%;
  }
}

.btn--airbnb{
  background:#FF5A5F; /* Airbnb red */
  color:#fff;
}

.btn--airbnb:hover{
  background:#e0484d;
}

/* Aloja – botones de contacto (WhatsApp + Airbnb) */
.advisor-profile__contacts{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advisor-profile__contacts .btn{
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================
   Aloja — Airbnb igual que WhatsApp (dimensión + responsive)
========================= */

/* 1) Misma “plantilla” de tamaño en perfil */
.advisor-profile .btn--airbnb{
  min-width: 220px;
  height: 40px;
  width: auto;            /* desktop */
  border-radius: 10px;
  padding: 10px 14px;
  font: 500 14px/1 "Poppins Medium";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
}

/* 2) Mobile: igual que WhatsApp (100% ancho) */
@media (max-width: 480px){
  .advisor-profile .btn--airbnb{
    width: 100%;
    min-width: 0;         /* evita overflow */
  }
}

/* 3) Colores Airbnb + hover consistente */
.btn--airbnb{
  background:#FF5A5F;
  color:#fff !important;
  border: 1px solid #FF5A5F;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: background-color .2s ease, box-shadow .15s ease, transform .15s ease;
}

.btn--airbnb:hover{
  background:#e0484d;
  border-color:#e0484d;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* 4) Icono Airbnb (si usas <img class="icon-airbnb">) */
.btn--airbnb .icon-airbnb{
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* Botones de reserva con íconos SVG inline */
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn__icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Color específico de Booking (movido del style inline) */
.btn--booking {
  background: #273B7D;
  color: #ffffff;
}

.media-embed{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3; /* “look” similar a fotos */
  border-radius: 12px;
  overflow:hidden;
}

.responsive-embed{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.btn--full{width:100%;justify-content:center;text-align:center;display:flex;}

/* =========================================================
   FIX: Mini-portal — Min/Max a la izquierda + Toggles a la derecha
   (Pet Friendly / Piscina como inputs blancos)
========================================================= */

/* Desktop / tablet grande: 12 columnas */
@media (min-width: 640px){

  /* En el mini-portal: fila de min/max/toggles en una sola fila */
  .mini-portal .filters__form input[name="min"]{ grid-column: 1 / span 3; }
  .mini-portal .filters__form input[name="max"]{ grid-column: 4 / span 3; }

  .mini-portal .filters__toggles{
    grid-column: 7 / span 6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    margin: 0;
  }
}

/* Tablet mediana: 2 columnas => que quede bonito */
@media (max-width: 980px) and (min-width: 561px){
  .mini-portal .filters__form input[name="min"]{ grid-column: 1 / span 6; }
  .mini-portal .filters__form input[name="max"]{ grid-column: 7 / span 6; }

  .mini-portal .filters__toggles{
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

/* Móvil: todo a una columna */
@media (max-width: 560px){
  .mini-portal .filters__toggles{
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

/* ===== Estilo “input blanco” para los toggles ===== */
.mini-portal .filters__toggles .toggle{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 44px;                 /* igual a inputs */
  padding: 10px 12px;               /* igual a inputs */
  border-radius: 10px;              /* igual a inputs */
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0b1f33;

  cursor: pointer;
  user-select: none;
  box-shadow: none;
}

/* ocultamos el checkbox nativo */
.mini-portal .filters__toggles .toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* cajita */
.mini-portal .filters__toggles .toggle__box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: #fff;
  flex: 0 0 auto;
}

/* checked */
.mini-portal .filters__toggles .toggle input:checked ~ .toggle__box{
  background: var(--packo-primary);
  border-color: var(--packo-primary);
}

/* texto */
.mini-portal .filters__toggles .toggle__text{
    font-family: "Poppins Regular";
    font-weight: normal;
    line-height: 1.1;
    font-size: 14px;
}

/* ✅ Mantener layout 4 columnas hasta 640px */
@media (max-width: 1024px){
  .filters__form{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* ✅ Ya en 640px (y abajo) sí reacomodamos */
@media (max-width: 640px){
  .filters__form{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  /* buscador y acciones full */
  .filters__form input[type="search"],
  .filters__actions{
    grid-column: 1 / -1;
  }
}
.filters__form .filter-check{
  grid-column: auto;     /* no ocupa toda la fila */
  white-space: nowrap;   /* evita salto de línea del texto */
}
.filters__check{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  min-height:44px;
  background:#fff;
  font-family:"Poppins Regular";
  font-size:16px;
  line-height:1.2;
}
.filters__check input{ width:26px; height:26px; }
.filters__check span{ color:#0b2540; font-family:"Poppins SemiBold"; }

/* ======================================
   PACKO – Filters: Pet / Pool as inputs
   Pegar al FINAL de styles.css
   ====================================== */

/* Quita bold y unifica tipografía/peso en todo el formulario */
.filters__form input,
.filters__form select,
.filters__form textarea,
.filters__form label,
.filters__form span{
  font-weight: 400 !important;
}

/* Asegura que select no salga “bold” por estilos del tema */
.filters__form select{
  font-weight: 400 !important;
}

/* ✅ Los checkboxes se ven como “campos” */
.filters__check{
  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  min-height:44px;
  background:#fff;

  cursor:pointer;
  user-select:none;
}

/* Ajuste del checkbox */
.filters__check input[type="checkbox"]{
  width:22px;
  height:22px;
  margin:0;
  flex:0 0 auto;
  accent-color: #17b5db; /* si quieres que combine con Packo */
}

/* Texto del label */
.filters__check span{
  font-family: "Poppins Regular";
  font-size:16px;
  line-height:1.2;
  color:#0f172a;
}

/* Estado checked (opcional: muy sutil) */
.filters__check:has(input:checked){
  border-color: rgba(23,181,219,.45);
  box-shadow: 0 0 0 3px rgba(23,181,219,.12);
}

/* --------------------------------------
   GRID RESPONSIVE (mantener layout hasta 640)
   -------------------------------------- */

/* Desktop / grande: 4 columnas (como ya lo tienes) */
.filters__form{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:center;
}

/* Buscador full */
.filters__form input[type="search"]{ grid-column: 1 / -1; }

/* Acciones full */
.filters__actions{ grid-column: 1 / -1; }

/* ✅ Importante: Pet/Piscina se comportan como items del grid */
.filters__check{
  width:100%;
}

/* 640–481: 2 columnas uniformes */
@media (max-width: 640px){
  .filters__form{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters__form input[type="search"],
  .filters__actions{
    grid-column: 1 / -1;
  }
}

/* ≤480: 1 columna uniforme */
@media (max-width: 480px){
  .filters__form{
    grid-template-columns: 1fr;
  }

  .filters__form input[type="search"],
  .filters__actions{
    grid-column: 1 / -1;
  }
}
/* ======================================
   ALOJA – Checkboxes como “campos”
   (Pet Friendly / Piscina)
   Pegar AL FINAL (para que haga override)
   ====================================== */

.mini-portal #filters .filters__check{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  min-height:44px;
  width:100%;
  cursor:pointer;
  user-select:none;
}

.mini-portal #filters .filters__check input[type="checkbox"]{
  width:22px;
  height:22px;
  margin:0;
  flex:0 0 auto;
  accent-color: var(--packo-primary, #17b5db);
}

.mini-portal #filters .filters__check span{
  font-family:"Poppins Regular";
  font-weight:400;
  font-size:16px;
  line-height:1.2;
  color:#0f172a;
  white-space:nowrap; /* evita que “Pet Friendly” se parta */
}

/* Desktop / >= 641px: van a la derecha de min/max (como ya lo querías) */
@media (min-width: 641px){
  .mini-portal #filters [data-filter="pet"]{  grid-column: 7 / span 3; }
  .mini-portal #filters [data-filter="pool"]{ grid-column: 10 / span 3; }
}

/* <= 640px: 2 columnas para que queden parejos */
@media (max-width: 640px){
  .mini-portal #filters [data-filter="pet"]{  grid-column: 1; }
  .mini-portal #filters [data-filter="pool"]{ grid-column: 2; }

  .mini-portal #filters .filters__check span{
    font-size:14px; /* ayuda a que no se rompa en 640 */
  }
}

/* <= 480px: 1 columna (uno debajo del otro) */
@media (max-width: 480px){
  .mini-portal #filters [data-filter="pet"],
  .mini-portal #filters [data-filter="pool"]{
    grid-column: 1 / -1;
  }

  .mini-portal #filters .filters__check span{
    font-size:16px;
  }
}

/* =========================================================
   MINI-PORTAL (PACKO / ALOJA)
   Layout único, limpio y sin redundancias
========================================================= */

/* Contenedor principal */
.mini-portal #filters.filters__form{
  display:grid;
  gap:12px;
  max-width:920px;
  margin:0 auto;
  grid-template-columns: repeat(12, minmax(0,1fr));
  align-items:center;
}

/* Inputs y selects base */
.mini-portal #filters input[type="search"],
.mini-portal #filters input[type="number"],
.mini-portal #filters select{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-family:"Poppins Regular";
  font-size:16px;
  line-height:1.2;
  min-height:44px;
  font-weight:400;
  background-color:#fff !important;
}

/* =========================================================
   DISTRIBUCIÓN DESKTOP / TABLET (>640px)
========================================================= */

/* Fila 1: búsqueda libre */
.mini-portal #filters [name="q"]{
  grid-column: 1 / -1;
  width:100%;
}

/* Fila 2: selects */
.mini-portal #filters select[name="destination"] { grid-column: 1 / span 3; }
.mini-portal #filters select[name="department"]  { grid-column: 4 / span 3; }
.mini-portal #filters select[name="guests"]      { grid-column: 7 / span 3; }
.mini-portal #filters select[name="beds"]        { grid-column: 10 / span 3; }

/* Fila 3: precio + toggles */
.mini-portal #filters input[name="min"]   { grid-column: 1 / span 3; }
.mini-portal #filters input[name="max"]   { grid-column: 4 / span 3; }
.mini-portal #filters [data-filter="pet"] { grid-column: 7 / span 3; }
.mini-portal #filters [data-filter="pool"]{ grid-column: 10 / span 3; }

/* Acciones */
.mini-portal #filters .filters__actions{
  grid-column: 1 / -1;
  display:flex;
  gap:12px;
  justify-content:center;
}
.mini-portal #filters .filters__actions .btn{
  min-width:160px;
}

/* =========================================================
   CHECKBOXES COMO CAMPOS (Pet / Piscina)
========================================================= */

.mini-portal #filters .filters__check{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  min-height:44px;
  width:100%;
  cursor:pointer;
  user-select:none;
}

.mini-portal #filters .filters__check input[type="checkbox"]{
  width:22px;
  height:22px;
  margin:0;
  flex:0 0 auto;
  accent-color: var(--packo-primary, #17b5db);
}

.mini-portal #filters .filters__check span{
  font-family:"Poppins Regular";
  font-weight:400;
  font-size:16px;
  line-height:1.15;
  color:#0f172a;
  white-space:nowrap; /* desktop/tablet */
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* <= 640px : 2 columnas uniformes */
@media (max-width: 640px){
  .mini-portal #filters.filters__form{
    grid-template-columns: 1fr 1fr;
  }

  .mini-portal #filters [name="q"],
  .mini-portal #filters .filters__actions{
    grid-column: 1 / -1;
  }

  /* Destino y Departamento full en tablet */
  .mini-portal #filters select[name="destination"],
  .mini-portal #filters select[name="department"]{
    grid-column: 1 / -1;
  }

  /* Pares uniformes */
  .mini-portal #filters select[name="guests"] { grid-column: 1; }
  .mini-portal #filters select[name="beds"]   { grid-column: 2; }

  .mini-portal #filters input[name="min"] { grid-column: 1; }
  .mini-portal #filters input[name="max"] { grid-column: 2; }

  .mini-portal #filters [data-filter="pet"]  { grid-column: 1; }
  .mini-portal #filters [data-filter="pool"] { grid-column: 2; }

  .mini-portal #filters .filters__check span{
    font-size:14px;
  }
}

/* <= 480px : 1 columna uniforme */
@media (max-width: 480px){
  .mini-portal #filters.filters__form{
    grid-template-columns: 1fr;
  }

  .mini-portal #filters select[name="guests"],
  .mini-portal #filters select[name="beds"],
  .mini-portal #filters input[name="min"],
  .mini-portal #filters input[name="max"],
  .mini-portal #filters [data-filter="pet"],
  .mini-portal #filters [data-filter="pool"]{
    grid-column: 1 / -1;
  }

  /* permitir dos líneas en textos largos */
  .mini-portal #filters .filters__check span{
    white-space:normal;
  }

  .mini-portal #filters .filters__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .mini-portal #filters .filters__actions .btn{
    width:100%;
    min-width:0;
  }
}
/* ===== BADGE PET FRIENDLY ===== */
.badge--pet,
.badge.pet,
.badge[data-badge="pet"]{
  background: #FACC15;          /* amarillo */
  color: #1F2937;               /* texto oscuro */
  border: 1px solid #EAB308;    /* borde amarillo más oscuro */
  font-weight: 600;
}

/* Icono opcional (si usas ::before) */
.badge--pet::before{
  content: "🐾";
  margin-right: 4px;
}
/* ===== BADGE PISCINA ===== */
.badge--pool,
.badge.pool,
.badge[data-badge="pool"]{
  background: #38BDF8;          /* azul claro */
  color: #0C4A6E;
  border: 1px solid #0EA5E9;
  font-weight: 600;
}

.badge--pool::before{
  content: "🏊";
  margin-right: 4px;
}
/* =========================
   PACKO — BADGES (dest/pet/pool) BLINDADO
   Pegar al FINAL del styles.css
========================= */

/* Contenedor de badges: evita que se monten */
.property-card .property-media{
  position: relative; /* por si no lo tenía */
}

.property-card .property-media .badge-stack{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  z-index: 3;
  pointer-events: none; /* opcional: no estorba clicks */
}

/* Base badge (estilo consistente) */
.property-card .property-media .badge-stack .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  border: 2px solid rgba(255,255,255,.15);
}

/* Destino (deja tu color default o el que ya usas) */
.property-card .property-media .badge-stack .badge:not(.badge--pet):not(.badge--pool){
  /* si ya lo tienes definido en otro lado, puedes borrar esto */
  background: #2fb46f;
  color: #fff;
}

/* ✅ Pet Friendly (amarillo que hace juego) */
.property-card .property-media .badge-stack .badge--pet{
  background: #F2B705 !important;
  color: #1C3D59 !important;
  border-color: rgba(28,61,89,.25) !important;
}

/* ✅ Piscina (azul) */
.property-card .property-media .badge-stack .badge--pool{
  background: #1C7ED6 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}
/* =========================
   PACKO — BADGES FIX FINAL
========================= */

.property-card .property-media{
  position: relative;
}

/* Contenedor: más a la orilla + ancho suficiente */
.property-card .property-media .badge-stack{
  position: absolute;
  left: 10px;        /* ⬅️ más a la orilla */
  bottom: 10px;      /* ⬅️ más a la orilla */
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  max-width: calc(100% - 20px); /* ⬅️ evita quiebres raros */
  z-index: 5;
  pointer-events: none;
}

/* Base badge */
.property-card .property-media .badge-stack .badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;      /* ⬅️ CLAVE: no se parten */
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Pet Friendly — amarillo Packo */
.property-card .property-media .badge-stack .badge--pet{
  background: #F2B705;
  color: #1C3D59;
}

/* Piscina — azul */
.property-card .property-media .badge-stack .badge--pool{
  background: #1C7ED6;
  color: #fff;
}
/* =========================================================
   PACKO — BADGES STACK (pet/piscina/destino) — FIX
   Evita que se monten y los pega más a la orilla
   Pegar al FINAL del styles.css
========================================================= */

/* Asegura contexto */
.mini-portal .property-media{ position:relative; }

/* Contenedor de badges */
.mini-portal .property-media .badge-stack{
  position:absolute;
  left:12px;            /* más a la orilla */
  bottom:12px;          /* más a la orilla */
  display:flex;
  gap:8px;
  flex-wrap:wrap;       /* si algún día son 3, bajan ordenadas */
  align-items:center;
  z-index:3;
  pointer-events:none;  /* no bloquea el click del overlay */
}

/* Cada badge deja de ser absoluta (para que NO se monte) */
.mini-portal .property-media .badge-stack .badge{
  position:static !important;
  left:auto !important;
  bottom:auto !important;

  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  background: var(--badge-base); /* destino por defecto */
  color:#fff;
  border:2px solid rgba(255,255,255,.25);
}

/* Colores específicos */
.mini-portal .property-media .badge-stack .badge--pool{
  background:#1E88E5 !important; /* azul piscina */
  color:#fff !important;
  border-color: rgba(255,255,255,.25) !important;
}

.mini-portal .property-media .badge-stack .badge--pet{
  background:#F4B400 !important; /* amarillo pet friendly */
  color:#0b1220 !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* ✅ Para "Propiedades sugeridas" si usan las mismas cards fuera del mini-portal */
#exploraSugeridasGrid .property-media{ position:relative; }
#exploraSugeridasGrid .property-media .badge-stack{
  position:absolute; left:12px; bottom:12px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  z-index:3; pointer-events:none;
}
#exploraSugeridasGrid .property-media .badge-stack .badge{
  position:static !important;
  border-radius:999px; padding:10px 14px; font-weight:700; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#exploraSugeridasGrid .badge--pool{ background:#1E88E5 !important; color:#fff !important; }
#exploraSugeridasGrid .badge--pet{ background:#F4B400 !important; color:#0b1220 !important; }

/* =========================
   Packo Badges (dest/pet/pool) — ajustes
   ========================= */

/* Contenedor de badges */
.badge-stack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;              /* antes 10px aprox */
  position:absolute;
  left:18px;            /* un poco más a la orilla */
  bottom:18px;          /* ajustable */
  z-index:3;
}

/* Badge base (10% más pequeño) */
.badge{
  font-size: 14px;      /* si tenías 16px, esto es ~-12% */
  padding: 10px 16px;   /* reduce un poco */
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.18);
  white-space: nowrap;
}
/* Colores */
.badge--dest{
  background:#49B56A;   /* verde destino */
  color:#ffffff;
}

.badge--pet{
  background:#F2C94C;   /* amarillo pet */
  color:#0b1220;
}

.badge--pool{
  background:#2F80ED;   /* azul piscina */
  color:#ffffff;
}
/* =========================================================
   PACKO Mini Portal (Alojamientos) — Badges Stack
   - Orden manejado en JS: destino → pet → piscina
   - Tamaño ~10% menor
   - Sin íconos (por si existían pseudo-elementos)
   ========================================================= */

/* Contenedor de badges dentro de la imagen */
.property-card .property-media .badge-stack{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
  z-index:3;
}

/* Badge dentro del stack: anula el absolute viejo */
.property-card .property-media .badge-stack .badge{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  padding:8px 16px;         /* ~10% menor */
  font-size:13.5px;         /* ~10% menor */
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,0.20);
  white-space:nowrap;
}

/* Colores */
.property-card .property-media .badge-stack .badge--dest{ background:#49b36a; color:#fff; }
.property-card .property-media .badge-stack .badge--pet { background:#f2c33c; color:#0b2234; }
.property-card .property-media .badge-stack .badge--pool{ background:#167ad8; color:#fff; }

/* Quita cualquier ícono viejo por pseudo-elementos */
.property-card .property-media .badge-stack .badge--pet::before,
.property-card .property-media .badge-stack .badge--pool::before{
  content:none !important;
  display:none !important;
}
/* =========================================================
   Packo — Badge stack (destino + pet + piscina)
   - Evita solapamiento
   - Destino siempre verde (también en búsquedas)
   - Tamaño ~10% menor
   ========================================================= */

/* Contenedor de badges dentro de la imagen */
.property-media{ position:relative; }

/* El bloque apilador manda la posición */
.badge-stack{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  flex-wrap:nowrap; /* fuerza 1 fila */
  gap:10px;
  align-items:center;
  z-index:5;
}

/* Override del "badge" viejo que era absoluto */
.property-media .badge,
.explora-sugeridas .badge{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
}

/* Estilo base del badge (píldora) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px; /* ~10% menor */
  border-radius:999px;
  font-size:13px;  /* ~10% menor */
  font-weight:700;
  line-height:1;
  box-shadow:0 10px 22px rgba(0,0,0,.20);
  border:2px solid rgba(255,255,255,.20);
  white-space:nowrap;
}

/* Colores */
.badge--dest{ background:#3ba173; color:#fff; }
.badge--pet { background:#f3b21b; color:#111827; border-color:rgba(0,0,0,.08); }
.badge--pool{ background:#2f86d6; color:#fff; }

/* =============================================
   PackoSV — Badges Patch (destino / pet / piscina)
   v20260116
   ✅ Pegar AL FINAL de styles.css
   ============================================= */

/* Contenedor: una sola fila y mismo estilo en sugeridas + resultados */
.property-card .badge-stack{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  max-width:calc(100% - 32px);
  overflow:hidden;
}

/* Badge base (10% más pequeño) */
.property-card .badge{
  position:static !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;          /* antes ~8/16 */
  border-radius:999px;
  font-size:13px;            /* antes ~14 */
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
  border:2px solid rgba(255,255,255,.22);
}

/* Colores (forzados para evitar conflicto con estilos viejos) */
.property-card .badge--dest{
  background:#2fb26a !important; /* verde destino */
  color:#fff !important;
}
.property-card .badge--pet{
  background:#f2b705 !important; /* amarillo pet */
  color:#1c3d59 !important;
}
.property-card .badge--pool{
  background:#1f78ff !important; /* azul piscina */
  color:#fff !important;
}

/* Si en algun bloque viejo existe .badge con background base (azul oscuro), esto lo neutraliza */
#results .property-card .badge,
#exploraSugeridasGrid .property-card .badge,
#exploraSugeridasGrid2 .property-card .badge{
  background:unset;
}
/* =========================
   BADGES: sin sombra + centrados (pantalla grande)
   ========================= */

/* Quitar sombra de TODOS los badges */
.badge{
  box-shadow: none !important;
}

/* Pantalla grande: centrar el grupo y hacerlo un poco más compacto
   (para que quepan 3 en una sola fila) */
@media (min-width: 981px){
  .badge-stack{
    left: 50% !important;
	    font-size: 0.88em;  
    right: auto !important;
    transform: translateX(-50%) !important;

    /* centra y evita que se vayan a 2 renglones */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    /* que no se salga del ancho de la foto */
    max-width: calc(100% - 24px);
    gap: 8px !important;
  }

  /* 10% más pequeño aprox */
  .badge{
    font-size: 0.9em !important;
    padding: 8px 14px !important; /* ajusta si querés aún más compacto */
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}
/* ============================================
   FIX PUNTUAL: 3 badges no se corten (1024–1160)
   Pegar AL FINAL del styles.css
============================================ */
@media (min-width:1024px) and (max-width:1160px){

  /* el contenedor de badges */
  .property-media .badge-stack{
    left:50%;
    transform:translateX(-50%);
    bottom:12px;
    gap:6px;                       /* menos separación */
    max-width:calc(100% - 16px);   /* más margen útil */
    padding:0 6px;
    flex-wrap:nowrap;
  }

  /* tamaño de cada badge */
  .property-media .badge-stack .badge{
    font-size:13px;                /* más pequeño */
    padding:7px 10px;              /* menos padding */
    border-radius:999px;
    box-shadow:none !important;
    white-space:nowrap;
    max-width:34%;                 /* evita que uno se coma todo */
    overflow:hidden;
    text-overflow:ellipsis;        /* por si acaso */
  }

  /* si tu badge tiene min-width en otra regla, lo anulamos */
  .property-media .badge-stack .badge{
    min-width:0 !important;
  }
}
/* ============================================
   PATCH: no recortar "Pet friendly" + centrado
   (pegar AL FINAL, después del fix anterior)
============================================ */
@media (min-width:1024px) and (max-width:1160px){

  /* centrado real del grupo */
  .property-media .badge-stack{
    left:50% !important;
    transform:translateX(-50%) !important;
    justify-content:center !important;
    width:100%;
    max-width:calc(100% - 24px) !important; /* un poco más de aire */
  }

  /* NO recortes texto en ese rango */
  .property-media .badge-stack .badge{
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* y los hacemos un poquito más pequeños para asegurar quepan */
  .property-media .badge-stack .badge{
    font-size:12.5px !important;
    padding:6px 10px !important;
  }
}
@media (min-width:1024px) and (max-width:1160px){
  .property-media .badge-stack{ flex-wrap:wrap !important; row-gap:6px; }
}
/* =========================================================
   PACKO — BADGES OVERRIDE FINAL (dest/pet/pool)
   - Sin iconos
   - Sin sombra
   - Destino siempre VERDE
   - Centrado cuando hay 3
   - Tamaño menor SOLO en 1024–1160 para evitar recorte
========================================================= */

.property-card .property-media,
#exploraSugeridasGrid .property-media{
  position: relative;
}

/* Contenedor centrado y con “aire” para que no se corte */
.property-card .property-media .badge-stack,
#exploraSugeridasGrid .property-media .badge-stack{
  position: absolute;
  left: 12px;
  right: 12px;                 /* clave para centrar sin salirse */
  bottom: 12px;
  display: flex;
  justify-content: center;      /* centrado cuando hay 3 */
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;            /* 1 sola fila */
  max-width: calc(100% - 24px);
  z-index: 5;
  pointer-events: none;
}

/* Badge base */
.property-card .property-media .badge-stack .badge,
#exploraSugeridasGrid .property-media .badge-stack .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: none !important;  /* ✅ quita sombra */
  overflow: visible;
}

/* ✅ Quitar iconos sí o sí (aunque existan otros bloques) */
.property-card .property-media .badge-stack .badge::before,
#exploraSugeridasGrid .property-media .badge-stack .badge::before,
.badge--pet::before,
.badge--pool::before{
  content: none !important;
  display: none !important;
}

/* Colores */
.property-card .property-media .badge-stack .badge:not(.badge--pet):not(.badge--pool),
#exploraSugeridasGrid .property-media .badge-stack .badge:not(.badge--pet):not(.badge--pool){
  background: #1C3D59 !important; /* ✅ destino verde */
  color: #fff !important;
}

.property-card .property-media .badge-stack .badge--pet,
#exploraSugeridasGrid .property-media .badge-stack .badge--pet{
  background: #2FA36B !important;
  color: #FFF !important;
}

.property-card .property-media .badge-stack .badge--pool,
#exploraSugeridasGrid .property-media .badge-stack .badge--pool{
  background: #1CB6D9 !important;
  color: #fff !important;
}

/* ✅ FIX específico iPad-ish: 1024–1160 (reduce un poco para que NO se corte) */
@media (min-width:1024px) and (max-width:1160px){
  .property-card .property-media .badge-stack,
  #exploraSugeridasGrid .property-media .badge-stack{
    gap: 6px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
  }

  .property-card .property-media .badge-stack .badge,
  #exploraSugeridasGrid .property-media .badge-stack .badge{
    padding: 6px 10px;
    font-size: 12px;
  }
}
/* =========================================
   FIX DEFINITIVO — BADGES EN UNA SOLA FILA
   ========================================= */

.property-card .badge-stack,
#exploraSugeridasGrid .badge-stack{
  display: flex !important;
  flex-wrap: nowrap !important;     /* 🚫 nunca 2 filas */
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* Permite que el texto se adapte sin romper */
.property-card .badge,
#exploraSugeridasGrid .badge{
  flex-shrink: 1;                   /* ✅ puede encogerse */
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

/* Pet Friendly es el más largo → un poco más compacto */
@media (min-width:1024px) and (max-width:1160px){
  .badge--pet{
    padding-left: 9px;
    padding-right: 9px;
    font-size: 12px;
    letter-spacing: -0.2px;         /* casi imperceptible */
  }
}
.hero {
  position: relative;
  min-height: 30vh;
  max-height: 450px;

  display: flex;
  align-items: center;      /* centra vertical */
  justify-content: center;  /* centra horizontal */

  background-size: cover;
  background-position: center;
}


/* Overlay regulable */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Contenido */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 1.5rem;
  text-align: center;
}

.hero-title {
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0,0,0,0.2);
    margin: 0;
}

.hero-title span {
  color: #17b5db; /* acento Packo */
}
.hero-subtitle span {
  color: #6FD8F1; /* acento Packo */
  font-weight: 800;	
}

.hero-subtitle {
  margin: .6rem 0 0;
  font-size: clamp(2.2rem, 1.8vw, 1.35rem); /* ? ahora sí correcto */
  font-weight: 400;
  opacity: .92;
  text-shadow: 0 2px 14px rgba(0,0,0,0.2);
}
/* =========================================================
   HERO TEXT SYSTEM — Poppins (con control real de max-width)
   ========================================================= */

/* Base (>=1200px) */
:root{
  /* tamaños */
  --hero-h1:  2.5rem;
  --hero-sub: 2.5rem;

  /* anchos máximos (IMPORTANTE: ahora sí se aplican) */
  --hero-max: 100%;       /* H1 */
  --hero-sub-max: 24ch;   /* Subtítulo */

  /* pesos */
  --hero-h1-weight: 500;
  --hero-sub-weight: 500;

  /* ritmo vertical */
  --hero-h1-lh: 1.05;
  --hero-sub-lh: 1.25;
  --hero-gap: .55rem;

  /* ubicación del bloque de texto */
  --hero-text-align: center;
  --hero-text-v-align: center; /* center | flex-start | flex-end */
  --hero-text-offset: 0px;     /* + baja / - sube */
}

/* Contenedor del hero */
.hero{
  display: flex;
  align-items: var(--hero-text-v-align);
  justify-content: center;
  text-align: var(--hero-text-align);
}

/* Wrapper del texto (clave: define el “bloque” y centra) */
.hero-text{
  transform: translateY(var(--hero-text-offset));
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Título */
.hero-title{
  font-size: var(--hero-h1);
  font-weight: var(--hero-h1-weight);
  line-height: var(--hero-h1-lh);
  letter-spacing: 0.02em;
  margin: 0;

  /* ✅ aquí por fin manda --hero-max */
  max-inline-size: var(--hero-max);
  margin-left: auto;
  margin-right: auto;

  /* balance opcional */
  text-wrap: balance;
}

/* Subtítulo */
.hero-subtitle{
  font-size: var(--hero-sub);
  font-weight: var(--hero-sub-weight);
  line-height: var(--hero-sub-lh);
  margin-top: var(--hero-gap);

  /* ✅ aquí manda --hero-sub-max */
  max-inline-size: var(--hero-sub-max);
  margin-left: auto;
  margin-right: auto;

  text-wrap: balance;
}

/* ================= BREAKPOINTS ================= */

/* <=1199px iPad Pro 13 VER */
@media (max-width: 1199px){
  :root{
    --hero-h1: 2.5rem;
    --hero-sub: 2.5rem;

    --hero-max: 50ch;
    --hero-sub-max: 23ch;

    --hero-text-offset: 0px;
  }
}

/* <=1024px (tablet) */
@media (max-width: 1024px){
  :root{
    --hero-h1: 2.5rem;
    --hero-sub: 2.5rem;

    --hero-max: 50ch;
    --hero-sub-max: 22ch;

    --hero-h1-weight: 500;
    --hero-h1-lh: 1.08;
    --hero-sub-lh: 1.3;

    --hero-text-offset: -6px;
  }
}

/* <=980px iPhone HOR */
@media (max-width: 980px){
  :root{
    --hero-h1: 2.4rem;
    --hero-sub: 2.4rem;

    --hero-max: 50ch;
    --hero-sub-max: 40ch;

    --hero-text-offset: -8px;
  }
}

/* <=870px */
@media (max-width: 870px){
  :root{
    --hero-h1: 2.1rem;
    --hero-sub: 2.1rem;

    --hero-max: 50ch;
    --hero-sub-max: 38ch;

    --hero-text-offset: -10px;
  }
}

/* <=768px (mobile grande) */
@media (max-width: 768px){
  :root{
    --hero-h1: 1.9rem;
    --hero-sub: 1.9rem;

    --hero-max: 50ch;
    --hero-sub-max: 30ch;

    --hero-h1-weight: 500;
    --hero-h1-lh: 1.1;
    --hero-sub-lh: 1.35;
    --hero-gap: .4rem;

    --hero-text-offset: -12px;
  }
}

/* <=640px */
@media (max-width: 640px){
  :root{
    --hero-h1: 1.7rem;
    --hero-sub: 1.7rem;

    --hero-max: 50ch;
    --hero-sub-max: 28ch;

    --hero-text-offset: -14px;
    --hero-h1-weight: 600;
  }
}

/* <=560px */
@media (max-width: 560px){
  :root{
    --hero-h1: 1.6rem;
    --hero-sub: 1.6rem;

    --hero-max: 100%;
    --hero-sub-max: 32ch; /* ojo: 400ch te “anula” el límite */

    --hero-h1-weight: 600;
    --hero-gap: .35rem;

    --hero-text-offset: -16px;
  }
}

/* <=480px iPhone Packo */
@media (max-width: 480px){
  :root{
    --hero-h1: 1.5rem;
    --hero-sub: 1.5rem;

    --hero-max: 100%;
    --hero-sub-max: 20ch;

    --hero-h1-weight: 900;
    --hero-h1-lh: 1.15;
    --hero-sub-lh: 1.45;
    --hero-gap: .3rem;

    --hero-text-offset: -18px;
  }
}

/* <=449px iPhone */
@media (max-width: 449px){
  :root{
    --hero-h1: 1.5rem;
    --hero-sub: 1.5rem;

    --hero-max: 100%;
    --hero-sub-max: 22ch;

    --hero-text-offset: -20px;
  }
}

/* <=400px Samsung Tita */
@media (max-width: 400px){
  :root{
    --hero-h1: 1.4rem;
    --hero-sub: 1.4rem;

    --hero-max: 100%;
    --hero-sub-max: 22ch;

    --hero-text-offset: -20px;
  }
}

/* <=360px realme */
@media (max-width: 360px){
  :root{
    --hero-h1: 1.3rem;
    --hero-sub: 1.3rem;

    --hero-max: 100%;
    --hero-sub-max: 22ch;

    --hero-text-offset: -22px;
  }
}

/* =========================
   HERO — Fix de altura en móviles pequeños
========================= */

/* 401px – 447px */
@media (min-width: 401px) and (max-width: 447px){
  .hero{
    min-height: 36vh;   /* un poco más de aire */
  }
}

/* <=400px */
@media (max-width: 400px){
  .hero{
    min-height: 38vh;   /* compensa texto en 1 línea */
  }
}

/* <=360px */
@media (max-width: 360px){
  .hero{
    min-height: 40vh;   /* evita que se vea aplastado */
  }
}
/* Packo estándar: recorte horizontal para fotos verticales */
.media-crop{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px; /* opcional, iguala con tu estilo */
  background: #0b1220; /* fallback */
}

.media-crop img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%; /* default center */
}
.results__header{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:center;
  justify-content:space-between;
}

.results__pager{
  display:flex;
  gap:1rem;
  align-items:center;
}

.results__perpage select{
  margin-left:.35rem;
}

.results__nav{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.pager-btn{
  padding:.35rem .6rem;
  border-radius:.6rem;
}

.pager-info{
  min-width:4rem;
  text-align:center;
}
#resultsPager{
  display: none;
}
/* Estado vacío: mensaje centrado + paginador debajo */
.results__header.is-empty{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
}

@media (max-width: 640px){
  .mini-portal .results__header.is-empty{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 0 !important;
  }
}

.results__header.is-empty .results__pager{
  margin-top: .5rem;
}
.results__header .pager-info{
  opacity:.85;
}
.pager-info{
  font-size: .9rem;
  opacity: .85;
}

/* ==========================================================
   PROMOCIONES — FIX UNICO (estable)
   - iPad/tablet: 2 columnas
   - desktop grande: 3 columnas
   - mobile: 1 columna
   - SIN RECORTE: siempre muestra imagen completa (contacto visible)
   ========================================================== */

/* Grid */
.promo-grid{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    padding-right: 0px;
}

@media (max-width: 1180px){
  .promo-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 480px){
  .promo-grid{ grid-template-columns:1fr; }
}

/* Card */
.promo-grid .promo-card{
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* Imagen: SIEMPRE completa (sin cortar) */
.promo-grid .promo-card img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: #f8fafc;
    padding-right: 2px;
    padding-left: 2px;
}
/* ==========================
   PAGINADOR – Flechas
   ========================== */

.pager-btn{
  font-size: 26px;        /* tamaño de la flecha */
  line-height: 0.8;
  padding: 2px 13px 3px;     /* área clickeable */
  border-radius: 13px;
  cursor: pointer;
}
/* ==========================
   Espaciado paginador superior
   ========================== */

.promo-pager--top{
  margin-bottom: 20px; /* espacio hacia el grid */
}

/* Opcional: un poquito de aire arriba también */
.promo-pager--top{
  margin-top: 6px;
}
/* =========================================
   BUSCADOR: igualar color texto en checkboxes
   (Pet Friendly / Piscina)
   ========================================= */

#filters .filter-checkbox,
#filters .filter-checkbox * ,
#filters .checkbox,
#filters .checkbox * ,
#filters label,
#filters label * {
  color: #1C3D59 !important;
}
/* ==========================
   Packo: Ver más / Ver menos
   ========================== */
.packo-collapse__btn{
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  color: #1C3D59;
  font-weight: 600;
  text-decoration: underline;
}

.packo-collapse__btn:disabled{
  opacity: .6;
  cursor: default;
  text-decoration: none;
}
/* ==========================
   Packo: anfitrión verificado
   ========================== */

.packo-verified{
  color: #1C3D59;
  font-weight: 600;
  letter-spacing: 0.2px; 
}
/* Espacio entre estado del anfitrión y CTAs */
.advisor-profile__name.packo-verified{
  margin-bottom: 10px; /* ajustá: 8px, 12px, 16px */
}

/* Margen lateral para video y mapa en móviles */
@media (max-width: 768px){
  .packo-media-wrap{
    padding-left: 12px;
    padding-right: 12px;
  }
}
.price-note{
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 0px;
}

.price-disclaimer{
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}
/* ==========================
   Landing: Título / Precio / Disclaimer / Ubicación
   ========================== */

/* Título */
.inmueble-titulo{
  margin: 0 0 0 0;
}

/* Precio */
.inmueble-precio-row{
    margin: 0;
    font-family: "Poppins Regular";
}

.inmueble-precio{
  margin: 0;
  display: inline-flex;      /* mantiene todo en una línea si cabe */
  align-items: baseline;
  gap: 8px;                  /* espacio entre “Precio por noche” y $50 */
  flex-wrap: wrap;           /* si no cabe en móvil, baja ordenado */
}

/* Asterisco alineado arriba (no flotando raro) */
.price-note{
  font-size: 0.7em;
  line-height: 1;
  position: relative;
  top: -0.35em;   /* ajustá entre -0.3 y -0.45 si querés */
  margin-left: -5px;
}


/* Disclaimer pegado al precio (sin “huecos” raros) */
.price-disclaimer{
  margin: 6px 0 20px;         /* cerca del precio, con respiración mínima */
  font-size: 13px;
  line-height: 1.25;
  color: #6b7280;
}

/* Ubicación */
.inmueble-ubicacion{
    margin-top: 5px;
    margin-right: -10px;
    margin-left: 0px;
    margin-bottom: -10px;                 /* clave para que no se “separe” demasiado */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icono ubicación alineado bonito */
.inmueble-ubicacion img{
    display: block;
    margin-top: 1px;
    margin-bottom: 6px;
}

/* Responsive: compactar un poco en móvil */
@media (max-width: 480px){
  .inmueble-titulo{
    margin: 4px 0 8px;
  }
  .price-disclaimer{
    margin: 4px 0 6px;
    font-size: 12.5px;
  }
}

/* ==========================
   Responsive móvil: precio / disclaimer / ubicación
   ========================== */
@media (max-width: 480px){

  /* Título un poco más compacto */
  .inmueble-titulo{
    margin: 4px 0 6px;
  }

  /* Precio: que respire pero no se separe */
  .inmueble-precio{
    gap: 6px;
  }

  /* Asterisco un pelín más discreto en móvil */
  .price-note{
    top: -0.3em;   /* menos subida que en desktop */
    font-size: 0.68em;
  }

  /* Disclaimer: claramente nota, pero pegada */
  .price-disclaimer{
    margin: 4px 0 2px;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Ubicación: más cerca del texto principal */
  .inmueble-ubicacion{
    margin-top: 20px;
    font-size: 14px;
  }

  /* Icono ubicación un poco más chico */
  .inmueble-ubicacion img{
    width: 18px;
    height: 18px;
  }
}
/* ==========================
   Características: evitar texto justificado
   ========================== */

.caracteristicas-text,
.caracteristicas-text p,
.caracteristicas-text li{
  text-align: left !important;
}
/* ==========================
   Card: asterisco precio
   ========================== */
.card-price__note{
  font-size: 0.7em;
  position: relative;
  top: 0.0em;
  margin-left: 2px;
  opacity: 0.85;
}
/* ==========================
   Aloja cards: título sin justify (p.title)
   ========================== */
p.title{
  text-align: left !important;
  text-justify: auto !important;
  word-spacing: normal !important; /* por si alguna regla estira espacios */
  letter-spacing: normal !important;
}
/* ==========================
   ALOJA CARDS: Título uniforme (Resultados + Recomendados)
   ========================== */

/* Regla base: cualquier card */
.property-card .title{
  margin: 0px 0 5px;
  font: 600 16px/1.25 "Poppins Medium", system-ui;
  color:#222;
}

/* ==========================
   ALOJA CARDS: "/noche" (suffix) - tamano + empuje izquierda
   ========================== */

/* Cubre price__suffix y _price__suffix */
.property-card .price .price__suffix,
.property-card .price ._price__suffix{
  display:inline-block;
  font-size:14px;
  line-height:1;
  margin-left:0px;
  transform: translateX(-20%);
  opacity:.9;
}

/* En movil: ajuste */
@media (max-width:480px){
  .property-card .price .price__suffix,
  .property-card .price ._price__suffix{
    font-size:15px;
    transform: translateX(-12%);
  }
}
.card-title,
.card-description,
.property-title {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
.caracteristicas-text,
.caracteristicas-text p,
.caracteristicas-text li {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
/* ==========================
   Nombre de propiedad (diferencial)
   ========================== */

/* Landing del alojamiento */
.inmueble-propname{
  margin: 4px 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1C3D59; /* azul Packo */
  line-height: 1.3;
}

/* Tarjetas (resultados + recomendados) */
.property-card .propname{
    margin-bottom: 10px;
    margin-top: -5px;
    font-size: 15px;
    font-weight: 500;
    color: #1C3D59;
    line-height: 1.25;
}

/* Mobile: un poco más compacto */
@media (max-width: 480px){
  .inmueble-propname{
    font-size: 16px;
  }
  .property-card .propname{
    font-size: 14px;
  }
}

/* ==========================
   Landing: subtítulo del inmueble
   ========================== */

.inmueble-subtitulo{
    margin: 0px 0 15px;
    font-size: 20px;
    font-weight: 500;
    color: #1C3D59;       /* azul Packo */
    line-height: 1.3;
    font-family: "Poppins Regular";
}

/* Mobile */
@media (max-width: 480px){
  .inmueble-subtitulo{
    font-size: 18px;
	margin-top: -8px;  
    margin-bottom: 8px;
  }
}
.property-card .price{
  font-size: 22px !important;
}
/* Subir "/noche" y el asterisco (solo el suffix) */
.property-card .price ._price__suffix,
.property-card .price .price__suffix{
  position: relative;
  top: -1px;  /* probá -1px a -4px */
}

/* ==========================
   Título Explora – Base
   ========================== */

.asesore-titulo-explora {
  font-size: 20px;
  font-weight: 600;
  color: #1C3D59;
  margin: 0;
  text-align: center;
  position: relative;
}

/* Línea acento */
.asesore-titulo-explora::after {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
  background-color: #1CB6D9;
  opacity: 0.7;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* ==========================
   Tablet (iPad)
   ========================== */
@media (max-width: 1024px) {
  .asesore-titulo-explora {
    font-size: 22px;
  }

  .asesore-titulo-explora::after {
    width: 80px;
    margin-top: 8px;
  }
}

/* ==========================
   Mobile
   ========================== */
@media (max-width: 480px) {
  .asesore-titulo-explora {
    font-size: 20px;
    line-height: 1.25;
  }

  .asesore-titulo-explora::after {
    width: 60px;
    height: 2px;
    margin-top: 6px;
  }
}
.inmueble-subtitulo{
  margin: 6px 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: #3A4F63;
  position: relative;
  text-align: left; /* o center si el título va centrado */
}

.inmueble-subtitulo::after{
  content: "";
  display: block;
  width: 75px;
  height: 2px;
  background-color: #1CB6D9; /* celeste Packo */
  margin-top: 8px;
  border-radius: 2px;
}

/* Estabiliza el layout al hacer scroll */
html { overflow-y: scroll; }

@supports (scrollbar-gutter: stable) {
  html { scrollbar-gutter: stable; }
}

/* Previene micro overflow horizontal */
body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}
.ES-IA{
  margin-top: 0.3rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--packo-muted);
  letter-spacing: 0.02em;
}
.descripcion-packo,
.caracteristicas-packo {
  white-space: pre-line;
}
.packo-collapse__text {
  white-space: pre-line;
}

/* =========================================================
   PACKO TILES — MÓDULO (Promos / Experiencias)
   ========================================================= */

/* Base */
.promo-link{ display:block; }
.promo-card img{
  width:100%;
  height:auto;
  display:block;
}

/* PROMOCIONES (vertical tipo flyer) — mantiene lo que ya funcionaba */
.packo-promo .promo-card img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

/* EXPERIENCIAS (horizontal 1000x524)
   ✅ Para que NO se corte: CONTAIN
*/
.packo-experiencias .promo-card img{
  aspect-ratio: 1000 / 524;   /* ~1.91:1 */
  object-fit: contain;        /* ✅ no recorta */
  object-position: center;
  background: #ffffff;        /* por si sobra espacio */
}

/* =====================================
   PACKO GRID — Promos / Experiencias (module)
   ===================================== */

/* Contenedores */
.packo-promo{ padding: 10px 0 30px; }
.packo-promo__title{ margin: 10px 0 6px; }
.packo-promo__subtitle{ margin: 0 0 18px; color:#6b7280; }

/* Grid (común) */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
@media (max-width:1023px){ .promo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){  .promo-grid{ grid-template-columns:1fr; } }

.promo-card{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    overflow: hidden;
}

.promo-card img{
  width:100%;
  height:auto;
  display:block;
  background:#f8fafc;
}

/* PROMOCIONES: flyer vertical en desktop */
@media (min-width:1024px){
  .packo-promo .promo-card img{
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position:center;
  }
}

/* EXPERIENCIAS: banner horizontal SIEMPRE (no recorta) */
.packo-experiencias .promo-card img{
  aspect-ratio: 1000 / 524;
  object-fit: contain;     /* ✅ no corta */
  object-position:center;
  background:#f8fafc;
}

.promo-pager{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:18px;
}

/* =========================================================
   PACKO EXPERIENCIAS — Botón horizontal (PNG)
   Anti-recorte + centrado + “aire” para que no muerda bordes
   ========================================================= */

.packo-experiencias .promo-card{
  overflow: visible;              /* evita “mordidas” raras */
  background: #fff;
}

.packo-experiencias .promo-link{
  display: block;
  padding: 6px;                   /* aire interno (clave) */
}

.packo-experiencias .promo-card img{
  width: 100% !important;
  height: auto !important;
  display: block !important;

  object-fit: contain !important; /* NUNCA recorta */
  object-position: center !important;

  aspect-ratio: 1000 / 524;       /* tu ratio */
  background: #fff;
  border-radius: 12px;            /* redondeo del “botón”, no del recorte */
}

/* =========================================================
   PACKO EXPERIENCIAS — estilo sin card frame
   ========================================================= */

.packo-experiencias .promo-card{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.packo-experiencias .promo-link{
  padding: 0;
}

.packo-experiencias .promo-card img{
  border-radius: 16px; /* redondeo directo en la imagen */
}

/* =========================================================
   ESPACIADO ENTRE HEADER ACTIONS Y EXPERIENCIAS
   ========================================================= */



/* Sección experiencias */
.packo-experiencias{
  margin-top: 20px;      /* pequeño respiro adicional */
}

.packo-promo{
  margin-top: 20px;      /* pequeño respiro adicional */
}

/* =====================================
   RESULTADOS — Espacio inferior del header
   ===================================== */

.results__header{
  margin-top: 24px;      /* espacio arriba */
  margin-bottom: 20px;   /* 👈 espacio antes del grid */
}

/* =====================================
   FIX GRID SOLO PARA EXPERIENCIAS
   ===================================== */

/* Evita que el grid empuje el contenido */
.packo-experiencias .promo-grid{
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-top: 0;
    margin-left: -15px;
    margin-bottom: 0;
    justify-content: center;   /* centra columnas */
    justify-items: center;     /* centra cada tile */
    margin-right: 15px;
}

/* Asegura que la tarjeta no se estire raro */
.packo-experiencias .promo-card{
  width: 100%;
  max-width: 520px;  /* mismo ancho que el botón */
}

/* Imagen ocupa todo el ancho disponible */
.packo-experiencias .promo-card img{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   PACKO — Tarjeta Perfil (listado) CONTROLABLE + UNIFORME
   Pegar al final de styles.css
   ========================================================= */

:root{
  /* Tamaño general de tarjeta */
  --packo-card-maxw: 340px;
  --packo-card-minh: 400px; /* 👈 SUBE/BAJA esto para uniformidad (todas iguales) */
  --packo-card-pad: 18px;
  --packo-card-radius: 16px;

  /* Tipografía (ajustable) */
  --packo-card-name-size: 18px;
  --packo-card-company-size: 13px;
  --packo-card-meta-size: 15px;

  /* Ritmo vertical */
  --packo-card-line: 1;   /* line-height base */
  --packo-card-gap: 8px;     /* espacio entre bloques */

  /* Foto */
  --packo-card-photo: 100px;

  /* Botón (similar a alojamientos) */
  --packo-card-btn-font: 14px;
  --packo-card-btn-padY: 10px;
  --packo-card-btn-padX: 14px;
  --packo-card-btn-radius: 10px;
}

/* Contenedor */
.datos-perfil-asesor{ width:100%; }

/* Card (marco + sombra + altura uniforme) */
.datos-perfil-asesor .inmueble-asesor{
  position:relative;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,34,50,.10);
  box-shadow:0 10px 26px rgba(16,24,40,.10);
  overflow:hidden;

  max-width: var(--packo-card-maxw);
  min-height: var(--packo-card-minh);
  margin: 0 auto;
  padding: var(--packo-card-pad);

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Foto */
.datos-perfil-asesor .asesor-foto{
  width: var(--packo-card-photo);
  height: var(--packo-card-photo);
  margin-top: 6px;
  margin-bottom: -6px;
}

/* Contenido */
.datos-perfil-asesor .asesor-contacto{
  width:100%;
  max-width: 320px;

  display:flex;
  flex-direction:column;
  gap: 6px;
  line-height: var(--packo-card-line);
}

/* Textos */
.datos-perfil-asesor .asesor-nombre{
  margin:0;
  font-size: var(--packo-card-name-size);
  line-height: 1.15; /* un pelín más tight para titulares */
}

.datos-perfil-asesor .asesor-empresa{
  margin:0 0 6px;
  font-size: var(--packo-card-company-size);
  opacity:.85;
}

.datos-perfil-asesor .asesor-telefono,
.datos-perfil-asesor .asesor-email{
  margin:0;
  font-size: var(--packo-card-meta-size);
  line-height: var(--packo-card-line);
}

.datos-perfil-asesor .contact-item{
  display:inline-block;
  word-break: break-word;
}

/* ✅ Ancla el área final abajo si existe (redes/botón) */
.datos-perfil-asesor .asesor-redes{
  margin-top:auto;          /* empuja redes/botón hacia abajo */
  padding-top: 0px;
}

/* Redes */
.datos-perfil-asesor .asesor-redes a{
  width:40px;
  height:40px;
  margin-top:0;
}

/* Botón — look & feel tipo alojamientos */
.datos-perfil-asesor .packo-btn{
  appearance:none;
  border:0;
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;
  margin-top:10px;

  padding: var(--packo-card-btn-padY) var(--packo-card-btn-padX);
  border-radius: var(--packo-card-btn-radius);

  font: 500 var(--packo-card-btn-font)/1 "Poppins Medium", sans-serif;
  cursor:pointer;

  background: var(--packo-primary, #17b5db);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.10);

  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.datos-perfil-asesor .packo-btn:hover{
  background:#0ea2c5;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.datos-perfil-asesor .packo-btn:active{ transform: translateY(1px); }

/* =========================================================
   RESPONSIVE (ajustes por tamaño)
   ========================================================= */

/* Tablets / cards un poco más compactas */
@media (max-width: 1024px){
  :root{
    --packo-card-maxw: 320px;
    --packo-card-minh: 405px;
    --packo-card-name-size: 17px;
  }
}

/* Móviles */
@media (max-width: 480px){
  :root{
    --packo-card-maxw: 100%;
    --packo-card-minh: 300px; /* ajusta si necesitas */
    --packo-card-pad: 16px;
    --packo-card-photo: 86px;

    --packo-card-name-size: 17px;
    --packo-card-meta-size: 13px;
    --packo-card-gap: 7px;
  }
}

.datos-perfil-asesor .asesor-foto{
  margin-top: 10px;
  margin-bottom: 12px;
}

.datos-perfil-asesor .asesor-nombre{
  margin: 0 0 6px;
}

.datos-perfil-asesor .asesor-telefono{
  margin: 6px 0 2px;
}

.datos-perfil-asesor .asesor-email{
  margin: 0 0 14px;
}

.datos-perfil-asesor .asesor-redes{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:16px;
}

.datos-perfil-asesor .asesor-contacto{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1; /* ocupa el espacio vertical disponible */
}

/* Empuja botón al fondo */
.datos-perfil-asesor .packo-btn{
  margin-top:auto;
}

/* ===============================
   PACKO LANGUAGE TOGGLE
   =============================== */

.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Poppins', sans-serif;
  font-size:14px;
  letter-spacing:.5px;
}

.lang-link{
  text-decoration:none;
  color:#1C3D59; /* azul Packo */
  opacity:.6;
  transition: all .25s ease;
  font-weight:500;
}

.lang-link:hover{
  opacity:1;
}

.lang-link.active{
  opacity:1;
  font-weight:600;
  border-bottom:2px solid #17b5db; /* acento Packo */
  padding-bottom:2px;
}

.lang-separator{
  color:#1C3D59;
  opacity:.4;
}

/* Mobile */
@media(max-width:768px){
  .lang-toggle{
    font-size:13px;
  }
}

/* =========================================================
   PACKO EXPERTO � Opci�n A (texto 87% + galer�a ancho alojamiento)
   Limpio y consistente con .container
   ========================================================= */

/* 1) #packoExpert NO se encoge (si no, encoge todo incluyendo galer�a) */
#packoExpert{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 15px;   /* mismo gutter del sitio */
  box-sizing: border-box;
}

/* 2) Encoge SOLO el bloque de t�tulo/intro (el container directo dentro de #packoExpert) */
#packoExpert > .container{
  width: 87%;
  margin-inline: auto;
  padding-inline: 0 !important;  /* evita doble gutter aqu� */
  max-width: none;               /* para que el 87% mande */
}

/* 3) Si hay otros .container adentro, evita que metan padding duplicado */
#packoExpert .container{
  max-width: 100%;
  padding-inline: 0 !important;
}

/* 4) CARACTER�STICAS centradas (y tambi�n a 87% para que match con el texto) */
#packoExpert .inmueble-container{
  width: 87%;
  margin: 26px auto 20px;

  display: grid;
  gap: 10px 20px;
  align-items: start;

  /* columnas con ancho �bonito� y centradas */
  grid-template-columns: repeat(2, minmax(240px, 420px));
  justify-content: center;
}

/* m�vil */
@media (max-width: 720px){
  #packoExpert > .container,
  #packoExpert .inmueble-container{
    width: 100%;
  }

  #packoExpert .inmueble-container{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* 5) TARJETA: controla espaciado/line-height sin afectar alojamientos */
#packoExpert .expert-content{
  text-align: center;
}

#packoExpert .advisor-profile__name{
  margin: 10px 0 4px;
  line-height: 1.15;   /* <-- ajusta aqu� */
}

#packoExpert .advisor-profile__org{
  margin: 0 0 10px;
  line-height: 1.25;   /* <-- ajusta aqu� */
}

/* 6) LOGO circular */
#packoExpert .expert-logo-wrap{
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}

#packoExpert .expert-logo{
  width: 95px;
  height: 95px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* 7) GALER�A: mismo ancho que alojamientos (container completo, sin encogerse) */
#packoExpert .images-grid{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;

  /* clave: NO le metas padding extra aqu� */
  padding-inline: 0 !important;
  box-sizing: border-box;
}

/* En m�vil, s� dejamos gutter para que no pegue al borde */
@media (max-width: 520px){
  #packoExpert .images-grid{
    padding-inline: 15px !important;
  }
}

/* =========================================================
   PACKO EXPERT � Responsive fine-tuning (solo #packoExpert)
   - Espaciado redes  galer�a
   - Galer�a m�s ancha en m�vil (como alojamientos)
   - Redes en m�vil: 4 arriba / 2 abajo (si hay 6)
   ========================================================= */

/* 1) Redes: separaci�n y centrado */
#packoExpert .asesor-redes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 18px;          /* vertical | horizontal */
  margin-top: 14px;        /* separa del bot�n */
  margin-bottom: 12px;     /* separa de la galer�a */
}

#packoExpert .asesor-redes a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#packoExpert .asesor-redes img{
  width: 42px;
  height: 42px;
}

/* 2) Galer�a: por defecto normal */
#packoExpert .images-grid{
  margin-top: 10px;
}

/* 3) En pantallas peque�as, la galer�a �se abre� m�s (como alojamientos) */
@media (max-width: 640px){
  #packoExpert .images-grid{
    width: calc(100% + 30px);  /* 15px + 15px */
    margin-left: -15px;
    margin-right: -15px;
  }

  #packoExpert .asesor-redes{
    gap: 18px 16px;       /* m�s aire entre filas */
    margin-bottom: 14px;
  }

  #packoExpert .asesor-redes img{
    width: 40px;
    height: 40px;
  }
}

/* 4) Redes en m�vil: 4 arriba / 2 abajo */
@media (max-width: 480px){
  /* 4 arriba / 2 abajo, sin deformar fondos */
  #packoExpert .asesor-redes{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 30px 0px;      /* vertical | horizontal */
    margin-inline: auto;
    max-width: none;     /* ya no necesitamos forzar ancho */
  }

  /* cada item mantiene su forma (no se estira) */
  #packoExpert .asesor-redes a{
    width: max-content;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #packoExpert .asesor-redes img{
    width: 40px;
    height: 40px;
  }
}

/* 5) En pantallas MUY peque�as, abre a�n m�s la sensaci�n de �grid grande� */
@media (max-width: 420px){
  #packoExpert .images-grid{
    width: calc(100% + 34px);
    margin-left: -17px;
    margin-right: -17px;
  }
}

/* =========================================================
   PACKO EXPERT � Quitar fondo circular de redes
   ========================================================= */

#packoExpert .asesor-redes a{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#packoExpert .asesor-redes a::before,
#packoExpert .asesor-redes a::after{
  display: none !important;
  content: none !important;
}

/* ================================
   PACKO � EXPLORA TITLE
================================ */

#explora-title{
    text-align: left;        /* centra el t�tulo */
    font-size: 1.8rem;           /* tama�o */
    margin-top: -15px;
    margin-bottom: 0px;
    margin-left: 10px;
    color: #1C3D59;
}
/* =================================
   T�tulo de Explora (usa sistema de alojamientos)
   ================================= */

#miniPortal #explora-title{
    margin-right: 16px;
    margin-left: 0px;
    margin-bottom: 8px;
}

/* =================================
   EXPLORA � ajuste responsive t�tulo
   ================================= */

@media (max-width:480px){
  #explora-title{
    font-size: 25px;
  }
}

/* =========================
   PAGINADOR � iPad fix
   ========================= */

@media (min-width:768px) and (max-width:1024px){

  .results__perpage{
    font-size:16px;
    gap:8px;
  }

  #perPage{
    height:25px;
    min-width:50px;
    font-size:14px;
    padding:4px 8px;
  }

}

/* =========================
   PAGINADOR � m�vil centrado
   ========================= */

@media (max-width:700px){

  .results__header{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .results__nav{
    justify-content:center;
  }

}

/* L�nea Packo bajo t�tulo de Explora */
.packo-title-line{
  width: 150px;
  height: 2px;
  background: #17b5db;
  border-radius: 999px;
  margin: 0 16px 0px 0px;
}

@media (max-width:480px){
  .packo-title-line{
    width: 90px;
    height: 3px;
    margin: 3px 16px 14px 0px;
  }
}

.results__count{
  margin-top: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

@media (max-width:480px){
  .results__count{
    margin-top: 0;
    font-size: .95rem;
  }
}

/* GRID SOLO EXPERIENCIAS */
.packo-experiencias .promo-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

@media (max-width:1023px){
  .packo-experiencias .promo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:768px){
  .packo-experiencias .promo-grid{
    grid-template-columns:1fr;
  }
}

/* ===== PACKO EXPERIENCIAS DIRECTORIO � TARJETAS ===== */

.packo-experiencias .promo-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

@media (max-width:1023px){
  .packo-experiencias .promo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:768px){
  .packo-experiencias .promo-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PACKO EXPERIENCIAS � CONTENEDOR
   ========================================================= */
.packo-experiencias{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

/* =========================================================
   PACKO EXPERIENCIAS � GRID
   ========================================================= */
.packo-experiencias .promo-grid{
  display:grid;
  gap:22px;
}

@media (min-width:1024px){
  .packo-experiencias .promo-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:1023px) and (min-width:769px){
  .packo-experiencias .promo-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:768px){
  .packo-experiencias .promo-grid{
    grid-template-columns:1fr;
    max-width:420px;
    margin:0 auto;
  }
}

/* =========================================================
   TARJETA EXPERIENCIAS
   ========================================================= */
.packo-experiencias .advisor-card--experience{
  width:100%;
  min-width:0;
  min-height:100px;
  max-width:280px;
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* CONTENIDO */
.packo-experiencias .advisor-card__content--experience{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:10px 24px 10px;
}

/* FOTO */
.packo-experiencias .asesor-foto--experience{
  width:132px;
  height:132px;
  min-width:132px;
  min-height:132px;
  max-width:132px;
  max-height:132px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:10px auto 6px;
  background:#0b2740;
  color:transparent;
  font-size:0;
  line-height:0;
  overflow:hidden;
}

/* ESTRUCTURA TEXTO */
.packo-experiencias .advisor-card__name--experience{
  margin:0 0 4px;
  min-height:0;
  text-align:center;
}

.packo-experiencias .advisor-card__org--experience{
  margin:0 0 4px;
  min-height:0;
  text-align:center;
}

.packo-experiencias .advisor-card__location--experience{
  margin:0 0 8px;
  min-height:0;
  text-align:center;
}

/* ACCIONES */
.packo-experiencias .advisor-card__actions--experience{
  margin-top:auto;
  padding-top:12px;
  width:100%;
  display:flex;
  justify-content:center;
}

/* BOT�N */
.packo-experiencias .advisor-card__actions--experience .btn{
  display:inline-block;
  width:auto;
  margin-top:10px;
  min-width:200px;
  padding:11px 22px;
  font-size:14px;
  line-height:1.1;
  border-radius:10px;
}

/* ===== BLINDAJE TIPOGR�FICO EXPERIENCIAS ===== */

.packo-experiencias .advisor-card--experience .advisor-card__name.advisor-card__name--experience{
  margin:0 0 4px !important;
  min-height:0 !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  color:#1C3D59 !important;
  text-align:center !important;
}

.packo-experiencias .advisor-card--experience .advisor-card__org.advisor-card__org--experience{
  margin:0 0 4px !important;
  min-height:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  color:#6b7280 !important;
  text-align:center !important;
}

.packo-experiencias .advisor-card--experience .advisor-card__location.advisor-card__location--experience{
  margin:0 0 8px !important;
  min-height:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  color:#111827 !important;
  text-align:center !important;
}

/* TABLET */
@media (max-width:1023px){
  .packo-experiencias .advisor-card--experience .advisor-card__name.advisor-card__name--experience{
    font-size:17px !important;
    line-height:1.15 !important;
  }

  .packo-experiencias .advisor-card--experience .advisor-card__org.advisor-card__org--experience,
  .packo-experiencias .advisor-card--experience .advisor-card__location.advisor-card__location--experience{
    font-size:13px !important;
    line-height:1.2 !important;
  }
}

/* M�VIL */
@media (max-width:768px){
  .packo-experiencias .advisor-card--experience .advisor-card__name.advisor-card__name--experience{
    font-size:20px !important;
    line-height:1.1 !important;
  }

  .packo-experiencias .advisor-card--experience .advisor-card__org.advisor-card__org--experience,
  .packo-experiencias .advisor-card--experience .advisor-card__location.advisor-card__location--experience{
    font-size:15px !important;
    line-height:1.15 !important;
  }
}

/* M�VIL PEQUE�O */
@media (max-width:480px){
  .packo-experiencias .advisor-card--experience .advisor-card__name.advisor-card__name--experience{
    font-size:20px !important;
    line-height:1.1 !important;
  }

  .packo-experiencias .advisor-card--experience .advisor-card__org.advisor-card__org--experience,
  .packo-experiencias .advisor-card--experience .advisor-card__location.advisor-card__location--experience{
    font-size:15px !important;
    line-height:1.1 !important;
  }
}

/* ===== PACKO EXPERIENCIAS � GRID CENTRADO REAL ===== */
.packo-experiencias{
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

.packo-experiencias .promo-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 300px) !important;
  gap:28px !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto !important;
}

@media (max-width:1023px){
  .packo-experiencias .promo-grid{
    grid-template-columns:repeat(2, 320px) !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
}

@media (max-width:768px){
  .packo-experiencias .promo-grid{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    gap:22px !important;
  }
}

.packo-experiencias{
  max-width:1400px;
  margin:15px auto 0; /* arriba | lados | abajo */
  padding:0 16px;
  box-sizing:border-box;
}

@media (max-width:480px){

  /* controla el ancho del contenedor del grid */
  .packo-experiencias .promo-grid{
    max-width:320px;   /* aqu� defines el ancho total */
    margin:0 auto;
  }

  /* controla el ancho real de la tarjeta */
  .packo-experiencias .advisor-card--experience{
    max-width:340px;   /* aqu� defines el tama�o visual */
  }

}

/* =============================================
   MAS FILTROS - boton toggle mobile
   ============================================= */

/* Oculto en desktop: no ocupa espacio en el grid */
#toggleMoreFilters {
  display: none;
}

@media (max-width: 640px) {
  /* Más Filtros: texto flotante sin marco */
  #toggleMoreFilters {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    background: transparent !important;
    color: rgba(255,255,255,0.80) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 0;
    font-size: 14px;
    font-family: "Poppins Regular", sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: none !important;
    transform: none !important;
  }

  /* Campos extra ocultos por defecto en movil */
  .mini-portal #filters .filter-extra {
    display: none !important;
  }

  /* Al expandir, se muestran */
  .mini-portal #filters.filters--open .filter-extra {
    display: block !important;
  }

  /* Checkboxes necesitan flex */
  .mini-portal #filters.filters--open .filter-extra.filters__check {
    display: flex !important;
  }
}