/* ═══════════════════════════════════════════════════════════════════════════ BL · LANDINGS DE CAPTACIÓN --------------------------------------------------------------------------- Las páginas de captación llevan y esta hoja la última, para que mande sobre bl-secciones.css y bl-form.css. Referencia: la landing de Cataluña de WordPress (documento «BL_pruebas landings», 24-09-2026). · Cabecera solo con el logotipo y un botón que baja al formulario. · Sin menú, sin migas y sin el pie grande: nada que se pueda pulsar lleva fuera del formulario. Los únicos enlaces que salen son los legales. · Un solo botón para toda acción principal (.lp-btn): el lima de la marca, el mismo de «Solicita tu presupuesto» de la cabecera de la web. El lima queda reservado a los botones: nada que no se pueda pulsar lo lleva. · En móvil, barra fija abajo con el botón al formulario. · Cada bloque con su fondo, para que las secciones se distingan bien. Las páginas del menú (casas prefabricadas, precios, sistemas, calidades, profesionales…) llevan («formato»): toman de aquí los fondos, el botón, las bandas de foto y el formulario, pero conservan la cabecera y el pie de la web, las migas, sus enlaces y Buildy. Lo que es solo de landing (cabecera propia, pie mínimo, barra fija) sigue en body.lp. ═══════════════════════════════════════════════════════════════════════════ */ body.lp{--hdr-h:0px} /* la cabecera de la landing ya no flota sobre el hero */ :is(body.lp,body.fx){ --lp-verde:#004741; /* el verde oscuro del logotipo */ --lp-verde-2:#0B5A53; --lp-crema:#F7F3ED; --lp-salvia:#EDF1EA; --lp-tinta:#161816; --lp-lima:#A8B800; /* solo botones */ } body.lp #presupuesto{scroll-margin-top:72px} html:has(body.lp){scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html:has(body.lp){scroll-behavior:auto}} /* ── EL BOTÓN ───────────────────────────────────────────────────────────── Un único estilo: píldora lima con el degradado suave de la cabecera, texto en tinta y flecha sin palo. Al pasar por encima se rellena de tinta. Los selectores llevan :is(body.lp,body.fx) .sc delante para ganar a las reglas del hero de bl-secciones.css (.sc-hero:has(.sc-hero-img) .sc-btn:hover). */ :is(body.lp,body.fx) .lp-btn, :is(body.lp,body.fx) .sc .sc-btn, :is(body.lp,body.fx) .sc .pf-submit, body.fx .bp .go, body.fx #pform .cta-solid{ display:inline-flex;align-items:center;justify-content:center;gap:10px; margin-top:0;padding:14px 26px;border-radius:999px; font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.005em; white-space:nowrap;text-decoration:none;cursor:pointer; color:#101010;border:1px solid #9CAF00; background:radial-gradient(130% 160% at 18% 0%,#D6E76A 0%,rgba(214,231,106,0) 58%), radial-gradient(110% 150% at 88% 115%,#87A300 0%,rgba(135,163,0,0) 62%), var(--lp-lima); box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 4px rgba(56,84,0,.18),0 6px 18px -8px rgba(72,110,0,.6); transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease} :is(body.lp,body.fx) .lp-btn svg, :is(body.lp,body.fx) .sc .sc-btn svg, :is(body.lp,body.fx) .sc .pf-submit svg, body.fx .bp .go svg, body.fx #pform .cta-solid svg{width:16px;height:16px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)} :is(body.lp,body.fx) .lp-btn:hover,:is(body.lp,body.fx) .lp-btn:focus-visible, :is(body.lp,body.fx) .sc .sc-btn:hover,:is(body.lp,body.fx) .sc .sc-btn:focus-visible, :is(body.lp,body.fx) .sc .pf-submit:hover,:is(body.lp,body.fx) .sc .pf-submit:focus-visible, body.fx .bp a:hover .go,body.fx #pform .cta-solid:hover,body.fx #pform .cta-solid:focus-visible{ background:#101010;border-color:#101010;color:#fff;box-shadow:none} :is(body.lp,body.fx) .lp-btn:hover svg,:is(body.lp,body.fx) .sc .sc-btn:hover svg,:is(body.lp,body.fx) .sc .pf-submit:hover svg{transform:translateX(3px)} /* el negativo: mismo tamaño y forma, sin relleno */ :is(body.lp,body.fx) .lp-btn.neg{background:transparent;color:inherit;border-color:currentColor;box-shadow:none} @media(prefers-reduced-motion:reduce){ :is(body.lp,body.fx) .lp-btn,:is(body.lp,body.fx) .sc .sc-btn,:is(body.lp,body.fx) .sc .pf-submit, :is(body.lp,body.fx) .lp-btn svg,:is(body.lp,body.fx) .sc .sc-btn svg,:is(body.lp,body.fx) .sc .pf-submit svg{transition:none}} /* ── CABECERA: logotipo y botón ───────────────────────────────────────── */ .lp-top{position:sticky;top:0;z-index:60;height:66px;display:flex;align-items:center; justify-content:space-between;gap:16px;padding:0 var(--pad); background:rgba(255,255,255,.97);border-bottom:1px solid rgba(16,16,16,.07); -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)} .lp-top .lp-logo{display:block;height:40px;width:auto;flex:none} /* :is(body.lp,body.fx) delante: sin él, la regla general del botón gana y en móvil el botón se quedaba con el tamaño grande (y desbordaba la pantalla por la derecha) */ body.lp .lp-top .lp-btn{padding:10px 20px;font-size:14.5px} @media(max-width:520px){ .lp-top{height:60px;padding-inline:16px;gap:12px} .lp-top .lp-logo{height:30px} body.lp .lp-top .lp-btn{padding:9px 14px;font-size:13.5px;gap:8px} } @media(max-width:400px){ body.lp .lp-top .lp-btn svg{display:none} } /* ── FONDOS DE LOS BLOQUES ─────────────────────────────────────────────── f-verde y f-tinta son los fuertes; crema, salvia y blanco, los claros. Una página no pone nunca dos bloques seguidos con el mismo fondo. */ :is(body.lp,body.fx) .f-blanco{background:#fff} :is(body.lp,body.fx) .f-crema{background:var(--lp-crema)} :is(body.lp,body.fx) .f-salvia{background:var(--lp-salvia)} :is(body.lp,body.fx) .f-verde{background:var(--lp-verde);color:#fff} :is(body.lp,body.fx) .f-tinta{background:var(--lp-tinta);color:#fff} :is(body.lp,body.fx) .f-verde :is(.sc-h2,h2,h3,h4,h5,b,strong,cite,blockquote,.sc-stat b,.sc-sys-claim,dt,summary), :is(body.lp,body.fx) .f-tinta :is(.sc-h2,h2,h3,h4,h5,b,strong,cite,blockquote,.sc-stat b,.sc-sys-claim,dt,summary){color:#fff} /* los enlaces del texto, en blanco subrayado (en verde oscuro no se veían) */ :is(body.lp,body.fx) :is(.f-verde,.f-tinta) a:not(.sc-btn):not(.lp-btn):not(.pf-submit):not(.go){color:#fff} :is(body.lp,body.fx) .f-verde :is(p,li,span,.sc-sub,.sc-stat span,dd), :is(body.lp,body.fx) .f-tinta :is(p,li,span,.sc-sub,.sc-stat span,dd){color:rgba(255,255,255,.8)} :is(body.lp,body.fx) .f-verde .sc-eyebrow,:is(body.lp,body.fx) .f-tinta .sc-eyebrow{color:rgba(255,255,255,.66)} :is(body.lp,body.fx) .f-verde .sc-stats,:is(body.lp,body.fx) .f-tinta .sc-stats, :is(body.lp,body.fx) .f-verde .sc-stat+.sc-stat,:is(body.lp,body.fx) .f-tinta .sc-stat+.sc-stat{border-color:rgba(255,255,255,.16)} /* las rejillas de tarjetas llevan su propio fondo (var(--paper)): en un bloque de color, que tomen el del bloque */ :is(body.lp,body.fx) .f-crema :is(.sc-feat,.sc-op),:is(body.lp,body.fx) .f-salvia :is(.sc-feat,.sc-op){background:#fff} :is(body.lp,body.fx) .f-blanco :is(.sc-feat,.sc-op){background:var(--lp-crema)} :is(body.lp,body.fx) .f-verde :is(.sc-feat,.sc-op),:is(body.lp,body.fx) .f-tinta :is(.sc-feat,.sc-op){background:rgba(255,255,255,.06)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) .sc-grid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) .est{color:#E8D27A} /* la lista con checks, que es una caja blanca: en oscuro pasa a ser una caja transparente con filetes claros, para que el texto blanco se lea */ :is(body.lp,body.fx) :is(.f-verde,.f-tinta) .check-list{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) .check-list li{border-color:rgba(255,255,255,.14)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) .check-list svg{stroke:#fff} /* islas claras dentro de un bloque oscuro (la caja del botón, las tablas, las tarjetas de modelos, la caja del cierre): siguen en blanco y su texto vuelve a tinta y gris. Sin esto, el texto blanco del bloque se perdía sobre la caja. */ :is(body.lp,body.fx) :is(.f-verde,.f-tinta) :is(.cta-bar,.cmp-wrap,.gm-tabla-wrap,.ag-modelo,.sc-cta>.wrap) :is(h1,h2,h3,h4,h5,b,strong,th,dt,cite,blockquote,summary,.sc-h2){color:var(--ink)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) :is(.cta-bar,.cmp-wrap,.gm-tabla-wrap,.ag-modelo,.sc-cta>.wrap) :is(p,li,span,td,dd,small,.sc-eyebrow,.sc-sub){color:var(--gray)} :is(body.lp,body.fx) :is(.f-verde,.f-tinta) :is(.cta-bar,.cmp-wrap,.gm-tabla-wrap,.ag-modelo,.sc-cta>.wrap) a:not(.sc-btn):not(.lp-btn){color:var(--ink)} /* los bloques que antes no tenían fondo y venían pegados a otro: con color propio necesitan su aire arriba y abajo */ :is(body.lp,body.fx) .sc > section[class*="f-"]{padding-top:clamp(52px,9vh,104px);padding-bottom:clamp(52px,9vh,104px)} /* la franja del botón que va justo bajo el hero (.sc-cta-top): con fondo propio, un aire corto, como la franja de confianza de las landings */ :is(body.lp,body.fx) .sc > section.sc-cta-top[class*="f-"]{padding:clamp(24px,3.6vh,36px) 0} /* banda de foto sin texto: separa bloques con una casa a todo lo ancho, sin añadir frases que no estaban en la página */ :is(body.lp,body.fx) .lp-banda.solo{min-height:clamp(260px,46vh,480px);padding:0} :is(body.lp,body.fx) .lp-banda.solo::after{background:linear-gradient(180deg,rgba(8,10,9,0) 55%,rgba(8,10,9,.2) 100%)} /* franja de confianza, pegada al hero */ :is(body.lp,body.fx) .sc > section.lp-franja{padding:clamp(22px,3vh,30px) 0} :is(body.lp,body.fx) .lp-franja .sc-stats{margin-top:0;border:0} :is(body.lp,body.fx) .lp-franja .sc-stat{padding-top:6px;padding-bottom:6px} :is(body.lp,body.fx) .lp-franja .sc-stat b{font-size:clamp(20px,2vw,26px)} /* las cuatro garantías de la referencia, en una fila */ :is(body.lp,body.fx) .lp-confianza{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 28px} :is(body.lp,body.fx) .lp-confianza li{display:flex;align-items:center;gap:12px} :is(body.lp,body.fx) .lp-confianza svg{width:24px;height:24px;flex:none;color:#CFE0DC} :is(body.lp,body.fx) .lp-confianza b{display:block;font-size:16px;font-weight:600;line-height:1.25} :is(body.lp,body.fx) .lp-confianza span{display:block;margin-top:2px;font-size:14px;line-height:1.35} @media(max-width:900px){:is(body.lp,body.fx) .lp-confianza{grid-template-columns:1fr 1fr}} @media(max-width:420px){:is(body.lp,body.fx) .lp-confianza{grid-template-columns:1fr}} /* ── HERO ─────────────────────────────────────────────────────────────── */ :is(body.lp,body.fx) .sc-hero .sc-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap} :is(body.lp,body.fx) .lp-puntos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0} :is(body.lp,body.fx) .lp-puntos li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:rgba(255,255,255,.92)} :is(body.lp,body.fx) .lp-puntos svg{width:16px;height:16px;flex:none} /* ── BANDA CON FOTO: una frase grande sobre una casa ─────────────────── */ :is(body.lp,body.fx) .lp-banda{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center; min-height:clamp(340px,56vh,560px);padding:clamp(48px,8vh,90px) var(--pad);text-align:center;color:#fff} :is(body.lp,body.fx) .lp-banda picture,:is(body.lp,body.fx) .lp-banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} :is(body.lp,body.fx) .lp-banda picture img{position:static} :is(body.lp,body.fx) .lp-banda::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(8,10,9,.28) 0,rgba(8,10,9,.52) 100%)} :is(body.lp,body.fx) .lp-banda h2{max-width:20ch;margin-inline:auto;font-size:clamp(30px,4.4vw,58px);font-weight:500; line-height:1.06;letter-spacing:-.025em;color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.35)} :is(body.lp,body.fx) .lp-banda p{margin-top:16px;font-size:clamp(16px,1.5vw,20px);color:rgba(255,255,255,.9)} /* ── PRECIO CERRADO: texto a la izquierda, extracto del CPQ a la derecha ── */ :is(body.lp,body.fx) .lp-cpq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} :is(body.lp,body.fx) .lp-cpq .sc-sub{margin-top:16px;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--gray)} :is(body.lp,body.fx) .lp-premio{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 16px; border:1px solid #D9CBA4;border-radius:10px;background:rgba(255,255,255,.6);font-size:14.5px;font-weight:500;color:#6A5A2C} :is(body.lp,body.fx) .lp-premio svg{width:18px;height:18px;flex:none} :is(body.lp,body.fx) .lp-extracto{background:var(--lp-verde);color:#fff;border-radius:18px;padding:clamp(22px,2.8vw,32px); box-shadow:0 30px 60px -34px rgba(0,40,36,.7)} :is(body.lp,body.fx) .lp-extracto .eti{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)} :is(body.lp,body.fx) .lp-extracto dl{margin:14px 0 0} :is(body.lp,body.fx) .lp-extracto .fila{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13)} :is(body.lp,body.fx) .lp-extracto dt{font-size:15px;color:rgba(255,255,255,.82)} :is(body.lp,body.fx) .lp-extracto dd{margin:0;font-size:15.5px;font-weight:600;color:#fff;white-space:nowrap} :is(body.lp,body.fx) .lp-extracto .total{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px; padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)} :is(body.lp,body.fx) .lp-extracto .total span{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.88)} :is(body.lp,body.fx) .lp-extracto .total b{font-size:clamp(21px,2.1vw,27px);font-weight:600;color:#fff;white-space:nowrap} :is(body.lp,body.fx) .lp-extracto .nota{margin-top:14px;font-size:12.5px;line-height:1.5;text-align:center;color:rgba(255,255,255,.6)} /* ── VÍDEO ────────────────────────────────────────────────────────────── */ :is(body.lp,body.fx) .lp-video-head{text-align:center;max-width:62ch;margin-inline:auto} :is(body.lp,body.fx) .lp-video{max-width:900px;margin:clamp(24px,4vh,36px) auto 0;border-radius:16px;overflow:hidden; background:#0c0e0d;box-shadow:0 34px 70px -38px rgba(0,0,0,.6)} :is(body.lp,body.fx) .lp-video video{display:block;width:100%;height:auto;aspect-ratio:854/480;background:#0c0e0d} :is(body.lp,body.fx) .lp-video-pie{max-width:62ch;margin:18px auto 0;text-align:center;font-size:15px;line-height:1.55;color:var(--gray)} /* ── LOS TRES SISTEMAS, EN UNA FILA Y EN PUNTOS ─────────────────────────── */ :is(body.lp,body.fx) .lp-sis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,4vh,40px); border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff} :is(body.lp,body.fx) .lp-sis article{padding:clamp(22px,2.6vw,32px)} :is(body.lp,body.fx) .lp-sis article+article{border-left:1px solid var(--line)} :is(body.lp,body.fx) .lp-sis .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--lp-salvia);color:var(--lp-verde)} :is(body.lp,body.fx) .lp-sis .ico svg{width:24px;height:24px} :is(body.lp,body.fx) .lp-sis h3{margin-top:16px;font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.01em;color:var(--ink)} :is(body.lp,body.fx) .lp-sis .claim{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--gray)} :is(body.lp,body.fx) .lp-sis ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:11px} :is(body.lp,body.fx) .lp-sis li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.45;color:var(--ink)} :is(body.lp,body.fx) .lp-sis li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--lp-verde)} /* ── GAMAS (la landing de 250.000 €) ──────────────────────────────────── */ :is(body.lp,body.fx) .lp-gamas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,4vh,40px)} :is(body.lp,body.fx) .lp-gama{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,32px)} :is(body.lp,body.fx) .lp-gama.destacada{border:2px solid var(--lp-verde)} :is(body.lp,body.fx) .lp-gama .marca{position:absolute;top:-12px;left:clamp(22px,2.6vw,32px);padding:4px 12px;border-radius:6px; background:var(--lp-verde);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase} :is(body.lp,body.fx) .lp-gama h3{font-size:clamp(20px,1.8vw,24px);font-weight:500;color:var(--ink)} :is(body.lp,body.fx) .lp-gama .sub{margin-top:2px;font-size:14.5px;color:var(--gray)} :is(body.lp,body.fx) .lp-gama .eur{display:block;margin-top:16px;font-size:clamp(30px,3vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--ink);white-space:nowrap} :is(body.lp,body.fx) .lp-gama .eur small{font-size:.5em;color:var(--gray);font-weight:500} :is(body.lp,body.fx) .lp-gama .desde{margin-top:4px;font-size:15px;font-weight:500;color:var(--lp-verde)} :is(body.lp,body.fx) .lp-gama p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--gray)} :is(body.lp,body.fx) .lp-gamas-cta{margin-top:clamp(26px,4vh,38px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;text-align:center} :is(body.lp,body.fx) .lp-gamas-cta p{font-size:17px;font-weight:500;color:var(--ink)} /* ── VERSIÓN CORTA DE VALENCIA ───────────────────────────────────────── La bandera de la Comunitat Valenciana, las tres razones, los pasos y el cierre de «Construimos tu casa ¡en 6 meses!». */ :is(body.lp,body.fx) .lp-bandera{display:inline-block;margin-bottom:clamp(14px,2vh,20px);line-height:0} :is(body.lp,body.fx) .lp-bandera svg{width:54px;height:36px;border-radius:3px;box-shadow:0 3px 14px rgba(0,0,0,.35)} :is(body.lp,body.fx) .lp-banda p{max-width:62ch;margin-inline:auto} :is(body.lp,body.fx) .lp-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,4vh,40px)} :is(body.lp,body.fx) .lp-tres article{display:flex;flex-direction:column;align-items:flex-start;background:var(--lp-crema);border-radius:16px;padding:clamp(22px,2.6vw,32px)} :is(body.lp,body.fx) .lp-tres .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--lp-verde)} :is(body.lp,body.fx) .lp-tres .ico svg{width:24px;height:24px} :is(body.lp,body.fx) .lp-tres h3{margin-top:16px;font-size:clamp(19px,1.7vw,23px);font-weight:500;color:var(--ink)} :is(body.lp,body.fx) .lp-tres p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--gray)} :is(body.lp,body.fx) .lp-tres article .sc-btn{margin-top:22px} :is(body.lp,body.fx) .lp-pasos{list-style:none;margin:clamp(26px,4vh,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)} :is(body.lp,body.fx) .lp-pasos li{display:flex;flex-direction:column;align-items:flex-start;padding-top:20px;border-top:1px solid var(--line)} :is(body.lp,body.fx) .lp-pasos .num{font-size:clamp(34px,3.4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1} :is(body.lp,body.fx) .lp-pasos h3{margin-top:14px;font-size:clamp(19px,1.7vw,23px);font-weight:500} :is(body.lp,body.fx) .lp-pasos p{margin-top:10px;font-size:16px;line-height:1.6} :is(body.lp,body.fx) .lp-pasos .sc-btn{margin-top:22px} :is(body.lp,body.fx) .f-tinta .lp-pasos li,:is(body.lp,body.fx) .f-verde .lp-pasos li{border-color:rgba(255,255,255,.22)} :is(body.lp,body.fx) .f-tinta .lp-pasos .num,:is(body.lp,body.fx) .f-verde .lp-pasos .num{color:#fff} :is(body.lp,body.fx) .lp-cierre .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vh,28px);text-align:center} :is(body.lp,body.fx) .lp-cierre .sc-h2{font-size:clamp(30px,4vw,52px)} @media(max-width:820px){ :is(body.lp,body.fx) .lp-tres,:is(body.lp,body.fx) .lp-pasos{grid-template-columns:1fr} } /* ── OPINIONES ────────────────────────────────────────────────────────── */ :is(body.lp,body.fx) .sc-op .est{letter-spacing:.14em;font-size:17px;color:#9C7A1A} /* ── FORMULARIO: el texto dentro del campo, como en /presupuesto ────────── La etiqueta se queda para los lectores de pantalla; lo que se ve es el texto dentro del campo. Provincia y localidad van juntas en la misma fila. */ :is(body.lp,body.fx) .pf-field label{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} :is(body.lp,body.fx) .pf-field input,:is(body.lp,body.fx) .pf-field select{padding:15px 16px;border-color:#d6d6d0} :is(body.lp,body.fx) .pf-field select:has(option[value=""]:checked){color:#6f6f6b} :is(body.lp,body.fx) .pf-field input:disabled{background:#f1f1ee;color:#8a8a86;cursor:not-allowed} :is(body.lp,body.fx) .pf-que{display:flex;gap:14px;align-items:flex-start;max-width:820px;margin:0 0 clamp(22px,3.4vh,32px); padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)} :is(body.lp,body.fx) .pf-que svg{width:22px;height:22px;flex:none;margin-top:2px} :is(body.lp,body.fx) .pf-que b{display:block;font-size:16px;font-weight:600} :is(body.lp,body.fx) .pf-que p{margin-top:6px;font-size:15px;line-height:1.6} /* /proyecto tiene su propio formulario (.f): la misma regla, el texto dentro */ body.fx #pform .f > label{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} body.fx #pform .f select:has(option[value=""]:checked){color:#6f6f6b} /* bloques de ancho limitado que se pintan a todo lo ancho de la ventana */ :is(body.lp,body.fx) .lp-sangre{box-shadow:0 0 0 100vmax var(--lp-fondo);clip-path:inset(0 -100vmax);background:var(--lp-fondo)} :is(body.lp,body.fx) .lp-sangre.f-verde{--lp-fondo:var(--lp-verde)} :is(body.lp,body.fx) .lp-sangre.f-tinta{--lp-fondo:var(--lp-tinta)} :is(body.lp,body.fx) .lp-sangre.f-crema{--lp-fondo:var(--lp-crema)} /* el bloque del formulario, en el verde de la marca */ :is(body.lp,body.fx) .pf-sec.f-verde .pf-head h2{color:#fff} :is(body.lp,body.fx) .pf-sec.f-verde .pf-head p,:is(body.lp,body.fx) .pf-sec.f-verde .pf-fine{color:rgba(255,255,255,.82)} :is(body.lp,body.fx) .pf-sec.f-verde .pf-check{color:rgba(255,255,255,.8)} :is(body.lp,body.fx) .pf-sec.f-verde .pf-check input{accent-color:var(--lp-lima)} :is(body.lp,body.fx) .pf-sec.f-verde .pf-legal{color:rgba(255,255,255,.55)} :is(body.lp,body.fx) .pf-sec.f-verde .pf-legal b{color:rgba(255,255,255,.78)} :is(body.lp,body.fx) .pf-sec.f-verde .pf-field input:focus,:is(body.lp,body.fx) .pf-sec.f-verde .pf-field select:focus{outline:3px solid #D6E76A;outline-offset:1px} :is(body.lp,body.fx) .sc .pf-submit{margin-top:clamp(22px,3vh,30px);padding:16px 30px;font-size:17px} /* ── PIE MÍNIMO: lo legal y nada más ─────────────────────────────────── */ .lp-foot{background:var(--lp-tinta);color:rgba(255,255,255,.6);padding:clamp(34px,6vh,56px) var(--pad) clamp(28px,4vh,40px);font-size:13px;line-height:1.6} .lp-foot-in{max-width:1180px;margin-inline:auto} .lp-foot-fund{display:inline-block;background:#fff;border-radius:10px;padding:10px 16px} .lp-foot-fund img{display:block;width:min(420px,100%);height:auto} .lp-foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:24px} .lp-foot-bot nav{display:flex;flex-wrap:wrap;gap:6px 18px} .lp-foot-bot a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px} .lp-foot-bot a:hover{color:#fff} .lp-foot-note{margin-top:16px;font-size:11.5px;color:rgba(255,255,255,.42)} /* ── BARRA FIJA EN MÓVIL ──────────────────────────────────────────────── */ .lp-bar{display:none} @media(max-width:820px){ .lp-foot{padding-bottom:calc(clamp(28px,4vh,40px) + 78px)} .lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--lp-tinta);color:#fff; box-shadow:0 -10px 26px -14px rgba(0,0,0,.5);transition:transform .3s ease} .lp-bar.fuera{transform:translateY(115%)} .lp-bar p{font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.68)} .lp-bar strong{display:block;font-size:15.5px;font-weight:600;color:#fff} .lp-bar .lp-btn{padding:12px 18px;font-size:15px} } /* ── MÓVIL Y TABLETA ──────────────────────────────────────────────────── */ @media(max-width:900px){ :is(body.lp,body.fx) .lp-cpq{grid-template-columns:1fr} :is(body.lp,body.fx) .lp-gamas{grid-template-columns:1fr} } @media(max-width:820px){ :is(body.lp,body.fx) .lp-sis{grid-template-columns:1fr} :is(body.lp,body.fx) .lp-sis article+article{border-left:0;border-top:1px solid var(--line)} } @media(max-width:640px){ :is(body.lp,body.fx) .sc .sc-btn,:is(body.lp,body.fx) .sc .pf-submit{width:100%} :is(body.lp,body.fx) .lp-extracto .fila{padding:11px 0} :is(body.lp,body.fx) .lp-extracto .total{flex-direction:column;align-items:flex-start;gap:4px} }