/* ---- fh-fuentes ---- */
/*
 * Tipografia de marca, servida desde nuestro servidor.
 *
 * El manual fija Helvetica Neue Condensed Bold para titulares y designa
 * Barlow Condensed 700 como sustituta web libre. Barlow no se estaba
 * cargando: en un movil, donde Helvetica Neue Condensed no existe, los
 * titulares caian en Impact. Montserrat va en version variable, asi que un
 * solo fichero cubre del peso 300 al 700.
 *
 * swap: se lee el texto desde el primer pintado, con la tipografia del
 * sistema, y cambia sola al llegar la nuestra. Nunca texto invisible.
 */

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/barlow-condensed-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/barlow-condensed-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/montserrat-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/montserrat-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * El respaldo de Barlow Condensed, a su medida (punto 93).
 *
 * Barlow llega con font-display: swap, asi que durante un instante el
 * titular se pinta con la letra del sistema, que es mas estrecha, y al
 * llegar Barlow todo se mueve. Con size-adjust el respaldo ocupa lo
 * mismo que la definitiva y el salto desaparece.
 */
@font-face {
    font-family: 'Barlow Condensed respaldo';
    src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Liberation Sans Narrow');
    size-adjust: 115%;
}

/* ---- hello-elementor ---- */
html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#333;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-block-start:.5rem;margin-block-end:1rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-start:0;margin-block-end:.9rem}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;text-decoration:none;color:#c36}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{font-size:16px;color:#333;line-height:1.4;font-style:italic;font-weight:400}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;break-inside:avoid;border:1px solid #ccc}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{width:100%;border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{width:auto;-webkit-appearance:button}[type=button],[type=submit],button{display:inline-block;font-weight:400;color:#c36;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid #c36;padding:.5rem 1rem;font-size:1rem;border-radius:3px;transition:all .3s}[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{color:#fff;background-color:#c36;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;width:100%;margin-block-end:15px;font-size:.9em;border-spacing:0;border-collapse:collapse}table td,table th{padding:15px;line-height:1.5;vertical-align:top;border:1px solid hsla(0,0%,50.2%,.5019607843)}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50.2%,.5019607843)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50.2%,.0705882353)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50.2%,.1019607843)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50.2%,.5019607843)}@media (max-width:767px){table table{font-size:.8em}table table td,table table th{padding:7px;line-height:1.3}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{margin-block-start:0;margin-block-end:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
/* ---- hello-elementor-theme-style ---- */
@charset "UTF-8";.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}.alignfull,.alignfull img{width:100vw}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{position:relative;display:block}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{max-width:500px;margin:50px auto}.post-password-form p{width:100%;display:flex;align-items:flex-end}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:rgb(238.425,238.425,238.425);clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{width:100%;max-height:500px;-o-object-fit:cover;object-fit:cover}@media (max-width:991px){.post .wp-post-image{max-height:400px}}@media (max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{margin:0;padding:0;list-style:none;font-size:.9em}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{display:flex;flex-direction:column;padding-block-start:30px;padding-block-end:30px;padding-inline-start:60px;padding-inline-end:0;border-block-end:1px solid #ccc}#comments .comment .avatar,#comments .pingback .avatar{position:absolute;left:0;border-radius:50%;margin-inline-end:10px}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{position:relative;list-style:none;margin:0;padding-inline-start:30px}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{display:inline-block;font-size:1em;font-weight:400;line-height:100%;content:"↪";position:absolute;top:45px;left:0;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media (min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media (max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{position:inherit;float:left}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-start:auto;margin-inline-end:auto;width:100%}@media (max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-start:10px;padding-inline-end:10px}}@media (min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media (min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}
/* ---- hello-elementor-header-footer ---- */
@charset "UTF-8";.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;padding-block-start:1rem;padding-block-end:1rem;position:relative}.site-header .site-title{font-size:2.5rem;font-weight:500;line-height:1.2}.site-header .site-branding{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.site-header .header-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-header .header-inner .custom-logo-link{display:block}.site-header .header-inner .site-branding .site-description,.site-header .header-inner .site-branding .site-title{margin:0}.site-header .header-inner .site-branding .site-logo img{display:block}.site-header .header-inner .site-branding.show-logo .site-title,.site-header .header-inner .site-branding.show-title .site-logo{display:none!important}.site-header.header-inverted .header-inner{flex-direction:row-reverse}.site-header.header-inverted .header-inner .site-branding{text-align:end}.site-header.header-stacked .header-inner{align-items:center;flex-direction:column;text-align:center}.site-footer{padding-block-start:1rem;padding-block-end:1rem;position:relative}.site-footer .site-title{font-size:1.5rem;font-weight:500;line-height:1.2}.site-footer .site-branding{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.site-footer .footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-footer .footer-inner .custom-logo-link{display:block}.site-footer .footer-inner .site-branding .site-description,.site-footer .footer-inner .site-branding .site-title{margin:0}.site-footer .footer-inner .site-branding .site-logo img{display:block}.site-footer .footer-inner .site-branding.show-logo .site-title,.site-footer .footer-inner .site-branding.show-title .site-logo{display:none!important}.site-footer .footer-inner .copyright{align-items:center;display:flex;justify-content:flex-end}.site-footer .footer-inner .copyright p{margin:0}.site-footer.footer-inverted .footer-inner{flex-direction:row-reverse}.site-footer.footer-inverted .footer-inner .site-branding{text-align:end}.site-footer.footer-stacked .footer-inner{align-items:center;flex-direction:column;text-align:center}.site-footer.footer-stacked .footer-inner .site-branding .site-title{text-align:center}.site-footer.footer-stacked .footer-inner .site-navigation .menu{padding:0}@media (max-width:576px){.site-footer:not(.footer-stacked) .footer-inner .copyright,.site-footer:not(.footer-stacked) .footer-inner .site-branding,.site-footer:not(.footer-stacked) .footer-inner .site-navigation{display:block;text-align:center;width:100%;max-width:none}.site-footer .footer-inner .site-navigation ul.menu{justify-content:center}.site-footer .footer-inner .site-navigation ul.menu li{display:inline-block}}.site-header.header-stacked .site-navigation-toggle-holder{justify-content:center;max-width:100%}.site-header.menu-layout-dropdown .site-navigation{display:none}.site-navigation-toggle-holder{display:flex;align-items:center;padding:8px 15px}.site-navigation-toggle-holder .site-navigation-toggle{display:flex;align-items:center;justify-content:center;padding:.5rem;cursor:pointer;border:0 solid;border-radius:3px;background-color:rgba(0,0,0,.05);color:#494c4f}.site-navigation-toggle-holder .site-navigation-toggle-icon{display:block;width:1.25rem}.site-navigation-toggle-holder .site-navigation-toggle-icon:after,.site-navigation-toggle-holder .site-navigation-toggle-icon:before{content:"";background-color:currentColor;display:block;height:3px;transition:all .2s ease-in-out;border-radius:3px}.site-navigation-toggle-holder .site-navigation-toggle-icon:before{box-shadow:0 .35rem 0 currentColor;margin-block-end:.5rem}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:before{box-shadow:none;transform:translateY(.35rem) rotate(45deg)}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:after{transform:translateY(-.35rem) rotate(-45deg)}.site-navigation{display:flex;align-items:center}.site-navigation ul.menu,.site-navigation ul.menu ul{list-style-type:none;padding:0}.site-navigation ul.menu{display:flex;flex-wrap:wrap}.site-navigation ul.menu li{position:relative;display:flex}.site-navigation ul.menu li a{display:block;padding:8px 15px}.site-navigation ul.menu li.menu-item-has-children{padding-inline-end:15px}.site-navigation ul.menu li.menu-item-has-children:after{display:flex;content:"▾";font-size:1.5em;justify-content:center;align-items:center;color:#666;text-decoration:none}.site-navigation ul.menu li.menu-item-has-children:focus-within>ul{display:block}.site-navigation ul.menu li ul{background:#fff;display:none;min-width:150px;position:absolute;z-index:2;left:0;top:100%}.site-navigation ul.menu li ul li{border-block-end:rgb(238.425,238.425,238.425) 1px solid}.site-navigation ul.menu li ul li:last-child{border-block-end:none}.site-navigation ul.menu li ul li.menu-item-has-children a{flex-grow:1}.site-navigation ul.menu li ul li.menu-item-has-children:after{transform:translateY(-50%) rotate(-90deg)}.site-navigation ul.menu li ul ul{left:100%;top:0}.site-navigation ul.menu li:hover>ul{display:block}footer .site-navigation ul.menu li ul{top:auto;bottom:100%}footer .site-navigation ul.menu li ul ul{bottom:0}footer .site-navigation ul.menu a{padding:5px 15px}.site-navigation-dropdown{margin-block-start:10px;transition:max-height .3s,transform .3s;transform-origin:top;position:absolute;bottom:0;left:0;z-index:10000;width:100%}.site-navigation-toggle-holder:not(.elementor-active)+.site-navigation-dropdown{transform:scaleY(0);max-height:0}.site-navigation-toggle-holder.elementor-active+.site-navigation-dropdown{transform:scaleY(1);max-height:100vh}.site-navigation-dropdown ul{padding:0}.site-navigation-dropdown ul.menu{position:absolute;width:100%;padding:0;margin:0;background:#fff}.site-navigation-dropdown ul.menu li{display:block;width:100%;position:relative}.site-navigation-dropdown ul.menu li a{display:block;padding:20px;background:#fff;color:#55595c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1019607843)}.site-navigation-dropdown ul.menu li.current-menu-item a{color:#fff;background:#55595c}.site-navigation-dropdown ul.menu>li li{transition:max-height .3s,transform .3s;transform-origin:top;transform:scaleY(0);max-height:0}.site-navigation-dropdown ul.menu li.elementor-active>ul>li{transform:scaleY(1);max-height:100vh}@media (max-width:576px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media (min-width:768px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media (min-width:576px) and (max-width:767px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media (min-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media (max-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation{display:none!important}}.site-header.menu-dropdown-none:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}
/* ---- 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-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-custom ---- */
/* Film Houses - ajustes de estilo propios. Cargado desde mu-plugins/fh-custom-style.php */

/* --- Simbolo de moneda ---------------------------------------------------
   Tamano: un punto por debajo de la cifra (0.8), en vez del salto brusco que habia.
   Separacion: en español, aleman y sueco el simbolo va DETRAS y la norma
   tipografica pide un espacio -> "395.000 €".
   En ingles va DELANTE y se escribe pegado -> "€395,000", por eso se excluye [lang^="en"]. */
.inmovilla-property-price .currency,
.inmovilla-property-outlet-price .currency {
    font-size: 0.8em !important;
}

html:not([lang^="en"]) .inmovilla-property-price .currency,
html:not([lang^="en"]) .inmovilla-property-outlet-price .currency {
    margin-left: 0.16em;
}

/* ==================================================================
   PRUEBA: portada con la identidad del dossier (pagina 4676).
   Redefinimos aqui las variables globales de Elementor SOLO en esa
   pagina, asi la cabecera, el pie y todo lo que use estilos globales
   acompañan sin tocar el kit. Se borra entero cuando decidamos.
   ================================================================== */
body.fh-nuevo, body.page-id-4676 {
    /* color */
    --e-global-color-primary:   #273743;
    --e-global-color-secondary: #273743;
    --e-global-color-text:      #6C665E;
    --e-global-color-accent:    #C09D75;
    --e-global-color-0096c1d:   #F4EDE4;   /* White  */
    --e-global-color-1ec5c8b:   #F4EDE480; /* White 50% */
    --e-global-color-bb19890:   #DED5C9;   /* Social Border */
    --e-global-color-2efefc5:   #EFE7DC;   /* Light */
    --e-global-color-ebe7544:   #EFE7DC8A; /* Light 54% */
    --e-global-color-7138c24:   #9C9287;
    --e-global-color-f58383c:   #9C9287;   /* CTA Color */
    --e-global-color-6ee02e6:   #9C9287;
    --e-global-color-977724b:   #9C9287;
    --e-global-color-c653af8:   #6C665E;
    --e-global-color-cc69ced:   #6C665E3D; /* List Divider */
    --e-global-color-fd8037b:   #F4EDE4;
    --e-global-color-93afce2:   #C09D75;   /* Corporativo */

    /* tipografia: titulares en condensada, el resto en Montserrat */
    --e-global-typography-primary-font-family:   'Archivo Narrow';
    --e-global-typography-secondary-font-family: 'Archivo Narrow';
    --e-global-typography-ed622a6-font-family:   'Archivo Narrow';
    --e-global-typography-20816d1-font-family:   'Archivo Narrow';
    --e-global-typography-60a95bd-font-family:   'Archivo Narrow';
    --e-global-typography-cae0dcc-font-family:   'Archivo Narrow';
    --e-global-typography-db3baa9-font-family:   'Archivo Narrow';
    --e-global-typography-cc00b78-font-family:   'Archivo Narrow';
    --e-global-typography-11076cb-font-family:   'Archivo Narrow';

    --e-global-typography-text-font-family:      'Montserrat';
    --e-global-typography-accent-font-family:    'Montserrat';
    --e-global-typography-647bb21-font-family:   'Montserrat';
    --e-global-typography-d52411a-font-family:   'Montserrat';
    --e-global-typography-395c16d-font-family:   'Montserrat';
    --e-global-typography-b355f08-font-family:   'Montserrat';
    --e-global-typography-4933c2e-font-family:   'Montserrat';
}

/* Titulares de SECCION: condensada en mayusculas. Pesan mucho mas que la
   serif al mismo cuerpo, asi que se rebajan y se aprieta el interlineado.
   Se aplica solo al widget de titulo de Elementor, no a los titulos de las
   tarjetas de inmueble ni de noticia, que en mayusculas se apelmazan. */
body.page-id-4676 .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title {
    font-family: 'Archivo Narrow', 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: .005em;
    line-height: 1.02;
}

body.page-id-4676 .elementor-widget-heading h1.elementor-heading-title { font-size: 46px; }
body.page-id-4676 .elementor-widget-heading h2.elementor-heading-title { font-size: 38px; }
body.page-id-4676 .elementor-widget-heading h3.elementor-heading-title { font-size: 30px; }

/* Titulos dentro de tarjetas y bucles: Montserrat, tal y como se escriben. */
body.page-id-4676 .e-loop-item .elementor-heading-title,
body.page-id-4676 .e-loop-item h1,
body.page-id-4676 .e-loop-item h2,
body.page-id-4676 .e-loop-item h3,
body.page-id-4676 .inmovilla-property-listing h1,
body.page-id-4676 .inmovilla-property-listing h2,
body.page-id-4676 .inmovilla-property-listing h3 {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    font-weight: 500;
}

body.page-id-4676,
body.page-id-4676 p,
body.page-id-4676 li,
body.page-id-4676 a,
body.page-id-4676 button,
body.page-id-4676 input,
body.page-id-4676 .elementor-widget-text-editor {
    font-family: 'Montserrat', sans-serif;
}

/* Los antetitulos ("INMUEBLES DESTACADOS") se quedan en Montserrat:
   en condensada competirian con el titular que llevan debajo. */
body.page-id-4676 .elementor-element-3fa27c32 .elementor-heading-title,
body.page-id-4676 .elementor-element-25f70eb .elementor-heading-title,
body.page-id-4676 .elementor-element-f7a4ad5 .elementor-heading-title,
body.page-id-4676 .elementor-element-238998a .elementor-heading-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    font-size: 11px !important;
}

@media (max-width: 767px) {
    body.page-id-4676 .elementor-widget-heading h1.elementor-heading-title { font-size: 30px; }
    body.page-id-4676 .elementor-widget-heading h2.elementor-heading-title { font-size: 26px; }
    body.page-id-4676 .elementor-widget-heading h3.elementor-heading-title { font-size: 22px; }
}

/* ==================================================================
   Etiquetas de inmueble (Exclusiva / Obra nueva).
   El widget Post Info de Elementor las separa con una coma de texto
   suelta, que se ve entre las dos pildoras y no tiene ajuste para
   quitarla. Ocultamos el contenido del contenedor y volvemos a
   mostrar cada etiqueta: la coma deja de verse y el tamano de letra
   de las pildoras no se toca.
   ================================================================== */
.elementor-post-info__terms-list {
    visibility: hidden;
}

.elementor-post-info__terms-list .elementor-post-info__terms-list-item {
    visibility: visible;
}

/* ------------------------------------------------------------------
   PRUEBA (pagina 4676): el pie lleva dos colores escritos a mano que
   no son de marca — la banda del newsletter en #FFF7F1 y el boton
   Subscribete en #011640. Aqui se mapean a hueso y marino para que
   la prueba se vea coherente. En la web real siguen como estaban.
   ------------------------------------------------------------------ */
body.fh-nuevo .elementor-element-5ed90b3,
body.fh-nuevo .elementor-element-5ed69468 {
    background-color: var(--fh-hueso, #F4EDE4) !important;
}

body.fh-nuevo .elementor-location-footer .elementor-button,
body.fh-nuevo .elementor-location-footer button[type="submit"] {
    background-color: var(--fh-marino, #273743) !important;
    border-color: var(--fh-marino, #273743) !important;
    color: #F4EDE4 !important;
    border-radius: 999px !important;
}

/*
 * Solo para lectores de pantalla.
 *
 * Se usa en encabezados que hacen falta para que la jerarquia sea correcta
 * pero que en pantalla sobran, porque el dato ya esta a la vista. No se usa
 * display:none, que los quitaria tambien del arbol de accesibilidad.
 */
.fh-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El destino del enlace de salto no debe dibujar contorno al recibir foco
   por programa, pero si cuando se llega con el teclado. */
#contenido:focus { outline: none; }
#contenido:focus-visible { outline: 2px solid var(--fh-arena); outline-offset: 4px; }

/* =========================================================
   Contraste
   Medido con axe sobre la portada: el antetitulo en arena
   cumple sobre marino (4,86) pero no sobre hueso (2,17) ni
   sobre las tarjetas blancas (2,52). El manual ya prevé este
   caso ("arena sobre marino solo cumple en texto >=24px") y
   da grafito como color de texto secundario: 6,55 sobre
   hueso. Arena se queda donde sí cumple, que es la mayoría
   de la web, porque el 60 % es marino.
   ========================================================= */
/* Se da la vuelta a la regla: grafito por defecto y arena solo donde
   cumple, que es sobre marino. Enumerar los fondos claros uno a uno dejaba
   fuera sitios como el antetitulo del boletin en el pie. */
/* !important porque filmhouses-brand-tokens.css, que es el fichero tal cual
   lo entrego el estudio, fija ahi el color arena y se carga despues. No se
   toca ese fichero: es la referencia de marca. */
.fh-eyebrow,
.fh-portada .fh-eyebrow {
    color: var(--fh-grafito) !important;
}
.fh-portada .fh-seccion--marino .fh-eyebrow,
.fh-portada .fh-on-marino .fh-eyebrow,
.fh-seccion--marino .fh-eyebrow,
.fh-on-marino .fh-eyebrow,
.fh-hero .fh-eyebrow,
.fh-res-cab .fh-eyebrow {
    color: var(--fh-arena) !important;
}
/* Salvo dentro de una tarjeta blanca, aunque la seccion sea marino. */
.fh-seccion--marino .fh-ficha .fh-eyebrow,
.fh-on-marino .fh-ficha .fh-eyebrow,
.fh-ficha__sitio {
    color: var(--fh-grafito) !important;
}

/* Las pestañas inactivas del buscador iban en un gris suelto
   (#8a9099, 3,81 sobre marino). Blanco al 62 % da 5,79 y no
   añade ningún color que no esté en el manual. */
.fh-buscador__pestana {
    color: rgba(255, 255, 255, .62);
}
.fh-buscador__pestana[aria-selected="true"],
.fh-buscador__pestana.is-activa {
    color: var(--fh-blanco);
}

/* Los cuatro casos que quedaban, medidos con axe:
   - "Ver todas" en arena sobre hueso: 2,17. Pasa a marino, y arena se
     reserva para el hover, donde el subrayado ya marca el estado.
   - El antetitulo del bloque de zonas va sobre marino aunque su seccion no
     lleve la clase: con la regla general se quedaba en grafito, 1,61.
   - El antetitulo del boletin, en el pie, sobre hueso. */
.fh-seccion--hueso .fh-enlace,
.fh-seccion--arena .fh-enlace,
.fh-on-claro .fh-enlace,
.fh-seccion--hueso .fh-seccion__cabecera .fh-enlace {
    color: var(--fh-marino) !important;
}
.fh-seccion--hueso .fh-enlace:hover,
.fh-seccion--hueso .fh-enlace:focus-visible,
.fh-on-claro .fh-enlace:hover,
.fh-on-claro .fh-enlace:focus-visible {
    color: var(--fh-arena) !important;
}

/*
 * El teclado hace lo mismo que el raton, y el cambio entra suave.
 *
 * Pep, 20-10-2026. El dorado al pasar el raton ya estaba puesto; lo que
 * faltaba eran dos cosas. Una, que al tabular estos enlaces se quedaban
 * en su color y solo salia el anillo por defecto del navegador. Y dos,
 * que el cambio era seco: transicion 0s. Las tarjetas de agente ya
 * usaban .2s, asi que es el ritmo de la casa y no un numero nuevo.
 *
 * El anillo de foco del navegador NO se quita: el color es un aviso de
 * mas, no el unico.
 */
.fh-enlace,
.fh-oficina__tel a,
.fh-cab__tel,
.fh-pie__sitio,
.fh-pie__sitio a {
    transition: color .2s ease;
}

/*
 * La linea dorada fina, siempre, como la del telefono.
 *
 * Pep, 20-10-2026. El telefono del bloque de oficinas ya llevaba
 * border-bottom dorado permanente, asi que se reconoce como enlace sin
 * depender del color. "Como llegar" y sus hermanos no la llevaban, y su
 * unico aviso al pasar el raton era un dorado de 2,17 de contraste.
 *
 * Va en los enlaces de este estilo -los de la flecha- y no en los
 * telefonos de la cabecera y del pie, que van en blanco sobre marino y
 * son otro contexto.
 */
.fh-enlace {
    border-bottom: 1px solid var(--fh-arena);
    padding-bottom: 2px;
}

.fh-mapa__texto .fh-eyebrow {
    color: var(--fh-arena) !important;
}

.fh-pie .fh-pie__boletin-fila .fh-eyebrow,
.fh-pie .fh-pie__boletin .fh-eyebrow {
    /* Un nivel mas de especificidad que .fh-pie .fh-eyebrow, que pinta de
       arena todo el pie. La franja del boletin va sobre hueso, no sobre
       marino, y ahi arena se queda en 2,17. */
    color: var(--fh-grafito) !important;
}

/* Los enlaces dentro de tarjetas blancas: arena sobre blanco da 2,52.
   Marino sobre blanco da 12,3, y arena se guarda para el hover. */
.fh-agente-tarjeta .fh-enlace,
.fh-ficha .fh-enlace,
.fh-vendido .fh-enlace,
.fh-tarjeta .fh-enlace {
    color: var(--fh-marino) !important;
}
.fh-agente-tarjeta a:hover .fh-enlace,
.fh-agente-tarjeta a:focus-visible .fh-enlace,
.fh-agente-tarjeta .fh-enlace:hover,
.fh-agente-tarjeta .fh-enlace:focus-visible,
.fh-ficha .fh-enlace:hover,
.fh-ficha .fh-enlace:focus-visible,
.fh-vendido .fh-enlace:hover,
.fh-vendido .fh-enlace:focus-visible {
    color: var(--fh-arena) !important;
}

/*
 * Las tarjetas del equipo, sin la linea dorada.
 *
 * Pep, 21-10-2026: le gustaba mas sin ella. Y encaja: en la tarjeta,
 * "Ver su perfil" es un <span>, no un enlace -quien enlaza es la
 * tarjeta entera-, asi que la linea senalaba como enlace algo que no
 * lo es. En "Como llegar" y en los demas enlaces con flecha la linea
 * se queda como esta: alli si son enlaces de verdad.
 */
.fh-agente-tarjeta__ver {
    border-bottom: 0;
    padding-bottom: 0;
}

/* La ficha: sus antetitulos y el "Leer más" van sobre hueso y blanco, donde
   arena se queda en 2,17 y 2,52. Misma regla que en el resto de la web. */
.fh-ficha-pag .fh-eyebrow,
.fh-ficha-pag .fh-plegable__boton,
.fh-ficha-pag .fh-ficha__sitio {
    color: var(--fh-grafito) !important;
}
.fh-ficha-pag .fh-seccion--marino .fh-eyebrow,
.fh-ficha-pag .fh-on-marino .fh-eyebrow {
    color: var(--fh-arena) !important;
}
.fh-ficha-pag .fh-plegable__boton:hover {
    color: var(--fh-marino) !important;
}

/* El aviso del certificado energetico ("Certificado en tramites", "Exento")
   deja su caja dibujada aunque no haya nada que decir, y se ve un rectangulo
   gris vacio bajo el titulo. Si esta vacia, no se pinta. */
.inmovilla-energy-status-message:empty { display: none !important; }

/* =========================================================
   Dos arreglos de las plantillas nuevas
   ========================================================= */

/* El titular de display perdia contra ".elementor-kit-9 h1", que es mas
   especifica, y los H1 salian en Archivo Narrow: mas fina y no es la
   tipografia del manual. En la portada no pasaba porque alli hay una regla
   propia con mas peso. Esta cubre las ocho plantillas. */
body .fh-display {
    font-family: var(--fh-font-display) !important;
}

/* Hueso sobre arena da 2,17. Marino sobre arena da 4,86 y es la combinacion
   que ya usa el manual para el estado de paso del ratón. */
.fh-btn-primary,
.fh-res-filtros__ok,
.fh-buscador__boton {
    color: var(--fh-marino) !important;
}

/* Barlow Condensed siempre, en todos los dispositivos.
   Antes la lista empezaba por Helvetica Neue Condensed Bold: en un Mac o un
   iPhone salia esa y en Android salia Barlow, asi que el titular no se veia
   igual en dos telefonos. Decision de Miguel del 27-09-2026: manda Barlow,
   que es la sustituta libre que designa el propio manual. */
body.fh-nuevo {
    --fh-font-display: "Barlow Condensed", "Barlow Condensed respaldo",
                       "Helvetica Neue Condensed Bold",
                       HelveticaNeue-CondensedBold, Impact, sans-serif;
}

/* ------------------------------------------------------------------
   Los formularios de toda la web (punto 76, 5-10-2026)
   ------------------------------------------------------------------
   Estaba en fh-ficha.css, que solo se carga en las fichas: el
   formulario de Contacto salia sin estilo ninguno. Aqui lo ven todos:
   la ficha, Contacto, Vender, Unete y el aviso de zona vacia.
*/

/* --- formulario (punto 76, 5-10-2026) ---
   Madison: "campos mas pequenos y finos, mas aire entre ellos, la
   etiqueta separada del campo, todo en una columna y el boton debajo, no
   al lado". Vale para todos los formularios de la web: la ficha, el
   contacto, vender, unete y el aviso de zona vacia salen todos de aqui. */
.fh-form { display: grid; gap: 22px; }
.fh-form label {
    display: grid;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}

/* Todo en una columna: antes esto ponia dos campos uno al lado del otro. */
.fh-form__par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

.fh-form input, .fh-form textarea, .fh-form select {
    width: 100%; background: #fff; border: 0; border-radius: 10px;
    padding: 11px 14px; font-size: 15px; color: var(--fh-marino); font-weight: 300;
    line-height: 1.4;
}
.fh-form textarea { min-height: 7.5em; }
.fh-form input:focus, .fh-form textarea:focus, .fh-form select:focus { outline: 2px solid var(--fh-arena); outline-offset: 2px; }
.fh-form__pista { font-size: 12px; color: rgba(255,255,255,.6); margin: -10px 0 0; }

/* El boton, debajo y por su cuenta. */
.fh-form button[type="submit"] { margin-top: 2px; justify-self: start; }

/* En claro, la etiqueta y la pista no pueden ir en blanco. */
.fh-on-claro .fh-form label { color: rgba(21, 41, 60, .72); }
.fh-on-claro .fh-form__pista { color: rgba(21, 41, 60, .62); }
.fh-on-claro .fh-form input,
.fh-on-claro .fh-form textarea,
.fh-on-claro .fh-form select { border: 1px solid rgba(21, 41, 60, .16); }

/* La casilla de privacidad, dentro del formulario.
   Con ".fh-form" delante: ".fh-form label" pesa mas que la clase sola y
   dejaba la casilla encima del texto y en versales. */
.fh-form .fh-form__priv {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    opacity: .85;
}
.fh-form .fh-form__priv input { width: auto; margin-top: .2rem; flex: 0 0 auto; }

/*
 * El enlace tiene que verse que es un enlace: con "color: inherit" y sin
 * subrayado no lo parecia. Madison, 6-10-2026.
 */
.fh-form .fh-form__priv a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.fh-form .fh-form__priv a:hover { text-decoration-thickness: 2px; }

/*
 * Y el texto de la casilla, en minuscula y al lado del cuadrado.
 *
 * En Vender manda ".fh-vender-form label > span", que pone el span en
 * bloque, en versales y a 11px: la casilla salia sola y centrada con el
 * texto debajo en mayusculas.
 */
.fh-form .fh-form__priv > span,
.fh-vender-form .fh-form__priv > span,
.fh-on-claro .fh-vender-form .fh-form__priv > span {
    display: inline;
    margin: 0;
    font-family: var(--fh-font-text);
    font-size: .82rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    color: inherit;
}

/* ------------------------------------------------------------------
   Los botones al pasar el ratón y al enfocar con el teclado (punto 16)
   ------------------------------------------------------------------
   Pep: al pasar por encima, el botón se volvía invisible. La culpa es
   de una regla del tema:

     .elementor-kit-9 button:hover, ... :focus {
         background-color: var(--e-global-color-4380536);
         color: var(--e-global-color-accent);
     }

   y esa variable vale #02010100, que es transparente del todo. El botón
   se quedaba sin fondo y con la letra arena: sobre hueso da 1,9 y no se
   lee. Alcanzaba a todos los <button>, <input type=submit> y
   .elementor-button de la web, no solo al que vio Pep: «Apúntame» sale
   en el pie de todas las páginas.

   El primer intento invertía el botón según si la sección era clara u
   oscura, y eso obligaba a ir enumerando contenedores: la franja del
   boletín, la tarjeta del precio, la portada de las promociones… Cada
   uno que se olvidaba dejaba un botón del color de su fondo. Este no
   pregunta de qué color es la sección:

   - El botón relleno conserva su arena con la letra marino (4,86) y se
     aclara un poco al pasar el ratón. Nunca se confunde con la sección,
     porque el arena no es ni el marino ni el hueso.
   - El botón de línea conserva su color y su borde, y se le echa un velo
     gris translúcido por dentro: sobre fondo oscuro aclara y sobre fondo
     claro oscurece, y la letra no se toca.
*/
/*
 * Una sola pareja para todos los botones, sea cual sea la seccion.
 *
 * Lo intente de dos maneras antes y las dos se rompieron: primero
 * invirtiendo el boton segun si la seccion era clara u oscura, que
 * obligaba a ir enumerando contenedores; y luego dejando el boton de
 * linea transparente con su propio color, que en la portada de las
 * promociones destapaba el marino de detras con la letra marino encima.
 *
 * Esta no pregunta nada: al pasar el raton, todo boton se queda arena
 * con la letra marino y se aclara un 18%. El arena no es ni el marino
 * ni el hueso, asi que el boton nunca se confunde con su seccion, y la
 * letra marino sobre el arena aclarado da 6,72.
 */
body.fh-nuevo .fh-btn:hover,
body.fh-nuevo .fh-btn:focus-visible,
body.fh-nuevo .fh-btn-primary:hover,
body.fh-nuevo .fh-btn-primary:focus-visible,
body.fh-nuevo .fh-btn-secondary:hover,
body.fh-nuevo .fh-btn-secondary:focus-visible,
body.fh-nuevo .fh-btn-linea:hover,
body.fh-nuevo .fh-btn-linea:focus-visible,
body.fh-nuevo .fh-btn-dossier:hover,
body.fh-nuevo .fh-btn-dossier:focus-visible,
body.fh-nuevo .fh-cookies__boton:hover,
body.fh-nuevo .fh-cookies__boton:focus-visible,
body.fh-nuevo .fh-form button[type="submit"]:hover,
body.fh-nuevo .fh-form button[type="submit"]:focus-visible {
    background-color: var(--fh-arena) !important;
    color: var(--fh-marino) !important;
    border-color: var(--fh-arena) !important;
    box-shadow: none;
    filter: brightness(1.18);
    opacity: 1 !important;
}

/* El teclado necesita ver dónde está, no solo el ratón. */
body.fh-nuevo .fh-btn:focus-visible,
body.fh-nuevo button:focus-visible,
body.fh-nuevo input[type="submit"]:focus-visible {
    outline: 3px solid var(--fh-arena);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   El botón fantasma, que no era fantasma (punto 16b)
   ------------------------------------------------------------------
   .fh-btn-secondary se definió en los tokens como fondo transparente con
   borde de 2 px, pero el tema le ganaba por especificidad y le ponía
   fondo arena. Con la letra en currentColor, hueso sobre arena da 2,17 y
   no se lee: «Ver todas las fotos (7)» salía así en las promociones y en
   las fichas, sin hacer nada, antes de pasar el ratón. Ahora es un
   fantasma de verdad: la letra hereda el color de su sección, que ya
   está elegido para leerse sobre ella (10,5 sobre marino).
*/
body.fh-nuevo .fh-btn-secondary {
    background-color: transparent !important;
    border: 2px solid currentColor !important;
}

/*
 * Botones que no son botones: «Dossier» es un <button class="fh-enlace-sutil">
 * que parece un enlace discreto. La regla del tema le ponía la letra arena al
 * pasar el ratón, y arena sobre blanco da 2,16. Se oscurece y se subraya, que
 * es lo que hace un enlace.
 */
body.fh-nuevo .fh-enlace-sutil:hover,
body.fh-nuevo .fh-enlace-sutil:focus-visible {
    color: var(--fh-marino) !important;
    background-color: transparent !important;
    text-decoration: underline;
}

/*
 * El segundo boton de valoracion, debajo de los cuatro pasos de Vender.
 * Pep, 21-10-2026. Va sobre marino, como los pasos, y separado de la
 * ultima fila para que no parezca parte del paso 04.
 */
.fh-vender .fh-pasos__cta {
    /* !important porque el tema pone margin:0 a los <p> con mas peso. */
    margin: 2.5rem 0 0 !important;
    text-align: center;
}