/* ==========================================================================
   Grosso Inmobiliaria — estilos propios
   Se carga después de Bootstrap y define la identidad visual del sitio.
   Los colores salen del logo: azul para la marca, rojo para los acentos.
   ========================================================================== */

/* Tipografía servida desde el propio dominio. Es una fuente variable, así
   que un único archivo cubre todos los pesos que usa el sitio. El descriptor
   font-display evita que el texto quede invisible mientras carga. */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../vendor/fonts/raleway-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --grosso-primary:       #1c1a6e;
    --grosso-primary-dark:  #12114a;
    --grosso-primary-light: #2e2b9c;
    --grosso-accent:        #b40000;
    --grosso-accent-dark:   #8d0000;
    --grosso-ink:           #1d2233;
    --grosso-muted:         #667085;
    --grosso-line:          #e6e8ef;
    --grosso-surface:       #f6f7fb;
    /* Escala tipográfica.
       Sólo estos siete tamaños se usan en todo el sitio. La regla es que dos
       roles distintos nunca queden a menos de un paso de distancia: si dos
       textos van a verse casi iguales, entonces deben verse exactamente
       iguales y compartir el mismo valor. */
    --txt-xs:    .8rem;     /* etiquetas en versalita */
    --txt-sm:    .9rem;     /* chips, textos de apoyo, datos de ficha */
    --txt-base:  1rem;      /* cuerpo */
    --txt-md:    1.125rem;  /* entrada de prosa y encabezados de tarjeta */
    --txt-xl:    1.375rem;  /* precios y cifras de ficha */
    --txt-lg:    1.75rem;   /* cifras destacadas */

    /* El tamaño de los iconos no pertenece a esta escala: no son texto y se
       dimensionan según el hueco que ocupan. */

    --grosso-radius:        10px;
    --grosso-shadow:        0 2px 4px rgba(18, 17, 74, .04), 0 8px 24px rgba(18, 17, 74, .07);
    --grosso-shadow-lg:     0 8px 16px rgba(18, 17, 74, .08), 0 20px 44px rgba(18, 17, 74, .12);
}

/* El atributo hidden debe ganarle a cualquier display explícito. Sin esto,
   un elemento con display:flex se sigue viendo aunque esté marcado como
   oculto, y los mensajes de estado del formulario aparecen todos juntos. */
[hidden] { display: none !important; }

body {
    font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--grosso-ink);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Bootstrap define el párrafo de apertura con peso 300. Con la tipografía
   servida como fuente variable ese peso se dibuja de verdad, y Raleway en
   light se lee como si fuera otra familia al lado del texto normal. Se
   unifica en el mismo peso que el cuerpo: la jerarquía la da el tamaño. */
.lead {
    font-weight: 400;
    font-size: var(--txt-md);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Bloque de texto corrido

   Un único tratamiento para todo lo que sea prosa. Los párrafos, los
   destacados y los enlaces heredan de acá, de modo que no aparezcan tres
   tamaños distintos dentro de la misma columna de lectura.
   -------------------------------------------------------------------------- */
.prosa {
    max-width: 68ch;
    color: #3a4054;
    font-size: var(--txt-base);
    line-height: 1.8;
}
.prosa > p { margin-bottom: 1.15rem; }
.prosa > p:last-child { margin-bottom: 0; }
.prosa strong { font-weight: 700; color: var(--grosso-ink); }

/* La entrada se distingue por tamaño, nunca por peso ni por color */
.prosa__entrada {
    font-size: var(--txt-md);
    line-height: 1.75;
    color: var(--grosso-ink);
}

/* Subtítulo dentro de la prosa */
.prosa h3, .bloque-titulo {
    font-size: var(--txt-md);
    font-weight: 700;
    color: var(--grosso-primary);
    margin-bottom: .75rem;
}

/* Nota al pie de un bloque.
   Reemplaza a la clase `small` de Bootstrap, que está definida en em y por lo
   tanto cambia de tamaño según el elemento que la contenga: dentro de un
   bloque de .9rem daba 12.6px y dentro de uno de 1rem, 14px. Ese es el origen
   de los tamaños que no encajaban en ningún paso de la escala. */
.nota {
    font-size: var(--txt-sm);
    color: var(--grosso-muted);
}

/* Etiqueta pequeña, siempre igual en todo el sitio */
.etiqueta {
    display: block;
    font-size: var(--txt-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grosso-muted);
    margin-bottom: .6rem;
}

a { color: var(--grosso-primary); }
a:hover { color: var(--grosso-primary-light); }

.text-brand   { color: var(--grosso-primary) !important; }
.text-accent  { color: var(--grosso-accent) !important; }
.bg-brand     { background-color: var(--grosso-primary) !important; }
.bg-surface   { background-color: var(--grosso-surface) !important; }

.btn-brand {
    background-color: var(--grosso-primary);
    border-color: var(--grosso-primary);
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus {
    background-color: var(--grosso-primary-dark);
    border-color: var(--grosso-primary-dark);
    color: #fff;
}
.btn-accent {
    background-color: var(--grosso-accent);
    border-color: var(--grosso-accent);
    color: #fff;
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--grosso-accent-dark);
    border-color: var(--grosso-accent-dark);
    color: #fff;
}
.btn-outline-brand {
    border-color: var(--grosso-primary);
    color: var(--grosso-primary);
    font-weight: 600;
}
.btn-outline-brand:hover {
    background-color: var(--grosso-primary);
    color: #fff;
}

.form-control:focus, .form-select:focus {
    border-color: var(--grosso-primary-light);
    box-shadow: 0 0 0 .2rem rgba(28, 26, 110, .15);
}

/* Título de sección con subrayado corto */
.section-title { margin-bottom: 2rem; }
.section-title h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    margin-bottom: .6rem;
    color: var(--grosso-primary);
}
.section-title p { color: var(--grosso-muted); margin-bottom: 0; }
.section-title::after {
    content: "";
    display: block;
    width: 64px; height: 4px;
    margin-top: .9rem;
    border-radius: 2px;
    background: var(--grosso-accent);
}
.section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.grosso-navbar {
    background: #fff;
    box-shadow: 0 1px 0 var(--grosso-line), 0 4px 18px rgba(18, 17, 74, .05);
    padding-block: .5rem;
}
.grosso-navbar .navbar-brand img {
    height: 58px;
    width: auto;
}
/* El selector incluye .navbar-nav a propósito. Bootstrap fija el relleno de
   estos enlaces con `.navbar-expand-lg .navbar-nav .nav-link`, que tiene tres
   clases; con dos, la regla propia perdía y el relleno quedaba en el valor de
   la biblioteca. */
.grosso-navbar .navbar-nav .nav-link {
    position: relative;
    color: var(--grosso-primary);
    font-weight: 600;
    font-size: var(--txt-sm);
    /* El espacio que liberó el lema al bajar a su propia franja se reparte
       entre los enlaces, para que el menú no se lea como un bloque compacto. */
    padding-inline: 1.4rem;
    white-space: nowrap;
}
.grosso-navbar .nav-link:hover,
.grosso-navbar .nav-link:focus { color: var(--grosso-accent); }
.grosso-navbar .nav-link.active { color: var(--grosso-accent); }

/* Subrayado sólo en el elemento activo, para ubicarse sin recargar el menú */
.grosso-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1.4rem; right: 1.4rem; bottom: .15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grosso-accent);
}
.grosso-navbar .navbar-toggler { border-color: var(--grosso-line); }
.grosso-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(28, 26, 110, .15); }

/* Entre el punto en que el menú se despliega y las pantallas anchas hay un
   tramo donde siete enlaces con el relleno completo no entran junto al logo.
   Ahí se ajustan ambos en lugar de dejar que la fila desborde. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .grosso-navbar .navbar-nav .nav-link { padding-inline: .65rem; }
    .grosso-navbar .nav-link.active::after { left: .65rem; right: .65rem; }
    .grosso-navbar .navbar-brand img { height: 48px; width: auto; }
}

/* --------------------------------------------------------------------------
   Franja del lema
   Va debajo de la barra y no queda fija: así el menú se queda con todo el
   ancho disponible y los enlaces no se amontonan.
   -------------------------------------------------------------------------- */
.grosso-lema {
    background: var(--grosso-primary);
    color: rgba(255, 255, 255, .92);
    font-size: var(--txt-xs);
}
.grosso-lema .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: .45rem;
}
.grosso-lema__texto {
    margin: 0;
    font-weight: 600;
    letter-spacing: .01em;
}
.grosso-lema__contacto { display: flex; gap: 1.2rem; white-space: nowrap; }
.grosso-lema__contacto a {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-weight: 600;
}
.grosso-lema__contacto a:hover { color: #fff; text-decoration: underline; }
.grosso-lema__contacto i { margin-right: .25rem; }

/* Buscador de propiedades */
.grosso-search {
    background: rgba(255, 255, 255, .97);
    border-radius: var(--grosso-radius);
    box-shadow: var(--grosso-shadow-lg);
    padding: 1.4rem;
}
.grosso-search label {
    font-size: var(--txt-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grosso-muted);
    margin-bottom: .3rem;
}

/* --------------------------------------------------------------------------
   Portada con carrusel
   -------------------------------------------------------------------------- */
.hero-carousel { position: relative; background: #16153f; }
.hero-carousel .carousel-item img {
    width: 100%;
    height: 62vh;
    min-height: 420px;
    max-height: 680px;
    object-fit: cover;
}
/* La portada no lleva texto encima, así que tampoco lleva un velo de color
   que tape la fotografía. Sólo se oscurece muy levemente la franja inferior,
   lo justo para que el borde de la tarjeta del buscador se despegue del
   fondo cuando la foto es clara. */
.hero-carousel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(15, 14, 40, .28), rgba(15, 14, 40, 0));
}

/* Los controles quedan sobre la fotografía, así que necesitan fondo propio
   para verse tanto en una imagen clara como en una oscura. */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    z-index: 4;
    width: auto;
    padding: 0 1.25rem;
    opacity: 1;
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: .85rem;
    border-radius: 50%;
    background-color: rgba(15, 14, 40, .45);
    background-size: 42%;
    transition: background-color .2s ease;
}
.hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--grosso-accent);
}

/* El buscador monta sobre el borde inferior de la portada */
.buscador-flotante {
    position: relative;
    z-index: 5;
    margin-top: -58px;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Tarjetas de servicio y banda de cierre
   -------------------------------------------------------------------------- */
.servicio-card {
    background: #fff;
    border: 1px solid var(--grosso-line);
    border-radius: var(--grosso-radius);
    padding: 1.5rem;
    box-shadow: var(--grosso-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.servicio-card:hover { transform: translateY(-3px); box-shadow: var(--grosso-shadow-lg); }
.servicio-card i {
    font-size: 1.9rem;
    color: var(--grosso-accent);
    display: block;
    margin-bottom: .8rem;
}
.servicio-card h3 { font-size: var(--txt-md); margin-bottom: .5rem; color: var(--grosso-primary); }
.servicio-card p  { font-size: var(--txt-sm); color: var(--grosso-muted); }

.cta-band {
    background: var(--grosso-primary);
    color: #fff;
    padding: 2.2rem 0;
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------------------
   Tarjeta de propiedad
   -------------------------------------------------------------------------- */
.property-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--grosso-line);
    border-radius: var(--grosso-radius);
    overflow: hidden;
    box-shadow: var(--grosso-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.property-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--grosso-shadow-lg);
}

/* El contenedor de relación de aspecto estira a tamaño completo todos sus
   hijos directos, así que sólo puede contener la imagen. Las etiquetas van
   en el envoltorio de al lado. */
.property-card__media { position: relative; }
.property-card__img {
    object-fit: cover;
    transition: transform .5s ease;
}
.property-card:hover .property-card__img { transform: scale(1.07); }

.property-card__badges {
    position: absolute;
    top: .7rem; left: .7rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.property-card__badge {
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35rem .6rem;
    border-radius: 6px;
    color: #fff;
    background: var(--grosso-primary);
}
.property-card__badge--op     { background: var(--grosso-accent); }
.property-card__badge--star   { background: #d99400; }

.property-card__price {
    position: absolute;
    bottom: 0; left: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(18, 17, 74, .92), rgba(18, 17, 74, 0));
    color: #fff;
    font-size: var(--txt-md);
    font-weight: 700;
    padding: 1.7rem .9rem .6rem;
    width: 100%;
}

.property-card__body { padding: .9rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.property-card__title {
    font-size: var(--txt-base);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .4rem;
    color: var(--grosso-ink);
    /* Dos líneas como máximo, para que todas las tarjetas midan lo mismo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.property-card__loc {
    font-size: var(--txt-sm);
    color: var(--grosso-muted);
    margin-bottom: .7rem;
}
.property-card__specs {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .35rem .9rem;
    font-size: var(--txt-sm);
    color: var(--grosso-ink);
    border-top: 1px solid var(--grosso-line);
    padding-top: .7rem;
    margin-top: auto;
    /* Reserva el alto de dos líneas. Según los datos cargados, una propiedad
       muestra entre cero y cuatro datos, y sin esta reserva las filas de la
       grilla quedaban con distinta altura entre sí. */
    min-height: 3.5rem;
}
.property-card__specs i { color: var(--grosso-primary); margin-right: .25rem; }
.property-card__link { text-decoration: none; color: inherit; display: block; }
.property-card__link:hover .property-card__title { color: var(--grosso-primary); }

.property-card__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grosso-surface);
    color: var(--grosso-muted);
    font-size: var(--txt-sm);
}

/* --------------------------------------------------------------------------
   Detalle de propiedad
   -------------------------------------------------------------------------- */
.detalle-hero {
    background: var(--grosso-primary);
    color: #fff;
    padding: 2.2rem 0 1.6rem;
}
.detalle-hero h1 { font-size: clamp(1.35rem, 3vw, 2rem); margin-bottom: .5rem; }
.detalle-hero .detalle-loc { color: rgba(255, 255, 255, .85); }
.detalle-price {
    display: inline-block;
    background: var(--grosso-accent);
    color: #fff;
    font-size: var(--txt-xl);
    font-weight: 700;
    padding: .5rem 1.1rem;
    border-radius: 8px;
}

.detalle-card {
    background: #fff;
    border: 1px solid var(--grosso-line);
    border-radius: var(--grosso-radius);
    box-shadow: var(--grosso-shadow);
    margin-bottom: 1.5rem;
}
.detalle-card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--grosso-line);
    /* Mismo tamaño que los subtítulos de la prosa y que las tarjetas de
       servicio: los encabezados de segundo nivel se ven todos iguales. */
    font-size: var(--txt-md);
    font-weight: 700;
    color: var(--grosso-primary);
}
.detalle-card__body { padding: 1.25rem; }

.feature-item {
    text-align: center;
    padding: .9rem .5rem;
    background: var(--grosso-surface);
    border-radius: 8px;
    height: 100%;
}
.feature-item i { font-size: 1.4rem; color: var(--grosso-primary); display: block; margin-bottom: .35rem; }
.feature-item .feature-label { display: block; font-size: var(--txt-xs); color: var(--grosso-muted); text-transform: uppercase; letter-spacing: .03em; }
.feature-item .feature-value { font-weight: 700; font-size: var(--txt-base); }

.amenity-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.amenity-list span {
    font-size: var(--txt-sm);
    background: var(--grosso-surface);
    border: 1px solid var(--grosso-line);
    border-radius: 999px;
    padding: .3rem .8rem;
}
.amenity-list i { color: var(--grosso-primary); margin-right: .3rem; }
.amenity-list .amenity-destacada {
    background: var(--grosso-primary);
    border-color: var(--grosso-primary);
    color: #fff;
    font-weight: 600;
}
.amenity-list .amenity-destacada i { color: #fff; }

.detalle-descripcion { line-height: 1.75; color: #33384a; }

#detalleCarousel .carousel-item img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    background: var(--grosso-surface);
}
#detalleCarousel .carousel-control-prev-icon,
#detalleCarousel .carousel-control-next-icon {
    background-color: rgba(18, 17, 74, .65);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 45%;
}

.contact-sidebar { position: sticky; top: 96px; }

/* --------------------------------------------------------------------------
   Cifras de referencia
   -------------------------------------------------------------------------- */
.datos-clave {
    background: var(--grosso-primary);
    color: #fff;
}
.dato-clave {
    padding: 1.6rem .75rem;
    border-right: 1px solid rgba(255, 255, 255, .14);
}
.dato-clave:last-child { border-right: 0; }
.dato-clave__valor {
    display: block;
    font-size: var(--txt-lg);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.dato-clave__etiqueta {
    display: block;
    margin-top: .35rem;
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Entidades del sector
   -------------------------------------------------------------------------- */
.lista-entidades { list-style: none; margin: 0; padding: 0; }
.lista-entidades li {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--grosso-line);
}
.lista-entidades li:last-child { border-bottom: 0; }
.lista-entidades img {
    flex: 0 0 auto;
    width: 72px;
    height: auto;
    object-fit: contain;
}
.lista-entidades span {
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--grosso-ink);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Datos bancarios
   -------------------------------------------------------------------------- */
.datos-banco dt { color: var(--grosso-muted); font-weight: 600; font-size: var(--txt-sm); }
.datos-banco dd { margin-bottom: .6rem; }
.dato-copiable {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--txt-sm);
    word-break: break-all;
    margin-right: .35rem;
}
.js-copiar { padding: .1rem .4rem; line-height: 1.2; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.wa-fab {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
    text-decoration: none;
    transition: transform .2s ease;
}
.wa-fab:hover { color: #fff; transform: scale(1.07); }

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */
.grosso-footer {
    background: var(--grosso-primary-dark);
    color: rgba(255, 255, 255, .82);
    padding-top: 3rem;
    margin-top: 3rem;
}
.grosso-footer h5 { color: #fff; font-size: var(--txt-base); margin-bottom: 1rem; }
.grosso-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.grosso-footer a:hover { color: #fff; text-decoration: underline; }
.grosso-footer i { color: rgba(255, 255, 255, .6); width: 1.2rem; }
.grosso-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: 1.2rem;
    margin-right: .5rem;
}
.grosso-footer__social a:hover { background: var(--grosso-accent); }
.grosso-footer__memberships img {
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    margin: 0 .4rem .6rem 0;
}
.grosso-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: 2rem;
    padding-block: 1.1rem;
    font-size: var(--txt-sm);
}
.grosso-footer__gvamax { font-weight: 700; color: #fff !important; }
.grosso-footer__gvamax:hover { color: var(--grosso-accent) !important; }

/* --------------------------------------------------------------------------
   Aparición al hacer scroll

   El estado inicial oculto está condicionado a la clase que el propio guion
   coloca en el elemento raíz. Si el guion no llega a ejecutarse, si el
   navegador no soporta el observador, o si un rastreador carga la página sin
   representarla, el contenido se ve igual. Nunca queda texto invisible a la
   espera de un evento de JavaScript que quizá no ocurra.

   Sólo se aplica a bloques estáticos. El contenido que llega por una petición
   asíncrona no lleva data-animate, por el mismo motivo.
   -------------------------------------------------------------------------- */
:root.con-animaciones [data-animate] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
:root.con-animaciones [data-animate].in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    :root.con-animaciones [data-animate] { opacity: 1; transform: none; transition: none; }
    .property-card, .property-card__img, .wa-fab { transition: none; }
    .property-card:hover { transform: none; }
    .property-card:hover .property-card__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Ajustes para pantallas chicas
   Bootstrap acumula espacio lateral en tres capas: el contenedor, el canal
   de la fila y el relleno de cada columna. Tocar sólo el contenedor deja el
   doble del margen buscado, así que se neutralizan las tres.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .row { --bs-gutter-x: .75rem; }

    .grosso-navbar .navbar-brand img { height: 46px; width: auto; }
    .grosso-navbar .navbar-nav .nav-link { padding-inline: 0; padding-block: .5rem; }
    .grosso-navbar .nav-link.active::after { left: 0; right: auto; width: 28px; }

    /* En pantallas chicas el lema se apila y el contacto se reparte */
    .grosso-lema .container {
        flex-direction: column;
        align-items: flex-start;
        gap: .3rem;
        padding-block: .55rem;
    }
    .grosso-lema { font-size: var(--txt-xs); }
    .grosso-lema__contacto { gap: 1rem; }

    .grosso-search { padding: 1rem; }

    /* Las cifras pasan a dos columnas, así que la separación cambia de
       vertical a una retícula */
    .dato-clave { padding: 1.1rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .dato-clave:nth-child(even) { border-right: 0; }
    .dato-clave:nth-last-child(-n+2) { border-bottom: 0; }
    .dato-clave__valor { font-size: var(--txt-xl); }
    .dato-clave__etiqueta { font-size: var(--txt-xs); }

    /* La medida de lectura la fija el ancho de la pantalla; la entrada
       conserva su tamaño para no introducir un paso fuera de la escala. */
    .prosa { max-width: none; }

    .hero-carousel .carousel-item img { height: 48vh; min-height: 280px; }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next { display: none; }
    .buscador-flotante { margin-top: -30px; }

    /* La columna de contacto va al final: primero el visitante mira la
       propiedad y recién después decide consultar. */
    .contact-sidebar { position: static; top: auto; }

    #detalleCarousel .carousel-item img { height: 260px; }
    .detalle-card__body { padding: 1rem; }
    .feature-item { padding: .7rem .4rem; }
    .property-card__price { font-size: var(--txt-base); }
}