/* ==========================================================================
   Semillán — sitio público
   Paleta costera: azul profundo del mar + arena, con turquesa de acento.
   ========================================================================== */

:root {
    --azul:        #12395f;
    --azul-osc:    #0c2740;
    --azul-claro:  #2f6ea3;
    --turquesa:    #17a2a2;
    --arena:       #f6f2ea;
    --gris:        #f4f6f8;
    --texto:       #22303c;
    --texto-suave: #6b7c8c;
    --borde:       #e2e8ee;
    --radio:       14px;
    --sombra:      0 2px 10px rgba(18, 57, 95, .07);
    --sombra-alta: 0 12px 28px rgba(18, 57, 95, .16);
    --ancho:       1180px;
}

/* En pantallas grandes el contenido se ensancha por escalones, no a pantalla
   completa: una línea de texto de 1900px no se lee. Se mueve la VARIABLE y no
   `.contenedor`, así el sitio entero acompaña con una sola regla.
   Ojo con los escalones: `.props` es `auto-fill minmax(275px, 1fr)`, así que el
   ancho decide cuántas tarjetas entran por fila (ver el comentario de .props). */
@media (min-width: 1300px) { :root { --ancho: 1260px; } }
@media (min-width: 1440px) { :root { --ancho: 1360px; } }
@media (min-width: 1600px) { :root { --ancho: 1500px; } }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--texto);
    background: #fff;
    line-height: 1.6;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { color: var(--turquesa); }

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 600; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* --- Cabecera ------------------------------------------------------------ */
.cab {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 50;
}
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.cab-logo img { height: 42px; width: auto; }

.cab-nav { display: flex; align-items: center; gap: 6px; }
.cab-nav a {
    color: var(--texto);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: .95rem;
}
.cab-nav a:hover { background: var(--gris); color: var(--azul); }
.cab-nav a.activo { color: var(--azul); background: var(--gris); }

.cab-wsp {
    background: #25d366 !important;
    color: #fff !important;
    margin-left: 6px;
}
.cab-wsp:hover { filter: brightness(.93); color: #fff !important; }

.nav-toggle, .nav-boton { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 74px 0;
}
.hero-velo {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(12,39,64,.85), rgba(12,39,64,.45));
}
.hero-in { position: relative; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; }
.hero p { font-size: 1.1rem; max-width: 620px; opacity: .95; margin: 0; }

.hero-chico { padding: 46px 0; }

.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Botón de borde sobre el hero oscuro: hay que aclararlo o no se ve. */
.hero .btn-borde,
.btn-hero { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn-borde:hover,
.btn-hero:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

.hero-buscador {
    display: flex; gap: 9px; margin-top: 22px;
    max-width: 480px; flex-wrap: wrap;
}
.hero-buscador input {
    flex: 1; min-width: 220px;
    padding: 11px 15px; border: none; border-radius: 9px;
    font: inherit; font-size: .93rem;
}
.hero-buscador input:focus { outline: 3px solid rgba(23,162,162,.5); }

/* --- Buscador de disponibilidad (portada) -------------------------------- */
/* Se monta sobre el borde del hero: el margen negativo lo "sube". */
.buscador-wrap { margin-top: -46px; position: relative; z-index: 10; }

.buscador {
    background: #fff;
    border-radius: var(--radio);
    box-shadow: 0 12px 34px rgba(12, 39, 64, .18);
    padding: 22px 24px;
    border-top: 4px solid var(--turquesa);
}

/* Todo en una fila: título, las dos fechas y el botón.
   Las fechas llevan ancho fijo (con "24/07/2026" sobra) y el espacio libre se
   lo queda el título, que es texto. */
.buscador-fila {
    display: grid;
    grid-template-columns: 1fr 200px auto 200px auto;
    align-items: center;      /* el título queda centrado con los campos */
    gap: 18px;
}

/* margin-top compensa la etiqueta que llevan los campos encima, para que el
   título quede centrado respecto del input y no de la columna entera. */
.buscador-titulo { display: flex; align-items: center; gap: 13px; margin-top: 13px; }
.buscador-titulo > i { font-size: 2rem; color: var(--turquesa); flex-shrink: 0; }
.buscador-titulo strong { display: block; color: var(--azul); font-size: 1.22rem; font-weight: 600; line-height: 1.2; }
.buscador-titulo span { font-size: .92rem; color: var(--texto-suave); line-height: 1.35; display: block; }

.buscador-campo label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 5px;
}

.buscador-campo input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--borde);
    border-radius: 9px;
    font: inherit;
    font-size: .98rem;
    color: var(--texto);
    background: var(--gris);
    cursor: pointer;
}
.buscador-campo input:hover { border-color: #b9c6d2; }
.buscador-campo input:focus {
    outline: none;
    background: #fff;
    border-color: var(--turquesa);
    box-shadow: 0 0 0 3px rgba(23, 162, 162, .15);
}

/* Con align-items:center la fila se centra: la flecha y el botón se bajan un
   poco para alinearse con los inputs, que tienen la etiqueta encima. */
.buscador-flecha { color: var(--borde); font-size: 1rem; margin-top: 13px; }

.buscador-boton {
    padding: 11px 22px;
    font-size: .95rem;
    background: var(--turquesa);
    border-radius: 9px;
    margin-top: 13px;
}
.buscador-boton:hover { background: #139090; }

.buscador-nota { margin: 12px 0 0; font-size: .84rem; color: #b4560f; }

/* Debajo del buscador: accesos a la izquierda, código a la derecha. */
.buscador-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.buscador-accesos { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador-accesos .btn-borde { background: #fff; }

.buscador-codigo { font-size: .86rem; color: var(--texto-suave); }
.buscador-codigo p { margin: 0; }

.buscador-codigo-form { display: flex; gap: 8px; }
.buscador-codigo-form input {
    padding: 9px 13px;
    border: 1px solid #c9d3dd;
    border-radius: 9px;
    font: inherit;
    font-size: .9rem;
    max-width: 190px;
    background: #fff;
}

@media (max-width: 900px) {
    .buscador-fila { grid-template-columns: 1fr auto 1fr auto; }
    .buscador-titulo { grid-column: 1 / -1; margin-bottom: 4px; }
    .buscador-campo { min-width: 0; }   /* que puedan encogerse en la grilla */
}

@media (max-width: 720px) {
    .buscador-wrap { margin-top: -30px; }
    .buscador { padding: 18px; }
    .buscador-fila { grid-template-columns: 1fr; }
    .buscador-flecha { display: none; }
    .buscador-boton { justify-content: center; margin-top: 4px; }
    .buscador-pie { flex-direction: column; align-items: stretch; }
    .buscador-accesos .btn { flex: 1; justify-content: center; }
    .buscador-codigo { text-align: center; }
    .buscador-codigo-form { justify-content: center; }
}

/* --- Contenido ----------------------------------------------------------- */
.contenido { min-height: 40vh; }

.seccion { padding: 56px 0; }
.seccion-gris { background: var(--gris); }

.seccion-cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.seccion-cab h2 { font-size: 1.7rem; color: var(--azul); margin: 0; }
.seccion-cab p { margin: 0; color: var(--texto-suave); }

/* --- Grilla de propiedades ----------------------------------------------- */
/* El mínimo de 275px decide cuántas tarjetas entran por fila al ensanchar el
   contenedor (ver los escalones de --ancho arriba): bajarlo mete una columna
   más antes, subirlo la retrasa. En el listado hay que descontar la barra de
   filtros (265px + 30 de gap) del ancho disponible. */
.props {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 24px;
}

.prop {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: transform .16s, box-shadow .16s;
    display: flex;
    flex-direction: column;
}
.prop:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

.prop-foto { position: relative; aspect-ratio: 4 / 3; background: var(--gris); overflow: hidden; }
.prop-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prop:hover .prop-foto img { transform: scale(1.05); }

.prop-etiq {
    position: absolute; top: 12px; left: 12px;
    background: rgba(12,39,64,.88); color: #fff;
    padding: 4px 11px; border-radius: 20px;
    font-size: .74rem; font-weight: 500; letter-spacing: .02em;
}
.prop-destacada {
    position: absolute; top: 12px; right: 12px;
    background: #f5b301; color: #3a2c00;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem;
}

.prop-cuerpo { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prop-cuerpo h3 { font-size: 1.02rem; margin: 0; color: var(--azul); }
.prop-cuerpo h3 a { color: inherit; }
.prop-zona { font-size: .82rem; color: var(--texto-suave); margin: -4px 0 0; }

.prop-datos { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--texto-suave); margin-top: auto; }
.prop-datos span { display: inline-flex; align-items: center; gap: 5px; }
.prop-datos i, .prop-datos .ico-svg { color: var(--turquesa); font-size: .95rem; }

.prop-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.prop-precio { font-weight: 700; color: var(--azul); font-size: 1.05rem; }
.prop-precio small { display: block; font-weight: 400; font-size: .72rem; color: var(--texto-suave); }
.prop-codigo { font-size: .74rem; color: var(--texto-suave); background: var(--gris); padding: 3px 8px; border-radius: 6px; }

/* --- Botones ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--azul); color: #fff;
    padding: 11px 22px; border-radius: 9px;
    font-weight: 500; font-size: .95rem;
    border: none; cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--azul-claro); color: #fff; }
.btn-turquesa { background: var(--turquesa); }
.btn-turquesa:hover { background: #139090; }
.btn-borde { background: transparent; color: var(--azul); border: 1.5px solid var(--borde); }
.btn-borde:hover { background: var(--gris); color: var(--azul); border-color: var(--azul-claro); }
.btn-wsp { background: #25d366; }
.btn-wsp:hover { background: #1fb955; }

/* Celeste: acompaña al verde de WhatsApp sin competirle. */
.btn-celeste { background: #1f92cc; color: #fff; }
.btn-celeste:hover { background: #1a7dad; color: #fff; }
.btn-bloque { width: 100%; justify-content: center; }

/* --- Filtros ------------------------------------------------------------- */
.filtros {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px;
    box-shadow: var(--sombra);
}
.filtros h3 { font-size: 1rem; color: var(--azul); margin-bottom: 14px; }

/* Rango "desde … a … hasta" de capacidad y dormitorios: dos combos en fila. */
.filtro-rango { display: flex; align-items: center; gap: 6px; }
/* Con el padding general de .filtros select (11px por lado) "Monoamb." no entra
   en medio sidebar: por eso el selector repite .filtros, que va después. */
.filtros .filtro-rango select { flex: 1; min-width: 0; padding-left: 8px; padding-right: 4px; }
.filtro-rango span { font-size: .85rem; color: var(--texto-suave); }

/* Buscador por código, arriba de los filtros del listado. */
.filtros-codigo { margin-bottom: 16px; }
.filtros-codigo h3 { margin-bottom: 10px; }
.filtros-codigo-fila { display: flex; gap: 8px; }
.filtros-codigo-fila input { flex: 1; min-width: 0; text-transform: uppercase; }
.filtros-codigo-fila .btn { padding: 9px 14px; flex: none; }

/* La propiedad por la que se consulta, arriba del formulario de contacto. */
.consulta-prop {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef5fb;
    color: var(--azul);
    font-size: .92rem;
}
.consulta-prop a { font-weight: 600; }

/* Las anclas ("/contacto#escribinos") dejan el destino debajo de la cabecera,
   que es sticky: sin este margen, el título de la sección queda tapado. */
.seccion[id] { scroll-margin-top: 84px; }
.filtro-grupo { margin-bottom: 15px; }
.filtro-grupo > label { display: block; font-size: .78rem; font-weight: 500; color: var(--texto-suave); margin-bottom: 5px; }

.filtros select,
.filtros input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #c9d3dd;
    border-radius: 8px;
    font: inherit; font-size: .9rem;
    background: #fff;
    color: var(--texto);
}
.filtros select:focus, .filtros input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(47,110,163,.13); }

/* Fechas de estadía: los campos van apilados, cada uno con su etiqueta. */
.filtro-fechas { border-bottom: 1px solid var(--borde); padding-bottom: 15px; }

/* Etiqueta de los campos de fecha: mismo peso que el resto de los filtros. */
.filtro-sub {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--texto-suave);
    margin: 0 0 5px;
}
.campo-fecha + .filtro-sub { margin-top: 12px; }

/* Campo de fecha con ícono. Se usa igual en los filtros y en el modal de
   reserva, así los dos se ven iguales. */
.campo-fecha { position: relative; }

.campo-fecha > i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--turquesa);
    pointer-events: none;      /* el clic pasa al input */
    font-size: .95rem;
    z-index: 1;
}

/* El calendario reemplaza el input por uno de texto de solo lectura; el valor
   real viaja en un hidden que agrega el JS. */
.campo-fecha input[type="date"],
.campo-fecha input.form-control,
.campo-fecha input[type="text"] {
    width: 100%;
    padding: 10px 10px 10px 34px;
    border: 1px solid #c9d3dd;
    border-radius: 8px;
    font: inherit;
    font-size: .9rem;
    background: #fff;
    color: var(--texto);
    cursor: pointer;           /* se abre el calendario al hacer clic */
}
.campo-fecha input.form-control:focus,
.campo-fecha input[type="text"]:focus,
.campo-fecha input[type="date"]:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(47, 110, 163, .13);
}

/* X para vaciar el campo de fecha (la agrega el JS con `conBorrar`). Va sobre
   el input, que es readOnly: sin esto la fecha elegida no se puede sacar. */
.campo-fecha-x {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-suave);
    font-size: .78rem;
    cursor: pointer;
    z-index: 2;
}
.campo-fecha-x:hover { background: #fdecea; color: #b8362a; }
.campo-fecha-x[hidden] { display: none; }

/* Si el CDN falla, queda el input date nativo: el indicador se estira a todo
   el campo para que cualquier clic lo abra. */
.campo-fecha input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* --- Calendario (Air Datepicker) con la paleta del sitio ------------------ */
.air-datepicker {
    --adp-font-family: inherit;
    --adp-color: var(--texto);
    --adp-color-secondary: var(--turquesa);
    --adp-accent-color: var(--turquesa);
    --adp-background-color-selected-other-month: var(--turquesa);
    --adp-background-color-hover: var(--gris);
    --adp-border-color: var(--borde);
    --adp-border-color-inner: var(--borde);
    --adp-cell-border-radius: 8px;
    --adp-border-radius: 10px;
    --adp-day-name-color: var(--azul-claro);
    --adp-color-current-date: var(--azul);
    --adp-nav-color-secondary: var(--azul);
    box-shadow: var(--sombra-alta);
}
/* Dentro del <dialog> el calendario cuelga del modal (ver `container` en el JS). */
.modal .air-datepicker { z-index: 20; }

.filtro-nota { font-size: .76rem; color: var(--texto-suave); margin: 7px 0 0; line-height: 1.35; }
.filtro-nota.ok { color: #12694f; }

.filtro-checks { display: flex; flex-direction: column; gap: 7px; }
.filtro-checks label { display: flex; align-items: center; gap: 8px; font-size: .87rem; cursor: pointer; }
.filtro-checks input { width: auto; accent-color: var(--turquesa); }

.layout-listado { display: grid; grid-template-columns: 265px 1fr; gap: 30px; align-items: start; }

/* --- Filtros plegables en el celular (08/10/2026) ------------------------ */
/* Con una sola columna (≤980px) los filtros quedaban arriba de todo y los
   resultados, varias pantallas más abajo. Ahí van plegados detrás de un botón
   que dice cuántos filtros hay puestos; las chips de arriba de los resultados
   siguen mostrando cuáles son. Todo cuelga de `.filtros-plegable`, que pone el
   JS: sin JS se ve el panel entero, como antes. En la computadora no cambia
   nada: el botón y "Ver propiedades" no se muestran. */
.filtros-boton, .filtros-ver { display: none; }

@media (max-width: 980px) {
    .filtros-plegable .filtros-boton {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%;
        padding: 13px 16px;
        background: #fff;
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
        color: var(--azul);
        font: inherit; font-weight: 600; text-align: left;
        cursor: pointer;
    }
    .filtros-plegable .filtros-boton i { margin-right: 6px; }
    .filtros-boton-der { display: inline-flex; align-items: center; gap: 4px; }
    .filtros-boton-cuenta {
        min-width: 22px; height: 22px; padding: 0 7px;
        border-radius: 11px;
        background: var(--turquesa); color: #fff;
        font-size: .8rem; line-height: 22px; text-align: center;
    }
    .filtros-plegable .filtros-boton-flecha { margin: 0 0 0 4px; transition: transform .2s; }
    .filtros-plegable.abierto .filtros-boton { margin-bottom: 12px; }
    .filtros-plegable.abierto .filtros-boton-flecha { transform: rotate(180deg); }
    .filtros-plegable:not(.abierto) .filtros-panel { display: none; }
    .filtros-plegable .filtros-ver { display: flex; margin-top: 10px; }
}

/* --- Chips de filtros activos (encima de los resultados) ------------------ */
.chips-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px;
    border-radius: 18px;
    background: var(--gris);
    border: 1px solid var(--borde);
    color: var(--texto);
    font-size: .85rem;
    line-height: 1.3;
    transition: background .15s, border-color .15s, color .15s;
}
.chip > i:first-child, .chip > .ico-svg:first-child { color: var(--texto-suave); font-size: .9rem; }

/* La X se pinta al pasar por encima: el chip entero es el enlace que la quita. */
.chip-x { font-size: .95rem; color: var(--texto-suave); margin-left: 1px; }
.chip:hover { background: #fdecea; border-color: #f0b8b2; color: #8f2018; }
.chip:hover > i { color: #b8362a; }

/* Limpiar todo: primero de la fila y en celeste, para que se distinga de los
   filtros que se sacan de a uno. */
.chip-limpiar {
    background: #e4f2fa;
    border-color: #bcdcef;
    color: var(--azul);
    font-weight: 500;
}
.chip-limpiar > i:first-child { color: var(--azul-claro); }
.chip-limpiar:hover { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }
.chip-limpiar:hover > i { color: #fff; }

.barra-orden {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.barra-orden .cantidad { color: var(--texto-suave); font-size: .92rem; }
.barra-orden select { padding: 8px 11px; border: 1px solid #c9d3dd; border-radius: 8px; font: inherit; font-size: .88rem; }

/* --- Ficha de propiedad -------------------------------------------------- */
.ficha-cab { padding: 26px 0 0; }
.ficha-cab h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--azul); }
.ficha-meta { color: var(--texto-suave); display: flex; gap: 14px; flex-wrap: wrap; font-size: .92rem; }

/* La imagen grande es un <button>: al hacer clic abre el visor a pantalla
   completa. Hay que anular el aspecto de botón que trae el navegador. */
.galeria-principal {
    display: block; width: 100%; padding: 0; border: none;
    position: relative; cursor: zoom-in;
    border-radius: var(--radio); overflow: hidden; background: var(--gris);
    aspect-ratio: 16 / 10; box-shadow: var(--sombra);
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dos pistas de que la foto se puede ampliar: la lupa y la cuenta de fotos.
   Sin ellas, que la imagen sea clicable no se adivina. */
.galeria-ampliar, .galeria-cuenta {
    position: absolute; display: flex; align-items: center; gap: 6px;
    background: rgba(12, 39, 64, .62); color: #fff;
    backdrop-filter: blur(2px);
    transition: background .15s;
}
.galeria-ampliar {
    top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    justify-content: center; font-size: .85rem;
}
.galeria-cuenta {
    bottom: 12px; left: 12px;
    padding: 5px 12px; border-radius: 20px; font-size: .82rem; font-weight: 500;
}
.galeria-principal:hover .galeria-ampliar,
.galeria-principal:hover .galeria-cuenta { background: var(--azul); }
.galeria-principal:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

/* Flechas sobre los bordes de la foto grande. Van en un marco aparte porque
   la foto es un <button> y no puede contener otro. Mismo estilo que la lupa. */
.galeria-marco { position: relative; }
.galeria-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 39, 64, .62); color: #fff; font-size: 1.1rem;
    backdrop-filter: blur(2px); cursor: pointer; transition: background .15s;
}
.galeria-flecha:hover { background: var(--azul); }
.galeria-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.galeria-ant { left: 12px; }
.galeria-sig { right: 12px; }

.galeria-tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; margin-top: 10px; }
.galeria-tiras button {
    padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden;
    aspect-ratio: 4/3; background: var(--gris); cursor: pointer;
}
.galeria-tiras button.activa { border-color: var(--turquesa); }
.galeria-tiras img { width: 100%; height: 100%; object-fit: cover; }

.layout-ficha { display: grid; grid-template-columns: 1fr 350px; gap: 32px; align-items: start; }

.tarjeta {
    background: #fff; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra);
}
.tarjeta h2, .tarjeta h3 { color: var(--azul); font-size: 1.12rem; }

.datos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.dato { background: var(--gris); border-radius: 10px; padding: 11px 13px; }
.dato i, .dato .ico-svg { color: var(--turquesa); }
.dato b { display: block; font-size: 1.05rem; color: var(--azul); font-weight: 600; }
.dato span { font-size: .78rem; color: var(--texto-suave); }

.lista-crc { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.lista-crc li {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--arena); border-radius: 8px;
    padding: 7px 12px; font-size: .87rem;
}
.lista-crc i { color: var(--turquesa); }

.volver { display: inline-block; font-size: .88rem; margin-bottom: 6px; }

/* Ficha: "Volver" a la izquierda y el buscador por código a la derecha. */
.ficha-barra {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px;
}
.ficha-barra .volver { margin-bottom: 0; }
.ficha-codigo { display: flex; gap: 6px; }
.ficha-codigo input {
    width: 160px; padding: 7px 10px;
    border: 1px solid #c9d3dd; border-radius: 8px;
    font: inherit; font-size: .88rem; color: var(--texto); background: #fff;
    text-transform: uppercase;
}
.ficha-codigo input::placeholder { text-transform: none; }
.ficha-codigo input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(47,110,163,.13); }
.ficha-codigo .btn { padding: 7px 12px; font-size: .88rem; }

.ficha-lado { position: sticky; top: 92px; }

.nota-form { font-size: .78rem; color: var(--texto-suave); margin: 10px 0 0; text-align: center; }

.video-caja { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; }
.video-caja iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Reel de Instagram: vertical, centrado y con un ancho de celular. El embed
   trae arriba el encabezado de la cuenta y abajo la descripción, así que no es
   9:16 justo: el alto es fijo y alcanza para el video y el pie. */
.reel-caja { max-width: 380px; margin: 0 auto; }
.reel-caja.con-video { margin-top: 18px; }
.reel-caja iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }

/* Cartel de "Ctrl + rueda para hacer zoom" sobre el mapa. */
.mapa-aviso {
    position: absolute;
    inset: 0;
    z-index: 400;                 /* por encima de los tiles, debajo de popups */
    display: grid;
    place-items: center;
    background: rgba(12, 39, 64, .55);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;         /* no debe bloquear el clic en el mapa */
}
.mapa-aviso.visible { opacity: 1; visibility: visible; }

.mapa { height: 320px; border-radius: 10px; overflow: hidden; z-index: 0; }

/* Pie del mapa: la aclaración y el botón, alineados a la derecha. */
.mapa-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.mapa-nota { font-size: .82rem; color: var(--texto-suave); }
.mapa-nota i { color: var(--turquesa); }
.mapa-pie .btn { padding: 9px 18px; font-size: .9rem; }

@media (max-width: 480px) {
    .mapa-pie { justify-content: space-between; }
}

/* Sección de mapa a todo el ancho (portada, alquileres, ventas). */
.seccion-mapa { padding: 50px 0 0; }

/* Mapa general: ocupa todo el ancho de la ventana, sin el margen del container. */
.mapa-general {
    height: 480px; width: 100%; overflow: hidden;
    z-index: 0; border-top: 1px solid var(--borde);
}
.mapa-leyenda { padding: 16px 20px 4px; }

/* Chinche circular de color (divIcon de Leaflet). */
.chinche span {
    display: block; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.mapa-leyenda {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
    margin-top: 16px; font-size: .88rem; color: var(--texto-suave);
}
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-punto { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mapa-punto.venta    { background: #c0392b; }
.mapa-punto.alquiler { background: #17a2a2; }
.mapa-punto.oficina  { background: #f5b301; }

/* Globo del marcador */
.pop { display: block; text-decoration: none; color: var(--texto); width: 190px; }
.pop-foto { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.pop strong { color: var(--azul); display: block; line-height: 1.25; }
.pop-meta { font-size: .82rem; color: var(--texto-suave); }
.leaflet-popup-content { margin: 12px; }

.precio-caja { text-align: center; padding: 18px; background: var(--azul); color: #fff; border-radius: var(--radio); }
.precio-caja .monto { font-size: 1.8rem; font-weight: 700; }
.precio-caja .rotulo { font-size: .8rem; opacity: .85; }

/* --- Calendario de disponibilidad ---------------------------------------- */
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-cab h2 { margin: 0; }

.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--borde); background: #fff;
    color: var(--azul); cursor: pointer; font-size: 1rem;
    display: grid; place-items: center;
}
.cal-nav button:hover:not(:disabled) { background: var(--gris); border-color: var(--azul-claro); }
.cal-nav button:disabled { opacity: .35; cursor: default; }

.cal-ayuda { font-size: .85rem; color: var(--texto-suave); margin: 6px 0 16px; }

.cal-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.cal-mes h4 { text-align: center; margin: 0 0 10px; color: var(--azul); font-size: .98rem; text-transform: capitalize; }

.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-dia-nombre {
    text-align: center; font-size: .72rem; font-weight: 600;
    color: var(--texto-suave); padding-bottom: 4px;
}

.cal-celda {
    aspect-ratio: 1; display: grid; place-items: center;
    border-radius: 7px; font-size: .84rem; border: none;
    font-family: inherit;
}
.cal-celda.vacia { background: none; }

/* Disponible: es un <button>, se puede clickear. */
.cal-celda.libre {
    background: #4fbf95; color: #06341f; cursor: pointer;
    font-weight: 600; transition: background .12s, transform .12s;
}
.cal-celda.libre:hover { background: #0f7d63; color: #fff; transform: scale(1.08); }

.cal-celda.ocupado { background: #dd7268; color: #4a0f0a; font-weight: 500; text-decoration: line-through; }
.cal-celda.pasado  { background: #e6eaee; color: #7a8794; }

.cal-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: .82rem; color: var(--texto-suave); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-muestra { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-muestra.libre { background: #4fbf95; border: 1px solid #3aa77e; }
.cal-muestra.ocupado { background: #dd7268; border: 1px solid #c85c52; }
.cal-muestra.pasado { background: #e6eaee; border: 1px solid #cdd5dd; }

/* --- Modal (elemento <dialog>) ------------------------------------------- */
.modal {
    border: none; padding: 0;
    border-radius: var(--radio);
    width: min(600px, calc(100vw - 32px));
    box-shadow: 0 20px 60px rgba(12, 39, 64, .35);
    color: var(--texto);
}
.modal::backdrop { background: rgba(12, 39, 64, .55); }

.modal-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 20px; background: var(--azul); color: #fff;
}
.modal-cab h2 { margin: 0; font-size: 1.1rem; color: #fff; }

.modal-cerrar {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; display: grid; place-items: center; font-size: .85rem;
}
.modal-cerrar:hover { background: rgba(255,255,255,.3); }

.modal-cuerpo { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.modal-prop {
    margin: 0 0 14px; font-weight: 600; color: var(--azul); font-size: .95rem;
}
.modal-prop span {
    font-weight: 400; font-size: .78rem; color: var(--texto-suave);
    background: var(--gris); padding: 2px 8px; border-radius: 6px; margin-left: 6px;
}

.modal-pie {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; background: var(--gris); border-top: 1px solid var(--borde);
}

/* --- Visor de fotos a pantalla completa (elemento <dialog>) ---------------
   También abre con showModal(), así que trae foco atrapado, Esc y backdrop sin
   una línea de JS. El navegador le pone `display: block` cuando está abierto:
   para centrar con flex hay que declararlo en `[open]`, porque un `display:flex`
   suelto le ganaría al `display: none` de cuando está cerrado y el visor se
   vería siempre.
   Se usa `dvh` y no `vh` por la barra de direcciones del celular, que en `vh`
   no cuenta y deja la foto recortada por abajo. */
.visor {
    border: none; padding: 0; margin: 0; background: transparent;
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    overflow: hidden;
}
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: rgba(8, 22, 36, .94); }

.visor-marco {
    margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: 100%; max-height: 100%;
}
.visor-marco img {
    /* El alto y el ancho se acotan a la ventana MENOS el lugar de las flechas y
       del pie: así la foto entra entera y no hay que scrollear. */
    max-width: calc(100vw - 140px); max-height: calc(100dvh - 100px);
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
    transition: opacity .18s;
}
/* La versión de 1600px se genera la primera vez que se pide: mientras carga,
   la foto anterior se atenúa. Sin esto el visor parece trabado. */
.visor-marco img.cargando { opacity: .28; }

.visor-marco figcaption {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    color: rgba(255, 255, 255, .82); font-size: .85rem; text-align: center;
}
.visor-cuenta {
    background: rgba(255, 255, 255, .14); color: #fff;
    padding: 2px 10px; border-radius: 20px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.visor-boton {
    position: absolute; z-index: 2;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .15); color: #fff;
    display: grid; place-items: center;
    transition: background .15s;
}
.visor-boton:hover { background: rgba(255, 255, 255, .32); }
.visor-boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.visor-cerrar { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 1rem; }

/* Las flechas van ENCIMA de los costados y no en la fila: si ocuparan lugar,
   cada foto vertical empujaría el ancho disponible y el visor se movería. */
.visor-flecha { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.3rem; }
.visor-ant { left: 16px; }
.visor-sig { right: 16px; }

@media (max-width: 700px) {
    .visor-marco img { max-width: calc(100vw - 20px); max-height: calc(100dvh - 120px); }
    /* En el celular se pasa deslizando el dedo, así que las flechas se corren
       al pie: sobre los costados de la foto tapan justamente lo que se mira. */
    .visor-flecha { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; }
    .visor-ant { left: 20px; }
    .visor-sig { right: 20px; }
    .visor-marco figcaption { padding: 0 68px; }
}

/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: .82rem; font-weight: 500; color: var(--texto-suave); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid #c9d3dd; border-radius: 8px;
    font: inherit; font-size: .92rem; background: #fff; color: var(--texto);
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(47,110,163,.13);
}
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Formulario de /contacto: consulta + datos de la oficina al costado. */
.layout-contacto { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.layout-contacto h2 { color: var(--azul); font-size: 1.7rem; margin-bottom: 6px; }
.layout-contacto form.tarjeta { margin-top: 18px; }
.contacto-lado { margin-top: 62px; }   /* alinea con el borde superior del form */
.contacto-lado h3 { margin-top: 0; }

@media (max-width: 900px) {
    .layout-contacto { grid-template-columns: 1fr; }
    .contacto-lado { margin-top: 0; }
}

@media (max-width: 560px) {
    .layout-contacto .campo-fila { grid-template-columns: 1fr; }
}

/* Honeypot anti-bot: invisible para personas, tentador para robots. */
.trampa { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

.aviso { padding: 12px 15px; border-radius: 9px; font-size: .9rem; margin-bottom: 15px; }
.aviso-ok    { background: #e6f7ee; color: #14663c; border: 1px solid #bfe6d1; }
.aviso-error { background: #fdecea; color: #8f2018; border: 1px solid #f5c6c2; }

/* --- Enlaces internos por localidad y tipo (_views/enlaces-seo.php) ------ */
.enlaces-seo h2 { color: var(--azul); font-size: 1.45rem; margin-bottom: 4px; }
.enlaces-bajada { color: var(--texto-suave); margin: 0 0 22px; }

.enlaces-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.enlaces-grupo h3 {
    color: var(--azul); font-size: 1rem; margin: 0 0 12px;
}
.enlaces-grupo h3 i { color: var(--turquesa); }
.enlaces-grupo ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.enlaces-grupo a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--borde);
    border-radius: 20px;
    background: #fff;
    font-size: .87rem;
    color: var(--texto);
    transition: border-color .15s, color .15s, background .15s;
}
.enlaces-grupo a:hover { border-color: var(--turquesa); color: var(--azul); background: var(--gris); }

/* El enlace a toda la localidad encabeza su grupo. */
.enlaces-grupo a.destacado { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 500; }
.enlaces-grupo a.destacado:hover { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }

/* Variante sobre foto: mismo velo azul que el hero, para que se lea como una
   banda de marca y no como una segunda portada compitiendo con el encabezado.
   La imagen entra por `--fondo` (la setea el include) y el degradé va encima. */
.enlaces-fondo {
    background-image: linear-gradient(120deg, rgba(12, 39, 64, .9), rgba(12, 39, 64, .62)), var(--fondo);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.enlaces-fondo h2 { color: #fff; }
.enlaces-fondo .enlaces-bajada { color: rgba(255, 255, 255, .82); }
.enlaces-fondo .enlaces-grupo h3 { color: #fff; }
.enlaces-fondo .enlaces-grupo h3 i { color: #7fd8d8; }

/* Blanco a medias: deja pasar algo de la foto sin que el texto sufra. El texto
   va en azul (--azul sobre este gris azulado da ~6:1, de sobra para AA).
   Este 55% es el valor a mover si se quiere más o menos foto: por debajo de
   ~45% el azul empieza a quedar justo de contraste. */
.enlaces-fondo .enlaces-grupo a {
    background: rgba(255, 255, 255, .45);
    border-color: rgba(255, 255, 255, .55);
    color: var(--blanco);
}
.enlaces-fondo .enlaces-grupo a:hover {
    background: rgba(255, 255, 255, .85);
    border-color: #fff;
    color: var(--azul);
}

/* El de la localidad tiene que destacar entre un campo de pills blancas: va en
   turquesa sólido, el acento de la marca. */
.enlaces-fondo .enlaces-grupo a.destacado { background: var(--turquesa); border-color: var(--turquesa); color: #fff; }
.enlaces-fondo .enlaces-grupo a.destacado:hover { background: #139090; border-color: #139090; color: #fff; }

@media (max-width: 760px) {
    .enlaces-cols { grid-template-columns: 1fr; }
}

/* --- Vacío / mensajes ---------------------------------------------------- */
.vacio { text-align: center; padding: 60px 20px; color: var(--texto-suave); }
.vacio i { font-size: 2.4rem; color: var(--borde); display: block; margin-bottom: 12px; }

/* --- Pie ----------------------------------------------------------------- */
.pie { background: var(--azul-osc); color: #c6d3de; margin-top: 60px; }
.pie-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 34px; padding: 46px 20px 34px; }
.pie h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.pie a { color: #c6d3de; display: block; padding: 3px 0; font-size: .9rem; }
.pie a:hover { color: #fff; }
.pie-logo { height: 38px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); opacity: .92; }
.pie-texto { font-size: .89rem; margin: 0 0 14px; }
.pie-texto a { display: inline; }
.pie-redes { display: flex; gap: 10px; }
.pie-redes a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: grid; place-items: center; font-size: 1.05rem;
}
.pie-redes a:hover { background: var(--turquesa); color: #fff; }
.pie-contacto { list-style: none; padding: 0; margin: 0; font-size: .89rem; }
.pie-contacto li { display: flex; align-items: start; gap: 9px; padding: 4px 0; }
.pie-contacto i { flex: 0 0 16px; margin-top: 3px; opacity: .8; }
.pie-contacto a { display: inline; padding: 0; }

.pie-legal { border-top: 1px solid rgba(255,255,255,.1); padding: 15px 0; font-size: .82rem; }

/* Dos columnas centradas: lo legal y el crédito de desarrollo. */
.pie-legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    text-align: center;
}
.pie-legal-grid a { display: inline; color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pie-legal-grid a:hover { color: var(--turquesa); }

@media (max-width: 700px) {
    .pie-legal-grid { grid-template-columns: 1fr; }
}

/* --- Botón flotante de WhatsApp ------------------------------------------ */
.wsp-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.wsp-flotante:hover {
    background: #1fb955;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .34);
}

/* --- Botón flotante "Ir arriba" (08/10/2026) ----------------------------- */
/* A la izquierda del de WhatsApp, centrado con él en altura (WhatsApp mide 56
   y está a 20 del borde: su centro queda a 48). Aparece después de un par de
   pantallas de scroll: el JS le pone `.visible`. Oculto no se puede tocar. */
.arriba-flotante {
    position: fixed;
    right: 88px;
    bottom: 26px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: #fff;
    color: var(--azul);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s, visibility .2s, background .15s;
}
.arriba-flotante.visible { opacity: 1; visibility: visible; transform: none; }
.arriba-flotante:hover { background: var(--gris); }

@media (max-width: 760px) {
    .wsp-flotante { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 1.5rem; }
    /* Centro del de WhatsApp a 39 del borde: 42/2 = 21 → abajo 18. */
    .arriba-flotante { right: 74px; bottom: 18px; width: 42px; height: 42px; }
}

/* --- Responsive ---------------------------------------------------------- */
/* Grilla de 4 columnas (tarjetas de contacto). */
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cols-4 { grid-template-columns: 1fr; } }
/* Grilla de 3 columnas iguales (las tres tarjetas de /tasaciones y /nosotros,
   12/10/2026). Usaban `.props`, que es `auto-fill` de 275px: en una pantalla
   ancha armaba cuatro columnas y la cuarta quedaba vacía. */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px)  { .cols-3 { grid-template-columns: 1fr; } }

/* Fondo apenas perceptible en las tarjetas de contacto: degradé de blanco a un
   tono muy suave de la paleta costera. Para cambiarlo, tocar solo estas dos
   variables (por ejemplo a un rojo clarito: #fdf7f6 y #f6e7e4). */
.cols-4 .tarjeta {
    --grad-desde: #fbfdfe;
    --grad-hasta: #dde9ef;
    background: linear-gradient(170deg, var(--grad-desde) 0%, var(--grad-hasta) 100%);
    border-color: #cfdde5;
    display: flex;
    flex-direction: column;
}

/* Los botones quedan alineados abajo aunque los textos tengan distinto largo. */
.cols-4 .tarjeta p { flex: 1; }

/* Texto centrado de las páginas institucionales. */
.texto-central { max-width: 760px; margin: 0 auto; text-align: center; }
.texto-central h2 { color: var(--azul); font-size: 1.7rem; }
.texto-central p { color: var(--texto-suave); font-size: 1.02rem; }

@media (max-width: 980px) {
    .layout-listado, .layout-ficha { grid-template-columns: 1fr; }
    .ficha-lado { position: static; }   /* en una columna, pegajoso molesta */
    .pie-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .nav-boton {
        display: grid; place-items: center;
        width: 42px; height: 42px; border-radius: 9px;
        background: var(--gris); color: var(--azul);
        font-size: 1.4rem; cursor: pointer;
    }
    .cab-nav {
        display: none;
        position: absolute; top: 72px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--borde);
        flex-direction: column; align-items: stretch; padding: 10px;
        box-shadow: var(--sombra-alta);
    }
    .nav-toggle:checked ~ .cab-nav { display: flex; }
    .cab-wsp { margin: 6px 0 0; justify-content: center; }
    .pie-grid { grid-template-columns: 1fr; }
    .seccion { padding: 40px 0; }
}

/* Colores de las descripciones heredadas (ver descripcion_html()): el sistema
   viejo marcaba frases con text-success / text-primary / text-danger. */
.desc-success { color: #2e7d32; font-weight: 500; }
.desc-primary { color: var(--azul-claro); font-weight: 500; }
.desc-danger  { color: #c62828; font-weight: 500; }

/* Íconos dibujados en SVG (función icono() de funciones.php): los que
   Bootstrap Icons no trae —cama e inodoro—. Mismo tamaño y alineación que un
   ícono de la fuente, y el color lo toman del texto. */
.ico-svg { width: 1em; height: 1em; vertical-align: -.125em; flex: none; }