/* CLIMA Proyectos — se apoya en style.css (misma tipografía, colores y componentes) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* Selector Hogar / Proyectos (también se usa en la página de casas) */
.line-switch{position:relative;margin-left:38px;display:flex;gap:2px;padding:4px;border:1px solid #ffffff40;border-radius:40px;background:#10191866;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.line-switch a{color:#ffffffc8;text-decoration:none;font-size:13px;letter-spacing:.2px;padding:9px 18px;border-radius:30px;transition:background .3s,color .3s;white-space:nowrap}
.line-switch a:hover{color:#fff}
.line-switch a.active{background:var(--lime);color:var(--ink)}
body.after-journey .line-switch{background:#ffffff10}

/* Escena y atmósfera */
.pro #scene{background:linear-gradient(180deg,#3d5873 0%,#c79a74 62%,#a98260 100%)}
#proAtmosphere{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s}
#proAtmosphere>div{position:absolute;inset:0}
.pro .warm-atmosphere{background:radial-gradient(ellipse at 78% 30%,#ffb45e30,transparent 60%),linear-gradient(0deg,#ce792118,transparent 55%);opacity:calc(1 - var(--film-cooling,0))}
.pro .cool-atmosphere{background:linear-gradient(110deg,transparent 30%,#9fc3d214 70%,#cfe4ec1c);opacity:var(--film-cooling,0)}
.pro .shade{background:linear-gradient(90deg,rgba(9,17,20,.86),rgba(9,17,20,.55) 34%,rgba(9,17,20,.12) 58%,transparent 74%),linear-gradient(0deg,rgba(9,17,20,.62),transparent 34%,transparent 78%,rgba(9,17,20,.45))}
.pro .chapter .copy h1,.pro .chapter .copy h2{text-shadow:0 2px 28px rgba(5,12,14,.45)}
.pro .chapter .copy p{color:#f4f1ea;text-shadow:0 1px 14px rgba(5,12,14,.55)}
.pro .hero .eyebrow{color:#e6f5d2}
.pro .hero-bottom{text-shadow:0 1px 10px rgba(5,12,14,.6)}
.pro-loading{position:fixed;inset:0;z-index:20;display:grid;place-content:center;gap:14px;justify-items:center;background:#182221;color:#d6edb5;font-size:11px;letter-spacing:3px;transition:opacity .8s,visibility .8s}
.pro-loading i{width:120px;height:1px;background:#ffffff25;position:relative;overflow:hidden}
.pro-loading i:after{content:'';position:absolute;inset:0;width:40%;background:var(--lime);animation:proload 1.1s ease-in-out infinite}
@keyframes proload{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.pro-ready .pro-loading{opacity:0;visibility:hidden}

/* Botones */
.pro-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-lime,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:40px;padding:15px 24px;font-size:14px;text-decoration:none;transition:transform .2s,background .2s,color .2s;border:0;cursor:pointer;font-family:inherit}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#e5facb;transform:translateY(-1px)}
.btn-ghost{border:1px solid #ffffff70;color:#fff;background:#ffffff0a;backdrop-filter:blur(10px)}
.btn-ghost:hover{background:#ffffff1c}
.btn-lime.wide{width:100%;padding:17px 24px;font-size:15px}

/* Capítulos */
.pro .hero h1{max-width:760px}
.pro .copy p{max-width:390px}
.finish-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:460px}
.finish{display:flex;align-items:center;gap:9px;border:1px solid #ffffff45;background:#17211f80;backdrop-filter:blur(10px);color:#fff;border-radius:30px;padding:10px 16px;font-size:13px;transition:background .25s,color .25s,border-color .25s}
.finish i{width:12px;height:12px;border-radius:50%;border:1px solid #ffffff55}
.finish i{width:14px;height:14px}
.finish[data-finish=azul] i{background:linear-gradient(135deg,#6fa3cf,#24577f)}
.finish[data-finish=negro] i{background:linear-gradient(135deg,#4a5256,#0f1213)}
.finish[data-finish=gris] i{background:linear-gradient(135deg,#a9b3b7,#59656a)}
.finish[data-finish=espejado] i{background:linear-gradient(135deg,#ffffff,#8a969c 55%,#e8edef)}
.finish.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.finish-note{display:block;margin-top:16px;font-size:12px;line-height:1.6;color:#ffffffb0;max-width:380px}
.spec-rows{display:grid;gap:0;margin-top:26px;max-width:430px;border-top:1px solid #ffffff30}
.spec-rows div{display:grid;grid-template-columns:62px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid #ffffff30;align-items:baseline}
.spec-rows b{font:400 26px 'Manrope',sans-serif;letter-spacing:-1px;color:var(--lime)}
.spec-rows span{font-size:14px;line-height:1.55;color:#eeeae2}

/* Panel de estado (reutiliza .climate) */
.pro-panel .panel-main{font:400 30px/1.15 'Manrope',sans-serif;letter-spacing:-1.2px;margin:12px 0 14px}
.pro-panel .thermal-track i{width:90%}
.pro-panel.cool{background:#202d31e8;border-color:#c3cdcd44}
.pro-panel.cool .thermal-track i{background:#b8cbc7!important}

/* Líneas */
.line-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #222b29}
.line-grid article{padding:34px 30px 40px 0;border-bottom:1px solid #dce0da}
.line-grid article:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid #dce0da}
.swatch{height:120px;border-radius:3px;margin-bottom:24px;position:relative;overflow:hidden;background:linear-gradient(160deg,#7e98a3,#c9d6da 55%,#8aa1aa)}
.swatch:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 23%,#1822211f 23% 24%)}
.sw-neutro{background:linear-gradient(160deg,#a9c0c7,#dbe6e9 50%,#a3b9c0)}
.sw-espejado{background:linear-gradient(160deg,#f2f4f5,#9aa6ab 45%,#e9edef 70%,#a7b2b7)}
.sw-nano{background:linear-gradient(160deg,#6f93a3,#b9d0d9 52%,#668b9b)}
.sw-seguridad{background:linear-gradient(160deg,#bccbcf,#e4ecee 50%,#b7c6ca)}
.sw-seguridad:before{content:'';position:absolute;inset:0;background:conic-gradient(from 210deg at 62% 45%,transparent 0 8%,#18222126 8% 9%,transparent 9% 31%,#18222126 31% 32%,transparent 32% 58%,#18222126 58% 59%,transparent 59% 83%,#18222126 83% 84%,transparent 84%)}
.sw-exterior{background:linear-gradient(160deg,#5f7d8a,#a9bec6 50%,#59727d)}
.sw-uv{background:linear-gradient(160deg,#d8e2e4,#f3f6f6 50%,#d2dcdf)}
.sw-uv:before{content:'UV';position:absolute;left:16px;bottom:12px;font:500 12px monospace;letter-spacing:2px;color:#18222170}
.line-grid article>span{font:12px monospace;letter-spacing:1px;color:#78807f}
.line-grid h3{font-weight:400;font-size:28px;letter-spacing:-1px;margin:14px 0 10px;color:#141918}
.line-grid p{color:#6d7676;font-size:15px;line-height:1.7;margin:0}

/* Para quién */
.pro-sectors{position:relative;z-index:7;background:#182221;color:#fff;padding:130px 8%;display:grid;grid-template-columns:.9fr 1.1fr;gap:9%;align-items:start}
.pro-sectors .eyebrow{color:#bbc7b2;font-size:12px}
.pro-sectors h2{font-size:clamp(40px,4.3vw,65px);letter-spacing:-3px;margin-top:24px}
.pro-sectors .section-heading>p{color:#c4cdbe}
.sector-list{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff22}
.sector-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:24px 0;border-bottom:1px solid #ffffff22;align-items:baseline}
.sector-list b{font:400 22px/1.3 'Manrope',sans-serif;letter-spacing:-.6px}
.sector-list span{color:#c4cdbe;font-size:15px;line-height:1.6}

/* Proceso */
.process-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.process-grid li{border-top:1px solid #222b29;padding-top:24px}
.process-grid span{font:12px monospace;letter-spacing:1px;color:#78807f}
.process-grid h3{font-weight:400;font-size:23px;letter-spacing:-.8px;margin:16px 0 10px;color:#141918}
.process-grid p{color:#6d7676;font-size:14.5px;line-height:1.7;margin:0}

/* Respaldo */
.pro-trust{position:relative;z-index:7;background:#f1f2eb;color:#17211f;padding:20px 8% 130px}
.trust-head .eyebrow{color:#5a695c;font-size:12px}
.trust-head h2{font-size:clamp(40px,4.3vw,65px);letter-spacing:-3px;margin:24px 0 60px}
.pro-trust em{color:#687b57}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #17211f30}
.trust-grid div{padding:28px 28px 32px 0;border-bottom:1px solid #17211f30;display:grid;gap:10px}
.trust-grid div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid #17211f20}
.trust-grid b{font:400 22px 'Manrope',sans-serif;letter-spacing:-.6px}
.trust-grid b:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#7c9b5f;margin-right:12px;vertical-align:middle}
.trust-grid span{color:#596758;font-size:15px;line-height:1.7}

/* Cotización */
.pro-quote{position:relative;z-index:7;display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;background:#182221;color:#fff;padding:120px 8%;scroll-margin-top:60px}
.quote-copy .eyebrow{font-size:11px;letter-spacing:1.8px;color:#bbc7b2}
.quote-copy h2{font-size:clamp(40px,4vw,64px);letter-spacing:-3px;margin:24px 0}
.quote-copy>p{font-size:16px;line-height:1.85;color:#cad1c4;max-width:380px}
.contact-brand small{font:400 14px 'DM Sans';letter-spacing:0;color:#bbc7b2;margin-left:6px}
.quote-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;color:#c4cdbe;font-size:14px}
.quote-points li:before{content:'—';color:var(--lime);margin-right:10px}
.quote-form{background:#f5f5f1;color:#141918;border-radius:6px;padding:38px;display:grid;gap:18px;align-self:start}
.form-row{display:grid;gap:8px;font-size:13px;color:#4d5655;border:0;margin:0;padding:0}
.form-row.two{grid-template-columns:1fr 1fr;gap:16px}
.form-row.two>label{display:grid;gap:8px}
.quote-form input:not([type=checkbox]),.quote-form select,.quote-form textarea{width:100%;font:15px 'DM Sans',sans-serif;color:#141918;background:#fff;border:1px solid #cdd3cc;border-radius:4px;padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.quote-form textarea{resize:vertical;min-height:84px}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#182221;box-shadow:0 0 0 3px #d6edb5}
.interest{display:flex;flex-wrap:wrap;gap:8px}
.interest legend{width:100%;margin-bottom:10px;font-size:13px;color:#4d5655}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid #cdd3cc;border-radius:30px;padding:8px 14px;font-size:13px;background:#fff;transition:background .2s,border-color .2s}
.chip input:checked+span{background:#182221;color:#fff;border-color:#182221}
.chip input:focus-visible+span{outline:3px solid var(--lime);outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:#2b3332;cursor:pointer}
.check input{width:18px;height:18px;accent-color:#182221}
.form-error{margin:0;color:#a23b1d;font-size:13px}
.form-note{color:#7a8281;font-size:12px;line-height:1.6}

.site-footer span a{color:#e6ebdf}

/* Celular */
@media(max-width:700px){
 .line-switch{position:static;transform:none;margin-left:auto;margin-right:10px;padding:3px}
 .line-switch a{padding:8px 12px;font-size:12px}
 header .header-links{display:none!important}
 .pro .shade{background:linear-gradient(180deg,#14211be6 0%,#14211b90 26%,#14211b08 54%,#14211b14 70%,#14211b99 100%)}
 .pro .copy p{max-width:310px}
 .pro-cta{margin-top:20px}
 .btn-lime,.btn-ghost{padding:13px 18px;font-size:13px}
 .finish-picker{gap:6px;margin-top:14px}
 .finish{padding:8px 12px;font-size:12px}
 .finish-note{font-size:11px;margin-top:10px}
 .spec-rows{margin-top:14px}
 .spec-rows div{grid-template-columns:50px 1fr;gap:12px;padding:10px 0}
 .spec-rows b{font-size:21px}
 .spec-rows span{font-size:12.5px;line-height:1.45}
 .pro-panel .panel-main{font-size:19px;margin:4px 0 6px;grid-column:1/-1}
 .line-grid{grid-template-columns:1fr}
 .line-grid article,.line-grid article:not(:nth-child(3n+1)){padding:28px 0 32px;border-left:0}
 .swatch{height:96px}
 .pro-sectors{grid-template-columns:1fr;padding:80px 24px;gap:30px}
 .sector-list li{grid-template-columns:1fr;gap:6px;padding:20px 0}
 .process-grid{grid-template-columns:1fr;gap:22px}
 .pro-trust{padding:10px 24px 80px}
 .trust-head h2{margin-bottom:36px}
 .trust-grid{grid-template-columns:1fr}
 .trust-grid div,.trust-grid div:not(:nth-child(3n+1)){padding:22px 0;border-left:0}
 .pro-quote{grid-template-columns:1fr;padding:70px 20px;gap:36px}
 .quote-form{padding:24px 18px}
 .form-row.two{grid-template-columns:1fr}
}
@media(max-width:380px){.line-switch a{padding:7px 9px}.brand{font-size:28px!important}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.pro-loading i:after{animation:none}}

/* v2 — etiquetas de rayos y vista térmica */
.ray-labels{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s}
.ray-labels span{position:absolute;left:0;top:0;margin:-15px 0 0 14px;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.1px;color:#fff;background:#17211fd0;border:1px solid #ffffff2e;padding:7px 12px;border-radius:30px;white-space:nowrap;backdrop-filter:blur(8px)}
.ray-labels i{width:8px;height:8px;border-radius:50%;flex:none}
.ray-labels [data-l=inc] i{background:#ffae5e;box-shadow:0 0 8px #ffae5e}
.ray-labels [data-l=tsr] i{background:#fff1d8;box-shadow:0 0 8px #fff1d8}
.ray-labels [data-l=uv] i{background:#a37bff;box-shadow:0 0 8px #a37bff}
.pro-panel.thermal .thermal-track{height:4px;border-radius:2px}
.pro-panel.thermal .thermal-track i{background:linear-gradient(90deg,#3b1060,#d8203f 40%,#ff7a14 72%,#ffd84d)!important}
.pro-panel.thermal.cool .thermal-track i{background:linear-gradient(90deg,#0f3a6b,#5bc4e6 60%,#ff7a14)!important}
@media(max-width:700px){.ray-labels span{font-size:9.5px;padding:5px 9px;margin:58px 0 0 8px}.ray-labels [data-l=uv]{margin-top:100px}}

/* Etiquetas de colocación: Con film / Sin film */
.film-tags{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s}
.film-tags span{position:absolute;left:0;top:0;translate:0 -50%;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:30px;font-size:12px;letter-spacing:.3px;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .3s}
.film-tags [data-t=sin]{background:#17211fb8;color:#fff;border:1px solid #ffffff40}
.film-tags [data-t=con]{background:var(--lime);color:var(--ink)}
.film-tags span:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
@media(max-width:700px){.film-tags span{font-size:10px;padding:5px 10px;translate:0 -50%}
 .pro .shade{background:linear-gradient(180deg,rgba(9,17,20,.9) 0%,rgba(9,17,20,.62) 30%,rgba(9,17,20,.08) 56%,rgba(9,17,20,.15) 72%,rgba(9,17,20,.7) 100%)}}

/* Colores por línea: muestras que se pueden tocar */
.finish[data-finish=neutro] i{background:linear-gradient(135deg,#f3f7f8,#bccdd2)}
.swatch{transition:background .45s ease}
.line-colors-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.line-colors{display:flex;gap:8px;flex-wrap:wrap}
.line-colors button{width:34px;height:34px;border-radius:50%;border:1px solid #cfd5d0;background:#fff;padding:4px;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.line-colors button i{width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px #18222120}
.line-colors button:hover{transform:scale(1.06)}
.line-colors button.active{border:2px solid #182221;padding:3px}
.line-colors button:focus-visible{outline:3px solid #607653;outline-offset:2px}
.line-color-name{font:12px monospace;letter-spacing:.6px;color:#4f5957}
.line-colors-note{margin:26px 0 0;font-size:13px;color:#78807f}
@media(max-width:700px){.line-colors button{width:40px;height:40px}}

/* v16 · celular en vertical: líneas como tarjetas que se deslizan */
@media (max-width:700px) and (orientation:portrait){
 .line-grid{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:4px 22px 6px;border-top:0!important;scrollbar-width:none}
 .line-grid::-webkit-scrollbar{display:none}
 .line-grid article,.line-grid article:not(:nth-child(3n+1)){flex:0 0 84%;scroll-snap-align:center;background:#fff;border:1px solid #dfe3dd!important;border-radius:22px;padding:16px 18px 20px!important}
 .line-grid .swatch{height:120px;border-radius:14px;margin-bottom:16px}
 .line-grid h3{font-size:23px!important;margin:8px 0 6px!important}
 .line-grid p{font-size:14px!important;line-height:1.55!important}
 .line-colors-wrap{margin-top:14px}
 .line-colors-note{text-align:center;font-size:12px}
 .pro-sectors,.pro-trust{padding:60px 22px!important}
 .pro-sectors h2,.pro-trust h2{font-size:clamp(32px,9vw,38px)!important;letter-spacing:-1.6px!important}
 .process-grid{gap:0!important}
 .process-grid li{padding:16px 0 18px!important;border-top:1px solid #222b2930!important}
 .process-grid h3{font-size:20px!important;margin:8px 0 4px!important}
 .pro-quote{padding:56px 22px 110px!important}
 .ray-labels span{margin:-14px 0 0 10px!important}
 .ray-labels [data-l=uv]{margin-top:14px!important}
}
@media (max-width:700px) and (orientation:portrait){
 .spec-rows{margin-top:12px}
 .spec-rows div{grid-template-columns:48px 1fr;gap:12px;padding:9px 0}
 .spec-rows b{font-size:21px}
 .spec-rows span{font-size:13px;line-height:1.4}
 #rendimiento .finish-note{display:none}
 .finish-picker{margin-top:14px}
 .finish{padding:8px 13px}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:700px){
 .chapter:not(.hero) h2{font-size:27px!important}
 .finish-note{display:none}
}

/* Rayos UV · TSR · VLT: mismos colores en el 3D, las etiquetas y la leyenda */
:root{--ray-sun:#ffd98f;--ray-tsr:#ff9a3d;--ray-vlt:#f4fbff;--ray-uv:#a37bff}
.ray-labels span{gap:7px;letter-spacing:.4px;font-size:12px;padding:7px 13px 7px 11px}
.ray-labels span b{font-weight:700;letter-spacing:.8px}
.ray-labels [data-l=inc] i{background:var(--ray-sun);box-shadow:0 0 10px var(--ray-sun)}
.ray-labels [data-l=tsr]{border-color:#ff9a3d66}.ray-labels [data-l=tsr] i,.ray-labels [data-l=tsr] b{color:var(--ray-tsr)}.ray-labels [data-l=tsr] i{background:var(--ray-tsr);box-shadow:0 0 10px var(--ray-tsr)}
.ray-labels [data-l=vlt]{border-color:#ffffff66}.ray-labels [data-l=vlt] i{background:var(--ray-vlt);box-shadow:0 0 10px var(--ray-vlt)}
.ray-labels [data-l=uv]{border-color:#a37bff77}.ray-labels [data-l=uv] b{color:#c5a8ff}.ray-labels [data-l=uv] i{background:var(--ray-uv);box-shadow:0 0 10px var(--ray-uv)}
.rays-intro{margin:6px 0 0!important;font-size:15px}
.rays-legend b{display:flex;align-items:center;gap:10px}
.rays-legend b i{width:10px;height:10px;border-radius:50%;flex:none}
.rays-legend [data-k=tsr] b{color:var(--ray-tsr)}.rays-legend [data-k=tsr] i{background:var(--ray-tsr);box-shadow:0 0 10px var(--ray-tsr)}
.rays-legend [data-k=vlt] b{color:#fff}.rays-legend [data-k=vlt] i{background:var(--ray-vlt);box-shadow:0 0 10px #fff}
.rays-legend [data-k=uv] b{color:#c5a8ff}.rays-legend [data-k=uv] i{background:var(--ray-uv);box-shadow:0 0 10px var(--ray-uv)}
.rays-legend.spec-rows div{grid-template-columns:88px 1fr}
@media (max-width:700px) and (orientation:portrait){
 .rays-intro{font-size:13px!important;margin:2px 0 0!important}
 .rays-legend.spec-rows div{grid-template-columns:70px 1fr}
 .ray-labels span{font-size:10px!important;padding:5px 9px 5px 8px!important}
}
@media (max-width:700px){
 .ray-labels span,.ray-labels [data-l=uv]{margin:-12px 0 0 8px!important}
 .ray-labels [data-l=inc]{display:none!important}
}