/*
 * Estilos base del plugin.
 *
 * Hasta 0.12.0 esta hoja no fijaba tipografía ni tamaños a propósito: el sitio
 * es del cliente y su tema mandaba. El resultado es que el listado se ve como
 * el tema que le toque —bien en un sitio, como una tabla en el siguiente— y a
 * eso se debe la queja de que la plantilla anterior «se ve mejor».
 *
 * Desde 0.13.0 el plugin fija su TIPOGRAFÍA y su ESCALA, y sigue tomando
 * prestado el COLOR: los neutrales se derivan de `currentColor`, así que
 * funcionan en un tema claro y en uno oscuro sin conocer su paleta, y ninguna
 * marca choca con la del cliente. La identidad la ponen la familia, los pesos
 * y el ritmo; el tono lo sigue poniendo el sitio.
 *
 * Todo pasa por variables `--genioi-*` declaradas abajo, así que un sitio
 * puede cambiar la familia o los neutrales sin tocar una sola regla:
 *     :root { --genioi-fuente: "Su Fuente", sans-serif; }

 * Va en `:root` y no en `.genioi-portal`: el buscador del hero y los widgets se
 * insertan en el contenido del tema y nunca pasan por ese envoltorio, así que
 * un override ahí no los alcanzaría —que es justo la razón de que la familia se
 * aplique por `[class*="genioi-portal"]`—.
 *
 * Para quitar la hoja por completo:
 *     add_filter( 'genioi_portal_enqueue_styles', '__return_false' );
 *
 * Seis valores se redondearon al sistema al darles nombre: bordes 10%→12% y
 * 30%→25%, fondos 3%→4%, 6%→8% y 10%→8%, y el título de tarjeta
 * 1.05rem→1.0625rem. El resto es idéntico.
 *
 * Nota honesta sobre `rem`: la escala sigue en `rem` porque es lo que respeta
 * el tamaño de letra que el visitante configuró en su navegador. Un tema que
 * ponga `html { font-size: 13px }` encoge todo el plugin con él; corregirlo es
 * redefinir las variables de escala, no cambiar la hoja.
 */

:root {
    /* ── Tipografía ───────────────────────────────────────────────────── */
    --genioi-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
    --genioi-fuente-titulos: var(--genioi-fuente);

    /* Escala. Los tamaños ya estaban casi todos aquí; lo que faltaba era
       que tuvieran nombre y un solo lugar donde cambiarlos. */
    --genioi-t-xs: .75rem;
    --genioi-t-s: .8125rem;
    --genioi-t-m: .875rem;
    --genioi-t-base: .9375rem;
    --genioi-t-l: 1rem;
    --genioi-t-xl: 1.0625rem;
    --genioi-t-2xl: 1.25rem;
    --genioi-t-3xl: 1.75rem;

    --genioi-peso-medio: 600;
    --genioi-peso-fuerte: 700;

    /* ── Neutrales ────────────────────────────────────────────────────── */
    /* Derivados del color de texto del tema: el plugin no necesita saber si
       el sitio es claro u oscuro, ni imponerle una paleta que no es suya. */
    --genioi-linea-sutil: color-mix(in srgb, currentColor 12%, transparent);
    --genioi-linea: color-mix(in srgb, currentColor 15%, transparent);
    --genioi-linea-media: color-mix(in srgb, currentColor 20%, transparent);
    --genioi-linea-fuerte: color-mix(in srgb, currentColor 25%, transparent);
    --genioi-relleno-sutil: color-mix(in srgb, currentColor 4%, transparent);
    --genioi-relleno: color-mix(in srgb, currentColor 8%, transparent);
    --genioi-foco: color-mix(in srgb, currentColor 45%, transparent);

    /* ── Formas ───────────────────────────────────────────────────────── */
    --genioi-radio-chico: .375rem;
    --genioi-radio: .5rem;
    --genioi-radio-grande: .75rem;
    --genioi-radio-pildora: 999px;
}

/* La familia se pone en TODO lo que pinta el plugin, no sólo en el envoltorio
   de página: los atajos (`[genioi_search_form]` en el hero, una rejilla dentro
   de un widget) se insertan en el contenido del tema y nunca pasan por
   `.genioi-portal`. Para un descendiente el valor ya heredado es el mismo, así
   que repetirlo no cuesta nada. */
[class*="genioi-portal"] {
    font-family: var(--genioi-fuente);
}

/* Texto que sólo existe para quien no ve la pantalla. No se usa `display:none`
   ni `visibility:hidden`: los dos lo sacan también del árbol de accesibilidad,
   que es justo lo contrario de lo que se busca. */
.genioi-portal__solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Heredar NO basta, y esta es la parte que importa. Los encabezados de la
   tarjeta y de la ficha, y los campos del buscador, no llevan clase propia
   —son `<h2>`, `<h3>`, `<input>`— y cualquier regla del tema que apunte al
   elemento le gana a lo heredado:

     - tema de bloques: `theme.json` genera `h1,h2,h3…{font-family}`
       (Twenty Twenty-Four los pone en Cardo, una serif);
     - Elementor: el kit del sitio emite `.elementor-kit-N h2{…}` y
       `.elementor-kit-N input:not([type=button]){…}`;
     - clásicos (Astra, GeneratePress, Kadence) con fuente de encabezados.

   Sin esto el resultado es PEOR que antes del cambio: el precio saldría en la
   fuente del plugin y el título de la misma tarjeta en la del tema. Antes al
   menos era coherente.

   El selector va duplicado a propósito. `[class*=…] :is(h2)` pesa 0,1,1, lo
   mismo que `.elementor-kit-N h2`, y un empate lo decide el orden en que el
   sitio imprime las hojas —o sea, la suerte—. Repetir el atributo sube a 0,2,1
   y gana de forma determinista sin recurrir a `!important`, que además le
   quitaría al cliente la posibilidad de imponer la suya. */
[class*="genioi-portal"][class*="genioi-portal"] :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--genioi-fuente-titulos);
}

[class*="genioi-portal"][class*="genioi-portal"] :is(input, select, textarea, button, label, legend) {
    font-family: var(--genioi-fuente);
}

.genioi-portal {
    /* Los temas de bloques constriñen su contenido con envoltorios propios que
       estas plantillas no tienen: sin esto la página sale de borde a borde. */
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding-inline: 1rem;
    /* El offset lo pone el sitio cuando su tema tiene cabecera fija; por
       defecto es cero y no cambia nada. */
    padding-block: calc(2rem + var(--genioi-portal-offset, 0px)) 2rem;
}

.genioi-portal__grid {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* ── Directorio de asesores ────────────────────────────────────────────── */

/* El directorio NO tenía ni una regla propia: `grid--agents` no existía en
   esta hoja, así que sesenta personas heredaban la rejilla de las propiedades
   —pensada para una foto apaisada de 17rem— y salían como una lista de
   nombres sueltos. Una ficha de persona es un retrato cuadrado y un nombre:
   cabe en mucho menos, y con columnas estrechas se ven más de un vistazo. */
.genioi-portal__grid--agents {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 1rem;
}

.genioi-portal__card--agent {
    align-items: center;
    padding: 1.25rem 1rem;
    text-align: center;
}

/* El enlace envuelve foto, nombre y oficina: sin esto era una columna
   desalineada dentro de una tarjeta centrada. */
.genioi-portal__card--agent > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

/* Retrato redondo y RECORTADO —`cover`, no `contain`—. La regla general de
   `card--agent img` muestra el retrato entero con relleno, que es lo correcto
   para el logotipo de una oficina pero deja a las personas flotando con
   bandas a los lados. Va después, así que gana sin subir especificidad. */
.genioi-portal__card--agent img,
.genioi-portal__avatar-fallback {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    object-fit: cover;
    padding: 0;
    background: var(--genioi-relleno);
}

/* Las iniciales, cuando no hay foto: mismo hueco y misma forma, para que la
   rejilla no se desalinee entre quien tiene retrato y quien no. */
.genioi-portal__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--genioi-t-2xl);
    font-weight: var(--genioi-peso-fuerte);
    letter-spacing: .02em;
    opacity: .55;
}

.genioi-portal__card--agent h2 {
    margin: 0;
    font-size: var(--genioi-t-base);
    line-height: 1.3;
}

/* La oficina es contexto, no titular: se lee al buscar «¿cuál de las tres?»,
   no antes que el nombre. */
.genioi-portal__card--agent .genioi-portal__office {
    margin: 0;
    font-size: var(--genioi-t-s);
    opacity: .7;
    text-wrap: balance;
}

.genioi-portal__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio);
    overflow: hidden;
    transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}

/* La tarjeta se levanta al pasar por encima. No es adorno: en una rejilla de
   doce, es lo que dice cuál está bajo el cursor —y sobre todo, que la tarjeta
   RESPONDE—. La sombra sale de `currentColor`, así que no impone un gris que
   pelee con el fondo del tema. */
.genioi-portal__card:hover,
.genioi-portal__card:focus-within {
    transform: translateY(-2px);
    border-color: var(--genioi-linea-fuerte);
    box-shadow: 0 12px 28px -14px color-mix(in srgb, currentColor 45%, transparent);
}

/* El foco del teclado en la TARJETA, no en el enlace: el enlace envuelve la
   foto y el cuerpo, así que su contorno se dibujaba partido y por debajo del
   recorte del contenedor. */
.genioi-portal__card:focus-within {
    outline: 2px solid var(--genioi-foco);
    outline-offset: 2px;
}

.genioi-portal__card a:focus-visible {
    outline: none;
}

/* Un acercamiento muy corto sobre la foto: lo suficiente para que la tarjeta
   se sienta viva, no tanto como para que se lea como animación. */
.genioi-galeria .genioi-portal__card:hover .genioi-portal__card-foto.is-activa {
    transform: scale(1.03);
}

.genioi-galeria .genioi-portal__card-media .genioi-portal__card-foto {
    transition: opacity .16s linear, transform .45s cubic-bezier(.2, .7, .3, 1);
}

.genioi-portal__card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.genioi-portal__card img {
    /* La relación fija evita que la rejilla salte mientras cargan las fotos:
       las de un inventario real vienen en proporciones distintas. */
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.genioi-portal__card h2,
.genioi-portal__card h3 {
    margin: 0;
    padding-inline: .75rem;
    font-size: var(--genioi-t-xl);
    line-height: 1.3;
}

.genioi-portal__card p,
.genioi-portal__price,
.genioi-portal__office,
.genioi-portal__office-place,
.genioi-portal__office-count {
    margin: 0;
    padding-inline: .75rem;
}

.genioi-portal__card > form {
    padding: .75rem;
}

.genioi-portal__price {
    font-weight: var(--genioi-peso-fuerte);
    /* Cifras de ancho fijo: en una rejilla los precios quedan alineados en
       columna y se comparan de un vistazo, en vez de bailar según lleven
       unos o cincos. Lo mismo para los metros y las recámaras. */
    font-variant-numeric: tabular-nums;
}

/* Sólo los atributos: la ubicación es colonia y municipio, texto sin cifras. */
.genioi-portal__specs {
    font-variant-numeric: tabular-nums;
}

.genioi-portal__card--agent img,
.genioi-portal__card--office img {
    /* Retratos y logotipos no se recortan como una fachada: se muestran
       enteros. Un logo cortado a la mitad es peor que un logo pequeño. */
    aspect-ratio: 1;
    object-fit: contain;
    padding: .75rem;
}

/* ── Formularios y filtros ─────────────────────────────────────────────── */

.genioi-portal__form p,
.genioi-portal__search-form p {
    margin: 0 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.genioi-portal__form input:not([type="hidden"]),
.genioi-portal__form select,
.genioi-portal__form textarea,
.genioi-portal__search-form input,
.genioi-portal__search-form select {
    padding: .5rem .625rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-chico);
    background: transparent;
    color: inherit;
    font: inherit;
    max-width: 100%;
}

.genioi-portal__search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin-bottom: 2rem;
    padding: 1.25rem;
    /* Superficie apenas levantada en vez de una caja con marco: el borde duro
       alrededor de una rejilla de campos cuadrados se leía como formulario de
       trámite. El tinte sale de `currentColor`, así que sigue funcionando en un
       tema oscuro sin saber nada de su paleta. */
    border: 1px solid var(--genioi-linea-sutil);
    border-radius: var(--genioi-radio-grande);
    background: var(--genioi-relleno-sutil);
}

.genioi-portal__search-form input,
.genioi-portal__search-form select {
    border-radius: var(--genioi-radio);
    background: var(--genioi-relleno-sutil);
}

/* ── Cantidades como botones ───────────────────────────────────────────── */

/* Son `radio` de verdad: el formulario funciona sin JavaScript y manda el
   mismo parámetro de siempre. Lo que cambia es que se tocan en vez de
   escribirse. */
.genioi-portal__pills {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.genioi-portal__pills legend {
    padding: 0;
    margin-bottom: .375rem;
    font-size: var(--genioi-t-m);
}

.genioi-portal__pills-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
}

/* El `input` no se esconde con `display:none`: eso lo saca del orden de
   tabulación y del árbol de accesibilidad, y el grupo deja de recorrerse con
   las flechas. Se tapa con la etiqueta, que es lo que se ve. */
.genioi-portal__pills input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.genioi-portal__pills label {
    display: inline-flex;
    align-items: center;
    padding: .3125rem .625rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-s);
    line-height: 1.4;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .16s ease, border-color .16s ease;
}

.genioi-portal__pills label:hover {
    border-color: currentColor;
}

/* La elegida NO se invierte, y la razón vale la pena anotarla: `currentColor`
   en `background` resuelve contra el `color` DEL PROPIO ELEMENTO, así que al
   poner `color: Canvas` en la misma regla el fondo pasaba a ser blanco también
   y la píldora salía como una caja vacía.

   Así que se tiñe y se refuerza el borde en vez de invertir: el texto conserva
   la tinta del tema, funciona igual en claro y en oscuro, y no depende de
   colores de sistema que un tema oscuro sobre un sistema claro contradice. */
.genioi-portal__pills input:checked + label {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: currentColor;
    /* Un anillo interior: el borde se lee al doble sin mover el tamaño de la
       píldora ni empujar a las de al lado. */
    box-shadow: inset 0 0 0 1px currentColor;
    font-weight: var(--genioi-peso-medio);
}

.genioi-portal__pills input:focus-visible + label {
    outline: 2px solid var(--genioi-foco);
    outline-offset: 2px;
}

.genioi-portal__search-form input:focus,
.genioi-portal__search-form select:focus {
    outline: 2px solid var(--genioi-foco);
    outline-offset: 1px;
}

/* El honeypot: fuera de la vista pero accesible para quien lo llene por error
   —un gestor de contraseñas—, y anunciado como no requerido a los lectores de
   pantalla. `display:none` lo escondería también de los bots que lo detectan. */
.genioi-portal__hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Ficha, oficina y avisos ───────────────────────────────────────────── */

.genioi-portal__avatar,
.genioi-portal__office-logo {
    max-width: 12rem;
    height: auto;
}

.genioi-portal__hours {
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.genioi-portal__hours th,
.genioi-portal__hours td {
    text-align: start;
    padding: .25rem 1.5rem .25rem 0;
    font-weight: inherit;
}

.genioi-portal__contact,
.genioi-portal__alerts {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.genioi-portal__alert {
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio);
    padding: 1rem;
}

.genioi-portal__alert h3 {
    margin: 0 0 .25rem;
}

/* Las acciones de una alerta son formularios independientes —cada una es un
   POST distinto— y sin esto se apilarían una debajo de otra. */
.genioi-portal__alert .genioi-portal__form {
    display: inline-block;
    margin-inline-end: .5rem;
}

.genioi-portal__notice {
    padding: .75rem 1rem;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-chico);
}

/* Error y éxito se distinguían sólo por el texto: «No pudimos iniciar tu
   sesión» salía igual que «Sesión iniciada». Un borde de color a la izquierda,
   y NO un fondo: sobre un tema oscuro un fondo claro rompería el contraste del
   texto, que hereda el color del tema. */
.genioi-portal__notice--error {
    border-left: 4px solid #c62828;
}

.genioi-portal__notice--success {
    border-left: 4px solid #2e7d32;
}

.genioi-portal__map {
    height: 24rem;
    margin-bottom: 2rem;
    border-radius: var(--genioi-radio);
}

.genioi-portal__pagination {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-block: 1rem 2rem;
}

/* ── Galería de la ficha ───────────────────────────────────────────────── */

/* La galería es foto grande + tira de miniaturas. Antes era una rejilla de
   fotos sueltas; esas reglas ya no corresponden al marcado y hacían que la
   principal se encogiera al ancho de una columna de 15rem. */
.genioi-portal__gallery {
    margin-bottom: 1.5rem;
}

/* Los huecos de agenda son botones, no una lista vertical. */
.genioi-portal__slots {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.genioi-portal__count {
    margin-bottom: 1rem;
}

.genioi-portal__office-address,
.genioi-portal__alert-criteria,
.genioi-portal__alert-meta,
.genioi-portal__hours-lunch {
    margin: 0 0 .5rem;
}

/* ── Ficha: galería ────────────────────────────────────────────────────── */

.genioi-portal__gallery-main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Con el ancho completo de la página, 16/10 deja la foto tan alta que el
       título y el precio quedan fuera de la primera pantalla. */
    max-height: min(60vh, 34rem);
    object-fit: cover;
    border-radius: var(--genioi-radio);
    display: block;
}

.genioi-portal__gallery-main {
    margin: 0;
}

.genioi-portal__gallery-thumbs {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0 0 .25rem;
    display: flex;
    gap: .5rem;
    /* Tira horizontal en vez de rejilla: veinticinco fotos apiladas empujaban
       el precio y los formularios fuera de la primera pantalla. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.genioi-portal__gallery-thumbs li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.genioi-portal__gallery-thumbs img {
    width: 7rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--genioi-radio-chico);
    display: block;
}

.genioi-portal__gallery-thumbs a[aria-current="true"] img {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Ficha: dos columnas ───────────────────────────────────────────────── */

.genioi-portal__detail {
    display: grid;
    gap: 2.5rem;
    margin-block: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
    .genioi-portal__detail {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }

    .genioi-portal__detail-aside {
        /* Lo accionable acompaña al visitante mientras lee la descripción. */
        position: sticky;
        top: 1.5rem;
        align-self: start;
    }
}

.genioi-portal__detail-main > h1 {
    margin-block: 0 .25rem;
}

.genioi-portal__detail-address {
    margin-block: 0 .75rem;
    opacity: .75;
}

.genioi-portal__price--detail {
    font-size: var(--genioi-t-3xl);
    padding-inline: 0;
    margin-block: 0 1rem;
}

.genioi-portal__stats {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.genioi-portal__stats li {
    padding: .375rem .75rem;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-base);
}

/* La ficha y la tarjeta comparten la clase `__specs` pero NO el elemento: la
   ficha pinta un `<dl>` de pares dato-valor y la tarjeta un `<ul>` de atributos
   con ícono. Las tres reglas tenían el mismo selector, así que la última —la de
   la tarjeta— ganaba en ambas y la rejilla de la ficha nunca se aplicaba: sus
   características salían en una fila apretada en vez de en columnas.
   Se separan por elemento, que es la diferencia real. */
dl.genioi-portal__specs {
    margin: 0 0 1.5rem;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

/* Etiqueta chica y apagada arriba, dato abajo: se lee de un vistazo y no
   compite con la descripción, que es donde está el argumento de venta. */
dl.genioi-portal__specs > div {
    padding: .625rem .75rem;
    border: 1px solid var(--genioi-linea-sutil);
    border-radius: var(--genioi-radio);
}

dl.genioi-portal__specs dt {
    font-size: var(--genioi-t-s);
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .6;
}

dl.genioi-portal__specs dd {
    margin: .125rem 0 0;
    font-weight: var(--genioi-peso-medio);
}

/* Pastillas, como los chips de arriba: la lista con viñetas de punto medio se
   veía como una lista de compras. */
.genioi-portal__amenities {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.genioi-portal__amenities li {
    padding: .375rem .75rem;
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-base);
}

.genioi-portal__agent-card {
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.genioi-portal__agent-card h2 {
    margin-block: 0 .75rem;
    font-size: var(--genioi-t-l);
    opacity: .75;
}

.genioi-portal__agent-card img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--genioi-radio-pildora);
}

.genioi-portal__agent-name {
    margin-block: .5rem .125rem;
    font-weight: var(--genioi-peso-fuerte);
}

/* Sin opacidad: aquí dentro va un enlace y el tema ya le da su propio color.
   Bajarle la opacidad encima lo dejaba ilegible sobre fondo claro. */
.genioi-portal__agent-office {
    margin: 0;
    font-size: var(--genioi-t-base);
}

/* ── Formularios de la ficha ───────────────────────────────────────────── */

/* Agrupados en una tarjeta: sueltos sobre el fondo se leían como una lista
   de campos sin principio ni fin. */
.genioi-portal__detail-aside .genioi-portal__form,
.genioi-portal__detail-aside .genioi-portal__booking {
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.genioi-portal__detail-aside h2,
.genioi-portal__detail-aside h3 {
    margin-block: 0 .75rem;
    font-size: var(--genioi-t-xl);
}

.genioi-portal__form input:not([type="hidden"]):not([type="checkbox"]),
.genioi-portal__form select,
.genioi-portal__form textarea {
    width: 100%;
}

.genioi-portal__form textarea {
    min-height: 6rem;
    resize: vertical;
}

.genioi-portal__form button {
    width: 100%;
    padding: .625rem 1rem;
    cursor: pointer;
}

.genioi-portal__consent {
    display: flex;
    align-items: start;
    gap: .5rem;
    font-size: var(--genioi-t-base);
}

.genioi-portal__consent input {
    margin-top: .25rem;
}

/* ── Tarjeta del asesor ────────────────────────────────────────────────── */

/* Los enlaces que pinta el plugin heredan el color del texto en vez del color
   de enlace del tema, y se subrayan.
   No es capricho ni terquedad: el tema del sitio de referencia pinta los
   enlaces casi blancos —pensados para su pie oscuro— y sobre las superficies
   claras del plugin daban **1.12:1** de contraste, medido en el navegador,
   cuando WCAG pide 4.5:1. Apareció primero en la tarjeta del asesor y luego en
   "Limpiar filtros"; en vez de parchar sitio por sitio, la regla es una.
   El subrayado conserva la señal que aportaba el color. Es lo único del tema
   que el plugin pisa, y sólo sobre su propio contenido. */
.genioi-portal a {
    color: inherit;
    text-decoration: underline;
}

/* Las tarjetas y los botones son superficies clicables enteras: ahí el
   subrayado sobra y estorba. */
.genioi-portal__card > a,
.genioi-portal a.genioi-portal__action {
    text-decoration: none;
}

.genioi-portal__agent-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .875rem;
}

.genioi-portal__agent-initials {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: var(--genioi-radio-pildora);
    display: grid;
    place-items: center;
    font-weight: var(--genioi-peso-fuerte);
    background: var(--genioi-relleno);
}

.genioi-portal__agent-title {
    margin: 0;
    font-size: var(--genioi-t-base);
    opacity: .7;
}

.genioi-portal__agent-actions {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Llamar y WhatsApp son la acción principal de la tarjeta: se ven como botones,
   no como un enlace más dentro de un párrafo. */
.genioi-portal__action {
    display: block;
    padding: .5rem .75rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-chico);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.genioi-portal__agent-office-phone {
    font-size: var(--genioi-t-base);
}

/* ── Buscador: barra de filtros ────────────────────────────────────────── */

/* El formulario es flex; sin esto la fila se encoge al contenido y los campos
   se apilan en dos columnas dejando media barra vacía. */
.genioi-portal__search-row {
    flex: 1 0 100%;
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    align-items: end;
}

.genioi-portal__search-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.genioi-portal__search-field label {
    font-size: var(--genioi-t-s);
    opacity: .7;
}

.genioi-portal__search-field--wide {
    grid-column: span 2;
}

.genioi-portal__search-more {
    flex: 1 0 100%;
    margin-top: 1rem;
}

/* El resumen como pastilla clicable: como texto suelto no se leía como el
   control que es, y con el marco de `details` por defecto salía una caja que
   cruzaba toda la barra. */
.genioi-portal__search-more > summary {
    cursor: pointer;
    display: inline-block;
    padding: .375rem .875rem;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-base);
    list-style: none;
}

.genioi-portal__search-more > summary::-webkit-details-marker {
    display: none;
}

.genioi-portal__search-more > summary::after {
    content: ' +';
    opacity: .6;
}

.genioi-portal__search-more[open] > summary::after {
    content: ' −';
}

.genioi-portal__search-more[open] > summary {
    margin-bottom: .75rem;
}

.genioi-portal__search-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .75rem;
}

.genioi-portal__search-check {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--genioi-t-base);
}

/* `flex-direction` explícito: la regla genérica de párrafos del formulario los
   apila en columna para poner etiqueta sobre campo, y aquí eso dejaba el botón
   y el enlace uno debajo del otro y centrados. */
/* Con la clase del formulario delante: `.genioi-portal__search-form p` tiene
   más especificidad que una clase sola y le ganaba, dejando el botón y el
   enlace apilados y centrados. Es la segunda vez que esa regla genérica pisa
   una específica; si vuelve a pasar, toca partirla en dos. */
.genioi-portal__search-form p.genioi-portal__search-actions {
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin: 1rem 0 0;
}

.genioi-portal__search-actions button {
    padding: .625rem 1.75rem;
    border-radius: var(--genioi-radio);
    cursor: pointer;
}

/* ── Tarjeta de resultado ──────────────────────────────────────────────── */

/* La foto es el producto. La versión anterior la dejaba en una franja y
   dedicaba el resto a un título que sin atributos no dice si la propiedad
   sirve. */
/* La proporción vive AQUÍ y no en la foto. Desde que las fotos se apilan en
   posición absoluta para poder cruzarse, ninguna ocupa flujo: sin esto el
   contenedor mide cero y la tarjeta sale sin imagen, con el precio y el
   contador encima del texto. */
.genioi-portal__card-media {
    position: relative;
    line-height: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    /* El 5.1% del inventario activo no tiene foto. Sin fondo propio, la caja
       de 3:2 sale como un rectángulo blanco con el precio flotando encima. */
    background: var(--genioi-relleno);
}

/* Esqueleto mientras entra la foto: un brillo que recorre el hueco.
   
   Cuelga de `.genioi-galeria` —o sea, del script— y se apaga con `.is-lista`,
   que ese mismo script pone cuando la portada termina de cargar o falla. Sin
   eso serían doce animaciones infinitas por página corriendo detrás de fotos
   ya pintadas: invisible, pero gastando batería en cada teléfono.
   
   Vive en el FONDO del contenedor, así que la foto lo tapa al pintarse. */
@media (prefers-reduced-motion: no-preference) {
    .genioi-galeria .genioi-portal__card-media:not(.is-lista)::before {
        content: "";
        position: absolute;
        /* Más ancho que la caja y movido con `transform`: animar
           `background-position` obliga a repintar en el hilo principal en cada
           cuadro, y `transform` lo resuelve el compositor. Con doce tarjetas y
           las portadas en `loading="lazy"` —que no disparan `load` hasta
           acercarse— el esqueleto puede quedarse encendido un buen rato. */
        top: 0;
        bottom: 0;
        left: -150%;
        width: 150%;
        background: linear-gradient(
            100deg,
            transparent 20%,
            color-mix(in srgb, currentColor 7%, transparent) 45%,
            transparent 70%
        );
        animation: genioi-portal-esqueleto 1.4s linear infinite;
        will-change: transform;
    }
}

@keyframes genioi-portal-esqueleto {
    from { transform: translateX(0); }
    to { transform: translateX(200%); }
}

/* Sobre la foto y no debajo: en una rejilla, de un vistazo se compara de
   cuántas fotos dispone cada propiedad. */
/* Arriba a la izquierda. Esa esquina la ocupaba el sello de tipo hasta que se
   volvió antetítulo; abajo a la derecha ya no cabe porque el precio ocupa todo
   el pie de la foto, y arriba a la derecha están el favorito y el compartir. */
.genioi-portal__card-photos {
    position: absolute;
    top: .625rem;
    left: .625rem;
    z-index: 2;
    pointer-events: none;
    padding: .25rem .625rem;
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-s);
    line-height: 1.4;
    /* Fondo propio y opaco: encima de una foto cualquiera, un color
       translúcido deja el texto ilegible en la mitad de los casos. */
    background: rgb(0 0 0 / .72);
    color: #fff;
}

/* ── Mapa de ubicación de la ficha ─────────────────────────────────────── */

.genioi-portal__location {
    margin-block: 2rem;
}

.genioi-portal__location h2 {
    margin: 0 0 .5rem;
    font-size: var(--genioi-t-2xl);
}

.genioi-portal__location-address {
    margin: 0 0 .875rem;
    font-size: var(--genioi-t-base);
    opacity: .75;
}

/* Alto fijo y no relación de aspecto: un mapa se lee por su extensión, y una
   proporción lo dejaría en una franja en pantallas anchas. */
.genioi-portal__location-map {
    height: 22rem;
    border-radius: var(--genioi-radio);
    border: 1px solid var(--genioi-linea);
    /* El fondo evita el destello blanco mientras entran las teselas, y es lo
       que se ve si el script decide no pintar nada. */
    background: var(--genioi-relleno-sutil);
    overflow: hidden;
}

@media (max-width: 40rem) {
    .genioi-portal__location-map {
        height: 15rem;
    }
}

/* ── Sellos de estado ──────────────────────────────────────────────────── */

/* Arriba a la derecha, bajo el favorito y el compartir. La esquina de arriba a
   la izquierda ya la ocupa el contador de fotos. */
.genioi-portal__card-sellos {
    position: absolute;
    top: 3.25rem;
    right: .625rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .375rem;
    max-width: calc(100% - 1.25rem);
    pointer-events: none;
}

/* El aire de la derecha compensa el espacio que `letter-spacing` agrega
   DESPUÉS de la última letra: sin eso la palabra se recarga contra el borde. */
.genioi-portal__sello {
    font-size: var(--genioi-t-xs);
    font-weight: var(--genioi-peso-fuerte);
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
    padding: .4375rem .5rem .4375rem .5625rem;
    border-radius: var(--genioi-radio-chico);
    color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / .22);
}

/* Color SEMÁNTICO, y por eso literal: estos dos no siguen a `currentColor`
   como el resto de la hoja. «Nuevo» y «bajó de precio» significan cosas
   distintas y tienen que distinguirse entre sí en cualquier tema; heredar la
   tinta del sitio los volvería dos etiquetas idénticas. Los tonos están
   elegidos para contrastar con texto blanco sobre una foto. */
.genioi-portal__sello--new {
    background: #1f6a5e;
}

.genioi-portal__sello--price-drop {
    background: #a4442f;
}


/* ── Galería de la tarjeta ─────────────────────────────────────────────── */

/* TODO lo de la galería cuelga de `.genioi-galeria`, que pone el propio
   `card-gallery.js` al arrancar. Sin esa clase la tarjeta enseña la portada y
   nada más.
   
   No es purismo: las fotos 2 a 5 nacen sin `src` para no descargarlas, así que
   un carrusel que funcione SIN el script enseñaría cuadros en blanco. Y el
   script puede no estar —«Delay JS» de WP Rocket o Perfmatters retiene todo
   hasta la primera interacción, que es exactamente el primer swipe; un atajo
   que corre después de `wp_enqueue_scripts`; o el sitio apagando los estilos
   con `genioi_portal_enqueue_styles`—. */

.genioi-portal__card-tira {
    position: absolute;
    inset: 0;
}

.genioi-portal__card-media .genioi-portal__card-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Sin JavaScript sólo existe la portada. */
    display: none;
}

.genioi-portal__card-media .genioi-portal__card-foto.is-activa {
    display: block;
    opacity: 1;
}

/* Zonas y puntos no se pintan sin el script: prometerían un recorrido que
   nadie va a atender. */
.genioi-portal__card-zonas,
.genioi-portal__card-puntos {
    display: none;
}

/* ── A partir de aquí, sólo con el script vivo ─────────────────────────── */

/* Las fotos se apilan y se cruzan por opacidad: cambiar el `src` parpadea en
   blanco la primera vez que se pide cada imagen. */
.genioi-galeria .genioi-portal__card-media .genioi-portal__card-foto {
    display: block;
    opacity: 0;
    transition: opacity .16s linear;
}

.genioi-galeria .genioi-portal__card-media .genioi-portal__card-foto.is-activa {
    opacity: 1;
}

/* Franjas invisibles, una por foto. Van debajo del precio y de los botones en
   apilamiento, así que no roban ni un clic. */
.genioi-galeria .genioi-portal__card-zonas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
}

.genioi-portal__card-zonas > span {
    flex: 1;
}

.genioi-galeria .genioi-portal__card-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.25rem;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: .3125rem;
    pointer-events: none;
    opacity: .55;
    transition: opacity .24s ease;
}

.genioi-galeria .genioi-portal__card:hover .genioi-portal__card-puntos,
.genioi-galeria .genioi-portal__card:focus-within .genioi-portal__card-puntos {
    opacity: 1;
}

.genioi-portal__card-puntos i {
    width: .375rem;
    height: .375rem;
    border-radius: var(--genioi-radio-pildora);
    background: rgb(255 255 255 / .45);
    box-shadow: 0 1px 2px rgb(0 0 0 / .3);
    transition: width .2s ease, background .2s ease;
}

.genioi-portal__card-puntos i.is-activo {
    width: 1.125rem;
    background: #fff;
}

/* Táctil: no hay cursor, así que la tira se arrastra con el dedo y se detiene
   en cada foto. Las franjas se apagan aquí porque taparían el gesto. */
@media (hover: none) {
    .genioi-galeria .genioi-portal__card-tira {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .genioi-galeria .genioi-portal__card-tira::-webkit-scrollbar {
        display: none;
    }

    .genioi-galeria .genioi-portal__card-media .genioi-portal__card-foto {
        position: relative;
        inset: auto;
        flex: 0 0 100%;
        opacity: 1;
        scroll-snap-align: center;
        transition: none;
    }

    .genioi-galeria .genioi-portal__card-zonas {
        display: none;
    }

    .genioi-galeria .genioi-portal__card-puntos {
        opacity: .95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .genioi-portal__card-media .genioi-portal__card-foto,
    .genioi-portal__card-puntos,
    .genioi-portal__card-puntos i {
        transition: none;
    }
}

/* El precio sobre la foto: es el dato con el que se descarta, y ahí ya está
   la mirada. Debajo competía con un título de ochenta caracteres. */
.genioi-portal__card-scrim {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 60%;
    pointer-events: none;
    /* Un color translúcido plano deja el texto ilegible sobre media fachada de
       cada diez; el degradado apaga sólo la franja donde va el precio. */
    background: linear-gradient(to top,
        rgb(15 15 16 / .85) 0%,
        rgb(15 15 16 / .5) 40%,
        rgb(15 15 16 / 0) 100%);
}

.genioi-portal__price--over {
    position: absolute;
    z-index: 2;
    /* No captura el puntero: si lo hiciera, la franja de debajo dejaría de
       responder justo en el pie de la foto. */
    pointer-events: none;
    left: .875rem;
    right: .875rem;
    bottom: .6875rem;
    margin: 0;
    color: #fff;
    font-size: var(--genioi-t-2xl);
    line-height: 1.15;
    letter-spacing: -.015em;
    /* Sobre una foto clara el blanco se pierde aunque haya degradado. */
    text-shadow: 0 1px 3px rgb(0 0 0 / .4);
}

.genioi-portal__price--over .genioi-portal__price-currency {
    opacity: .8;
}

/* El precio por metro, a la derecha y en pequeño: es el número con el que se
   compara una propiedad cara grande contra una barata chica, pero no es el que
   descarta. Va en la misma línea para no robarle un renglón a la foto. */
.genioi-portal__price-unit {
    float: right;
    font-size: var(--genioi-t-xs);
    font-weight: var(--genioi-peso-medio);
    line-height: 1.9;
    opacity: .82;
}

/* Antetítulo: dice qué es y en qué operación, en el renglón de arriba y en
   versalitas, para que el título no tenga que repetirlo. */
.genioi-portal__card-kicker {
    margin: 0;
    padding: 0;
    font-size: var(--genioi-t-xs);
    font-weight: var(--genioi-peso-fuerte);
    letter-spacing: .09em;
    text-transform: uppercase;
    /* Sin color de marca: el plugin no conoce la paleta del cliente. El peso y
       el espaciado ya lo separan del título. */
    opacity: .65;
}

.genioi-portal__card-body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .875rem .875rem 1rem;
}

.genioi-portal__price-currency {
    font-size: var(--genioi-t-xs);
    font-weight: var(--genioi-peso-medio);
    opacity: .65;
}

.genioi-portal__card-body h2 {
    padding: 0;
    font-size: var(--genioi-t-l);
    font-weight: var(--genioi-peso-medio);
    line-height: 1.35;
}

.genioi-portal__card-location {
    padding: 0;
    font-size: var(--genioi-t-m);
    opacity: .75;
}

ul.genioi-portal__specs {
    list-style: none;
    margin: .25rem 0 0;
    padding: .6875rem 0 0;
    border-top: 1px solid var(--genioi-linea-sutil);
    display: flex;
    flex-wrap: wrap;
    /* El hueco entre grupos es mayor que el que hay dentro de uno, para que
       «3 baños» se lea como una cosa y no como dos sueltas. */
    gap: .375rem 1rem;
    font-size: var(--genioi-t-s);
    opacity: .85;
}

ul.genioi-portal__specs li {
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .3125rem;
    /* Cifras de ancho fijo: entre tarjetas quedan en columna. */
    font-variant-numeric: tabular-nums;
}

.genioi-portal__spec-icono {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: none;
    /* Más tenue que la cifra: el ícono dice de qué se habla, el número es el
       dato. Si pesan igual, compiten. */
    opacity: .6;
}

/* ── Acciones de la tarjeta: favorito y compartir ──────────────────────── */

/* Van sobre la foto pero FUERA del enlace de la tarjeta: un `form` dentro de
   un `a` es marcado inválido. De ahí que se posicionen contra el `li`. */
.genioi-portal__card {
    position: relative;
}

.genioi-portal__card-actions {
    position: absolute;
    /* Por ENCIMA de los sellos. El menú de compartir se abre hacia abajo desde
       esta misma esquina y cruza justo la franja donde van los sellos; con el
       mismo z-index ganaba el orden del DOM —los sellos se pintan después— y
       «NUEVO / BAJÓ DE PRECIO» tapaba entera la fila de WhatsApp.
       
       Y como los sellos no capturan el puntero, el enlace tapado SEGUÍA siendo
       clicable: un enlace invisible que reacciona al clic es peor que uno
       bloqueado. */
    z-index: 3;
    top: .625rem;
    right: .625rem;
    display: flex;
    gap: .375rem;
}

.genioi-portal__fav button,
.genioi-portal__share--card > summary {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--genioi-radio-pildora);
    /* Fondo opaco: encima de una foto cualquiera, un icono translúcido es
       ilegible en la mitad de los casos. */
    background: rgb(255 255 255 / .92);
    color: #222;
    font-size: var(--genioi-t-l);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / .25);
    list-style: none;
}

.genioi-portal__share--card > summary::-webkit-details-marker {
    display: none;
}

/* La palabra sobra cuando el control es un icono sobre la foto, pero tiene que
   seguir existiendo para los lectores de pantalla. */
.genioi-portal__share--card .genioi-portal__share-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.genioi-portal__fav.is-saved button {
    background: #d33;
    color: #fff;
}

/* ── Página de cuenta: entrar, crear cuenta y recuperar la contraseña ── */

/* El botón principal de los formularios de cuenta. Con variables propias para
   que un sitio lo pinte con su marca sin pelear con la especificidad:
   `:root { --genioi-boton-fondo: #beaf87; --genioi-boton-texto: #1f1f1f; }`.
   Por defecto casi negro: se lee sobre cualquier fondo claro, y el plugin no
   sabe el color de la marca del sitio. */
:root {
    --genioi-boton-fondo: #1f1f1f;
    --genioi-boton-texto: #fff;
}

.genioi-portal__account {
    max-width: 58rem;
    margin-inline: auto;
}

/* Dos tarjetas lado a lado —entrar y crear cuenta— y una sola columna en
   cuanto no caben: `auto-fit` decide solo, sin un corte de pantalla a ojo. */
.genioi-portal__account-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.5rem;
    align-items: start;
}

.genioi-portal__account-card {
    padding: 1.5rem;
    border: 1px solid var(--genioi-linea);
    border-radius: var(--genioi-radio-grande);
    background: var(--genioi-relleno-sutil);
    /* El ancla `#crear-cuenta` no puede quedar bajo la cabecera fija. */
    scroll-margin-top: calc(1rem + var(--genioi-portal-offset, 0px));
}

/* El tema da a los h2 el tamaño de un título de página; dentro de una tarjeta
   se come la mitad de la pantalla de un teléfono. */
.genioi-portal__account-card h2 {
    margin: 0 0 1rem;
    font-size: var(--genioi-t-2xl);
    line-height: 1.25;
}

.genioi-portal__account-intro {
    margin: -.25rem 0 1rem;
    font-size: var(--genioi-t-m);
    color: color-mix(in srgb, currentColor 75%, transparent);
}

.genioi-portal__account .genioi-portal__form,
.genioi-portal__auth-invitation .genioi-portal__form {
    margin: 0;
}

.genioi-portal__account button[type="submit"],
.genioi-portal__auth-invitation button[type="submit"] {
    padding: .75rem 1rem;
    border: 0;
    border-radius: var(--genioi-radio);
    background: var(--genioi-boton-fondo);
    color: var(--genioi-boton-texto);
    font-weight: var(--genioi-peso-medio);
    cursor: pointer;
}

.genioi-portal__account button[type="submit"]:hover,
.genioi-portal__auth-invitation button[type="submit"]:hover {
    background: color-mix(in srgb, var(--genioi-boton-fondo) 85%, #fff);
}

.genioi-portal__account button[type="submit"]:focus-visible,
.genioi-portal__auth-invitation button[type="submit"]:focus-visible {
    outline: 2px solid var(--genioi-boton-fondo);
    outline-offset: 2px;
}

/* «¿Olvidaste tu contraseña?» es una salida de emergencia, no un tercer
   formulario: plegado y en letra de enlace. */
.genioi-portal__account-forgot {
    margin-top: 1rem;
}

.genioi-portal__account-forgot > summary {
    cursor: pointer;
    font-size: var(--genioi-t-m);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.genioi-portal__account-forgot[open] > summary {
    margin-bottom: .75rem;
}

.genioi-portal__account-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.genioi-portal__account-links a {
    font-weight: var(--genioi-peso-medio);
}

.genioi-portal__account > .genioi-portal__notice {
    margin-bottom: 1rem;
}

/* ── Entrar o crear cuenta: la ventana del corazón y las invitaciones ─── */

/* Un `<dialog>` nativo: el navegador atrapa el foco, cierra con Escape y lo
   anuncia como diálogo. Fondo claro fijo, igual que el aviso de abajo: el plugin
   no sabe si el tema es oscuro, y una ventana transparente sobre una foto se
   vuelve ilegible. */
.genioi-portal__auth-dialog {
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.25rem 1.25rem 1rem;
    border: 0;
    border-radius: var(--genioi-radio-grande);
    background: #fff;
    color: #222;
    font-family: var(--genioi-fuente);
    box-shadow: 0 10px 40px rgb(0 0 0 / .35);
}

.genioi-portal__auth-dialog::backdrop {
    background: rgb(0 0 0 / .45);
}

.genioi-portal__auth-dialog h2 {
    margin: 0 2rem .5rem 0;
    font-size: var(--genioi-t-2xl);
    line-height: 1.25;
}

.genioi-portal__auth-dialog-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    margin: 0;
}

.genioi-portal__auth-dialog-close button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--genioi-radio-pildora);
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.genioi-portal__auth-dialog-close button:hover,
.genioi-portal__auth-dialog-close button:focus-visible {
    background: var(--genioi-relleno);
}

.genioi-portal__auth-invitation {
    display: grid;
    gap: .75rem;
}

.genioi-portal__auth-invitation-what,
.genioi-portal__auth-invitation-register {
    margin: 0;
}

.genioi-portal__auth-invitation-register {
    font-size: var(--genioi-t-m);
}

.genioi-portal__auth-invitation-register a {
    font-weight: var(--genioi-peso-medio);
}

/* El aviso del favorito cuando NO hubo recarga.
   Antes cada clic recargaba la página y el aviso llegaba con ella; ahora el
   corazón cambia en su sitio y esto es lo único que dice qué pasó. Fijo abajo
   porque el corazón puede estar en cualquier tarjeta de una lista larga, y un
   mensaje junto al botón se sale de la pantalla o queda tapado por la foto. */
.genioi-portal__fav-aviso {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 9999;
    max-width: 22rem;
    margin-inline: auto;
    padding: .625rem 1rem;
    border-radius: var(--genioi-radio);
    background: #222;
    color: #fff;
    font-size: var(--genioi-t-s, .875rem);
    text-align: center;
    box-shadow: 0 2px 12px rgb(0 0 0 / .3);
    /* Nace oculto y sin ocupar el turno del lector de pantalla hasta que hay
       algo que decir; `visibility` para que no sea un blanco invisible. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.genioi-portal__fav-aviso.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .genioi-portal__fav-aviso {
        transition: none;
    }
}

.genioi-portal__fav button:focus-visible,
.genioi-portal__share > summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Compartir ─────────────────────────────────────────────────────────── */

.genioi-portal__share {
    position: relative;
}

.genioi-portal__share--detail > summary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-pildora);
    cursor: pointer;
    font-size: var(--genioi-t-m);
    list-style: none;
}

.genioi-portal__share--detail > summary::-webkit-details-marker {
    display: none;
}

.genioi-portal__share ul {
    position: absolute;
    z-index: 30;
    top: calc(100% + .25rem);
    right: 0;
    min-width: 11rem;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: #fff;
    color: #222;
    border: 1px solid rgb(0 0 0 / .15);
    border-radius: var(--genioi-radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    text-align: left;
}

.genioi-portal__share--detail ul {
    right: auto;
    left: 0;
}

.genioi-portal__share li {
    margin: 0;
}

.genioi-portal__share ul a {
    display: block;
    padding: .5rem .625rem;
    border-radius: var(--genioi-radio-chico);
    color: inherit;
    font-size: var(--genioi-t-base);
    text-decoration: none;
}

.genioi-portal__share ul a:hover,
.genioi-portal__share ul a:focus-visible {
    background: rgb(0 0 0 / .07);
}

/* ── Buscador: barra de filtros arriba ─────────────────────────────────── */

/* La búsqueda necesita más ancho que una ficha o un artículo: el listado y el
   mapa van lado a lado y a 1200px ninguno respira. El resto de las vistas del
   plugin se quedan como están. */
.genioi-portal--search {
    max-width: min(100%, 108rem);
    /* A 1200px el padding de 1rem no se nota; a 1700px, con el contenido
       pegado al borde, la página parece desbordada. */
    padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

/* Una sola columna: la barra arriba, los resultados debajo a todo el ancho.
   Antes eran dos columnas y la izquierda, al cerrarse, no desaparecía —se
   encogía a su pastilla— dejando un hueco con un botón para reabrirla. */
.genioi-portal__search-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/* Envoltorio ESTRUCTURAL, sin marco propio: `.genioi-portal__search-form` ya
   trae su panel con borde, fondo y esquinas redondeadas. Al ponerle aquí otro
   borde salía una caja dentro de otra caja, con dos rellenos sumados. */
.genioi-portal__filterbar {
    min-width: 0;
}

/* Que acompañe al scroll: con un listado largo, volver arriba para cambiar un
   filtro es el motivo por el que la gente reescribe la búsqueda desde cero.
   Sólo de 62rem en adelante — en un teléfono, una barra fija se come la mitad
   de la pantalla útil.

   `z-index` bajo y explícito: por encima de las tarjetas, por debajo del mapa
   en pantalla completa y de cualquier cabecera fija del tema. */
@media (min-width: 62rem) {
    .genioi-portal__filterbar {
        position: sticky;
        top: 0;
        z-index: 5;
        /* Fondo OPACO y sólo aquí: el panel del formulario es translúcido —un
           4% de tinte— y al pasar por encima se leían las tarjetas a través de
           él. El relleno vertical evita que asomen por las esquinas
           redondeadas del panel. */
        background: Canvas;
        padding-block: .75rem;
    }
}

/* Los campos de la barra, en línea y con el buscador quedándose lo que sobra.
   `auto-fit` con un mínimo de 11rem los reparte solos y los apila en pantallas
   angostas sin una sola consulta de medios más. */
.genioi-portal__filterbar .genioi-portal__search-row {
    align-items: end;
}

/* ── «Más filtros»: en línea sin JavaScript, modal con él ──────────────── */

/* El contador sobre el botón. Con el panel en un modal, lo aplicado deja de
   verse al cerrarlo; sin este número, la única pista de que hay algo detrás
   son los chips de arriba. */
.genioi-portal__more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: .375rem;
    padding: 0 .25rem;
    border-radius: var(--genioi-radio-pildora);
    /* Teñido con un aro, NO invertido. `background: currentColor` se resuelve
       contra el color del PROPIO elemento: un globo del color del texto sobre
       el color del texto sale como un rectángulo liso. Es el mismo defecto que
       dejó la pastilla «Cualquiera» como una caja blanca. */
    background: var(--genioi-relleno);
    box-shadow: inset 0 0 0 1px var(--genioi-linea-fuerte);
    font-size: var(--genioi-t-s);
    font-weight: var(--genioi-peso-medio);
    line-height: 1;
}

/* El botón que abre el modal. Lo crea `search-filters.js`, así que sin
   JavaScript no existe y en su lugar queda el `summary` del `details`. */
.genioi-portal__more-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: .375rem .875rem;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-pildora);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--genioi-t-base);
}

.genioi-portal__more-btn:hover,
.genioi-portal__more-btn:focus-visible {
    background: var(--genioi-relleno);
}

/* El botón se inserta DENTRO de la fila de acciones, donde ya manda
   `.genioi-portal__search-actions button` (0,1,1) sobre la clase de arriba
   (0,1,0): sin esto heredaba el relleno y el radio de «Buscar» y los dos se
   veían idénticos, como si «Más filtros» también enviara la búsqueda.
   Se sube la especificidad a (0,2,0) en vez de recurrir a `!important`. */
.genioi-portal__search-actions .genioi-portal__more-btn {
    padding: .375rem .875rem;
    border-radius: var(--genioi-radio-pildora);
}

.genioi-portal__modal {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(100vh - 4rem));
    padding: 0;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-grande);
    background: Canvas;
    color: inherit;
    overflow: hidden;
}

/* El `display` va SÓLO en el estado abierto.
 *
 * Un `<dialog>` cerrado se oculta con `display: none` de la hoja del AGENTE DE
 * USUARIO, y cualquier `display` de autor —aunque sea una clase simple— le
 * gana. Con `display: grid` suelto en la regla de arriba, el modal se pintaba
 * ABIERTO al cargar la página, encima del encabezado y sin fondo, sin que nadie
 * lo hubiera pulsado.
 *
 * Rejilla de tres filas para que sólo el cuerpo tenga scroll: con el modal
 * entero desplazándose, «Ver resultados» quedaba fuera de la pantalla justo
 * cuando hacía falta.
 */
.genioi-portal__modal[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.genioi-portal__modal::backdrop {
    background: rgb(0 0 0 / .5);
}

.genioi-portal__modal-head,
.genioi-portal__modal-foot {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
}

.genioi-portal__modal-head {
    justify-content: space-between;
    border-bottom: 1px solid var(--genioi-linea-sutil);
}

.genioi-portal__modal-head h2 {
    margin: 0;
    font-size: var(--genioi-t-l);
}

.genioi-portal__modal-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--genioi-linea-sutil);
}

/* Dentro del modal los campos se alinean ARRIBA, no abajo.
 *
 * En la barra, `align-items: end` deja los controles a ras del botón. Aquí las
 * filas mezclan selectores de una línea con grupos de pastillas que saltan a
 * dos, y alineados por abajo los altos crecían hacia arriba: la segunda línea
 * de «Recámaras» acababa pegada a la etiqueta «Ciudad» de la fila siguiente.
 * El hueco entre filas también sube, por lo mismo. */
.genioi-portal__modal-body .genioi-portal__search-row {
    align-items: start;
    gap: 1.25rem 1rem;
}

/* Aire ENTRE las filas del panel avanzado.
 *
 * El `gap: 1rem` del formulario no llega hasta aquí: separa a sus hijos
 * directos, y estas filas cuelgan del `details`, así que quedaban pegadas —cero
 * píxeles— y la segunda línea de pastillas de «Recámaras» tocaba la etiqueta
 * «Ciudad». Va en el `details` y no en el modal para que valga también sin
 * JavaScript, donde el panel se despliega en línea. */
.genioi-portal__search-more .genioi-portal__search-row + .genioi-portal__search-row {
    margin-top: 1.25rem;
}

.genioi-portal__modal-body {
    overflow-y: auto;
    /* Sin esto el foco de un campo puede quedar pegado al borde al hacer
       scroll dentro del modal. */
    scrollbar-gutter: stable;
    padding: 1rem;
}

.genioi-portal__modal-foot button {
    padding: .625rem 1.75rem;
    border-radius: var(--genioi-radio);
    cursor: pointer;
    font: inherit;
}

.genioi-portal__modal-close {
    cursor: pointer;
    padding: .25rem .5rem;
    border: 0;
    border-radius: var(--genioi-radio-chico);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--genioi-t-l);
    line-height: 1;
}

/* Dentro del modal el `details` ya no pliega nada: `search-filters.js` lo abre
   y esconde su `summary`, porque el título del modal ya dice qué es esto.

   `[hidden]` del navegador NO gana a la regla de `summary` de más arriba —es
   de autor contra una del agente de usuario—, así que hace falta decirlo. */
.genioi-portal__modal .genioi-portal__search-more,
.genioi-portal__modal .genioi-portal__search-more[open] {
    margin-top: 0;
}

.genioi-portal__search-more > summary[hidden] {
    display: none;
}


.genioi-portal__search-main {
    min-width: 0;
}

/* ── Moneda e idioma del visitante ─────────────────────────────────────── */

/* El selector de moneda lo monta `currency.js` dentro de este hueco: el
   servidor no puede pintarlo con la opción marcada porque la página se cachea
   y le enseñaría a un visitante la elección de otro. */
.genioi-portal__currency {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.genioi-portal__currency-select {
    padding: .375rem .5rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-chico);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--genioi-t-m);
}

/* El idioma sí son ENLACES: viaja en la URL, así que cada variante es una
   página distinta que se puede compartir, indexar y abrir en otra pestaña. */
.genioi-portal__locales {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.genioi-portal__locales a {
    padding: .25rem .5rem;
    border-radius: var(--genioi-radio-chico);
    font-size: var(--genioi-t-m);
    font-weight: var(--genioi-peso-medio);
    text-decoration: none;
    opacity: .65;
}

.genioi-portal__locales a:hover,
.genioi-portal__locales a:focus-visible {
    background: var(--genioi-relleno);
    opacity: 1;
}

/* El activo con peso y un aro, no con color: el color lo pone el tema del
   sitio y no podemos dar por hecho que contraste sobre su fondo. */
.genioi-portal__locales a[aria-current="true"] {
    opacity: 1;
    box-shadow: inset 0 0 0 1px var(--genioi-linea-fuerte);
}

/* El precio en la moneda de PUBLICACIÓN, debajo del convertido. Un precio
   convertido es una referencia; el real es el del anuncio, y esconderlo sería
   afirmar algo que la publicación no dice. */
.genioi-portal__price-original {
    display: block;
    font-size: var(--genioi-t-xs);
    font-weight: var(--genioi-peso-medio);
    opacity: .8;
}

/* Barra de orden, encima de los resultados. */
.genioi-portal__sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: var(--genioi-t-m);
}

.genioi-portal__sort label {
    opacity: .75;
}

.genioi-portal__sort select {
    padding: .375rem .5rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-chico);
    background: transparent;
    color: inherit;
    font: inherit;
}

.genioi-portal__sort button {
    padding: .375rem .875rem;
    border-radius: var(--genioi-radio-chico);
    cursor: pointer;
    font: inherit;
}

/* Filtros activos: qué se está buscando y cómo quitarlo, sin abrir el panel. */
.genioi-portal__chips {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.genioi-portal__chips li {
    margin: 0;
}

.genioi-portal__chips a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* Una ciudad larga —o un valor pegado a mano en la URL— desbordaba el
       contenedor y sacaba scroll horizontal en el teléfono. */
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .25rem .75rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-s);
    line-height: 1.6;
    text-decoration: none;
}

.genioi-portal__chips a:hover,
.genioi-portal__chips a:focus-visible {
    background: var(--genioi-relleno);
}

/* La cruz con su propio peso: es el objetivo del toque, y a 13 px con el texto
   al lado no se distingue como algo pulsable. */
.genioi-portal__chips a > span[aria-hidden] {
    font-size: var(--genioi-t-l);
    line-height: 1;
    opacity: .6;
}

/* ── Guardar búsqueda ──────────────────────────────────────────────────── */

/* La barra que comparte con el orden: el guardar a la izquierda, el orden a la
   derecha, y en móvil uno debajo del otro. */
.genioi-portal__results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1rem;
}

.genioi-portal__results-bar .genioi-portal__sort {
    margin: 0;
}

.genioi-portal__save-search {
    position: relative;
}

.genioi-portal__save-search > summary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio-pildora);
    cursor: pointer;
    font-size: var(--genioi-t-m);
    font-weight: var(--genioi-peso-medio);
    list-style: none;
}

.genioi-portal__save-search > summary::-webkit-details-marker {
    display: none;
}

/* Flotante de verdad: en flujo normal, abrir el panel empujaba las tarjetas
   que el visitante estaba mirando. */
.genioi-portal__save-search[open] {
    z-index: 20;
}

.genioi-portal__save-search-panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    background: #fff;
    color: #222;
    border: 1px solid rgb(0 0 0 / .15);
    border-radius: var(--genioi-radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    text-align: left;
}

.genioi-portal__save-search-panel > :first-child {
    margin-top: 0;
}

.genioi-portal__save-search-panel > :last-child {
    margin-bottom: 0;
}

.genioi-portal__save-search-what {
    margin: .75rem 0 .5rem;
    font-size: var(--genioi-t-m);
    opacity: .85;
}

/* ── Buscador: resultados junto al mapa ────────────────────────────────── */

.genioi-portal__results {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

/* En pantallas angostas el mapa va debajo del listado y con altura fija: en
   una columna estrecha, a pantalla completa tapaba todo lo demás.
   Ojo con el orden: esta regla base tiene que ir ANTES de la media query. Iba
   después, con la misma especificidad, y le ganaba por ser posterior — el mapa
   se quedaba en 24rem también en escritorio, que es justo lo que se veía. */
.genioi-portal__map {
    height: 24rem;
    margin: 0;
}

@media (min-width: 62rem) {
    .genioi-portal__results {
        /* Listado y mapa lado a lado, como en el portal: el mapa deja de ser
           una franja que hay que rebasar para llegar a los resultados. */
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
    }

    /* Alto de viewport: un mapa de inmuebles se lee por su extensión, y a media
       altura no se distingue una zona de otra. */
    .genioi-portal__map {
        position: sticky;
        top: 1rem;
        height: calc(100vh - 2rem);
    }
}

@media (min-width: 62rem) {
    /* Con la fila de atributos, 14rem parte «3 recámaras» en dos renglones. */
    .genioi-portal__results-list .genioi-portal__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    }
}

/* ── Resaltado cruzado entre la lista y el mapa ────────────────────────── */

/* La tarjeta señalada desde el mapa se levanta igual que al pasarle el cursor
   —es el mismo hecho: «ésta es»— y además lleva contorno, porque el cursor
   está del otro lado de la pantalla y la elevación sola no se localiza. */
.genioi-portal__card.is-destacada {
    transform: translateY(-2px);
    border-color: var(--genioi-linea-fuerte);
    box-shadow: 0 12px 28px -14px color-mix(in srgb, currentColor 45%, transparent);
    outline: 2px solid var(--genioi-foco);
    outline-offset: 2px;
}

/* El pin señalado desde la lista crece desde su punta, no desde el centro: un
   pin de mapa apunta a un lugar concreto y escalarlo desde el medio lo mueve. */
.genioi-portal__pin--destacado {
    transform-origin: bottom center;
    transform: scale(1.35);
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / .45));
    z-index: 1000 !important;
}

/* Un globo de grupo es un círculo y no apunta a nada: ése sí crece desde su
   centro, o se desplazaría al agrandarse. */
.genioi-portal__cluster.genioi-portal__pin--destacado {
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .genioi-portal__pin--destacado {
        transition: transform .18s ease;
    }
}

/* Agrupamiento de pines: un número por zona se lee; trescientos marcadores
   superpuestos no se pueden ni contar ni clicar. */
/* El selector va DOBLADO con la clase que pone Leaflet, y no es cosmético.
 *
 * `leaflet.css` trae `.leaflet-marker-icon, .leaflet-marker-shadow { display:
 * block }` con la MISMA especificidad (0,1,0) que esta clase, así que decide el
 * orden de carga — y Leaflet se pide bajo demanda desde el CDN, o sea SIEMPRE
 * después de esta hoja. Ganaba Leaflet: el `display: grid` no llegaba a
 * aplicarse, `place-items` quedaba inerte y el número se pintaba arriba a la
 * izquierda en vez de en el centro del globo.
 *
 * Doblar la clase sube a (0,2,0) y gana pase lo que pase con el orden. Es el
 * mismo remedio que se usó con la tipografía del buscador, y por la misma
 * razón: preferimos especificidad a `!important`.
 */
.genioi-portal__cluster.leaflet-marker-icon {
    display: grid;
    place-items: center;
}

.genioi-portal__cluster {
    border-radius: var(--genioi-radio-pildora);
    background: rgb(0 0 0 / .78);
    color: #fff;
    font-size: var(--genioi-t-s);
    font-weight: var(--genioi-peso-fuerte);
    /* El borde separa el globo de una foto satelital o de una zona urbana
       oscura, donde el fondo negro se confunde con el mapa. */
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgb(0 0 0 / .4);
}

/* Abajo a la izquierda y con peso visual: es una acción, no un adorno; el
   visitante tiene que ver que puede pedir resultados de lo que está mirando. */
.genioi-portal__map-search {
    padding: .5rem 1rem;
    border: 0;
    border-radius: var(--genioi-radio-chico);
    background: #222;
    color: #fff;
    font: inherit;
    font-size: var(--genioi-t-m);
    font-weight: var(--genioi-peso-medio);
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}

.genioi-portal__map-all {
    padding: .375rem .75rem;
    border: 1px solid rgb(0 0 0 / .25);
    border-radius: var(--genioi-radio-chico);
    background: #fff;
    color: #222;
    font: inherit;
    font-size: var(--genioi-t-s);
    cursor: pointer;
}

/* Enlaces de faceta. Discretos a propósito: sirven al rastreador y al visitante
   que quiere reencuadrar la búsqueda, no compiten con los resultados. */
.genioi-portal__facets {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--genioi-linea-sutil);
}

.genioi-portal__facets h2 {
    margin: 0 0 .75rem;
    font-size: var(--genioi-t-base);
    font-weight: var(--genioi-peso-medio);
    opacity: .75;
}

.genioi-portal__facets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.genioi-portal__facets a {
    display: inline-block;
    padding: .3125rem .75rem;
    border: 1px solid var(--genioi-linea-media);
    border-radius: var(--genioi-radio-pildora);
    font-size: var(--genioi-t-s);
}

/* ── Sugerencias del buscador ──────────────────────────────────────────── */

/* El envoltorio lo crea el JavaScript alrededor del campo. Hereda el
   comportamiento de caja que tenía el `input`: en el buscador compacto era el
   elemento flexible de la fila, y sin esto el campo se encogía al contenido y
   el botón se comía la barra. */
.genioi-portal__suggest-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* El `input` deja de ser hijo del formulario al envolverse, y con él pierde el
   `flex` que le daba el ancho. Sin esta regla volvía a su ancho intrínseco —unos
   veinte caracteres— y la caja del hero se encogía delante del visitante en
   cuanto corría el script. */
.genioi-portal__suggest-wrap > input {
    width: 100%;
}

.genioi-portal__search-field .genioi-portal__suggest-wrap {
    flex: 0 0 auto;
}

.genioi-portal__suggest {
    position: absolute;
    z-index: 30;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    /* Colores propios y opacos: la lista se dibuja sobre lo que haya debajo
       —una foto de fondo en el hero— y con `inherit` quedaba ilegible. */
    background: #fff;
    color: #222;
    border: 1px solid rgb(0 0 0 / .15);
    border-radius: var(--genioi-radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    text-align: left;
}

.genioi-portal__suggest li {
    margin: 0;
    padding: .5rem .625rem;
    border-radius: var(--genioi-radio-chico);
    cursor: pointer;
    font-size: var(--genioi-t-base);
    line-height: 1.3;
}

/* Teclado y ratón pintan igual: la fila activa por flechas tiene que verse
   como la que se está señalando. */
.genioi-portal__suggest li.is-active,
.genioi-portal__suggest li:hover {
    background: rgb(0 0 0 / .07);
}

/* La colonia se distingue de la ciudad; si no, dos entradas con el mismo
   nombre no se pueden diferenciar. */
.genioi-portal__suggest li.is-neighborhood::after {
    content: ' · colonia';
    font-size: var(--genioi-t-s);
    opacity: .55;
}

.genioi-portal__suggest-empty {
    cursor: default;
    opacity: .6;
}

.genioi-portal__suggest-empty:hover {
    background: none;
}

/* ── Móvil: barra al alcance y mapa alcanzable ─────────────────────────── */

/* En escritorio no hace falta: el mapa va al lado del listado. */
.genioi-portal__map-toggle {
    display: none;
}

@media (max-width: 61.999rem) {
    /* La barra acompaña al scroll: con doce tarjetas por página, volver arriba
       para cambiar el orden o abrir los filtros es lo que hace que la gente
       reescriba la búsqueda desde cero. `--genioi-portal-offset` es el mismo
       margen que el sitio configura para su cabecera fija. */
    .genioi-portal__results-bar {
        position: sticky;
        /* Pegada arriba del todo, no al margen de la cabecera fija: ese valor
           lo configura el sitio para ESCRITORIO, y en móvil su cabecera suele
           ser estática. Con él, quedaban 80 px por los que las tarjetas
           desfilaban por encima de la barra. */
        top: 0;
        z-index: 15;
        padding: .5rem 0;
        /* Fondo opaco: si no, las tarjetas se leen por debajo al pasar. */
        background: Canvas;
        box-shadow: 0 1px 0 var(--genioi-linea-sutil);
    }

    /* Flotante sobre el listado: el mapa está a casi siete pantallas de scroll
       y nadie baja hasta ahí. */
    /* Con la clase del contenedor delante: en el sitio de prueba, una regla
       `… a` del tema ganaba y dejaba el texto en gris oscuro sobre fondo
       oscuro — el botón estaba ahí, invisible. */
    .genioi-portal .genioi-portal__map-toggle,
    .genioi-portal__map-toggle {
        position: fixed;
        z-index: 40;
        /* A la derecha y no centrado: los temas de estos sitios ponen su
           burbuja de WhatsApp abajo a la izquierda, y centrado quedaba encima
           o pegado a ella. */
        right: 1rem;
        bottom: 1.25rem;
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: .625rem 1.5rem;
        border-radius: var(--genioi-radio-pildora);
        background: #222;
        color: #fff;
        font-size: var(--genioi-t-base);
        font-weight: var(--genioi-peso-medio);
        text-decoration: none;
        box-shadow: 0 4px 16px rgb(0 0 0 / .35);
        /* El badge de reCAPTCHA de estos sitios vive justo ahí abajo. */
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Vista de mapa: el listado se oculta y el mapa toma la pantalla. */
    .genioi-portal__results.is-map-view .genioi-portal__results-list {
        display: none;
    }

    .genioi-portal__results.is-map-view .genioi-portal__map {
        /* `dvh` para que la barra de direcciones del móvil no se coma la
           franja inferior —donde viven la atribución y «Buscar en esta zona»—;
           `vh` de respaldo para quien no lo soporte. */
        height: calc(100vh - 5rem);
        height: calc(100dvh - 5rem);
        /* `!important` porque Leaflet escribe `position: relative` EN LÍNEA al
           inicializar sobre un contenedor estático, y una regla de hoja no le
           gana. Sin esto la vista de «pantalla completa» no era ni completa ni
           pegajosa: el mapa se iba con el scroll y sólo se veían 476 px de 684. */
        position: sticky !important;
        top: 0;
        /* Con el listado oculto, su margen y el hueco de la rejilla dejaban 96
           píxeles en blanco entre la barra y el mapa: casi un tercio de lo que
           se ve de golpe en un teléfono. */
        margin: 0;
    }

    .genioi-portal__results.is-map-view {
        gap: 0;
    }
}

/* ── Buscador compacto (hero de portada) ───────────────────────────────── */

/* Va fuera de `.genioi-portal`: se inserta en la maqueta del tema, no en una
   página del plugin, así que no hereda su ancho ni su padding. */
.genioi-portal__search-compact {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.genioi-portal__search-compact input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--genioi-linea-fuerte);
    border-radius: var(--genioi-radio);
    background: var(--genioi-relleno);
    color: inherit;
    font: inherit;
}

.genioi-portal__search-compact button {
    flex: 0 0 auto;
    padding: .75rem 1.5rem;
    border-radius: var(--genioi-radio);
    cursor: pointer;
    font: inherit;
}

@media (max-width: 30rem) {
    /* En un teléfono la caja y el botón lado a lado dejan la caja inservible. */
    .genioi-portal__search-compact {
        flex-direction: column;
    }
}