:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f1f0;
  --color-text: #1d1e20;
  --color-muted: #68686f;
  --color-accent: #ab2e29;
  --color-accent-dark: #7a201c;
  --color-border: rgba(0, 0, 0, 0.09);
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.1);
  --color-panel-dark: #1e1512;
  /* Alto real de ".site-header" (sticky, siempre visible) — se usa para que el hero de la home y
     las diapositivas de Nosotros quepan enteras debajo, sin que el header las tape ni las corte. */
  --header-h: 84px;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(171, 46, 41, 0.07), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #faf7f6 100%);
  color: var(--color-text);
  font-family: var(--font-family, "Inter", sans-serif);
  line-height: 1.7;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

/* Todos los títulos del sitio van en mayúscula (a pedido de Edgar) — se hace con
   text-transform en vez de escribir el texto ya en mayúscula, para no arriesgar tildes mal
   puestas al pasar frases largas a mano y para que el texto real (lectores de pantalla, título
   de pestaña si se reusa en JS) siga en formato normal. */
h1,
h2,
h3 {
  text-transform: uppercase;
}

.container {
  width: min(1320px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  /* Deja libre la franja donde ".header-social" queda fijo contra el borde derecho real de la
     pantalla (ver esa regla) — si no, a anchos de escritorio angostos los links de texto podrían
     quedar tapados debajo de los íconos. Se saca en mobile, donde los íconos vuelven al flujo
     normal dentro del menú desplegable. */
  padding-right: 7rem;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-muted);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-text);
}

.main-nav a.active {
  color: var(--color-accent);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-text);
}

.main-nav a.nav-cta {
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.main-nav a.nav-cta:hover,
.main-nav a.nav-cta:focus-visible {
  transform: translateY(-1px);
  background: var(--color-accent-dark);
  color: #fff;
}

.main-nav a.nav-cta.active {
  color: #fff;
}

/* Ítem "CRECÉ CON KEYMEX" del nav: no es un link propio (no tiene página), es un toggle que
   despliega los 2 destinos reales (reclutamiento / franquicias). Se muestra con ":hover"/
   ":focus-within" para mouse, y con la clase ".open" (agregada por JS) para touch/teclado, donde
   ":hover" no alcanza. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  text-transform: uppercase;
  color: var(--color-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--color-text);
}

.nav-dropdown-caret {
  font-size: 0.6em;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translate(-50%, 8px);
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 0.5rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-menu a {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Redes sociales en el header, al lado de "Contacto" — mismos íconos/links que el footer
   (.social-links), pero sin el círculo de fondo, para que no compitan visualmente con el resto
   de los links de texto del nav. */
.header-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* Pegado al borde derecho real de la ventana (no solo al borde del ".container" centrado de
     1120px) — ".site-header" es el ancestro con position, así que "right" se mide contra el
     ancho completo de la pantalla. Se revierte a estático en mobile (ver media query), donde
     tiene que volver al flujo normal dentro del menú desplegable. */
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
}

.header-social a {
  display: inline-flex;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.header-social a:hover,
.header-social a:focus-visible {
  color: var(--color-accent);
}

.header-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Pantalla completa debajo del header sticky (a pedido de Edgar, para que no se vea el rojo de
     la siguiente sección asomando abajo) — "100vh" de respaldo para navegadores sin soporte de
     "svh"; "100svh" evita que en mobile quede más alto que lo que realmente se ve cuando la barra
     de direcciones está visible. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Placeholder mientras no está el video de avance (foto elegida por Edgar, vista aérea del
     Arco del Triunfo). El hero es mucho más ancho que la foto (4:3), así que "cover" solo
     recorta arriba/abajo, nunca a los costados — se posiciona el recorte en el 65% vertical
     (en vez de 50%, el centro geométrico de la foto) porque el arco está un poco por debajo
     del centro de la imagen original, para que quede dentro del recorte visible.
     La foto se sirve desde el propio sitio (antes se cargaba desde un blog ajeno, cuyo dueño
     podía cambiarla o cortarla — ver auditoría de seguridad del 2026-09-24 en MEMORY.md). */
  background-image: linear-gradient(180deg, rgba(20, 9, 8, 0.35), rgba(20, 9, 8, 0.55)),
    url('images/hero-arco-triunfo.jpg');
  background-position: center, center 65%;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.hero-search-wrap {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.hero-tabs {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hero-tab {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}

.hero-tab.active {
  background: var(--color-accent);
  color: #fff;
}

/* Modificadores de sección (solo página de inicio, por ahora) */
.section-tint {
  background: var(--color-surface-alt);
}

.section-contrast {
  background: var(--color-panel-dark);
  color: #fff;
}

/* Placeholders de secciones sin contenido todavía (ver index.html) — solo un rectángulo con
   altura fija para ver el espacio; se reemplaza por el diseño real más adelante. */
.placeholder-box {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  border: 2px dashed var(--color-border);
  border-radius: 24px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-weight: 600;
}

.section-contrast .eyebrow {
  color: #ffb3a8;
}

.section-contrast .section-header h2 {
  color: #fff;
}

.section-contrast .section-text {
  color: rgba(255, 255, 255, 0.72);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.section-header h2,
.about-copy h2,
.contact h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin: 0;
  letter-spacing: -0.05em;
  /* Sin esto, hereda el line-height:1.7 del body — se nota mucho en títulos largos que envuelven
     a 2-3 líneas (ej. "Presencia local con el respaldo de una red internacional"). */
  line-height: 1.1;
}

.hero-text,
.section-text,
.about-copy p,
.contact p {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 64ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #fff;
}

.button-secondary {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--color-text);
}

.featured,
.services,
.about,
.contact {
  padding: 5rem 0;
}

#contacto,
#listing-title {
  /* El header queda sticky arriba — sin esto, saltar a este elemento (ej. "Contacto" del nav en
     index.html#contacto, o el título al cambiar de página de resultados) lo deja tapado justo
     debajo del header. */
  scroll-margin-top: 100px;
}

/* "Centro KEYMEX" — franja roja debajo del hero (index), imagen a la izquierda + texto a la
   derecha, mismo criterio de layout que keymex.com.ar. */
.centro-keymex {
  /* Rojo más vivo que "--color-accent" a propósito acá — Edgar pidió que esta franja se vea más
     roja, como en la referencia de las imágenes de marca (que ya vienen pensadas para este tono). */
  background: #c41e2a;
  color: #fff;
  padding: 3rem 0;
}

.centro-keymex-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

.centro-keymex-media img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
}

/* Titular grande que reemplaza al copy anterior (a pedido del empleador de Edgar, texto de una
   pieza gráfica nueva) — la versión vieja queda comentada arriba, en el HTML, por si la piden de
   vuelta. Dos líneas: una bien marcada y la siguiente más liviana, como en la referencia. */
.centro-keymex-headline {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: 62ch;
}

.centro-keymex-subheadline {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.centro-keymex-copy p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem;
  max-width: 62ch;
}

.centro-keymex-copy p:last-child {
  margin-bottom: 0;
}

/* Venta de franquicias y Reclutamiento — misma estructura para las dos: foto grande arriba con el
   título y los primeros 2 párrafos superpuestos en blanco (degradé oscuro atrás para que se lean
   bien), después los 2 temas siguientes en 2 columnas lado a lado, y el cierre + botón centrados
   abajo de todo. Reclutamiento reutiliza exactamente las mismas clases con el prefijo
   ".recruitment-" en vez de duplicar las reglas. */
.franchise,
.recruitment {
  padding: 3rem 0;
}

.franchise .container,
.recruitment .container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.franchise-hero,
.recruitment-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  border-radius: 28px;
  overflow: hidden;
}

.franchise-hero img,
.recruitment-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.franchise-hero::after,
.recruitment-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 9, 8, 0.6);
}

/* Carrusel de fotos (por ahora solo ".franchise-hero" tiene más de una foto; ".recruitment-hero"
   sigue con una sola imagen fija, así que estas reglas no le cambian nada). El texto superpuesto
   no forma parte del carrusel — queda siempre igual, solo rotan las fotos de fondo. Ver
   "setupHeroCarousels()" en script.js. */
.hero-carousel-slide {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-carousel-slide.is-active {
  opacity: 1;
}

/* Flechas + puntitos van juntos, todo en una sola fila abajo de la foto — así nunca se cruzan
   con el texto superpuesto, sea cual sea su largo (con las flechas a los costados a media altura,
   como en un primer intento, un párrafo largo en mobile terminaba tapándolas). */
.hero-carousel-controls {
  position: absolute;
  z-index: 2;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero-carousel-arrow {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.hero-carousel-arrow:hover,
.hero-carousel-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.55);
}

.hero-carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.hero-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.hero-carousel-dot.is-active {
  background: #fff;
}

.franchise-hero-content,
.recruitment-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem;
  max-width: 640px;
}

/* Deja lugar abajo para no chocar con ".hero-carousel-controls" (flechas + puntitos). */
.franchise-hero-content {
  padding-bottom: 5rem;
}

.franchise-hero-content h2,
.recruitment-hero-content h2 {
  color: #fff;
  margin: 0 0 1.25rem;
}

.franchise-hero-content p,
.recruitment-hero-content p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1rem;
}

.franchise-hero-content p:last-child,
.recruitment-hero-content p:last-child {
  margin-bottom: 0;
}

.franchise-columns,
.recruitment-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.franchise-column h3,
.recruitment-column h3 {
  margin: 0 0 0.65rem;
}

.franchise-column p,
.recruitment-column p {
  margin: 0 0 0.65rem;
  line-height: 1.5;
}

.franchise-column ul,
.recruitment-column ul {
  margin: 0 0 0.65rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

.franchise-column li,
.recruitment-column li {
  color: var(--color-text);
  line-height: 1.4;
}

.franchise-closing,
.recruitment-closing {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.franchise-closing p,
.recruitment-closing p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.section-header {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Encabezado y botón de KEYDESARROLLOS (inicio) centrados — a pedido de Edgar, sin tocar el
   ".hero-actions" que ya usan las tarjetas de desarrollo por dentro (por eso el ">" directo). */
#desarrollos .section-header {
  justify-items: center;
  text-align: center;
  margin-bottom: 0.75rem;
}

#desarrollos > .container > .hero-actions {
  justify-content: center;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  /* Esta regla pisa el font-size de la de arriba pero no traía line-height propio, así que
     quedaba heredando line-height:1.1 (pensado para el font-size más grande de esa otra regla) —
     con letras con tilde mayúscula (ej. "REVOLUCIÓN") eso no daba suficiente aire y el título
     llegaba a superponerse con el texto de abajo. */
  line-height: 1.25;
}

.property-grid,
.about-stats,
.contact-grid {
  display: grid;
  gap: 1.5rem;
}

.property-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Listado en filas (Comprar / Alquilar), estilo keymex.com.ar */
.property-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ------------------------------------------------------------------------
   Formato de fila de propiedades (Comprar / Alquilar), referencia keymex.com.ar.
   Foto grande a la izquierda (con la cantidad de fotos) y a la derecha: título en rojo con el precio
   al lado, ubicación, descripción corta, datos, y abajo la oficina con WhatsApp y "Más detalles".
------------------------------------------------------------------------- */
.property-row2 {
  flex-direction: row;
  align-items: stretch;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

.property-row2 .card-media {
  flex: 0 0 clamp(240px, 37%, 340px);
  min-height: 300px;
  overflow: hidden;
}

/* La foto se apoya en el recuadro (posición absoluta) en vez de empujar su alto: si no, una foto
   vertical (flyer) estiraría toda la carta y dejaría un hueco enorme entre los datos y los botones. */
.property-row2 .card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.card-photo-count {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.card-photo-count svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.row2-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto 1fr auto;
  column-gap: 1.5rem;
  align-content: start;
  grid-template-areas:
    "title price"
    "location location"
    "description description"
    "specs specs"
    ".  ."
    "footer footer";
}

.property-row2 .row2-title {
  grid-area: title;
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--color-accent);
}

.row2-location {
  grid-area: location;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.row2-location svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: var(--color-accent);
}

.row2-price {
  grid-area: price;
  text-align: right;
  white-space: nowrap;
  align-self: start;
}

.row2-price small {
  display: block;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.property-row2 .row2-price strong {
  color: var(--color-text);
  font-size: 1.35rem;
  line-height: 1.2;
  margin-top: 0.1rem;
}

.row2-price--mobile {
  display: none;
}

.property-row2 .row2-description {
  grid-area: description;
  margin: 0.85rem 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row2-specs {
  grid-area: specs;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.row2-specs li + li {
  border-left: 1px solid var(--color-border);
  margin-left: 0.75rem;
  padding-left: 0.75rem;
}

.row2-footer {
  grid-area: footer;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.row2-footer-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* La ficha ya tiene margen propio en .card-actions (para las cartas del inicio): acá no hace falta. */
.row2-footer-actions .card-actions {
  margin-top: 0;
}

.property-row2 .row2-agent {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Más específico que ".property-card img" (styles.css más abajo, pensada para la foto de
   portada), que si no le gana y estira este logo chico a tamaño de foto. */
.property-card .row2-agent-logo {
  width: auto;
  height: 40px;
  object-fit: contain;
}

/* Notebooks chicas (con el filtro al costado la carta queda angosta): el precio baja debajo del título
   para que el título no se parta en muchas líneas. */
@media (min-width: 901px) and (max-width: 1180px) {
  .row2-content {
    grid-template-areas:
      "title title"
      "price price"
      "location location"
      "description description"
      "specs specs"
      ".  ."
      "footer footer";
    grid-template-rows: auto auto auto auto auto 1fr auto;
  }

  .row2-price {
    text-align: left;
    margin-top: 0.4rem;
  }
}

@media (max-width: 640px) {
  .property-row2 {
    flex-direction: column;
  }

  .property-row2 .card-media {
    flex-basis: auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* En el celular el precio va justo debajo del título (es el mismo bloque del escritorio) y no se
     repite en el pie: ahí quedan solo la oficina y los botones. */
  .row2-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "title"
      "price"
      "location"
      "description"
      "specs"
      "footer";
    padding: 1.25rem;
  }

  .row2-price--desktop {
    margin-top: 0.4rem;
    text-align: left;
  }

  .row2-price--mobile {
    display: none;
  }

  .row2-footer {
    flex-wrap: wrap;
  }

  .row2-agent {
    flex: 1 0 100%;
  }

  .row2-footer-actions {
    flex: 1;
    justify-content: space-between;
  }
}

.card-image {
  min-height: 220px;
  background-size: cover;
  background-position: center;
}

.card-media {
  position: relative;
}

.card-status-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.card-status-badge--reservada {
  background: var(--color-accent);
}

.card-status-badge--no_disponible {
  background: rgba(0, 0, 0, 0.78);
}

.card-actions {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  color: #0c0a0a;
  text-decoration: none;
  flex-shrink: 0;
}

.card-whatsapp svg {
  width: 18px;
  height: 18px;
  fill: #0c0a0a;
}

.card-details-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease;
}

.card-details-link:hover {
  background: var(--color-accent-dark);
  color: #fff;
}

.property-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.card-image-1 {
  background-image: linear-gradient(180deg, rgba(171, 46, 41, 0.2), rgba(0, 0, 0, 0.55)),
    url('https://images.unsplash.com/photo-1449844908441-8829872d2607?auto=format&fit=crop&w=900&q=80');
}

.card-image-2 {
  background-image: linear-gradient(180deg, rgba(171, 46, 41, 0.2), rgba(0, 0, 0, 0.55)),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=80');
}

.card-image-3 {
  background-image: linear-gradient(180deg, rgba(171, 46, 41, 0.2), rgba(0, 0, 0, 0.55)),
    url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=900&q=80');
}

.card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tag {
  display: inline-flex;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(171, 46, 41, 0.1);
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.property-card h3 {
  margin: 1rem 0 0.8rem;
  font-size: 1.3rem;
}

.property-card p {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
}

.property-card strong {
  color: var(--color-text);
  font-size: 1.1rem;
  margin-top: auto;
}

.split-header {
  grid-template-columns: minmax(0, 1fr);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.about-list {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}

.about-list li {
  padding-left: 1.25rem;
  position: relative;
  color: var(--color-muted);
}

.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.about-stats {
  grid-template-columns: 1fr;
}

.stat-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 26px;
  padding: 2rem;
  text-align: center;
}

.stat-card span {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-accent);
}

.stat-card p {
  margin: 0.75rem 0 0;
  color: var(--color-muted);
}

.contact-grid {
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  gap: 2rem;
}

.contact-form {
  display: grid;
  gap: 1.25rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 32px;
  padding: 2rem;
}

.contact-form label {
  display: grid;
  gap: 0.65rem;
  color: var(--color-text);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 18px;
  padding: 1rem 1rem;
  background: #fff;
  color: var(--color-text);
}

.contact-form textarea {
  resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(29, 30, 32, 0.4);
}

.form-status {
  min-height: 2.4rem;
  color: var(--color-accent-dark);
  background: rgba(171, 46, 41, 0.08);
  border: 1px solid rgba(171, 46, 41, 0.25);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  display: none;
}

.form-status.visible {
  display: block;
}

.contact-form button {
  width: fit-content;
}

/* Formularios de franquicia (franquicia.html) y reclutamiento (reclutamiento.html) — mismo
   ".contact-form" que el de contacto, pero en una sola columna y con grupos de radio buttons para
   las preguntas de opción múltiple. */
.franchise-form-wrap,
.recruitment-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.contact-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.contact-form legend {
  padding: 0;
  margin: 0 0 0.15rem;
  font-weight: 600;
  color: var(--color-text);
  width: 100%;
}

.form-radio-group label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
  font-weight: 400;
  cursor: pointer;
}

.form-radio-group input[type="radio"],
.form-radio-group input[type="checkbox"] {
  width: auto;
  accent-color: var(--color-accent);
}

.form-inline-other {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1.75rem;
}

.form-inline-other input[type="text"] {
  flex: 1;
}

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--color-muted);
}

/* Buscador rápido en el hero */
.hero-search {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.hero-search select,
.hero-search button {
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: #fff;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-search button {
  background: var(--color-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 10px;
  cursor: pointer;
}

/* Enlaces a los otros sitios de KEYMEX en la región, debajo del buscador del hero. Van directo
   sobre la foto del hero (no sobre la tarjeta clara del buscador), por eso el texto es blanco. */
.hero-region-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
}

.hero-region-links-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-region-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-region-links a {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.hero-region-links a:hover,
.hero-region-links a:focus-visible {
  border-color: #fff;
}

/* Dropdown "píldora" con buscador — reemplaza el <select> nativo en listas filtrables.
   Todas las reglas van con el prefijo ".pill-select" para asegurar más especificidad que
   selectores genéricos como ".hero-search button" (mismo bug de especificidad ya documentado
   en este proyecto para las tarjetas de propiedad). */
.pill-select-native {
  display: none;
}

.pill-select {
  position: relative;
}

.pill-select .pill-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  padding: 7px 12px 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pill-select .pill-select-trigger:hover {
  border-color: #8a8a8a;
  color: #161616;
}

.pill-select-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill-select-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #8a8a8a;
  transition: transform 0.15s ease;
}

.pill-select-chevron svg {
  width: 100%;
  height: 100%;
}

.pill-select .pill-select-trigger[aria-expanded="true"] .pill-select-chevron {
  transform: rotate(180deg);
}

/* Variante "toolbar": ancho al contenido, se resalta en color de marca con un valor elegido.
   width:fit-content + justify-self:start evitan que se estire cuando el padre es un grid/flex
   que por defecto estira sus items (ej. ".filter-field" en desarrollos.html). */
.pill-select--toolbar {
  display: inline-block;
  width: fit-content;
  justify-self: start;
}

.pill-select--toolbar.is-filled .pill-select-trigger {
  background: rgba(171, 46, 41, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pill-select--toolbar .pill-select-panel {
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
}

/* Variante "field": ancho completo, siempre neutro (campos de buscador/formulario) */
.pill-select--field {
  display: block;
}

.pill-select--field .pill-select-trigger {
  width: 100%;
  justify-content: space-between;
  border-radius: 10px;
}

.pill-select--field .pill-select-panel {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}

.pill-select-panel {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  padding: 6px;
  animation: pillSelectIn 0.18s ease-out;
}

@keyframes pillSelectIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pill-select-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: #8a8a8a;
}

.pill-select-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pill-select-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--color-text);
}

.pill-select-search input:focus {
  outline: none;
}

.pill-select-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.pill-select .pill-select-option {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.pill-select .pill-select-option:hover {
  background: var(--color-surface-alt);
  color: #161616;
}

.pill-select .pill-select-option.is-selected {
  background: rgba(171, 46, 41, 0.1);
  color: var(--color-accent);
  font-weight: 700;
}

.pill-select-option.is-selected::after {
  content: "✓";
  margin-left: 0.5rem;
}

.pill-select-empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  color: #8a8a8a;
  font-size: 12px;
}

.filter-field {
  display: grid;
  gap: 0.4rem;
}

/* Título de cada bloque del filtro ("Tipo de propiedad", "Precio (USD)"...): las opciones con casilla
   (.checkbox-option, que también son <label>) llevan su propio estilo más abajo. */
.filter-field > label:not(.checkbox-option) {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.filter-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  background: #fff;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.range-inputs {
  display: flex;
  gap: 0.5rem;
}

.filter-range input[type="number"] {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: #fff;
  color: var(--color-text);
  font-size: 0.9rem;
}

.filter-range input[type="number"]::placeholder {
  color: rgba(29, 30, 32, 0.4);
}

.filter-range input[type="number"]::-webkit-outer-spin-button,
.filter-range input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-range input[type="number"] {
  -moz-appearance: textfield;
}

/* Sidebar de filtros (Comprar/Alquilar) */
.listing-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

.listing-layout > * {
  min-width: 0;
}

/* En desarrollos.html el panel de filtro (con su padding) es más alto que el bloque de
   título+rango que comparte su misma fila — alinearlo abajo acerca el renglón de resultados
   a la primera tarjeta sin tocar la altura del panel ni el espacio debajo de él. */
.listing-layout > .listing-header {
  align-self: end;
}

.filter-toggle {
  display: none;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 1rem;
  cursor: pointer;
}

.filter-panel {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}

.filter-panel .filter-field {
  flex: none;
  min-width: 0;
  width: 100%;
  padding: 1.25rem 0;
}

/* Cada bloque va separado del anterior por una línea fina (salvo el primero que se ve). */
.filter-panel .filter-field + .filter-field {
  border-top: 1px solid var(--color-border);
}

.filter-panel .active-filters[hidden] + .filter-field {
  border-top: 0;
}

/* .filter-field fuerza display:grid y eso le ganaba al atributo hidden: "Filtros aplicados / Limpiar
   filtros" se veía siempre, aun sin ningún filtro elegido. */
.filter-field[hidden] {
  display: none;
}

/* Dropdown del filtro de desarrollos: mismo redondeo de píldora que los demás campos */
.filter-panel .pill-select--field .pill-select-trigger {
  padding: 10px 16px;
  border-radius: 999px;
}

.filter-checkboxes {
  gap: 0.6rem;
}

.filter-options {
  gap: 0.6rem;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.option-btn {
  min-width: 44px;
  height: 40px;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.option-btn:hover {
  background: rgba(0, 0, 0, 0.09);
}

.option-btn.active {
  background: var(--color-accent);
  color: #fff;
}

.filter-group-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.15s ease;
}

.checkbox-option:hover {
  color: var(--color-accent);
}

.checklist {
  display: grid;
  gap: 0.1rem;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* Buscador arriba de un checklist largo (hoy solo Ubicación): filtra las opciones a medida que
   se escribe, sin desmarcar las que queden ocultas (ver enableChecklistSearch en script.js). */
.checklist-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  color: var(--color-muted);
}

.checklist-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.checklist-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: var(--color-text);
}

.checklist-search input:focus {
  outline: none;
}

.checklist-empty {
  margin: 0;
  padding: 0.5rem 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.checklist-count {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.listing-header {
  margin-bottom: 1.5rem;
}

.listing-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.listing-title {
  font-size: 1.6rem;
  margin: 0;
}

/* "Ordenar por:" + selector en forma de píldora roja (Comprar / Alquilar), como en keymex.com.ar */
.listing-sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* El <select> nativo queda oculto: lo reemplaza el dropdown "píldora" (.pill-select, ver enhanceSelect en
   script.js), así que el estilo va sobre su botón. Acá se lo deja con borde y texto rojos. */
.listing-sort .pill-select .pill-select-trigger {
  padding: 9px 14px 9px 18px;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.95rem;
}

.listing-sort .pill-select .pill-select-trigger:hover {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

.listing-sort .pill-select-chevron {
  color: var(--color-accent);
}

.listing-range {
  color: var(--color-muted);
  margin: 0.35rem 0 0;
}

.listing-header select {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 0.65rem 1rem;
  background: #fff;
  color: var(--color-text);
  font-size: 0.9rem;
}

/* "Filtros aplicados": chips removibles + botón para limpiar todo de una */
.active-filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-size: 0.85rem;
  color: var(--color-text);
}

.filter-chip strong {
  font-weight: 700;
}

.filter-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.14);
  color: var(--color-text);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.filter-chip button:hover {
  background: rgba(0, 0, 0, 0.16);
}

.clear-filters-btn {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
}

.clear-filters-btn:hover {
  text-decoration: underline;
}

.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: 24px;
}

/* Paginación (Comprar/Alquilar/Desarrollos, 10 resultados por página) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
}

.pagination-page,
.pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pagination-page:hover,
.pagination-arrow:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.pagination-page.is-active {
  background: var(--color-accent);
  color: #fff;
}

.pagination-arrow {
  font-size: 1.1rem;
}

.pagination-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination-ellipsis {
  color: var(--color-muted);
  padding: 0 0.25rem;
}

/* Tarjetas de propiedad: metadatos y badges */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.tag-operation {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.tag-status {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.tag-coming-soon {
  background: var(--color-panel-dark);
  color: #fff;
}

.location {
  display: block;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
  /* Reserva el alto de 2 líneas siempre, así el resto de la tarjeta (specs, precio, botón) arranca
     a la misma altura en toda la fila del grid, sin importar si la ubicación de esa propiedad
     entra en 1 línea o necesita 2. */
  min-height: 3.1rem;
}

/* Fila de desarrollos destacados (inicio) — a pedido de Edgar, en vez de un grid 2x2 (2 filas) es
   una sola fila deslizable (scroll nativo por touch/trackpad/drag), con 2 flechas opcionales para
   quien no piense en deslizar. Ver ".dev-carousel" y "setupScrollCarousels()" en script.js. No
   confundir con ".development-list", que es el listado propio (con paginación) de
   "desarrollos.html" — esta clase es exclusiva del inicio. */
.development-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.development-grid::-webkit-scrollbar {
  display: none;
}

.development-grid .development-card {
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
  min-width: 280px;
  scroll-snap-align: start;
}

/* Flechas superpuestas sobre el borde de la foto (no al costado de la fila) y puntitos debajo —
   mismo lenguaje visual que el carrusel de fotos de Franquicias (".hero-carousel-arrow"), a pedido
   de Edgar tomando como referencia el carrusel de tarjetas de un portal inmobiliario. */
.dev-carousel {
  position: relative;
}

.dev-carousel-arrow {
  position: absolute;
  top: 130px;
  transform: translateY(-50%);
  z-index: 2;
}

.dev-carousel-prev {
  left: 0.75rem;
}

.dev-carousel-next {
  right: 0.75rem;
}

.dev-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.dev-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.dev-carousel-dot.is-active {
  background: var(--color-accent);
}

.development-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Solo en el carrusel del inicio: el estado (".tag-status") sale del cuerpo de la tarjeta y se
   superpone arriba de la foto, como el badge "Nueva en el Mercado" de la referencia. */
#featured-development-grid .development-card {
  position: relative;
}

.dev-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  margin: 0;
}

.dev-card-badge .tag-status {
  background: var(--color-accent);
  color: #fff;
}

.development-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Menos aire entre título/ubicación/descripción/tags/precio/botón, solo en la tarjeta del
   carrusel del inicio (".development-row" de desarrollos.html no usa ".card-body", así que no le
   cambia nada a esa vista). */
.development-card .card-body h3 {
  margin: 0 0 0.4rem;
}

.development-card .card-body .location {
  margin-top: 0.35rem;
  min-height: 0;
}

.development-card .card-body p {
  margin: 0.5rem 0;
  /* Las descripciones son el texto completo de la oficina (algunas con listas largas de amenities):
     en la carta se cortan a 3 líneas, la ficha del desarrollo las muestra completas. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.development-card .card-body .typology-list {
  margin: 0.5rem 0;
}

/* Empuja precio + botón al piso de la tarjeta, para que queden al mismo nivel entre tarjetas con
   descripciones/tipologías de distinto largo (mismo patrón que ".property-card strong"). */
.development-card .card-body > strong {
  margin-top: auto;
}

.development-card .card-body .hero-actions {
  margin-top: 1rem;
}

/* Listado en filas (Desarrollos), mismo patrón que .property-row */
.development-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.development-card.development-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.development-row img {
  flex: 0 0 260px;
  width: 260px;
  height: auto;
  min-height: 0;
  max-height: none;
}

.development-row .row-info {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.development-row .row-info p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.development-row .row-side {
  flex: 0 0 240px;
  padding: 1.5rem;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  text-align: right;
}

.development-row .row-side strong {
  margin-top: 0;
}

.development-row .row-side .hero-actions {
  width: 100%;
}

.development-row .row-side .button {
  width: 100%;
  border-radius: 14px;
  white-space: normal;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
}

.typology-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
}

.typology-list li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Detalle de desarrollo */
.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover {
  color: var(--color-accent);
}

/* La galería va arriba de todo y después el resto de la info. */
#development-detail > .container,
#property-detail > .container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#development-detail > .container > *,
#property-detail > .container > * {
  min-width: 0;
}

.detail-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  max-width: 20ch;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}

/* Estado del desarrollo ("En construcción"...): antes era un ".eyebrow" arriba del título, ahora
   va debajo como una píldora sólida en el rojo de la marca (mismo color que los botones). */
.development-status-badge {
  display: inline-flex;
  margin: 0 0 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
}

.property-detail-layout,
.development-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.property-detail-sidebar,
.development-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-price-box,
.detail-office-box {
  padding: 1.5rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.detail-box-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.detail-price-box strong {
  display: block;
  font-size: 1.6rem;
  color: var(--color-accent);
}

.detail-office-box strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.office-logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
}

.button-whatsapp {
  background: #25d366;
  color: #fff;
  width: 100%;
}

.development-detail-info p {
  color: var(--color-muted);
}

/* Las descripciones vienen tal cual las escribió la oficina, con saltos de línea y listas: en las
   fichas se respetan esos saltos (en las cartas se muestran corridas y cortadas a pocas líneas). */
#development-description,
#property-description {
  white-space: pre-line;
}

.development-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.development-dates dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0 0 0.35rem;
}

.development-dates dd {
  margin: 0;
  font-weight: 600;
}

.development-video {
  margin-top: 1.5rem;
}

.development-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: #000;
}

/* Galería de fotos de las fichas de propiedad y de desarrollo (ver setupPhotoGallery en script.js):
   mosaico con una foto grande a la izquierda y hasta 4 más chicas a la derecha; al tocar una se abre el
   visor a pantalla completa. El mosaico se reacomoda según cuántas fotos hay (data-count). */
.photo-gallery {
  position: relative;
}

.photo-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: clamp(280px, 40vw, 520px);
  border-radius: 20px;
  overflow: hidden;
}

.photo-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--color-surface-alt);
  cursor: zoom-in;
  overflow: hidden;
}

.photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.photo-tile:hover img,
.photo-tile:focus-visible img {
  transform: scale(1.04);
}

.photo-tile:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* La foto grande ocupa las 2 filas */
.photo-tile:first-child {
  grid-row: 1 / span 2;
}

.photo-mosaic[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Con una sola foto se ve entera (sin recortar): puede ser un flyer vertical o un plano. */
.photo-mosaic[data-count="1"] .photo-tile img {
  object-fit: contain;
}

.photo-mosaic[data-count="2"] {
  grid-template-columns: 2fr 1fr;
}

.photo-mosaic[data-count="2"] .photo-tile:nth-child(2) {
  grid-row: 1 / span 2;
}

.photo-mosaic[data-count="3"] {
  grid-template-columns: 2fr 1fr;
}

.photo-mosaic[data-count="4"] .photo-tile:last-child {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.photo-gallery-all {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--color-accent);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.photo-gallery-all:hover,
.photo-gallery-all:focus-visible {
  transform: translateY(-2px);
}

.photo-gallery-all svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

/* Visor a pantalla completa (uno solo por página, lo crea getPhotoLightbox en script.js) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 16, 0.94);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-image {
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  user-select: none;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-arrow:hover,
.lightbox-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}

.lightbox-arrow {
  top: 50%;
  width: 3rem;
  height: 4rem;
  margin-top: -2rem;
  font-size: 2.6rem;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox--single .lightbox-arrow {
  display: none;
}

.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  /* En el celular se ve solo la foto grande; las demás con "Ver todas las fotos" o al deslizar. */
  .photo-mosaic,
  .photo-mosaic[data-count] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 66vw;
  }

  .photo-tile:not(:first-child) {
    display: none;
  }

  .photo-tile:first-child {
    grid-row: auto;
  }

  .lightbox-arrow {
    width: 2.4rem;
    height: 3.2rem;
    margin-top: -1.6rem;
    font-size: 2rem;
  }
}

/* Política de privacidad: en vez de mandar a privacidad.html (nadie la lee igual, según Edgar), el
   link del footer abre esto — un cuadro chico con todo el texto y scroll interno. El texto está
   embebido en script.js (PRIVACY_POLICY_HTML), no se trae por fetch; privacidad.html tiene una copia
   igual por si alguien llega directo por buscador — si se edita la política, cambiar las dos. */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 15, 16, 0.6);
}

.privacy-modal[hidden] {
  display: none;
}

.privacy-modal-box {
  display: flex;
  flex-direction: column;
  width: min(92vw, 420px);
  max-height: min(80vh, 560px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.privacy-modal-header h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.privacy-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.privacy-modal-close:hover,
.privacy-modal-close:focus-visible {
  background: var(--color-border);
}

.privacy-modal-body {
  overflow-y: auto;
  padding: 0.9rem 1rem 1.1rem;
  /* Era 0.72rem (~11,5 px gris): la ley exige información transparente y consentimiento informado,
     así que se subió a un tamaño legible sin perder el formato compacto. */
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.privacy-modal-body .privacy-modal-date {
  font-style: italic;
}

.privacy-modal-body h2 {
  margin: 1rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}

.privacy-modal-body h2:first-child {
  margin-top: 0;
}

.privacy-modal-body p,
.privacy-modal-body ul {
  margin: 0 0 0.6rem;
}

.privacy-modal-body ul {
  padding-left: 1.1rem;
}

.property-detail-cta {
  margin-top: 1.5rem;
  width: 100%;
}

/* Ficha de propiedad (mismo esquema que keymex.com.ar): a la izquierda el título, la ubicación, las
   etiquetas (tipo, m², dormitorios...), el cuadro de datos y la descripción; a la derecha, a la misma
   altura que el título, el precio y la oficina. El título es el de la carta (tipo + operación + lugar). */
.property-detail-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.property-detail-location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.property-detail-location svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--color-accent);
}

/* Los márgenes de .typology-list y .development-dates se comparten con otras páginas: se ajustan solo acá. */
.property-detail-main .typology-list {
  margin: 1rem 0 0;
}

#property-description {
  margin: 0;
}

/* Botón "Ver el desarrollo ..." de la ficha de propiedad (antes era un texto suelto que no se
   notaba). .button fuerza display:inline-flex y eso le gana al atributo hidden, por eso se repite. */
.property-development-button {
  margin-top: 1.5rem;
}

.property-development-button[hidden] {
  display: none;
}

.units-table-wrapper {
  grid-column: 1 / -1;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.units-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.units-table th,
.units-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  white-space: nowrap;
}

.units-table thead {
  background: var(--color-surface-alt);
}

.units-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.units-table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.units-table td:first-child {
  white-space: normal;
  font-weight: 600;
}

.table-status {
  display: inline-flex;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table-status--disponible {
  background: rgba(15, 107, 63, 0.12);
  color: #0f6b3f;
}

.table-status--reservada {
  background: rgba(171, 46, 41, 0.12);
  color: var(--color-accent);
}

.table-status--no_disponible {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-muted);
}

/* Página institucional (Nosotros) */
.page-hero {
  padding: 3.5rem 0 1rem;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  max-width: 20ch;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}

/* Fondo decorativo sutil para Talentos (reclutamiento.html) y Centros (franquicia.html) — pedido
   puntual del empleador de Edgar para esas 2 páginas de formulario específicamente, no para el
   resto del sitio: nada de fotos ni fondo rojo completo detrás del formulario (le restaría
   protagonismo), solo una curva de marca y 2 íconos lineales muy tenues (~6-7% de opacidad) más
   una palabra grande de fondo, todo detrás del contenido real. ".page-hero"/".contact" son clases
   compartidas con otras páginas (nosotros.html, el #contacto del inicio) — todo lo nuevo va scopeado por
   "body[data-page]" para no tocarlas ahí. */
body[data-page="franquicia"] main,
body[data-page="reclutamiento"] main {
  position: relative;
  overflow: hidden;
  background: #faf8f6;
}

body[data-page="franquicia"] .page-hero,
body[data-page="franquicia"] .contact,
body[data-page="reclutamiento"] .page-hero,
body[data-page="reclutamiento"] .contact {
  position: relative;
  z-index: 1;
}

.form-page-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.form-page-decor-curve {
  position: absolute;
  top: -12%;
  right: -10%;
  width: 34rem;
  height: 34rem;
  color: var(--color-accent);
  opacity: 0.07;
}

.form-page-decor-watermark {
  position: absolute;
  top: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.04;
  white-space: nowrap;
  text-transform: uppercase;
}

.form-page-decor-icon {
  position: absolute;
  width: 13rem;
  height: 13rem;
  color: var(--color-text);
  opacity: 0.06;
}

.form-page-decor-icon--1 {
  top: 6.5rem;
  left: -3rem;
}

.form-page-decor-icon--2 {
  bottom: 6%;
  right: -3rem;
}

body[data-page="franquicia"] .contact-form,
body[data-page="reclutamiento"] .contact-form {
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 9, 8, 0.08);
}

/* Más compacto (a pedido de Edgar, "no mucho pero sí un poco"): menos aire arriba del título,
   entre título/texto/formulario, y entre los campos del formulario. Todo scopeado a estas 2
   páginas — ".page-hero"/".contact"/".contact-form" son compartidas con otras páginas. */
body[data-page="franquicia"] .page-hero,
body[data-page="reclutamiento"] .page-hero {
  padding: 2.5rem 0 0.5rem;
}

body[data-page="franquicia"] .page-hero h1,
body[data-page="reclutamiento"] .page-hero h1 {
  margin-bottom: 0.75rem;
}

body[data-page="franquicia"] .contact,
body[data-page="reclutamiento"] .contact {
  padding: 3rem 0;
}

body[data-page="franquicia"] .contact-form,
body[data-page="reclutamiento"] .contact-form {
  gap: 1rem;
}

body[data-page="franquicia"] .contact-form label,
body[data-page="reclutamiento"] .contact-form label,
body[data-page="franquicia"] .contact-form fieldset,
body[data-page="reclutamiento"] .contact-form fieldset {
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .form-page-decor-watermark {
    top: 2rem;
    font-size: clamp(3.5rem, 20vw, 6rem);
  }

  .form-page-decor-icon {
    width: 9rem;
    height: 9rem;
    opacity: 0.05;
  }

  .form-page-decor-curve {
    width: 22rem;
    height: 22rem;
  }
}

/* Unidades de negocio (Nosotros) */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.unit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 1.75rem;
}

.unit-card h3 {
  margin: 0 0 0.75rem;
  color: var(--color-accent);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.unit-card p {
  margin: 0;
  color: var(--color-muted);
}

/* Equipo (Nosotros) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.team-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.team-card strong {
  display: block;
  margin-bottom: 0.4rem;
}

.team-card span {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Redes sociales */
.social-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Footer: redes + nav secundaria + disclaimer legal */
.footer-social {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 0 1.25rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.footer-nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-nav a:hover {
  color: var(--color-text);
}

.footer-legal {
  color: rgba(29, 30, 32, 0.55);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 1.25rem 0 0;
}

@media (max-width: 900px) {
  :root {
    --header-h: 73px;
  }

  .about-grid,
  .contact-grid,
  .property-grid,
  .unit-grid,
  .listing-layout,
  .property-detail-layout,
  .development-detail-layout,
  .centro-keymex-grid,
  .franchise-columns,
  .recruitment-columns {
    grid-template-columns: 1fr;
  }

  .development-grid .development-card {
    flex-basis: calc((100% - 1.5rem) / 2);
  }

  .franchise-hero-content,
  .recruitment-hero-content {
    max-width: none;
    padding: 2rem 1.5rem;
  }

  .franchise-hero-content {
    padding-bottom: 4rem;
  }

  .property-card.property-row,
  .development-card.development-row {
    flex-direction: column;
  }

  .property-row .card-media,
  .development-row img {
    flex-basis: auto;
    width: 100%;
  }

  .property-row .card-media img {
    height: auto;
    min-height: 220px;
  }

  .development-row .row-side {
    flex-basis: auto;
    border-left: none;
    border-top: 1px solid var(--color-border);
    align-items: stretch;
    text-align: left;
  }


  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-inner {
    flex-wrap: wrap;
  }

  .hero-search {
    grid-template-columns: 1fr;
  }

  .filter-toggle {
    display: block;
  }

  .filter-panel {
    display: none;
  }

  .filter-panel.open {
    display: flex;
  }
}

@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 0 0.25rem;
  }

  .main-nav.open {
    display: flex;
  }

  /* En mobile el dropdown deja de ser un menú flotante (no hay hover) y pasa a ser un acordeón
     dentro de la misma columna del nav, controlado por la clase ".open" que agrega el JS. */
  .nav-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    min-width: 0;
    width: 100%;
    margin-top: 0.5rem;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 1rem;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: flex;
  }

  .header-social {
    position: static;
    transform: none;
  }

  .development-grid .development-card {
    flex-basis: 85%;
  }

  .dev-carousel-arrow {
    display: none;
  }

  .hero-tabs {
    flex-wrap: wrap;
  }

  .button {
    width: 100%;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .listing-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .listing-header select {
    width: 100%;
  }

  .footer-social {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------------------
   Pase de compactación de espaciado + fondos alternados — SOLO Inicio.
   Todo selector de acá abajo usa un id único de index.html (#desarrollos,
   #reclutamiento, #franquicias) o va scopeado con "body[data-page='inicio']"
   para no afectar Franquicias/Reclutamiento/Contacto standalone, que
   reutilizan ".contact"/".contact-form", ni "nosotros.html"/"desarrollo.html",
   que reutilizan ".featured"/".section-header".
------------------------------------------------------------------------- */
#desarrollos {
  padding: 1.75rem 0 2.5rem;
}

#reclutamiento {
  border-top: 1px solid var(--color-border);
}

#franquicias {
  background: #f8eeee;
  border-top: 1px solid var(--color-border);
}

body[data-page="inicio"] #contacto {
  background: var(--color-panel-dark);
  padding: 2.5rem 0;
}

body[data-page="inicio"] #contacto h2 {
  color: #fff;
}

body[data-page="inicio"] #contacto p {
  color: rgba(255, 255, 255, 0.78);
}

body[data-page="inicio"] #contacto .contact-grid {
  gap: 1.5rem;
}

body[data-page="inicio"] #contacto .contact-form {
  padding: 1.5rem;
  gap: 1rem;
}

/* Nosotros: contenido traido del PPT "KEYMEX Caribe Presentacion" (2026-09-23). Todo lo de aca
   abajo es exclusivo de nosotros.html -- no toca ".unit-grid"/".team-grid"/".stat-card" que ya
   existian, solo les agrega variantes nuevas. Se volvio a este enfoque (tarjetas del sitio en
   vez de la imagen de fondo completa por pagina) porque el otro, aunque mas fiel al diseno
   original, generaba desalineaciones entre texto e iconos dificiles de mantener sin romper en
   distintas pantallas -- con componentes normales del sitio (grid + texto real) ese problema no
   existe, ya que no depende de una imagen de proporcion fija.
------------------------------------------------------------------------- */
.country-strip {
  margin: 1.5rem 0 0;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* ".stat-card" ya tiene fondo/borde propios (ver mas arriba) -- se ven bien igual sobre el fondo
   oscuro de ".section-contrast", como una tarjeta clara flotando. */

/* Icono recortado del PPT (circulo de color + glifo blanco, ya viene asi en el archivo) arriba del
   titulo de cada tarjeta -- pilares, unidades de negocio, EXPERTISE, embajadas, tecnologia e
   inversion. */
.card-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.unit-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unit-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Tarjeta sin descripcion (solo icono + titulo) -- fila de conceptos de "Inversion y contexto
   global". Mismo fondo claro que ".unit-card", centrado en vez de alineado a la izquierda. */
.unit-card--plain {
  text-align: center;
}

.unit-card--plain .card-icon {
  margin-left: auto;
  margin-right: auto;
}

.unit-card--plain h3 {
  margin: 0;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.expertise-item h3 {
  margin: 0 0 0.5rem;
  color: var(--color-accent);
  font-size: 1.05rem;
}

.expertise-item p {
  margin: 0;
  color: var(--color-muted);
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.country-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 1.75rem;
}

.country-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  color: var(--color-accent);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.country-card h3 svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--color-accent);
}

.country-card p {
  margin: 0;
  color: var(--color-muted);
}

/* Lista de motivos para aliarse con KEYMEX: mismo espaciado que ".about-list" pero con un
   check en vez de un punto. */
.check-list {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
  max-width: 64ch;
}

.check-list li {
  padding-left: 1.75rem;
  position: relative;
  color: var(--color-muted);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
}

/* Foto circular de cada persona (recortada del PPT), arriba del nombre. */
.team-card-photo {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;
}

/* El bio corto que suman las tarjetas de equipo de esta pagina (ademas de nombre + cargo). */
.team-card p {
  margin: 0.6rem 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Textura "KEYMEX KEYMEX..." recortada del fondo del PPT (ya oscurecida para acercarla al
   --color-panel-dark que usa el resto del sitio en sus secciones de impacto) -- se repite en
   mosaico, asi sirve para secciones de cualquier alto sin estirarse. */
body[data-page="nosotros"] .pattern-bg {
  background-color: var(--color-panel-dark);
  background-image: url("images/nosotros-bg-pattern.jpg");
  background-repeat: repeat;
  background-size: 420px auto;
}

body[data-page="nosotros"] #cta-final h2,
body[data-page="nosotros"] #cta-final .eyebrow {
  color: #fff;
}

body[data-page="nosotros"] #cta-final .section-text {
  color: rgba(255, 255, 255, 0.72);
}

/* Prueba: fondo rojo con letras blancas para el hero de apertura — el título traía un
   max-width:20ch heredado de ".page-hero" (compartida con franquicia.html/reclutamiento.html,
   donde sí hace falta por la decoración de fondo de esas 2 páginas) que acá lo cortaba en 4
   líneas y dejaba un hueco vacío a la derecha del contenedor. */
body[data-page="nosotros"] .page-hero {
  background: var(--color-accent);
  padding: 3.5rem 0;
}

body[data-page="nosotros"] .page-hero h1 {
  max-width: 32ch;
  color: #fff;
}

body[data-page="nosotros"] .page-hero .eyebrow {
  color: #fff;
}

body[data-page="nosotros"] .page-hero .hero-text,
body[data-page="nosotros"] .page-hero .country-strip {
  color: rgba(255, 255, 255, 0.78);
}

/* Prueba: mismo tratamiento fondo rojo / letras blancas para "Propuesta de alianza". */
body[data-page="nosotros"] #propuesta-alianza {
  background: var(--color-accent);
}

body[data-page="nosotros"] #propuesta-alianza h2,
body[data-page="nosotros"] #propuesta-alianza .eyebrow {
  color: #fff;
}

body[data-page="nosotros"] #propuesta-alianza .check-list li,
body[data-page="nosotros"] #propuesta-alianza .section-text {
  color: rgba(255, 255, 255, 0.85);
}

body[data-page="nosotros"] #propuesta-alianza .check-list li::before {
  background: #fff;
}

/* Las 5 personas del directorio entran en una sola fila (la ".team-grid" compartida es de a 4). */
body[data-page="nosotros"] #respaldo-institucional .team-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  body[data-page="nosotros"] #respaldo-institucional .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-page="nosotros"] #respaldo-institucional .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page="nosotros"] #respaldo-institucional .team-grid {
    grid-template-columns: 1fr;
  }
}

/* Pedido puntual: sacar el rotulo chico ("eyebrow") arriba de cada titulo de seccion en nosotros.html. */
body[data-page="nosotros"] .eyebrow {
  display: none;
}

/* Los parrafos de texto (".hero-text"/".section-text") traen un max-width:64ch pensado para
   legibilidad, pero en nosotros.html se veian "cortos" respecto al ancho del contenedor — a
   pedido de Edgar, que ocupen todo el ancho disponible en esta pagina. */
body[data-page="nosotros"] .hero-text,
body[data-page="nosotros"] .section-text {
  max-width: none;
}

@media (max-width: 900px) {
  .stats-grid,
  .expertise-grid,
  .country-grid,
  .unit-grid--2,
  .unit-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .stats-grid,
  .expertise-grid,
  .country-grid,
  .unit-grid--2,
  .unit-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* Antes eran atributos style="..." sueltos en el HTML. Se pasaron a clases para que la
   Content-Security-Policy del .htaccess no tenga que permitir estilos inline ('unsafe-inline').
   Van al final y con doble clase para ganarle a las reglas generales igual que ganaba el inline. */
.contact-details {
  margin-top: 2rem;
  color: var(--color-muted);
}

.option-group.unit-filter-tabs {
  margin-bottom: 1.5rem;
}

.hero-actions.hero-actions--tight {
  margin-top: 1.5rem;
}

.hero-actions.hero-actions--centered {
  justify-content: center;
  margin-top: 1.25rem;
}

.section-text.section-text--spaced {
  margin-top: 1.5rem;
}

.section-text.section-text--soft-light {
  color: rgba(255, 255, 255, 0.72);
}

/* Política de privacidad (privacidad.html) + aviso debajo de cada formulario + link en el footer. */
.legal-section {
  padding: 1rem 0 5rem;
}

.legal-content {
  max-width: 72ch;
  color: var(--color-muted);
  line-height: 1.7;
}

.legal-content h2 {
  color: var(--color-text);
  font-size: 1.25rem;
  margin: 2.25rem 0 0.75rem;
}

.legal-content strong {
  color: var(--color-text);
}

.legal-content ul {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.legal-content a,
.form-consent a,
.footer-privacy-link {
  color: var(--color-accent);
}

/* Casilla de consentimiento de los formularios: la Ley 7593/2025 pide consentimiento expreso, así que
   no alcanza con un aviso — la persona tiene que marcarla (required). Mismo look que los radios. */
.contact-form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  cursor: pointer;
}

.contact-form .form-consent input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  accent-color: var(--color-accent);
}

.footer-privacy-link {
  white-space: nowrap;
}