@import url("./public-header-responsive.css?v=20260821-root-fix1");

/* ARE mobile property polish - 2026-08 */
@media (max-width: 767px) {
  body { overflow-x: hidden; }
  .section-shell { padding-left: .75rem; padding-right: .75rem; }
  a[href="/homes/"], a[href="/homes"] {
    display: inline-flex !important;
    visibility: visible !important;
  }
  h1 { font-size: clamp(1.65rem, 8vw, 2.45rem) !important; line-height: 1.05 !important; letter-spacing: -.035em; }
  h2 { line-height: 1.12 !important; }
  p { line-height: 1.42; }
  .grid { min-width: 0; }
  .rounded-3xl, .rounded-\[2rem\] { border-radius: 1.25rem !important; }
  .p-6, .p-7, .p-8, .p-9 { padding: 1rem !important; }
  .gap-8, .gap-10 { gap: 1rem !important; }
  .space-y-7 > :not([hidden]) ~ :not([hidden]),
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  img[alt][class*="object-cover"] { max-height: 58vh; }
  [class*="text-5xl"], [class*="text-6xl"] { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; line-height: 1.05 !important; }
  [class*="leading-relaxed"] { line-height: 1.45 !important; }
  [class*="text-granite"][class*="leading"], article p { line-height: 1.42 !important; }
  .property-detail-description, [data-property-description], section article p.whitespace-pre-line {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  }
  .are-property-info-grid, [data-property-facts], .property-facts {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important;
  }
  a, button { min-height: 44px; touch-action: manipulation; }
}
.are-read-more-toggle{margin-top:.35rem;min-height:44px;border:0;background:transparent;color:#bc561d;font-weight:800;font-size:.875rem;padding:.25rem 0;text-decoration:underline;text-underline-offset:3px}

.are-dual-price-card{margin-top:.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;border-radius:1rem;background:#fff;border:1px solid #eee;padding:.65rem;box-shadow:0 8px 22px rgba(0,0,0,.06)}.are-dual-price-card div{border-radius:.8rem;background:#f7f3f0;padding:.65rem}.are-dual-price-card span{display:block;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#606060}.are-dual-price-card strong{display:block;margin-top:.15rem;font-size:.95rem;line-height:1.1;color:#2f2e2e}@media (min-width:768px){.are-dual-price-card{max-width:420px}}

/* --- Venta / Renta operation switch, redesigned 2026-08-20 --- */
#root .mb-5:has(> nav[aria-label="Seleccionar tipo de operación"]) > p {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: #94a3b8; margin-bottom: .6rem;
}
#root nav[aria-label="Seleccionar tipo de operación"] {
  padding: 5px; border-radius: 1rem;
  background: linear-gradient(180deg, #eef0f3, #e2e4e9);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08);
}
#root nav[aria-label="Seleccionar tipo de operación"] a {
  font-weight: 700; letter-spacing: .02em;
  transition: box-shadow .18s ease, transform .12s ease, background-color .18s ease, color .18s ease;
}
#root nav[aria-label="Seleccionar tipo de operación"] a[aria-current="page"] {
  box-shadow: 0 6px 16px rgba(15, 23, 42, .2);
}
#root nav[aria-label="Seleccionar tipo de operación"] a:not([aria-current="page"]):hover {
  background-color: #f8fafc !important;
}
#root nav[aria-label="Seleccionar tipo de operación"] a:active {
  transform: scale(.97);
}

/* --- Carrusel "Unidades disponibles": la superposicion de precio vive sobre la
   columna de imagen (44% del ancho de la tarjeta, ~190-230px), demasiado angosta
   para "$1,326,358 MXN" en una sola linea con la etiqueta Venta/Renta. Sin esto,
   el navegador corta el numero o "MXN" a la mitad. Nunca partir un token; si no
   entra, que la fila completa (monto + moneda) baje de linea. --- */
.are-unit-slide > article > div:first-child > div:last-child > div {
  flex-wrap: wrap;
  row-gap: 2px;
}
.are-unit-slide > article > div:first-child > div:last-child span {
  white-space: nowrap;
}
.are-unit-slide > article > div:first-child > div:last-child .text-xl {
  font-size: 1.05rem;
}