/* ---- 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-obranueva ---- */
/* ------------------------------------------------------------------
   Obra nueva y promociones

   Lo justo para que se vea bien: la rejilla de la portada, la galeria y
   los bloques de datos. Lo demas lo hereda del armazon.
   ------------------------------------------------------------------ */

.fh-obranueva__selector { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/*
 * La tarjeta de una promocion usa .fh-ficha, la misma del resto de la
 * web, asi que no necesita estilos propios. Lo unico suyo: que la
 * etiqueta "Promocion · N viviendas" se distinga de las demas marcas.
 */
.fh-ficha--promo .fh-ficha__marcas .fh-ficha__marca:first-child {
    background: var(--fh-marino);
    color: var(--fh-hueso);
}

/*
 * El precio de una promocion, abajo y sin versales.
 *
 * "Desde 680.000 € hasta 1.350.000 €" en mayusculas grandes y pegado al
 * titulo no se parecia a ninguna otra tarjeta. Madison, 6-10-2026.
 */
.fh-ficha--promo .fh-ficha__cuerpo { display: flex; flex-direction: column; }

/*
 * El precio de una promocion: en una linea, sin versales y sin dejar
 * nunca el simbolo solo.
 *
 * "Desde 281.625 € hasta 765.625 €" es mucho mas largo que un precio
 * suelto. Con !important porque ".fh-portada .fh-display" pone las
 * versales con !important y pesa dos clases. El espacio de no
 * separacion lo pone fh_pro_precio(); aqui solo se deja que pueda
 * partir por " hasta " si de verdad no cabe.
 */
.fh-portada .fh-ficha--promo .fh-ficha__precio--promo,
.fh-obranueva .fh-ficha--promo .fh-ficha__precio--promo,
.fh-ficha--promo .fh-ficha__precio--promo {
    margin-top: auto;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: clamp(1.05rem, 1.6vw, 1.6rem) !important;
    line-height: 1.35;
    text-wrap: balance;
}

/* La galeria de portada de una promocion. */
/* Y aire de sobra antes de lo que venga despues de la galeria. */
.fh-promocion__portada { background: var(--fh-marino); padding-bottom: clamp(24px, 3vw, 44px); }
.fh-promocion__galeria {
    display: grid; gap: 6px;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1440px; margin: 0 auto;
}
/*
 * Las reglas van sobre el hijo de la rejilla, no sobre el <img>.
 *
 * Desde que cada foto va dentro de un boton para poder ampliarla, el
 * hijo de la rejilla es el boton: con "img:first-child" la primera
 * dejaba de ocupar media rejilla y en movil las fotos se quedaban a
 * media anchura con un hueco a la derecha.
 */
.fh-promocion__galeria > * {
    width: 100%; height: 100%; display: block;
    aspect-ratio: 4 / 3; overflow: hidden;
}
.fh-promocion__galeria img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* La primera manda: ocupa media rejilla y el doble de alto. */
.fh-promocion__galeria > *:first-child {
    grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 3;
}
@media (max-width: 760px) {
    .fh-promocion__galeria { grid-template-columns: repeat(2, 1fr); }
    .fh-promocion__galeria > *:first-child { grid-column: span 2; grid-row: auto; }
}

/*
 * El resto de fotos, cuando se abre el boton.
 *
 * Con "display: grid" en la galeria, el atributo hidden no hacia nada:
 * una regla de autor pesa mas que la hoja del navegador, asi que las
 * ocho salian siempre y el mosaico quedaba con una casilla vacia.
 */
.fh-promocion__galeria[hidden] { display: none; }
.fh-promocion__galeria--resto { margin-top: 6px; }
/*
 * El boton de las fotos, como el de la ficha: pequeno y con aire, no
 * pegado al borde de la galeria. Madison, 6-10-2026.
 */
.fh-promocion__masfotos {
    max-width: 1440px;
    margin: 0 auto;
    /*
     * padding, no margen: el margen se colapsaba contra la galeria.
     *
     * 18 px arriba y nada abajo lo dejaban pegado a la galeria y a lo
     * que viniera despues. Madison, 6-10-2026: aire por los dos lados.
     * Va en todas las promociones, que comparten plantilla.
     */
    padding: 28px var(--fh-gutter) 28px;
}

@media (min-width: 1001px) {
    .fh-promocion__masfotos { padding: 40px var(--fh-gutter) 40px; }
}
.fh-promocion .fh-promocion__masfotos .fh-btn,
.fh-promocion__masfotos .fh-btn {
    display: inline-block !important;
    width: auto !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    padding: 11px 22px !important;
}

/*
 * El aviso de imagen orientativa, legible.
 *
 * Estaba a .62 de opacidad sobre marino y casi no se leia. A .86 sobre
 * marino son 8,3:1. Madison, 6-10-2026.
 */
.fh-promocion .fh-promocion__aviso,
.fh-promocion__portada .fh-promocion__aviso {
    max-width: 1440px; margin: 16px auto 0; padding: 0 var(--fh-gutter);
    font-family: var(--fh-font-text); font-size: 13px;
    /* Con !important: fh-custom.css pinta los parrafos y va despues. */
    color: rgba(255, 255, 255, .86) !important;
}

.fh-promocion__sitio {
    font-family: var(--fh-font-text); font-size: 17px; font-weight: 300;
    color: rgba(255, 255, 255, .82); margin: 6px 0 0;
}
.fh-promocion__exclusiva {
    display: inline-block; margin: 16px 10px 0 0;
    border: 1px solid var(--fh-arena); color: var(--fh-arena);
    font-family: var(--fh-font-text); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--fh-radius-pill);
}
.fh-promocion__etiqueta {
    display: inline-block; margin: 16px 0 0;
    background: var(--fh-arena); color: var(--fh-marino);
    font-family: var(--fh-font-text); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--fh-radius-pill);
}
.fh-promocion__cuantas {
    margin: 14px 0 20px;
    font-family: var(--fh-font-text); font-size: 15px;
    color: rgba(255, 255, 255, .82);
}
.fh-promocion__vendida {
    margin: 20px 0 0; font-family: var(--fh-font-text); font-size: 16px;
    color: rgba(255, 255, 255, .82);
}

/*
 * Dos columnas, no cinco.
 *
 * Con auto-fit y minmax(240px, 1fr) salian cinco columnas de 240 px
 * dentro de una columna de contenido de 811: 1.438 px que se salian por
 * la derecha y pasaban por debajo de la tarjeta de contacto.
 *
 * align-content: start para que no quede hueco en blanco al final
 * cuando una columna tiene menos que la otra. Madison, 7-10-2026.
 */
.fh-promocion__datos {
    display: grid; gap: clamp(24px, 2.6vw, 44px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.fh-promocion__datos-col {
    min-width: 0; display: grid; gap: clamp(22px, 2.4vw, 38px);
    align-content: start;
}
.fh-promocion__datos-col:empty { display: none; }

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

/*
 * Las tarjetas de "Viviendas en venta", dentro de la columna.
 *
 * Dos y no tres: a 254 px la tarjeta se queda sin sitio y su cuerpo se
 * sale nueve pixeles por la derecha. El min-width: 0 es lo que permite
 * que la tarjeta encoja por debajo de su contenido en vez de empujar.
 */
.fh-promocion__col .fh-promocion__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fh-promocion__col .fh-promocion__rejilla > * { min-width: 0; }
.fh-promocion__col .fh-promocion__rejilla .fh-ficha__cuerpo { min-width: 0; }

@media (max-width: 760px) {
    .fh-promocion__col .fh-promocion__rejilla { grid-template-columns: minmax(0, 1fr); }
}
/*
 * Los rotulos de los bloques, a la medida del texto que llevan.
 * "Tipos de vivienda" a 1,4rem era enorme para tres lineas.
 */
/*
 * Con ".fh-portada" delante: esa hoja pone el tamano del titulo de
 * seccion con !important y pesa dos clases; con una sola, estos rotulos
 * seguian enormes.
 */
.fh-portada .fh-promocion__dato .fh-seccion__titulo,
.fh-promocion .fh-promocion__dato .fh-seccion__titulo {
    font-size: clamp(.95rem, 1.1vw, 1.1rem) !important;
    letter-spacing: .06em !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
}

/* La entradilla de una promocion, en columna de lectura, como la ficha. */
.fh-promocion .fh-texto { max-width: 68ch; }

/* "Viviendas en venta", con aire antes de las tarjetas. */
.fh-promocion .fh-seccion__titulo + .fh-rejilla { margin-top: clamp(20px, 2.4vw, 38px); }

.fh-promocion__listado { list-style: none; margin: 18px 0 0; padding: 0; }
.fh-promocion__listado li {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid rgba(21, 41, 60, .12);
    font-family: var(--fh-font-text); font-size: 16px;
}
/* Tamano, relleno y forma: fh-marco.css. Aqui solo el color. */
.fh-promocion__marca {
    flex: 0 0 auto; color: var(--fh-grafito);
    border: 1px solid rgba(21, 41, 60, .22);
}

.fh-promocion__agente .fh-lv-agente__caja { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fh-promocion__agente .fh-lv-agente__foto { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; }
.fh-promocion__agente .fh-lv-agente__nombre {
    margin: 4px 0 2px; font-family: var(--fh-font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--fh-blanco);
}
.fh-promocion__agente .fh-lv-agente__cargo {
    margin: 0 0 16px; font-family: var(--fh-font-text); font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

/* ---------------------------------------------------------------
   Promociones vendidas por completo
   Madison, 5-10-2026: lo que vendimos no fue una casa, fue un
   complejo entero, y tiene que entenderse de un vistazo y sin leer.
   --------------------------------------------------------------- */

.fh-promo-banda { position: relative; }

/* Una linea dorada abajo que la separa del listado normal. */
.fh-promo-banda::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--fh-arena), transparent);
}

.fh-promo-banda__titulo { margin-bottom: clamp(28px, 3.4vw, 48px); }

.fh-promo-banda__rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

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

/*
 * El numero, fuera de la tarjeta y encima.
 *
 * Dentro competiria con la foto y con el nombre; fuera no compite con
 * nada, y es lo primero que se ve de toda la pagina.
 */
.fh-promo-grande__numero {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px;
}

.fh-promo-grande__cifra {
    font-family: var(--fh-font-display);
    font-size: clamp(3.4rem, 6.4vw, 5.6rem);
    line-height: .86;
    color: var(--fh-arena);
    /* Sin !important no gana a fh-custom.css, que pinta los parrafos. */
    color: var(--fh-arena) !important;
}

.fh-promo-grande__rotulo {
    font-family: var(--fh-font-display);
    font-size: clamp(1.1rem, 1.9vw, 1.75rem);
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fh-arena) !important;
}

/* La tarjeta: borde dorado y mas alta que una normal. */
.fh-promo-grande__caja {
    display: grid;
    grid-template-rows: auto 1fr;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--fh-arena);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(39, 55, 67, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fh-promo-grande__caja:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(39, 55, 67, .18);
}

/* Las dos fotos, a la vez: una grande y una menor al lado. */
.fh-promo-grande__fotos {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3px;
    background: var(--fh-arena);
}

.fh-promo-grande__foto {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.fh-promo-grande__fotos .fh-promo-grande__foto:first-child { aspect-ratio: 16 / 11; }

/* Con una sola foto, que ocupe todo y no quede un hueco. */
.fh-promo-grande__fotos .fh-promo-grande__foto:only-of-type { grid-column: 1 / -1; }

/* Tamano, relleno y forma: fh-marco.css. Aqui solo el color. */
.fh-promo-grande__sello {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    background: var(--fh-arena); color: var(--fh-marino);
    font-family: var(--fh-font-text);
}

.fh-promo-grande__texto { padding: clamp(20px, 2.4vw, 30px); }

.fh-promo-grande__sitio {
    margin: 0 0 6px;
    font-family: var(--fh-font-text); font-size: 12px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--fh-grafito) !important;
}

.fh-promo-grande__nombre {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.08;
    color: var(--fh-marino) !important;
}

.fh-promo-grande__que {
    margin: 0 0 16px;
    font-family: var(--fh-font-text); font-size: 16px; font-weight: 300;
    color: var(--fh-marino) !important;
}

.fh-promo-grande__enlace {
    display: inline-block;
    font-family: var(--fh-font-text); font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--fh-marino);
    border-bottom: 2px solid var(--fh-arena);
    padding-bottom: 3px;
}

@media (max-width: 520px) {
    /* En movil la foto pequena se queda demasiado estrecha al lado. */
    .fh-promo-grande__fotos { grid-template-columns: 1fr 1fr; }
    .fh-promo-grande__fotos .fh-promo-grande__foto:first-child { aspect-ratio: 4 / 3; }
}

/* El titulo del listado normal, debajo de la banda. */
/*
 * El titular "Propiedades vendidas", despegado de los desplegables: iban
 * pegados y parecian la misma cosa. Madison, 6-10-2026.
 */
.fh-casos-resto__titulo { margin-bottom: clamp(26px, 3.2vw, 44px); }

/*
 * La banda, sobre marino.
 *
 * En hueso quedaba dentro de la pagina y habia que fijarse; en marino se
 * ve que es otra cosa antes de leer nada, y el dorado del numero pega
 * mucho mas fuerte. Madison, 5-10-2026: "si dudas de si destaca, es que
 * no destaca".
 */
.fh-promo-banda.fh-seccion--marino { background: var(--fh-marino); }
.fh-promo-banda.fh-seccion--marino .fh-promo-banda__titulo { color: #fff !important; }
.fh-promo-banda.fh-seccion--marino::after { display: none; }

/* El numero, mas grande todavia sobre el fondo oscuro. */
.fh-promo-banda.fh-seccion--marino .fh-promo-grande__cifra {
    font-size: clamp(4.2rem, 7.6vw, 6.8rem);
}

/* Y la tarjeta blanca, que sobre marino destaca sola. */
.fh-promo-banda.fh-seccion--marino .fh-promo-grande__caja {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.fh-promo-banda.fh-seccion--marino .fh-promo-grande__caja:hover {
    border-color: var(--fh-arena);
}

/*
 * Y separada de la cabecera, que tambien es marina.
 *
 * Sin esto las dos se fundian en un solo bloque oscuro y la banda
 * parecia la continuacion de la cabecera: una raya dorada arriba dice
 * "esto es otra cosa" antes de leer nada.
 */
.fh-promo-banda.fh-seccion--marino {
    border-top: 3px solid var(--fh-arena);
    padding-top: clamp(30px, 3.4vw, 52px);
}

/*
 * Aire entre el titulo de la banda y la fila de los numeros.
 *
 * El titulo quedaba pegado al "30" y al "48", en escritorio y en movil:
 * el numero es muy alto y su propio interlineado se lo comia. Madison,
 * 5-10-2026.
 */
.fh-promo-banda .fh-promo-banda__titulo { margin-bottom: clamp(34px, 4.2vw, 64px); }

/* ===============================================================
   El texto largo de las promociones con archivo propio
   Madison, 6-10-2026.
   =============================================================== */
.fh-promocion__texto { display: grid; gap: clamp(28px, 3vw, 44px); }
.fh-promocion__texto .fh-promocion__dato { max-width: 74ch; }
.fh-promocion__texto p { margin: 0 0 14px; }
.fh-promocion__texto p:last-child { margin-bottom: 0; }

.fh-promocion__lista { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fh-promocion__lista li { position: relative; padding-left: 20px; }
.fh-promocion__lista li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--fh-arena);
}

/* --- Las preguntas frecuentes --- */
.fh-promocion__preguntas { margin: 0; max-width: 74ch; }
.fh-promocion__preguntas dt { font-weight: 600; margin: 22px 0 6px; }
.fh-promocion__preguntas dt:first-child { margin-top: 4px; }
.fh-promocion__preguntas dd { margin: 0; }

/* --- Los enlaces del final --- */
.fh-promocion__finales ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.fh-promocion__finales a {
    display: inline-block; padding: 10px 18px;
    border: 1px solid rgba(39,55,67,.22); border-radius: var(--fh-radius-pill);
    text-decoration: none; font-size: 14px; letter-spacing: .02em;
}
.fh-promocion__finales a:hover { background: var(--fh-arena); border-color: var(--fh-arena); }

/* ===============================================================
   El visor de fotos
   Mismo aspecto que el de las fichas: la hoja de las fichas no se
   carga aqui, asi que las reglas se repiten a proposito.
   =============================================================== */
.fh-promocion__foto {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    cursor: zoom-in; letter-spacing: normal;
}
.fh-promocion__foto:focus-visible { outline: 3px solid var(--fh-arena); outline-offset: 2px; }

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

@media (max-width: 760px) {
    .fh-visor__nav { width: 44px; height: 44px; }
    .fh-visor__nav--prev { left: 10px; }
    .fh-visor__nav--next { right: 10px; }
    .fh-promocion__finales a { font-size: 13px; padding: 9px 15px; }
}

/* ===============================================================
   Promoción vendida: cabecera compacta, dos columnas y contacto
   Madison, 6-10-2026.
   =============================================================== */

/* --- Menos aire en toda la página --- */
.fh-promocion--vendida .fh-seccion { padding-top: 28px; padding-bottom: 28px; }

@media (min-width: 1001px) {
    .fh-promocion--vendida .fh-seccion { padding-top: 44px; padding-bottom: 44px; }
}
.fh-promocion--vendida .fh-promocion__cabecera { padding-bottom: clamp(24px, 3vw, 44px); }
.fh-promocion--vendida .fh-promocion__portada { padding-bottom: 0; }

/*
 * El H1 no ocupa todo el ancho: cabe cómodo en la columna del texto.
 *
 * Con !important porque ".fh-portada .fh-hero__titulo" ya lo lleva, y
 * sin él la regla de aquí no gana aunque sea más específica.
 */
.fh-portada.fh-promocion--vendida .fh-hero__titulo {
    font-size: clamp(32px, 3.4vw, 46px) !important;
    max-width: 20ch;
    margin: 0 0 14px;
}
.fh-promocion--vendida .fh-eyebrow { margin: 0 0 10px; }
.fh-promocion--vendida .fh-promocion__etiqueta { margin: 0 0 14px; }
.fh-promocion--vendida .fh-texto { margin: 0; max-width: 62ch; }
.fh-promocion--vendida .fh-texto p { margin: 0 0 10px; }
.fh-promocion--vendida .fh-promocion__vendida { margin: 14px 0 0; }

/* --- Dos columnas: el texto a la izquierda, el contacto a la derecha --- */
.fh-promocion__dos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(28px, 3.5vw, 56px);
    align-items: start;
}
/*
 * Los huecos, con los numeros que pidio Madison: 40-48 px en ordenador
 * y 24-32 en movil. Sin clamp, que con el ancho de 1024 se quedaba en 31.
 */
.fh-promocion__col { min-width: 0; display: grid; gap: 28px; }
.fh-promocion__col > * { margin: 0; }
.fh-promocion--vendida .fh-promocion__texto { display: grid; gap: 26px; }

@media (min-width: 1001px) {
    .fh-promocion__col { gap: 44px; }
    .fh-promocion--vendida .fh-promocion__texto { gap: 42px; }
}

/* La tarjeta se queda a la vista al bajar. */
.fh-promocion__fija { position: sticky; top: calc(var(--fh-cab-alto, 86px) + 16px); }

/* --- La tarjeta de contacto --- */
.fh-promo-contacto {
    background: var(--fh-marino); color: #fff;
    border-radius: var(--fh-radius, 14px);
    padding: clamp(20px, 2vw, 26px);
    display: grid; gap: 14px;
}
.fh-promo-contacto--final { background: transparent; padding: 0; max-width: 520px; }
.fh-promo-contacto__quien { display: flex; align-items: center; gap: 14px; }
.fh-promo-contacto__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.fh-promo-contacto__nombre { margin: 0; font-weight: 600; }
.fh-promo-contacto__cargo { margin: 2px 0 0; font-size: 13px; opacity: .78; }
/*
 * El titulo de la tarjeta, a dos lineas sin pisarse.
 *
 * La tipografia de marca va con --fh-display-lh: .94, menos que el
 * cuerpo de la letra: "¿Quieres ver esta promocion?" partia en dos y la
 * tilde de la O caia encima de la linea de arriba. Madison, 7-10-2026.
 */
.fh-promo-contacto__titulo {
    margin: 0;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.08;
    text-wrap: balance;
}
.fh-promo-contacto__texto { margin: 0; font-size: 15px; opacity: .9; }
.fh-promo-contacto__wa { justify-self: start; }
.fh-promo-contacto__gracias { margin: 0; font-weight: 600; }
.fh-promo-contacto__error { margin: 0; color: var(--fh-arena); font-size: 14px; }

.fh-promo-contacto__form { display: grid; gap: 10px; margin: 0; }
.fh-promo-contacto__form label { display: grid; gap: 4px; font-size: 13px; }
.fh-promo-contacto__form label > span { opacity: .82; }
.fh-promo-contacto__form input[type="text"],
.fh-promo-contacto__form input[type="tel"] {
    width: 100%; padding: 10px 12px; font-size: 15px;
    border: 1px solid rgba(255,255,255,.26); border-radius: 8px;
    background: rgba(255,255,255,.06); color: inherit;
}
.fh-promo-contacto--final .fh-promo-contacto__form input[type="text"],
.fh-promo-contacto--final .fh-promo-contacto__form input[type="tel"] {
    border-color: rgba(255,255,255,.3);
}
.fh-promo-contacto__form .fh-form__priv {
    display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4;
}
.fh-promo-contacto__form .fh-form__priv input { margin-top: 2px; flex: 0 0 auto; }
.fh-promo-contacto__form .fh-form__priv a { color: var(--fh-arena); }
.fh-promo-contacto__form button { justify-self: start; margin-top: 2px; }
/* La trampa de robots no se ve ni se tabula. */
.fh-promo-contacto__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- La barra fija de móvil --- */
.fh-promo-barra { display: none; }

@media (max-width: 1000px) {
    .fh-promocion__dos { grid-template-columns: minmax(0, 1fr); }
    /* En móvil la tarjeta de la derecha sobra: ya está la barra y el cierre. */
    .fh-promocion__lado { display: none; }

    /*
     * La misma barra que la de la ficha. Pep, 23-10-2026.
     *
     * Antes se apoyaba en el area segura -bottom: env(...)- y eso la
     * subia dejando un hueco por debajo por el que se veia la pagina.
     * Ahora va pegada al borde, como la de la ficha, y es el relleno el
     * que crece: el azul llega hasta abajo del todo y no asoma nada.
     */
    .fh-promo-barra {
        display: flex; gap: 10px; align-items: center; justify-content: center;
        position: fixed; left: 0; right: 0; z-index: 8000;
        bottom: var(--fh-barra-hueco, 0px);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--fh-marino);
        box-shadow: 0 -6px 20px rgba(20,28,34,.28);
    }
    /*
     * Y los dos botones en UNA linea.
     *
     * Con 13px y el relleno de antes, "Habla con Miguel" partia en dos
     * en una pantalla de 375. Se aprieta el relleno lateral y se deja
     * que el texto mande: nowrap, y si un nombre largo no cupiera,
     * encoge la letra en vez de partirse.
     */
    /*
     * Con !important y display propio, igual que .fh-barra .fh-btn.
     *
     * Sin eso no se aplicaba nada: Elementor pinta los botones con sus
     * propias reglas -display: block, 15px y 34px de relleno lateral- y
     * ganaba, asi que "Habla con Angeles" salia en TRES lineas y la
     * barra medía 151 px. Es el mismo choque que ya documenta
     * fh-ficha.css para la barra de la ficha.
     */
    .fh-promo-barra .fh-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        flex: 1 1 0; height: 46px;
        padding: 0 12px !important;
        font-size: 13px !important; white-space: nowrap !important;
        overflow: hidden; text-overflow: ellipsis;
    }
    /*
     * En pantalla estrecha, la letra encoge antes que recortarse.
     *
     * La misma regla que .fh-barra .fh-btn en fh-ficha.css: con un
     * nombre como Angeles el texto llegaba al borde justo en 375.
     */
    @media (max-width: 400px) {
        .fh-promo-barra .fh-btn { padding: 0 8px !important; font-size: 12px !important; }
    }

    /* Sitio al final de la página para que la barra no tape el pie. */
    .fh-promocion--vendida { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .fh-promocion--vendida .fh-hero__titulo { max-width: none; }
}

/* La barra se aparta cuando llega el pie: ahí ya está el contacto. */
.fh-promo-barra { transition: transform .2s ease, opacity .2s ease; }
.fh-promo-barra.is-fuera { transform: translateY(120%); opacity: 0; pointer-events: none; }

/*
 * Los titulares de apartado, todos iguales y por debajo del H1.
 *
 * Los del cuerpo salian a 15 px -parecian rótulos, no titulares- y el de
 * "Preguntas frecuentes" a 47, más grande que el propio H1, que está en
 * 35-46. Madison, 6-10-2026.
 */
.fh-promocion--vendida .fh-promocion__texto .fh-seccion__titulo,
.fh-promocion--vendida .fh-promocion__faq .fh-seccion__titulo {
    font-size: clamp(21px, 1.9vw, 27px) !important;
    margin: 0 0 12px;
    line-height: 1.04;
}

/* ===============================================================
   Quien la vendió, con foto
   Madison, 6-10-2026: igual que en las páginas de vendidas.
   =============================================================== */
.fh-promo-vendedores { margin: 18px 0 0; }
.fh-promo-vendedores__rotulo { margin: 0 0 10px; }
.fh-promo-vendedores__lista {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 14px 32px;
}
.fh-promo-vendedores__uno { display: flex; align-items: center; gap: 12px; }
.fh-promo-vendedores__foto {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    display: block; flex: 0 0 auto;
}
.fh-promo-vendedores__datos { display: grid; gap: 2px; min-width: 0; }
.fh-promo-vendedores__nombre { font-weight: 600; text-decoration: none; }
.fh-promo-vendedores__nombre:hover { text-decoration: underline; }
.fh-promo-vendedores__cargo { font-size: 13px; opacity: .78; }

/* En móvil, uno debajo del otro. */
@media (max-width: 760px) {
    .fh-promo-vendedores__lista { flex-direction: column; gap: 14px; }
}

/*
 * La regla de las etiquetas vive en fh-marco.css, y solo ahi.
 * Aqui habia una copia igual que se quedaba desincronizada.
 * Madison, 10-10-2026.
 */
/*
 * La tira de etiquetas la manda fh-marco.css y nadie mas.
 *
 * Aqui habia una copia con flex-wrap: nowrap y overflow: hidden, que es
 * justo lo que se quito el 10-10 porque cortaba "Obra nueva" a media
 * palabra. Seguia viva en las paginas de obra nueva, que son las que
 * cargan esta hoja, asi que alli una etiqueta podia recortarse sin que
 * se notara en el resto de la web. Madison, 13-10-2026.
 */

/* ---------------------------------------------------------------
   Las promociones EN VENTA, con la misma presentacion de dos columnas
   --------------------------------------------------------------- */

/*
 * La maquetacion de dos columnas la estrenaron las vendidas con texto
 * propio, y sus medidas colgaban de .fh-promocion--vendida. Ahora la
 * llevan todas, asi que lo que es maquetacion vale para las dos y lo
 * que es de una vendida se queda donde estaba. Madison, 7-10-2026.
 */
.fh-promocion--dos .fh-seccion { padding-top: 28px; padding-bottom: 28px; }

@media (min-width: 1001px) {
    .fh-promocion--dos .fh-seccion { padding-top: 44px; padding-bottom: 44px; }
}

.fh-promocion--dos .fh-promocion__cabecera { padding-bottom: clamp(24px, 3vw, 44px); }
.fh-promocion--dos .fh-promocion__portada  { padding-bottom: 0; }
.fh-promocion--dos .fh-promocion__texto    { display: grid; gap: 26px; }

@media (min-width: 1001px) {
    .fh-promocion--dos .fh-promocion__texto { gap: 42px; }
}

.fh-promocion--dos .fh-promocion__texto .fh-seccion__titulo,
.fh-promocion--dos .fh-promocion__faq .fh-seccion__titulo {
    font-size: clamp(21px, 1.9vw, 27px) !important;
    margin: 0 0 12px;
    line-height: 1.04;
}

/* En movil la barra tapa el pie si no se le deja sitio. */
@media (max-width: 1000px) {
    .fh-promocion--dos { padding-bottom: 76px; }
}

/*
 * La tarjeta de comprador: primero quien te atiende.
 *
 * "Tu contacto para esta promocion" era un rotulo pequeno en gris y no
 * se veia. Ahora es el titulo de la tarjeta, con la tipografia de los
 * titulos y el contraste de un titulo; debajo, el agente en grande.
 * Madison, 7-10-2026.
 */
.fh-promo-contacto__rotulo {
    margin: 0 0 16px;
    font-size: clamp(21px, 1.8vw, 26px);
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
    color: #fff !important;
    text-wrap: balance;
}

.fh-promo-contacto__quien--grande { gap: 16px; margin-bottom: 18px; }

.fh-promo-contacto__quien--grande .fh-promo-contacto__foto {
    width: 76px;
    height: 76px;
}

.fh-promo-contacto__quien--grande .fh-promo-contacto__nombre {
    font-size: 18px;
    line-height: 1.2;
}

.fh-promo-contacto__quien--grande .fh-promo-contacto__cargo {
    font-size: 14px;
    opacity: .85;
}

/* La pregunta, ya en cuerpo de texto: el titulo es el de arriba. */
.fh-promo-contacto__pregunta {
    margin: 0;
    font-family: var(--fh-font-text);
    font-size: 16px;
    line-height: 1.35;
}

.fh-promo-contacto__nombre a,
.fh-promo-contacto__foto {
    color: inherit;
    text-decoration: none;
}

.fh-promo-contacto__nombre a:hover { text-decoration: underline; }

/* El dossier: un enlace discreto, no un boton mas. */
.fh-promo-contacto__pdf {
    margin: 2px 0 0;
    font-size: 14px;
}

.fh-promo-contacto__pdf a {
    color: var(--fh-arena);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * El segundo boton de la barra de movil, legible.
 *
 * "Que me llamen" salia en gris sobre el marino de la barra, sin borde
 * y casi sin leerse. Estaba asi desde que monte la barra, tambien en
 * Pinzons y en The Sunset Ibiza. Madison, 7-10-2026.
 */
.fh-promo-barra .fh-btn-linea {
    background: transparent;
    color: var(--fh-hueso, #f7f4ef) !important;
    border: 1px solid currentColor;
}

.fh-promo-barra .fh-btn-linea:hover {
    background: var(--fh-hueso, #f7f4ef);
    color: var(--fh-marino) !important;
}

/*
 * Los dos botones de la tarjeta, a ancho completo y con la misma altura.
 *
 * "WhatsApp a Miguel" y "Que me llame Miguel" iban pegados a la
 * izquierda, cada uno de su ancho y de su alto, y quedaban descolgados
 * de los campos, que si ocupan toda la tarjeta. Madison, 7-10-2026.
 *
 * Va en la plantilla: vale para las vendidas, para las que estan en
 * venta y para la que hagamos manana.
 */
.fh-promo-contacto .fh-promo-contacto__wa,
.fh-promo-contacto .fh-promo-contacto__form button {
    justify-self: stretch;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Y en la barra del movil, los dos iguales. */
.fh-promo-barra .fh-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*
 * El mismo ritmo vertical en todas las promociones.
 *
 * Las vendidas ya iban asi; las que estan en venta heredaban el
 * espaciado general de la web -56 px arriba y abajo- y entre bloque y
 * bloque quedaban huecos enormes. Madison, 7-10-2026: "deja el mismo
 * espaciado que Pinzons".
 */
.fh-promocion .fh-seccion {
    padding-top: 28px;
    padding-bottom: 28px;
}

@media (min-width: 1001px) {
    .fh-promocion .fh-seccion {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

/*
 * La tarjeta grande, con una sola foto a todo el ancho.
 *
 * Con object-fit: cover no se deforma; el recorte es minimo porque las
 * portadas son apaisadas de 3:2 o de 16:9 y el hueco es de 16:10.
 * Madison, 7-10-2026.
 */
.fh-promo-grande__fotos .fh-promo-grande__foto:only-of-type {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 520px) {
    .fh-promo-grande__fotos .fh-promo-grande__foto:only-of-type { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------
   NORMA: ningun bloque de contacto a todo el ancho se queda en una
   sola columna con media pantalla vacia.
   --------------------------------------------------------------- */

/*
 * El bloque del cierre ocupaba la mitad izquierda y dejaba la derecha
 * en blanco. En escritorio va en dos columnas: a la izquierda quien te
 * atiende y el WhatsApp, a la derecha el formulario. En movil, apilado.
 * Madison, 7-10-2026.
 *
 * Las dos columnas son envoltorios que en la tarjeta de al lado no
 * pintan nada (display: contents), asi que el mismo marcado sirve para
 * las dos posiciones.
 */
.fh-promo-contacto__izq,
.fh-promo-contacto__der { display: contents; }

@media (min-width: 861px) {
    .fh-promo-contacto--final {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 64px);
        align-items: start;
        max-width: none;
    }

    .fh-promo-contacto--final .fh-promo-contacto__izq,
    .fh-promo-contacto--final .fh-promo-contacto__der {
        display: grid;
        gap: 14px;
        align-content: start;
        min-width: 0;
    }

    .fh-promo-contacto--final .fh-promo-contacto__form { margin: 0; }
}

/*
 * Los dos botones, con el texto oscuro sobre el dorado.
 *
 * "Que me llame Luis" salia en claro sobre dorado y no se leia.
 * Madison, 7-10-2026: los dos como el de WhatsApp.
 */
.fh-promo-contacto .fh-btn-linea,
.fh-promo-contacto .fh-promo-contacto__form button {
    background: var(--fh-arena);
    color: var(--fh-marino) !important;
    border: 0;
}

.fh-promo-contacto .fh-btn-linea:hover,
.fh-promo-contacto .fh-promo-contacto__form button:hover { opacity: .88; }

/* ------------------------------------------------------------------
   Las etiquetas de la tarjeta de promocion
   ------------------------------------------------------------------
   Madison, 13-10-2026. Esta tarjeta es horizontal y su foto es la mas
   estrecha de la web: 327 px a 834, 275 a 700, 246 a 1280 y 196 a 1024.
   Encima sus etiquetas son las mas largas, porque llevan el recuento
   ("9 viviendas · 3 disponibles"). Con el relleno de 10 la pareja no
   cabia en una fila con 14 px a cada lado: faltaban nueve.

   Con 7 cabe y sobran tres. La letra no se toca -ni el tamano ni el
   espaciado-: solo se estrecha la pastilla, que se nota mucho menos.
   ------------------------------------------------------------------ */
.fh-ficha--promo .fh-ficha__marca { padding: 5px 7px; }

/* ------------------------------------------------------------------
   La franja de contacto del final, con el diseño de «Habla con nosotros»
   ------------------------------------------------------------------
   Madison, 14-10-2026: un solo diseño de contacto en toda la web. Aquí
   cambia solo la presentación: la persona, el formulario y su destino,
   y el mensaje de WhatsApp de esta página se quedan como estaban.

   La columna lateral (--lado) no se toca: es estrecha y ahí no caben
   dos columnas, igual que en la ficha de un inmueble.
   ------------------------------------------------------------------ */
.fh-promo-contacto--final {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
    align-items: stretch;
    max-width: none;
}

/* Cada columna de arriba abajo, con el botón pegado al suelo. */
.fh-promo-contacto--final .fh-promo-contacto__izq,
.fh-promo-contacto--final .fh-promo-contacto__der {
    min-width: 0; display: flex; flex-direction: column;
}

/* La foto, del tamaño de las del bloque de siempre. */
.fh-promo-contacto--final .fh-promo-contacto__quien { gap: 16px; margin: 0 0 18px; }
.fh-promo-contacto--final .fh-promo-contacto__foto { width: 72px; height: 72px; }

.fh-promo-contacto--final .fh-promo-contacto__titulo {
    font-size: clamp(24px, 2.2vw, 34px);
    margin: 0 0 10px;
}
.fh-promo-contacto--final .fh-promo-contacto__texto {
    font-family: var(--fh-font-text);
    font-size: 16px; line-height: 1.55; opacity: 1;
    margin: 0 0 24px;
}

/* El botón de WhatsApp abajo del todo, como en el bloque de siempre. */
.fh-promo-contacto--final .fh-promo-contacto__wa { margin-top: auto; align-self: start; }

.fh-promo-contacto--final .fh-promo-contacto__form { gap: 14px; flex: 1 1 auto; }
.fh-promo-contacto--final .fh-promo-contacto__form button { margin-top: auto; }

/* En móvil, una debajo de otra: primero WhatsApp y luego el formulario. */
@media (max-width: 900px) {
    .fh-promo-contacto--final {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(26px, 5vw, 40px);
    }
    .fh-promo-contacto--final .fh-promo-contacto__wa { margin-top: 0; }
}

/*
 * El selector de orden de la lista. Madison, 23-10-2026.
 *
 * Va debajo del selector de En venta / Vendidos, sobre el marino de la
 * cabecera, asi que el campo se dibuja a mano: el <select> del sistema
 * sale blanco y rompe la banda. La flecha es un SVG de fondo porque
 * appearance: none se la lleva por delante.
 */
.fh-obranueva__orden {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 20px;
}

.fh-obranueva__orden-rotulo {
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .85;
}

.fh-obranueva__orden-campo {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, .08);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d8c18c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    padding: 11px 40px 11px 14px;
    min-height: 44px;
    max-width: 100%;
}

.fh-obranueva__orden-campo:focus-visible {
    outline: 2px solid var(--fh-oro, #d8c18c);
    outline-offset: 2px;
}

/* El desplegable lo pinta el sistema: ahi mandan sus colores. */
.fh-obranueva__orden-campo option {
    color: #273743;
    background: #fff;
}

@media (max-width: 520px) {
    .fh-obranueva__orden {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .fh-obranueva__orden-campo { width: 100%; }
}

/*
 * Elementor le pone display:block a todo .fh-btn, y eso gana al
 * [hidden] del navegador: el boton se seguia viendo con JavaScript
 * encendido. Hace falta !important, como en las demas botoneras.
 * Madison, 23-10-2026.
 */
.fh-obranueva__orden-ir[hidden] {
    display: none !important;
}

/* ---- 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;
        }
    }
}