/* Capa de diseño del Hotel Casa Ferrer, v2. Vive en el plugin y no en el personalizador: el servidor publicado solo admite ZIP de plugin, y así el diseño viaja en el repositorio y se aplica igual en los dos sitios. El CSS anterior queda guardado en la opción cf_css_anterior. */ /* tokens */ :root{ --cf-marino:#12303F;--cf-laton:#B08A4A;--cf-laton-txt:#856230;--cf-tinta:#1F1D1A; --cf-crema:#F5F0E6;--cf-crema-osc:#EDE7DA;--cf-salvia:#5F7161; /* --cf-espacio: base del ritmo vertical */ --cf-espacio:clamp(1rem,.7rem + 1.2vw,1.75rem); --cf-radio:10px;--cf-radio-s:6px; --cf-sombra:0 8px 24px -8px rgba(18,48,63,.22); --cf-sombra-s:0 2px 8px rgba(18,48,63,.12); --cf-hab-ratio:3/2; } /* base y tipografia */ /* elementor_header_footer no trae contenedor */ /* La portada lleva la cabecera transparente de Astra, y eso deja 28 px de lienzo por encima del que se pintaban de crema justo sobre el hero oscuro. El lienzo lo pinta el : en marino casa arriba con el hero y abajo con el pie. */ html{background:var(--cf-marino)} .cf-page{color:var(--cf-tinta);font-size:18px;line-height:1.65;max-width:1180px;margin:0 auto;padding:0 1.2rem;box-sizing:border-box} .cf-page h1,.cf-page h2,.cf-page h3,.cf-page h4{font-family:"Playfair Display",Georgia,serif;color:var(--cf-marino)!important;line-height:1.15;text-wrap:balance} .cf-page h1{font-size:clamp(2.4rem,5vw,3.7rem);margin:0 0 .35em} .cf-page h2{font-size:clamp(1.7rem,3.3vw,2.45rem);margin:calc(var(--cf-espacio) * 2) 0 .5em} .cf-page h3{font-size:1.35rem;margin:1.6em 0 .4em} .cf-page p{margin:0 0 1.2em;max-width:68ch} .cf-page a{color:var(--cf-laton-txt);text-underline-offset:3px} .cf-page a:hover{color:var(--cf-marino)} .cf-lead{font-size:1.3rem;line-height:1.55;color:var(--cf-marino);max-width:62ch} /* layout y bandas */ .cf-band{margin:0 calc(50% - 50vw);padding:clamp(2.6rem,5vw,4.4rem) calc(50vw - 50%);width:100vw} .cf-band--crema{background:var(--cf-crema)} .cf-band--marino{background:var(--cf-marino);color:var(--cf-crema)} .cf-grid{display:grid;gap:var(--cf-espacio);grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin:calc(var(--cf-espacio) * 1.6) 0 0;padding:0;list-style:none} /* NUEVO .cf-seccion: fondo via --cf-seccion-fondo; el texto lo fija el modificador */ .cf-seccion{margin:0 calc(50% - 50vw);width:100vw;padding:clamp(2.6rem,5vw,4.4rem) calc(50vw - 50%);background:var(--cf-seccion-fondo,var(--cf-crema));color:var(--cf-tinta)} .cf-seccion--marino{--cf-seccion-fondo:var(--cf-marino);color:var(--cf-crema)} .cf-band--marino h2,.cf-band--marino h3,.cf-seccion--marino h2,.cf-seccion--marino h3,.cf-seccion--marino h4{color:var(--cf-crema)!important} .cf-band--marino a,.cf-seccion--marino a{color:#E0C58A} /* NUEVO .cf-cifras: sin color propio, hereda el de su banda/seccion */ .cf-cifras{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--cf-espacio) * 1.6);margin:calc(var(--cf-espacio) * 2) 0;padding:0;list-style:none;text-align:center} .cf-cifra{flex:1 1 140px} .cf-cifra strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(2.1rem,4vw,3rem);line-height:1.1;font-weight:600} .cf-cifra span{display:block;font-size:.92rem;margin-top:.35rem} /* hero */ .cf-hero{margin:0 calc(50% - 50vw);width:100vw;padding:clamp(4rem,8vw,7rem) calc(50vw - 50%) clamp(3rem,6vw,5rem);background:var(--cf-marino);color:var(--cf-crema)} .cf-hero h1{color:var(--cf-crema)!important;margin-bottom:.3em} .cf-hero p{font-size:1.2rem;max-width:60ch} /* NUEVO .cf-hero--foto: --cf-hero-img via style inline; marino de base */ /* La cabecera de Astra flota ENCIMA de la primera sección (position:absolute, fondo transparente) y sus enlaces son casi blancos. Sobre una foto no hay contraste garantizado, así que el hero pinta su propio velo oscuro arriba y se reserva sitio para que la cabecera no tape el contenido. */ .cf-hero--foto{background-color:var(--cf-marino);background-image:linear-gradient(180deg,rgba(11,31,41,.88) 0,rgba(11,31,41,.5) 190px,rgba(11,31,41,.12) 420px),var(--cf-hero-img);background-size:auto,cover;background-position:top center,center;background-repeat:no-repeat,no-repeat;min-height:clamp(26rem,62vh,42rem);padding-top:clamp(10rem,15vw,13rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--cf-espacio)} /* NUEVO .cf-hero__caja: caja SOLIDA tras el texto, no overlay; todo el texto va dentro */ .cf-hero__caja{background:var(--cf-marino);color:var(--cf-crema);padding:var(--cf-espacio) calc(var(--cf-espacio) * 1.3);border-radius:var(--cf-radio);max-width:58ch;box-shadow:var(--cf-sombra)} /* buscador */ .cf-buscador{border:1px solid var(--cf-crema-osc)!important;border-radius:var(--cf-radio);box-shadow:var(--cf-sombra-s);padding:clamp(1.2rem,2.5vw,2rem)!important} .cf-buscador h2{font-size:1.35rem!important;margin:0 0 1.2em!important} .cf-buscador legend{font-family:Inter,system-ui,sans-serif;font-size:.95rem;letter-spacing:.02em} .cf-buscador .cf-campo input,.cf-buscador .cf-campo select{border-radius:var(--cf-radio-s)} .cf-buscador .cf-boton{border-radius:var(--cf-radio-s)} /* NUEVO .cf-buscador--hero: la tarjeta de busqueda que vive dentro del hero. Fondo crema SOLIDO: el texto y los campos no llegan a tocar la foto nunca. */ /* `color` explícito: dentro del hero todo hereda crema, y la pista de fechas —que no vive dentro de un .cf-campo— se quedaba crema sobre crema, invisible. */ .cf-buscador--hero{background:var(--cf-crema);box-shadow:var(--cf-sombra);margin:0!important;width:100%;max-width:62rem;color:var(--cf-tinta)} /* «Precio máximo por noche» ocupa dos líneas y «Huéspedes» una: sin reservar el alto de la etiqueta, los cuatro campos quedan a alturas distintas. */ .cf-buscador--hero .cf-campo label{min-height:2.7em} .cf-buscador--hero .cf-pista{color:#4F4A42;font-size:.85rem;line-height:1.45} .cf-buscador--hero #cf-ayuda-fechas{margin:.9rem 0 0!important} .cf-buscador--hero h2{margin-bottom:1em!important} .cf-buscador--hero fieldset{margin:0} .cf-buscador--hero .cf-campos{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .cf-buscador--hero .cf-acciones{margin-top:1.1rem} .cf-buscador--hero .cf-boton{flex:1 1 auto;justify-content:center;text-align:center} @media(min-width:700px){.cf-buscador--hero .cf-boton{flex:0 0 auto}} /* tarjetas */ .cf-card,.cf-hab{background:#fff;border:1px solid var(--cf-crema-osc);border-radius:var(--cf-radio);display:flex;flex-direction:column;box-shadow:var(--cf-sombra-s)} .cf-card{padding:1.7rem;margin:0} .cf-card--crema{background:var(--cf-crema);border-color:#e2d9c6} .cf-card img{width:100%;height:auto;display:block;margin:0 0 1rem;border-radius:calc(var(--cf-radio) - 4px);aspect-ratio:4/3;object-fit:cover} .cf-card h2{font-size:1.4rem!important;margin:0 0 .3em!important;line-height:1.25} .cf-card h3{font-size:1.2rem;margin:0 0 .3em} .cf-card p:last-child{margin-bottom:0;margin-top:auto;padding-top:.6rem} .cf-price{font-family:"Playfair Display",Georgia,serif;font-size:1.45rem;color:var(--cf-marino);display:block;margin:.2rem 0 .6rem} .cf-price small{font-size:.82rem;font-family:Inter,system-ui,sans-serif;color:var(--cf-salvia);font-weight:400} .cf-meta{color:var(--cf-salvia);font-size:.95rem;margin:0 0 1rem} /* habitaciones */ /* NUEVO .cf-hab-lista/.cf-hab: --cf-hab-ratio + object-fit evita deformar */ .cf-hab-lista{display:grid;gap:var(--cf-espacio);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:calc(var(--cf-espacio) * 1.6) 0 0;padding:0;list-style:none} .cf-hab{overflow:hidden} .cf-hab img{width:100%;aspect-ratio:var(--cf-hab-ratio);object-fit:cover;display:block} .cf-hab__cuerpo{padding:1.5rem;display:flex;flex-direction:column;flex:1} .cf-hab h3{margin:0 0 .3em} .cf-hab p{margin:0 0 .8em} .cf-hab .cf-price{margin-top:auto} .cf-hab .cf-btn{align-self:flex-start;margin-top:.6rem} @media(prefers-reduced-motion:no-preference){.cf-card,.cf-hab{transition:box-shadow .2s ease,transform .2s ease} .cf-card:hover,.cf-hab:hover{box-shadow:var(--cf-sombra);transform:translateY(-2px)}} /* tablas */ .cf-scroll{overflow-x:auto;margin:calc(var(--cf-espacio) * 1.2) 0} .cf-table{border-collapse:collapse;width:100%;min-width:520px} .cf-table th,.cf-table td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--cf-crema-osc)} .cf-table th{background:var(--cf-crema);font-family:Inter,sans-serif;color:var(--cf-marino)} .cf-dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;margin:1.2rem 0} .cf-dl dt{color:var(--cf-salvia);font-size:.95rem} .cf-dl dd{margin:0;color:var(--cf-tinta)} @media(max-width:600px){.cf-dl{grid-template-columns:1fr}} .cf-faq{border-bottom:1px solid var(--cf-crema-osc);padding:.2rem 0} .cf-faq summary{cursor:pointer;padding:1rem 0;font-weight:600;color:var(--cf-marino);font-size:1.05rem} .cf-faq summary:focus-visible{outline:2px solid var(--cf-laton-txt);outline-offset:2px} .cf-faq p{margin:0 0 1rem} .cf-figure{margin:calc(var(--cf-espacio) * .8) 0 calc(var(--cf-espacio) * 1.4)} .cf-figure img{width:100%;height:auto;display:block;border-radius:var(--cf-radio);aspect-ratio:16/10;object-fit:cover} .cf-figure figcaption{color:var(--cf-salvia);font-size:.9rem;margin-top:.6rem} /* botones y foco */ .cf-btn{display:inline-block;background:var(--cf-laton);color:var(--cf-tinta)!important;padding:.9rem 1.7rem;font-weight:600;text-decoration:none;border-radius:var(--cf-radio-s);font-size:1.02rem;min-height:44px;line-height:1.6} .cf-btn:hover{background:var(--cf-laton-txt);color:#fff!important} .cf-btn--ghost{background:transparent;border:1px solid var(--cf-laton);color:var(--cf-laton-txt)!important} @media(prefers-reduced-motion:no-preference){.cf-btn{transition:background-color .18s ease,color .18s ease}} /* foco: marino en fondo claro, crema en oscuro; el buscador vuelve a marino */ :focus-visible{outline:3px solid var(--cf-marino);outline-offset:3px} .cf-band--marino :focus-visible,.cf-hero :focus-visible,.cf-seccion--marino :focus-visible,.site-footer :focus-visible{outline-color:var(--cf-crema)} .cf-buscador :focus-visible{outline-color:var(--cf-marino)} /* cabecera */ .ast-header-navigation-arrow,.dropdown-menu-toggle{min-width:24px!important;min-height:24px!important;display:inline-flex!important;align-items:center;justify-content:center} /* .ast-menu-toggle es solo movil: forzarlo afectaba escritorio */ .ast-menu-toggle{min-width:24px;min-height:24px} .ast-primary-header-bar{position:sticky;top:0;z-index:99;background:var(--cf-crema)} /* pie */ .site-footer .widget_media_image img,.ast-footer-widget-1 img,[class*="footer-widget"] .widget_media_image img{max-width:230px!important;height:auto!important} .site-footer,.site-footer p,.site-footer address,.site-footer li,.ast-builder-footer-grid-columns{color:var(--cf-crema)} .site-footer a,.ast-builder-footer-grid-columns a{color:#E0C58A!important} .site-footer a:hover,.ast-builder-footer-grid-columns a:hover{color:var(--cf-crema)!important} .site-footer .widget-title,.site-footer h2,.site-footer h3{color:var(--cf-crema)!important;font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;letter-spacing:.04em} /* utilidades */ .cf-nota{background:var(--cf-crema-osc);border-left:4px solid var(--cf-laton);border-radius:var(--cf-radio-s);padding:1rem 1.3rem;margin:1.5rem 0;font-size:.95rem;color:var(--cf-tinta)} .cf-nota strong{color:var(--cf-marino)} .cf-page p a,.cf-page li a,.cf-page td a,.cf-page dd a,.entry-content p a{text-decoration:underline;text-underline-offset:.15em} .cf-page h1 a,.cf-page h2 a,.cf-page h3 a,.cf-hab h3 a,.cf-card h3 a{text-decoration:none;color:var(--cf-marino)} .cf-page h2 a:hover,.cf-page h3 a:hover,.cf-hab h3 a:hover,.cf-card h3 a:hover{text-decoration:underline;text-underline-offset:.15em;color:var(--cf-laton-txt)} .cf-page a.cf-btn,.cf-page a.cf-btn--ghost{text-decoration:none} /* compatibilidad: formulario en banda marino */ .elementor-element-18fa207 .forminator-ui .forminator-label, .elementor-element-18fa207 .forminator-ui .forminator-description, .elementor-element-18fa207 .forminator-ui .forminator-checkbox, .elementor-element-18fa207 .forminator-ui span, .elementor-element-18fa207 .forminator-ui p, .elementor-element-18fa207 .forminator-ui label{color:var(--cf-crema)!important;text-shadow:none!important} .elementor-element-18fa207 .forminator-ui a{color:#E0C58A!important;text-shadow:none!important} .elementor-element-18fa207 .forminator-ui input:not([type=checkbox]), .elementor-element-18fa207 .forminator-ui textarea, .elementor-element-18fa207 .forminator-ui select{background:#fff!important;color:var(--cf-tinta)!important} .forminator-ui .select2-selection__rendered, .forminator-ui .select2-selection__placeholder, .elementor-element-18fa207 .forminator-ui .select2-selection__rendered, .elementor-element-18fa207 .forminator-ui .select2-selection__placeholder, .select2-container--open .select2-results__option{color:var(--cf-tinta)!important;text-shadow:none!important} .cf-page .forminator-ui .forminator-label, .forminator-ui .forminator-label, .forminator-ui .forminator-description{color:var(--cf-tinta)!important} .elementor-element-18fa207 .forminator-ui .forminator-label, .elementor-element-18fa207 .forminator-ui .forminator-description{color:var(--cf-crema)!important} .forminator-ui .forminator-checkbox__label, .forminator-ui .forminator-consent__label{color:var(--cf-tinta)!important} .elementor-element-18fa207 .forminator-ui .forminator-checkbox__label, .elementor-element-18fa207 .forminator-ui .forminator-consent__label{color:var(--cf-crema)!important} .elementor-element-18fa207 .forminator-ui .forminator-consent__label a{color:#E0C58A!important} .forminator-ui.forminator-custom-form button.forminator-button-submit, .forminator-ui button.forminator-button-submit{background:var(--cf-laton)!important;color:var(--cf-tinta)!important;border:none!important;font-weight:600!important;letter-spacing:.04em;padding:.9rem 1.8rem!important;border-radius:2px!important} .forminator-ui button.forminator-button-submit:hover{background:var(--cf-laton-txt)!important;color:#fff!important} .forminator-ui input:not([type=checkbox]),.forminator-ui textarea,.forminator-ui select, .forminator-ui .select2-container .select2-selection{border:1px solid #d8cfbb!important;border-radius:2px!important} /* compatibilidad: WooCommerce */ .woocommerce-breadcrumb,.woocommerce-breadcrumb a, .woocommerce-result-count,.woocommerce-review-link, .product_meta,.product_meta a{color:var(--cf-salvia)!important} .woocommerce-breadcrumb a:hover,.product_meta a:hover{color:var(--cf-laton-txt)!important} .woocommerce div.product .stock,p.stock.in-stock{color:#365E2A!important} .woocommerce div.product .out-of-stock,p.stock.out-of-stock{color:#8C2F1B!important} .single-product-category a[rel="tag"],.product_meta a[rel="tag"],.posted_in a{display:inline-flex!important;align-items:center;min-height:24px!important} /* opacity:.6 de Astra en categoria: el contraste se mide tras la opacidad */ .ast-woo-product-category{opacity:1!important;color:var(--cf-salvia)!important} body.woocommerce .site-content > .ast-container, body.woocommerce-page .site-content > .ast-container{max-width:1180px;margin:0 auto;padding:2.5rem 1.5rem 4.5rem;box-sizing:border-box} body.woocommerce .woocommerce-products-header, body.woocommerce-page .woocommerce-products-header{margin-bottom:1.5rem} body.woocommerce h1,body.woocommerce-page h1, body.woocommerce h2,body.woocommerce-page h2, body.woocommerce .product_title, body.woocommerce .woocommerce-loop-product__title{font-family:"Playfair Display",Georgia,serif!important} body.woocommerce .woocommerce-products-header__title, body.woocommerce .product_title{color:var(--cf-marino)!important;font-size:clamp(2.4rem,5vw,3.7rem)!important;line-height:1.15} body.woocommerce .woocommerce-loop-product__title{font-size:1.15rem!important;color:var(--cf-marino)!important} body.woocommerce .price,body.woocommerce-page .price{color:var(--cf-marino)!important;font-family:"Playfair Display",Georgia,serif} body.woocommerce ul.products li.product{margin-bottom:2.5rem} .woocommerce form .show-password-input,.woocommerce-page form .show-password-input{width:24px!important;height:24px!important;top:.6em!important;background-size:16px 16px;background-position:center} .woocommerce form .woocommerce-form-login__rememberme input[type=checkbox], .woocommerce-page form input[type=checkbox]{width:20px!important;height:20px!important;margin-right:.5rem;vertical-align:middle} @media(max-width:600px){body.woocommerce .site-content > .ast-container, body.woocommerce-page .site-content > .ast-container{padding:1.8rem 1.2rem 3rem}}