@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');
html, body { margin: 0; padding: 0; }
body { font-family: Montserrat, sans-serif; color: #1A1A1A; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
a { color: #A37C52; text-decoration: none; }
a:hover { color: #7A5B39; }
input, select, textarea, button { font-family: inherit; }
img { max-width: 100%; }
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 2px !important;
  box-sizing: border-box;
  white-space: nowrap;
}
@keyframes semFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.img-ph { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: #EDE6E1; color: #9B8B80; font-size: 12px; letter-spacing: .04em; text-align: center; padding: 12px; }
.img-ph span { opacity: .8; }
.h1:hover { color: #A37C52 !important; }
.h2:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.45) !important; color: #1A1A1A !important; }
.h3:hover { background: #1EB255 !important; color: #FFFFFF !important; }
.h4:hover { background: #F6F0ED !important; }
.h5:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important; }
.h6:hover { box-shadow: 0 20px 40px rgba(0,69,84,0.14) !important; transform: translateY(-4px) !important; }
.h7:hover { background: linear-gradient(45deg, #A37C52 0%, #C9A16F 30%, #FFE8B6 52%, #C9A16F 74%, #A37C52 100%) !important; color: #1A1A1A !important; }
.h9:hover { background: rgba(163,124,82,0.12) !important; }

/* ==========================================================================
   Responsive layer
   Todo lo de abajo ADAPTA el diseño existente a distintos anchos de pantalla
   sin tocar los valores inline de desktop. Se usan clases nuevas + !important
   sólo para las propiedades que deben cambiar por breakpoint (mismo patrón
   que las clases .h1..h9 de arriba, que ya sobreescriben estilos inline).
   ========================================================================== */

html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* --- Menú mobile (hamburguesa) --------------------------------------- */
.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-burger { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-panel { display: contents; }

@media (max-width: 880px) {
  .header-inner { gap: 12px !important; }
  .menu-toggle { display: inline-flex; }

  .nav-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    padding: 8px clamp(24px, 6vw, 96px) 22px;
    gap: 2px;
    box-shadow: 0 18px 34px rgba(0,46,56,0.16);
    border-bottom: 1px solid #EAE0DA;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }
  .nav-panel.open { display: flex; }

  .site-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
  }
  .site-nav > * {
    width: 100%;
    text-align: left;
    padding: 14px 2px !important;
    font-size: 15px !important;
    border-bottom: 1px solid #F6F0ED;
  }

  .nav-cta {
    margin-top: 14px !important;
    width: 100%;
    justify-content: center !important;
    text-align: center;
  }
}

/* --- Grids: reordenar contenido antes que imagen en mobile ------------ */
@media (max-width: 767px) {
  .dev-media { order: 2; }
  .dev-copy { order: 1; }
}

/* --- "Lo que nos impulsa": recuadros a la izquierda, texto a la derecha
   en desktop/tablet; en mobile el texto vuelve a ir primero ------------- */
.impulsa-cards { order: 1; }
.impulsa-copy { order: 2; }
.impulsa-cards > div:last-child { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .impulsa-cards { order: 2; }
  .impulsa-copy { order: 1; }
}

/* --- Tarjetas de "Lo que nos impulsa": mostrar la descripción al pasar
   el mouse, sin cambiar el alto de la tarjeta -------------------------- */
.impulsa-card:hover .impulsa-face { opacity: 0 !important; }
.impulsa-card:hover .impulsa-desc { opacity: 1 !important; }

/* --- Propiedades seleccionadas: carrusel horizontal en vez de grilla --- */
.featured-row { align-items: flex-start; }
.featured-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px clamp(40px, 8vw, 100px) 6px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.featured-carousel::-webkit-scrollbar { display: none; }
.featured-carousel > article {
  flex: 0 0 clamp(210px, 19vw, 255px);
  scroll-snap-align: start;
}
.featured-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6px;
  width: clamp(40px, 8vw, 100px);
  background: linear-gradient(to right, rgba(246,240,237,0) 0%, #F6F0ED 75%);
  pointer-events: none;
  transition: opacity .25s;
}

/* Arrastre con el mouse (en celular el deslizamiento es nativo) */
@media (hover: hover) and (pointer: fine) {
  .featured-carousel { cursor: grab; }
}
.featured-carousel.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.featured-carousel.arrastrando a { pointer-events: none; }
.featured-carousel img { -webkit-user-drag: none; user-select: none; }


@media (max-width: 700px) {
  .featured-row { flex-direction: column; }
  /* sin esto el bloque se estiraba al ancho de todas las cards y no había nada que deslizar */
  .featured-carousel-wrap { align-self: stretch; width: 100%; }
  .featured-heading { max-width: 100% !important; padding-right: clamp(24px, 6vw, 96px) !important; }
}

/* --- Video del hero en mobile -------------------------------------------
   El video es 16:9. Con 680px de alto, el "cover" recortaba los costados y se
   perdía el texto del logo. En pantallas angostas la sección toma el alto del
   video (debajo del header fijo) y se recorta solo un poco de cada lado, sin
   tocar el centro donde está el texto. */
@media (max-width: 767px) {
  .hero {
    min-height: 0 !important;
    height: calc(82px + 92vw);
    background: #003C4B !important; /* mismo tono que el fondo del video */
  }
  .hero-video {
    top: 82px !important;
    height: calc(100% - 82px) !important;
  }
}

/* --- Edificio en la sección "Personas antes que propiedades" ---------- */
@media (max-width: 700px) {
  .edificio { opacity: 0.3; }
}

/* --- Páginas de catálogo (propiedades / desarrollos) ------------------ */
.catalog-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.catalog-filters { position: sticky; top: 104px; background: #FFFFFF; border: 1px solid #EAE0DA; border-top: 3px solid #A37C52; padding: 22px; }
.filter-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #A37C52; }
.f-select {
  appearance: none; -webkit-appearance: none; width: 100%; padding: 11px 36px 11px 12px;
  border: 1px solid #EAE0DA; border-radius: 2px; font-size: 14px; color: #1A1A1A; cursor: pointer;
  background: #F6F0ED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A37C52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
}
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 24px; }
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 28px; }
  .catalog-filters { position: static; }
  .filters-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
}

/* --- Ítem activo del menú ---------------------------------------------- */
.site-nav [aria-current="page"] { font-weight: 700 !important; }

/* --- Detalle de desarrollo ------------------------------------------------ */
.dev-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.dev-detail-side { position: sticky; top: 104px; background: #FFFFFF; border: 1px solid #EAE0DA; border-top: 3px solid #A37C52; padding: 24px; }
.gallery-stage { position: relative; aspect-ratio: 16 / 10; background: #EDE6E1; overflow: hidden; }
.gallery-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-badge { position: absolute; top: 16px; left: 16px; background: #A37C52; color: #FFFFFF; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,0.88); color: #004554; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.gallery-nav:hover { background: #FFFFFF; }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 16 / 10; overflow: hidden; opacity: 0.65; }
.gallery-thumbs button.active { border-color: #A37C52; opacity: 1; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; }
.dev-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EAE0DA; font-size: 14px; }
.dev-specs dt { color: #8A8A8A; }
.dev-specs dd { margin: 0; font-weight: 600; color: #004554; text-align: right; }
.dev-amenities { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.dev-amenities li { background: #FFFFFF; border: 1px solid #EAE0DA; padding: 9px 14px; font-size: 13px; color: #004554; }
@media (max-width: 900px) {
  .dev-detail { grid-template-columns: 1fr; gap: 28px; }
  .dev-detail-side { position: static; }
}

/* --- Planos: se muestran enteros (sin recorte) en la galería ------------ */
.gallery-stage > img[src*="plano"] { object-fit: contain; background: #FFFFFF; }

/* ── Blog: tarjetas de ancho fijo (4 por fila en blog.html, 3 en el inicio) ── */
.notas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.notas-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 1100px) { .notas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .notas-grid, .notas-grid.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .notas-grid, .notas-grid.tres { grid-template-columns: 1fr; } }

.listing-ribbon { position:absolute; top:29px; right:-51px; left:auto; transform:rotate(45deg); transform-origin:center; z-index:2; width:190px; max-width:none; box-sizing:border-box; background:linear-gradient(45deg,#A37C52 0%,#C9A16F 30%,#FFE8B6 52%,#C9A16F 74%,#A37C52 100%); color:#1A1A1A; padding:8px 35px; border-top:1px solid rgba(255,232,182,.5); border-bottom:1px solid rgba(255,232,182,.5); box-shadow:0 3px 10px rgba(0,0,0,.16); text-align:center; text-transform:uppercase; font-size:11px; line-height:1.4; font-weight:700; letter-spacing:.12em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.listing-ribbon[hidden] { display:none; }

/* Recorta la cinta diagonal dentro de la foto, incluida la portada del inicio. */
:has(> .listing-ribbon) { overflow:hidden; }