/* ================= Capa "moderna" (28 oct 2026) =================
   Va ENCIMA de la v1 que le gusta a Joseph: mismos colores, letras, video y textos.
   Solo se activa con <html class="moderno"> (botón Clásica / Moderna mientras es vista previa).
   Cambios: menú flotante tipo píldora, esquinas suaves, entrada animada al bajar, cifras que cuentan,
   cinta de barrios en movimiento, destacadas en carrusel deslizable y foto al pasar por cada barrio. */

/* ---------- Menú flotante ---------- */
.moderno .barra { transition: padding .4s; }
.moderno .barra.solida { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.moderno .barra.solida .envoltura {
  max-width: calc(var(--ancho) - 40px);
  background: rgba(246, 242, 235, .78);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(15, 14, 12, .06);
  border-radius: 999px;
  padding: 10px 14px 10px 26px;
  box-shadow: 0 10px 40px -18px rgba(15, 14, 12, .35);
}
.moderno .barra.solida .logo img { width: 170px; }

/* ---------- Botones y esquinas ---------- */
.moderno .boton { border-radius: 999px; }
.moderno .buscador { border-radius: 20px; overflow: hidden; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.moderno .buscador .boton { border-radius: 14px; margin: 8px; }
.moderno .tarjeta .marco, .moderno .categoria, .moderno .panel, .moderno .nosotros figure img,
.moderno .popup, .moderno .filtros, .moderno .galeria .miniatura, .moderno .contacto-propiedad { border-radius: 18px; }
.moderno .etiqueta { border-radius: 999px; }
.moderno .categorias { gap: 12px; padding: 12px; }

/* ---------- Hero: el título entra línea por línea y la foto se aleja al bajar ---------- */
.moderno .hero .contenido > * { animation: subir 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.moderno .hero .contenido > :nth-child(2) { animation-delay: .12s; }
.moderno .hero .contenido > :nth-child(3) { animation-delay: .24s; }
.moderno .hero .contenido > :nth-child(4) { animation-delay: .36s; }
.moderno .hero .video-fondo { transform: scale(calc(1 + var(--bajado, 0) * .08)); transform-origin: center; }
.moderno .hero .contenido { opacity: calc(1 - var(--bajado, 0) * 1.4); transform: translateY(calc(var(--bajado, 0) * -60px)); }
@keyframes subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- Cinta de barrios ---------- */
.cinta { display: none; }
.moderno .cinta { display: block; overflow: hidden; background: var(--tinta); color: var(--hueso); padding: 18px 0; border-bottom: 1px solid rgba(246, 242, 235, .08); }
.cinta .pista { display: flex; width: max-content; animation: cinta 60s linear infinite; }
.cinta:hover .pista { animation-play-state: paused; }
.cinta a { font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); padding: 0 28px; white-space: nowrap; opacity: .9; transition: color .3s; }
.cinta a:hover { color: var(--arena); }
.cinta a::after { content: "·"; font-style: normal; color: var(--arena); margin-left: 56px; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Destacadas en carrusel ---------- */
.moderno #rejilla {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * 28px) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 6px;
}
.moderno #rejilla::-webkit-scrollbar { display: none; }
.moderno #rejilla .tarjeta { scroll-snap-align: start; }
.moderno #rejilla, .moderno .lista-resenas { cursor: grab; }
.moderno .arrastrando { cursor: grabbing; user-select: none; }
.moderno .arrastrando * { pointer-events: none; }
.flechas { display: none; }
.moderno .flechas { display: flex; gap: 10px; justify-content: flex-end; margin-top: 28px; }
.flechas button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(15, 14, 12, .2); background: transparent;
  font-size: 20px; cursor: pointer; transition: background .3s, color .3s;
}
.flechas button:hover { background: var(--tinta); color: var(--hueso); }
.flechas button:disabled { opacity: .3; cursor: default; background: transparent; color: inherit; }
.moderno .pestanas-prop { border-bottom: 0; gap: 8px; }
.moderno .pestanas-prop button { border: 1px solid rgba(15, 14, 12, .15); border-radius: 999px; padding: 10px 20px; margin: 0; }
.moderno .pestanas-prop button[aria-selected="true"] { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }

/* ---------- Barrios: foto que sigue al cursor ---------- */
.foto-barrio { display: none; }
.moderno .foto-barrio {
  display: block; position: fixed; left: 0; top: 0; z-index: 15; pointer-events: none;
  width: 300px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: var(--tinta-2) center / cover no-repeat;
  opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .3s, transform .3s;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.moderno .foto-barrio.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .moderno .foto-barrio { display: none; } }

/* ---------- Entrada suave de cada bloque al bajar ---------- */
.moderno .aparece { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.moderno .aparece.visto { opacity: 1; transform: none; }

/* ---------- Teléfono ---------- */
@media (max-width: 980px) {
  .moderno #rejilla { grid-auto-columns: 46%; }
  .moderno .categorias { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .moderno #rejilla { grid-auto-columns: 84%; gap: 16px; }
  .moderno .barra.solida .envoltura { padding: 8px 10px 8px 18px; margin-inline: 10px; }
  .moderno .barra.solida .logo img { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .moderno .hero .contenido > *, .cinta .pista { animation: none; }
  .moderno .aparece { opacity: 1; transform: none; }
}

/* ---------- Botón para comparar (solo vista previa, se quita al lanzar) ---------- */
.comparar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  display: flex; padding: 4px; border-radius: 999px; background: rgba(15, 14, 12, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
.comparar button {
  border: 0; background: transparent; color: var(--hueso); padding: 9px 18px; border-radius: 999px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; cursor: pointer;
}
.comparar button[aria-pressed="true"] { background: var(--hueso); color: var(--tinta); }

/* ---------- Reseñas: tarjetas iguales en carrusel ---------- */
.moderno .lista-resenas {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * 28px) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: stretch;
}
.moderno .lista-resenas::-webkit-scrollbar { display: none; }
.moderno .resena, .moderno .resena:first-child {
  grid-column: auto; scroll-snap-align: start;
  background: #fff; border: 1px solid rgba(15, 14, 12, .06); border-radius: 18px;
  padding: 32px 30px 28px; display: flex; flex-direction: column; gap: 18px;
}
.moderno .resena blockquote, .moderno .resena:first-child blockquote {
  font-size: 19px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.moderno .resena.abierta blockquote { -webkit-line-clamp: unset; display: block; }
.moderno .resena footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(15, 14, 12, .08); }
.leer-mas { display: none; }
.moderno .leer-mas {
  display: inline; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--arena-oscura);
}
.moderno .flechas.sin-uso { display: none; }
.moderno .acciones-resenas { margin-top: 28px; }
@media (max-width: 980px) { .moderno .lista-resenas { grid-auto-columns: 46%; } }
@media (max-width: 640px) { .moderno .lista-resenas { grid-auto-columns: 86%; gap: 16px; } }
/* Flechas de reseñas en la misma línea que los botones de Google */
.moderno .lista-resenas + .flechas { margin: 32px 0 -52px auto; width: max-content; position: relative; z-index: 1; }
.moderno .lista-resenas + .flechas.sin-uso + .acciones-resenas { margin-top: 32px; }
.moderno .lista-resenas + .flechas + .acciones-resenas { margin-top: 0; }
@media (max-width: 640px) {
  /* En el teléfono se desliza con el dedo: sin flechas en reseñas */
  .moderno .lista-resenas + .flechas { display: none; }
  .moderno .lista-resenas + .flechas + .acciones-resenas { margin-top: 28px; }
}

/* ---------- Páginas interiores (catálogo, propiedad, quiénes somos) ---------- */
.moderno .barra.fija.solida { background: transparent; }
.moderno .filtros { gap: 18px 20px; }
.moderno .filtros .campo input, .moderno .filtros .campo select { border-radius: 0; }
.moderno .galeria { gap: 10px; }
.moderno .mas-fotos { border-radius: 999px; }
.moderno .mapa { border-radius: 18px; overflow: hidden; }
.moderno .orden select { border-radius: 0; }
.moderno .historia figure img, .moderno .pilar { border-radius: 18px; }
.moderno .pilar { background: #fff; border: 1px solid rgba(15, 14, 12, .06); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.moderno .pilar:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(15, 14, 12, .35); }
.moderno .visor img { border-radius: 10px; }