/* ---- 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-landing-venta ---- */
/*
 * Landings de venta.
 *
 * Aqui solo va lo que la web NO tiene ya. Los fondos, los titulos, el
 * contenedor, las tarjetas, el acordeon de preguntas, el formulario y los
 * botones salen de los componentes de siempre: fh-portada + fh-landing
 * como envoltorio, fh-seccion, fh-hero, fh-ancho, fh-landing__texto,
 * fh-rejilla con fh_portada_tarjeta(), fh-landing__faq, el bloque de
 * valoracion de Vender y fh-btn-*.
 *
 * Si algo de aqui empieza a parecerse a un componente de la web, es que
 * hay que borrarlo y usar el de la web.
 */

/* Los dos CTA, en fila. */
.fh-lv-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fh-lv-cta__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/*
 * Las dos columnas usan fh-vender-dos, el contenedor que ya tiene la web
 * (columnas, gap y el salto a una columna a 1000 px). Aqui no se repite
 * nada de eso: solo se anade abajo que compartan las filas.
 */

/* El agente. */
.fh-lv-agente__caja {
    display: flex;
    gap: 18px;
    align-items: center;
}

.fh-lv-agente__foto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;   /* el hueco reservado, que no mueva la pagina */
    flex: 0 0 auto;
}

/*
 * Cuando el agente todavia no tiene foto, la marca en su sitio: el
 * hueco es el mismo, asi que la fila no se mueve el dia que la tenga.
 * Siempre sobre marino, que es donde el logo de oro se lee en los dos
 * fondos de la pagina.
 */
.fh-lv-agente__foto--marca {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fh-marino, #16314a);
    overflow: hidden;
}

.fh-lv-agente__foto--marca img {
    width: 62%;
    height: auto;
}

.fh-lv-agente__nombre  { margin: 0; font-weight: 600; }

/*
 * El a y el b en la misma seccion: el texto a la izquierda y la tarjeta
 * del agente a la derecha. Las dos columnas las pone fh-vender-dos, que
 * es el componente de la web y ya se apila solo en movil; aqui va solo
 * lo que esta fila necesita.
 */
.fh-lv-ab { align-items: start; }

.fh-lv-ab .fh-lv-agente__caja { align-items: center; }

.fh-lv-agente__datos { min-width: 0; }

.fh-lv-agente__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 1000px) {
    /* Apilados: la tarjeta se separa del texto. */
    .fh-lv-ab .fh-lv-agente__caja { margin-top: 8px; }
}
.fh-lv-agente__cargo,
.fh-lv-agente__idiomas { margin: 2px 0 0; opacity: .85; }

/* Los enlaces del final, en fila. */
.fh-lv-enlaces__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

/*
 * El bloque de inmuebles va SIN PRECIOS.
 *
 * Lo pide el encargo (A4.2.c) y la tarjeta de la web los trae. Se usa la
 * tarjeta de siempre, entera: hasta el 2-10-2026 aqui se le escondia el
 * precio, y Miguel pidio que se vea, como en la portada y en Comprar.
 */

/* Los CTA del medio, sin el aire de una seccion entera. */
.fh-lv-ctas__medio { padding-block: 20px; }

/*
 * La barra fija de movil: WhatsApp principal y la valoracion segunda.
 * En ordenador no existe.
 */
.fh-lv-barra { display: none; }

@media (max-width: 759px) {
    /*
     * Los botones de los CTA, partidos.
     *
     * .fh-btn lleva white-space: nowrap, y "Habla con el especialista de
     * Portals Nous" en una sola linea mide 512 px: en un movil de 375 se
     * salia por la derecha y arrastraba la pagina entera. Aqui se deja
     * partir el texto y se le quita el suelo a la columna, que es lo que
     * impedia encogerla.
     */
    .fh-lv-ctas { grid-template-columns: minmax(0, 1fr); }

    /*
     * Con .fh-portada delante: la hoja de la portada trae
     * ".fh-portada .fh-btn { white-space: nowrap }", que pesa lo mismo
     * que ".fh-lv-ctas .fh-btn" y va despues, asi que ganaba. Con el
     * envoltorio de la landing delante, esta pesa mas y no hace falta
     * !important.
     */
    .fh-portada .fh-lv-ctas .fh-btn,
    .fh-portada .fh-lv-agente__caja .fh-lv-agente__wa {
        white-space: normal;
        min-width: 0;
        max-width: 100%;
        text-align: center;
    }

    .fh-lv-barra {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        max-width: 100vw;
        box-sizing: border-box;
        padding: 10px 14px;
        background: var(--fh-hueso, #f4f1ec);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
    }

    /*
     * La barra del movil, en una fila.
     * Con los dos botones apilados y a tamano normal ocupaba 116 px
     * de pantalla. En una fila y mas bajos se queda en la mitad.
     */
    .fh-lv-barra .fh-lv-ctas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .fh-portada .fh-lv-barra .fh-btn {
        padding: 11px 10px;
        font-size: 12px;
        letter-spacing: .06em;
        line-height: 1.2;
    }

    .fh-lv-barra .fh-lv-cta__whatsapp { order: 1; justify-content: center; }
    .fh-lv-barra .fh-lv-cta__valorar  { order: 2; text-align: center; }

    /* En la barra el icono sobra: el texto ya dice de que va. */
    .fh-lv-barra .fh-lv-cta__whatsapp svg { display: none; }

    /* El hueco para que la barra no tape el final ni el aviso de cookies.
       Con padding, no con position: asi no provoca salto de diseno. */
    body:has(.fh-lv-barra) { padding-bottom: 72px; }

    .fh-lv-ctas--arriba,
    .fh-lv-ctas--medio { display: grid; grid-template-columns: 1fr; }

    .fh-lv-agente__caja { gap: 14px; }
    .fh-lv-agente__foto { width: 88px; height: 88px; }
}

/*
 * Las dos columnas, alineadas de verdad.
 *
 * El contenedor es el fh-vender-dos de la web. Lo unico que se anade es
 * que las dos columnas compartan las filas: sin esto, cuando un titulo
 * ocupa dos lineas y el otro una, los parrafos arrancan a distinta
 * altura y se ve descuadrado.
 */
@supports (grid-template-rows: subgrid) {
    .fh-lv-dos { grid-template-rows: auto auto; }

    .fh-lv-dos > * {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        gap: 0;
    }

    /*
     * Y la cabecera, estirada hasta el alto de su fila.
     *
     * La linea dorada es el borde de abajo de .fh-seccion__cabecera. Con
     * align-self: start cada cabecera medía lo suyo y las dos lineas
     * quedaban a distinta altura cuando un titulo ocupaba dos lineas.
     * Estirandolas, las dos terminan donde termina la fila, asi que las
     * lineas coinciden; y como la cabecera ya alinea su contenido con
     * align-items: flex-end, los titulos quedan tambien al ras.
     */
    .fh-lv-dos > * > .fh-seccion__cabecera { align-self: stretch; }
}

/*
 * Las ventas publicadas (punto 100) tienen su propia hoja,
 * fh-vendidos.css: usan la tarjeta fh-ficha de siempre, asi que alli solo
 * esta lo que cambia.
 */

/* "Actualizado el ...", al final de la landing (punto 113.10). */
.fh-lv-actualizado {
    margin: 0;
    padding: 22px 0 34px;
    text-align: center;
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(39, 55, 67, .55);
}

/*
 * La direccion de la oficina, enlazada a su ficha de Google.
 *
 * Lleva .fh-enlace para que se reconozca como enlace -la linea dorada
 * fina que Pep fijo el 20-10-2026-, pero .fh-enlace esta hecho para
 * "Ver todas": es inline-flex, nowrap y uppercase, y con una direccion
 * entera medía 448 px dentro de un parrafo de 343, asi que se salia por
 * la derecha en el movil y ademas la ponia en mayusculas, que no es
 * como se ensena en el pie ni en Contacto.
 *
 * Aqui se devuelve a texto normal: parte en dos lineas, conserva su
 * caja y no toca el resto de enlaces de la web. Madison, 22-10-2026.
 */
.fh-lv-oficina .fh-lv-oficina__mapa {
    display: inline;
    white-space: normal;
    text-transform: none;
    letter-spacing: inherit;
}

/* ---- 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-vender ---- */
/* Film Houses - pagina de vender / valorar. */

.fh-vender-hero { padding-bottom: clamp(48px, 6vw, 96px); }
.fh-vender .fh-hero__lead { max-width: 52ch; }
.fh-vender .fh-hero .fh-btn { margin-top: 6px; }

/* --- los cuatro pasos --- */
.fh-pasos {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 40px);
}
.fh-paso { min-width: 0; padding-top: 20px; border-top: var(--fh-rule); }
.fh-vender .fh-paso__n {
    display: block; font-size: clamp(30px, 2.6vw, 44px);
    color: var(--fh-arena); margin: 0 0 12px; line-height: 1;
}
.fh-vender .fh-paso__ti {
    font-size: clamp(19px, 1.5vw, 25px); color: var(--fh-blanco);
    text-transform: uppercase; margin: 0 0 10px;
}
.fh-vender .fh-paso__tx {
    font-family: var(--fh-font-text); font-weight: 300; font-size: 15px;
    line-height: 1.55; color: rgba(255, 255, 255, .78); margin: 0;
}

/* --- lo que incluye --- */
.fh-vender-dos {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 80px); align-items: start;
}
.fh-vender-dos__nota { margin-top: 16px; max-width: 46ch; }
.fh-incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--fh-piedra); }
.fh-incluye li {
    display: flex; align-items: center; gap: 14px;
    background: var(--fh-hueso); padding: 16px 2px;
    font-family: var(--fh-font-text); font-size: 16px; font-weight: 400; color: var(--fh-marino);
}
.fh-incluye__marca {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--fh-arena); color: var(--fh-marino);
}

/* --- el formulario --- */
.fh-vender-form-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 80px); align-items: start;
}
.fh-vender-form-fila__texto { min-width: 0; }
/*
 * Estos estilos colgaban de .fh-vender, que solo existe en
 * /vende-tu-casa/. El mismo bloque se usa ya en las landings de venta y
 * en la ficha de un vendido, y alli se quedaban fuera: la fila de dos
 * campos salia en uno, los desplegables en mayusculas y las pistas sin
 * su color. Ahora cuelgan del propio bloque, que es lo que viaja con el.
 */
.fh-vender-form-fila__texto .fh-texto-claro {
    font-family: var(--fh-font-text); font-weight: 300; font-size: 16px;
    line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 16px 0 0;
}
.fh-vender-form { display: grid; gap: 12px; min-width: 0; }
.fh-vender-form .fh-form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fh-vender-form input[type="text"],
.fh-vender-form input[type="tel"],
.fh-vender-form input[type="email"],
.fh-vender-form textarea {
    width: 100% !important;
    background: var(--fh-hueso) !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 15px 20px !important;
    font-family: var(--fh-font-text) !important;
    font-size: 15px !important; font-weight: 300 !important;
    color: var(--fh-marino) !important;
    height: auto !important;
}
.fh-vender-form textarea { border-radius: 18px !important; resize: vertical; }
.fh-vender-form input:focus, .fh-vender-form textarea:focus {
    outline: 2px solid var(--fh-arena) !important; outline-offset: 2px;
}
.fh-vender-form label > span {
    display: block; margin-bottom: 6px;
    font-family: var(--fh-font-text); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.fh-vender-form .fh-desp__boton {
    background: var(--fh-hueso) !important; border: 0 !important;
    border-radius: 14px !important; padding: 15px 20px !important;
    font-size: 15px !important; font-weight: 300 !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
.fh-vender-form .fh-form__pista { font-size: 13px; color: rgba(255, 255, 255, .6); margin: -4px 0 6px; }
.fh-vender-form .fh-btn-primary { justify-self: start; }

/* ------------------------------------------------------------------
   El mismo formulario, sobre fondo claro

   En /vende-tu-casa/ el bloque va sobre marino y los campos son cajas
   de color hueso. En una landing o en la ficha de un vendido puede
   tocarle fondo hueso, y entonces la caja era hueso sobre hueso -no se
   veia el recuadro- y las etiquetas, blancas sobre claro. Mismas
   medidas, mismas formas y misma letra; solo cambian los colores.
   ------------------------------------------------------------------ */

.fh-on-claro .fh-vender-form input[type="text"],
.fh-on-claro .fh-vender-form input[type="tel"],
.fh-on-claro .fh-vender-form input[type="email"],
.fh-on-claro .fh-vender-form textarea,
.fh-on-claro .fh-vender-form .fh-desp__boton {
    background: var(--fh-blanco) !important;
    border: 1px solid var(--fh-piedra) !important;
    color: var(--fh-marino) !important;
}

.fh-on-claro .fh-vender-form label > span { color: var(--fh-grafito); }
.fh-on-claro .fh-vender-form .fh-form__pista { color: var(--fh-grafito); }
.fh-on-claro .fh-vender-form-fila__texto .fh-texto-claro { color: var(--fh-grafito); }
.fh-on-claro .fh-vender-form .fh-aviso--error { background: rgba(39, 55, 67, .08); color: var(--fh-marino); }

/* La lista que se despliega, tambien en blanco. */
.fh-on-claro .fh-vender-form .fh-desp__lista { background: var(--fh-blanco); }

.fh-aviso {
    border-radius: 14px; padding: 16px 20px; margin: 0 0 6px;
    font-family: var(--fh-font-text); font-size: 15px;
}
.fh-aviso--error { background: rgba(255, 255, 255, .12); color: var(--fh-blanco); }
.fh-aviso--ok { background: var(--fh-arena); color: var(--fh-marino); }
.fh-aviso--ok p { margin: 0; }

@media (max-width: 1000px) {
    .fh-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-vender-dos, .fh-vender-form-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .fh-pasos { grid-template-columns: minmax(0, 1fr); }
    .fh-vender-form .fh-form__par { grid-template-columns: 1fr; }
    .fh-vender-form .fh-btn-primary { justify-self: stretch; text-align: center; }
}

/* Los servicios llevan ahora su linea de detalle. */
.fh-incluye li { align-items: flex-start; padding: 18px 2px; }
.fh-incluye__marca { margin-top: 2px; }
.fh-incluye__texto { display: block; min-width: 0; }
.fh-incluye__texto strong {
    display: block; font-weight: 600; font-size: 16px;
    color: var(--fh-marino); margin-bottom: 3px;
}
.fh-incluye__texto span {
    display: block; font-weight: 300; font-size: 14px;
    line-height: 1.5; color: var(--fh-grafito);
}
.fh-vender-dos { align-items: start; }
@media (max-width: 1000px) { .fh-vender-dos { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------
   "Vende en tu zona", dentro del bloque de valoracion (punto C)
   ------------------------------------------------------------------ */

/*
 * "Vende en tu zona" iba pegado a la linea del telefono. Madison,
 * 6-10-2026.
 */
/*
 * Con ".fh-portada" delante: ".fh-portada .fh-eyebrow" trae
 * "margin: 0 0 12px" y pesa dos clases, asi que con una sola el margen
 * se quedaba en cero y el rotulo seguia pegado al telefono.
 */
.fh-portada .fh-vender-zonas__ti { margin: 34px 0 0; }

/*
 * Y la mitad de aire por abajo en las dos secciones que lo pedian: la de
 * "Que hacemos por tu casa", antes de la franja azul, y la del boton de
 * valoracion, antes del pie. Las dos tenian los 101 px del padding
 * normal de seccion a 1440 px; ahora la mitad. Vale igual en las
 * landings de venta, que usan estos mismos bloques.
 */
.fh-vender-incluye { padding-bottom: clamp(28px, 3.5vw, 64px); }
#fh-valoracion     { padding-bottom: clamp(28px, 3.5vw, 64px); }

.fh-vender-zonas {
    margin: 8px 0 0;
    font-family: var(--fh-font-text);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.9;
}

.fh-vender-zonas a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.fh-vender-zonas a:hover { color: var(--fh-arena); }

/* ------------------------------------------------------------------
   "Que hacemos por tu casa", en tarjetas  (12-10-2026, Madison)
   ------------------------------------------------------------------
   Como estaba: la lista se pintaba como una tabla -fondo gris de un
   pixel entre filas, esquinas rectas y 2 px de relleno lateral-, asi
   que los iconos tocaban el borde izquierdo y el texto el derecho. Y
   el titulo, en una columna de la mitad de alto que la lista, dejaba
   un hueco grande debajo.

   De las dos versiones que vio en staging eligio la A: el titulo a
   todo el ancho y los nueve puntos en tarjetas de tres en tres, dos
   en tablet y una en el movil.

   Vale sobre hueso y sobre marino, que es importante: el bloque
   alterna de fondo en las landings. No cambia ningun texto.
   ------------------------------------------------------------------ */

.fh-vender-incluye .fh-vender-dos {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.2vw, 32px);
}
.fh-vender-incluye .fh-incluye {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 20px);
    background: transparent;
}
.fh-vender-incluye .fh-incluye li {
    background: var(--fh-blanco);
    border-radius: var(--fh-radius-card);
    padding: clamp(18px, 1.8vw, 26px);
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(26, 42, 58, .05);
    color: var(--fh-marino);
}
.fh-vender-incluye .fh-incluye__texto strong { color: var(--fh-marino); }
.fh-vender-incluye .fh-incluye__texto span   { color: var(--fh-grafito); }

@media (max-width: 1000px) {
    .fh-vender-incluye .fh-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .fh-vender-incluye .fh-incluye { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Las tres resenas de Google, en Vender. Pep, 21-10-2026.
 *
 * El original va siempre en espanol; en ingles y aleman, debajo, la
 * traduccion nuestra, mas pequena y en arena, para que se vea de un
 * vistazo cual es la del cliente y cual la nuestra.
 */
.fh-vresenas__lista {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
}

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

.fh-vresena {
    margin: 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .06);
    border-radius: 14px;
}

.fh-vresena__estrellas {
    margin: 0 0 .75rem;
    color: var(--fh-arena);
    letter-spacing: .18em;
    font-size: 1rem;
}

.fh-vresena__texto,
.fh-vresena__trad {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
}

.fh-vresena__marca {
    margin: 1rem 0 .4rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fh-arena);
}

.fh-vresena__trad {
    opacity: .85;
}

.fh-vresena__quien {
    margin-top: 1rem;
    font-weight: 600;
    /*
     * Con el color heredado salia gris oscuro sobre marino: 1,03 de
     * contraste, o sea invisible. En arena da 4,86, medido, que pasa el
     * minimo de 4,5.
     */
    color: var(--fh-arena);
    font-style: normal;
}

.fh-vender .fh-vresenas__pie {
    /*
     * Pep, 21-10-2026: iba pegado a las tarjetas, con 0 px medidos en
     * produccion. Sin .fh-vender delante y sin !important no se aplica:
     * el tema pone margin a los <p> con mas peso. Es el mismo caso que
     * .fh-vender .fh-pasos__cta.
     */
    margin-top: 3.5rem !important;
    text-align: center;
}

/*
 * La cabecera de Vender, con foto. Dos columnas en ordenador, apiladas
 * en movil con la foto debajo del boton. Pep, 21-10-2026.
 */
.fh-vender-hero__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    /*
     * Arriba, no centradas: Pep quiere la foto alineada con el
     * antetitulo. Centradas, la foto caia 92 px mas abajo.
     * Pep, 21-10-2026.
     */
    align-items: start;
}

/*
 * Y la cabecera, mas arriba: habia 115 px entre el menu y "Vende con
 * Film Houses". Lleva .fh-vender delante y !important porque el padding
 * sale de .fh-seccion, que pesa mas. Pep, 21-10-2026.
 */
.fh-vender .fh-vender-hero {
    padding-top: 2.5rem !important;
}

.fh-vender-hero__foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

@media (max-width: 900px) {
    .fh-vender-hero__cols {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* =========================================================
   "De la visita a la firma": la linea y el movil.
   Pep, 22-10-2026.
   ========================================================= */

/*
 * Una sola raya debajo del titulo.
 *
 * La cabecera de seccion ya trae la suya, y la fila de arriba de los
 * pasos ponia otra justo debajo: dos seguidas. Se quita la de la
 * PRIMERA FILA, que no son siempre los mismos pasos porque el numero
 * de columnas cambia con el ancho. Las de en medio se quedan, que ahi
 * si separan.
 */
.fh-vender .fh-pasos > li { border-top: 0; padding-top: 0; }

@media (max-width: 1000px) {
    /* Dos columnas: la primera fila son los dos primeros. */
    .fh-vender .fh-pasos > li:nth-child(n+3) {
        border-top: var(--fh-rule);
        padding-top: 20px;
    }
}

@media (max-width: 560px) {
    /* Una columna: la primera fila es solo el primero. */
    .fh-vender .fh-pasos > li:nth-child(n+2) {
        border-top: var(--fh-rule);
        padding-top: 14px;
    }

    /*
     * Los cuatro pasos, compactos: el numero y el titulo en la misma
     * linea, con el numero mas pequeno y a la izquierda, y el texto
     * debajo a todo lo ancho. Son pasos en orden y tienen que verse
     * los cuatro, asi que aqui no hay carrusel.
     */
    .fh-pasos { gap: 16px; }

    .fh-vender .fh-paso {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 6px;
        align-items: baseline;
    }

    .fh-vender .fh-paso__n {
        grid-column: 1;
        display: block;
        font-size: 20px;
        margin: 0;
    }

    .fh-vender .fh-paso__ti {
        grid-column: 2;
        font-size: 18px;
        margin: 0;
    }

    .fh-vender .fh-paso__tx {
        grid-column: 1 / -1;
        margin: 0;
    }
}

/* ---- fh-vendidos ---- */
/*
 * Las ventas publicadas (punto 100).
 *
 * La tarjeta es la misma que la de los inmuebles en venta, fh-ficha, y
 * desde el 2-10-2026 vuelve a ser un enlace -lleva a la ficha de la
 * venta-, asi que ya no hay que quitarle los estilos de boton del
 * navegador. Eran ellos los que le dejaban las esquinas a 4 px y el
 * fondo transparente en vez del radio de 32 y el blanco de la portada.
 *
 * Aqui solo va lo que una venta tiene de distinto: la descripcion, la
 * imagen de secret listing y la marca grande de vendida de su ficha.
 */

/*
 * La marca "Vendida", en arena con el texto en marino.
 *
 * La marca de la web es marino con texto hueso, y es la que lleva
 * "Exclusiva". Esta tiene que distinguirse de un vistazo, asi que se le
 * dan la vuelta a los dos colores, que son los mismos de la casa.
 */
.fh-portada .fh-vend .fh-ficha__marca,
.fh-vend .fh-ficha__marca {
    background: var(--fh-arena);
    color: var(--fh-marino) !important;
}

/*
 * El precio, al fondo de la tarjeta.
 *
 * Una tarjeta de inmueble lleva entre el titulo y el precio la fila de
 * datos -metros, dormitorios, banos-, y eso los separa. Una venta no
 * tiene esa fila, asi que el precio se quedaba pegado al titulo. Se
 * empuja al fondo, que es donde se le busca en el resto de la web.
 */
.fh-vend .fh-ficha__cuerpo { justify-content: space-between; }

.fh-vend .fh-ficha__precio {
    margin-top: auto;
    padding-top: 14px;
}
/*
 * La de secret listing es vertical (480 x 600) y el hueco de la tarjeta
 * es apaisado (16/10). Entera dejaba franjas de marino a los lados, asi
 * que desde el 2-10-2026 se recorta centrada y llena el hueco como las
 * fotos de verdad. El rotulo esta en el centro de la imagen, dentro de
 * la franja que queda.
 */
.fh-vend__foto--secreta { background: var(--fh-marino, #16314a); }

.fh-vend__foto--secreta .fh-ficha__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------------
   La ficha de una venta
   --------------------------------------------------------------- */

/*
 * La marca de vendida, sobre la galeria.
 *
 * Iba en grande a proposito -clamp(22px, 3.2vw, 38px) con relleno en
 * em- para que lo primero que se entendiera al abrir la pagina fuera
 * que la casa ya se vendio. Pero crecia con la ventana y a 1100px
 * median 35,2px frente a los 12px del resto de la web: la unica
 * etiqueta que se habia quedado fuera de la regla unica.
 *
 * Madison, 11-10-2026: la misma que las demas. Aqui solo quedan la
 * posicion y el color; el tamano, el relleno y la forma los pone
 * fh-marco.css.
 */
.fh-vend-sello {
    position: absolute;
    left: clamp(14px, 1.8vw, 26px);
    top: clamp(14px, 1.8vw, 26px);
    z-index: 2;
    background: var(--fh-arena);
    color: var(--fh-marino);
}

/* Quien la vendio y su WhatsApp, bajo el telefono del bloque. */
.fh-vend-ficha__quien { margin: 20px 0 4px; }

.fh-vend-ficha__agente {
    margin: 0 0 16px;
    font-family: var(--fh-font-text);
    font-weight: 300;
    font-size: 16px;
}

.fh-vend-ficha__agente a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.fh-vend-ficha__agente a:hover { color: var(--fh-arena); }

/*
 * El boton del WhatsApp, dentro de la ficha.
 *
 * fh-ficha.css pinta .fh-ficha-pag .fh-btn-linea en marino sobre
 * transparente, que es lo que necesita en las secciones claras de una
 * ficha. El bloque de captacion va en marino, asi que ahi el boton se
 * quedaba invisible: marino sobre marino. En claro se deja como esta.
 */
.fh-vend-ficha .fh-on-marino .fh-btn-linea {
    color: var(--fh-hueso) !important;
    border-color: var(--fh-hueso);
}

.fh-vend-ficha .fh-on-marino .fh-btn-linea:hover {
    background: var(--fh-hueso);
    color: var(--fh-marino) !important;
}

/*
 * El boton del WhatsApp se ajusta a su texto.
 *
 * Dentro de una ficha los botones son de columna y ocupan todo el
 * ancho (.fh-ficha-pag .fh-btn), porque alli van apilados en la caja
 * del precio. Este va en linea, como los de la landing, asi que hace
 * falta la misma fuerza en el selector para ganarle.
 */
.fh-ficha-pag .fh-vend-ficha__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
}

/* ---------------------------------------------------------------
   Casos de exito
   --------------------------------------------------------------- */

/*
 * Las dos listas de filtro, una al lado de la otra.
 *
 * Con una sola clase no bastaba: el div lleva tambien fh-form, y
 * ".fh-form { display: grid }" de fh-custom.css vale lo mismo y va
 * despues, asi que ganaba y las ponia una debajo de otra. Con las dos
 * clases juntas no hay duda.
 */
.fh-form.fh-casos-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

.fh-form.fh-casos-filtros select { flex: 0 1 260px; max-width: 320px; }

/*
 * Y la flecha, metida hacia dentro: la del navegador se pega al borde
 * derecho y quedaba descolgada del texto. Mismos 18 px que el texto por
 * la izquierda, igual que los desplegables de la ficha.
 */
.fh-form.fh-casos-filtros select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23273743' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 46px;
    padding-left: 18px;
}

.fh-form.fh-casos-filtros select::-ms-expand { display: none; }

/* En movil, uno debajo de otro y a todo el ancho. */
@media (max-width: 640px) {
    .fh-form.fh-casos-filtros select { flex: 1 1 100%; max-width: none; }
}

/*
 * Y menos hueco encima. La seccion lleva el relleno de siempre por
 * arriba y por abajo, y encima de los filtros sobraba la mitad.
 */
.fh-seccion--casos { padding-top: clamp(28px, 3.2vw, 44px); }

/*
 * Al filtrar, las que no tocan se esconden. Hace falta decirlo: la
 * tarjeta es display: grid, y eso le gana al display: none que el
 * navegador le da al atributo hidden.
 */
.fh-vend-rejilla .fh-ficha[hidden] { display: none; }

/* ---------------------------------------------------------------
   La entrada de la ficha de una venta
   --------------------------------------------------------------- */

/*
 * Una sola seccion debajo de las fotos: a la izquierda la zona, lo que
 * se vendio y quien lo vendio; a la derecha la caja del precio.
 *
 * Antes eran dos secciones y la fila de arriba iba centrada en
 * vertical, asi que con la zona en letra pequeña quedaba un hueco
 * enorme entre ella y la caja. Aqui las dos columnas empiezan arriba y
 * la seccion se arrima a las fotos.
 */
.fh-vend-entrada { padding-top: clamp(26px, 3vw, 44px) !important; }

.fh-vend-entrada__caja {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.fh-vend-entrada__zona { margin: 0 0 16px !important; }

.fh-vend-entrada__desc { margin: 0 0 24px; }
.fh-vend-entrada__desc p { margin: 0; }

/* Quien la vendio, con su foto pequeña y redonda, como en la ficha. */
.fh-vend-entrada__agente {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fh-vend-entrada__foto {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.fh-vend-entrada__quien { margin: 0; font-size: 15px; }
.fh-vend-entrada__quien a { color: inherit; }

/* La caja del precio, con la marca dentro. */
.fh-vend-entrada__precio { text-align: center; }

/* Tamano, relleno y forma: fh-marco.css. Aqui solo el color. */
.fh-vend-entrada__sello {
    display: inline-block;
    margin-bottom: 14px;
    background: var(--fh-arena);
    color: var(--fh-marino);
    font-family: var(--fh-font-eyebrow, inherit);
}

/*
 * El boton va dentro de la caja, debajo del precio. En una ficha los
 * botones ocupan todo el ancho (.fh-ficha-pag .fh-btn), que aqui es
 * justo lo que queremos; solo hay que poner el icono en linea.
 */
.fh-ficha-pag .fh-vend-entrada__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .fh-vend-entrada__caja { grid-template-columns: 1fr; }

    /*
     * En movil se lee en el mismo orden que en pantalla grande: primero
     * la zona y lo que se vendio, y despues el precio. En la ficha de un
     * inmueble la caja sube con order:-1 porque alli el precio es el
     * dato; aqui la propiedad ya esta vendida y lo que se cuenta es la
     * venta, asi que se deja en su sitio.
     */
    .fh-vend-entrada .fh-vend-entrada__precio { order: 0; margin-top: 4px; }
}

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