/* Alejandra Cantero — sistema de diseño del sitio público.
   Paleta del mini manual (2024) con las reglas de contraste del relevamiento:
   - #545b55 es el ÚNICO color de texto informativo sobre fondos claros
   - #95a092 nunca lleva información: bordes, líneas, decoración
   - sobre salvia/taupe se escribe en #545b55, no en blanco
   - invertido (fondo #545b55) el texto va en beige/blanco (6.4–7.0 : 1) */

:root {
  --beige: #fff4e6;
  --offwhite: #f9f8f4;
  --sage: #b1b6b0;
  --taupe: #cdbca8;
  --ink: #545b55;
  --ink-strong: #3f463f;
  --deco: #95a092;
  --white: #ffffff;
  --wa: #128c7e;
  /* ── Acento ─────────────────────────────────────────────────────────────
     El mini manual de 2024 no tiene color de acento: sus 7 colores son del
     mismo valor tonal y sobre fondo claro nada resalta. Este bordó NO se
     inventó: es el que Alejandra ya usa en sus propios Reels (los rótulos
     "CASAGRANDE", "ENTERO", "SIN INTERESES" — ver relevamiento-marca-y-contenido.md).
     Contraste 9.1:1 sobre beige y 9.9:1 sobre blanco, así que sirve para texto,
     no solo para decorar.
     ⚠️ Regla: SOLO sobre fondos claros. Sobre el verde oscuro da 1.01:1
     (invisible) — ahí el acento sigue siendo el taupe. */
  --accent: #7a2434;
  --accent-soft: #f6eaea;
  --font-head: 'Gabarito', 'Trebuchet MS', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --maxw: 1120px;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(84, 91, 85, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.65;
  color: var(--ink); background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.15; color: var(--ink-strong); }
a { color: var(--ink); }
img { max-width: 100%; display: block; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--beige); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

/* ── header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(249, 248, 244, .95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--deco);
}
/* `min-width: 0` para que el logo pueda encogerse en vez de empujar el resto del
   header fuera de pantalla: es lo que hacía inalcanzable la hamburguesa (P1). */
.brand { display: flex; align-items: center; color: var(--ink); min-width: 0; }
.brand-logo svg { height: 44px; width: auto; max-width: 100%; display: block; }
.site-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .02em; }
.site-nav a:hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--deco); }
.lang-switch { display: flex; gap: .15rem; font-size: .8rem; flex-shrink: 0; }
.lang { padding: .25rem .45rem; text-decoration: none; border-radius: 5px; color: var(--ink); }
.lang.on { background: var(--ink); color: var(--beige); }
.lang:not(.on):hover { background: var(--beige); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; margin-left: auto; flex-shrink: 0; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ── layout común ── */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
section { margin: clamp(2.2rem, 6vw, 4rem) 0; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.btn {
  display: inline-block; padding: .8rem 1.6rem; border-radius: 6px;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: .02em;
  text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn.primary { background: var(--ink); color: var(--beige); }
.btn.primary:hover { background: var(--ink-strong); }
.btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover { background: var(--beige); }
.btn.light { background: var(--beige); color: var(--ink); border-color: var(--beige); }
.btn.light:hover { background: var(--white); }
.btn.block { display: block; text-align: center; }
.btn.big { font-size: 1.15rem; padding: 1rem 2.2rem; }
.btn.small { padding: .45rem .9rem; font-size: .9rem; }

/* ── hero ── */
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; margin-top: clamp(1.5rem, 4vw, 3rem);
}
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); margin: .4rem 0 .2rem; }
.hero-role { font-size: .95rem; color: var(--ink); margin-bottom: 1rem; }
.hero-tagline { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 34ch; margin-bottom: 1.6rem; }
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; width: 100%; }

/* ── manifiesto ── */
.manifesto { background: var(--beige); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); }
.manifesto blockquote {
  font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 500; text-align: center; max-width: 26ch; margin: 0 auto; color: var(--ink-strong);
}
.manifesto footer { font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 1rem; color: var(--ink); }

/* ── sobre Alejandra: video + foto + manifiesto ── */
.about-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center;
  background: var(--beige); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 3rem);
}
.af-media {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(.8rem, 2vw, 1.2rem); align-items: start; justify-content: center;
}
.af-video { position: relative; margin: 0; }
.af-video video {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--ink-strong);
}
.af-video figcaption { font-size: .8rem; color: var(--ink); margin-top: .6rem; line-height: 1.45; }
.af-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(249, 248, 244, .92); color: var(--ink-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(63, 70, 63, .35); transition: transform .15s ease;
}
.af-play svg { margin-left: 3px; }
.af-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.af-video.playing .af-play { display: none; }
.af-photo img {
  border-radius: var(--radius); box-shadow: var(--shadow);
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%; margin-top: clamp(1.6rem, 4vw, 3rem);
}
.af-text { display: flex; flex-direction: column; gap: 1.1rem; align-items: start; }
.af-kicker { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--ink-strong); margin-bottom: -.6rem; }
.af-text .eyebrow { color: var(--accent); }
.af-text .about-quote { margin-top: -.2rem; }
/* ── Trayectoria: intro + cifras reales de Alejandra (2026-08-22) ── */
.career { max-width: 880px; margin: 0 auto; }
.career-intro {
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; max-width: 58ch;
  margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center;
}
.career-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem; margin-bottom: clamp(2rem, 5vw, 3rem);
}
.career-grid div {
  background: var(--beige); border-radius: var(--radius); text-align: center;
  padding: clamp(1.2rem, 3vw, 1.8rem) 1rem;
}
.career-grid dt {
  font-family: var(--font-head); font-weight: 500; line-height: 1;
  font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.career-grid dd { margin-top: .55rem; font-size: .8rem; color: var(--ink); line-height: 1.4; }
.career-cta { text-align: center; }
.career-cta p { font-family: var(--font-head); font-size: 1.2rem; color: var(--ink-strong); margin-bottom: 1rem; }
.af-quote {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink-strong); max-width: 24ch;
}
.af-bio { max-width: 52ch; }
.af-stats { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.4rem); margin: .3rem 0; }
.af-stats div { min-width: 0; }
.af-stats dt { font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink-strong); line-height: 1.1; }
.af-stats dd { font-size: .8rem; color: var(--ink); max-width: 15ch; margin-top: .2rem; }
.about-reel { max-width: 760px; margin: 0 auto; }
.about-reel .af-media { align-items: center; }
.about-reel .af-photo img { margin-top: 0; }

/* ── Inversiones (solo en su propia página: hero oscuro + cuerpo claro) ──
   Todo lo de inversiones vive acá y en /inversiones — la home no lo repite,
   a propósito: cada tema en una sección y nada duplicado. */
.invest-hero {
  background: var(--ink-strong); color: var(--beige);
  border-radius: var(--radius); padding: clamp(2.2rem, 6vw, 4.5rem);
}
.invest-hero .eyebrow { color: var(--taupe); }
.invest-hero h1 { color: var(--offwhite); font-size: clamp(2.2rem, 6vw, 3.8rem); margin: .3rem 0 .6rem; }
.invest-hero .invest-sub { color: var(--sage); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 42ch; }
.invest-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3.5vw, 2.8rem); margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.invest-fig { font-family: var(--font-head); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--accent); line-height: 1; }
.invest-card h2 { font-size: 1.15rem; color: var(--ink-strong); margin: .55rem 0 .4rem; }
.invest-card p:last-child { font-size: .92rem; color: var(--ink); line-height: 1.55; }
.invest-notes {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  border-top: 1px solid var(--deco); padding-top: clamp(1.2rem, 3vw, 1.8rem);
}
.invest-notes p {
  font-size: .92rem; color: var(--ink); line-height: 1.55;
  border-left: 3px solid var(--accent); padding-left: .9rem;
}
.invest-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.btn.ghost {
  border: 1px solid var(--taupe); color: var(--beige); background: transparent;
}
.btn.ghost:hover { background: rgba(205, 188, 168, .14); }

/* ── strips de cards ── */
.strip-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.strip-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.strip-head p { font-size: .95rem; }
.strip-all { font-weight: 600; text-decoration: none; white-space: nowrap; }
.strip-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.page-grid { margin-bottom: 3rem; }

/* ── cards ── */
.card { background: var(--white); border: 1px solid var(--deco); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-media img { transform: scale(1.04); }
.badge {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--ink); color: var(--beige);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 4px;
}
.badge.alt { left: auto; right: .8rem; background: var(--accent-soft); color: var(--accent); }
.badge.inline { position: static; display: inline-block; margin-right: .5rem; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card-body h3 { font-size: 1.15rem; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-loc { font-size: .85rem; }
.price { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--accent); }
.price.consult { font-size: 1.05rem; font-style: italic; }
.card-specs { font-size: .85rem; }
.card-amen { font-size: .8rem; color: var(--ink); border-top: 1px solid var(--deco); padding-top: .5rem; margin-top: .3rem; }
.card-desc { font-size: .88rem; }
.card-link { margin-top: auto; padding-top: .6rem; font-weight: 600; font-size: .9rem; text-decoration: none; }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── banda de captación ── */
.sell-band { background: var(--ink); color: var(--beige); border-radius: var(--radius); text-align: center; padding: clamp(2rem, 5vw, 3.5rem); }
.sell-band h2 { color: var(--beige); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .6rem; }
.sell-band p { max-width: 52ch; margin: 0 auto 1.4rem; }

/* ── páginas de listado ── */
.page-head { text-align: center; margin: clamp(1.8rem, 4vw, 3rem) 0 1.5rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: .4rem; }
/* pestañas de la sección Propiedades: unidades / proyectos (son links, no JS) */
.view-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.view-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--deco);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.view-tab:hover { border-color: var(--accent); background: var(--beige); }
.view-tab.is-active { background: var(--ink); color: var(--beige); border-color: var(--ink); }
.view-count {
  font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--beige); color: var(--ink); border-radius: 999px; padding: .05rem .45rem;
}
.view-tab.is-active .view-count { background: rgba(255, 244, 230, .22); color: var(--beige); }

/* banda de métricas (estructura de la referencia paolabenitez.com) */
.stats-band {
  background: var(--ink-strong); border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 2.6rem);
}
.stats-band dl {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem); text-align: center;
}
.stats-band dt {
  font-family: var(--font-head); font-weight: 500; line-height: 1;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: var(--taupe);
  font-variant-numeric: tabular-nums;
}
.stats-band dd {
  /* .72rem eran 11.5px: demasiado chico para el público de ella, que es 45+
     (auditoría 2026-08-31, P3). El contraste ya pasaba AA; el tamaño no. */
  margin-top: .6rem; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sage); line-height: 1.45;
  /* Red de seguridad: minmax(0,1fr) deja encoger la COLUMNA, pero una palabra larga
     ("DESARROLLADORAS" mide ~116px) sigue desbordando su caja. Sin esto, cualquier
     label nuevo más largo vuelve a romper el ancho de la página. */
  overflow-wrap: break-word;
}
.stats-band dd::before {
  content: ''; display: block; width: 22px; height: 1px;
  background: rgba(205, 188, 168, .5); margin: 0 auto .6rem;
}

/* servicios — "¿Cómo puedo ayudarte?" */
.services-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.services-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-top: .3rem; }
/* 4 servicios: en ancho completo van los 4 en fila; en tablet 2×2, y en mobile
   apilados. Con 3 columnas quedaba uno huérfano en la segunda fila. */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.service-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--deco); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.service-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.service-num {
  position: absolute; top: .5rem; right: 1rem; pointer-events: none;
  font-family: var(--font-head); font-weight: 500; font-size: 3.4rem;
  /* Marca de agua decorativa (aria-hidden): a propósito por debajo del umbral de
     contraste — si se lee fuerte compite con el título de la card. */
  color: rgba(122, 36, 52, .16); line-height: 1;
}
.service-card h3 { font-size: 1.1rem; color: var(--ink-strong); padding-right: 3rem; }
.service-card p { font-size: .92rem; line-height: 1.55; flex: 1; }
.service-more {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-strong); align-self: start;
  border-bottom: 1px solid var(--accent); padding-bottom: .15rem;
}
.service-more:hover { border-bottom-color: var(--ink-strong); }

/* ── ficha: mosaico de galería (referencia: ficha de paolabenitez.com) ── */
.gallery-mosaic {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.gallery-mosaic .gallery-item {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: 4px; overflow: hidden; position: relative;
}
.gallery-mosaic .gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gallery-mosaic .gallery-item:hover img { transform: scale(1.04); }
.gallery-mosaic .gallery-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* La portada ocupa la mitad izquierda (3fr de 6) y las dos filas completas; las 6
   siguientes van en la grilla derecha. Las filas son 1fr/1fr, así que la altura la
   fija la portada por su aspect-ratio y las miniaturas se reparten esa altura
   exacta — sin eso el mosaico queda desalineado. */
/* La altura la fija el CONTENEDOR con aspect-ratio, no las fotos: así las dos filas
   de miniaturas suman exactamente la altura de la portada. Si la altura la dictara
   el alto intrínseco de las imágenes, las miniaturas terminan más altas que la
   portada y el mosaico queda desalineado. */
.gallery-mosaic { grid-template-rows: 1fr 1fr; }
.gallery-mosaic .gallery-item { min-height: 0; min-width: 0; }
.gallery-mosaic .lead { grid-column: 1; grid-row: 1 / span 2; }
/* columnas de miniaturas según cuántas entran completas (ver galleryMosaic) */
.gallery-mosaic.cols-3 { grid-template-columns: 3fr 1fr 1fr 1fr; aspect-ratio: 3 / 1; }
.gallery-mosaic.cols-2 { aspect-ratio: 3 / 1; }
.gallery-mosaic.cols-1 { aspect-ratio: 9 / 4; }
.gallery-mosaic.cols-3 .gallery-item:nth-child(n+8) { display: none; }
.gallery-mosaic.cols-2 { grid-template-columns: 2fr 1fr 1fr; }
.gallery-mosaic.cols-2 .gallery-item:nth-child(n+6) { display: none; }
.gallery-mosaic.cols-1 { grid-template-columns: 2fr 1fr; }
.gallery-mosaic.cols-1 .gallery-item:nth-child(n+4) { display: none; }
.gallery-mosaic.cols-0 { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: 16 / 9; }
.gallery-mosaic.cols-0 .lead { grid-row: 1; }
.gallery-mosaic.cols-0 .gallery-item:nth-child(n+2) { display: none; }
/* "+N" sobre la última visible cuando hay más fotos */
.gallery-mosaic .gallery-item[data-more]::after {
  content: attr(data-more); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63, 70, 63, .62); color: var(--offwhite);
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 500;
}

/* ── ficha: título, dirección, precio, especificaciones ── */
.detail-titlerow { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.icon-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--white); border: 1px solid var(--deco); color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--beige); border-color: var(--accent); }
.icon-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.icon-btn[hidden] { display: none; }
.icon-btn.copied { background: var(--accent); border-color: var(--accent); color: var(--beige); }
.detail-addr { display: flex; align-items: start; gap: .45rem; font-size: .92rem; margin-top: .4rem; }
.detail-addr svg { flex: 0 0 auto; margin-top: .15rem; color: var(--accent); }
.detail-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.spec-row {
  display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none;
  border-top: 1px solid var(--deco); border-bottom: 1px solid var(--deco);
  padding: .9rem 0; margin: 1.1rem 0 1.6rem;
}
.spec-row li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.spec-row svg { color: var(--accent); }

/* ── ficha: características (pares etiqueta/valor) y listas con check ── */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.feat-grid div {
  background: var(--offwhite); border: 1px solid var(--deco); border-radius: 6px;
  padding: .7rem .9rem; font-size: .9rem; display: flex; gap: .4rem; flex-wrap: wrap;
}
.feat-grid dt { font-weight: 600; color: var(--ink-strong); }
.feat-grid dd { color: var(--ink); }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; list-style: none; }
.feat-list li {
  display: flex; align-items: start; gap: .55rem; font-size: .9rem;
  background: var(--offwhite); border: 1px solid var(--deco); border-radius: 6px; padding: .7rem .9rem;
}
.feat-list svg { flex: 0 0 auto; margin-top: .1rem; color: var(--accent); }

/* ── ficha: mapa de ubicación (sólo si la coordenada está cargada) ── */
.detail-map {
  border: 1px solid var(--deco); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 16 / 9; background: var(--beige);
}
.detail-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-link { margin-top: .6rem; }
.map-link a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: .1rem;
}
.map-link a:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }

/* ── ficha: tarjeta de contacto lateral ── */
.contact-card {
  background: var(--offwhite); border: 1px solid var(--deco);
  border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.6rem);
  display: flex; flex-direction: column; gap: .6rem;
}
.contact-card h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.cc-name { font-family: var(--font-head); font-size: 1.02rem; color: var(--ink-strong); }
.cc-role { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; }
.cc-financing { border-top: 1px solid var(--deco); padding-top: .9rem; margin-top: .3rem; }
.cc-financing-title { font-weight: 600; font-size: .88rem; color: var(--ink-strong); margin-bottom: .25rem; }
.cc-financing p { font-size: .88rem; line-height: 1.55; }

/* preguntas frecuentes — acordeón nativo <details>/<summary>, sin JS */
.faq-page { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--deco); }
.faq-item:first-child { border-top: 1px solid var(--deco); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 500; font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--ink-strong);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg); transition: transform .2s ease; margin-right: .3rem;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq-item p {
  padding: 0 2rem 1.25rem .2rem; font-size: .95rem; line-height: 1.65; max-width: 70ch;
}
.faq-teaser { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* enlaces con icono (Instagram) */
.with-icon { display: inline-flex; align-items: center; gap: .5rem; }
.ig-icon { flex: 0 0 auto; }

/* home: puerta única al inventario, sin repetir las cards acá */
.home-cta {
  background: var(--beige); border-radius: var(--radius); text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.home-cta h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: .5rem; }
.home-cta p { max-width: 54ch; margin: 0 auto 1.5rem; }

.filters {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: end;
  background: var(--white); border: 1px solid var(--deco); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.filter { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.filter select {
  font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  padding: .5rem .6rem; border: 1px solid var(--deco); border-radius: 6px; background: var(--white);
  min-width: 9.5rem;
}
.filter-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; margin-left: auto; align-self: end;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--deco); border-radius: 50%;
  text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter-clear:hover { background: var(--beige); color: var(--accent); border-color: var(--accent); }
.filter-clear:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.results-count { font-size: .88rem; margin-bottom: 1.2rem; }
.no-results { background: var(--beige); border-radius: var(--radius); padding: 2rem; text-align: center; max-width: 60ch; margin: 0 auto 3rem; }

/* ── ficha (detalle) ── */
.detail { margin-bottom: 3rem; }
.detail-head { margin: 1.8rem 0 1.2rem; }
.crumbs { font-size: .85rem; margin-bottom: .8rem; }
.detail-head h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: .6rem; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .9rem; margin-bottom: .8rem; }
.detail-project a { font-weight: 600; }
.detail-price { font-family: var(--font-head); font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 600; color: var(--accent); }
.detail-price.consult { font-style: italic; }
.detail-cover img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-height: 560px; object-fit: cover; }
.spec-band {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  background: var(--beige); border-radius: var(--radius); margin: 1.2rem 0;
  text-align: center;
}
.spec-band li { flex: 1 1 120px; padding: 1rem .8rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.spec-band strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--ink-strong); }
.detail-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2rem; margin: 1.6rem 0; }
.detail-main h2 { font-size: 1.35rem; margin: 1.4rem 0 .6rem; }
.detail-main p { margin-bottom: .8rem; }
.benefits { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.benefits li { background: var(--white); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: .7rem 1rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { background: var(--white); border: 1px solid var(--deco); border-radius: 99px; padding: .35rem .9rem; font-size: .85rem; }
.detail-side { display: flex; flex-direction: column; gap: 1rem; align-self: start; position: sticky; top: 84px; }
/* sobre taupe el texto va en ink-strong: ink normal da 3.78:1 y falla AA (ver relevamiento) */
.financing-card { background: var(--taupe); border-radius: var(--radius); padding: 1.3rem 1.4rem; color: var(--ink-strong); }
.financing-card h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.typologies { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.typologies li { display: flex; justify-content: space-between; gap: 1rem; background: var(--white); border: 1px solid var(--deco); border-radius: 8px; padding: .7rem 1rem; }
.typ-price { font-weight: 600; white-space: nowrap; }

/* ── galería ── */
.gallery-title { font-size: 1.35rem; margin: 2rem 0 .8rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.gallery-item { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .25s; }
.gallery-item:hover img { transform: scale(1.05); }
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(63, 70, 63, .95);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(.4rem, 2vw, 1.4rem); padding: clamp(3.2rem, 6vw, 4rem) clamp(.6rem, 3vw, 2rem) 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { display: flex; align-items: center; justify-content: center; min-width: 0; }
.lightbox-stage img {
  max-width: 100%; max-height: calc(100vh - 15rem); border-radius: 6px;
  object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
}
.lightbox-close, .lightbox-nav {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(249, 248, 244, .12); border: 1px solid rgba(205, 188, 168, .45);
  color: var(--beige); cursor: pointer; border-radius: 50%;
  width: 46px; height: 46px; flex: 0 0 auto;
  transition: background-color .15s ease, transform .15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(249, 248, 244, .24); transform: scale(1.06); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible,
.lightbox-thumb:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
.lightbox-close { position: absolute; top: 1rem; right: 1.2rem; width: 42px; height: 42px; }
.lightbox-nav[hidden] { display: none; }
.lightbox-bottom {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .7rem; min-width: 0;
}
.lightbox-count {
  font-size: .82rem; letter-spacing: .1em; color: var(--sage);
  font-variant-numeric: tabular-nums; margin: 0;
}
.lightbox-thumbs {
  display: flex; gap: .45rem; max-width: 100%; overflow-x: auto; padding: .2rem;
  scrollbar-width: thin;
}
.lightbox-thumbs[hidden] { display: none; }
.lightbox-thumb {
  flex: 0 0 auto; width: 64px; height: 46px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 5px; overflow: hidden; background: none;
  opacity: .5; transition: opacity .15s ease, border-color .15s ease;
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb:hover { opacity: .85; }
.lightbox-thumb.is-active { opacity: 1; border-color: var(--taupe); }

/* ── sobre mí / contacto ── */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
.about-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-text { display: flex; flex-direction: column; gap: 1rem; align-items: start; }
.about-quote { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink-strong); border-left: 3px solid var(--accent); padding-left: 1rem; }
.bilingual { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.contact { text-align: center; display: flex; flex-direction: column; gap: 1.2rem; align-items: center; margin-bottom: 4rem; }
.contact-number { font-family: var(--font-head); font-size: 1.4rem; }

/* ── footer ── */
.site-footer { background: var(--ink); color: var(--beige); margin-top: 3rem; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 1.2rem; }
/* `minmax(0, ...)` y no `1fr` pelado: `1fr` es `minmax(auto, 1fr)` y el mínimo `auto`
   impide que la columna baje de su min-content. El min-content de la columna de
   contacto son ~200px (el largo de "WhatsApp: +595976300302", que no rompe), así que
   con dos columnas más el gap el footer pedía 330px y desbordaba en 320-374px.
   Encontrado al verificar P1 el 2026-09-01. */
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
/* El número de WhatsApp y el handle de IG son cadenas largas sin espacios: si la
   columna se angosta tienen que romper, no empujar. */
.footer-col p, .footer-col a { overflow-wrap: anywhere; }
/* 🔴 `height` fija + `width: auto` daba 289px que no se encogían, y a 320-374px el
   footer empujaba la página 48px a la derecha: scroll horizontal en todo el sitio.
   Es la misma causa que P1 (un SVG de marca de tamaño fijo) en otro lugar, y la
   auditoría no lo vio porque midió desbordes en home y ficha a 390px, no a 320.
   Encontrado al verificar P1 el 2026-09-01. */
.brand-logo-v svg { height: 130px; width: auto; max-width: 100%; }
@media (max-width: 480px) {
  .brand-logo-v svg { height: 104px; }
}
.footer-col h3 { color: var(--beige); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.footer-col p { margin-bottom: .4rem; font-size: .92rem; }
/* Área táctil de 24px (WCAG 2.5.8): medían 18px de alto. El inline-block + padding
   agranda el objetivo sin mover el diseño (auditoría 2026-08-31, P3). */
.footer-col a { color: var(--beige); text-decoration: none; display: inline-block; padding: .18rem 0; min-height: 24px; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { max-width: var(--maxw); margin: 2rem auto 0; font-size: .8rem; text-align: center; border-top: 1px solid rgba(255, 244, 230, .25); padding-top: 1.2rem; }

/* ── WhatsApp flotante ── */
.wa-float {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.wa-float:hover { transform: scale(1.08); }

/* ── responsive ── */
@media (max-width: 900px) {
  /* 🔴 La nav colapsa acá, no en 640px. Medido: el header con la nav desplegada pide
     ~740-860px, así que entre 641 y 900 desbordaba — se iban los idiomas y los últimos
     links (auditoría 2026-08-31, P1). A 900px justo entra, así que es el límite. */
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--offwhite); border-bottom: 1px solid var(--deco);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .9rem 1.4rem; border-top: 1px solid var(--deco); }
  /* Los idiomas quedan como una fila más del desplegable, con área táctil propia. */
  .lang-switch { padding: .75rem 1.4rem; border-top: 1px solid var(--deco); gap: .3rem; font-size: .9rem; }
  .lang { padding: .5rem .7rem; }
  .nav-toggle { display: block; }

  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  /* la foto del hero es vertical con la cara en el tercio superior: el recorte
     apaisado tiene que anclar arriba o le corta la cabeza */
  .hero-media img { aspect-ratio: 16/10; object-position: 50% 15%; }
  .detail-cols { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  /* mobile: portada arriba a lo ancho y las miniaturas en 3 columnas debajo */
  /* mobile: portada a lo ancho y miniaturas en 3 columnas debajo */
  .gallery-mosaic, .gallery-mosaic.cols-0, .gallery-mosaic.cols-1,
  .gallery-mosaic.cols-2, .gallery-mosaic.cols-3 {
    grid-template-columns: repeat(3, 1fr); grid-template-rows: none; aspect-ratio: auto;
  }
  .gallery-mosaic .lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery-mosaic .gallery-item:not(.lead) { aspect-ratio: 1; }
  .feat-grid, .feat-list { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about-feature { grid-template-columns: 1fr; }
  .af-media { max-width: 540px; margin: 0 auto; }
  .invest-grid { grid-template-columns: 1fr; }
  .invest-notes { grid-template-columns: 1fr; }
  .stats-band dl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-head { flex-direction: column; align-items: start; }
  /* en mobile las flechas van sobre la foto, como en los portales inmobiliarios */
  .lightbox { grid-template-columns: 1fr; padding: 3.2rem .6rem 1rem; }
  .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; }
  .lightbox-nav.prev { left: .5rem; }
  .lightbox-nav.next { right: .5rem; }
  .lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
  .lightbox-stage img { max-height: calc(100vh - 13rem); }
  .lightbox-thumb { width: 54px; height: 40px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  /* minmax(0, ...) y no 1fr: el label más largo ("Desarrolladoras que represento")
     tiene un min-content de ~158px y con `1fr` la columna no podía bajar de ahí, así
     que la banda desbordaba 28px a 320px. Preexistía a este bloque —estaba tapado por
     el desborde mayor del footer— y el aumento de tamaño de P3 lo agrandó.
     Medido el 2026-09-01. */
  .stats-band dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: 1fr; }
  .filters { gap: .6rem; }
  .filter select { min-width: 7.5rem; }
  .strip-head { flex-direction: column; align-items: start; }
}

/* ── teléfonos angostos ──
   A 320px el logo a 44px de alto ocupa 261px y, con el padding y la hamburguesa,
   el header pedía ~347px: 27px más que la pantalla. Bajarlo a 34px lo deja en
   ~202px y el header entra con margen (auditoría 2026-08-31, P1). */
@media (max-width: 480px) {
  .brand-logo svg { height: 34px; }
  /* Una columna: a 320-400px dos columnas dejan ~106px por celda y los labels no
     entran ni partiendo palabras. Con una sola, cada label tiene el ancho completo. */
  .stats-band dl { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  /* Una sola columna: es el layout natural del footer en un teléfono, y saca de la
     ecuación el gap de 2rem que era parte del desborde. */
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

/* ── prefers-reduced-motion ──
   Hay pocas animaciones (carrusel, hovers, scroll suave), pero "pocas" no es
   ninguna: quien pide menos movimiento a nivel sistema lo pide por algo
   (auditoría 2026-08-31, P4). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}