/* ==========================================================================
   SUBACABUR — modulo publico de FINCAS.

   Se carga DESPUES de subacabur.css y reutiliza sus variables (--suba-*): la
   paleta del brief vive alli y aqui no se redefine ni un color suelto.
     azul marino #041B3B · azul medio #0F3A6B · dorado #C8A44D (del logo)
     blanco       #FFFFFF · gris claro  #F5F5F5

   MOVIL PRIMERO: todo el archivo describe la pantalla estrecha y solo tres
   consultas de medios (48rem, 64rem, 80rem) van anadiendo columnas.

   NINGUNA regla de este archivo se puede mover a un atributo style="" ni a una
   etiqueta <style> sin nonce: la CSP real prohibe 'unsafe-inline'.

   ── Dos diferencias con ganado.css que NO son cosmeticas ────────────────────

   1. Los modificadores de estado son FEMENINOS: --reservada y --vendida. El
      ENUM de la tabla `fincas` es 'disponible','reservada','vendida'
      (ESQUEMA §11), y la vista compone la clase con el valor real de la
      columna. Con --reservado la pastilla saldria sin color.

   2. Hay dos bloques que ganado no tiene: la lista de `servicios` y el croquis
      de ubicacion (.fin-mapa). El croquis es un SVG servido por el propio
      sitio, NO un mapa: incrustar Leaflet, MapLibre o Google Maps exigiria
      abrir `default-src 'self'` al script, la hoja de estilos y las teselas de
      un dominio ajeno.
   ========================================================================== */

:root {
    --fin-radio: 12px;
    --fin-radio-corto: 8px;
    --fin-sombra: 0 1px 2px rgba(4, 27, 59, .06), 0 10px 30px rgba(4, 27, 59, .09);
    --fin-sombra-alta: 0 2px 6px rgba(4, 27, 59, .10), 0 18px 44px rgba(4, 27, 59, .16);
    --fin-transicion: 160ms ease;

    --fin-proporcion: 4 / 3;
    --fin-proporcion-ficha: 3 / 2;

    --fin-rojo: #B23B2E;
    --fin-rojo-suave: rgba(178, 59, 46, .10);
    --fin-whatsapp: #1F8A46;
}

/* --- Ruta de navegacion --------------------------------------------------- */

.fin-migas {
    background: var(--suba-blanco);
    border-bottom: 1px solid var(--suba-borde);
    font-size: .86rem;
}

.fin-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 0;
    padding-block: .7rem;
    list-style: none;
}

.fin-migas__elemento + .fin-migas__elemento::before {
    content: "/";
    margin-right: .5rem;
    color: var(--suba-tinta-tenue);
}

.fin-migas__elemento a { text-decoration: none; font-weight: 600; }
.fin-migas__elemento a:hover,
.fin-migas__elemento a:focus-visible { text-decoration: underline; }
.fin-migas__elemento span { color: var(--suba-tinta-tenue); }

/* --- Cabecera del listado ------------------------------------------------- */

.fin-cabecera {
    background: linear-gradient(150deg, var(--suba-verde-oscuro), var(--suba-verde-medio));
    color: var(--suba-blanco);
    padding-block: 2.5rem;
}

.fin-cabecera__antetitulo {
    margin: 0 0 .4rem;
    color: var(--suba-dorado);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.fin-cabecera__titulo {
    margin: 0 0 .55rem;
    font-size: clamp(1.9rem, 6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: .02em;
}

.fin-cabecera__bajada {
    margin: 0;
    max-width: 44rem;
    color: rgba(255, 255, 255, .92);
}

/* --- Secciones ------------------------------------------------------------ */

.fin-seccion { padding-block: 2.25rem; }

.fin-seccion--buscador {
    background: var(--suba-blanco);
    border-bottom: 1px solid var(--suba-borde);
}

.fin-seccion--tenue {
    background: var(--suba-blanco);
    border-top: 1px solid var(--suba-borde);
}

.fin-seccion__titulo {
    margin: 0 0 .4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.fin-seccion__intro {
    margin: 0 0 1.4rem;
    max-width: 44rem;
    color: var(--suba-tinta-tenue);
}

.fin-seccion__mas { margin: 1.5rem 0 0; }

/* --- Buscador ------------------------------------------------------------- */

.fin-filtros { margin-top: 1.1rem; }

.fin-filtros__busqueda { margin-bottom: 1rem; }

.fin-filtros__rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.fin-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

/* El rango va en <fieldset> por su <legend>. Se deja en display:block y no en
   flex: un <legend> dentro de un contenedor flex se maqueta de formas distintas
   en cada navegador. */
.fin-campo--rango {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.fin-campo--rango .fin-campo__rotulo { display: block; margin-bottom: .3rem; }

.fin-campo__rotulo {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--suba-tinta-tenue);
    padding: 0;
}

.fin-campo__par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.fin-campo__control {
    width: 100%;
    min-height: 2.85rem;
    padding: .55rem .75rem;
    font: inherit;
    font-size: .95rem;
    color: var(--suba-tinta);
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio-corto);
    transition: border-color var(--fin-transicion), box-shadow var(--fin-transicion);
}

.fin-campo__control:hover { border-color: var(--suba-verde-medio); }

.fin-campo__control:focus-visible {
    border-color: var(--suba-verde-medio);
    box-shadow: 0 0 0 3px rgba(15, 58, 107, .18);
}

.fin-campo__control--area { min-height: 8rem; resize: vertical; line-height: 1.55; }

.fin-campo__control.es-erroneo { border-color: var(--fin-rojo); background: var(--fin-rojo-suave); }

.fin-campo__error { margin: .1rem 0 0; font-size: .85rem; font-weight: 600; color: var(--fin-rojo); }

.fin-campo--ancho { grid-column: 1 / -1; }

.fin-filtros__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
}

/* Senuelo antispam: fuera de la pantalla, nunca con el atributo hidden
   (un robot lo detectaria) y nunca con display:none (algunos lo saltan). */
.fin-senuelo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Botones -------------------------------------------------------------- */

.fin-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.85rem;
    padding: .6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--fin-radio-corto);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fin-transicion), border-color var(--fin-transicion), transform var(--fin-transicion);
}

.fin-boton:active { transform: translateY(1px); }

.fin-boton--principal {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

.fin-boton--principal:hover,
.fin-boton--principal:focus-visible {
    background: var(--suba-verde-medio);
    border-color: var(--suba-verde-medio);
    color: var(--suba-blanco);
}

.fin-boton--tenue {
    background: var(--suba-blanco);
    border-color: var(--suba-borde);
    color: var(--suba-verde-oscuro);
}

.fin-boton--tenue:hover,
.fin-boton--tenue:focus-visible {
    background: var(--suba-gris-claro);
    border-color: var(--suba-verde-medio);
    color: var(--suba-verde-oscuro);
}

.fin-boton--whatsapp {
    background: var(--fin-whatsapp);
    border-color: var(--fin-whatsapp);
    color: var(--suba-blanco);
}

.fin-boton--whatsapp:hover,
.fin-boton--whatsapp:focus-visible {
    background: #177037;
    border-color: #177037;
    color: var(--suba-blanco);
}

/* --- Recuento y estado vacio ---------------------------------------------- */

.fin-resultados__recuento {
    margin: 0 0 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--suba-tinta-tenue);
}

.fin-vacio {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--suba-blanco);
    border: 1px dashed var(--suba-borde);
    border-radius: var(--fin-radio);
}

.fin-vacio__titulo {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.fin-vacio__texto {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--suba-tinta-tenue);
}

.fin-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

/* --- Rejilla de tarjetas -------------------------------------------------- */

.fin-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
}

.fin-tarjeta {
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio);
    box-shadow: var(--fin-sombra);
    overflow: hidden;
    transition: box-shadow var(--fin-transicion), transform var(--fin-transicion), border-color var(--fin-transicion);
}

.fin-tarjeta:hover,
.fin-tarjeta:focus-within {
    box-shadow: var(--fin-sombra-alta);
    border-color: var(--suba-verde-medio);
    transform: translateY(-2px);
}

.fin-tarjeta.es-destacada { border-top: 4px solid var(--suba-dorado); }

.fin-tarjeta__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.fin-tarjeta__marco {
    position: relative;
    aspect-ratio: var(--fin-proporcion);
    background: var(--suba-gris-claro);
    overflow: hidden;
}

/* width/height del HTML son la pista de tamano para el navegador; la
   proporcion real la manda el marco y object-fit evita la deformacion. */
.fin-tarjeta__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.fin-tarjeta:hover .fin-tarjeta__imagen { transform: scale(1.03); }

.fin-tarjeta__distintivos {
    position: absolute;
    inset-block-start: .6rem;
    inset-inline-start: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.fin-estado {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--suba-blanco);
    color: var(--suba-verde-oscuro);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* FEMENINO: son los valores exactos del ENUM de `fincas`. Ver la cabecera. */
.fin-estado--disponible { background: var(--suba-verde-medio); color: var(--suba-blanco); }
.fin-estado--reservada  { background: var(--suba-dorado);      color: var(--suba-verde-oscuro); }
.fin-estado--vendida    { background: var(--fin-rojo);         color: var(--suba-blanco); }
.fin-estado--destacado  { background: var(--suba-dorado);      color: var(--suba-verde-oscuro); }

.fin-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1 1 auto;
    padding: 1rem 1.05rem 1.15rem;
}

.fin-tarjeta__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--suba-verde-oscuro);
    overflow-wrap: anywhere;
}

.fin-tarjeta__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-tarjeta__dato {
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--suba-gris-claro);
    color: var(--suba-tinta-tenue);
}

/* La extension es el dato que primero se busca en una finca: se resalta como
   la raza en el modulo de ganado. */
.fin-tarjeta__dato--extension {
    background: rgba(15, 58, 107, .12);
    color: var(--suba-verde-oscuro);
}

.fin-tarjeta__ubicacion {
    margin: 0;
    font-size: .88rem;
    color: var(--suba-tinta-tenue);
}

.fin-tarjeta__precio {
    margin: auto 0 0;
    padding-top: .5rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--suba-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.fin-tarjeta__precio-hectarea {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--suba-tinta-tenue);
    font-variant-numeric: normal;
}

/* --- Paginacion ----------------------------------------------------------- */

.fin-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 2rem;
}

.fin-paginacion__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-paginacion__paso,
.fin-paginacion__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: .4rem .8rem;
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio-corto);
    background: var(--suba-blanco);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--suba-verde-oscuro);
}

.fin-paginacion__paso:hover,
.fin-paginacion__paso:focus-visible,
.fin-paginacion__numero:hover,
.fin-paginacion__numero:focus-visible {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

.fin-paginacion__numero.es-vigente {
    background: var(--suba-dorado);
    border-color: var(--suba-dorado);
    color: var(--suba-verde-oscuro);
}

.fin-paginacion__paso.es-inerte {
    opacity: .38;
    background: var(--suba-gris-claro);
    color: var(--suba-tinta-tenue);
}

.fin-paginacion__resumen {
    margin: .8rem 0 0;
    text-align: center;
    font-size: .86rem;
    color: var(--suba-tinta-tenue);
}

/* --- Ficha: rejilla general ----------------------------------------------- */

.fin-ficha { padding-block: 1.75rem 0; }

.fin-ficha__reja {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* --- Ficha: galeria ------------------------------------------------------- */

.fin-galeria__principal {
    position: relative;
    aspect-ratio: var(--fin-proporcion-ficha);
    background: var(--suba-gris-claro);
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio);
    overflow: hidden;
}

.fin-galeria__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fin-galeria__paso {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 999px;
    background: rgba(4, 27, 59, .82);
    color: var(--suba-blanco);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--fin-transicion);
}

.fin-galeria__paso:hover,
.fin-galeria__paso:focus-visible { background: var(--suba-verde-oscuro); }

/* Los controles nacen con el atributo hidden y solo los descubre fincas.js.
   Hace falta declararlo aqui: el display:inline-flex de arriba es una regla de
   autor y ganaria a la del navegador para [hidden], dejando botones muertos en
   una pagina sin JavaScript. */
.fin-galeria__paso[hidden],
.fin-galeria__contador[hidden] { display: none; }

.fin-galeria__paso--atras    { inset-inline-start: .6rem; }
.fin-galeria__paso--adelante { inset-inline-end: .6rem; }

.fin-galeria__contador {
    position: absolute;
    inset-block-end: .6rem;
    inset-inline-end: .6rem;
    margin: 0;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(28, 36, 24, .74);
    color: var(--suba-blanco);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fin-galeria__tiras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.fin-galeria__enlace {
    display: block;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    border-radius: var(--fin-radio-corto);
    overflow: hidden;
    background: var(--suba-gris-claro);
}

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

.fin-galeria__enlace:hover,
.fin-galeria__enlace:focus-visible { border-color: var(--suba-verde-medio); }
.fin-galeria__enlace.es-vigente    { border-color: var(--suba-dorado); }

.fin-galeria__aviso {
    margin: 0;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--suba-tinta-tenue);
    background: var(--suba-blanco);
    border: 1px dashed var(--suba-borde);
    border-radius: var(--fin-radio);
}

/* --- Ficha: resumen ------------------------------------------------------- */

.fin-ficha__resumen {
    padding: 1.25rem;
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-top: 4px solid var(--suba-verde-medio);
    border-radius: var(--fin-radio);
    box-shadow: var(--fin-sombra);
}

.fin-ficha__distintivos {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .7rem;
}

.fin-ficha__titulo {
    margin: 0 0 .35rem;
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
    font-weight: 800;
    line-height: 1.22;
    color: var(--suba-verde-oscuro);
    overflow-wrap: anywhere;
}

.fin-ficha__ubicacion {
    margin: 0 0 .9rem;
    font-size: .95rem;
    color: var(--suba-tinta-tenue);
}

.fin-ficha__precio {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 800;
    color: var(--suba-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.fin-ficha__precio-hectarea {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--suba-tinta-tenue);
    font-variant-numeric: normal;
}

.fin-ficha__rapidos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.fin-ficha__rapidos li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .7rem;
    background: var(--suba-gris-claro);
    border-radius: var(--fin-radio-corto);
}

.fin-ficha__rapidos span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--suba-tinta-tenue);
}

.fin-ficha__rapidos strong { font-size: .95rem; color: var(--suba-tinta); overflow-wrap: anywhere; }

.fin-ficha__acciones {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.fin-ficha__pie {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--suba-borde);
    font-size: .82rem;
    color: var(--suba-tinta-tenue);
}

/* --- Ficha: compartir ----------------------------------------------------- */

.fin-compartir { margin-top: .4rem; }

.fin-compartir__rotulo {
    margin: 0 0 .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--suba-tinta-tenue);
}

.fin-compartir__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-compartir__enlace {
    display: inline-block;
    padding: .35rem .75rem;
    border: 1px solid var(--suba-borde);
    border-radius: 999px;
    background: var(--suba-blanco);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--suba-verde-oscuro);
}

.fin-compartir__enlace:hover,
.fin-compartir__enlace:focus-visible {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

/* --- Ficha: descripcion, datos y servicios -------------------------------- */

.fin-detalle__reja {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.fin-detalle__parrafo {
    margin: 0 0 .9rem;
    max-width: 40rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.fin-datos {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: .5rem .9rem;
    margin: 0 0 1.75rem;
    padding: 1rem 1.1rem;
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio);
    font-size: .94rem;
}

.fin-datos dt { font-weight: 700; color: var(--suba-tinta-tenue); }
.fin-datos dd { margin: 0; overflow-wrap: anywhere; }

/* Los servicios son pares clave/valor del JSON `servicios`. Muchos traen solo
   la clave («Luz», «Corrales»), asi que la ficha tiene que leerse bien con el
   valor vacio: por eso es una lista de pastillas y no una tabla de dos
   columnas, donde la mitad derecha quedaria en blanco. */
.fin-servicios {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.fin-servicios__elemento {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    padding: .6rem .85rem;
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-left: 3px solid var(--suba-verde-medio);
    border-radius: var(--fin-radio-corto);
}

.fin-servicios__nombre {
    font-weight: 700;
    color: var(--suba-verde-oscuro);
    overflow-wrap: anywhere;
}

.fin-servicios__valor {
    font-size: .92rem;
    color: var(--suba-tinta-tenue);
    overflow-wrap: anywhere;
}

/* --- Ficha: ubicacion ----------------------------------------------------- */

.fin-mapa {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

/* Croquis en SVG servido por el propio dominio. NO es un mapa navegable: la
   CSP `default-src 'self'` bloquearia el script, la hoja de estilos y las
   teselas de cualquier proveedor. El punto se coloca con cx/cy desde el HTML,
   que son atributos de presentacion de SVG y no estilos en linea. */
.fin-mapa__lienzo {
    display: block;
    width: 100%;
    max-width: 24rem;
    height: auto;
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-radius: var(--fin-radio);
    box-shadow: var(--fin-sombra);
}

.fin-mapa__caja  { fill: rgba(15, 58, 107, .07); stroke: var(--suba-verde-medio); stroke-width: .6; }
.fin-mapa__guia  { stroke: rgba(28, 36, 24, .16); stroke-width: .4; stroke-dasharray: 2 2; }
.fin-mapa__halo  { fill: rgba(200, 164, 77, .38); }
.fin-mapa__punto { fill: var(--suba-verde-oscuro); stroke: var(--suba-blanco); stroke-width: 1.4; }

.fin-mapa__rotulo {
    margin: 0 0 .25rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--suba-tinta-tenue);
}

.fin-mapa__par {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.fin-mapa__referencia {
    margin: 0 0 .9rem;
    color: var(--suba-tinta-tenue);
    overflow-wrap: anywhere;
}

.fin-mapa__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .9rem;
    padding: 0;
    list-style: none;
}

.fin-mapa__nota {
    margin: 0;
    max-width: 34rem;
    font-size: .84rem;
    color: var(--suba-tinta-tenue);
}

/* --- Formulario de contacto ----------------------------------------------- */

.fin-formulario { max-width: 46rem; }

.fin-formulario__reja {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.fin-formulario__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-top: 1.1rem;
}

.fin-formulario__nota {
    margin: 0;
    max-width: 26rem;
    font-size: .84rem;
    color: var(--suba-tinta-tenue);
}

/* --- Consultas de medios --------------------------------------------------- */

@media (min-width: 48rem) {
    .fin-seccion  { padding-block: 2.75rem; }
    .fin-cabecera { padding-block: 3.25rem; }

    .fin-filtros__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-rejilla          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-formulario__reja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-servicios        { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fin-ficha__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-galeria__tiras  { grid-template-columns: repeat(6, 1fr); }

    .fin-mapa { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}

@media (min-width: 64rem) {
    .fin-filtros__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fin-rejilla          { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .fin-ficha__reja {
        grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
        align-items: start;
    }

    .fin-detalle__reja { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); }

    /* El panel acompana al visitante mientras recorre la ficha. */
    .fin-ficha__resumen {
        position: sticky;
        inset-block-start: 1.25rem;
    }
}

@media (min-width: 80rem) {
    .fin-filtros__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fin-rejilla          { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Preferencias del visitante ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fin-tarjeta,
    .fin-tarjeta__imagen,
    .fin-boton { transition: none; }

    .fin-tarjeta:hover { transform: none; }
    .fin-tarjeta:hover .fin-tarjeta__imagen { transform: none; }
}

@media print {
    .fin-filtros,
    .fin-paginacion,
    .fin-compartir,
    .fin-formulario,
    .fin-galeria__paso,
    .fin-galeria__tiras { display: none; }

    .fin-ficha__reja,
    .fin-detalle__reja,
    .fin-mapa { grid-template-columns: 1fr; }
}