/* ==========================================================================
   "Mira Aquí": feed de videos verticales a pantalla completa.

   Pantalla por pantalla, sin scroll dentro de cada una: se pasa de un inmueble
   al siguiente deslizando en vertical. Todo el texto va en blanco sobre el
   video, así que hay un degradado oscuro permanente que garantiza el contraste
   sin importar qué se esté reproduciendo.
   ========================================================================== */

:root {
  --reel-bg: #0b1215;
  --color-primary: #295d6b;
  --color-accent: #ed956f;
  --color-whatsapp: #25d366;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--reel-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: none;
}

/* ---------------- Cabecera fija sobre el video ---------------- */
.reel-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  pointer-events: none;   /* el degradado no debe bloquear el deslizamiento */
}
.reel-header > * { pointer-events: auto; }

.reel-marca { flex-shrink: 0; display: block; }
.reel-marca img {
  height: 26px;
  width: auto;
  display: block;
  /* El logo es oscuro sobre transparente: se aclara para que se lea sobre el
     video, en vez de meterlo en una caja blanca. */
  filter: brightness(0) invert(1);
  opacity: .95;
}

.reel-tabs {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.reel-tabs::-webkit-scrollbar { display: none; }

.reel-tab {
  flex-shrink: 0;
  color: rgba(255,255,255,.65);
  font-size: .92rem;
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.reel-tab.activo {
  color: #fff;
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.reel-lupa {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
}
.reel-lupa svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------------- Feed ---------------- */
.reels-feed {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--reel-bg);
  -webkit-overflow-scrolling: touch;
}

.reel {
  position: relative;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Degradado permanente: arriba para la cabecera, abajo para la ficha. */
.reel-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 22%),
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 30%, transparent 62%);
  pointer-events: none;
}

/* ---------------- Columna de acciones ---------------- */
.reel-actions {
  position: absolute;
  right: .75rem;
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 12.5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.reel-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.reel-accion-texto {
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.reel-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease;
}
.reel-btn:active { transform: scale(.92); }
.reel-btn svg { width: 23px; height: 23px; }

.reel-btn-claro  { background: #fff; color: #212529; }
.reel-btn-oscuro { background: rgba(30,35,40,.62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel-btn-whatsapp { background: var(--color-whatsapp); color: #fff; }

.reel-btn-oscuro svg,
.reel-btn-claro svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-btn-whatsapp svg { fill: currentColor; stroke: none; }

/* Contador de guardados, pegado arriba del corazón */
.reel-contador {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  padding: 0 .28rem;
  background: #212529;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50rem;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* Corazón marcado */
.reel-favorito.es-favorito { color: #e0245e; }
.reel-favorito.es-favorito svg { fill: #e0245e; }

.reel-favorito.late svg { animation: reel-latido .35s ease; }
@keyframes reel-latido {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* ---------------- Tarjeta inferior ---------------- */
.reel-info {
  position: absolute;
  left: 0;
  right: 4.75rem;
  bottom: 0;
  z-index: 2;
  color: #fff;
  padding: 0 1rem max(1.1rem, env(safe-area-inset-bottom));
}

.reel-badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  border-radius: 50rem;
  padding: .25rem .7rem;
  margin-bottom: .5rem;
}
.reel-badge-venta    { background: var(--color-accent); }
.reel-badge-arriendo { background: var(--color-primary); }

.reel-titulo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .3rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.reel-ubicacion {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0 0 .45rem;
  font-size: .87rem;
  color: rgba(255,255,255,.85);
}
.reel-ubicacion svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.reel-precio {
  margin: 0 0 .6rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.reel-precio-mes { font-size: .9rem; font-weight: 500; opacity: .8; }

/* Chips de especificaciones y de amenidades */
.reel-specs,
.reel-amenidades {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}

.reel-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(30,35,40,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50rem;
  padding: .3rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}
.reel-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-chip-mini {
  font-size: .72rem;
  font-weight: 500;
  padding: .22rem .55rem;
  background: rgba(30,35,40,.42);
}

/* Llamado a la acción */
.reel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  margin-top: .35rem;
  padding: .85rem 1rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: .7rem;
  box-shadow: 0 .4rem 1.1rem rgba(237,149,111,.45);
  transition: transform .15s ease, background-color .15s ease;
}
.reel-cta:active { transform: scale(.98); }
.reel-cta:hover { background: #e5875c; color: #fff; }

.reel-pista {
  margin: .5rem 0 0;
  text-align: center;
  font-size: .72rem;
  color: rgba(255,255,255,.6);
}

/* ---------------- Aviso de sonido ---------------- */
/* Reemplaza al botón de altavoz: se toca el video para activar o silenciar. */
.reel-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 50rem;
  animation: reel-toast-fade 1.8s ease forwards;
  pointer-events: none;
}
@keyframes reel-toast-fade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------- Estado vacío ---------------- */
.reels-vacio {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem 1.5rem;
  color: #fff;
  text-align: center;
}
.reels-vacio-logo {
  height: 90px;
  background: #fff;
  border-radius: .75rem;
  padding: .5rem .75rem;
  margin-bottom: .5rem;
}
.reels-vacio h1 { font-size: 1.3rem; margin: 0; }
.reels-vacio p { color: rgba(255,255,255,.7); margin: 0 0 1rem; font-size: .95rem; }
.reels-vacio .reel-cta { width: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---------------- Escritorio: columna centrada tipo teléfono ---------------- */
@media (min-width: 768px) {
  .reel-info { right: 5.5rem; }
  .reel-titulo { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-btn, .reel-cta { transition: none; }
  .reel-favorito.late svg { animation: none; }
}