:root{--navy:#102a43;--sky:#e9f3f8;--blue:#2878a0;--orange:#e36b32;--sand:#f7f4ee;--ink:#17242d;--muted:#62717a;--white:#fff;--line:#d8e2e7;--shadow:0 18px 50px rgba(16,42,67,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font:16px/1.65 Arial,sans-serif}img{display:block;width:100%;object-fit:cover}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.demo{padding:7px 15px;background:var(--orange);color:#fff;text-align:center;font-size:.76rem;font-weight:900;letter-spacing:.08em}.watermark{position:fixed;left:12px;bottom:12px;z-index:50;padding:7px 12px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(16,42,67,.9);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.07em;pointer-events:none}header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px}.logo{width:58px;height:44px;display:grid;place-items:center;border-radius:8px;background:var(--navy);color:#fff;font-size:.66rem;font-weight:900;letter-spacing:.06em}.brand strong{display:block;color:var(--navy);line-height:1.05}.brand small{color:var(--muted);font-weight:700}.links{display:flex;align-items:center;gap:23px;font-size:.88rem;font-weight:800}.links a:hover,.links a.active{color:var(--orange)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:0;border-radius:8px;font-weight:900}.button.live{background:var(--navy);color:#fff}.button.contact{background:var(--orange);color:#fff;cursor:default;user-select:none}.menu-toggle{display:none}.hero{position:relative;min-height:570px;display:grid;align-items:center;overflow:hidden;background:var(--navy)}.hero>img{position:absolute;inset:0;height:100%}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,29,46,.96),rgba(10,29,46,.73) 50%,rgba(10,29,46,.08) 82%)}.hero .wrap{position:relative;z-index:2}.hero-copy{max-width:650px;padding:70px 0;color:#fff}.eyebrow,.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:900;color:var(--orange)}h1,h2,h3{font-family:Georgia,serif}h1{font-size:clamp(2.65rem,5.5vw,4.75rem);line-height:1.02;letter-spacing:-.035em;margin:14px 0 19px}.hero p{max-width:590px;color:#e3edf2;font-size:1.1rem}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.hero .button.live{background:#fff;color:var(--navy)}.section{padding:86px 0}.section.alt{background:var(--sand)}.heading{max-width:730px;margin-bottom:38px}.heading.center{text-align:center;margin:0 auto 38px}.heading h2,.page-hero h1{margin:8px 0 13px;color:var(--navy);font-size:clamp(2rem,4vw,3.2rem);line-height:1.12}.heading p,.page-hero p{color:var(--muted);font-size:1.04rem}.diagnostic-shell{display:grid;grid-template-columns:1fr .72fr;gap:26px;align-items:start}.question-panel,.result-panel{padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.question-panel h3{margin:0 0 7px;color:var(--navy);font-size:1.45rem}.result-panel h3{margin:0 0 7px;color:var(--white);font-size:1.45rem}.question-panel>p{color:var(--muted);margin-top:0}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.problem{min-height:92px;padding:16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);text-align:left;font:800 .95rem/1.35 Arial,sans-serif;cursor:pointer}.problem small{display:block;margin-top:5px;color:var(--muted);font-weight:500}.problem:hover,.problem.selected{border-color:var(--orange);background:#fff5ef}.result-panel{position:sticky;top:100px;background:var(--navy);color:#fff}.result-panel .kicker{color:#ff9a6b}.result-panel p{color:rgba(255,255,255,.84)}.result-status{display:inline-block;margin:8px 0 14px;padding:7px 11px;border-radius:999px;background:var(--orange);font-size:.75rem;font-weight:900}.result-list{display:grid;gap:10px;margin:18px 0;color:rgba(255,255,255,.9)}.result-list div{padding:12px 14px;border-radius:9px;background:rgba(255,255,255,.09)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{padding:25px;border-top:4px solid var(--orange);border-radius:0 0 14px 14px;background:#fff;box-shadow:0 10px 28px rgba(16,42,67,.08)}.step span{color:var(--orange);font-weight:900}.step h3{color:var(--navy);margin:7px 0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff}.card img{height:235px}.card-body{padding:23px}.card h3{color:var(--navy);margin:0 0 7px}.card p{color:var(--muted)}.text-link{color:var(--orange);font-weight:900}.page-hero{padding:72px 0;background:var(--sky);border-bottom:1px solid var(--line)}.back{display:inline-flex;margin-bottom:10px;padding:9px 13px;border-radius:999px;background:var(--orange);color:#fff;font-size:.82rem;font-weight:900}.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.split img{height:480px;border-radius:18px;box-shadow:var(--shadow)}.list{display:grid;gap:12px}.list article{padding:18px;border-left:4px solid var(--orange);background:var(--sky);border-radius:0 10px 10px 0}.list h3{margin:0 0 4px;color:var(--navy)}.list p{margin:0;color:var(--muted)}.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.compare article{padding:27px;border:1px solid var(--line);border-radius:15px;background:#fff}.compare h2{color:var(--navy);font-size:1.5rem}.compare ul{padding-left:19px;color:var(--muted)}.faq{display:grid;gap:12px;max-width:850px}.faq details{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}.faq summary{cursor:pointer;color:var(--navy);font-weight:900}.faq p{color:var(--muted)}.band{padding:48px 0;background:var(--orange);color:#fff}.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:25px}.band h2{margin:0;color:#fff;font-size:2rem}.band p{margin:4px 0 0}.band .button{background:#fff;color:var(--navy)}footer{padding:45px 0 24px;background:#0b2031;color:#c8d6de}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}.footer-grid strong{color:#fff}.footer-grid a{display:block;margin:5px 0}.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.socials span{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font-size:.78rem}.hours{padding:15px;border:1px solid rgba(255,255,255,.18);border-radius:10px}.legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);text-align:center;font-size:.76rem}
@media(max-width:860px){.menu-toggle{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border:0;border-radius:8px;background:var(--navy);color:#fff;font-weight:900}.nav{flex-wrap:wrap;padding:10px 0}.links{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:3px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}.links.open{display:flex}.links a{padding:10px;border-radius:7px}.links a.active{background:var(--sky)}.links .contact{width:100%;margin-top:4px}.diagnostic-shell,.split{grid-template-columns:1fr}.result-panel{position:static}.grid3,.steps,.compare{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.section{padding:66px 0}.hero{min-height:610px}.hero:after{background:linear-gradient(90deg,rgba(10,29,46,.95),rgba(10,29,46,.55))}.split img{height:370px}.band .wrap{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.wrap{width:calc(100% - 28px)}.brand small{display:none}.brand strong{font-size:.88rem}.logo{width:50px}.hero-copy{padding:55px 0}.hero h1{font-size:2.55rem}.hero-actions{display:grid}.hero-actions .button{width:100%}.problem-grid{grid-template-columns:1fr}.question-panel,.result-panel{padding:21px}.card img{height:220px}.split img{height:310px}.watermark{left:8px;bottom:8px;font-size:.55rem}.band h2{font-size:1.65rem}}
.reviews-section{background:var(--sky)}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.review-grid article{padding:25px;border:1px solid var(--line);border-radius:15px;background:#fff}.review-grid article>div{color:var(--orange);letter-spacing:.12em}.review-grid p{color:var(--navy);font:700 1.04rem/1.55 Georgia,serif}.review-grid strong{font-size:.82rem}@media(max-width:860px){.review-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.review-grid article{flex:0 0 min(350px,86vw);scroll-snap-align:start}}
.hero{min-height:0;display:grid;grid-template-columns:1.02fr .98fr;background:#fff}.hero>img{position:relative;inset:auto;grid-column:2;grid-row:1;height:620px}.hero:after{display:none}.hero .wrap{grid-column:1;grid-row:1;width:auto;margin:0;padding-left:max(40px,calc((100vw - 1160px)/2));padding-right:55px;display:grid;align-items:center}.hero-copy{padding:70px 0;color:var(--ink)}.hero h1{color:var(--navy)}.hero p{color:var(--muted)}.hero .button.live{background:var(--navy);color:#fff}.compare-gallery{background:var(--sand)}.compare-intro{max-width:760px;margin-bottom:35px;padding:25px 28px;border-left:6px solid var(--orange);background:#fff}.compare-intro h2{margin:5px 0;color:var(--navy);font-size:clamp(2rem,4vw,3rem)}.compare-intro p{margin:0;color:var(--muted);font-size:1.05rem}.comparison-list{display:grid;gap:30px}.comparison-list article{display:grid;grid-template-columns:300px 1fr;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.comparison-copy{padding:28px}.comparison-copy>span{color:var(--orange);font-size:.72rem;font-weight:900;letter-spacing:.1em}.comparison-copy h3{margin:8px 0;color:var(--navy);font-size:1.55rem}.comparison-copy p{color:var(--muted)}.compare-stage{--position:50%;position:relative;min-height:420px;overflow:hidden;background:#d8e2e7}.compare-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.compare-stage .after-image{clip-path:inset(0 calc(100% - var(--position)) 0 0)}.compare-stage input{position:absolute;inset:0;z-index:8;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.compare-line{position:absolute;z-index:5;top:0;bottom:0;left:var(--position);width:4px;transform:translateX(-50%);background:var(--orange);box-shadow:0 0 0 1px rgba(255,255,255,.8)}.compare-handle{position:absolute;z-index:6;left:var(--position);top:50%;width:58px;height:58px;display:grid;place-items:center;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;background:var(--orange);color:#fff;font:900 1.45rem Arial,sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.28)}.label-before,.label-after{position:absolute;z-index:4;top:16px;padding:7px 12px;border-radius:999px;color:#fff;font-size:.72rem;letter-spacing:.09em}.label-before{left:16px;background:var(--navy)}.label-after{right:16px;background:var(--orange)}
@media(max-width:860px){.hero{display:flex;flex-direction:column}.hero .wrap{order:1;width:min(100% - 40px,700px);padding:0}.hero>img{order:2;width:100%;height:340px}.hero-copy{padding:55px 0}.comparison-list article{grid-template-columns:1fr}.comparison-copy{padding:22px}.compare-stage{min-height:0;aspect-ratio:16/10}}
@media(max-width:560px){.hero .wrap{width:calc(100% - 28px)}.hero>img{height:280px}.compare-intro{padding:20px}.compare-handle{width:52px;height:52px}.label-before,.label-after{top:10px;font-size:.65rem}}

/* Paleta e interacción rediseñadas para este demo de roofing */
:root{--navy:#252b2f;--sky:#eef1f2;--blue:#505b61;--orange:#b83d35;--sand:#f6f5f2;--ink:#202629;--muted:#626c70;--line:#d9dfe1;--shadow:0 18px 50px rgba(32,38,41,.14)}
.watermark{background:rgba(37,43,47,.94)}
footer{background:#1b2023}
.problem{position:relative;padding-bottom:42px}
.problem em{position:absolute;left:16px;bottom:12px;padding:4px 8px;border-radius:5px;background:var(--orange);color:#fff;font-size:.65rem;font-style:normal;font-weight:900;letter-spacing:.08em}
.problem:hover,.problem.selected{background:#fff2f1}
.result-panel{scroll-margin-top:110px}
.result-panel.has-result{outline:5px solid rgba(184,61,53,.22)}
.result-list>strong{display:block;margin:8px 0 2px;color:#fff}
.demo-note{display:block;margin-top:10px;color:#d8dfe2;font-size:.7rem}
.clickable-card{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.clickable-card:hover,.clickable-card:focus{transform:translateY(-4px);box-shadow:var(--shadow);outline:3px solid rgba(184,61,53,.18)}
.project-jump{padding:54px 0;background:var(--orange);color:#fff}
.project-jump .wrap{display:grid;gap:25px}
.project-jump span{font-size:.75rem;font-weight:900;letter-spacing:.12em}
.project-jump h2{margin:6px 0 4px;color:#fff;font-size:clamp(1.8rem,4vw,2.8rem)}
.project-jump p{margin:0}
.project-jump-heading{max-width:780px}
.project-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.project-preview article{overflow:hidden;border-radius:12px;background:#fff;color:var(--navy);box-shadow:0 12px 28px rgba(32,38,41,.18)}
.project-preview article>div{display:grid;grid-template-columns:1fr 1fr}
.project-preview figure{position:relative;height:150px;margin:0;overflow:hidden}
.project-preview img{height:100%}
.project-preview b{position:absolute;left:7px;bottom:7px;padding:4px 7px;border-radius:4px;background:rgba(37,43,47,.9);color:#fff;font-size:.58rem;letter-spacing:.07em}
.project-preview figure+figure b{background:var(--orange)}
.project-preview article>strong{display:block;padding:13px 15px}
.project-jump .button{justify-self:start;padding:0 24px;background:#fff;color:var(--navy)}
.compare-intro{border-left-color:var(--orange)}
@media(max-width:860px){.project-preview{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.project-preview article{flex:0 0 min(360px,88vw);scroll-snap-align:start}.project-jump .button{width:100%}}

/* Identidad técnica: inspección, seguridad y decisiones rápidas */
body{background:#fff;font-family:Arial,sans-serif}
h1,h2,h3,.heading h2,.page-hero h1,.comparison-copy h3{font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-weight:900;letter-spacing:-.035em}
header{background:#202629;border-bottom:4px solid var(--orange)}
.brand strong,.brand small,.links>a{color:#fff}.brand small{opacity:.72}.logo{background:var(--orange);border-radius:3px}.links a:hover,.links a.active{color:#fff;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:7px}.menu-toggle{background:var(--orange);border-radius:3px}
.hero{background:#eef1f2}.hero .wrap{position:relative}.hero .wrap:before{content:"INSPECCIÓN • REPARACIÓN • REEMPLAZO";display:block;position:absolute;top:28px;left:max(40px,calc((100vw - 1160px)/2));color:var(--orange);font-size:.7rem;font-weight:900;letter-spacing:.13em}
.hero-copy{padding-top:95px}.hero h1{font-size:clamp(3rem,5.8vw,5.25rem);text-transform:uppercase}.hero>img{clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.button,.question-panel,.result-panel,.problem,.card,.review-grid article,.comparison-list article,.compare-intro,.back,.list article,.faq details{border-radius:3px}
.diagnostic-shell{grid-template-columns:1fr;gap:0;border:1px solid var(--line);box-shadow:var(--shadow)}.question-panel,.result-panel{border:0;box-shadow:none}.question-panel{padding:38px}.result-panel{padding:38px;border-left:7px solid var(--orange)}
.problem{min-height:104px;border-left:6px solid var(--line)}.problem:hover,.problem.selected{border-left-color:var(--orange)}
.project-jump{background:#202629;border-top:10px solid var(--orange)}.project-preview article{border-radius:3px}.project-preview figure+figure b{background:var(--orange)}
.compare-gallery{background:#e7ebed}.comparison-list article{border-left:8px solid var(--orange)}
.band{background:var(--orange)}
@media(max-width:860px){header{background:#202629}.links{background:#202629;border-color:#4a5358}.links a{color:#fff}.links a.active{background:#343c40}.hero .wrap:before{position:static;margin-top:34px}.hero-copy{padding-top:20px}.hero>img{clip-path:none}.diagnostic-shell{border:0;box-shadow:none}.result-panel{border-left:0;border-top:7px solid var(--orange)}.diagnostic-detail{grid-template-columns:1fr}}
.portfolio-return{position:fixed;left:14px;bottom:76px;z-index:2000;display:inline-flex;align-items:center;padding:12px 16px;border:2px solid #fff;border-radius:999px;background:#202629;color:#fff;box-shadow:0 10px 28px rgba(32,38,41,.3);font-size:.72rem;font-weight:900;letter-spacing:.045em}.portfolio-return:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
@media(max-width:560px){.portfolio-return{left:10px;bottom:67px;padding:10px 13px;font-size:.65rem}}

/* Sección de detalle: recomendación (izq) + cuestionario (der) */
#diagnostico-detalle{background:#fff}
.diagnostic-detail{display:grid;grid-template-columns:.85fr 1fr;gap:26px;align-items:start}
.diag-form-slot{min-height:340px}
.diag-slot-empty{display:grid;place-items:center;min-height:340px;padding:30px;border:2px dashed var(--line);border-radius:3px;background:var(--sand);color:var(--muted);text-align:center;font-weight:800}
/* Formulario de diagnóstico (fondo claro) */
.diag-form{margin-top:0;padding:30px;border:1px solid var(--line);border-radius:3px;background:#fff;box-shadow:var(--shadow)}
.diag-form .kicker{display:block;margin-bottom:8px;color:var(--orange)}
.diag-form-intro{margin:0 0 16px;color:var(--muted);font-size:.92rem}
.diag-situation{display:block;margin-bottom:14px;color:var(--navy);font-size:.9rem}
.diag-situation strong{color:var(--orange)}
.diag-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.diag-field-row:has(.diag-file),.diag-field-row:has(textarea){grid-template-columns:1fr}
.diag-field-row label{display:grid;gap:6px;color:var(--navy);font-size:.82rem;font-weight:800}
.diag-field-row input,.diag-field-row textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:500 .92rem/1.4 Arial,sans-serif}
.diag-field-row input::placeholder,.diag-field-row textarea::placeholder{color:var(--muted)}
.diag-field-row input:focus,.diag-field-row textarea:focus{outline:2px solid var(--orange);border-color:var(--orange);background:#fff}
.diag-field-row textarea{resize:vertical}
.diag-file input[type=file]{padding:8px;color:var(--muted)}
.diag-file input[type=file]::file-selector-button{padding:8px 14px;border:0;border-radius:5px;background:var(--orange);color:#fff;font-weight:900;cursor:pointer}
.diag-file small{color:var(--muted);font-weight:500}
.diag-submit{width:100%;margin-top:6px;background:var(--orange);color:#fff}
.diag-submit:hover{filter:brightness(1.08)}
.diag-material-link{display:inline-flex;width:100%;justify-content:center;margin-top:18px;background:var(--orange);color:#fff}
.diag-material-link:hover{filter:brightness(1.08)}
.diag-submit-hint{display:block;margin-top:8px;color:var(--muted);font-size:.72rem;text-align:center}
@media(max-width:860px){.diag-field-row{grid-template-columns:1fr}.diagnostic-detail{grid-template-columns:1fr}}