/* Estilos del plugin Inmotek — Agencia Eder
 *
 * Colores sacados del logo de la agencia: rosa #F5238D y gris #9A9C9B.
 * El gris puro no vale para leer (2,6:1 sobre blanco), así que los textos
 * secundarios usan una versión oscurecida de esa misma familia.
 *
 * Las variables llevan prefijo --inm- para no chocar con las de Divi.
 * Los !important están solo donde Divi impone estilos a cualquier <ul> que
 * salga de un módulo de Texto.
 */

:root {
    /* El rosa del logo es #F5238D. Sobre blanco da 3,8 de contraste y como
       texto se queda corto (el mínimo legible es 4,5), así que hay dos:
       el de marca para rellenos e iconos, y uno un punto más profundo para
       lo que hay que LEER: botones con texto encima y enlaces. Puestos uno
       al lado del otro no se distinguen; leídos, sí. */
    --inm-rosa: #F5238D;
    --inm-rosa-fuerte: #D6007A;
    --inm-rosa-suave: #FDE9F2;
    /* Para bordes sobre el rosa suave: el gris de línea se ve sucio encima. */
    --inm-rosa-linea: #F7CFE1;
    --inm-gris: #9A9C9B;
    --inm-linea: #E0E1E1;
    --inm-fondo: #F5F6F6;
    --inm-tinta: #1B1D1C;
    --inm-apagado: #6B6E6D;
    /* La tipografía de los números y los títulos de sección. Era Georgia y
       desentonaba con el resto de la web, que va en Montserrat. */
    --inm-destacada: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ============ LISTADO ============ */

.inm-listado {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, 1fr);
}

.inm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.inm-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) { .inm-listado { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .inm-listado { grid-template-columns: 1fr; } }

.inm-tarjeta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--inm-linea);
    border-radius: 10px;
}

.inm-tarjeta__foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--inm-fondo);
}

.inm-tarjeta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.inm-tarjeta:hover .inm-tarjeta__foto img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .inm-tarjeta__foto img { transition: none; }
    .inm-tarjeta:hover .inm-tarjeta__foto img { transform: none; }
}

/* Las dos etiquetas van en el rosa de la marca. Se distinguen por la posición
   y por la flecha, no por el color. */
.inm-etiqueta {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--inm-rosa-fuerte);
    border-radius: 2px;
    /* "ALQUILER TEMPORAL" es larga: que no se parta en dos líneas. */
    white-space: nowrap;
}

/* Debajo de la de operación, no al lado: juntas no caben en una tarjeta. */
.inm-etiqueta--tipo {
    top: 42px;
    background: var(--inm-tinta);
}

.inm-etiqueta--baja { left: auto; right: 12px; }
.inm-etiqueta--baja::before { content: "↓"; margin-right: 5px; font-weight: 700; }

.inm-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px 20px 10px;
    flex: 1;
}

.inm-tarjeta__lugar {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inm-apagado);
}

.inm-tarjeta__titulo {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.35;
    font-weight: 600;
    text-wrap: balance;
}

.inm-tarjeta__titulo a { text-decoration: none; color: inherit; }

/* El precio va pegado a la ubicación. Antes llevaba margin-top:auto para que
   los precios quedaran alineados entre tarjetas, pero eso abría huecos de
   hasta 54 px en las de título corto. Ahora el que se estira es la fila de
   datos, así que las tarjetas siguen terminando a la misma altura. */
.inm-tarjeta__precio {
    margin: 0;
    padding-top: 2px;
    font-family: var(--inm-destacada);
    font-weight: 600;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
}

.inm-tarjeta__precio s {
    color: var(--inm-apagado);
    font-size: 15px;
    margin-right: 8px;
}

.inm-tarjeta__datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto 0 0;
    padding-top: 13px;
    font-size: 13.5px;
    color: var(--inm-apagado);
    border-top: 1px solid var(--inm-linea);
}

/* El separador lo ponemos nosotros: la viñeta del tema quedaba pegada. */
.inm-tarjeta__datos li + li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    margin: 0 10px;
    vertical-align: middle;
}

/* Sin fotos: el logo de la agencia, no un hueco gris que parece un error. */
.inm-tarjeta__sinfoto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--inm-fondo);
}

.inm-tarjeta__foto .inm-tarjeta__logo {
    width: 46%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
    opacity: .38;
}

.inm-tarjeta__sinfoto em {
    font-style: normal;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--inm-apagado);
}

/* ============ BUSCADOR Y PAGINACIÓN ============ */

/* El buscador va dentro de una caja rosa suave: seis desplegables sueltos
   sobre blanco flotaban sin agrupar, y encima quedaba mucho aire por encima.
   El rosa fuerte se reserva para el botón, que es lo que hay que pulsar. */
.inm-buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 34px;
    padding: 16px;
    background: var(--inm-rosa-suave);
    border-radius: 14px;
}

@media (max-width: 640px) {
    .inm-buscador { padding: 14px; border-radius: 12px; gap: 14px; }
    /* A lo ancho: así el texto queda centrado y es más fácil de pulsar. */
    .inm-buscador button { flex: 1 1 100%; }
}

/* El ancho base es 132 y no 150 por la caja: sus 32 px de relleno se comen
   sitio, y con 150 el botón Buscar se caía a una segunda fila justo en los
   1366 px de un portátil normal. Con 132 caben los siete en una fila desde
   1280 en adelante, y siguen creciendo hasta llenar la fila. */
.inm-buscador select,
.inm-buscador input {
    flex: 1 1 132px;
    min-width: 120px;
    padding: 11px 12px;
    border: 1px solid var(--inm-rosa-linea);
    border-radius: 8px;
    background: #fff;
}

/* Flecha propia solo en los desplegables: la del navegador se pega al borde
   y no hay forma de separarla. Con appearance:none la dibujamos nosotros. */
.inm-buscador select {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6E6D' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

.inm-buscador button {
    flex: 0 0 auto;
    padding: 11px 28px;
    border: 0;
    border-radius: 8px;
    background: var(--inm-rosa-fuerte);
    color: #fff;
    font-family: var(--inm-destacada);
    font-weight: 600;
    cursor: pointer;
}

.inm-paginacion {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.inm-paginacion .page-numbers {
    font-family: var(--inm-destacada);
    font-weight: 600;
    padding: 9px 15px;
    text-decoration: none;
    color: var(--inm-tinta);
    border: 1px solid var(--inm-linea);
    border-radius: 3px;
}

.inm-paginacion .current {
    background: var(--inm-rosa-fuerte);
    border-color: var(--inm-rosa-fuerte);
    color: #fff;
}

/* ============ GALERÍA ============ */

/* Altura acotada: con proporción libre, en pantallas anchas la primera foto
   se comía media pantalla y había que bajar para ver de qué iba el inmueble.
   
   El grid-template-rows NO es decorativo: sin él la fila se dimensiona sola
   según la foto (900 px de alto), la altura de la caja se ignora y la imagen
   se desborda por encima del título y del precio. Y el overflow es el cinturón
   de seguridad: pase lo que pase dentro, nunca tapa lo que hay debajo. */
.inm-galeria__hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 4px;
    height: clamp(240px, 30vw, 380px);
    overflow: hidden;
}

/* min-height: 0 deja que los hijos se encojan por debajo de su contenido.
   Es el valor que hace falta para que la altura de la rejilla mande. */
.inm-galeria__grande,
.inm-galeria__lado,
.inm-galeria__foto {
    min-height: 0;
}

.inm-galeria__grande { position: relative; height: 100%; }
.inm-galeria__grande .inm-galeria__foto { height: 100%; }

.inm-galeria__lado {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 100%;
}

.inm-galeria__foto {
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--inm-fondo);
}

.inm-galeria__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    .inm-galeria__hero {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr;
        height: clamp(260px, 62vw, 380px);
    }
    .inm-galeria__lado { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

.inm-galeria__mas {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 3px;
    background: rgba(20, 22, 21, .82);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.inm-galeria__mas:hover { background: var(--inm-rosa); }

/* Las fotos restantes viven en el HTML pero no se ven: son las que alimentan
   el visor, y sin JavaScript siguen siendo enlaces que funcionan. */
.inm-galeria__resto { display: none; }

/* ============ TIRA DE DATOS ============ */

/* El mínimo da para la etiqueta más larga ("HABITACIONES"): es una sola
   palabra, no puede partirse, y si no cabe se desborda sobre la de al lado. */
.inm-tira {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    /* Las líneas las hace el hueco de la rejilla sobre el fondo: así salen
       también entre filas cuando la tira se parte en dos. */
    gap: 1px;
    background: var(--inm-linea);
    border: 1px solid var(--inm-linea);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

/* Las dos tiras, una encima de otra y con aire entre ellas */
.inm-tiras {
    display: grid;
    gap: 12px;
    margin: 0 0 22px;
}

.inm-tira div {
    padding: 13px 15px;
    background: var(--inm-fondo);
    min-width: 0;
}

.inm-tira dt {
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--inm-apagado);
    overflow-wrap: anywhere;
}

.inm-tira dd {
    margin: 0;
    font-family: var(--inm-destacada);
    font-weight: 700;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

/* ============ FICHA ============ */

.inm-titulo { margin: 0 0 6px; }
.inm-titulo__lugar { margin: 0 0 14px; font-size: 16px; color: var(--inm-apagado); }

.inm-precio {
    margin: 0 0 6px;
    font-family: var(--inm-destacada);
    font-weight: 600;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
}

.inm-precio s { color: var(--inm-apagado); font-size: 19px; margin-right: 10px; }

.inm-ref {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--inm-apagado);
}

.inm-datos { border-top: 1px solid var(--inm-linea); }

.inm-datos li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--inm-linea);
}

.inm-datos__k { color: var(--inm-apagado); }
.inm-datos__v { font-weight: 600; text-align: right; }

.inm-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 13px 24px;
    font-size: 14.5px;
}

.inm-caracteristicas li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

/* Base para TODOS los iconos del plugin.
   Antes cada sitio tenía su regla y bastaba con añadir un icono nuevo y
   olvidarse de estilarlo para que saliera negro y a 50 píxeles, que es lo
   que pasó con el botón de la galería. Con una regla general, cualquier
   icono que se añada mañana nace bien. */
[class*="inm-"] svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Iconos dibujados a mano e incrustados: ni Font Awesome ni la fuente de
   iconos de Divi, que solo funciona dentro de sus propios módulos. */
.inm-caracteristicas svg,
.inm-documentos__lista svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    fill: none;
    stroke: var(--inm-rosa);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inm-documentos { margin-top: 30px; }
.inm-documentos__titulo { margin: 0 0 14px; }
.inm-documentos__lista { display: grid; gap: 8px; }

.inm-documentos__lista a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--inm-linea);
    border-radius: 8px;
}

.inm-documentos__lista a:hover { border-color: var(--inm-rosa); }

/* Divi pone viñetas y sangría en cualquier <ul> de un módulo de Texto.
   Estas listas son datos, no enumeraciones. */
.inm-tarjeta__datos,
.inm-caracteristicas,
.inm-datos,
.inm-documentos__lista,
.et_pb_text_inner .inm-tarjeta__datos,
.et_pb_text_inner .inm-caracteristicas,
.et_pb_text_inner .inm-datos,
.et_pb_text_inner .inm-documentos__lista {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.inm-tarjeta__datos li,
.inm-caracteristicas li,
.inm-datos li,
.inm-documentos__lista li { list-style: none !important; }

.inm-tarjeta__datos li::marker,
.inm-caracteristicas li::marker,
.inm-datos li::marker,
.inm-documentos__lista li::marker { content: none; }

/* ============ PANEL DE CONTACTO ============ */

/* El panel va sobre fondo BLANCO, no gris: el botón rosa sobre gris rosado
   se apagaba y era justo el que más tiene que verse. */
.inm-panel {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--inm-linea);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 29, 28, .04), 0 12px 28px rgba(27, 29, 28, .07);
}

/* La línea de separación la llevaba la nota de "no incluye impuestos".
   Al quitarla la hereda el precio: sin ella, el precio y los botones quedaban
   pegados en un bloque sin respiro. */
.inm-panel__precio {
    margin: 0 0 20px;
    padding-bottom: 20px;
    font-family: var(--inm-destacada);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--inm-linea);
}

.inm-panel__precio s { display: block; font-size: 17px; color: var(--inm-apagado); }

/* Los tres botones: cada uno con su color y su icono, para que se distingan
   de un vistazo sin tener que leerlos. */
.inm-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.inm-boton:hover { transform: translateY(-1px); }
.inm-boton:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .inm-boton { transition: none; }
    .inm-boton:hover { transform: none; }
}

.inm-boton svg {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inm-boton--principal {
    background: var(--inm-rosa-fuerte);
    border-color: var(--inm-rosa-fuerte);
    color: #fff;
}

.inm-boton--principal:hover { box-shadow: 0 6px 16px rgba(245, 35, 141, .32); }

/* Verde de WhatsApp, pero el oscuro de su marca (#0F7C6F) en vez del claro:
   con el verde brillante, el texto blanco encima no llega al contraste
   mínimo y se lee mal. Con este sí. */
.inm-boton--whatsapp {
    background: #0F7C6F;
    border-color: #0F7C6F;
    color: #fff;
}

.inm-boton--whatsapp:hover { box-shadow: 0 6px 16px rgba(15, 124, 111, .34); }

/* Llamar: en vez de una línea sosa, el número grande, que es lo que se busca
   cuando alguien pulsa ahí. */
.inm-boton--telefono {
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: #fff;
    border-color: var(--inm-tinta);
    color: var(--inm-tinta);
}

.inm-boton--telefono svg { position: absolute; opacity: 0; }

.inm-boton--telefono .inm-boton__etiqueta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inm-apagado);
}

.inm-boton--telefono .inm-boton__numero {
    font-family: var(--inm-destacada);
    font-weight: 600;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
}

.inm-boton--telefono:hover {
    border-color: var(--inm-rosa);
    color: var(--inm-rosa);
}

.inm-boton--telefono:hover .inm-boton__etiqueta { color: var(--inm-rosa); }

.inm-agente {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--inm-linea);
    font-size: 14px;
}

.inm-agente__inicial {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--inm-rosa-suave);
    color: var(--inm-rosa);
    font-weight: 700;
}

.inm-agente strong { display: block; font-weight: 600; }
.inm-agente em { font-style: normal; font-size: 13px; color: var(--inm-apagado); }

/* ============ MAPA, TOUR, CERTIFICADO ============ */

.inm-mapa { width: 100%; }
.inm-mapa iframe { display: block; border-radius: 10px; }
.inm-mapa__aviso { margin-top: 8px; font-size: 13px; color: var(--inm-apagado); }
.inm-tour, .inm-video { margin-top: 26px; }

/* Escala oficial del certificado energético */
.inm-cee {
    display: inline-block;
    min-width: 26px;
    padding: 2px 9px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    border-radius: 2px;
    background: var(--inm-gris);
}

.inm-cee--a { background: #00A651; }
.inm-cee--b { background: #4CB847; }
.inm-cee--c { background: #BFD730; color: #2A2000; }
.inm-cee--d { background: #FFF200; color: #2A2000; }
.inm-cee--e { background: #FDB913; color: #2A2000; }
.inm-cee--f { background: #F37021; }
.inm-cee--g { background: #ED1C24; }

/* ============ FORMULARIO ============ */

/* Al pasar el formulario a lo ancho de la ficha se quedaba estirado de lado
   a lado. Se centra y se le pone un ancho de lectura. */
.inm-ficha__contacto {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* El texto de dentro sí va alineado a la izquierda: centrar etiquetas y
   párrafos largos se lee fatal. */
.inm-ficha__contacto .inm-campos,
.inm-ficha__contacto .inm-campo-ancho,
.inm-ficha__contacto label,
.inm-ficha__contacto .inm-legal { text-align: left; }

.inm-formulario { scroll-margin-top: 90px; }
.inm-formulario label { display: block; font-size: 14px; }

.inm-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) { .inm-campos { grid-template-columns: 1fr; } }

.inm-formulario input[type="text"],
.inm-formulario input[type="tel"],
.inm-formulario input[type="email"],
.inm-formulario textarea {
    width: 100%;
    margin-top: 4px;
    padding: 11px 12px;
    border: 1px solid var(--inm-linea);
    border-radius: 3px;
}

.inm-campo-ancho { margin-top: 14px; }
.inm-privacidad { margin: 16px 0; font-size: 14px; }
.inm-privacidad input { margin-right: 6px; }
/* Interlineado más junto: son cuatro líneas de letra pequeña y con 1.5
   ocupaban más que el propio formulario. Y separado del botón, que antes
   quedaban pegados. */
.inm-legal {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 18px;
    color: var(--inm-apagado);
}

.inm-formulario button {
    padding: 13px 34px;
    border: 0;
    border-radius: 8px;
    background: var(--inm-rosa-fuerte);
    color: #fff;
    font-family: var(--inm-destacada);
    font-weight: 600;
    cursor: pointer;
}

/* La trampa antirrobots existe en el DOM pero no se ve. */
.inm-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* El aviso estaba pegado al título y a la referencia, sin respiro y sin
   jerarquía: la primera frase en negrita y separación arriba y abajo. */
.inm-aviso {
    margin: 0 0 26px;
    padding: 16px 18px;
    border-radius: 10px;
    border-left: 3px solid currentColor;
}

.inm-aviso strong { display: block; margin-bottom: 2px; }
.inm-aviso--ok { background: #E9F6EC; color: #14622C; }
.inm-aviso--error { background: #FDECEA; color: #8A1C13; }

.inm-formulario__titulo { margin: 0 0 6px; }

.inm-formulario__ref {
    margin: 0 0 24px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inm-apagado);
}

.inm-formulario__ref strong { color: var(--inm-tinta); }
.inm-vacio { padding: 40px 0; text-align: center; color: var(--inm-apagado); }

/* Foco visible: quien navega con teclado tiene que saber dónde está. */
.inm-boton:focus-visible,
.inm-galeria__mas:focus-visible,
.inm-buscador button:focus-visible,
.inm-formulario button:focus-visible,
.inm-documentos__lista a:focus-visible {
    outline: 2px solid var(--inm-rosa);
    outline-offset: 2px;
}

/* ============ FICHA COMPLETA ([inmueble_ficha]) ============
   La maquetación de la ficha entera, para no tener que montarla módulo a
   módulo en Divi. Se mete dentro del ancho que le dé la fila de Divi. */

.inm-ficha__galeria { margin-bottom: 30px; }

/* Título y referencia a lo ancho, por encima de las dos columnas */
.inm-ficha__cabecera { margin-bottom: 22px; }
.inm-ficha__cabecera .inm-titulo { margin: 6px 0 0; }

.inm-ficha__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 980px) {
    .inm-ficha__cuerpo { grid-template-columns: 1fr; gap: 34px; }
}

/* El panel se queda quieto donde está. Lo tuve un tiempo fijo, acompañando
   al bajar como hacen los portales, pero seguir a quien está mirando fotos
   resulta molesto: se lee como algo que te persigue.
   Si algún día se quiere recuperar, es una línea: position: sticky; top: 24px. */
.inm-ficha__lateral { position: static; }

/* A lo ancho, bajo las dos columnas: mapa y formulario. */
.inm-ficha__ancho { margin-top: 34px; }

.inm-ficha__seccion {
    margin: 32px 0 14px;
    font-family: var(--inm-destacada);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.01em;
}

/* En la columna estrecha el titular va más pequeño: a 24 px se comía el ancho
   del panel. La clase va repetida para ganar a la regla de arriba, que si no
   empatan en especificidad y manda la que esté más abajo. */
.inm-ficha__seccion--lateral.inm-ficha__seccion--lateral {
    font-size: 18px;
    margin: 26px 0 12px;
}

/* El primero va pegado a la tira de datos, sin el hueco de arriba. */
.inm-ficha__principal > .inm-ficha__seccion:first-of-type { margin-top: 0; }

.inm-ficha .inm-descripcion p { margin: 0 0 18px; max-width: 65ch; }
.inm-ficha .inm-formulario { margin-top: 48px; }

/* ============ ENLACES ============
 *
 * Divi tiñe de azul (#0EA8EA) todo enlace que no traiga color propio, y lo
 * hace con selectores que llevan ID, así que ganan a cualquier clase por
 * específica que sea. Aquí es el único sitio donde el !important está
 * justificado de verdad: sin él, la marca de la agencia pierde contra el
 * azul por defecto del tema.
 */

/* El :not() es imprescindible: sin él esta regla se come también el color de
   los botones y el texto sale rosa sobre rosa. */
.inm-ficha a:not([class*="inm-boton"]):not(.inm-galeria__foto),
.inm-descripcion a,
.inm-formulario a:not([class*="inm-boton"]),
.inm-privacidad a,
.inm-legal a {
    color: var(--inm-rosa-fuerte) !important;
}

.inm-ficha a:not([class*="inm-boton"]):hover,
.inm-descripcion a:hover,
.inm-formulario a:not([class*="inm-boton"]):hover { color: var(--inm-tinta) !important; }

/* Los enlaces que envuelven una caja entera —una foto, una tarjeta, un
   documento— no se tiñen: el color lo pone lo que llevan dentro. */
.inm-tarjeta__foto,
.inm-tarjeta__foto *,
.inm-galeria__foto,
.inm-galeria__foto *,
.inm-tarjeta__titulo a,
.inm-documentos__lista a,
.inm-documentos__lista a *,
.inm-paginacion .page-numbers {
    color: inherit !important;
}

.inm-tarjeta__sinfoto em { color: var(--inm-apagado) !important; }

/* La etiqueta va DENTRO del enlace de la foto, así que la regla de arriba
   (color: inherit para no teñir las cajas) se la llevaba por delante y salía
   en el gris del cuerpo. Sobre rosa, en blanco. */
.inm-tarjeta__foto .inm-etiqueta,
.inm-etiqueta { color: #fff !important; }
.inm-paginacion .current { color: #fff !important; }

/* Doblados con el ancestro para ganar en especificidad a cualquier regla de
   enlaces, la mía incluida. */
.inm-ficha a.inm-boton--principal,
.inm-boton--principal { color: #fff !important; }

.inm-ficha a.inm-boton--whatsapp,
.inm-boton--whatsapp { color: #fff !important; }

.inm-ficha a.inm-boton--telefono,
.inm-boton--telefono { color: var(--inm-tinta) !important; }

.inm-ficha a.inm-boton--telefono:hover,
.inm-boton--telefono:hover { color: var(--inm-rosa) !important; }

.inm-boton--secundario { color: var(--inm-tinta) !important; }
.inm-boton--secundario:hover { color: var(--inm-rosa) !important; }

.inm-buscador button,
.inm-formulario button { color: #fff !important; }

/* El botón de las fotos va sobre la imagen: siempre blanco. */
.inm-galeria__mas { color: #fff !important; }


/* ============ BOTÓN DE VOLVER ============ */

.inm-volver {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 8px 14px 8px 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--inm-tinta) !important;
    border: 1px solid var(--inm-linea);
    border-radius: 3px;
}

.inm-volver:hover {
    border-color: var(--inm-rosa-fuerte);
    color: var(--inm-rosa-fuerte) !important;
}

.inm-volver svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============ VISOR DE FOTOS ============ */

.inm-visor {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 14, 13, .94);
    padding: 20px 68px;
}

.inm-visor.abierto { display: flex; }

.inm-visor__marco {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inm-visor img {
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 2px;
}

.inm-visor__cerrar,
.inm-visor__flecha {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
}

.inm-visor__cerrar:hover,
.inm-visor__flecha:hover { background: var(--inm-rosa-fuerte); }

.inm-visor__cerrar { top: 18px; right: 18px; }
.inm-visor__flecha--atras { left: 14px; }
.inm-visor__flecha--adelante { right: 14px; }

.inm-visor svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inm-visor__cuenta {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-radius: 20px;
}

@media (max-width: 720px) {
    .inm-visor { padding: 12px; }
    .inm-visor__flecha { width: 40px; height: 40px; bottom: 60px; top: auto; }
    .inm-visor__flecha--atras { left: 20px; }
    .inm-visor__flecha--adelante { right: 20px; }
}

.inm-visor__cerrar:focus-visible,
.inm-visor__flecha:focus-visible,
.inm-volver:focus-visible {
    outline: 2px solid var(--inm-rosa);
    outline-offset: 2px;
}

/* Por si algún navegador insiste en pintar las flechas de los numéricos */
.inm-buscador input[type="number"]::-webkit-outer-spin-button,
.inm-buscador input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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


/* El icono del botón de la galería: hereda de la regla general, solo ajusta
   el tamaño al del texto que lo acompaña. */
.inm-galeria__mas svg { width: 17px; height: 17px; }