/* ---- fh-tokens ---- */
/* Film Houses · Property Advisers — tokens de marca (v1, sept. 2026)
   Fuente de verdad para la web. Derivado del dossier de captación 2026. */
:root{
  /* Color */
  --fh-marino:#273743;      /* principal: fondos, titulares sobre claro */
  --fh-arena:#c09d75;       /* acento: titulares sobre marino, líneas, iconos */
  --fh-blanco:#ffffff;
  --fh-hueso:#f4ede4;       /* fondos claros, mapa */
  --fh-piedra:#d9cbb9;      /* fondos claros secundarios */
  --fh-grafito:#4a5560;     /* texto secundario sobre claro */
  --fh-bruma:#6e98ac;       /* solo gráficos y datos, nunca texto */
  --fh-arena-55:rgba(192,157,117,.55);   /* separadores */

  /* Tipografía */
  --fh-font-display:"Helvetica Neue Condensed Bold","HelveticaNeue-CondensedBold","Barlow Condensed",Impact,sans-serif; /* titulares, siempre en mayúsculas */
  --fh-font-text:"Montserrat",Helvetica,Arial,sans-serif;
  --fh-display-lh:.94; --fh-display-ls:-.005em;
  --fh-text-lh:1.35;

  /* Escala (desktop → móvil con clamp) */
  --fh-h1:clamp(44px,6.2vw,118px);
  --fh-h2:clamp(34px,4.6vw,86px);
  --fh-h3:clamp(24px,2.4vw,46px);
  --fh-lead:clamp(18px,1.6vw,30px);
  --fh-body:clamp(16px,1.25vw,22px);
  --fh-small:14px;
  --fh-eyebrow:13px;        /* mayúsculas, letter-spacing .2em, peso 500, color arena */

  /* Forma */
  --fh-radius-card:32px;    /* tarjetas y bloques (40px en el dossier a 1920) */
  --fh-radius-tile:18px;
  --fh-radius-pill:999px;
  --fh-border-tile:2px solid var(--fh-arena);
  --fh-rule:1.5px solid var(--fh-arena-55);
  --fh-gutter:clamp(16px,3.3vw,64px);
  --fh-outline-stroke:2px; /* texto contorneado */
}
/* Titular con segunda línea contorneada (recurso principal de la marca) */
.fh-display{font-family:var(--fh-font-display);text-transform:uppercase;line-height:var(--fh-display-lh);letter-spacing:var(--fh-display-ls);font-weight:700}
.fh-outline{color:transparent;-webkit-text-stroke:var(--fh-outline-stroke) currentColor}
.fh-on-marino .fh-outline{-webkit-text-stroke-color:var(--fh-arena)}
.fh-on-claro  .fh-outline{-webkit-text-stroke-color:var(--fh-marino)}
.fh-eyebrow{font-family:var(--fh-font-text);font-size:var(--fh-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fh-arena)}
/* Botones */
.fh-btn{font-family:var(--fh-font-text);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;border-radius:var(--fh-radius-pill);text-decoration:none;display:inline-block}
.fh-btn-primary{background:var(--fh-arena);color:var(--fh-marino)}
.fh-btn-secondary{background:transparent;color:currentColor;border:2px solid currentColor}
.fh-btn-dark{background:var(--fh-marino);color:#fff}

/* ---- fh-marco ---- */
/* Film Houses - cabecera de la web nueva. */

/* En las paginas nuevas la cabecera vieja de Elementor no se pinta. */
body.fh-nuevo .elementor-location-header { display: none !important; }
body.fh-nuevo { margin: 0; }

/*
 * Palabras largas: que no empujen la pagina a lo ancho.
 *
 * Medido el 5-10-2026 con el navegador a 360 px: "Datenschutzerklarung"
 * en el h1 de la politica de privacidad alemana sacaba la pagina 61 px
 * por la derecha, y "Erfolgsgeschichten" y "Marketingunterstutzung" 5 y
 * 8 px en sus paginas. El aleman compone palabras que no caben en un
 * movil pequeno, y una palabra que no cabe desplaza la pagina entera.
 *
 * Se parten donde haga falta. En aleman, antes por guion, que es como se
 * parte de verdad: el lang de la pagina lo pone TranslatePress, asi que
 * el espanol y el ingles no cambian de aspecto.
 */
body.fh-nuevo { overflow-wrap: break-word; }

body.fh-nuevo h1, body.fh-nuevo h2, body.fh-nuevo h3,
body.fh-nuevo h4, body.fh-nuevo h5, body.fh-nuevo h6 { overflow-wrap: break-word; }

/*
 * Ningun titular se parte con guion (Madison, 11-10-2026).
 *
 * El aleman llevaba "hyphens: auto" para que las palabras largas
 * cupieran, y eso partia tambien los nombres propios: el H1 del
 * articulo del Edificio Mediterraneo salia como "PASEO MA-RITIMO".
 * Un guion que no esta en la palabra no se pone nunca en un titular.
 *
 * Lo que queda es "overflow-wrap: break-word", que corta sin guion y
 * solo cuando la palabra no cabe de ninguna manera. Y para que casi
 * nunca haga falta, en movil los titulares bajan de tamano: la palabra
 * mas larga de la web es "Bewohnbarkeitsbescheinigung", 27 letras.
 */
body.fh-nuevo h1, body.fh-nuevo h2, body.fh-nuevo h3,
body.fh-nuevo h4, body.fh-nuevo h5, body.fh-nuevo h6 { hyphens: none; }

/*
 * Y en movil el titular aleman baja un punto.
 *
 * Sin guion, "Datenschutzerklärung" pide 405 px a 44 px de letra y en
 * un movil de 375 el hueco son 343: se partia por la mitad. A 36 px
 * pide 331 y entra entera. Es la palabra mas larga de todos los
 * titulos de pagina de la web; las de las fichas son mas largas
 * -"Bewohnbarkeitsbescheinigung", 27 letras- pero su H1 va a 26 px y
 * ahi caben de sobra (318 de 351).
 *
 * Solo el aleman y solo en movil: el espanol y el ingles no tienen
 * ninguna palabra que no quepa.
 */
@media (max-width: 640px) {
    html:lang(de) body.fh-nuevo { --fh-h1: 36px; }
}

/*
 * Y ningun boton mas ancho que su sitio.
 *
 * Los botones de inline-flex no encogen por debajo de su texto entero,
 * asi que uno largo saca la pagina a lo ancho: "Ver los 19 inmuebles de
 * Miguel Gonzalez" media 436 px dentro de una columna de 328 en la
 * pagina de agente, y eso desplazaba la pagina 92 px. Con un tope del
 * 100 % el texto se parte en dos lineas y ya cabe.
 */
body.fh-nuevo .fh-btn { max-width: 100%; }
.fh-equipo-todas { text-align: center; }

.fh-cab {
    --alto: 84px;
    position: sticky; top: 0; z-index: 500;
    background: var(--fh-marino);
    font-family: var(--fh-font-text);
}

/* El cabecero va pegado arriba, asi que un salto a un ancla dejaba la
   primera franja de la seccion escondida detras. Medido: 96 px en
   ordenador y 70 en movil. Vale para todas las anclas de la web. */
:target,
#contenido, #fh-valoracion, #fh-contacto, #fh-candidatura, #fh-lv-agente { scroll-margin-top: 110px; }

@media (max-width: 900px) {
    :target,
    #contenido, #fh-valoracion, #fh-contacto, #fh-candidatura, #fh-lv-agente { scroll-margin-top: 82px; }
}

.fh-cab__barra {
    max-width: 1440px; margin: 0 auto;
    padding: 0 var(--fh-gutter);
    height: var(--alto);
    display: flex; align-items: center; gap: clamp(16px, 2.4vw, 44px);
}

.fh-cab__logo { flex: 0 0 auto; display: flex; align-items: center; }
.fh-cab__logo img { display: block; }

.fh-cab__menu { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); margin-left: auto; }
.fh-cab__menu a {
    color: var(--fh-blanco); text-decoration: none;
    font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color .18s ease, border-color .18s ease;
}
.fh-cab__menu a:hover { color: var(--fh-arena); border-bottom-color: var(--fh-arena); }

.fh-cab__acciones { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.fh-cab__tel {
    color: var(--fh-blanco); text-decoration: none; font-size: 15px; font-weight: 500;
    letter-spacing: .04em; white-space: nowrap;
}
.fh-cab__tel:hover,
.fh-cab__tel:focus-visible { color: var(--fh-arena); }

.fh-cab .fh-btn {
    font-family: var(--fh-font-text); font-weight: 600; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 13px 22px; border-radius: var(--fh-radius-pill);
    text-decoration: none; display: inline-block; white-space: nowrap; border: 0;
}
.fh-cab .fh-btn-primary { background: var(--fh-arena); color: var(--fh-marino); }
.fh-cab .fh-btn-primary:hover { opacity: .88; }

/*
 * La franja justo por encima del movil: de 1201 a 1400.
 *
 * A 1101 la cabecera se salia 84 px en aleman y 40 en espanol, y el
 * boton de valorar quedaba cortado por la derecha. Pasaba ya antes de
 * anadir Obra nueva -con KAUFEN, MIETEN, VERKAUFEN, REFERENZEN, UBER UNS
 * y KONTAKT-, porque las palabras alemanas son mas largas.
 *
 * Dos cosas: el menu horizontal empieza a 1201 en vez de a 1101, y de
 * 1201 a 1400 se aprieta todo un poco -letra, huecos y boton-. Apretando
 * solo, en aleman seguian faltando 15 px.
 */
@media (min-width: 1201px) and (max-width: 1400px) {
    .fh-cab__barra { gap: 10px; padding-inline: 16px; }
    .fh-cab__menu { gap: clamp(8px, .9vw, 16px); }
    .fh-cab__menu a { font-size: 12px; letter-spacing: .02em; }
    .fh-cab__acciones { gap: 8px; }
    .fh-cab__tel { display: none; }      /* el telefono vuelve a 1401 */
    .fh-cab .fh-btn { font-size: 11px; padding: 10px 13px; letter-spacing: .02em; }
    .fh-idioma__boton { padding: 9px 11px; font-size: 12px; }
}

.fh-cab__hamb { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.fh-cab__hamb span { display: block; width: 26px; height: 2px; background: var(--fh-blanco); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.fh-cab__hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fh-cab__hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fh-cab__hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.fh-cab__desplegable { display: none; }

@media (max-width: 1200px) {
    .fh-cab__menu, .fh-cab__tel { display: none; }
    .fh-cab__hamb { display: block; }
    .fh-cab__acciones { margin-left: auto; }
    .fh-cab__desplegable[hidden] { display: none; }
    .fh-cab__desplegable {
        display: flex; flex-direction: column; gap: 4px;
        padding: 12px var(--fh-gutter) 28px;
        background: var(--fh-marino); border-top: 1px solid rgba(255,255,255,.12);
    }
    .fh-cab__desplegable a {
        color: var(--fh-blanco); text-decoration: none; font-size: 16px; font-weight: 500;
        letter-spacing: .06em; text-transform: uppercase; padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .fh-cab__desplegable .fh-btn { margin-top: 18px; text-align: center; border-bottom: 0; }
    .fh-cab__desplegable .fh-cab__tel { display: block; text-align: center; padding-top: 14px; border-bottom: 0; }
}

@media (max-width: 600px) {
    .fh-cab { --alto: 68px; }
    .fh-cab .fh-cab__cta { display: none; }
}

/* ==================================================================
   Cabecera: mas alta, mas aire, y por debajo de la barra de
   administrador de WordPress (que solo ve quien tiene sesion).
   ================================================================== */
.fh-cab { --alto: 102px; }
body.admin-bar .fh-cab { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .fh-cab { top: 46px; } }


.fh-cab__menu { gap: clamp(16px, 2vw, 34px); }
.fh-cab__menu a { font-size: 14px; letter-spacing: .1em; }
.fh-cab .fh-btn { padding: 15px 26px; font-size: 13px; }

body.fh-nuevo .elementor-location-footer { display: none !important; }

/* ==================================================================
   Pie de pagina, con el mismo sistema que "EQUIPAMIENTO / CUENTA CON":
   antetitulo en arena, titular condensado, filas con filete fino.
   ================================================================== */
.fh-pie { font-family: var(--fh-font-text); font-weight: 300; background: var(--fh-marino); color: var(--fh-blanco); }
.fh-pie *, .fh-pie *::before, .fh-pie *::after { box-sizing: border-box; }
.fh-pie .fh-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--fh-gutter); }
.fh-pie .fh-eyebrow {
    font-family: var(--fh-font-text) !important; font-size: var(--fh-eyebrow) !important;
    font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important;
    color: var(--fh-arena) !important; margin: 0 0 14px !important;
}
.fh-pie .fh-display {
    font-family: var(--fh-font-display) !important; text-transform: uppercase !important;
    line-height: var(--fh-display-lh) !important; letter-spacing: var(--fh-display-ls) !important;
    font-weight: 700 !important; margin: 0;
}

/* --- boletin --- */
.fh-pie__boletin { background: var(--fh-hueso); color: var(--fh-grafito); padding: clamp(40px, 4.4vw, 72px) 0; }
.fh-pie__boletin-fila { display: grid; grid-template-columns: 1fr minmax(300px, 460px); gap: clamp(24px, 4vw, 72px); align-items: center; }
.fh-pie__titular { font-size: clamp(26px, 2.4vw, 42px) !important; color: var(--fh-marino) !important; margin: 0 0 10px !important; }
.fh-pie__nota { font-size: 15px; color: var(--fh-grafito); margin: 0; max-width: 46ch; }
/* Con wrap: la casilla de privacidad y el aviso van en su propia
   linea, debajo del campo y el boton. */
.fh-pie__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.fh-pie__campo { flex: 1 1 220px; display: block; }

/* Solo el campo del correo. Antes esto cogia cualquier input del
   formulario y pintaba la casilla como un cuadrado blanco. */
.fh-pie__form input[type="email"] {
    width: 100%; height: 100%; background: #fff; border: 0; border-radius: var(--fh-radius-pill);
    padding: 16px 24px; font-family: var(--fh-font-text); font-size: 15px; font-weight: 300; color: var(--fh-marino);
}
.fh-pie__form input:focus { outline: 2px solid var(--fh-arena); outline-offset: 2px; }
.fh-pie .fh-btn {
    font-family: var(--fh-font-text) !important; font-weight: 600 !important; font-size: 14px !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    padding: 16px 30px !important; border-radius: var(--fh-radius-pill) !important;
    border: 0 !important; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.fh-pie .fh-btn-primary { background: var(--fh-arena) !important; color: var(--fh-marino) !important; }
.fh-pie .fh-btn-primary:hover { opacity: .88; }
.fh-pie__ok {
    background: rgba(192, 157, 117, .18);
    border-left: 3px solid var(--fh-arena);
    border-radius: 0 6px 6px 0;
    color: var(--fh-marino);
    padding: 16px 22px; margin: 0;
    font-family: var(--fh-font-text); font-size: 15px; line-height: 1.5;
    max-width: 46ch;
}

/* --- cuerpo --- */
.fh-pie__cuerpo { padding: clamp(44px, 5vw, 86px) 0 34px; }
.fh-pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1fr; gap: clamp(24px, 3vw, 52px); }
.fh-pie__logo { display: block; width: clamp(140px, 12vw, 170px); height: auto; margin-bottom: 20px; }
.fh-pie__lema { font-size: 15px; color: rgba(255,255,255,.72); margin: 0; max-width: 34ch; }

.fh-pie__lista { list-style: none; margin: 0; padding: 0; }
.fh-pie__lista li { padding: 13px 0; border-bottom: var(--fh-rule); }
.fh-pie__lista li:first-child { border-top: var(--fh-rule); }
.fh-pie__lista a { text-decoration: none; display: block; }
/*
 * El color del enlace, heredado.
 *
 * El tema trae "a { color: #c36 }" en su reset, y un enlace dentro de
 * .fh-pie__sitio se lo llevaba: los nombres de las oficinas salian en
 * rosa. Madison, 8-10-2026.
 */
.fh-pie a, .fh-pie__sitio a, .fh-pie__dato a { color: inherit; }
.fh-pie__sitio a:hover,
.fh-pie__sitio a:focus-visible { color: var(--fh-arena); }
.fh-pie__sitio { display: block; font-size: 15px; font-weight: 500; color: var(--fh-blanco); }
.fh-pie__lista a:hover .fh-pie__sitio,
.fh-pie__lista a:focus-visible .fh-pie__sitio { color: var(--fh-arena); }
.fh-pie__dato { display: block; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 3px; }
/*
 * El aviso de la apertura, con su propia clase.
 *
 * Compartia .fh-pie__aviso con el mensaje de la lista de
 * off-market, que la redefine mas abajo en grafito: sobre marino
 * quedaba a 1,61:1 y no se leia. En Contacto y Nosotros ya iba en
 * arena, a 4,86:1, que es lo que tiene que ser en los tres sitios.
 */
.fh-pie__apertura { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-arena); margin-top: 6px; }
.fh-pie__lista--menu .fh-pie__sitio, .fh-pie__lista--menu a { font-size: 15px; font-weight: 500; color: var(--fh-blanco); }
.fh-pie__lista--menu a:hover { color: var(--fh-arena); }

.fh-pie__social { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.fh-pie__social a {
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fh-arena); text-decoration: none;
}
.fh-pie__social a:hover { color: var(--fh-blanco); }

.fh-pie__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
    padding-top: 26px; margin-top: clamp(28px, 3vw, 52px);
    border-top: var(--fh-rule); font-size: 13px; color: rgba(255,255,255,.55);
}
.fh-pie__legales { display: flex; flex-wrap: wrap; gap: 20px; }
.fh-pie__legales a { color: rgba(255,255,255,.55); text-decoration: none; }
.fh-pie__legales a:hover { color: var(--fh-arena); }

@media (max-width: 1000px) {
    .fh-pie__rejilla { grid-template-columns: 1fr 1fr; }
    .fh-pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .fh-pie__boletin-fila { grid-template-columns: 1fr; }
    .fh-pie__form { flex-direction: column; }
    .fh-pie .fh-btn { width: 100%; text-align: center; }
    .fh-pie__rejilla { grid-template-columns: 1fr; }
    .fh-pie__legal { flex-direction: column; }
}

/* =========================================================
   Cabecera recta, a todo el ancho.
   La pastilla flotante estilo Serhant no acababa de funcionar:
   el logo nunca cuadraba dentro y el cambio de color obligaba a
   usar el logo en oscuro, que no existe en la marca. Se vuelve a
   una barra recta en marino con el logo en dorado, y debajo una
   banda clara que la separa de lo que viene, como hace Sandberg.
   ========================================================= */
body.fh-nuevo .fh-cab {
    --alto: 96px;
    background: var(--fh-marino);
    padding: 0;
    box-shadow: inset 0 -1px 0 rgba(192, 157, 117, .3);
}
body.fh-nuevo .fh-cab__barra {
    max-width: 1440px;   /* el mismo que .fh-ancho: todo arranca en la misma linea */
    height: var(--alto);
    border-radius: 0;
    padding: 0 var(--fh-gutter);
    background: transparent;
    box-shadow: none;
    transition: height .25s ease;
}
body.fh-nuevo .fh-cab.is-bajado .fh-cab__barra { height: 78px; }

/* TAMANO DEL LOGO: esta es la unica regla que lo fija. Habia cinco
   repartidas entre hojas y ganaba una vieja de 144x78 dentro de una
   barra de 96, por eso se salia y al bajar se cortaba. 78x42 deja
   27 px de aire por arriba y por abajo. */
body.fh-nuevo .fh-cab__logo img {
    width: clamp(88px, 7.2vw, 104px) !important;   /* ~56 px de alto en una barra de 96 */
    height: auto !important;
    max-height: none;
}
body.fh-nuevo .fh-cab__logo--marino { display: none; }


@media (max-width: 760px) {
    body.fh-nuevo .fh-cab { --alto: 70px; }
    body.fh-nuevo .fh-cab__logo img { width: 82px !important; }
    body.fh-nuevo .fh-cab.is-bajado .fh-cab__barra { height: 64px; }
}

/* --- desplegables propios: el del sistema rompia la linea de la pagina --- */
.fh-desp { position: relative; min-width: 0; }
.fh-desp select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fh-desp__boton {
    width: 100% !important; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--fh-hueso) !important; border: 1px solid var(--fh-piedra) !important;
    border-radius: 14px !important; padding: 15px 18px !important;
    font-family: var(--fh-font-text) !important; font-size: 15px !important; font-weight: 300 !important;
    color: var(--fh-marino) !important; cursor: pointer; height: auto;
}
.fh-desp__boton:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 2px; }
.fh-desp__boton svg { flex: 0 0 auto; transition: transform .2s ease; }
.fh-desp.is-abierto .fh-desp__boton svg { transform: rotate(180deg); }
.fh-desp__lista {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
    max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--fh-piedra); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(39, 55, 67, .18);
}
.fh-desp__lista[hidden] { display: none; }
.fh-desp__lista li {
    padding: 11px 16px; border-radius: 10px; cursor: pointer;
    font-family: var(--fh-font-text); font-size: 15px; font-weight: 300; color: var(--fh-marino);
}
.fh-desp__lista li:hover, .fh-desp__lista li.is-activo { background: var(--fh-hueso); }
.fh-desp__lista li[aria-selected="true"] { background: var(--fh-arena); color: var(--fh-marino); font-weight: 500; }


/* Elementor pinta todos los input con su borde gris y su tipografia
   y gana por especificidad: hay que reponerlo entero. */
/* La casilla de privacidad y el aviso del alta. */
.fh-pie__privacidad {
    flex: 1 0 100%;
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 10px;
    font-family: var(--fh-font-text); font-size: 13px; line-height: 1.5;
    color: var(--fh-grafito);
}
.fh-pie__privacidad input { margin-top: 2px; flex: none; accent-color: var(--fh-marino); }
.fh-pie__privacidad a { color: var(--fh-marino); text-decoration: underline; }

.fh-pie__aviso {
    flex: 1 0 100%;
    margin: 10px 0 0;
    font-family: var(--fh-font-text); font-size: 13px; line-height: 1.5;
    color: var(--fh-grafito);
}
.fh-pie__aviso--mal { color: var(--fh-marino); font-weight: 600; }
.fh-pie__aviso[hidden] { display: none; }

body.fh-nuevo .fh-pie__form input[type="email"] {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--fh-piedra) !important;
    border-radius: var(--fh-radius-pill) !important;
    padding: 17px 26px !important;
    font-family: var(--fh-font-text) !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--fh-marino) !important;
    letter-spacing: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}
body.fh-nuevo .fh-pie__form input[type="email"]::placeholder {
    color: var(--fh-grafito) !important;
    font-family: var(--fh-font-text) !important;
    font-weight: 300 !important;
    opacity: .75;
}
body.fh-nuevo .fh-pie__form input[type="email"]:focus {
    outline: 2px solid var(--fh-arena) !important;
    outline-offset: 2px;
    border-color: transparent !important;
}

/* El filete del ultimo enlace del pie chocaba con el de la franja legal:
   dos rayas pegadas. Se quita la del ultimo y manda la de la franja. */
.fh-pie__lista li:last-child { border-bottom: 0; }

/* =========================================================
   Selector de idioma, en la cabecera junto al telefono
   ========================================================= */
.fh-idioma { position: relative; flex: 0 0 auto; }
.fh-idioma__boton {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent !important;
    border: 1.5px solid rgba(192, 157, 117, .45) !important;
    border-radius: var(--fh-radius-pill) !important;
    padding: 9px 15px !important;
    width: auto !important; height: auto;
    font-family: var(--fh-font-text) !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--fh-blanco) !important;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.fh-idioma__boton:hover { border-color: var(--fh-arena) !important; color: var(--fh-arena) !important; }
.fh-idioma__boton svg { transition: transform .2s ease; }
.fh-idioma.is-abierto .fh-idioma__boton svg { transform: rotate(180deg); }

.fh-idioma__lista {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
    margin: 0; padding: 6px; list-style: none; min-width: 168px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(20, 30, 38, .28);
}
.fh-idioma__lista[hidden] { display: none; }
.fh-idioma__lista a {
    display: block; padding: 11px 16px; border-radius: 10px;
    text-decoration: none; white-space: nowrap;
    font-family: var(--fh-font-text); font-size: 15px; font-weight: 400;
    color: var(--fh-marino);
}
.fh-idioma__lista a:hover { background: var(--fh-hueso); }
.fh-idioma__lista a[aria-current] { background: var(--fh-arena); font-weight: 600; }

/* En el panel del movil van en fila, sin desplegable. */
.fh-cab__idiomas { display: flex; gap: 10px; padding-top: 16px; flex-wrap: wrap; }
.fh-cab__idiomas a {
    padding: 8px 14px; border: 1px solid rgba(192, 157, 117, .45);
    border-radius: var(--fh-radius-pill); text-decoration: none;
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 600;
    letter-spacing: .1em; color: var(--fh-blanco); border-bottom: 1px solid rgba(192, 157, 117, .45) !important;
}
.fh-cab__idiomas a.is-activo { background: var(--fh-arena); color: var(--fh-marino); border-color: var(--fh-arena); }

@media (max-width: 1200px) {
    .fh-idioma { display: none; }   /* en movil va dentro del panel */
}
@media (min-width: 1201px) {
    .fh-cab__idiomas { display: none; }
}

/* El desplegable de zonas del pie. Los enlaces estan siempre en el HTML,
   abierto o cerrado: lo unico que hace <details> es ensenarlos o no. */
.fh-pie__desplegable > summary {
    cursor: pointer; list-style: none; font-size: 15px; font-weight: 500;
    color: var(--fh-blanco); padding: 13px 0; border-top: var(--fh-rule);
    border-bottom: var(--fh-rule); display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}
.fh-pie__desplegable > summary::-webkit-details-marker { display: none; }
.fh-pie__desplegable > summary::after { content: "+"; font-size: 18px; line-height: 1; opacity: .7; }
.fh-pie__desplegable[open] > summary::after { content: "–"; }
.fh-pie__desplegable > summary:hover { color: var(--fh-arena); }
.fh-pie__desplegable > summary:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 3px; }
.fh-pie__desplegable .fh-pie__lista { margin-top: 2px; }
.fh-pie__desplegable .fh-pie__lista li { padding: 13px 0; }
.fh-pie__desplegable .fh-pie__lista li:first-child { border-top: 0; }

/* Las migas de pan.
   Viven aqui y no en fh-paginas.css porque la ficha no carga ese fichero:
   salian como una lista numerada con los enlaces del tema, en rosa. */
.fh-migas { margin: 0 0 18px; font-size: 13px; line-height: 1.4; }
.fh-migas ol {
    list-style: none; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px; margin: 0; padding: 0;
}
.fh-migas li { display: flex; align-items: center; gap: 8px; margin: 0; }
.fh-migas li + li::before { content: "\203A"; opacity: .45; }
.fh-migas a {
    text-decoration: none; color: inherit; opacity: .72;
    border-bottom: 1px solid transparent;
}
.fh-migas a:hover { opacity: 1; color: var(--fh-arena); border-bottom-color: var(--fh-arena); }
.fh-migas a:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 3px; }
.fh-migas li[aria-current] { opacity: .55; }

/*
 * El segundo rotulo de la columna de zonas: "Vender" debajo de
 * "Comprar por zona".
 *
 * Lleva por encima el mismo aire que tienen los demas rotulos del
 * pie respecto a lo que hay encima, que es el padding de arriba de
 * .fh-pie__cuerpo: clamp(44px, 5vw, 86px). Asi cuadra tanto en
 * ordenador como en movil.
 *
 * .fh-pie .fh-eyebrow pone "margin: 0 0 14px" con !important. Con dos
 * !important enfrentados no manda el orden, manda el peso del
 * selector: con una sola clase perdia y el margen se quedaba en
 * cero. Por eso van tres clases delante.
 */
.fh-pie .fh-pie__col--zonas .fh-pie__eyebrow--segundo {
    margin-top: clamp(44px, 5vw, 86px) !important;
    margin-bottom: 14px !important;
}

/* Punto 114: el monograma del pie, centrado (5-10-2026). */
.fh-pie__marca { display: grid; justify-items: center; text-align: center; }
.fh-pie__logo  { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   Tres ajustes de espacio del pie. Madison, 6-10-2026.
   --------------------------------------------------------------- */

/*
 * 1 · La frase, justo debajo del logo.
 *
 * .fh-pie__marca es una rejilla de dos filas que se estiraba hasta la
 * altura de la columna mas alta, y el reparto dejaba 127 px entre el
 * logo y la frase. Con "align-content: start" las dos filas se quedan
 * arriba, juntas.
 */
.fh-pie__marca { align-content: start; }

/*
 * 2 · "Vender por zona", a la misma distancia que el resto.
 *
 * Tenia hasta 86 px por arriba, el doble que la separacion entre
 * columnas del pie, que es clamp(24px, 3vw, 52px).
 */
.fh-pie .fh-pie__col--zonas .fh-pie__eyebrow--segundo {
    margin-top: clamp(24px, 3vw, 52px) !important;
}

/*
 * 3 · Aire entre la ultima de "Explorar" y la linea de abajo.
 *
 * El bloque legal lleva "padding-top: 26px" y un margen por arriba, pero
 * los perdia los dos: comparte elemento con .fh-ancho, que trae
 * "padding: 0 var(--fh-gutter)" y "margin: 0 auto" en forma corta, pesa
 * lo mismo y va despues. Resultado: 0 px, "Actualidad" pegada a la
 * linea. Con .fh-pie delante vuelve a mandar el del pie.
 */
.fh-pie .fh-pie__legal {
    padding-top: 26px;
    margin-top: clamp(28px, 3vw, 52px);
}

@media (min-width: 900px) {
    /* En escritorio la marca comparte fila con el resto: solo el logo se centra en su columna. */
    .fh-pie__marca { justify-items: center; }
}

/*
 * El bloque off-market del pie, en movil.
 *
 * El formulario es flex y la linea de la privacidad se colaba entre el
 * campo y el boton al partirse: medidos 172 px de hueco a 375 px.
 * Poniendola al final en el orden visual, el boton vuelve junto al
 * campo. Madison, 5-10-2026.
 */
@media (max-width: 760px) {
    body.fh-nuevo .fh-pie__form { flex-wrap: wrap; gap: .6rem; }
    body.fh-nuevo .fh-pie__form > label:not(.fh-pie__privacidad) { flex: 1 1 100%; }
    body.fh-nuevo .fh-pie__form > button { flex: 1 1 100%; order: 2; }
    body.fh-nuevo .fh-pie__privacidad { flex: 1 1 100%; order: 3; margin-top: .2rem; }
}

/* ===============================================================
   Sitio para la tilde de las mayúsculas
   Madison, 6-10-2026.

   La tipografía de titulares va en line-height .94 (--fh-display-lh),
   que es menos que el cuerpo de la letra. En mayúsculas sin acento no
   se nota, pero "CALVIÀ", "TAMBIÉN" o "ÁTICO" sacan la tilde fuera de
   su línea: unos 6 px en un titular de 47. Si justo encima hay una
   tarjeta o una foto, la tilde queda tapada.

   No se toca el line-height, que es la letra de la marca: se le da
   sitio dentro del propio titular.
   =============================================================== */
/*
 * .15em, no .08: con .08 el texto seguia saliendose 2,7 px de su caja y
 * el problema no desaparecia, solo encogia. Medido sobre un titular de
 * 47 px: se salia 6,5 px, que son .138em. Con .15em no se sale nada, en
 * los tres idiomas, incluidas las dieresis alemanas, que son las que
 * mas suben.
 */
/* .17em y no .15: el peor caso medido, la "A" con dieresis del aleman en
 * mayusculas, se quedaba a 0,15 px del borde. Con .17em sobra sitio. */
body.fh-nuevo .fh-display { padding-top: .17em; }

/*
 * Y un respiro sobre el titular que va detras de una rejilla de
 * tarjetas: "Tambien cerca, en Calvia" salia pegado a la tarjeta de
 * arriba, que es justo donde la tilde se queda tapada. No lleva clase
 * propia, asi que se coge por lo que tiene delante.
 */
body.fh-nuevo .fh-lv-inmuebles .fh-rejilla + * { margin-top: clamp(28px, 3vw, 40px); }
body.fh-nuevo .fh-promocion .fh-rejilla + * { margin-top: clamp(28px, 3vw, 40px); }

/* ===============================================================
   LA ETIQUETA SOBRE FOTO · una sola regla para todas
   ---------------------------------------------------------------
   Ficha, tarjeta de listado, promocion y Casos de exito llevan la
   misma pildora. Hasta hoy no: fh-marco.css pedia 11px con relleno
   5/10 y fh-ficha.css pedia 14px con relleno 11/22, asi que ganaba
   una declaracion de cada y la etiqueta de la ficha nunca salio del
   tamano con que se diseno.

   Aqui estan el tamano, el relleno, el espaciado y la forma. Los
   demas sitios solo ponen color y posicion. Si hay que cambiar el
   aspecto de las etiquetas, se cambia aqui y en ningun otro lado.

   12px: a 11px el texto caia en medio pixel y se veia blando.
   Madison, 10-10-2026.
   =============================================================== */
.fh-marca,
.fh-ficha__marca,
.fh-promocion__marca,
.fh-vend-entrada__sello,
.fh-promo-grande__sello,
.fh-vend-sello {
    white-space: nowrap;
    /*
     * 11px y relleno 10 (antes 12px y 14), para que dos etiquetas
     * quepan en la misma fila tambien en un movil estrecho.
     *
     * Medido en staging a 360 px de ancho, con 316 de hueco:
     *   "Exclusiva FH" + "Obra nueva"              263 -> 211
     *   "FH Exclusive" + "New build"               251 -> 210
     *   "FH-Exklusiv"  + "Neubau"                  220 -> 184
     *   "9 viviendas * 3 disponibles" + "Exclusiva FH"
     *                                       371 (dos filas) -> 309
     * Deja de valer la nota del 10-10 sobre los 12px: alli el problema
     * era una etiqueta cortada, y ahora no se corta ninguna.
     * Madison, 13-10-2026.
     */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 10px;
    line-height: 1.2;
    border-radius: var(--fh-radius-pill);
    box-shadow: none;
}
/*
 * La tira de etiquetas no se come la foto, pero ninguna se corta.
 *
 * El 6-10-2026 se puso en una sola fila con overflow: hidden, pensando
 * que lo que no cupiera se quedaria fuera entero. No es lo que hace:
 * con dos etiquetas anchas -"Obra nueva" y "Vendida con FH" suman 288px
 * en una tira de 254- la primera se sale por la izquierda y se lee
 * "RA NUEVA". Una etiqueta cortada a media palabra es peor que dos
 * filas, y el 30c pide que dos etiquetas no se corten.
 *
 * Asi que pasan a la segunda fila. Siguen sin salirse de la foto por el
 * max-width, y con dos o tres etiquetas son dos filas como mucho.
 * Madison, 10-10-2026.
 */
.fh-galeria__marcas,
.fh-ficha__marcas,
.fh-tarjeta__marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /*
     * El mismo margen a la derecha que a la izquierda.
     *
     * La tira se coloca a 14px del borde izquierdo de la foto, pero
     * solo se le restaban 12: el hueco de la derecha salia siempre 2px
     * mas corto que el de la izquierda, y con una pareja larga se
     * quedaba en nada. Medido el 13-10 en obra nueva a 834px de ancho:
     * "9 viviendas * 4 disponibles" + "Exclusiva FH" dejaba 14 a la
     * izquierda y 5 a la derecha. Con 28 los dos huecos son iguales.
     */
    max-width: calc(100% - 28px);
}

/* La trampa para robots: no se ve, no se tabula y no se lee en voz alta. */
.fh-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===============================================================
   EL ROSA DEL TEMA, ANULADO PARA TODA LA WEB
   ---------------------------------------------------------------
   hello-elementor trae en su reset:

       a { color: #c36 }
       a:active, a:hover { color: #336 }

   Asi que cualquier enlace que no lleve un color nuestro sale en
   rosa. Se habia ido tapando sitio por sitio -el pie el 8-10-2026,
   la pagina de Portals Nous el 10-10-2026- y seguia saliendo en el
   buscador ("Quitar los filtros"), en las legales y en cualquier
   enlace nuevo.

   Aqui se anula de raiz: los enlaces heredan el color de su seccion,
   que es lo que hace el resto de la web.

   El :where() deja la especificidad en la del selector "a" a secas,
   igual que la del tema, y esta hoja carga despues. Asi gana esta por
   orden, y CUALQUIER regla nuestra con clase -.fh-enlace, .fh-btn,
   .fh-enlace-sutil- sigue ganando a las dos.

   Madison, 10-10-2026.
   =============================================================== */
:where(body) a { color: inherit; }
:where(body) a:hover,
:where(body) a:active { color: inherit; }

/* El boton de Unete en Nosotros y Contacto, centrado y con aire. */
/* ---------------------------------------------------------------
   La franja de Unete (Madison, 12-10-2026)
   ---------------------------------------------------------------
   Era un boton solo, centrado en una banda crema vacia. Ahora el
   titular y la frase a la izquierda y el boton a la derecha; por
   debajo de 860 px, uno encima del otro.
   --------------------------------------------------------------- */
/*
 * El fondo lo pone la propia franja y no el modificador --arena: esa
 * regla vive en fh-custom.css, que no se carga en todas las paginas, y
 * la banda salia transparente.
 */
.fh-unete-cta { background: var(--fh-arena); padding: clamp(34px, 3.6vw, 58px) 0 !important; }
.fh-unete-cta__caja {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 56px);
    padding: 0 var(--fh-gutter);
}
.fh-unete-cta__texto { max-width: 54ch; }
.fh-unete-cta__titulo {
    font-size: clamp(26px, 2.4vw, 40px) !important;
    color: var(--fh-marino) !important;
    margin: 0 0 12px !important;
}
/*
 * El color va con body.fh-nuevo y con !important: sin eso ganaba la
 * regla de los parrafos de la plantilla y la frase salia en grafito
 * sobre arena, con un contraste de 2,25. Asi queda en 6,4.
 */
body.fh-nuevo .fh-unete-cta .fh-unete-cta__frase,
.fh-unete-cta__frase {
    font-family: var(--fh-font-text) !important;
    font-size: clamp(15px, 1.1vw, 17px) !important;
    line-height: var(--fh-text-lh, 1.6) !important;
    color: var(--fh-marino) !important;
    margin: 0 !important;
}
.fh-unete-cta__boton { flex: 0 0 auto; }

/* El fondo arena ya es claro: el boton va en marino para que se vea. */
.fh-unete-cta .fh-unete-cta__boton {
    background: var(--fh-marino) !important;
    color: var(--fh-blanco) !important;
}

/* El enlace de Contacto, una linea y nada mas. */
.fh-unete-pie { padding: clamp(22px, 2.4vw, 34px) 0 !important; }
.fh-unete-linea { margin: 0; font-family: var(--fh-font-text); font-size: 15px; }
.fh-unete-linea a { color: var(--fh-marino); text-decoration: underline; text-underline-offset: 3px; }
.fh-unete-linea a:hover { color: var(--fh-arena); }

@media (max-width: 860px) {
    /*
     * En movil el boton se estiraba de borde a borde, pegado a los dos
     * lados. Se le deja el mismo margen lateral que al resto y no mas
     * ancho del que necesita.
     */
    .fh-unete-cta__caja {
        flex-direction: column; align-items: flex-start;
        padding-left: 16px; padding-right: 16px;
    }
    .fh-unete-cta__caja .fh-btn { width: auto; }
}

/*
 * Las tarjetas de un edificio dentro de un articulo (11-10-2026).
 *
 * De una en una, no en rejilla. La columna de lectura de un articulo
 * son 716 px, no el ancho de la web, y la tarjeta es horizontal -foto
 * al 42 %, texto al lado-. En dos columnas la foto se quedaba en
 * 128 px: la del cartel "Vendida con FH" lo cortaba, el sobretitulo
 * "Son Armadams - Ref. FH1268" caia en cuatro lineas y el titulo se
 * partia por la mitad. A todo lo ancho la foto son 300 px, como en un
 * listado. Medido a 1280 px.
 */
.fh-rejilla.fh-edif-rejilla { grid-template-columns: 1fr; }

/*
 * Y la letra de la tarjeta, la suya.
 *
 * El cuerpo de un articulo pone "clamp(16px, 1.2vw, 19px)" a todos sus
 * parrafos, y una tarjeta esta hecha de parrafos: dentro del articulo
 * le inflaba el sobretitulo de 12 a 16 px, los datos de 14 a 16 y el
 * precio de 22 a 19. Por eso "Palma - Son Armadams - Ref. FH1268"
 * pedia 399 px donde caben 315 y se partia en dos lineas.
 *
 * Aqui se le devuelven sus tamanos, los mismos que en un listado.
 *
 * Con !important porque la regla del articulo lo lleva: sin el, una
 * regla mas especifica que la suya sigue perdiendo.
 */
.fh-articulo .fh-articulo__cuerpo .fh-edif-rejilla .fh-ficha__sitio  { font-size: 12px !important; letter-spacing: .14em !important; line-height: 1.5; }
.fh-articulo .fh-articulo__cuerpo .fh-edif-rejilla .fh-ficha__titulo { font-size: 20px !important; }
.fh-articulo .fh-articulo__cuerpo .fh-edif-rejilla .fh-ficha__datos  { font-size: 14px !important; }
.fh-articulo .fh-articulo__cuerpo .fh-edif-rejilla .fh-ficha__precio { font-size: 22px !important; }

/* ---------------------------------------------------------------
   Las tablas, en toda la web (norma de Madison, 11-10-2026)
   ---------------------------------------------------------------
   Texto centrado en cada celda, en vertical y en horizontal, con
   relleno para que respire, y la tabla centrada en la pagina. En movil
   se lee sin salirse de la pantalla.

   Antes, en los articulos, las celdas llevaban "padding: 12px 14px 12px 0":
   sin relleno por la izquierda, el texto quedaba pegado al borde.
   --------------------------------------------------------------- */
.fh-articulo .fh-articulo__cuerpo table,
.fh-legal table,
.fh-ficha-pag table,
.fh-landing table { margin-left: auto; margin-right: auto; }

.fh-articulo .fh-articulo__cuerpo th,
.fh-articulo .fh-articulo__cuerpo td,
.fh-legal table th,
.fh-legal table td,
.fh-ficha-pag table th,
.fh-ficha-pag table td,
.fh-landing table th,
.fh-landing table td {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
}

/*
 * En movil, sin ancho minimo: la tabla de un articulo lo tiene en
 * 580 px para poder desplazarse, y en una pantalla de 375 eso es salirse
 * por el lado. Sin el, las dos columnas se reparten el ancho y el texto
 * baja de linea, que se lee igual de bien.
 */
@media (max-width: 640px) {
    .fh-articulo .fh-articulo__cuerpo table { min-width: 0; font-size: 14px; }

    .fh-articulo .fh-articulo__cuerpo th,
    .fh-articulo .fh-articulo__cuerpo td,
    .fh-ficha-pag table th,
    .fh-ficha-pag table td,
    .fh-landing table th,
    .fh-landing table td { padding: 11px 12px; }

    /*
     * La tabla de la politica de cookies tiene cuatro columnas y pedia
     * 432 px en una pantalla de 375: la pagina entera se desplazaba de
     * lado. Con el ancho repartido y la letra algo menor cabe, y las
     * palabras largas -nombres de cookies- parten donde haga falta.
     */
    .fh-legal table { width: 100%; table-layout: fixed; font-size: 13px; }

    .fh-legal table th,
    .fh-legal table td { padding: 8px 6px; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------
   El bloque de "habla con nosotros" dentro de un articulo
   ---------------------------------------------------------------
   Mismo problema que las tarjetas: el cuerpo del articulo pone
   "!important" al tamano y al color de sus parrafos y titulos, y este
   bloque esta hecho de parrafos. Dentro del articulo salia todo a
   16 px y en gris grafito -el titular, los dos rotulos de columna, el
   nombre del agente y su cargo-, ilegible sobre el fondo oscuro, y
   "Schreiben Sie uns" con 3,2 px de separacion entre letras se partia
   en dos lineas.

   Aqui se le devuelven sus tamanos y su color. Medido a 1280 y a
   375 px. Madison, 11-10-2026.
   --------------------------------------------------------------- */
/* El titular, del tamano de los H2 del propio articulo: con el de una
   seccion de pagina entera -59 px- el aleman caia en cuatro lineas. */
.fh-articulo .fh-articulo__cuerpo .fh-habla__rotulo {
    font-size: clamp(26px, 2.2vw, 38px) !important;
    color: var(--fh-marino) !important;
}

.fh-articulo .fh-articulo__cuerpo .fh-habla__sub {
    font-size: var(--fh-eyebrow, 12px) !important;
    letter-spacing: .2em !important;
    color: var(--fh-arena) !important;
}

.fh-articulo .fh-articulo__cuerpo .fh-habla__nombre { font-size: 19px !important; }
.fh-articulo .fh-articulo__cuerpo .fh-habla__cargo  { font-size: 15px !important; }

.fh-articulo .fh-articulo__cuerpo .fh-habla__nombre,
.fh-articulo .fh-articulo__cuerpo .fh-habla__texto,
.fh-articulo .fh-articulo__cuerpo .fh-habla__intro p { color: var(--fh-grafito) !important; }

.fh-articulo .fh-articulo__cuerpo .fh-habla__texto {
    font-size: clamp(16px, 1.1vw, 18px) !important;
}

/* La entradilla: el ancho de lectura del bloque, no el del articulo. */
.fh-habla__intro { max-width: 68ch; margin: 0 0 clamp(28px, 3vw, 44px); }
.fh-habla__intro p:last-child { margin-bottom: 0; }

/*
 * Y menos aire por arriba: dentro de un articulo el bloque venia con
 * los 89 px de una seccion de pagina entera, y encima ya hay un
 * parrafo. Madison lo vio como "mucho espacio vacio arriba".
 */
.fh-articulo .fh-articulo__cuerpo .fh-habla--articulo { padding-top: clamp(28px, 3vw, 48px); }

/* ------------------------------------------------------------------
   El bloque de alta off-market, dentro de un articulo
   Madison, 13-10-2026. Mismo bloque que el del pie, pero la columna
   del texto es estrecha: aqui va siempre en una sola columna, y con
   fondo blanco para que se distinga del hueso del articulo.
   ------------------------------------------------------------------ */
.fh-pie__boletin--articulo {
    margin: clamp(30px, 3.2vw, 48px) 0;
    padding: clamp(22px, 2.4vw, 34px);
    border-radius: var(--fh-radius-card);
    background: var(--fh-blanco);
    border: 1px solid rgba(39, 55, 67, .12);
}
.fh-pie__boletin--articulo .fh-ancho {
    width: 100%; max-width: none; padding-left: 0; padding-right: 0;
}

/* Una columna siempre: lo que manda el ancho aqui es la caja, no la
   ventana, y una consulta de medios no sabe nada de la caja. */
.fh-pie__boletin--articulo .fh-pie__boletin-fila {
    grid-template-columns: 1fr;
    gap: clamp(16px, 1.8vw, 24px);
}
.fh-pie__boletin--articulo .fh-pie__titular { font-size: clamp(22px, 1.9vw, 30px) !important; margin-bottom: 8px !important; }
.fh-pie__boletin--articulo .fh-pie__nota { max-width: none; }
.fh-pie__boletin--articulo .fh-pie__form { flex-wrap: wrap; }
.fh-pie__boletin--articulo .fh-pie__form > label:not(.fh-pie__privacidad) { flex: 1 1 220px; }
.fh-pie__boletin--articulo .fh-pie__privacidad { flex: 1 1 100%; }

/* ---------------------------------------------------------------
   Las cifras que llevan a alguna parte
   --------------------------------------------------------------- */

/*
 * El enlace no se nota: hereda color y tamano y no lleva subrayado. Al
 * pasar el raton, la cifra entera se aclara un punto y nada mas; ni
 * color nuevo ni raya. La opacidad va en el enlace y no en el numero
 * porque .fh-cifra__num tiene un opacity: 1 !important en la portada.
 * Madison, 16-10-2026.
 */
.fh-cifra__enlace {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity .18s ease;
}

/*
 * Pep, 20-10-2026: dorado al pasar el raton y con el teclado, y cursor
 * de mano. En reposo no cambia nada.
 *
 * El dorado va en el numero y no en el pie, igual que ya lo hacia
 * .fh-ofp-resenas en las dos paginas de oficina. El pie son 14 px y en
 * dorado sobre hueso se queda en 2,17 de contraste; el numero es grande
 * y ahi el dorado es un aviso, no el texto que hay que leer.
 *
 * Con !important porque .fh-portada .fh-cifra__num ya trae su color
 * marino con !important.
 */
.fh-cifra__enlace { cursor: pointer; }

.fh-cifra__enlace:hover .fh-cifra__num,
.fh-cifra__enlace:focus-visible .fh-cifra__num {
    color: var(--fh-arena) !important;
}

.fh-cifra__enlace:focus-visible {
    outline: 2px solid var(--fh-arena);
    outline-offset: 6px;
    border-radius: 4px;
}

/*
 * La muesca del iPhone en horizontal.
 *
 * Al poner viewport-fit=cover (23-10-2026) la pagina pasa a ocupar
 * TODA la pantalla, incluidos los laterales. En vertical no se nota,
 * pero con el movil girado la muesca se come entre 44 y 59 px de un
 * lado, y el contenedor solo tiene 12 px de margen: el texto quedaria
 * debajo.
 *
 * Con max() el margen es el mayor de los dos, asi que en un movil sin
 * muesca -o en un ordenador- env() vale 0 y todo queda exactamente
 * como estaba. No hay media query porque no hace falta: el propio
 * env() ya es 0 cuando no hay area segura.
 *
 * Va en todo lo que llega a los bordes: el contenedor general, la
 * barra de la cabecera y las dos barras fijas de abajo.
 * Madison, 23-10-2026.
 */
.fh-ancho,
.fh-pie .fh-ancho,
.fh-cab__barra,
.fh-barra__fila {
    padding-left: max(var(--fh-gutter), env(safe-area-inset-left));
    padding-right: max(var(--fh-gutter), env(safe-area-inset-right));
}

.fh-promo-barra {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
}

/* ---- fh-portada ---- */
/* Film Houses - portada. Construida sobre filmhouses-brand-tokens.css.
   Secciones a pagina completa, alternando marino y hueso; nunca dos marinos seguidos. */

.fh-portada { font-family: var(--fh-font-text); font-weight: 300; line-height: var(--fh-text-lh); }
.fh-portada *, .fh-portada *::before, .fh-portada *::after { box-sizing: border-box; }

.fh-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--fh-gutter); }

.fh-seccion { padding: clamp(56px, 7vw, 128px) 0; }
.fh-seccion--marino { background: var(--fh-marino); color: var(--fh-blanco); }
.fh-seccion--hueso  { background: var(--fh-hueso);  color: var(--fh-grafito); }

.fh-portada .fh-display { font-family: var(--fh-font-display); text-transform: uppercase;
    line-height: var(--fh-display-lh); letter-spacing: var(--fh-display-ls); font-weight: 700; margin: 0; }
.fh-portada .fh-eyebrow { font-family: var(--fh-font-text); font-size: var(--fh-eyebrow); font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; }
/* El color lo pone fh-custom.css: arena sobre marino, grafito sobre claro.
   Aqui se fijaba arena para todos y sobre hueso daba 2,17 de contraste. */

/* --- hero --- */
.fh-hero { padding-top: clamp(64px, 9vw, 152px); }
.fh-hero__titulo { font-size: var(--fh-h1); color: var(--fh-arena); margin-bottom: 20px; }
.fh-hero__lead { font-size: var(--fh-lead); font-weight: 300; color: rgba(255,255,255,.82);
    max-width: 44ch; margin: 0 0 clamp(28px, 3.5vw, 48px); }
.fh-hero .fh-buscador { background: transparent; padding: 0; border-radius: 0; max-width: none; }
.fh-hero .fh-buscador__lista { left: 0; right: 0; }

/* --- cifras --- */
.fh-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 72px); }
.fh-cifra__num { font-size: clamp(44px, 5.4vw, 92px); color: var(--fh-marino); margin-bottom: 4px; }
.fh-cifra__pie { font-size: var(--fh-small); color: var(--fh-grafito); margin: 0; }

/* --- cabecera de seccion --- */
.fh-seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(28px, 3.5vw, 48px);
    border-bottom: var(--fh-rule); }
.fh-seccion__titulo { font-size: var(--fh-h2); }
.fh-seccion--marino .fh-seccion__titulo { color: var(--fh-blanco); }
.fh-seccion--hueso  .fh-seccion__titulo { color: var(--fh-marino); }

.fh-enlace { font-family: var(--fh-font-text); font-size: var(--fh-small); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--fh-arena);
    text-decoration: none; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.fh-enlace span { transition: transform .18s ease; }
.fh-enlace:hover span { transform: translateX(4px); }

/* --- tarjetas de propiedad: foto a la izquierda (manual, seccion 14) --- */
.fh-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.fh-ficha { display: grid; grid-template-columns: 42% 1fr; background: var(--fh-blanco);
    border-radius: var(--fh-radius-card); overflow: hidden; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease; min-height: 232px; }
.fh-ficha:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39,55,67,.18); }

/* La foto llena su celda y no manda sobre el alto de la tarjeta.
   Con la imagen en el flujo, la primera de cada rejilla -que se carga con
   prioridad y sin lazy- estiraba su fila: en las landings la primera fila
   media 437 px y las demas 232. Fuera del flujo, todas miden igual. */
.fh-ficha__foto { position: relative; background: var(--fh-piedra); overflow: hidden; }
.fh-ficha__foto img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.fh-ficha__marcas { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Tamano, relleno y forma: fh-marco.css. Aqui solo el color. */
.fh-ficha__marca { background: var(--fh-marino); color: var(--fh-hueso); }

.fh-ficha__cuerpo { padding: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; }
.fh-ficha__sitio { margin-bottom: 8px; }
.fh-ficha__titulo { font-size: clamp(20px, 1.5vw, 27px); color: var(--fh-marino); margin-bottom: 10px; }
.fh-ficha__datos { font-size: var(--fh-small); color: var(--fh-grafito); margin: 0 0 auto; }
.fh-ficha__precio { font-size: clamp(22px, 1.7vw, 30px); color: var(--fh-marino); margin-top: 18px; }

/* --- llamada a la accion --- */
.fh-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.fh-cta__titulo { font-size: var(--fh-h2); color: var(--fh-arena); margin-bottom: 14px; }
.fh-cta__texto { font-size: var(--fh-body); font-weight: 300; color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; }
.fh-portada .fh-btn { font-family: var(--fh-font-text); font-weight: 600; font-size: 15px; letter-spacing: .06em;
    text-transform: uppercase; padding: 18px 34px; border-radius: var(--fh-radius-pill);
    text-decoration: none; display: inline-block; white-space: nowrap; transition: opacity .18s ease; }
.fh-portada .fh-btn-primary { background: var(--fh-arena); color: var(--fh-marino); }
.fh-portada .fh-btn-primary:hover { opacity: .88; }

/* --- noticias y mapa --- */
.fh-noticias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fh-noticia, .fh-mapa { background: var(--fh-blanco); border-radius: var(--fh-radius-card);
    overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease; }
.fh-noticia:hover, .fh-mapa:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39,55,67,.14); }
.fh-noticia__foto { aspect-ratio: 16 / 10; background: var(--fh-piedra); }
.fh-noticia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-noticia .fh-eyebrow { padding: 20px 22px 0; margin-bottom: 8px; }
.fh-noticia__titulo { font-family: var(--fh-font-text); font-weight: 500; font-size: 17px;
    line-height: 1.35; color: var(--fh-marino); margin: 0; padding: 0 22px; }

/*
 * La tarjeta no tiene relleno propio: lo pone cada pieza.
 *
 * El resumen y el pie se anadieron sin el, asi que llegaban al borde
 * mientras la fecha y el titulo se quedaban a 22 px. Madison lo vio en
 * la captura del 5-10-2026. Aqui van los tres con el mismo margen, y el
 * ultimo con el aire de abajo.
 */
.fh-noticia__resumen { padding: 0 22px; }
.fh-noticia__pie     { padding: 0 22px; }
.fh-noticia > *:last-child { padding-bottom: 22px; }
.fh-noticia__titulo:last-child { padding-bottom: 24px; }

.fh-mapa { background: var(--fh-marino); padding: 24px 22px; justify-content: space-between; }
.fh-mapa__titulo { font-size: clamp(22px, 1.7vw, 30px); color: var(--fh-blanco); margin: 0 0 18px; }

/* --- movil --- */
@media (max-width: 900px) {
    .fh-rejilla { grid-template-columns: 1fr; }
    .fh-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .fh-cifras { grid-template-columns: 1fr; gap: 28px; text-align: left; }
    .fh-noticias { grid-template-columns: 1fr; }
    .fh-ficha { grid-template-columns: 1fr; min-height: 0; }
    .fh-ficha__foto { aspect-ratio: 16 / 10; }
    .fh-seccion__cabecera { align-items: flex-start; }
    .fh-cta { flex-direction: column; align-items: flex-start; }
    /*
     * En movil el boton ocupa toda la fila, pero .fh-btn lleva
     * white-space: nowrap y el texto seguia en una sola linea: "Ver los
     * 19 inmuebles de Miguel Gonzalez" medía 436 px y sacaba la pagina
     * 92 px por la derecha a 360. Aqui se deja partir.
     */
    .fh-portada .fh-btn { width: 100%; max-width: 100%; text-align: center; white-space: normal; }
}

/* ------------------------------------------------------------------
   Elementor aplica su tipografia global a h1-h4, p y a, y gana en
   especificidad. Dentro de la portada reponemos lo nuestro.
   ------------------------------------------------------------------ */
.fh-portada h1, .fh-portada h2, .fh-portada h3, .fh-portada h4,
.fh-portada p, .fh-portada a {
    font-family: var(--fh-font-text);
    color: inherit;
}

/* El buscador trae su propia paleta: el reset de arriba no debe tocarlo. */
.fh-portada .fh-buscador__icono { color: var(--fh-arena) !important; }
.fh-portada .fh-buscador__input { color: var(--fh-marino) !important; }
.fh-portada .fh-buscador__nombre { color: var(--fh-marino) !important; }
.fh-portada .fh-buscador__num,
.fh-portada .fh-buscador__madre { color: #8B96A1 !important; }
.fh-portada .fh-buscador__nombre mark { color: var(--fh-arena) !important; }

.fh-portada .fh-display {
    font-family: var(--fh-font-display) !important;
    text-transform: uppercase !important;
    line-height: var(--fh-display-lh) !important;
    letter-spacing: var(--fh-display-ls) !important;
    font-weight: 700 !important;
}

.fh-portada .fh-eyebrow {
    font-size: var(--fh-eyebrow) !important;
    letter-spacing: .2em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

.fh-portada .fh-hero__titulo   { font-size: var(--fh-h1) !important; color: var(--fh-arena) !important; }
.fh-portada .fh-hero__lead     { font-size: var(--fh-lead) !important; color: rgba(255,255,255,.82) !important; }
.fh-portada .fh-seccion__titulo{ font-size: var(--fh-h2) !important; }
.fh-seccion--marino .fh-seccion__titulo { color: var(--fh-blanco) !important; }
.fh-seccion--hueso  .fh-seccion__titulo { color: var(--fh-marino) !important; }
.fh-portada .fh-cifra__num     { font-size: clamp(44px, 5.4vw, 92px) !important; color: var(--fh-marino) !important; }
.fh-portada .fh-cifra__pie     { font-size: var(--fh-small) !important; color: var(--fh-grafito) !important; }
.fh-portada .fh-ficha__titulo  { font-size: clamp(20px, 1.5vw, 27px) !important; color: var(--fh-marino) !important; }
.fh-portada .fh-ficha__datos   { color: var(--fh-grafito) !important; font-size: var(--fh-small) !important; }
.fh-portada .fh-ficha__precio  { font-size: clamp(22px, 1.7vw, 30px) !important; color: var(--fh-marino) !important; }
.fh-portada .fh-cta__titulo    { font-size: var(--fh-h2) !important; color: var(--fh-arena) !important; }
.fh-portada .fh-cta__texto     { color: rgba(255,255,255,.82) !important; font-size: var(--fh-body) !important; }
.fh-portada .fh-mapa__titulo   { font-size: clamp(22px, 1.7vw, 30px) !important; color: var(--fh-blanco) !important; }
.fh-portada .fh-noticia__titulo{ font-size: 17px !important; color: var(--fh-marino) !important; font-weight: 500 !important;
                                 text-transform: none !important; line-height: 1.35 !important; }
.fh-portada .fh-enlace         { color: var(--fh-arena) !important; font-size: var(--fh-small) !important; }
.fh-portada .fh-ficha__marca   { color: var(--fh-hueso) !important; }
.fh-portada .fh-outline        { -webkit-text-fill-color: transparent !important; color: transparent !important; }
.fh-on-marino .fh-outline      { -webkit-text-stroke-color: var(--fh-arena) !important; }

.fh-portada h1, .fh-portada h2, .fh-portada h3, .fh-portada p { margin-top: 0; }

/* Los titulos que llegan de Inmovilla son descripciones largas; en condensada
   y mayusculas ocupan cinco lineas. Se limitan a dos y se cortan con puntos. */
.fh-portada .fh-ficha__titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fh-portada .fh-noticia__titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Con pocas noticias, auto-fit reparte el ancho entre las que haya
   en vez de dejar media fila vacia. */
.fh-noticias { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Las cifras, centradas entre si. */
.fh-cifra { text-align: center; }
@media (max-width: 600px) { .fh-cifra { text-align: left; } }

/* ------------------------------------------------------------------
   Safari: red de seguridad.
   1. Si el navegador no entiende -webkit-text-stroke, el titular
      contorneado se quedaria invisible (color transparente sin trazo).
      Se repinta en solido.
   2. aspect-ratio no existe antes de Safari 15: se sustituye por la
      proporcion clasica con padding.
   ------------------------------------------------------------------ */
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
    .fh-portada .fh-outline {
        color: var(--fh-arena) !important;
        -webkit-text-fill-color: var(--fh-arena) !important;
    }
}

@supports not (aspect-ratio: 16 / 10) {
    .fh-noticia__foto { position: relative; height: 0; padding-top: 62.5%; }
    .fh-noticia__foto img { position: absolute; inset: 0; }
    @media (max-width: 600px) {
        .fh-ficha__foto { position: relative; height: 0; padding-top: 62.5%; }
        .fh-ficha__foto img { position: absolute; inset: 0; }
        .fh-ficha__marcas { z-index: 2; }
    }
}

/* Safari necesita el prefijo para el recorte de lineas. */
.fh-portada .fh-ficha__titulo,
.fh-portada .fh-noticia__titulo { display: -webkit-box; -webkit-box-orient: vertical; }

/* El lead del bloque de valoracion se pegaba al titular condensado,
   que tiene interlineado 0,94 y deja poco aire debajo. */
.fh-portada .fh-cta__titulo { margin-bottom: 20px !important; }
.fh-portada .fh-cta__texto { line-height: 1.6 !important; }
.fh-portada .fh-cta > div { max-width: 62ch; }

/* --- tarjeta del mapa con la silueta de Mallorca --- */
.fh-mapa { position: relative; overflow: hidden; padding: 26px 24px; min-height: 340px; }
.fh-mapa__texto { position: relative; z-index: 2; }
.fh-mapa .fh-enlace { position: relative; z-index: 2; }
.fh-isla {
    position: absolute; right: -14%; bottom: -6%;
    width: 118%; height: auto; opacity: .95; pointer-events: none;
}
.fh-isla__linea { fill: none; stroke: var(--fh-arena); stroke-width: 5; stroke-linejoin: round; opacity: .55; }
.fh-isla__pins circle { fill: var(--fh-arena); opacity: .9; }
.fh-isla__pins circle:first-child { fill: var(--fh-blanco); }
.fh-mapa:hover .fh-isla__linea { opacity: .8; }

/* Los titulares condensados llevan interlineado 0,94: dejan muy poco aire
   por debajo y el texto siguiente parece pegado. Se separa a mano. */
.fh-portada .fh-hero__titulo { margin-bottom: 26px !important; }
.fh-portada .fh-hero__lead { line-height: 1.55 !important; }
.fh-portada .fh-seccion__titulo { padding-bottom: 2px; }

/* --- tarjeta de zonas de la portada (antes era un contorno dibujado) --- */
.fh-mapa { display: flex; flex-direction: column; }
.fh-mapa__zonas {
    list-style: none; margin: clamp(18px, 2vw, 26px) 0 auto; padding: 0;
    display: grid; gap: 1px; background: rgba(192, 157, 117, .28);
    border-top: 1px solid rgba(192, 157, 117, .28);
    border-bottom: 1px solid rgba(192, 157, 117, .28);
}
.fh-mapa__zonas li { background: var(--fh-marino); }
.fh-mapa__zonas a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 13px 4px; text-decoration: none;
    transition: padding-left .18s ease;
}
.fh-mapa__zonas a:hover { padding-left: 12px; }
.fh-mapa__zona {
    font-family: var(--fh-font-text); font-size: 16px; font-weight: 400;
    color: var(--fh-blanco); min-width: 0;
}
.fh-mapa__zonas a:hover .fh-mapa__zona { color: var(--fh-arena); }
.fh-mapa__num {
    font-family: var(--fh-font-display); font-size: 21px; line-height: 1;
    color: var(--fh-arena); flex: 0 0 auto;
}
.fh-mapa .fh-enlace { margin-top: clamp(18px, 2vw, 26px); }

/* --- la segunda foto asoma al pasar por encima (idea de Balearic Properties) --- */
.fh-ficha__foto { overflow: hidden; }
.fh-ficha__img, .fh-ficha__img2 {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.fh-ficha__img2 {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .45s ease;
}
.fh-ficha:hover .fh-ficha__img2,
.fh-ficha:focus-visible .fh-ficha__img2 { opacity: 1; }

/* Con el dedo no hay "pasar por encima": en tactil no se enseña. */
@media (hover: none) {
    .fh-ficha__img2 { display: none; }
}

/* Movil: las cifras de la portada, centradas como en el ordenador. */
@media (max-width: 600px) {
    .fh-portada .fh-cifra { text-align: center; }
}

/* =========================================================
   Las cifras sobre marino
   La regla de la portada las fija en marino porque alli van
   sobre hueso. En Nosotros el bloque es marino y el numero
   quedaba invisible: mismo color que el fondo.
   ========================================================= */
.fh-seccion--marino .fh-cifra__num { color: var(--fh-arena) !important; }
.fh-seccion--marino .fh-cifra__pie { color: rgba(255, 255, 255, .75) !important; }
.fh-cifra__num { opacity: 1 !important; }

/* --- dos secciones seguidas del mismo fondo ---
   Los casos de exito van debajo de las recien incorporadas y las dos
   son de hueso: sin nada en medio se leian como un solo bloque largo
   de tarjetas. Se separan con el mismo filete de las cabeceras
   (--fh-rule), metido en el ancho de la pagina, y sin cambiar el aire:
   el relleno de arriba pasa de la seccion al interior.
   Madison, 15-10-2026. */
.fh-seccion--tras-igual { padding-top: 0; }
.fh-seccion--tras-igual > .fh-ancho { border-top: var(--fh-rule);
    padding-top: clamp(56px, 7vw, 128px); }

/* ---- fh-paginas ---- */
/* Film Houses - nosotros y actualidad. */

.fh-nosotros-hero, .fh-actualidad-hero { padding-bottom: clamp(44px, 5vw, 84px); }
.fh-nosotros .fh-hero__lead, .fh-actualidad .fh-hero__lead { max-width: 52ch; }

/* --- nosotros: texto a dos columnas --- */
.fh-nosotros-dos {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 96px); align-items: start;
}
.fh-nosotros .fh-texto p {
    font-family: var(--fh-font-text); font-weight: 300;
    font-size: clamp(16px, 1.2vw, 19px); line-height: 1.65;
    color: var(--fh-grafito); margin: 0 0 18px;
}
.fh-nosotros .fh-texto p:last-child { margin-bottom: 0; }

/* Sobre marino, el mismo texto en claro. */
.fh-nosotros .fh-on-marino .fh-texto p { color: rgba(255, 255, 255, .82); }

/* --- las oficinas --- */
/*
 * Un solo separador.
 *
 * La linea iba en cada tarjeta: dos oficinas, dos rayas cortas, y
 * parecia una tabla a medio hacer. Ahora la raya la lleva el grupo y
 * cruza el ancho entero. Apiladas en el movil, si: ahi la linea separa
 * una de otra. Madison, 7-10-2026.
 */
.fh-oficinas {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 40px);
    padding-top: 22px; border-top: var(--fh-rule);
}
.fh-oficina { min-width: 0; display: flex; flex-direction: column; }
.fh-oficina .fh-oficina__ir { margin-top: auto; align-self: flex-start; }
.fh-nosotros .fh-oficina__nombre {
    font-size: clamp(26px, 2.2vw, 40px); color: var(--fh-marino);
    text-transform: uppercase; margin: 0 0 12px;
}
.fh-oficina__dir {
    font-family: var(--fh-font-text); font-weight: 300; font-size: 16px;
    line-height: 1.6; color: var(--fh-grafito); margin: 0 0 12px;
}

/* El telefono y el horario de la oficina que los atiende. */
.fh-oficina__tel {
    font-family: var(--fh-font-text); font-size: 18px; font-weight: 500;
    line-height: 1.4; color: var(--fh-marino); margin: 0 0 6px;
}
.fh-oficina__tel a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--fh-arena); }
.fh-oficina__tel a:hover,
.fh-oficina__tel a:focus-visible { color: var(--fh-arena); }
.fh-oficina__horario {
    font-family: var(--fh-font-text); font-weight: 300; font-size: 15px;
    line-height: 1.55; color: var(--fh-grafito); margin: 0 0 16px;
}

/*
 * "Proxima apertura" como rotulo, no como nota al pie.
 *
 * Iba en 12 px gris con opacidad .65 y no se leia. Es un dato que
 * cambia la visita: si vas a Portals Nous no hay nadie. Madison,
 * 7-10-2026.
 */
.fh-oficina__aviso { margin: 0 0 16px; }
.fh-oficina__aviso > span {
    display: inline-block; padding: 6px 12px; border-radius: 999px;
    background: var(--fh-arena); color: var(--fh-marino);
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 600;
    letter-spacing: .02em; text-transform: none; line-height: 1.3;
}

/* Las oficinas, sobre marino: el nombre iba en marino sobre marino. */
.fh-nosotros .fh-on-marino .fh-oficina__nombre  { color: var(--fh-blanco); }
.fh-nosotros .fh-on-marino .fh-oficina__dir     { color: rgba(255, 255, 255, .78); }
.fh-nosotros .fh-on-marino .fh-oficina__tel     { color: var(--fh-blanco); }
.fh-nosotros .fh-on-marino .fh-oficina__horario { color: rgba(255, 255, 255, .78); }
.fh-nosotros .fh-on-marino .fh-oficinas {
    border-top-color: var(--fh-arena-30, rgba(192, 157, 117, .3));
}

/*
 * Un solo separador, de verdad.
 *
 * La cabecera de seccion trae su propia raya debajo del titulo. Con la
 * del grupo de oficinas salian dos rayas paralelas con 45 px en medio.
 * Se queda la que separa las oficinas, que es la que hace algo.
 */
.fh-nosotros-donde .fh-seccion__cabecera {
    padding-bottom: 0; border-bottom: 0;
    margin-bottom: clamp(28px, 3.5vw, 48px);
}

/*
 * El aire entre las oficinas y "Habla con nosotros": 40-48 px en
 * escritorio y 24-32 en el movil. Son dos secciones seguidas, asi que
 * el hueco es el relleno de abajo de una mas el de arriba de la otra:
 * 133 px, medio pantallazo vacio. Se cuenta entero y se reparte en uno
 * solo. Madison, 7-10-2026.
 */
/*
 * Con la seccion en claro y la de abajo en oscuro, el aire que se ve es
 * el de esta: sin el, "Cómo llegar" quedaba pegado al borde de la banda
 * oscura. Madison, 7-10-2026.
 */
/*
 * 72-80 px arriba y abajo en ordenador, 48 en el movil, igual por los
 * dos lados. Con 44 px las dos secciones seguian apretadas. Madison,
 * 7-10-2026.
 */
.fh-nosotros-donde { padding: clamp(72px, 5.6vw, 80px) 0; }
.fh-nosotros-donde + .fh-seccion { padding: clamp(72px, 5.6vw, 80px) 0; }

/* Mas aire entre el titulo de la seccion y las oficinas. */
.fh-nosotros-donde .fh-seccion__cabecera { margin-bottom: clamp(36px, 3.6vw, 52px); }

/* Y entre las lineas de cada oficina: direccion, telefono, horario, ir. */
.fh-oficina__dir     { margin-bottom: 18px; }
.fh-oficina__tel     { margin-bottom: 10px; }
.fh-oficina__horario { margin-bottom: 24px; }
.fh-oficina__aviso   { margin-bottom: 24px; }

/* --- caras del equipo --- */
.fh-caras {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}
.fh-caras a { display: block; text-decoration: none; }
.fh-caras img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
    border-radius: var(--fh-radius-tile); display: block; background: var(--fh-grafito);
}
.fh-caras span {
    display: block; margin-top: 10px;
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 500;
    color: var(--fh-blanco); line-height: 1.3;
}
.fh-caras a:hover span { color: var(--fh-arena); }

/* --- cierre --- */
.fh-nosotros-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 56px); flex-wrap: wrap;
}

/* --- actualidad --- */
.fh-noticias--pagina { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fh-actualidad .fh-noticia__titulo { font-size: 19px; }
.fh-actualidad .fh-paginas__n { color: var(--fh-marino); }
.fh-actualidad .fh-paginas__n.is-actual { background: var(--fh-marino); color: var(--fh-blanco); }

@media (max-width: 1000px) {
    .fh-nosotros-dos { grid-template-columns: minmax(0, 1fr); }
    .fh-caras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fh-noticias--pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .fh-oficinas { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fh-oficina + .fh-oficina { margin-top: 24px; padding-top: 24px; border-top: var(--fh-rule); }
    .fh-nosotros .fh-on-marino .fh-oficina + .fh-oficina {
        border-top-color: var(--fh-arena-30, rgba(192, 157, 117, .3));
    }
    /* 48 px por los dos lados, tambien debajo de "Próxima apertura",
       que es lo ultimo que se lee antes de la banda oscura. */
    .fh-nosotros-donde { padding: 48px 0; }
    .fh-nosotros-donde + .fh-seccion { padding: 48px 0; }
    .fh-caras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-noticias--pagina { grid-template-columns: minmax(0, 1fr); }
    .fh-nosotros-cta .fh-btn { width: 100%; text-align: center; }
}

/* --- mapa de cada oficina --- */
.fh-oficina .fh-mapa-osm { margin: 16px 0 14px; }
.fh-oficina__ir { display: inline-flex; }

/* Contacto: uno debajo del otro, el formulario primero (punto 105).
   Madison, 5-10-2026: "los bloques van uno debajo del otro: formulario
   primero, Como encontrarnos despues". En dos columnas habia demasiada
   informacion en poco espacio. */
.fh-contacto-fila {
    display: grid;
    /*
     * Dos columnas: el formulario a la izquierda y "Como encontrarnos"
     * a la derecha, alineados arriba. Madison, 14-10-2026; sustituye a
     * lo que pidio el 5-10, que era uno debajo del otro.
     */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 56px) clamp(36px, 4.5vw, 72px);
    align-items: start;
}

/* El titulo, encima de las dos. */
.fh-contacto-cab__titulo { grid-column: 1 / -1; }

/*
 * El formulario no necesita toda la fila, pero tampoco dejar media
 * pantalla vacia: va centrado en una columna de lectura. Madison lo vio
 * en la captura del 5-10-2026.
 */
/*
 * Una sola columna de lectura, alineada a la izquierda como el resto de
 * la web, y mas ancha que un formulario estrecho: asi no queda media
 * pantalla vacia ni el titulo cae en un sitio y el formulario en otro.
 */
/* El ancho lo manda la rejilla; solo el titulo lleva tope de lectura. */
.fh-contacto-fila > * { margin-inline: 0; width: 100%; }
.fh-contacto-cab__titulo { max-width: 54rem; }

/* Aire entre el titulo y el primer campo. */
.fh-contacto-cab__titulo { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/*
 * Y "Como encontrarnos", claramente mas pequeno que el H1: es un
 * apartado dentro de la pagina, no otro titular.
 */
/*
 * fh-portada.css trae ".fh-portada .fh-seccion__titulo { font-size:
 * var(--fh-h2) !important }" para ganarle a Elementor, asi que aqui
 * hace falta el !important: sin el, "Como encontrarnos" salia a 66 px
 * al lado de un H1 de 89.
 */
.fh-portada .fh-contacto-fila .fh-contacto-datos .fh-seccion__titulo {
    font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
    margin-bottom: .7rem;
}
.fh-contacto-datos .fh-eyebrow { margin: 26px 0 6px; }
.fh-contacto-datos .fh-eyebrow:first-of-type { margin-top: 18px; }
.fh-contacto-dato { margin: 0; font-size: 17px; }
.fh-contacto-dato a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.fh-contacto-dato a:hover { color: var(--fh-arena); border-bottom-color: var(--fh-arena); }
.fh-contacto-oficinas { list-style: none; margin: 0; padding: 0; }
.fh-contacto-oficinas li { padding: 12px 0; border-bottom: var(--fh-rule); }
.fh-contacto-oficinas li:last-child { border-bottom: 0; }
.fh-contacto-sitio { display: block; font-size: 16px; font-weight: 500; }
.fh-contacto-dir { display: block; font-size: 14px; color: rgba(255,255,255,.62); margin-top: 3px; }
.fh-contacto-aviso {
    display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fh-arena); margin-top: 6px;
}

/*
 * El nombre y la direccion de la oficina, cuando enlazan, se ven como
 * enlaces.
 *
 * La direccion ya era un enlace y no lo parecia: mismo color, sin
 * subrayado y sin linea. El 22-10 se le añadio uno al nombre, y eran
 * dos enlaces invisibles seguidos. Se marcan igual que el telefono y el
 * correo de este mismo bloque -.fh-contacto-dato a-, que es la
 * convencion que ya hay aqui: no se inventa ninguna.
 * Madison, 22-10-2026.
 */
.fh-contacto-sitio a,
.fh-contacto-dir a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.fh-contacto-sitio a:hover,
.fh-contacto-sitio a:focus-visible,
.fh-contacto-dir a:hover,
.fh-contacto-dir a:focus-visible {
    color: var(--fh-arena);
    border-bottom-color: var(--fh-arena);
}

/*
 * En movil, uno debajo del otro y el formulario primero, que es el
 * orden en que estan en el HTML.
 */
@media (max-width: 860px) {
    .fh-contacto-fila { grid-template-columns: minmax(0, 1fr); }
    .fh-contacto-fila > * { max-width: 54rem; }
}

/* Landings de zona */

.fh-landing__datos { margin: 18px 0 0; font-size: 15px; color: var(--fh-arena); }
.fh-landing__precios { margin-top: 18px; }
.fh-landing__texto { max-width: 68ch; }
.fh-landing__texto .fh-seccion__titulo { margin: 0 0 14px; }
.fh-landing__texto p { margin: 0 0 16px; }
/* Las preguntas, en acordeon. La pregunta con el estilo de un H3 de la
   web -no la letra fina y enorme que heredaba- y la respuesta al tamano
   del texto normal. El contenido esta en el HTML abierto o cerrado. */
.fh-landing__faq { border-top: var(--fh-rule); }
/*
 * La primera, sin raya arriba: la cabecera de la seccion ya trae la
 * suya, y salian dos rayas seguidas con un hueco en medio, como si
 * hubiera una pregunta vacia. No lo habia: son tres preguntas y tres
 * en los datos estructurados. Madison, 8-10-2026.
 */
.fh-landing__faq:first-of-type { margin-top: 10px; border-top: 0; }
.fh-landing__faq:last-of-type { border-bottom: var(--fh-rule); }
.fh-landing__faq > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 0;
}
.fh-landing__faq > summary::-webkit-details-marker { display: none; }
.fh-landing__faq > summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-top: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity: .55; transition: transform .2s ease;
}
.fh-landing__faq[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.fh-landing__faq > summary:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 3px; }
/* Con !important y la clase de la pagina delante: Elementor aplica su
   tipografia global a h1-h4 y gana a una clase suelta. Sin esto la
   pregunta salia en 40 px y con letra fina. */
.fh-landing .fh-landing__faq .fh-landing__pregunta,
.fh-landing__faq h3.fh-landing__pregunta {
    margin: 0 !important; font-family: var(--fh-font-text) !important;
    font-size: clamp(16px, 1.15vw, 19px) !important;
    font-weight: 600 !important; line-height: 1.35 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: inherit !important;
}
.fh-landing .fh-landing__respuesta {
    margin: 0 0 22px !important; font-size: 16px !important;
    line-height: 1.65 !important; opacity: .85; max-width: 62ch;
}

/* El cierre. El titular llevaba el interrogante encima del subtitulo y el
   bloque se confundia con el de off-market que viene detras. */
.fh-landing__hablamos { border-top: var(--fh-rule); }
.fh-landing__cierre { max-width: 68ch; }
.fh-landing__cierre .fh-seccion__titulo { margin: 0 0 14px; line-height: 1.05; }
.fh-landing__cierre p { margin: 0; }
.fh-landing__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/*
 * El cierre en dos columnas (10-10-2026).
 *
 * El bloque entero iba dentro de .fh-landing__cierre, con max-width de
 * 68ch, asi que en ordenador la mitad derecha de la pantalla quedaba
 * vacia y la tarjeta del agente colgaba debajo del texto. Ahora el
 * texto se queda con sus 68ch y la tarjeta se pone al lado.
 */
.fh-landing__cierre--dos {
    max-width: none;
    display: grid;
    /*
     * La derecha se dimensiona por su contenido (auto), no por un
     * ancho fijo: con minmax(0,540px) la columna salia mas estrecha
     * de lo pedido y los tres botones se partian en dos filas.
     */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: start;
}
.fh-landing__cierre--dos .fh-landing__cierre-texto { max-width: 68ch; }

/* Los tres botones del agente, juntos y a la misma altura. */
.fh-landing__experto .fh-landing__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.fh-landing__experto .fh-landing__botones .fh-btn { margin: 0; }

@media (min-width: 861px) {
    /* En ordenador los tres van en una fila, sin partirse. */
    .fh-landing__cierre--dos .fh-landing__experto { max-width: 560px; }
    .fh-landing__experto .fh-landing__botones { flex-wrap: nowrap; }
}

@media (max-width: 860px) {
    /* En movil, uno debajo del otro. */
    .fh-landing__cierre--dos {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    /*
     * Y los tres botones del mismo ancho: el de WhatsApp se quedaba
     * corto al lado de los otros dos y la columna parecia desalineada.
     */
    .fh-landing__experto .fh-landing__botones { gap: 12px; }
    .fh-landing__experto .fh-landing__botones .fh-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Unete */
.fh-unete__texto, .fh-unete__form { max-width: 68ch; }
.fh-unete__texto p { margin: 0 0 16px; }
.fh-unete__ventajas {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 44px); margin-top: 18px;
}
.fh-unete__ventaja { padding-top: 20px; border-top: var(--fh-rule); min-width: 0; }
.fh-unete__ventaja-t { margin: 0 0 8px; font-size: 17px; font-weight: 500; }
.fh-unete__ventaja p { margin: 0; }
.fh-unete__form .fh-form label { color: inherit; }
.fh-unete__form .fh-form__pista { color: rgba(15, 32, 56, .62); }

@media (max-width: 720px) {
    .fh-unete__ventajas { grid-template-columns: minmax(0, 1fr); }
}

/* Las tarjetas de las landings, exactamente como las de /comprar/.
   Esas reglas vivian en fh-resultados.css, que la landing no carga, asi
   que aqui salian con otra tipografia y otro alto. */
.fh-landing .fh-rejilla { gap: clamp(20px, 2.2vw, 28px); }
.fh-landing .fh-ficha { min-height: 268px; }
.fh-landing .fh-ficha__foto { min-height: 0; }
.fh-landing .fh-ficha__titulo {
    font-size: clamp(20px, 1.5vw, 27px) !important;
    color: var(--fh-marino) !important;
    line-height: .96 !important;
    margin-bottom: 10px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fh-landing .fh-ficha__sitio {
    color: var(--fh-arena) !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-bottom: 8px !important;
}
.fh-landing .fh-ficha__datos  { color: var(--fh-grafito) !important; font-size: var(--fh-small) !important; }
.fh-landing .fh-ficha__precio { font-size: clamp(22px, 1.7vw, 30px) !important; color: var(--fh-marino) !important; margin-top: 18px !important; }
.fh-landing .fh-ficha__marca  { color: var(--fh-hueso) !important; }

/* Articulos de Actualidad.
   Los titulos llevan !important y el prefijo de la pagina porque Elementor
   aplica su tipografia global a h2, h3, p y a, y gana a una clase sola. */

.fh-articulo-hero .fh-migas { margin-bottom: 18px; }
.fh-articulo__firma {
    margin: 18px 0 0;
    font-family: var(--fh-font-text);
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--fh-arena);
}
.fh-articulo-hero .fh-hero__titulo { max-width: 22ch; }

.fh-articulo__cuerpo { max-width: 68ch; }

.fh-articulo .fh-articulo__cuerpo h2 {
    font-family: var(--fh-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: var(--fh-display-ls) !important;
    font-size: clamp(26px, 2.2vw, 38px) !important;
    line-height: 1.02 !important;
    text-transform: uppercase !important;
    color: var(--fh-marino) !important;
    margin: 52px 0 16px !important;
}
.fh-articulo .fh-articulo__cuerpo h2:first-child { margin-top: 0 !important; }

.fh-articulo .fh-articulo__cuerpo h3 {
    font-family: var(--fh-font-text) !important;
    font-size: clamp(17px, 1.2vw, 20px) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--fh-marino) !important;
    margin: 32px 0 10px !important;
}

.fh-articulo .fh-articulo__cuerpo p,
.fh-articulo .fh-articulo__cuerpo li {
    font-family: var(--fh-font-text) !important;
    font-weight: 300 !important;
    font-size: clamp(16px, 1.2vw, 19px) !important;
    line-height: 1.65 !important;
    color: var(--fh-grafito) !important;
}
.fh-articulo .fh-articulo__cuerpo p { margin: 0 0 18px !important; }
.fh-articulo__cuerpo ul,
.fh-articulo__cuerpo ol { margin: 0 0 18px; padding-left: 22px; }
.fh-articulo__cuerpo li { margin-bottom: 8px; }

.fh-articulo .fh-articulo__cuerpo a {
    color: var(--fh-marino) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--fh-arena);
}
.fh-articulo .fh-articulo__cuerpo a:hover { color: var(--fh-arena) !important; }

/* La tabla comparativa. En movil se desliza dentro de su marco, no
   ensancha la pagina: el contenedor ya viene en el texto original. */
.fh-articulo__cuerpo .tabla-scroll {
    max-width: none;
    width: 100%;
    overflow-x: auto;
    margin: 0 0 24px;
    border-top: var(--fh-rule);
    -webkit-overflow-scrolling: touch;
}
.fh-articulo__cuerpo .tabla-scroll:focus-visible {
    outline: 2px solid var(--fh-arena);
    outline-offset: 3px;
}
.fh-articulo__cuerpo table {
    border-collapse: collapse;
    width: 100%;
    /* fh-movil-ok: la tabla va dentro de .tabla-scroll, que se desplaza sola. */
    min-width: 580px;
    font-family: var(--fh-font-text);
    font-size: 15px;
}
.fh-articulo__cuerpo caption {
    caption-side: top;
    text-align: left;
    padding: 14px 0 10px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fh-marino);
    opacity: .7;
}
.fh-articulo__cuerpo th,
.fh-articulo__cuerpo td {
    padding: 12px 14px 12px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--fh-rule);
    color: var(--fh-grafito);
    font-weight: 300;
}
.fh-articulo__cuerpo thead th,
.fh-articulo__cuerpo th[scope="row"] {
    font-weight: 500;
    color: var(--fh-marino);
}

/* El bloque de guias relacionadas. */
.fh-articulo__guias { list-style: none; margin: 18px 0 0; padding: 0; }
.fh-articulo__guias li { padding: 16px 0; border-top: var(--fh-rule); }
.fh-articulo__guias li:last-child { border-bottom: var(--fh-rule); }
.fh-articulo .fh-articulo__guias a {
    font-family: var(--fh-font-text) !important;
    font-size: clamp(17px, 1.3vw, 21px) !important;
    font-weight: 500 !important;
    color: var(--fh-marino) !important;
    text-decoration: none !important;
}
.fh-articulo .fh-articulo__guias a:hover { color: var(--fh-arena) !important; }

@media (max-width: 720px) {
    .fh-articulo .fh-articulo__cuerpo h2 { margin-top: 40px !important; }
}

/* Punto 54: las zonas de un municipio, en la landing del municipio. */
.fh-landing__zonas {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}
.fh-landing__zonas li { min-width: 0; }
.fh-landing__zonas a {
    display: block; padding-top: 16px; border-top: var(--fh-rule);
    text-decoration: none;
}
.fh-landing .fh-landing__zonas a { color: var(--fh-marino) !important; }
.fh-landing__zona-n {
    display: block; font-family: var(--fh-font-text);
    font-size: clamp(16px, 1.15vw, 19px); font-weight: 500; line-height: 1.3;
}
.fh-landing__zona-c {
    display: block; margin-top: 4px; font-size: 13px;
    color: var(--fh-grafito); opacity: .8;
}
.fh-landing__zonas a:hover .fh-landing__zona-n { color: var(--fh-arena); }
@media (max-width: 1000px) { .fh-landing__zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fh-landing__zonas { grid-template-columns: minmax(0, 1fr); } }

/* El enlace a la landing de venta, dentro de "Vivir en..." (punto C). */
.fh-landing__vender { margin: 24px 0 0; }

/*
 * El enlace de vender de una landing es una frase entera, no un rotulo
 * corto como "Ver todas". .fh-enlace lleva white-space: nowrap, pensado
 * para los rotulos, y en movil la frase se salia por la derecha y se
 * cortaba. Aqui, y solo aqui, parte de linea. Madison, 16-10-2026.
 */
.fh-landing__vender .fh-enlace { white-space: normal; max-width: 100%; }

/* ---------------------------------------------------------------
   Las paginas legales (punto 71)
   --------------------------------------------------------------- */

/*
 * El texto viene tal cual de la pagina y lleva sus propios h1, h4,
 * parrafos y listas. Aqui solo se le dan la medida de linea y los
 * tamanos de la casa; no se toca ni una palabra.
 */
.fh-legal { max-width: 860px; }

.fh-legal h1 {
    font-family: var(--fh-font-display); text-transform: uppercase;
    font-size: var(--fh-h1, clamp(30px, 3.4vw, 52px)); line-height: 1.02;
    letter-spacing: var(--fh-display-ls); color: var(--fh-marino);
    margin: 0 0 28px;
}

.fh-legal h2,
.fh-legal h3,
.fh-legal h4,
.fh-legal h5 {
    font-family: var(--fh-font-display); text-transform: uppercase;
    font-size: clamp(18px, 1.5vw, 23px); line-height: 1.15;
    letter-spacing: var(--fh-display-ls); color: var(--fh-marino);
    margin: 38px 0 12px;
}

/* El membrete de la marca, que el texto trae arriba del todo. */
.fh-legal h6 {
    font-size: var(--fh-eyebrow, 12px); font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--fh-arena); margin: 0 0 10px;
}

.fh-legal p,
.fh-legal li { font-size: 16px; line-height: 1.75; color: var(--fh-grafito); }
.fh-legal p { margin: 0 0 16px; }
.fh-legal ul,
.fh-legal ol { margin: 0 0 18px; padding-left: 22px; }
.fh-legal li { margin: 0 0 8px; }
.fh-legal a { color: var(--fh-marino); text-underline-offset: 3px; }
.fh-legal table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.fh-legal th,
.fh-legal td {
    border: 1px solid rgba(39,55,67,.16); padding: 10px 12px;
    font-size: 15px; text-align: left; vertical-align: top;
}
.fh-legal th { background: rgba(39,55,67,.05); font-weight: 600; }

/* Las tres salidas de la pagina de error (punto 113.7). */
.fh-404__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Legales: la linea de prevalencia del espanol (4-10-2026). */
.fh-legal .fh-legal__prevalencia {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--fh-marino, #1c3f5e);
    background: var(--fh-hueso-2, #f4f1ec);
    font-size: .95rem;
    font-style: italic;
}

/* Tarjetas de actualidad: resumen, firma y "leer más" (5-10-2026).
   El relleno horizontal lo pone fh-portada.css, que es donde vive la
   tarjeta y vale tambien para el bloque de la portada. */
.fh-noticia__resumen {
    margin: .45rem 0 0;
    font-size: .95rem;
    line-height: 1.45;
    opacity: .82;
}
.fh-noticia__pie {
    margin: .7rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: baseline;
    justify-content: space-between;
    font-size: .85rem;
}
.fh-noticia__firma { opacity: .7; }
.fh-noticia__mas {
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.fh-noticia:hover .fh-noticia__mas,
.fh-noticia:focus-visible .fh-noticia__mas { opacity: .75; }

/* La foto del artículo y su crédito (5-10-2026). */
.fh-articulo__foto { margin: 1.6rem 0 2rem; }
.fh-articulo__foto img {
    width: 100%; height: auto; display: block;
    border-radius: var(--fh-radius-card, 14px);
}
.fh-articulo__credito {
    margin: .5rem 0 0;
    font-size: .78rem;
    opacity: .6;
    line-height: 1.4;
}
.fh-articulo__credito a { color: inherit; }

/* Punto 105: el titulo, en la misma columna que el formulario y con
   aire suficiente antes del primer campo. */
.fh-contacto-cab { padding-top: clamp(1.8rem, 4vw, 3rem); }
.fh-portada .fh-contacto-cab__titulo { margin: 0 0 clamp(2rem, 4vw, 3rem) !important; }

/* ------------------------------------------------------------------
   El experto de una landing de compra sin inmuebles nuestros.
   Madison, 6-10-2026. Misma forma que en las landings de venta.
   ------------------------------------------------------------------ */
.fh-landing__experto {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin: 26px 0 0;
}
.fh-landing__experto .fh-lv-agente__foto {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.fh-landing__experto .fh-lv-agente__foto--marca {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08);
}
.fh-landing__experto .fh-lv-agente__nombre {
    margin: 4px 0 2px; font-family: var(--fh-font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--fh-blanco);
}
.fh-landing__experto .fh-lv-agente__cargo {
    margin: 0 0 14px; font-family: var(--fh-font-text); font-size: 15px;
    color: rgba(255, 255, 255, .72);
}
.fh-landing__experto .fh-lv-agente__wa { display: inline-block; width: auto; }

/* ------------------------------------------------------------------
   El bloque oscuro de presentacion de Nosotros
   Madison, 7-10-2026, sobre una captura de Pep a 2.000 px.

   Todo va con ".fh-nosotros" delante: la franja de cifras es la misma
   de la portada y de Vende tu casa, y la portada no se toca.
   ------------------------------------------------------------------ */

/*
 * Entre el ultimo parrafo y las cifras habia unos 300 px vacios: dos
 * secciones marino seguidas, cada una con su relleno de hasta 128 px.
 * Ahora 64-72 px por los dos lados.
 */
.fh-nosotros .fh-nosotros-dos { align-items: start; }
.fh-nosotros .fh-nosotros-dos + * { margin-top: 0; }

/*
 * El hueco es de las dos secciones juntas, porque las dos son marino y
 * se leen como una: 72 abajo mas 72 arriba daban 144. El de arriba se
 * queda en cero y el aire entero lo pone la banda de cifras.
 */
.fh-nosotros .fh-seccion:has(> .fh-nosotros-dos) { padding-bottom: 0; }
.fh-nosotros .fh-nosotros-cifras { padding: clamp(64px, 4.6vw, 72px) 0; }

/*
 * Titular y primer parrafo, alineados por arriba.
 *
 * El antetitulo "Quiénes somos" empuja al titular 30 px -18 de alto
 * mas 12 de margen-, y el parrafo de la derecha arrancaba mas arriba.
 * Se le da el mismo desplazamiento, calculado de lo mismo.
 */
@media (min-width: 1001px) {
    .fh-nosotros .fh-nosotros-dos > .fh-texto {
        padding-top: calc(1.4em + 12px);
    }
}

/* Las lineas de texto, mas cortas: 68ch se iba a 900 px en pantalla grande. */
.fh-nosotros .fh-texto p { max-width: 700px; }

/*
 * Las tres cifras, juntas y con su raya: estaban repartidas por todo el
 * ancho y en una pantalla de 2.000 px quedaban una en cada esquina.
 */
.fh-nosotros .fh-nosotros-cifras .fh-cifras {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: clamp(20px, 3vw, 48px);
    max-width: 820px;
    margin-inline: auto;
    padding-top: clamp(26px, 2.4vw, 34px);
    border-top: var(--fh-rule);
}
.fh-nosotros .fh-nosotros-cifras .fh-cifra {
    flex: 1 1 0; min-width: 0; text-align: center; position: relative;
}
.fh-nosotros .fh-nosotros-cifras .fh-cifra + .fh-cifra::before {
    content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.5vw, 24px));
    top: .35em; bottom: .35em; width: 1px;
    background: var(--fh-arena-30, rgba(192, 157, 117, .3));
}

@media (max-width: 760px) {
    /* En el movil, apiladas como estaban. */
    .fh-nosotros .fh-nosotros-cifras .fh-cifras {
        display: grid; grid-template-columns: minmax(0, 1fr);
        gap: 26px; max-width: none; padding-top: 24px;
    }
    .fh-nosotros .fh-nosotros-cifras .fh-cifra + .fh-cifra::before { display: none; }
    .fh-nosotros .fh-nosotros-cifras { padding: 48px 0; }
}

/* ---- fh-carrusel ---- */
/*
 * El carrusel del movil. Pep, 22-10-2026.
 *
 * En el movil los bloques de tarjetas se deslizan hacia el lado en vez
 * de apilarse hacia abajo. Con el dedo, scroll-snap: ni autoplay ni
 * flechas que tapen la foto.
 *
 * Todo esto vive dentro de una media query de movil: EN EL ORDENADOR NO
 * CAMBIA NADA. Y no hay ni una linea de HTML nueva: los contenedores ya
 * se distinguian solos.
 *
 *   .fh-portada .fh-rejilla       tarjetas de propiedades y de ventas
 *                                 (portada, Vender y las 31 landings)
 *   .fh-portada .fh-incluye       las nueve de "Que hacemos por tu casa"
 *   .fh-portada .fh-vresenas__lista   las tres resenas
 *   .fh-ofpn-inmuebles .fh-rejilla   las seis de la inmobiliaria de
 *                                    Portals Nous, que no cuelga de
 *                                    .fh-portada sino de <main>
 *
 * Lo que queda FUERA, y por que:
 *
 *   .fh-res-rejilla  el listado del buscador (Comprar, Alquilar). Ademas
 *                    cuelga de .fh-resultados, no de .fh-portada.
 *   las fichas       no llevan .fh-rejilla.
 *   .fh-pasos        los cuatro pasos de Vender: Pep no los pidio.
 *   .fh-rejilla--lista  la lista de Obra nueva: Pep la quiere hacia
 *                       abajo, no al lado (23-10-2026). La clase la
 *                       pone fh_pro_apartado() en fh-obranueva.php.
 *
 * No se sangra a los bordes de la pantalla a proposito: el margen
 * negativo es la forma facil de sacar la pagina a lo ancho en el movil,
 * y ya nos paso. El trozo de la tarjeta siguiente se ve igual, porque
 * las tarjetas miden el 85 %.
 */

@media (max-width: 760px) {

    .fh-portada .fh-rejilla:not(.fh-res-rejilla):not(.fh-rejilla--lista),
    .fh-ofpn-inmuebles .fh-rejilla,
    .fh-portada .fh-incluye,
    .fh-portada .fh-vresenas__lista {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* Sitio para la sombra de las tarjetas, que si no se corta. */
        padding-bottom: 10px;
        /* La barra de desplazamiento no pinta nada aqui. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .fh-portada .fh-rejilla:not(.fh-res-rejilla):not(.fh-rejilla--lista)::-webkit-scrollbar,
    .fh-ofpn-inmuebles .fh-rejilla::-webkit-scrollbar,
    .fh-portada .fh-incluye::-webkit-scrollbar,
    .fh-portada .fh-vresenas__lista::-webkit-scrollbar {
        display: none;
    }

    /*
     * El 85 % es lo que deja ver el borde de la siguiente: sin eso no se
     * entiende que se puede deslizar. min-width: 0 para que el texto
     * largo no estire la tarjeta.
     */
    .fh-portada .fh-rejilla:not(.fh-res-rejilla):not(.fh-rejilla--lista) > *,
    .fh-ofpn-inmuebles .fh-rejilla > *,
    .fh-portada .fh-incluye > *,
    .fh-portada .fh-vresenas__lista > * {
        flex: 0 0 85%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /*
     * Si solo hay una tarjeta no hay nada a lo que deslizar, y al 85 %
     * se veria cortada por la derecha sin motivo. Pasa en las landings
     * de zonas con una sola vivienda en venta.
     */
    .fh-portada .fh-rejilla:not(.fh-res-rejilla):not(.fh-rejilla--lista) > :only-child,
    .fh-ofpn-inmuebles .fh-rejilla > :only-child,
    .fh-portada .fh-incluye > :only-child,
    .fh-portada .fh-vresenas__lista > :only-child {
        flex-basis: 100%;
    }

    /* La lista de "Que incluye" es un <ul>: fuera las marcas y el sangrado. */
    .fh-portada .fh-incluye {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }

    /*
     * Quien prefiera no ver animaciones tampoco quiere que el navegador
     * le mueva la pagina solo: el salto se queda, pero sin suavizado.
     */
    @media (prefers-reduced-motion: reduce) {
        .fh-portada .fh-rejilla:not(.fh-res-rejilla):not(.fh-rejilla--lista),
        .fh-portada .fh-incluye,
        .fh-portada .fh-vresenas__lista {
            scroll-behavior: auto;
        }
    }
}

/* ---- fh-ficha ---- */
/* Film Houses - ficha de inmueble. Sobre filmhouses-brand-tokens.css. */

.fh-ficha-pag { font-family: var(--fh-font-text); font-weight: 300; line-height: var(--fh-text-lh); background: var(--fh-hueso); }
.fh-ficha-pag *, .fh-ficha-pag *::before, .fh-ficha-pag *::after { box-sizing: border-box; }
.fh-ficha-pag .fh-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--fh-gutter); }
.fh-ficha-pag .fh-seccion { padding: clamp(44px, 5.2vw, 92px) 0; }
.fh-ficha-pag .fh-seccion--marino { background: var(--fh-marino); color: var(--fh-blanco); }
.fh-ficha-pag .fh-seccion--hueso  { background: var(--fh-hueso);  color: var(--fh-grafito); }

.fh-ficha-pag h1, .fh-ficha-pag h2, .fh-ficha-pag p, .fh-ficha-pag li, .fh-ficha-pag a,
.fh-ficha-pag label, .fh-ficha-pag input, .fh-ficha-pag textarea, .fh-ficha-pag select,
.fh-ficha-pag button, .fh-ficha-pag span { font-family: var(--fh-font-text); }
.fh-ficha-pag .fh-display {
    font-family: var(--fh-font-display) !important; text-transform: uppercase !important;
    line-height: var(--fh-display-lh) !important; letter-spacing: var(--fh-display-ls) !important;
    font-weight: 700 !important; margin: 0;
}
.fh-ficha-pag .fh-eyebrow {
    font-size: var(--fh-eyebrow) !important; font-weight: 500 !important; letter-spacing: .2em !important;
    text-transform: uppercase !important; margin: 0 0 12px !important;
    /* El color lo decide fh-custom.css segun el fondo: arena sobre marino,
       grafito sobre hueso y sobre tarjeta blanca, donde arena da 2,17. */
}

/* Titular de seccion: se limita para que no invada la columna de al lado. */
.fh-ficha-pag .fh-h2 { font-size: clamp(28px, 2.6vw, 44px) !important; margin: 0 !important; }
.fh-seccion--marino .fh-h2 { color: var(--fh-blanco) !important; }
.fh-seccion--hueso  .fh-h2 { color: var(--fh-marino) !important; }

/* --- galeria tipo mosaico --- */
.fh-galeria { background: var(--fh-hueso); padding: 18px 0 clamp(18px, 2vw, 28px); }
.fh-galeria__rejilla { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.fh-galeria__grande, .fh-galeria__thumb {
    position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden;
    border-radius: var(--fh-radius-tile); background: var(--fh-piedra); display: block;
}
.fh-galeria__grande { aspect-ratio: 3 / 2; }
.fh-galeria__grande img, .fh-galeria__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.fh-galeria__grande:hover img { transform: scale(1.02); }
/* El mosaico iguala la altura de la foto grande: la manda ella, no el recorte. */
.fh-galeria__mini { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; min-height: 0; }
.fh-galeria__thumb { min-height: 0; height: 100%; }
.fh-galeria__rejilla { align-items: stretch; }
.fh-galeria__todas {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(39,55,67,.62); color: #fff; font-size: 14px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; padding: 10px; text-align: center;
}
.fh-galeria__marcas { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; }
/* Solo el color: el tamano y la forma los pone fh-marco.css. */
.fh-marca { background: var(--fh-arena); color: var(--fh-marino); }

/* --- cabecera de la ficha --- */
.fh-cabecera { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(28px, 4vw, 72px); align-items: center; }
.fh-titulo-ficha {
    font-family: var(--fh-font-display) !important; text-transform: uppercase;
    font-size: clamp(26px, 2.9vw, 50px) !important; line-height: .96 !important;
    letter-spacing: var(--fh-display-ls); color: var(--fh-blanco) !important; margin: 0 0 26px !important;
}
.fh-claves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 52px); }
.fh-claves__num { display: block; font-size: clamp(22px, 2vw, 34px); color: var(--fh-arena); }
/*
 * Sin mayusculas forzadas: la unidad de superficie es "m²", no "M²".
 * Aqui dentro solo hay cifras y unidades, asi que no se pierde nada.
 * Madison, 8-10-2026.
 */
.fh-ficha-pag .fh-claves__num { text-transform: none !important; }
/* La frase del año no compite con las cifras. */
/* El año ya no lleva formato propio: va como el resto de la fila.
   La regla se queda por si alguna ficha vieja en cache la pide. */
.fh-ficha-pag .fh-claves__num--ano { font-size: inherit; align-self: auto; }
.fh-claves__pie { font-size: 13px; color: rgba(255,255,255,.72); }
.fh-claves__pie:empty { display: none; }

.fh-precio-caja { background: var(--fh-blanco); border-radius: var(--fh-radius-card); padding: clamp(24px, 2.4vw, 36px); text-align: center; }
.fh-precio { font-size: clamp(28px, 2.6vw, 42px); color: var(--fh-marino) !important; margin: 0 0 22px !important; }

/* ------------------------------------------------------------------
   Punto 70: la ficha, mas compacta. Madison, 6-10-2026.

   Medido en FH1304 a 1440 px: del boton del reportaje a los datos habia
   254 px, casi todos azul vacio, porque la rejilla centraba el texto en
   vertical contra una caja de precio mucho mas alta.
   ------------------------------------------------------------------ */

/* 1 · Los datos arriba, a la altura del borde de la caja del precio. */
.fh-ficha-pag .fh-cabecera { align-items: start; }

/* 2 y 4 · Un respiro normal por arriba y por abajo, no media pantalla. */
.fh-ficha-pag .fh-cabecera-seccion {
    padding-top: clamp(22px, 2.6vw, 44px);
    padding-bottom: clamp(22px, 2.6vw, 44px);
}

/* 3 · Y dentro de la caja, entre el precio y el primer boton. */
.fh-ficha-pag .fh-precio-caja .fh-precio { margin-bottom: 14px !important; }
.fh-ficha-pag .fh-precio-caja .fh-precio-otros { margin: .2rem 0 .7rem; }

/*
 * 5 · La ficha de vendido ya tenia el texto y la caja a la misma altura;
 * solo le sobraba aire por abajo. Mismo respiro que la de venta.
 */
.fh-vend-ficha .fh-vend-entrada { padding-bottom: clamp(22px, 2.6vw, 44px); }
/* La regla del precio tachado se fue el 10-10-2026: nunca se enseña un precio viejo. */
.fh-ficha-pag .fh-btn {
    display: block; width: 100%; text-align: center; font-weight: 600; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase; padding: 16px 24px;
    border-radius: var(--fh-radius-pill); text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.fh-ficha-pag .fh-btn-primary { background: var(--fh-arena); color: var(--fh-marino) !important; border-color: var(--fh-arena); }
.fh-ficha-pag .fh-btn-primary:hover { opacity: .88; }
.fh-ficha-pag .fh-btn-linea { background: transparent; color: var(--fh-marino) !important; border-color: var(--fh-marino); margin-top: 10px; }
.fh-ficha-pag .fh-btn-linea:hover { background: var(--fh-marino); color: var(--fh-hueso) !important; }

/* --- dos columnas: el titular nunca pisa el texto --- */
.fh-dos-col { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.fh-dos-col__lado { min-width: 0; }
.fh-texto { min-width: 0; max-width: 68ch; }
.fh-texto p { font-size: clamp(15px, 1.05vw, 18px); margin: 0 0 1em; color: var(--fh-grafito); }
.fh-texto-claro { font-size: clamp(15px, 1.05vw, 18px); color: rgba(255,255,255,.82); margin: 0 0 12px; max-width: 46ch; }
.fh-nota { font-size: 14px; color: var(--fh-grafito); margin: 10px 0 22px; }

/* Descripcion compacta con "leer mas". */
.fh-plegable__cuerpo { overflow: hidden; }
.fh-plegable:not(.is-abierto) .fh-plegable__cuerpo { max-height: 16em; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.fh-plegable__boton {
    background: none; border: 0; padding: 10px 0 0; cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-arena);
}
.fh-plegable.is-completo .fh-plegable__boton { display: none; }
.fh-plegable.is-completo:not(.is-abierto) .fh-plegable__cuerpo { max-height: none; -webkit-mask-image: none; mask-image: none; }

/* --- equipamiento --- */
.fh-comodidades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; margin-top: 26px; }
.fh-comodidades li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: var(--fh-rule); font-size: 15px; }
.fh-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--fh-arena); color: var(--fh-marino); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* --- mapa --- */
.fh-mapa-ficha { height: clamp(280px, 34vw, 440px); border-radius: var(--fh-radius-card); overflow: hidden; background: var(--fh-piedra); }

/* --- formulario ---
   El bloque comun se mudo a fh-custom.css el 5-10-2026: la pagina de
   contacto no carga esta hoja, asi que su formulario se quedaba sin
   estilo ninguno mientras el de la ficha si lo tenia. Aqui solo queda lo
   que es de la ficha. */

.fh-visita { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; }
.fh-visita__abrir {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: none; border: 0; padding: 6px 0; cursor: pointer;
    color: var(--fh-arena); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-align: left;
}
.fh-visita__panel { display: grid; gap: 14px; padding-top: 14px; }
.fh-visita__dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fh-dia { position: relative; display: block; text-align: center; padding: 12px 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; cursor: pointer; color: #fff; }
.fh-dia input { position: absolute; opacity: 0; pointer-events: none; }
.fh-dia__sem { display: block; font-size: 11px; color: rgba(255,255,255,.66); text-transform: lowercase; }
.fh-dia__num { display: block; font-family: var(--fh-font-display); font-size: 26px; font-weight: 700; line-height: 1.05; }
.fh-dia__mes { display: block; font-size: 11px; color: rgba(255,255,255,.66); }
.fh-dia:has(input:checked) { background: var(--fh-arena); border-color: var(--fh-arena); color: var(--fh-marino); }
.fh-dia:has(input:checked) .fh-dia__sem, .fh-dia:has(input:checked) .fh-dia__mes { color: rgba(39,55,67,.75); }

.fh-aviso { border-radius: 14px; padding: 16px 20px; font-size: 15px; }
.fh-aviso--ok { background: var(--fh-arena); color: var(--fh-marino); }
.fh-aviso--error { background: rgba(255,255,255,.14); color: #fff; }

/* --- visor de fotos --- */
.fh-visor { position: fixed; inset: 0; z-index: 9000; background: rgba(20,28,34,.96); display: flex; align-items: center; justify-content: center; }
.fh-visor[hidden] { display: none; }
.fh-visor__lienzo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 90px); cursor: grab; }
.fh-visor__lienzo.is-arrastrando { cursor: grabbing; }
/* contain: las fotos verticales se ven enteras, no recortadas */
.fh-visor__lienzo img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.fh-visor__nav, .fh-visor__cerrar {
    position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff;
    width: 52px; height: 52px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
}
.fh-visor__nav:hover, .fh-visor__cerrar:hover { background: var(--fh-arena); color: var(--fh-marino); }
.fh-visor__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.fh-visor__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.fh-visor__cerrar { top: 20px; right: 20px; font-size: 30px; }
.fh-visor__contador { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,.4); padding: 7px 16px; border-radius: var(--fh-radius-pill); }

/* --- movil --- */
@media (max-width: 1000px) {
    .fh-cabecera, .fh-dos-col { grid-template-columns: 1fr; }
    .fh-precio-caja { order: -1; }
}
@media (max-width: 760px) {
    .fh-galeria__rejilla { grid-template-columns: 1fr; }
    .fh-galeria__mini { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: auto; }
    .fh-galeria__thumb { aspect-ratio: 1 / 1; height: auto; }
    .fh-galeria__todas { font-size: 11px; }
    .fh-form__par { grid-template-columns: minmax(0, 1fr); }
    .fh-visor__nav { width: 44px; height: 44px; }
    .fh-visor__nav--prev { left: 10px; }
    .fh-visor__nav--next { right: 10px; }
}

/* Safari antiguo: sin :has() el dia elegido se marca por clase desde JS. */
.fh-dia.is-elegido { background: var(--fh-arena); border-color: var(--fh-arena); color: var(--fh-marino); }
.fh-dia.is-elegido .fh-dia__sem, .fh-dia.is-elegido .fh-dia__mes { color: rgba(39,55,67,.75); }
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
    .fh-ficha-pag .fh-outline { color: var(--fh-arena) !important; -webkit-text-fill-color: var(--fh-arena) !important; }
}

/* Elementor pinta todos los <button> con su estilo global. Los controles
   que no son botones de accion tienen que recuperar su aspecto. */
.fh-ficha-pag .fh-plegable__boton,
.fh-ficha-pag .fh-visita__abrir,
.fh-ficha-pag .fh-galeria__grande,
.fh-ficha-pag .fh-galeria__thumb {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    letter-spacing: normal;
}
.fh-ficha-pag .fh-plegable__boton {
    padding: 12px 0 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}
.fh-ficha-pag .fh-visita__abrir {
    color: var(--fh-arena) !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    border-radius: 0 !important;
}
.fh-ficha-pag .fh-galeria__grande,
.fh-ficha-pag .fh-galeria__thumb {
    border-radius: var(--fh-radius-tile) !important;
    padding: 0 !important;
    background: var(--fh-piedra) !important;
}
.fh-ficha-pag .fh-visor__nav,
.fh-ficha-pag .fh-visor__cerrar {
    background: rgba(255,255,255,.12) !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    letter-spacing: normal !important;
}
.fh-ficha-pag .fh-visor__nav:hover,
.fh-ficha-pag .fh-visor__cerrar:hover { background: var(--fh-arena) !important; color: var(--fh-marino) !important; }

/* --- certificado energetico --- */
/*
 * La marca en lugar de la foto, para quien no tiene una publicada.
 * Pau, Alejandro y Carlos Ruiz no tienen. Madison, 6-10-2026.
 */
.fh-ficha-pag .fh-agente__foto--marca,
.fh-agente__foto--marca {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 72px !important; height: 72px !important; border-radius: 50%;
    flex: 0 0 auto; padding: 0;
    /*
     * El logo va aqui y no en un <img>: es decorativo -el nombre del
     * agente esta al lado, en texto- y como <img> con alt vacio Bing
     * lo contaba como imagen sin texto alternativo (12-10-2026). Mismo
     * tamano de antes: 50 px de ancho, centrado sobre el marino.
     */
    background: var(--fh-marino) url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/filmhouses-logo-oro.svg) center / 50px auto no-repeat;
}

/*
 * La linea de municipio, zona y referencia.
 *
 * Madison, 12-10-2026: en movil "Palma · Paseo Marítimo · Ref. FH1308"
 * pedia 353 px en un hueco de 343 y partia en dos lineas. Un punto
 * menos -12 px en vez de 13- lo deja en 324 y cabe.
 *
 * Y nunca a mitad de palabra: la plantilla pone overflow-wrap
 * break-word en todo el cuerpo, asi que aqui se quita. Si con una zona
 * muy larga no cabe, parte por el espacio que hay junto al punto, que
 * es lo unico por donde puede partir.
 */
.fh-cabecera__texto .fh-eyebrow { overflow-wrap: normal; word-break: keep-all; }

@media (max-width: 640px) {
    .fh-cabecera__texto .fh-eyebrow { font-size: 12px !important; }
}

/*
 * El sello de la caja de precio: "Reservada con FH" encima del precio
 * de salida, como en las fichas de vendidas. El tamano y la forma los
 * pone .fh-vend-entrada__sello en fh-marco.css; aqui van el color y el
 * hueco, que alli no llegan porque esa hoja no se carga en la ficha.
 */
.fh-precio-caja__sello {
    display: inline-block;
    margin: 0 0 14px;
    background: var(--fh-marino);
    color: var(--fh-blanco);
}

.fh-cee { margin: 18px 0 0; font-size: 13px; color: var(--fh-grafito); }
.fh-cee strong { color: var(--fh-marino); font-weight: 600; }

/* --- ubicacion y alrededores --- */
.fh-ubicacion { display: grid; grid-template-columns: 1fr minmax(240px, 320px); gap: 24px; align-items: stretch; }
.fh-cerca { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.fh-cerca li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: var(--fh-rule); }
.fh-cerca__sitio { font-size: 15px; color: var(--fh-grafito); }
.fh-cerca__km { font-size: 22px; color: var(--fh-marino); white-space: nowrap; }

/* --- agente --- */
.fh-agente { display: flex; align-items: center; gap: 16px; margin: 26px 0 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.fh-agente__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fh-agente__nombre { font-size: 17px; font-weight: 500; color: #fff; margin: 0 0 2px; }
.fh-agente__dato { font-size: 14px; color: var(--fh-arena); text-decoration: none; }
.fh-agente__dato:hover { text-decoration: underline; }

.fh-ficha-pag .fh-btn-dossier {
    width: auto !important; display: inline-block !important;
    color: var(--fh-arena) !important; border-color: var(--fh-arena) !important;
    background: transparent !important; margin-top: 4px;
}
.fh-ficha-pag .fh-btn-dossier:hover { background: var(--fh-arena) !important; color: var(--fh-marino) !important; }

/* --- similares --- */
.fh-similares { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 26px; }

@media (max-width: 900px) {
    .fh-ubicacion { grid-template-columns: 1fr; }
    .fh-cerca { margin-top: 8px; }
}

/* ==================================================================
   Las fotos se separan sobre el marino de la marca, como en Serhant
   sobre negro: cada imagen se lee como una pieza, no como un continuo.
   ================================================================== */
.fh-galeria { background: var(--fh-marino); padding: clamp(14px, 1.6vw, 24px) 0 clamp(18px, 2vw, 30px); }
.fh-galeria__rejilla { gap: clamp(10px, 1vw, 16px); }
.fh-galeria__mini { gap: clamp(10px, 1vw, 16px); }

/* Las tarjetas de similares, dentro de la ficha, con su propio contexto. */
.fh-similares .fh-ficha { background: var(--fh-blanco); }
.fh-similares .fh-ficha__titulo {
    font-family: var(--fh-font-display) !important; text-transform: uppercase !important;
    font-size: clamp(17px, 1.2vw, 22px) !important; color: var(--fh-marino) !important;
    line-height: 1.02 !important; letter-spacing: var(--fh-display-ls) !important;
}
.fh-similares .fh-ficha__precio {
    font-family: var(--fh-font-display) !important; text-transform: uppercase !important;
    font-size: clamp(19px, 1.4vw, 26px) !important; color: var(--fh-marino) !important; margin-top: 16px !important;
}
/* Las tarjetas de similares son blancas: arena daba 2,52 de contraste. */
.fh-similares .fh-ficha__sitio { color: var(--fh-grafito) !important; }
.fh-similares .fh-ficha__datos { color: var(--fh-grafito) !important; font-size: 14px !important; }

/* En rejilla, 1fr deja crecer al hijo mas ancho y desborda la pagina.
   minmax(0,1fr) lo obliga a caber. */
@media (max-width: 1000px) {
    .fh-cabecera, .fh-dos-col { grid-template-columns: minmax(0, 1fr); }
}
.fh-dos-col > *, .fh-cabecera > *, .fh-ubicacion > *, .fh-similares > * { min-width: 0; }
.fh-agente { flex-wrap: wrap; }
.fh-agente > div { min-width: 0; }

/* La tira de dias se desplaza en horizontal; sin min-width:0 estira
   el formulario entero y con el toda la pagina. */
.fh-form, .fh-form > *, .fh-form__par, .fh-form__par > *,
.fh-visita, .fh-visita__panel, .fh-visita__panel > * { min-width: 0; }
.fh-visita__dias { max-width: 100%; }
.fh-ficha-pag .fh-seccion > .fh-ancho > * { min-width: 0; }

/* Mismo motivo en la galeria: la tira de miniaturas tenia min-content
   mayor que la pantalla y empujaba la pagina. */
.fh-galeria__rejilla { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fh-galeria__mini, .fh-galeria__grande, .fh-galeria__thumb { min-width: 0; }
.fh-galeria__todas { white-space: normal; line-height: 1.25; }
@media (max-width: 760px) {
    .fh-galeria__rejilla { grid-template-columns: minmax(0, 1fr); }
    .fh-galeria__todas { font-size: 10px; letter-spacing: .04em; padding: 6px; }
}

/* El texto del boton de visita no encogia y empujaba la pagina 30 px. */
.fh-visita__abrir { min-width: 0; }
.fh-visita__abrir > span:first-child { flex: 1 1 auto; min-width: 0; white-space: normal; }
.fh-visita__abrir > span:last-child { flex: 0 0 auto; }
.fh-visita__dias { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==================================================================
   Fotos: mas aire entre ellas, y el marino tambien por fuera, para
   que cada imagen se lea como una pieza y no como un continuo.
   ================================================================== */
.fh-galeria { padding: clamp(18px, 2vw, 30px) 0 clamp(24px, 2.6vw, 40px); }
.fh-galeria__rejilla { gap: clamp(16px, 1.8vw, 28px); }
.fh-galeria__mini { gap: clamp(16px, 1.8vw, 28px); }

/* --- desplegables con el mismo aspecto que el resto de campos --- */
.fh-ficha-pag select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23273743' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 46px !important;
    border-radius: 14px !important;
    border: 0 !important;
    color: var(--fh-marino) !important;
    font-family: var(--fh-font-text) !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    height: auto;
}
.fh-ficha-pag select::-ms-expand { display: none; }

/* --- bloque del dossier --- */
.fh-dossier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: clamp(24px, 4vw, 72px); align-items: center; }
.fh-dossier__texto .fh-nota { margin: 12px 0 0; max-width: 54ch; }
.fh-dossier__form { display: grid; gap: 12px; min-width: 0; }
.fh-dossier__form input {
    width: 100%; background: #fff; border: 1px solid var(--fh-piedra); border-radius: var(--fh-radius-pill);
    padding: 15px 22px; font-family: var(--fh-font-text); font-size: 15px; font-weight: 300; color: var(--fh-marino);
}
.fh-dossier__form input:focus { outline: 2px solid var(--fh-arena); outline-offset: 2px; }
.fh-aviso--claro { background: var(--fh-arena); color: var(--fh-marino); border-radius: var(--fh-radius-pill); text-align: center; }

@media (max-width: 900px) { .fh-dossier { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   v3 - galeria plana, barra de accion, dossier en ventana
   ========================================================= */

/* --- galeria: una grande y cuatro pequenas, separadas en marino ---
   El azul de la casa hace de marco entre fotos y cada una lleva
   ademas su filete, para que ninguna se funda con la de al lado. */
.fh-ficha-pag .fh-galeria {
    background: var(--fh-marino);
    padding: clamp(16px, 1.8vw, 26px) 0 clamp(26px, 3vw, 44px);
}
.fh-galeria__barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 clamp(14px, 1.6vw, 22px);
    min-width: 0;
}
.fh-galeria__marcas { position: static; display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }

/* Punto 68: el H1 vive aqui, a la izquierda del tour. Se estira lo que
   haga falta y parte en varias lineas si el titulo es largo; nunca se
   recorta. El tour se queda a la derecha y no se encoge. */
.fh-ficha-pag .fh-galeria__barra .fh-titulo-ficha {
    flex: 1 1 320px; min-width: 0;
    /* Las mayusculas de la display llevan aire a la izquierda: sin
       compensarlo el titulo se ve metido respecto a la miga y al borde
       de la foto de abajo. Lo mismo que en el titular de resultados. */
    margin: 0 0 0 -0.035em !important;
}
.fh-ficha-pag .fh-galeria__barra .fh-tour { flex: 0 0 auto; }

/* La miga, encima del titulo y sobre el marino de la galeria. */
.fh-ficha-pag .fh-galeria .fh-migas {
    color: rgba(255, 255, 255, .62);
    margin: 0 0 clamp(10px, 1.1vw, 16px);
}
.fh-ficha-pag .fh-galeria .fh-migas li[aria-current] { color: var(--fh-blanco); opacity: 1; }

/* Sin el H1 en medio, la cabecera de abajo necesita el aire que daba el
   margen del titulo entre el antetitulo y los datos. */
.fh-ficha-pag .fh-cabecera__texto > .fh-eyebrow + .fh-claves { margin-top: 14px; }

.fh-tour {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--fh-arena); text-decoration: none;
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 9px 20px; border: 1.5px solid var(--fh-arena-55);
    border-radius: var(--fh-radius-pill); white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.fh-tour:hover { background: var(--fh-arena); color: var(--fh-marino); border-color: var(--fh-arena); }
.fh-tour__icono { display: flex; }

.fh-ficha-pag .fh-galeria__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(14px, 1.5vw, 22px);
    align-items: start;          /* si estiran, la foto grande pierde su proporcion */
}
/* La grande manda: 3:2. Con columnas 1,25fr/1fr, la columna de
   miniaturas mide justo lo mismo de alto con 1,2. Y asi cada
   miniatura queda en 1,21, un termino medio que sienta bien tanto
   a las fotos apaisadas como a las verticales. */
.fh-ficha-pag .fh-galeria__grande { aspect-ratio: 3 / 2; }
.fh-ficha-pag .fh-galeria__mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 22px);
    aspect-ratio: 1.2;
    min-width: 0;
}
.fh-ficha-pag .fh-galeria__grande,
.fh-ficha-pag .fh-galeria__thumb {
    position: relative; display: block; width: 100%; min-width: 0; min-height: 0;
    overflow: hidden; margin: 0; cursor: pointer;
    background: #223039 !important;
    border: 0 !important; padding: 0 !important;
    border-radius: var(--fh-radius-tile) !important;
    box-shadow: inset 0 0 0 1px rgba(192, 157, 117, .28);
}
.fh-ficha-pag .fh-galeria__thumb { height: 100%; }

/* Las miniaturas van de dos en dos. Si son impares, la ultima ocupa las
   dos columnas: asi no se queda una sola con un hueco al lado. */
.fh-ficha-pag .fh-galeria__thumb:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Con menos de cuatro no hacen falta dos filas de alto fijo: el bloque
   se queda con lo que ocupen. */
.fh-ficha-pag .fh-galeria__mini--pocas {
    grid-template-rows: auto; aspect-ratio: auto; align-content: start;
}

/* Y sin ninguna, la foto grande se queda del tamano de siempre y
   centrada. A todo el ancho salia de 929 px de alto y tapaba la pagina. */
.fh-ficha-pag .fh-galeria__rejilla--sola {
    grid-template-columns: minmax(0, min(762px, 100%));
    justify-content: center;
}
/* Punto 68: cada foto llena su recuadro, recortando lo justo. Con
   "contain" la principal dejaba franja de azul arriba y abajo, porque
   la foto viene en 16:9 y el hueco es 3:2. */
.fh-ficha-pag .fh-galeria__grande img,
.fh-ficha-pag .fh-galeria__thumb img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; transition: transform .5s ease;
}
.fh-ficha-pag .fh-galeria__grande:hover img,
.fh-ficha-pag .fh-galeria__thumb:hover img { transform: scale(1.02); }

.fh-ficha-pag .fh-galeria__todas {
    /*
     * Aire por los dos lados, no solo arriba.
     *
     * Quedaba pegado al bloque de abajo. Madison, 7-10-2026.
     */
    position: static; display: block;
    margin: clamp(24px, 2.6vw, 36px) auto clamp(20px, 2.2vw, 32px);
    width: auto; background: transparent !important;
    border: 1.5px solid var(--fh-arena-55) !important;
    border-radius: var(--fh-radius-pill) !important;
    color: var(--fh-blanco) !important;
    font-family: var(--fh-font-text) !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 14px 34px !important; cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.fh-ficha-pag .fh-galeria__todas:hover { background: var(--fh-arena) !important; color: var(--fh-marino) !important; }

@media (max-width: 900px) {
    .fh-ficha-pag .fh-galeria__rejilla { grid-template-columns: minmax(0, 1fr); }
    .fh-ficha-pag .fh-galeria__mini { grid-template-rows: auto; aspect-ratio: auto; }
    .fh-ficha-pag .fh-galeria__thumb { aspect-ratio: 4 / 3; height: auto; }
    .fh-galeria__barra { flex-direction: column; align-items: flex-start; }
    /* Ojo: en columna flex-basis es alto, no ancho. Con el 320px de
       arriba el titulo se estiraba y dejaba un palmo de azul antes del
       tour. Aqui el titulo ocupa lo suyo. */
    .fh-ficha-pag .fh-galeria__barra .fh-titulo-ficha { flex: 0 0 auto; width: 100%; }
    .fh-tour { width: 100%; justify-content: center; }
}

/* --- barra de accion que acompana toda la ficha --- */
.fh-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
    background: rgba(39, 55, 67, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--fh-arena-55);
    transform: translateY(101%);
    transition: transform .28s ease;
    /*
     * El hueco de la barrita del sistema, en el elemento fijo.
     *
     * Estaba en .fh-barra__fila, el hijo. En el iPhone, cuando Safari
     * esconde su barra de herramientas el area segura pasa de 0 a 34px,
     * y un elemento fijo CON transform no siempre la recalcula para sus
     * hijos: la barra quedaba pegada al borde y la barrita del sistema
     * cruzaba por encima del precio y del telefono. Puesto aqui, el
     * relleno es del propio elemento fijo. Pep, 23-10-2026.
     */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/*
 * none, no translateY(0): un transform, aunque no mueva nada, deja el
 * elemento transformado y es parte del problema de arriba. Se ve igual.
 */
.fh-barra.is-visible { transform: none; }
/*
 * Tres clases a proposito.
 *
 * La barra tambien lleva .fh-ancho, y .fh-ficha-pag .fh-ancho pone
 * "padding: 0 var(--fh-gutter)" -la forma corta-, que vale mas que un
 * selector de una clase y dejaba el relleno de ARRIBA y de ABAJO en
 * cero. Por eso la barra salia apretada y, sobre todo, por eso el
 * hueco del area segura no se aplicaba nunca: lo pisaba la forma
 * corta. Es lo que veia Pep en el iPhone cuando Safari escondia su
 * barra de herramientas. Madison, 23-10-2026.
 */
.fh-ficha-pag .fh-barra .fh-barra__fila {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding-top: 13px; padding-bottom: 13px; min-width: 0;
}
.fh-barra__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fh-barra__ref {
    font-family: var(--fh-font-text); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fh-arena);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * La referencia no se corta nunca.
 *
 * Es lo que la persona apunta para preguntar por la casa; el nombre de
 * la zona lo puede deducir de la pagina. Asi que la zona encoge y pone
 * puntos suspensivos, y la referencia se queda entera.
 * Madison, 19-10-2026.
 */
.fh-barra__ref { display: flex; align-items: baseline; }

.fh-barra__zona {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* El hueco va en el margen: dentro de un flex, el espacio de delante
   del texto se pierde y quedaba "MARITIMO· FH1308". */
.fh-barra__ref-num { flex: 0 0 auto; white-space: nowrap; margin-left: .3em; }
.fh-barra__precio {
    font-size: clamp(20px, 2vw, 27px); color: var(--fh-blanco);
    line-height: 1; text-transform: uppercase;
}
/*
 * En venta y en alquiler: los dos precios, uno encima del otro.
 *
 * Madison, 11-10-2026: quien llega desde Alquilar tiene que ver el
 * alquiler. En una sola linea no caben -"975.000 EUR - 4.500 EUR/mes"
 * pide 164 px y el hueco de la barra en un movil de 375 son 116-, asi
 * que van en dos lineas y con letra mas pequena.
 */
.fh-barra__precio--dos {
    display: flex; flex-direction: column; align-items: flex-start;
    font-size: 16px; line-height: 1.15;
}

.fh-barra__precio--dos > span { white-space: nowrap; }

.fh-barra__acciones { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fh-barra__tel {
    color: var(--fh-blanco); text-decoration: none;
    font-family: var(--fh-font-text); font-size: 15px; font-weight: 500; letter-spacing: .04em;
    white-space: nowrap;
}
.fh-barra__tel:hover { color: var(--fh-arena); }

/*
 * El telefono de la barra fija, en movil y tablet.
 *
 * Por debajo de 1100 px el numero escrito esta escondido -no cabe al
 * lado del boton de WhatsApp-, y con el se fue la unica forma de
 * llamar desde donde mira la gente: nueve de cada doce clics de
 * WhatsApp salen del movil, y el telefono llevaba dos semanas a cero.
 * Vuelve como icono, que ocupa lo que un dedo y nada mas, y deja la
 * barra igual de despejada. El dossier sigue escondido.
 * Madison, 19-10-2026.
 */
.fh-barra__llamar { display: none; }

@media (max-width: 1100px) {
    .fh-barra__llamar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 auto;
        border: 1.5px solid var(--fh-arena-55); border-radius: 999px;
        color: var(--fh-blanco); text-decoration: none;
        transition: color .18s ease, border-color .18s ease;
    }

    .fh-barra__llamar:hover,
    .fh-barra__llamar:focus-visible { color: var(--fh-arena); border-color: var(--fh-arena); }
}

/*
 * En pantallas estrechas, el icono se hace un poco mas pequeno y el
 * boton pierde cuatro pixeles de padding a cada lado.
 *
 * Es lo justo para que el precio no se corte: en un iPhone de 375 px,
 * "895.000 €" necesita 67 px y sin este ajuste se quedaba con 66. El
 * rotulo de zona y referencia ya salia cortado antes de tocar nada; eso
 * no lo arregla este cambio.
 */
@media (max-width: 430px) {
    .fh-barra__fila { gap: 8px; }
    .fh-barra__acciones { gap: 8px; }
    .fh-barra__llamar { width: 40px; height: 40px; }
    .fh-barra .fh-barra__acciones .fh-btn { padding: 12px 14px !important; }
}

/*
 * El rotulo del boton, corto cuando no cabe.
 *
 * Con el icono del telefono dentro, el rotulo largo se comia el precio:
 * en aleman "Informationen anfordern" ocupa 238 px de los 343 de un
 * iPhone. Por debajo de 430 px se cambia por una sola palabra.
 */
.fh-barra__cta-corto { display: none; }

@media (max-width: 430px) {
    .fh-barra__cta-largo { display: none; }
    .fh-barra__cta-corto { display: inline; }
}
.fh-barra .fh-btn { white-space: nowrap; }

@media (max-width: 760px) {
    .fh-barra__fila { gap: 12px; }
    .fh-barra__precio { font-size: 19px; }
    .fh-barra__precio--dos { font-size: 14px; }
    .fh-barra__tel, .fh-barra__dossier { display: none; }
    .fh-barra .fh-btn { padding: 12px 20px !important; font-size: 13px !important; }
}

/* --- ventana del dossier --- */
.fh-modal {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(29, 41, 50, .82);
}
.fh-modal[hidden] { display: none; }
.fh-modal__caja {
    position: relative; width: 100%; max-width: 440px;
    background: var(--fh-hueso); color: var(--fh-marino);
    border-radius: 24px; padding: clamp(28px, 3vw, 40px);
}
.fh-modal__cerrar {
    position: absolute; top: 12px; right: 14px;
    width: 36px !important; height: 36px; padding: 0 !important;
    background: transparent !important; border: 0 !important;
    color: var(--fh-grafito) !important; font-size: 26px !important; line-height: 1;
    cursor: pointer; border-radius: 50% !important;
}
.fh-modal__cerrar:hover { color: var(--fh-marino) !important; }
.fh-modal__titulo { font-size: clamp(28px, 3vw, 40px); margin: 6px 0 10px; text-transform: uppercase; }
.fh-modal__nota { font-family: var(--fh-font-text); font-weight: 300; font-size: 15px; color: var(--fh-grafito); margin: 0 0 20px; }
.fh-modal__form { display: grid; gap: 12px; }
.fh-modal__form input {
    width: 100%; background: #fff; border: 1px solid var(--fh-piedra);
    border-radius: var(--fh-radius-pill); padding: 15px 22px;
    font-family: var(--fh-font-text); font-size: 15px; font-weight: 300; color: var(--fh-marino);
}
.fh-modal__form input:focus { outline: 2px solid var(--fh-arena); outline-offset: 2px; }

/* --- cabecera: el logo iba pegado al borde de arriba --- */
body.fh-nuevo .fh-cab { --alto: 96px; box-shadow: inset 0 -1px 0 rgba(192, 157, 117, .3); }

/* Elementor pinta todos los <button>; hay que reponer el fondo de las fotos. */
.fh-ficha-pag .fh-galeria__foto {
    background: #223039 !important;
    border: 0 !important;
    padding: 0 !important;
}

/* El boton de linea esta pensado para fondo claro; en la barra va sobre marino. */
.fh-barra .fh-btn-linea {
    color: var(--fh-blanco) !important;
    border-color: var(--fh-arena-55) !important;
    background: transparent !important;
}
.fh-barra .fh-btn-linea:hover {
    color: var(--fh-marino) !important;
    background: var(--fh-arena) !important;
    border-color: var(--fh-arena) !important;
}

/* Enlace discreto: el dossier ya no merece una seccion entera. */
.fh-enlace-sutil {
    display: block; width: auto !important; margin: 14px auto 0;
    background: transparent !important; border: 0 !important; padding: 0 !important;
    font-family: var(--fh-font-text) !important; font-size: 13px !important; font-weight: 500 !important;
    letter-spacing: .04em; color: var(--fh-grafito) !important;
    text-decoration: underline; text-underline-offset: 4px;
    cursor: pointer; height: auto;
}
.fh-enlace-sutil:hover { color: var(--fh-marino) !important; }

/* =========================================================
   Llamada a la accion en el lateral
   La barra de abajo tapaba contenido y molestaba. Esto usa el
   hueco que ya existia a la derecha de la descripcion y se queda
   pegado mientras se lee. La barra de abajo queda solo para movil,
   donde no hay lateral que valga.
   ========================================================= */
.fh-con-carril {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}
.fh-con-carril__texto { min-width: 0; }
.fh-con-carril .fh-texto { margin-top: clamp(18px, 2vw, 28px); }

.fh-carril { min-width: 0; position: sticky; top: 124px; }
.fh-carril__caja {
    display: grid; gap: 12px;
    background: var(--fh-marino);
    border-radius: var(--fh-radius-card);
    padding: clamp(22px, 2.2vw, 30px);
}
.fh-carril__ref {
    margin: 0; font-family: var(--fh-font-text); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fh-arena);
}
.fh-carril__precio {
    margin: 0 0 6px; color: var(--fh-blanco);
    font-size: clamp(28px, 2.4vw, 38px); line-height: 1; text-transform: uppercase;
}
.fh-carril .fh-btn { width: 100%; text-align: center; justify-content: center; }
.fh-carril .fh-btn-linea {
    color: var(--fh-blanco) !important;
    border-color: var(--fh-arena-55) !important;
    background: transparent !important;
}
.fh-carril .fh-btn-linea:hover {
    color: var(--fh-marino) !important; background: var(--fh-arena) !important; border-color: var(--fh-arena) !important;
}
.fh-carril__tel {
    display: block; text-align: center; margin-top: 4px;
    color: var(--fh-blanco); text-decoration: none;
    font-family: var(--fh-font-text); font-size: 17px; font-weight: 500; letter-spacing: .04em;
}
.fh-carril__tel:hover { color: var(--fh-arena); }
.fh-carril .fh-enlace-sutil { color: var(--fh-piedra) !important; margin-top: 2px; }
.fh-carril .fh-enlace-sutil:hover { color: var(--fh-arena) !important; }

@media (max-width: 1100px) {
    .fh-con-carril { grid-template-columns: minmax(0, 1fr); }
    .fh-carril { position: static; }
    .fh-carril__caja { max-width: 420px; }
}

/* --- los desplegables de la visita eran demasiado grandes --- */
.fh-ficha-pag .fh-desp__boton {
    padding: 11px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}
.fh-ficha-pag .fh-visita__campos .fh-filtro__et,
.fh-ficha-pag .fh-visita label > span { font-size: 11px; }
.fh-ficha-pag .fh-desp__lista li { padding: 9px 14px; font-size: 14px; }

/* La barra de abajo cede el sitio al carril lateral: solo movil. */
@media (min-width: 1101px) { .fh-barra { display: none !important; } }

.fh-carril__titulo {
    margin: 0 0 8px; color: var(--fh-blanco);
    font-size: clamp(26px, 2.1vw, 34px); line-height: 1; text-transform: uppercase;
}

/* El dibujo del 360 se leia como "OD": mejor el numero, que se entiende solo. */
.fh-tour__360 {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fh-arena); color: var(--fh-marino);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 8px; border-radius: var(--fh-radius-pill); line-height: 1;
}
.fh-tour:hover .fh-tour__360 { background: var(--fh-marino); color: var(--fh-arena); }

/* =========================================================
   Bloque de visita: tres dias a la vista y el resto girando,
   y una sola escala de letra en todo el bloque.
   ========================================================= */
.fh-ficha-pag .fh-visita__dias {
    display: grid;
    grid-auto-flow: column;
    /* tres a la vista; los demas se alcanzan arrastrando */
    grid-auto-columns: calc((100% - 2 * 12px) / 3);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--fh-arena-55) rgba(255, 255, 255, .12);
}
.fh-ficha-pag .fh-visita__dias::-webkit-scrollbar { height: 5px; }
.fh-ficha-pag .fh-visita__dias::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .12); border-radius: 999px;
}
.fh-ficha-pag .fh-visita__dias::-webkit-scrollbar-thumb {
    background: var(--fh-arena-55); border-radius: 999px;
}
.fh-ficha-pag .fh-dia {
    scroll-snap-align: start;
    padding: 16px 10px;
    border-radius: 16px;
}
.fh-ficha-pag .fh-dia__sem,
.fh-ficha-pag .fh-dia__mes { font-size: 13px; }
.fh-ficha-pag .fh-dia__num { font-size: 34px; margin: 3px 0 1px; }

/* Misma escala para las etiquetas, los campos y la nota del pie. */
.fh-ficha-pag .fh-visita__panel label > span {
    display: block;
    margin-bottom: 7px;
    font-family: var(--fh-font-text);
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.fh-ficha-pag .fh-visita__panel .fh-desp__boton {
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.fh-ficha-pag .fh-visita__panel .fh-desp__lista li {
    font-size: 14px; text-transform: none; letter-spacing: 0;
}
.fh-ficha-pag .fh-form__pista { font-size: 13px; margin: 2px 0 0; }
.fh-ficha-pag .fh-visita__abrir span:first-child { font-size: 13px; letter-spacing: .1em; }

@media (max-width: 560px) {
    .fh-ficha-pag .fh-visita__dias { grid-auto-columns: calc((100% - 12px) / 2); }
}

/* --- la chapa de exclusiva, sobre la foto principal y visible --- */
.fh-ficha-pag .fh-galeria__grande .fh-galeria__marcas {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    display: flex; gap: 8px; flex-wrap: wrap;
}
/*
 * La de la galeria solo cambia de color. Antes pedia aqui 14px y
 * relleno 11/22, que chocaba con fh-marco.css.
 *
 * Y sin sombra (9-10-2026, Madison): la tira .fh-galeria__marcas mide
 * justo lo que la pildora y lleva overflow: hidden -puesto el
 * 6-10-2026 para que las etiquetas no se coman la foto-, asi que
 * recortaba la sombra en cuadrado. La sombra llenaba las esquinas del
 * rectangulo y se cortaba de golpe en el borde: eso era el "rectangulo
 * que asoma por fuera de la forma redondeada".
 */
.fh-ficha-pag .fh-galeria__grande .fh-marca {
    background: var(--fh-marino);
    color: var(--fh-hueso);
    font-family: var(--fh-font-text);
}

/* --- el correo del agente, debajo del telefono --- */
.fh-agente__dato--bloque { display: block; margin-top: 3px; }

/* --- dias de visita: de tres en tres, con flechas --- */
.fh-visita__tira { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fh-ficha-pag .fh-visita__dias {
    overflow: hidden;           /* ya no se arrastra: se pasa con las flechas */
    scroll-behavior: smooth;
    padding-bottom: 0;
}
.fh-visita__flecha {
    flex: 0 0 auto;
    width: 38px !important; height: 38px;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: 1.5px solid var(--fh-arena-55) !important;
    border-radius: 50% !important;
    color: var(--fh-blanco) !important;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.fh-visita__flecha:hover:not(:disabled) { background: var(--fh-arena) !important; color: var(--fh-marino) !important; }
.fh-visita__flecha:disabled { opacity: .3; cursor: default; }

/* Con overflow:hidden el desplazamiento por codigo no tiraba.
   Se deja auto y se esconde solo la barra: mandan las flechas. */
.fh-ficha-pag .fh-visita__dias {
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fh-ficha-pag .fh-visita__dias::-webkit-scrollbar { height: 0 !important; display: none; }

/* Ya no se desplaza la tira: se ensenan tres y punto. */
.fh-ficha-pag .fh-visita__dias {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible !important;
    scroll-snap-type: none;
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================================================
   Ajustes de movil en la ficha
   ========================================================= */

/* Las cuatro cifras se repartian a lo ancho y cada columna salia
   de un tamano: en rejilla de dos quedan en cuadricula. */
@media (max-width: 680px) {
    .fh-ficha-pag .fh-claves {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }
    .fh-ficha-pag .fh-claves li { min-width: 0; }
}

/* El titular condensado tiene interlineado .94 y dejaba el texto pegado. */
.fh-ficha-pag .fh-dos-col__lado .fh-texto { margin-top: clamp(20px, 2.4vw, 30px); }
.fh-ficha-pag .fh-dos-col__lado .fh-h2 { margin-bottom: 0; }

/* --- la barra de abajo, en movil --- */
@media (max-width: 1100px) {
    .fh-ficha-pag .fh-barra .fh-barra__fila {
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; padding-top: 11px;
        /*
         * El azul llega hasta el borde de la pantalla y el contenido se
         * sube lo justo: el relleno crece con la barrita del sistema en
         * vez de mover la barra hacia arriba, que dejaria un hueco por
         * debajo. En un movil sin barrita, env() vale 0 y queda igual
         * que antes. Pep, 23-10-2026.
         */
        /* El area segura la pone .fh-barra, el elemento fijo. */
        padding-bottom: 11px;
    }
    /* Elementor pinta los button con display propio y ganaba por
       especificidad: el dossier seguia saliendo y pisaba al precio. */
    .fh-barra__tel,
    .fh-barra__dossier { display: none !important; }

    .fh-barra__info { flex: 0 1 auto; min-width: 0; }
    .fh-barra__ref { font-size: 10px; letter-spacing: .12em; }
    .fh-barra__precio {
        font-size: 21px; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    /* Los dos precios no llevan puntos suspensivos: caben enteros. */
    .fh-barra__precio--dos { font-size: 15px; white-space: normal; overflow: visible; }
    .fh-barra__acciones { flex: 0 0 auto; }
    .fh-barra .fh-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        height: 46px; padding: 0 22px !important;
        font-size: 13px !important; white-space: nowrap;
    }
}
@media (max-width: 400px) {
    .fh-barra .fh-btn { padding: 0 16px !important; font-size: 12px !important; }
    .fh-barra__precio { font-size: 19px; }
    .fh-barra__precio--dos { font-size: 13px; }
}

/* Que el contenido pueda subir por encima de la barra al final del todo. */
@media (max-width: 1100px) {
    /* Y el final de la pagina sube lo mismo, para que la barra no lo tape. */
    .fh-ficha-pag { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* `.fh-barra .fh-btn` (dos clases) ganaba a `.fh-barra__dossier` (una)
   aunque ambas llevaran !important, y el dossier volvia a aparecer. */
@media (max-width: 1100px) {
    .fh-barra .fh-barra__dossier,
    .fh-barra .fh-barra__tel { display: none !important; }
}

/* =========================================================
   La galeria, a lo grande
   Se quedaba dentro del contenedor de 1440 y con las fotos
   encajadas dentro de su hueco: mucho azul y poca foto. Ahora
   la galeria se sale del contenedor y las miniaturas llenan su
   hueco, la principal incluida.
   ========================================================= */
.fh-ficha-pag .fh-galeria > .fh-ancho {
    max-width: 1840px;
    padding: 0 clamp(14px, 1.6vw, 28px);
}

@media (max-width: 900px) {
    .fh-ficha-pag .fh-galeria > .fh-ancho { padding: 0 12px; }
}

/* --- la ventana de visita es mas ancha que la del dossier --- */
.fh-modal__caja--ancha { max-width: 560px; }
.fh-modal__caja--ancha .fh-visita__tira { margin: 4px 0 6px; }
.fh-modal__caja--ancha .fh-dia {
    border-color: var(--fh-piedra); color: var(--fh-marino);
    padding: 13px 8px;
}
.fh-modal__caja--ancha .fh-dia__sem,
.fh-modal__caja--ancha .fh-dia__mes { color: var(--fh-grafito); font-size: 12px; }
.fh-modal__caja--ancha .fh-dia__num { font-size: 28px; color: var(--fh-marino); }
.fh-modal__caja--ancha .fh-dia.is-elegido,
.fh-modal__caja--ancha .fh-dia:has(input:checked) { background: var(--fh-arena); border-color: var(--fh-arena); }
.fh-modal__caja--ancha .fh-visita__flecha {
    border-color: var(--fh-piedra) !important;
    color: var(--fh-marino) !important;
}
.fh-modal__caja--ancha .fh-visita__flecha:hover:not(:disabled) {
    background: var(--fh-arena) !important;
}
.fh-modal__caja--ancha .fh-form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fh-modal__caja--ancha label > span {
    display: block; margin-bottom: 6px;
    font-family: var(--fh-font-text); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fh-grafito);
}
.fh-modal__caja--ancha .fh-desp__boton {
    background: #fff !important; border: 1px solid var(--fh-piedra) !important;
    font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important;
}
.fh-modal__nota--pie { margin: 2px 0 6px; font-size: 12px; }
@media (max-width: 520px) {
    .fh-modal__caja--ancha .fh-form__par { grid-template-columns: 1fr; }
}

/* La descripcion vuelve a ocupar su columna ancha. */
.fh-ficha-pag .fh-dos-col > .fh-texto { min-width: 0; }

/* --- la chapa de exclusiva, en dorado --- */
.fh-ficha-pag .fh-galeria__grande .fh-marca {
    background: var(--fh-arena);
    color: var(--fh-marino);
}
@media (max-width: 760px) {
    /* En el movil solo se acerca al borde: el tamano no cambia. */
    .fh-ficha-pag .fh-galeria__grande .fh-galeria__marcas { top: 12px; left: 12px; gap: 6px; }
}

/* "Ref." y su numero, y cada cifra con su unidad, no se parten nunca. */
.fh-ficha__sitio, .fh-ficha__datos { overflow-wrap: break-word; }
.fh-ficha-pag .fh-form__otra {
    margin: 6px 0 0; font-family: var(--fh-font-text); font-size: 14px;
    color: rgba(255, 255, 255, .72);
}
.fh-ficha-pag .fh-form__otra .fh-enlace-sutil {
    display: inline; margin: 0 0 0 4px; color: var(--fh-arena) !important;
    font-size: 14px !important; vertical-align: baseline;
}

/* Punto 49: la confirmacion se montaba encima del titulo.
   El margen del h2 lo pisa la tipografia global de Elementor, asi que
   el hueco lo pone el aviso, con !important y dentro del modal. */
.fh-modal .fh-aviso { margin: 18px 0 4px !important; }

/* ------------------------------------------------------------------
   El bloque de contacto y la ubicacion (puntos 6 y 7, 2-10-2026)
   ------------------------------------------------------------------ */

/*
 * El telefono iba pegado al titulo: h2 sin margen abajo y p sin margen
 * arriba, 0 px de aire. Se le da el mismo que lleva ese par en el resto
 * de la web (el bloque de valoracion de Vender).
 */
.fh-ficha-pag .fh-dos-col__lado .fh-contacto__tel { margin-top: 16px; }

/*
 * El boton de WhatsApp de quien lleva la propiedad. Dentro de una ficha
 * los botones son de columna y ocupan todo el ancho, porque alli van
 * apilados en la caja del precio; este va en linea. Hacen falta tres
 * clases para ganarle a ".fh-ficha-pag .fh-btn".
 */
.fh-ficha-pag .fh-dos-col__lado .fh-contacto__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-top: 18px;
}

/* El texto de la zona, con el aire de un parrafo normal. */
.fh-ficha-pag .fh-ubicacion__texto { margin: 18px 0 clamp(20px, 2.2vw, 30px); }
.fh-ficha-pag .fh-ubicacion__texto p { margin: 0; }

/* Precio: el traspaso y la venta, debajo del principal (4-10-2026). */
.fh-precio-otros {
    margin: .35rem 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .2rem;
}
.fh-precio-otros li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .95rem;
    line-height: 1.3;
}
/*
 * En grafito, no en blanco.
 *
 * La caja del precio es blanca y esta dentro de una seccion .fh-on-marino,
 * que pinta el texto en blanco: "Sin traspaso" salia blanco sobre blanco,
 * contraste 1:1, y no se leia. Por eso FH1304 parecia no decir si hay
 * traspaso o no: lo decia, invisible. Madison, 6-10-2026.
 */
.fh-ficha-pag .fh-precio-caja .fh-precio-otros,
.fh-ficha-pag .fh-precio-caja .fh-precio-otros li { color: var(--fh-grafito); }

/*
 * Y centrado, como todo lo demas de la caja, con el mismo gris que
 * "Certificado energetico". Alineado a la izquierda y mas tenue que el
 * resto cantaba. Madison, 6-10-2026.
 */
.fh-ficha-pag .fh-precio-caja .fh-precio-otros li {
    justify-content: center;
    font-size: 13px;
}
.fh-ficha-pag .fh-precio-caja .fh-precio-otros__rotulo { opacity: 1; }
.fh-ficha-pag .fh-precio-caja .fh-precio-otros__dato { color: var(--fh-marino); font-weight: 600; }
.fh-precio-otros__rotulo { opacity: .78; }
.fh-precio-otros__dato   { font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
 * Los planos van al final del reportaje y se dicen: una hoja tecnica en
 * medio de las fotos se toma por una foto rara. Madison, 6-10-2026.
 */
.fh-galeria__thumb { position: relative; }

.fh-galeria__plano {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(21, 41, 60, .86);
    color: #fff;
    font-family: var(--fh-font-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--fh-radius-pill);
    pointer-events: none;
}

/*
 * Los dos precios de una ficha en venta y en alquiler (11-10-2026).
 *
 * Uno debajo del otro, del mismo tamano que el precio de siempre y cada
 * uno con su etiqueta encima. El margen de abajo lo lleva la caja, no
 * cada precio, que si no quedaban 22 px entre los dos.
 */
.fh-precio-dos { display: grid; gap: 14px; margin: 0 0 22px; }
.fh-precio-dos__rotulo { margin: 0 0 2px !important; opacity: .78; }
.fh-precio--dos { margin: 0 !important; }
.fh-ficha-pag .fh-precio-caja .fh-precio-dos { margin-bottom: 14px; }

/* =========================================================
   La franja de datos de la ficha  (12-10-2026, Madison)
   ---------------------------------------------------------
   "Los datos estan bien y no se cambian, pero la franja se ve
   suelta y vacia". Medido antes de tocar nada, a 1440 px:
     - el boton "Ver las N fotos" quedaba a 75 px de la franja,
     - las cifras se repartian por los 907 px del ancho,
     - y pegadas arriba contra una caja de precio de 280 px
       dejaban 195 px de marino vacio debajo.

   De las tres versiones que vio en staging eligio la C: la
   linea de zona y las cifras a la izquierda, mas grandes y
   juntas, centradas a la altura de la caja blanca de siempre,
   que no cambia (fondo blanco, esquinas redondeadas, precio
   grande, los dos botones uno debajo del otro a todo el ancho
   y el dossier subrayado debajo).

   Aqui solo cambia el aire y el tamano de las cifras: ningun
   dato y ningun texto. Todo cuelga de .fh-ficha-pag, asi que
   solo cambian las fichas.
   ========================================================= */

/* 1 · Poco espacio despues del boton de las fotos. */
.fh-ficha-pag .fh-galeria { padding-bottom: clamp(8px, .9vw, 13px); }
.fh-ficha-pag .fh-galeria__todas {
    margin-top: clamp(16px, 1.8vw, 24px) !important;
    margin-bottom: clamp(6px, .7vw, 10px) !important;
}

/* 2 · Igual de aire arriba que abajo: la caja ni sube ni baja. */
.fh-ficha-pag .fh-cabecera-seccion {
    padding-top: clamp(14px, 1.5vw, 22px);
    padding-bottom: clamp(14px, 1.5vw, 22px);
}

/*
 * 3 · Zona y cifras a la izquierda, centradas a la altura de la
 * caja. Antes iban pegadas arriba (align-items: start), que es
 * lo que dejaba el hueco oscuro debajo de las cifras.
 */
.fh-ficha-pag .fh-cabecera {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: clamp(20px, 2.4vw, 40px);
    align-items: center;
}
.fh-ficha-pag .fh-cabecera__texto > .fh-eyebrow + .fh-claves { margin-top: 10px; }

/* 4 · Las cifras, mas grandes y en grupo, no repartidas por el ancho. */
.fh-ficha-pag .fh-claves { gap: clamp(12px, 1.1vw, 16px) clamp(20px, 2vw, 32px); }
.fh-ficha-pag .fh-claves__num { font-size: clamp(24px, 2.2vw, 38px); }
.fh-ficha-pag .fh-claves__pie { font-size: 13.5px; }

/* 5 · La caja, la de siempre, solo con menos aire dentro. */
.fh-ficha-pag .fh-precio-caja {
    display: block;
    text-align: center;
    padding: clamp(20px, 1.9vw, 30px);
}
.fh-ficha-pag .fh-precio-caja .fh-precio { margin-bottom: 12px !important; }
.fh-ficha-pag .fh-precio-caja .fh-btn { width: 100%; }
.fh-ficha-pag .fh-precio-caja .fh-btn + .fh-btn { margin-top: 9px; }
.fh-ficha-pag .fh-precio-caja .fh-enlace-sutil { margin-top: 12px; }

/*
 * 6 · En el movil: zona, cifras y despues la caja. Una regla de
 * mas arriba subia la caja la primera (order: -1).
 */
@media (max-width: 1000px) {
    .fh-ficha-pag .fh-cabecera {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
    }
    .fh-ficha-pag .fh-precio-caja { order: 0; }
}
@media (max-width: 680px) {
    .fh-ficha-pag .fh-claves { gap: 14px 14px; }
    .fh-ficha-pag .fh-precio-caja { padding: 22px 18px; }
}