/* Animaciones */
.card-hover { transition: all .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.card-hover:hover img { transform: scale(1.03); }
.cat-card { transition: all .25s ease; }
.cat-card:hover { transform: translateY(-2px); }
.cat-card img { transition: transform .5s ease; }
.fade-in { animation: fadeIn .5s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.search-glow:focus-within { box-shadow: 0 0 0 3px rgba(242,178,51,.35); }

/* Scrollbar más sutil en sidebar de filtros */
aside form::-webkit-scrollbar { width: 6px; }
aside form::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ─────────────────────────────────────────────────────────────
   Detalle de propiedad (detalle.html)
   ───────────────────────────────────────────────────────────── */

/* Proporción de las fotos de propiedades (16:9). Tiene que coincidir con
   FOTO_RATIO_W / FOTO_RATIO_H de includes/config.php: la ficha (detalle.php) y
   el recortador (recortador.js) la pisan con esos valores; en las páginas
   estáticas (inicio, búsqueda, mis publicaciones) rige este. */
:root { --foto-ratio: 16 / 9; }
.foto-ratio { aspect-ratio: var(--foto-ratio); }

/* Foto principal: con la misma proporción con que se recortan las fotos al
   subirlas (así cover no corta nada), a ancho completo de su columna, centrada.
   Sin fondo gris, sin franjas. La pantalla completa muestra la foto entera.
   width explícito: sin él, un tope de alto se trasladaba al ancho por el
   aspect-ratio y el recuadro quedaba más angosto que la columna. */
.galeria-principal {
    width: 100%;
    aspect-ratio: var(--foto-ratio);
    background: #F5F0E6;
}

/* Tope de seguridad para pantallas bajas: foto + miniaturas nunca pasan el
   alto de la pantalla (misma solución que seralo). Alto del bloque ≈ 0,675 ×
   ancho (foto 16:9 + fila de 5 miniaturas 16:9); 130px = header (65) + margen
   de arriba (24) + aire. A 1366×700 el tope es mayor que la columna 3/5: la
   foto usa todo el ancho. */
@media (min-width: 1024px) {
    .galeria-bloque {
        max-width: calc((100vh - 130px) / 0.675);
        margin-inline: auto;
    }
}

/* Miniaturas con la misma proporción, en cover: fila de 3 (mobile) o 5 (desde 640px); si hay
   más, scroll horizontal. Activa con borde mostaza de la marca, el resto al 70 %.
   El contenedor va posicionado porque detalle.js centra la activa con offsetLeft. */
.thumbs-16x9 {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.thumbs-16x9.hidden { display: none; }
.thumbs-16x9 .thumb-btn {
    flex: 0 0 calc((100% - 16px) / 3);
    aspect-ratio: var(--foto-ratio);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #F5F0E6;
    opacity: .7;
    transition: opacity .15s ease, border-color .15s ease;
}
@media (min-width: 640px) {
    .thumbs-16x9 .thumb-btn { flex-basis: calc((100% - 32px) / 5); }
}
.thumbs-16x9 .thumb-btn:hover { opacity: 1; }
.thumbs-16x9 .thumb-btn.is-activa { opacity: 1; border-color: #F2B233; }

/* Miniatura de video: primer cuadro en cover sobre fondo oscuro y un play
   centrado. El <video> no recibe clicks: los toma el botón. */
.thumb-btn.thumb-video { position: relative; background: #0f172a; }
.thumb-video-cuadro {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.thumb-play svg {
    width: 34px;
    height: 34px;
    padding: 8px 7px 8px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* Flechas (galería y pantalla completa): centradas con su propio transform,
   no con -translate-y-1/2 de Tailwind, para que ninguna regla de :active las
   mueva y el click termine en la foto. */
.galeria-flecha { top: 50%; transform: translateY(-50%); }
.galeria-flecha:active { transform: translateY(calc(-50% + 1px)); }

/* Columna de información sticky debajo del header. Si es más alta que la
   pantalla, detalle.js le pone un top negativo (--sticky-top) para que se
   pegue por abajo: se ve entera al bajar, sin scroll interno. */
@media (min-width: 1024px) {
    .sidebar-sticky {
        position: sticky;
        top: var(--sticky-top, 80px);
    }
}

/* Pantalla completa abierta: sin scroll de fondo */
html.lightbox-abierto { overflow: hidden; }

/* WhatsApp de la ficha: oculto desde el HTML hasta que detalle.js confirma un número válido.
   Va acá y no con la clase "hidden" porque Tailwind (CDN) la genera recién al cargar. */
[data-wa-oculto] { display: none !important; }

/* Barra de contacto fija en mobile: el contenido (y el footer) no quedan tapados */
@media (max-width: 1023.98px) {
    #barraContactoMobile { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    body:has(#barraContactoMobile:not(.hidden)) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
   Identidad Mario Macchione Propiedades
   Mostaza #F2B233 · Carbón #2B2926 · Crema #F5F0E6 · Dorado #B8862B · Rojo #C1121F
   (la paleta de Tailwind está en assets/js/tema.js)
   ───────────────────────────────────────────────────────────── */

/* Logo de texto (header y footer). Si existe assets/img/logo.png, layout.js
   muestra la imagen y saca este bloque. */
.logo-texto { display: inline-flex; flex-direction: column; line-height: 1; font-family: Montserrat, system-ui, sans-serif; white-space: nowrap; }
.logo-texto .logo-nombre { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.12rem; color: #F2B233; }
.logo-texto .logo-sub { font-weight: 600; text-transform: uppercase; letter-spacing: .48em; font-size: .6rem; color: #F5F0E6; margin-top: 5px; padding-top: 4px; border-top: 1px solid #B8862B; }
@media (max-width: 380px) {
    .logo-texto .logo-nombre { font-size: .98rem; }
    .logo-texto .logo-sub { letter-spacing: .38em; }
}

/* Títulos de secciones: Playfair Display; <em> en itálica dorada */
.titulo-seccion { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; color: #2B2926; }
.titulo-seccion em { font-style: italic; color: #B8862B; }

/* Hero del inicio: imagen a todo el ancho (cover) + degradado oscuro de izquierda
   a derecha para leer el texto. Sin imagen queda el fondo carbón de la sección. */
.hero-banner { display: flex; align-items: center; min-height: clamp(440px, 72vh, 680px); }
.hero-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .5s ease; }
.hero-banner-img.is-lista { opacity: 1; }
.hero-banner-degrade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,41,38,.92) 0%, rgba(43,41,38,.72) 38%, rgba(43,41,38,.25) 75%, rgba(43,41,38,.05) 100%); }
/* Vista previa del banner en el panel (admin-banner.html): mismo armado, en chico */
.banner-preview { aspect-ratio: 16 / 7; min-height: 200px; }

@media (max-width: 767.98px) {
    .hero-banner-degrade { background: linear-gradient(90deg, rgba(43,41,38,.9) 0%, rgba(43,41,38,.7) 60%, rgba(43,41,38,.45) 100%); }
}

/* ─────────────────────────────────────────────────────────────
   Banda VENDIDO / ALQUILADO
   Cinta roja en diagonal sobre la esquina superior derecha de la foto, con
   líneas finas blancas en los bordes. El contenedor de la foto tiene que ser
   position: relative + overflow: hidden (la cinta sobresale y se recorta).
   El tamaño es proporcional al ancho de la foto (container query units).
   ───────────────────────────────────────────────────────────── */
.foto-tarjeta, .galeria-principal { container-type: inline-size; }

.banda-estado {
    /* d = distancia del centro de la cinta a la esquina (sobre la diagonal),
       h = alto de la cinta. El largo (2d + 2h) siempre cruza toda la esquina. */
    --d: clamp(44px, 18cqw, 78px);
    --h: clamp(22px, 7.5cqw, 32px);
    --fs: clamp(10px, 3.5cqw, 14px);
    position: absolute;
    z-index: 6;
    top: calc(var(--d) * .7071 - var(--h) / 2);
    right: calc(var(--d) * .7071 - var(--d) - var(--h));
    width: calc(var(--d) * 2 + var(--h) * 2);
    height: var(--h);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C1121F;
    color: #fff;
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--fs);
    letter-spacing: .18em;
    text-indent: .18em; /* compensa el espacio de la última letra: texto centrado */
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    /* líneas blancas finas a 2px de cada borde + sombra */
    box-shadow:
        inset 0 2px 0 #C1121F, inset 0 3px 0 #fff,
        inset 0 -2px 0 #C1121F, inset 0 -3px 0 #fff,
        0 3px 10px rgba(0, 0, 0, .35);
}
/* Más grande sobre la foto principal de la ficha */
.banda-estado--grande {
    --d: clamp(64px, 15cqw, 150px);
    --h: clamp(28px, 6.2cqw, 52px);
    --fs: clamp(13px, 2.9cqw, 22px);
    box-shadow:
        inset 0 3px 0 #C1121F, inset 0 5px 0 #fff,
        inset 0 -3px 0 #C1121F, inset 0 -5px 0 #fff,
        0 4px 14px rgba(0, 0, 0, .4);
}
/* Navegadores sin container queries: tamaño fijo razonable */
@supports not (width: 1cqw) {
    .banda-estado { --d: 56px; --h: 26px; --fs: 11px; }
    .banda-estado--grande { --d: 96px; --h: 38px; --fs: 16px; }
}