/* ---- fh-fuentes ---- */ /* * Tipografia de marca, servida desde nuestro servidor. * * El manual fija Helvetica Neue Condensed Bold para titulares y designa * Barlow Condensed 700 como sustituta web libre. Barlow no se estaba * cargando: en un movil, donde Helvetica Neue Condensed no existe, los * titulares caian en Impact. Montserrat va en version variable, asi que un * solo fichero cubre del peso 300 al 700. * * swap: se lee el texto desde el primer pintado, con la tipografia del * sistema, y cambia sola al llegar la nuestra. Nunca texto invisible. */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/barlow-condensed-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/barlow-condensed-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://www.filmhouses.com/wp-content/mu-plugins/fh-assets/fuentes/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* * El respaldo de Barlow Condensed, a su medida (punto 93). * * Barlow llega con font-display: swap, asi que durante un instante el * titular se pinta con la letra del sistema, que es mas estrecha, y al * llegar Barlow todo se mueve. Con size-adjust el respaldo ocupa lo * mismo que la definitiva y el salto desaparece. */ @font-face { font-family: 'Barlow Condensed respaldo'; src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Liberation Sans Narrow'); size-adjust: 115%; } /* ---- hello-elementor ---- */ html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#333;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-block-start:.5rem;margin-block-end:1rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-start:0;margin-block-end:.9rem}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;text-decoration:none;color:#c36}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{font-size:16px;color:#333;line-height:1.4;font-style:italic;font-weight:400}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;break-inside:avoid;border:1px solid #ccc}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{width:100%;border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{width:auto;-webkit-appearance:button}[type=button],[type=submit],button{display:inline-block;font-weight:400;color:#c36;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid #c36;padding:.5rem 1rem;font-size:1rem;border-radius:3px;transition:all .3s}[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{color:#fff;background-color:#c36;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;width:100%;margin-block-end:15px;font-size:.9em;border-spacing:0;border-collapse:collapse}table td,table th{padding:15px;line-height:1.5;vertical-align:top;border:1px solid hsla(0,0%,50.2%,.5019607843)}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50.2%,.5019607843)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50.2%,.0705882353)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50.2%,.1019607843)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50.2%,.5019607843)}@media (max-width:767px){table table{font-size:.8em}table table td,table table th{padding:7px;line-height:1.3}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{margin-block-start:0;margin-block-end:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} /* ---- hello-elementor-theme-style ---- */ @charset "UTF-8";.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}.alignfull,.alignfull img{width:100vw}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{position:relative;display:block}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{max-width:500px;margin:50px auto}.post-password-form p{width:100%;display:flex;align-items:flex-end}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:rgb(238.425,238.425,238.425);clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{width:100%;max-height:500px;-o-object-fit:cover;object-fit:cover}@media (max-width:991px){.post .wp-post-image{max-height:400px}}@media (max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{margin:0;padding:0;list-style:none;font-size:.9em}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{display:flex;flex-direction:column;padding-block-start:30px;padding-block-end:30px;padding-inline-start:60px;padding-inline-end:0;border-block-end:1px solid #ccc}#comments .comment .avatar,#comments .pingback .avatar{position:absolute;left:0;border-radius:50%;margin-inline-end:10px}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{position:relative;list-style:none;margin:0;padding-inline-start:30px}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{display:inline-block;font-size:1em;font-weight:400;line-height:100%;content:"↪";position:absolute;top:45px;left:0;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media (min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media (max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{position:inherit;float:left}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-start:auto;margin-inline-end:auto;width:100%}@media (max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-start:10px;padding-inline-end:10px}}@media (min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media (min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)} /* ---- hello-elementor-header-footer ---- */ @charset "UTF-8";.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;padding-block-start:1rem;padding-block-end:1rem;position:relative}.site-header .site-title{font-size:2.5rem;font-weight:500;line-height:1.2}.site-header .site-branding{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.site-header .header-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-header .header-inner .custom-logo-link{display:block}.site-header .header-inner .site-branding .site-description,.site-header .header-inner .site-branding .site-title{margin:0}.site-header .header-inner .site-branding .site-logo img{display:block}.site-header .header-inner .site-branding.show-logo .site-title,.site-header .header-inner .site-branding.show-title .site-logo{display:none!important}.site-header.header-inverted .header-inner{flex-direction:row-reverse}.site-header.header-inverted .header-inner .site-branding{text-align:end}.site-header.header-stacked .header-inner{align-items:center;flex-direction:column;text-align:center}.site-footer{padding-block-start:1rem;padding-block-end:1rem;position:relative}.site-footer .site-title{font-size:1.5rem;font-weight:500;line-height:1.2}.site-footer .site-branding{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.site-footer .footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between}.site-footer .footer-inner .custom-logo-link{display:block}.site-footer .footer-inner .site-branding .site-description,.site-footer .footer-inner .site-branding .site-title{margin:0}.site-footer .footer-inner .site-branding .site-logo img{display:block}.site-footer .footer-inner .site-branding.show-logo .site-title,.site-footer .footer-inner .site-branding.show-title .site-logo{display:none!important}.site-footer .footer-inner .copyright{align-items:center;display:flex;justify-content:flex-end}.site-footer .footer-inner .copyright p{margin:0}.site-footer.footer-inverted .footer-inner{flex-direction:row-reverse}.site-footer.footer-inverted .footer-inner .site-branding{text-align:end}.site-footer.footer-stacked .footer-inner{align-items:center;flex-direction:column;text-align:center}.site-footer.footer-stacked .footer-inner .site-branding .site-title{text-align:center}.site-footer.footer-stacked .footer-inner .site-navigation .menu{padding:0}@media (max-width:576px){.site-footer:not(.footer-stacked) .footer-inner .copyright,.site-footer:not(.footer-stacked) .footer-inner .site-branding,.site-footer:not(.footer-stacked) .footer-inner .site-navigation{display:block;text-align:center;width:100%;max-width:none}.site-footer .footer-inner .site-navigation ul.menu{justify-content:center}.site-footer .footer-inner .site-navigation ul.menu li{display:inline-block}}.site-header.header-stacked .site-navigation-toggle-holder{justify-content:center;max-width:100%}.site-header.menu-layout-dropdown .site-navigation{display:none}.site-navigation-toggle-holder{display:flex;align-items:center;padding:8px 15px}.site-navigation-toggle-holder .site-navigation-toggle{display:flex;align-items:center;justify-content:center;padding:.5rem;cursor:pointer;border:0 solid;border-radius:3px;background-color:rgba(0,0,0,.05);color:#494c4f}.site-navigation-toggle-holder .site-navigation-toggle-icon{display:block;width:1.25rem}.site-navigation-toggle-holder .site-navigation-toggle-icon:after,.site-navigation-toggle-holder .site-navigation-toggle-icon:before{content:"";background-color:currentColor;display:block;height:3px;transition:all .2s ease-in-out;border-radius:3px}.site-navigation-toggle-holder .site-navigation-toggle-icon:before{box-shadow:0 .35rem 0 currentColor;margin-block-end:.5rem}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:before{box-shadow:none;transform:translateY(.35rem) rotate(45deg)}.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon:after{transform:translateY(-.35rem) rotate(-45deg)}.site-navigation{display:flex;align-items:center}.site-navigation ul.menu,.site-navigation ul.menu ul{list-style-type:none;padding:0}.site-navigation ul.menu{display:flex;flex-wrap:wrap}.site-navigation ul.menu li{position:relative;display:flex}.site-navigation ul.menu li a{display:block;padding:8px 15px}.site-navigation ul.menu li.menu-item-has-children{padding-inline-end:15px}.site-navigation ul.menu li.menu-item-has-children:after{display:flex;content:"▾";font-size:1.5em;justify-content:center;align-items:center;color:#666;text-decoration:none}.site-navigation ul.menu li.menu-item-has-children:focus-within>ul{display:block}.site-navigation ul.menu li ul{background:#fff;display:none;min-width:150px;position:absolute;z-index:2;left:0;top:100%}.site-navigation ul.menu li ul li{border-block-end:rgb(238.425,238.425,238.425) 1px solid}.site-navigation ul.menu li ul li:last-child{border-block-end:none}.site-navigation ul.menu li ul li.menu-item-has-children a{flex-grow:1}.site-navigation ul.menu li ul li.menu-item-has-children:after{transform:translateY(-50%) rotate(-90deg)}.site-navigation ul.menu li ul ul{left:100%;top:0}.site-navigation ul.menu li:hover>ul{display:block}footer .site-navigation ul.menu li ul{top:auto;bottom:100%}footer .site-navigation ul.menu li ul ul{bottom:0}footer .site-navigation ul.menu a{padding:5px 15px}.site-navigation-dropdown{margin-block-start:10px;transition:max-height .3s,transform .3s;transform-origin:top;position:absolute;bottom:0;left:0;z-index:10000;width:100%}.site-navigation-toggle-holder:not(.elementor-active)+.site-navigation-dropdown{transform:scaleY(0);max-height:0}.site-navigation-toggle-holder.elementor-active+.site-navigation-dropdown{transform:scaleY(1);max-height:100vh}.site-navigation-dropdown ul{padding:0}.site-navigation-dropdown ul.menu{position:absolute;width:100%;padding:0;margin:0;background:#fff}.site-navigation-dropdown ul.menu li{display:block;width:100%;position:relative}.site-navigation-dropdown ul.menu li a{display:block;padding:20px;background:#fff;color:#55595c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1019607843)}.site-navigation-dropdown ul.menu li.current-menu-item a{color:#fff;background:#55595c}.site-navigation-dropdown ul.menu>li li{transition:max-height .3s,transform .3s;transform-origin:top;transform:scaleY(0);max-height:0}.site-navigation-dropdown ul.menu li.elementor-active>ul>li{transform:scaleY(1);max-height:100vh}@media (max-width:576px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media (min-width:768px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media (min-width:576px) and (max-width:767px){.site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation{display:none!important}}@media (min-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important}}@media (max-width:992px){.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation{display:none!important}}.site-header.menu-dropdown-none:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:none!important} /* ---- fh-tokens ---- */ /* Film Houses · Property Advisers — tokens de marca (v1, sept. 2026) Fuente de verdad para la web. Derivado del dossier de captación 2026. */ :root{ /* Color */ --fh-marino:#273743; /* principal: fondos, titulares sobre claro */ --fh-arena:#c09d75; /* acento: titulares sobre marino, líneas, iconos */ --fh-blanco:#ffffff; --fh-hueso:#f4ede4; /* fondos claros, mapa */ --fh-piedra:#d9cbb9; /* fondos claros secundarios */ --fh-grafito:#4a5560; /* texto secundario sobre claro */ --fh-bruma:#6e98ac; /* solo gráficos y datos, nunca texto */ --fh-arena-55:rgba(192,157,117,.55); /* separadores */ /* Tipografía */ --fh-font-display:"Helvetica Neue Condensed Bold","HelveticaNeue-CondensedBold","Barlow Condensed",Impact,sans-serif; /* titulares, siempre en mayúsculas */ --fh-font-text:"Montserrat",Helvetica,Arial,sans-serif; --fh-display-lh:.94; --fh-display-ls:-.005em; --fh-text-lh:1.35; /* Escala (desktop → móvil con clamp) */ --fh-h1:clamp(44px,6.2vw,118px); --fh-h2:clamp(34px,4.6vw,86px); --fh-h3:clamp(24px,2.4vw,46px); --fh-lead:clamp(18px,1.6vw,30px); --fh-body:clamp(16px,1.25vw,22px); --fh-small:14px; --fh-eyebrow:13px; /* mayúsculas, letter-spacing .2em, peso 500, color arena */ /* Forma */ --fh-radius-card:32px; /* tarjetas y bloques (40px en el dossier a 1920) */ --fh-radius-tile:18px; --fh-radius-pill:999px; --fh-border-tile:2px solid var(--fh-arena); --fh-rule:1.5px solid var(--fh-arena-55); --fh-gutter:clamp(16px,3.3vw,64px); --fh-outline-stroke:2px; /* texto contorneado */ } /* Titular con segunda línea contorneada (recurso principal de la marca) */ .fh-display{font-family:var(--fh-font-display);text-transform:uppercase;line-height:var(--fh-display-lh);letter-spacing:var(--fh-display-ls);font-weight:700} .fh-outline{color:transparent;-webkit-text-stroke:var(--fh-outline-stroke) currentColor} .fh-on-marino .fh-outline{-webkit-text-stroke-color:var(--fh-arena)} .fh-on-claro .fh-outline{-webkit-text-stroke-color:var(--fh-marino)} .fh-eyebrow{font-family:var(--fh-font-text);font-size:var(--fh-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fh-arena)} /* Botones */ .fh-btn{font-family:var(--fh-font-text);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;border-radius:var(--fh-radius-pill);text-decoration:none;display:inline-block} .fh-btn-primary{background:var(--fh-arena);color:var(--fh-marino)} .fh-btn-secondary{background:transparent;color:currentColor;border:2px solid currentColor} .fh-btn-dark{background:var(--fh-marino);color:#fff} /* ---- fh-portada ---- */ /* Film Houses - portada. Construida sobre filmhouses-brand-tokens.css. Secciones a pagina completa, alternando marino y hueso; nunca dos marinos seguidos. */ .fh-portada { font-family: var(--fh-font-text); font-weight: 300; line-height: var(--fh-text-lh); } .fh-portada *, .fh-portada *::before, .fh-portada *::after { box-sizing: border-box; } .fh-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--fh-gutter); } .fh-seccion { padding: clamp(56px, 7vw, 128px) 0; } .fh-seccion--marino { background: var(--fh-marino); color: var(--fh-blanco); } .fh-seccion--hueso { background: var(--fh-hueso); color: var(--fh-grafito); } .fh-portada .fh-display { font-family: var(--fh-font-display); text-transform: uppercase; line-height: var(--fh-display-lh); letter-spacing: var(--fh-display-ls); font-weight: 700; margin: 0; } .fh-portada .fh-eyebrow { font-family: var(--fh-font-text); font-size: var(--fh-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; } /* El color lo pone fh-custom.css: arena sobre marino, grafito sobre claro. Aqui se fijaba arena para todos y sobre hueso daba 2,17 de contraste. */ /* --- hero --- */ .fh-hero { padding-top: clamp(64px, 9vw, 152px); } .fh-hero__titulo { font-size: var(--fh-h1); color: var(--fh-arena); margin-bottom: 20px; } .fh-hero__lead { font-size: var(--fh-lead); font-weight: 300; color: rgba(255,255,255,.82); max-width: 44ch; margin: 0 0 clamp(28px, 3.5vw, 48px); } .fh-hero .fh-buscador { background: transparent; padding: 0; border-radius: 0; max-width: none; } .fh-hero .fh-buscador__lista { left: 0; right: 0; } /* --- cifras --- */ .fh-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 72px); } .fh-cifra__num { font-size: clamp(44px, 5.4vw, 92px); color: var(--fh-marino); margin-bottom: 4px; } .fh-cifra__pie { font-size: var(--fh-small); color: var(--fh-grafito); margin: 0; } /* --- cabecera de seccion --- */ .fh-seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(28px, 3.5vw, 48px); border-bottom: var(--fh-rule); } .fh-seccion__titulo { font-size: var(--fh-h2); } .fh-seccion--marino .fh-seccion__titulo { color: var(--fh-blanco); } .fh-seccion--hueso .fh-seccion__titulo { color: var(--fh-marino); } .fh-enlace { font-family: var(--fh-font-text); font-size: var(--fh-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-arena); text-decoration: none; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; } .fh-enlace span { transition: transform .18s ease; } .fh-enlace:hover span { transform: translateX(4px); } /* --- tarjetas de propiedad: foto a la izquierda (manual, seccion 14) --- */ .fh-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .fh-ficha { display: grid; grid-template-columns: 42% 1fr; background: var(--fh-blanco); border-radius: var(--fh-radius-card); overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; min-height: 232px; } .fh-ficha:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39,55,67,.18); } /* La foto llena su celda y no manda sobre el alto de la tarjeta. Con la imagen en el flujo, la primera de cada rejilla -que se carga con prioridad y sin lazy- estiraba su fila: en las landings la primera fila media 437 px y las demas 232. Fuera del flujo, todas miden igual. */ .fh-ficha__foto { position: relative; background: var(--fh-piedra); overflow: hidden; } .fh-ficha__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .fh-ficha__marcas { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; } /* Tamano, relleno y forma: fh-marco.css. Aqui solo el color. */ .fh-ficha__marca { background: var(--fh-marino); color: var(--fh-hueso); } .fh-ficha__cuerpo { padding: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; } .fh-ficha__sitio { margin-bottom: 8px; } .fh-ficha__titulo { font-size: clamp(20px, 1.5vw, 27px); color: var(--fh-marino); margin-bottom: 10px; } .fh-ficha__datos { font-size: var(--fh-small); color: var(--fh-grafito); margin: 0 0 auto; } .fh-ficha__precio { font-size: clamp(22px, 1.7vw, 30px); color: var(--fh-marino); margin-top: 18px; } /* --- llamada a la accion --- */ .fh-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; } .fh-cta__titulo { font-size: var(--fh-h2); color: var(--fh-arena); margin-bottom: 14px; } .fh-cta__texto { font-size: var(--fh-body); font-weight: 300; color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; } .fh-portada .fh-btn { font-family: var(--fh-font-text); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 18px 34px; border-radius: var(--fh-radius-pill); text-decoration: none; display: inline-block; white-space: nowrap; transition: opacity .18s ease; } .fh-portada .fh-btn-primary { background: var(--fh-arena); color: var(--fh-marino); } .fh-portada .fh-btn-primary:hover { opacity: .88; } /* --- noticias y mapa --- */ .fh-noticias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .fh-noticia, .fh-mapa { background: var(--fh-blanco); border-radius: var(--fh-radius-card); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .fh-noticia:hover, .fh-mapa:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39,55,67,.14); } .fh-noticia__foto { aspect-ratio: 16 / 10; background: var(--fh-piedra); } .fh-noticia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-noticia .fh-eyebrow { padding: 20px 22px 0; margin-bottom: 8px; } .fh-noticia__titulo { font-family: var(--fh-font-text); font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--fh-marino); margin: 0; padding: 0 22px; } /* * La tarjeta no tiene relleno propio: lo pone cada pieza. * * El resumen y el pie se anadieron sin el, asi que llegaban al borde * mientras la fecha y el titulo se quedaban a 22 px. Madison lo vio en * la captura del 5-10-2026. Aqui van los tres con el mismo margen, y el * ultimo con el aire de abajo. */ .fh-noticia__resumen { padding: 0 22px; } .fh-noticia__pie { padding: 0 22px; } .fh-noticia > *:last-child { padding-bottom: 22px; } .fh-noticia__titulo:last-child { padding-bottom: 24px; } .fh-mapa { background: var(--fh-marino); padding: 24px 22px; justify-content: space-between; } .fh-mapa__titulo { font-size: clamp(22px, 1.7vw, 30px); color: var(--fh-blanco); margin: 0 0 18px; } /* --- movil --- */ @media (max-width: 900px) { .fh-rejilla { grid-template-columns: 1fr; } .fh-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .fh-cifras { grid-template-columns: 1fr; gap: 28px; text-align: left; } .fh-noticias { grid-template-columns: 1fr; } .fh-ficha { grid-template-columns: 1fr; min-height: 0; } .fh-ficha__foto { aspect-ratio: 16 / 10; } .fh-seccion__cabecera { align-items: flex-start; } .fh-cta { flex-direction: column; align-items: flex-start; } /* * En movil el boton ocupa toda la fila, pero .fh-btn lleva * white-space: nowrap y el texto seguia en una sola linea: "Ver los * 19 inmuebles de Miguel Gonzalez" medía 436 px y sacaba la pagina * 92 px por la derecha a 360. Aqui se deja partir. */ .fh-portada .fh-btn { width: 100%; max-width: 100%; text-align: center; white-space: normal; } } /* ------------------------------------------------------------------ Elementor aplica su tipografia global a h1-h4, p y a, y gana en especificidad. Dentro de la portada reponemos lo nuestro. ------------------------------------------------------------------ */ .fh-portada h1, .fh-portada h2, .fh-portada h3, .fh-portada h4, .fh-portada p, .fh-portada a { font-family: var(--fh-font-text); color: inherit; } /* El buscador trae su propia paleta: el reset de arriba no debe tocarlo. */ .fh-portada .fh-buscador__icono { color: var(--fh-arena) !important; } .fh-portada .fh-buscador__input { color: var(--fh-marino) !important; } .fh-portada .fh-buscador__nombre { color: var(--fh-marino) !important; } .fh-portada .fh-buscador__num, .fh-portada .fh-buscador__madre { color: #8B96A1 !important; } .fh-portada .fh-buscador__nombre mark { color: var(--fh-arena) !important; } .fh-portada .fh-display { font-family: var(--fh-font-display) !important; text-transform: uppercase !important; line-height: var(--fh-display-lh) !important; letter-spacing: var(--fh-display-ls) !important; font-weight: 700 !important; } .fh-portada .fh-eyebrow { font-size: var(--fh-eyebrow) !important; letter-spacing: .2em !important; font-weight: 500 !important; text-transform: uppercase !important; line-height: 1.4 !important; } .fh-portada .fh-hero__titulo { font-size: var(--fh-h1) !important; color: var(--fh-arena) !important; } .fh-portada .fh-hero__lead { font-size: var(--fh-lead) !important; color: rgba(255,255,255,.82) !important; } .fh-portada .fh-seccion__titulo{ font-size: var(--fh-h2) !important; } .fh-seccion--marino .fh-seccion__titulo { color: var(--fh-blanco) !important; } .fh-seccion--hueso .fh-seccion__titulo { color: var(--fh-marino) !important; } .fh-portada .fh-cifra__num { font-size: clamp(44px, 5.4vw, 92px) !important; color: var(--fh-marino) !important; } .fh-portada .fh-cifra__pie { font-size: var(--fh-small) !important; color: var(--fh-grafito) !important; } .fh-portada .fh-ficha__titulo { font-size: clamp(20px, 1.5vw, 27px) !important; color: var(--fh-marino) !important; } .fh-portada .fh-ficha__datos { color: var(--fh-grafito) !important; font-size: var(--fh-small) !important; } .fh-portada .fh-ficha__precio { font-size: clamp(22px, 1.7vw, 30px) !important; color: var(--fh-marino) !important; } .fh-portada .fh-cta__titulo { font-size: var(--fh-h2) !important; color: var(--fh-arena) !important; } .fh-portada .fh-cta__texto { color: rgba(255,255,255,.82) !important; font-size: var(--fh-body) !important; } .fh-portada .fh-mapa__titulo { font-size: clamp(22px, 1.7vw, 30px) !important; color: var(--fh-blanco) !important; } .fh-portada .fh-noticia__titulo{ font-size: 17px !important; color: var(--fh-marino) !important; font-weight: 500 !important; text-transform: none !important; line-height: 1.35 !important; } .fh-portada .fh-enlace { color: var(--fh-arena) !important; font-size: var(--fh-small) !important; } .fh-portada .fh-ficha__marca { color: var(--fh-hueso) !important; } .fh-portada .fh-outline { -webkit-text-fill-color: transparent !important; color: transparent !important; } .fh-on-marino .fh-outline { -webkit-text-stroke-color: var(--fh-arena) !important; } .fh-portada h1, .fh-portada h2, .fh-portada h3, .fh-portada p { margin-top: 0; } /* Los titulos que llegan de Inmovilla son descripciones largas; en condensada y mayusculas ocupan cinco lineas. Se limitan a dos y se cortan con puntos. */ .fh-portada .fh-ficha__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fh-portada .fh-noticia__titulo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Con pocas noticias, auto-fit reparte el ancho entre las que haya en vez de dejar media fila vacia. */ .fh-noticias { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Las cifras, centradas entre si. */ .fh-cifra { text-align: center; } @media (max-width: 600px) { .fh-cifra { text-align: left; } } /* ------------------------------------------------------------------ Safari: red de seguridad. 1. Si el navegador no entiende -webkit-text-stroke, el titular contorneado se quedaria invisible (color transparente sin trazo). Se repinta en solido. 2. aspect-ratio no existe antes de Safari 15: se sustituye por la proporcion clasica con padding. ------------------------------------------------------------------ */ @supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) { .fh-portada .fh-outline { color: var(--fh-arena) !important; -webkit-text-fill-color: var(--fh-arena) !important; } } @supports not (aspect-ratio: 16 / 10) { .fh-noticia__foto { position: relative; height: 0; padding-top: 62.5%; } .fh-noticia__foto img { position: absolute; inset: 0; } @media (max-width: 600px) { .fh-ficha__foto { position: relative; height: 0; padding-top: 62.5%; } .fh-ficha__foto img { position: absolute; inset: 0; } .fh-ficha__marcas { z-index: 2; } } } /* Safari necesita el prefijo para el recorte de lineas. */ .fh-portada .fh-ficha__titulo, .fh-portada .fh-noticia__titulo { display: -webkit-box; -webkit-box-orient: vertical; } /* El lead del bloque de valoracion se pegaba al titular condensado, que tiene interlineado 0,94 y deja poco aire debajo. */ .fh-portada .fh-cta__titulo { margin-bottom: 20px !important; } .fh-portada .fh-cta__texto { line-height: 1.6 !important; } .fh-portada .fh-cta > div { max-width: 62ch; } /* --- tarjeta del mapa con la silueta de Mallorca --- */ .fh-mapa { position: relative; overflow: hidden; padding: 26px 24px; min-height: 340px; } .fh-mapa__texto { position: relative; z-index: 2; } .fh-mapa .fh-enlace { position: relative; z-index: 2; } .fh-isla { position: absolute; right: -14%; bottom: -6%; width: 118%; height: auto; opacity: .95; pointer-events: none; } .fh-isla__linea { fill: none; stroke: var(--fh-arena); stroke-width: 5; stroke-linejoin: round; opacity: .55; } .fh-isla__pins circle { fill: var(--fh-arena); opacity: .9; } .fh-isla__pins circle:first-child { fill: var(--fh-blanco); } .fh-mapa:hover .fh-isla__linea { opacity: .8; } /* Los titulares condensados llevan interlineado 0,94: dejan muy poco aire por debajo y el texto siguiente parece pegado. Se separa a mano. */ .fh-portada .fh-hero__titulo { margin-bottom: 26px !important; } .fh-portada .fh-hero__lead { line-height: 1.55 !important; } .fh-portada .fh-seccion__titulo { padding-bottom: 2px; } /* --- tarjeta de zonas de la portada (antes era un contorno dibujado) --- */ .fh-mapa { display: flex; flex-direction: column; } .fh-mapa__zonas { list-style: none; margin: clamp(18px, 2vw, 26px) 0 auto; padding: 0; display: grid; gap: 1px; background: rgba(192, 157, 117, .28); border-top: 1px solid rgba(192, 157, 117, .28); border-bottom: 1px solid rgba(192, 157, 117, .28); } .fh-mapa__zonas li { background: var(--fh-marino); } .fh-mapa__zonas a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 4px; text-decoration: none; transition: padding-left .18s ease; } .fh-mapa__zonas a:hover { padding-left: 12px; } .fh-mapa__zona { font-family: var(--fh-font-text); font-size: 16px; font-weight: 400; color: var(--fh-blanco); min-width: 0; } .fh-mapa__zonas a:hover .fh-mapa__zona { color: var(--fh-arena); } .fh-mapa__num { font-family: var(--fh-font-display); font-size: 21px; line-height: 1; color: var(--fh-arena); flex: 0 0 auto; } .fh-mapa .fh-enlace { margin-top: clamp(18px, 2vw, 26px); } /* --- la segunda foto asoma al pasar por encima (idea de Balearic Properties) --- */ .fh-ficha__foto { overflow: hidden; } .fh-ficha__img, .fh-ficha__img2 { width: 100%; height: 100%; object-fit: cover; display: block; } .fh-ficha__img2 { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; } .fh-ficha:hover .fh-ficha__img2, .fh-ficha:focus-visible .fh-ficha__img2 { opacity: 1; } /* Con el dedo no hay "pasar por encima": en tactil no se enseña. */ @media (hover: none) { .fh-ficha__img2 { display: none; } } /* Movil: las cifras de la portada, centradas como en el ordenador. */ @media (max-width: 600px) { .fh-portada .fh-cifra { text-align: center; } } /* ========================================================= Las cifras sobre marino La regla de la portada las fija en marino porque alli van sobre hueso. En Nosotros el bloque es marino y el numero quedaba invisible: mismo color que el fondo. ========================================================= */ .fh-seccion--marino .fh-cifra__num { color: var(--fh-arena) !important; } .fh-seccion--marino .fh-cifra__pie { color: rgba(255, 255, 255, .75) !important; } .fh-cifra__num { opacity: 1 !important; } /* --- dos secciones seguidas del mismo fondo --- Los casos de exito van debajo de las recien incorporadas y las dos son de hueso: sin nada en medio se leian como un solo bloque largo de tarjetas. Se separan con el mismo filete de las cabeceras (--fh-rule), metido en el ancho de la pagina, y sin cambiar el aire: el relleno de arriba pasa de la seccion al interior. Madison, 15-10-2026. */ .fh-seccion--tras-igual { padding-top: 0; } .fh-seccion--tras-igual > .fh-ancho { border-top: var(--fh-rule); padding-top: clamp(56px, 7vw, 128px); } /* ---- fh-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

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-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-ficha ---- */ /* Film Houses - ficha de inmueble. Sobre filmhouses-brand-tokens.css. */ .fh-ficha-pag { font-family: var(--fh-font-text); font-weight: 300; line-height: var(--fh-text-lh); background: var(--fh-hueso); } .fh-ficha-pag *, .fh-ficha-pag *::before, .fh-ficha-pag *::after { box-sizing: border-box; } .fh-ficha-pag .fh-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--fh-gutter); } .fh-ficha-pag .fh-seccion { padding: clamp(44px, 5.2vw, 92px) 0; } .fh-ficha-pag .fh-seccion--marino { background: var(--fh-marino); color: var(--fh-blanco); } .fh-ficha-pag .fh-seccion--hueso { background: var(--fh-hueso); color: var(--fh-grafito); } .fh-ficha-pag h1, .fh-ficha-pag h2, .fh-ficha-pag p, .fh-ficha-pag li, .fh-ficha-pag a, .fh-ficha-pag label, .fh-ficha-pag input, .fh-ficha-pag textarea, .fh-ficha-pag select, .fh-ficha-pag button, .fh-ficha-pag span { font-family: var(--fh-font-text); } .fh-ficha-pag .fh-display { font-family: var(--fh-font-display) !important; text-transform: uppercase !important; line-height: var(--fh-display-lh) !important; letter-spacing: var(--fh-display-ls) !important; font-weight: 700 !important; margin: 0; } .fh-ficha-pag .fh-eyebrow { font-size: var(--fh-eyebrow) !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; margin: 0 0 12px !important; /* El color lo decide fh-custom.css segun el fondo: arena sobre marino, grafito sobre hueso y sobre tarjeta blanca, donde arena da 2,17. */ } /* Titular de seccion: se limita para que no invada la columna de al lado. */ .fh-ficha-pag .fh-h2 { font-size: clamp(28px, 2.6vw, 44px) !important; margin: 0 !important; } .fh-seccion--marino .fh-h2 { color: var(--fh-blanco) !important; } .fh-seccion--hueso .fh-h2 { color: var(--fh-marino) !important; } /* --- galeria tipo mosaico --- */ .fh-galeria { background: var(--fh-hueso); padding: 18px 0 clamp(18px, 2vw, 28px); } .fh-galeria__rejilla { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } .fh-galeria__grande, .fh-galeria__thumb { position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden; border-radius: var(--fh-radius-tile); background: var(--fh-piedra); display: block; } .fh-galeria__grande { aspect-ratio: 3 / 2; } .fh-galeria__grande img, .fh-galeria__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .fh-galeria__grande:hover img { transform: scale(1.02); } /* El mosaico iguala la altura de la foto grande: la manda ella, no el recorte. */ .fh-galeria__mini { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; min-height: 0; } .fh-galeria__thumb { min-height: 0; height: 100%; } .fh-galeria__rejilla { align-items: stretch; } .fh-galeria__todas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(39,55,67,.62); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px; text-align: center; } .fh-galeria__marcas { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; } /* Solo el color: el tamano y la forma los pone fh-marco.css. */ .fh-marca { background: var(--fh-arena); color: var(--fh-marino); } /* --- cabecera de la ficha --- */ .fh-cabecera { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(28px, 4vw, 72px); align-items: center; } .fh-titulo-ficha { font-family: var(--fh-font-display) !important; text-transform: uppercase; font-size: clamp(26px, 2.9vw, 50px) !important; line-height: .96 !important; letter-spacing: var(--fh-display-ls); color: var(--fh-blanco) !important; margin: 0 0 26px !important; } .fh-claves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 52px); } .fh-claves__num { display: block; font-size: clamp(22px, 2vw, 34px); color: var(--fh-arena); } /* * Sin mayusculas forzadas: la unidad de superficie es "m²", no "M²". * Aqui dentro solo hay cifras y unidades, asi que no se pierde nada. * Madison, 8-10-2026. */ .fh-ficha-pag .fh-claves__num { text-transform: none !important; } /* La frase del año no compite con las cifras. */ /* El año ya no lleva formato propio: va como el resto de la fila. La regla se queda por si alguna ficha vieja en cache la pide. */ .fh-ficha-pag .fh-claves__num--ano { font-size: inherit; align-self: auto; } .fh-claves__pie { font-size: 13px; color: rgba(255,255,255,.72); } .fh-claves__pie:empty { display: none; } .fh-precio-caja { background: var(--fh-blanco); border-radius: var(--fh-radius-card); padding: clamp(24px, 2.4vw, 36px); text-align: center; } .fh-precio { font-size: clamp(28px, 2.6vw, 42px); color: var(--fh-marino) !important; margin: 0 0 22px !important; } /* ------------------------------------------------------------------ Punto 70: la ficha, mas compacta. Madison, 6-10-2026. Medido en FH1304 a 1440 px: del boton del reportaje a los datos habia 254 px, casi todos azul vacio, porque la rejilla centraba el texto en vertical contra una caja de precio mucho mas alta. ------------------------------------------------------------------ */ /* 1 · Los datos arriba, a la altura del borde de la caja del precio. */ .fh-ficha-pag .fh-cabecera { align-items: start; } /* 2 y 4 · Un respiro normal por arriba y por abajo, no media pantalla. */ .fh-ficha-pag .fh-cabecera-seccion { padding-top: clamp(22px, 2.6vw, 44px); padding-bottom: clamp(22px, 2.6vw, 44px); } /* 3 · Y dentro de la caja, entre el precio y el primer boton. */ .fh-ficha-pag .fh-precio-caja .fh-precio { margin-bottom: 14px !important; } .fh-ficha-pag .fh-precio-caja .fh-precio-otros { margin: .2rem 0 .7rem; } /* * 5 · La ficha de vendido ya tenia el texto y la caja a la misma altura; * solo le sobraba aire por abajo. Mismo respiro que la de venta. */ .fh-vend-ficha .fh-vend-entrada { padding-bottom: clamp(22px, 2.6vw, 44px); } /* La regla del precio tachado se fue el 10-10-2026: nunca se enseña un precio viejo. */ .fh-ficha-pag .fh-btn { display: block; width: 100%; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 16px 24px; border-radius: var(--fh-radius-pill); text-decoration: none; border: 2px solid transparent; cursor: pointer; } .fh-ficha-pag .fh-btn-primary { background: var(--fh-arena); color: var(--fh-marino) !important; border-color: var(--fh-arena); } .fh-ficha-pag .fh-btn-primary:hover { opacity: .88; } .fh-ficha-pag .fh-btn-linea { background: transparent; color: var(--fh-marino) !important; border-color: var(--fh-marino); margin-top: 10px; } .fh-ficha-pag .fh-btn-linea:hover { background: var(--fh-marino); color: var(--fh-hueso) !important; } /* --- dos columnas: el titular nunca pisa el texto --- */ .fh-dos-col { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; } .fh-dos-col__lado { min-width: 0; } .fh-texto { min-width: 0; max-width: 68ch; } .fh-texto p { font-size: clamp(15px, 1.05vw, 18px); margin: 0 0 1em; color: var(--fh-grafito); } .fh-texto-claro { font-size: clamp(15px, 1.05vw, 18px); color: rgba(255,255,255,.82); margin: 0 0 12px; max-width: 46ch; } .fh-nota { font-size: 14px; color: var(--fh-grafito); margin: 10px 0 22px; } /* Descripcion compacta con "leer mas". */ .fh-plegable__cuerpo { overflow: hidden; } .fh-plegable:not(.is-abierto) .fh-plegable__cuerpo { max-height: 16em; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } .fh-plegable__boton { background: none; border: 0; padding: 10px 0 0; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fh-arena); } .fh-plegable.is-completo .fh-plegable__boton { display: none; } .fh-plegable.is-completo:not(.is-abierto) .fh-plegable__cuerpo { max-height: none; -webkit-mask-image: none; mask-image: none; } /* --- equipamiento --- */ .fh-comodidades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; margin-top: 26px; } .fh-comodidades li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: var(--fh-rule); font-size: 15px; } .fh-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--fh-arena); color: var(--fh-marino); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } /* --- mapa --- */ .fh-mapa-ficha { height: clamp(280px, 34vw, 440px); border-radius: var(--fh-radius-card); overflow: hidden; background: var(--fh-piedra); } /* --- formulario --- El bloque comun se mudo a fh-custom.css el 5-10-2026: la pagina de contacto no carga esta hoja, asi que su formulario se quedaba sin estilo ninguno mientras el de la ficha si lo tenia. Aqui solo queda lo que es de la ficha. */ .fh-visita { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; } .fh-visita__abrir { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--fh-arena); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-align: left; } .fh-visita__panel { display: grid; gap: 14px; padding-top: 14px; } .fh-visita__dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; } .fh-dia { position: relative; display: block; text-align: center; padding: 12px 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; cursor: pointer; color: #fff; } .fh-dia input { position: absolute; opacity: 0; pointer-events: none; } .fh-dia__sem { display: block; font-size: 11px; color: rgba(255,255,255,.66); text-transform: lowercase; } .fh-dia__num { display: block; font-family: var(--fh-font-display); font-size: 26px; font-weight: 700; line-height: 1.05; } .fh-dia__mes { display: block; font-size: 11px; color: rgba(255,255,255,.66); } .fh-dia:has(input:checked) { background: var(--fh-arena); border-color: var(--fh-arena); color: var(--fh-marino); } .fh-dia:has(input:checked) .fh-dia__sem, .fh-dia:has(input:checked) .fh-dia__mes { color: rgba(39,55,67,.75); } .fh-aviso { border-radius: 14px; padding: 16px 20px; font-size: 15px; } .fh-aviso--ok { background: var(--fh-arena); color: var(--fh-marino); } .fh-aviso--error { background: rgba(255,255,255,.14); color: #fff; } /* --- visor de fotos --- */ .fh-visor { position: fixed; inset: 0; z-index: 9000; background: rgba(20,28,34,.96); display: flex; align-items: center; justify-content: center; } .fh-visor[hidden] { display: none; } .fh-visor__lienzo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 90px); cursor: grab; } .fh-visor__lienzo.is-arrastrando { cursor: grabbing; } /* contain: las fotos verticales se ven enteras, no recortadas */ .fh-visor__lienzo img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .fh-visor__nav, .fh-visor__cerrar { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; } .fh-visor__nav:hover, .fh-visor__cerrar:hover { background: var(--fh-arena); color: var(--fh-marino); } .fh-visor__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); } .fh-visor__nav--next { right: 20px; top: 50%; transform: translateY(-50%); } .fh-visor__cerrar { top: 20px; right: 20px; font-size: 30px; } .fh-visor__contador { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0,0,0,.4); padding: 7px 16px; border-radius: var(--fh-radius-pill); } /* --- movil --- */ @media (max-width: 1000px) { .fh-cabecera, .fh-dos-col { grid-template-columns: 1fr; } .fh-precio-caja { order: -1; } } @media (max-width: 760px) { .fh-galeria__rejilla { grid-template-columns: 1fr; } .fh-galeria__mini { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: auto; } .fh-galeria__thumb { aspect-ratio: 1 / 1; height: auto; } .fh-galeria__todas { font-size: 11px; } .fh-form__par { grid-template-columns: minmax(0, 1fr); } .fh-visor__nav { width: 44px; height: 44px; } .fh-visor__nav--prev { left: 10px; } .fh-visor__nav--next { right: 10px; } } /* Safari antiguo: sin :has() el dia elegido se marca por clase desde JS. */ .fh-dia.is-elegido { background: var(--fh-arena); border-color: var(--fh-arena); color: var(--fh-marino); } .fh-dia.is-elegido .fh-dia__sem, .fh-dia.is-elegido .fh-dia__mes { color: rgba(39,55,67,.75); } @supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) { .fh-ficha-pag .fh-outline { color: var(--fh-arena) !important; -webkit-text-fill-color: var(--fh-arena) !important; } } /* Elementor pinta todos los