/* ---- 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-habla ---- */
/*
 * "Habla con nosotros", en dos columnas.
 *
 * Madison, 7-10-2026. Hoja propia y no la de las promociones: aquel
 * bloque tiene otra estructura y compartir hoja hacia que arreglar uno
 * moviera el otro.
 *
 * Las dos columnas se alinean arriba (el rotulo de cada una) y abajo
 * (el boton), que es lo que se nota: un boton mas alto que el otro se
 * ve desde lejos.
 */

.fh-habla { display: flex; flex-direction: column; }

/* Con .fh-habla delante: la hoja de la portada pone margin:0 a todos
   sus parrafos y ganaba por orden de carga. */
.fh-habla .fh-habla__rotulo {
    font-size: var(--fh-h2, clamp(26px, 2.6vw, 44px));
    line-height: 1.02; text-transform: uppercase;
    /* Aire de sobra: con menos, "Escribenos" parecia un subtitulo del
       titulo del bloque y no el rotulo de su columna. */
    margin: 0 0 clamp(34px, 3.4vw, 52px);
}

.fh-habla__cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
    align-items: stretch;
}

/* Cada columna, de arriba abajo, con el boton pegado al suelo. */
.fh-habla__col { min-width: 0; display: flex; flex-direction: column; }

.fh-habla .fh-habla__sub {
    /* Mas aire entre el rotulo de cada columna y lo que va debajo. */
    margin: 0 0 28px; padding-bottom: 12px;
    border-bottom: var(--fh-rule);
    font-family: var(--fh-font-text);
    font-size: var(--fh-eyebrow, 12px); font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--fh-arena);
}

/* --- la columna de WhatsApp --- */

.fh-habla__quien { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.fh-habla__foto {
    width: 72px; height: 72px; flex: none;
    border-radius: 50%; object-fit: cover; object-position: center top;
    display: block; background: var(--fh-grafito);
}
.fh-habla .fh-habla__nombre {
    margin: 0; font-family: var(--fh-font-text);
    font-size: 19px; font-weight: 600; line-height: 1.25;
}
.fh-habla__nombre a { color: inherit; text-decoration: none; }
.fh-habla__nombre a:hover { color: var(--fh-arena); }
.fh-habla .fh-habla__cargo {
    margin: 2px 0 0; font-family: var(--fh-font-text);
    font-size: 15px; font-weight: 300; line-height: 1.4; opacity: .78;
}
.fh-habla .fh-habla__texto {
    margin: 0 0 22px; font-family: var(--fh-font-text);
    font-weight: 300; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6;
    max-width: 44ch;
}

/* --- la columna del formulario --- */

/* El formulario ocupa el alto de su columna: si no, el boton se queda
   donde acabe el ultimo campo y no al nivel del de enfrente. */
.fh-habla__form { display: flex; flex-direction: column; flex: 1 1 auto; }
.fh-habla__fila {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.fh-habla__fila label { display: block; min-width: 0; }
.fh-habla__form label > span {
    display: block; margin-bottom: 5px;
    font-family: var(--fh-font-text); font-size: 14px; font-weight: 300; opacity: .8;
}
.fh-habla__form input[type="text"],
.fh-habla__form input[type="tel"] {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; border-radius: var(--fh-radius-card, 10px);
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .06); color: inherit;
    font-family: var(--fh-font-text); font-size: 16px;
}
.fh-habla__form input:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 2px; }

.fh-habla__priv {
    /* Y entre los campos y el boton. */
    display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 30px;
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 300; line-height: 1.45;
}
.fh-habla__priv input { margin: 2px 0 0; flex: none; }
.fh-habla__priv a { color: var(--fh-arena); }

/* El campo trampa: lo rellenan los robots y no se ve. */
.fh-habla__trampa {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.fh-habla__gracias, .fh-habla__error {
    margin: 0; font-family: var(--fh-font-text); font-size: 16px; line-height: 1.55;
}
.fh-habla__error { color: var(--fh-arena); margin-bottom: 14px; }

/*
 * Los dos botones: mismo alto -48 px, el de la web- y pegados al suelo
 * de su columna, asi que quedan a la misma altura aunque una columna
 * tenga mas texto que la otra.
 */
.fh-habla .fh-habla__btn {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    width: 100%; min-height: 48px; padding: 0 28px;
    border: 0; cursor: pointer;
    background: var(--fh-arena); color: var(--fh-marino);
    font-family: var(--fh-font-text); font-weight: 600; font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase; text-align: center;
    border-radius: var(--fh-radius-pill, 999px); text-decoration: none;
    white-space: normal; line-height: 1.2;
    transition: opacity .18s ease;
}
.fh-habla .fh-habla__btn:hover { opacity: .88; }
/* El aire minimo antes del boton lo pone la casilla de privacidad. */

/* Sobre fondo claro, el formulario se pinta con el gris de la casa. */
.fh-on-claro .fh-habla__form input[type="text"],
.fh-on-claro .fh-habla__form input[type="tel"] {
    border-color: rgba(39, 55, 67, .24); background: var(--fh-blanco, #fff);
}
.fh-on-claro .fh-habla__sub { color: var(--fh-marino); }

@media (max-width: 860px) {
    /*
     * Apilado y en este orden: primero WhatsApp, que es lo que mas se
     * usa desde el movil, y debajo el formulario.
     */
    .fh-habla__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .fh-habla__col--wa   { order: 1; }
    .fh-habla__col--form { order: 2; }
    .fh-habla .fh-habla__btn { margin-top: 0; }
    .fh-habla__texto { margin-bottom: 18px; }
}

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

/* El icono del boton, separado del texto. Madison, 8-10-2026. */
.fh-habla__btn.fh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.fh-habla__btn-icono { flex: 0 0 auto; }

/*
 * El pie de la columna del formulario. Hoy solo lo usa Vender: que pasa
 * despues de pedir la valoracion y el telefono de la oficina.
 * Pep, 21-10-2026.
 */
.fh-habla__pie {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.fh-habla__pasa,
.fh-habla__tel {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.fh-habla__tel {
    margin-top: .5rem;
}

.fh-habla__tel a {
    color: var(--fh-arena);
    border-bottom: 1px solid var(--fh-arena);
    padding-bottom: 1px;
    white-space: nowrap;
}