/*
Theme Name: Triio Nuevo
Theme URI: https://www.triio.cl
Author: Grupo Triio
Description: Tema de Grupo Triio. Obras reales con fotos del proceso y cotizador amigable.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: triio
*/

:root{--bg:#fff;--ink:#14181b;--mut:#5c6670;--soft:#f2f3f2;--line:#dcdfe0;--acc:#2f5d50;--dk:#14181b;--dkt:#f4f5f4}
@media(prefers-color-scheme:dark){:root{--bg:#101315;--ink:#f1f3f2;--mut:#9aa4aa;--soft:#1a1f22;--line:#2b3236;--acc:#6fae9a}}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid #6fae9a;outline-offset:2px}

/* Navegación */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) 28px 14px;color:#fff;backdrop-filter:blur(8px);background:rgba(20,24,27,.55)}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}
.brand{font-weight:800;font-size:20px;letter-spacing:.02em;text-decoration:none;color:#fff}
.brand img{display:block;height:38px;width:auto;max-width:none}
.nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 24px;list-style:none;padding:0}
.nav ul a{color:#fff;text-decoration:none;font-size:14px;font-weight:600}
.nav ul a:hover{text-decoration:underline}

/* Portada y bandas */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;color:#fff;padding:0 24px 8vh;overflow:hidden;background:linear-gradient(135deg,#6b7f73,#2c3b36 60%,#1b2421)}
.hero--obra{min-height:70svh}
.hero>img,.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after,.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.6))}
.hero-in,.band-in{position:relative;z-index:2}
h1{font-size:clamp(40px,7vw,84px);font-weight:800;line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.08}
.h1s{font-size:clamp(34px,5vw,60px)}
.sub{margin:16px auto 28px;font-size:18px;font-weight:300;max-width:520px}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;border:0;cursor:pointer;font:600 15px Manrope,system-ui,sans-serif;padding:14px 40px;border-radius:4px;text-decoration:none;background:#fff;color:#14181b;min-width:200px;text-align:center}
.btn.o{background:rgba(20,24,27,.45);color:#fff;border:1px solid rgba(255,255,255,.8)}
.btn.a{background:var(--acc);color:#fff}
.band{position:relative;min-height:70svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;overflow:hidden;background:linear-gradient(135deg,#8a8f7d,#4d5648 55%,#262c25)}
.band--simple{min-height:0;padding:12vh 24px;background:var(--dk)}
.band--simple::after{display:none}

/* Secciones */
.pad{padding:12vh 24px;max-width:1200px;margin:0 auto}
.pad--top{padding-top:calc(12vh + 40px)}
.pad--narrow{max-width:820px}
.lead{color:var(--mut);max-width:560px;margin-top:12px;font-size:17px}
.more{margin-top:32px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.chip{border:1px solid var(--line);background:none;color:var(--ink);padding:8px 18px;border-radius:99px;font:600 14px Manrope,system-ui,sans-serif;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:28px}
.card{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#8a8f7d,#4d5648 55%,#262c25)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.62))}
.card-txt{position:relative;z-index:2;padding:20px;display:flex;flex-direction:column}
.card-txt b{font-size:20px}
.card-txt span{font-size:13px;opacity:.88}

/* Ficha de obra */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 28px;margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.ficha dt{font-size:13px;color:var(--mut)}
.ficha dd{font-weight:600;margin:2px 0 0}
.entry{font-size:17px;line-height:1.7}
.entry p,.entry ul,.entry ol{margin:0 0 1.1em}
.entry ul,.entry ol{padding-left:1.3em}
.entry a{color:var(--acc)}
.entry img{border-radius:4px}
.pn{display:flex;justify-content:space-between;gap:16px;padding-top:0;padding-bottom:8vh;font-weight:600}
.pn a{text-decoration:none}
.item{margin-bottom:32px}

/* Cotizador */
.cot{background:var(--soft)}
.q{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:90px 24px 40px}
.q .lead{margin-left:auto;margin-right:auto}
.opts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px;max-width:760px}
.opt{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:18px 26px;font:600 16px Manrope,system-ui,sans-serif;cursor:pointer;min-width:170px}
.opt small{display:block;font-weight:400;color:var(--mut);font-size:13px;margin-top:4px}
.opt[aria-pressed=true]{border-color:var(--acc);background:var(--acc);color:#fff}
.opt[aria-pressed=true] small{color:#dfeee8}
.prog{height:3px;background:var(--line);width:min(420px,80%);margin-bottom:36px}
.prog i{display:block;height:100%;background:var(--acc);transition:width .3s}
.back{margin-top:28px;background:none;border:0;color:var(--mut);cursor:pointer;font:600 14px Manrope,system-ui,sans-serif}
.big{font-size:clamp(38px,6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:20px 0 4px}
.bar{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,#b9d3c9,#2f5d50);width:min(460px,90%);margin:26px auto 6px}
.bar i{position:absolute;top:-6px;width:4px;height:22px;background:var(--ink);border-radius:2px}
.bl{display:flex;justify-content:space-between;width:min(460px,90%);font-size:13px;color:var(--mut)}
.note{font-size:13px;color:var(--mut);max-width:480px;margin-top:22px}
.frm{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px;max-width:760px}
.frm input{padding:14px 16px;border:1.5px solid var(--line);border-radius:6px;font:16px Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-width:220px}
.msg{margin-top:14px;font-weight:600;max-width:480px}
.msg.err{color:#b3261e}
@media(prefers-color-scheme:dark){.msg.err{color:#f2b8b5}}
.wa{margin-top:12px;font-size:14px;color:var(--mut)}

/* Pie */
.foot{background:var(--dk);color:var(--dkt);padding:60px 24px;text-align:center;font-size:14px}
.foot a{color:var(--dkt)}
.foot-name{font-size:22px;font-weight:800;margin-bottom:10px}
.foot-social{margin-top:22px}
.foot .ig{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid rgba(244,245,244,.45);border-radius:50%;color:var(--dkt);text-decoration:none;transition:background .2s,border-color .2s}
.foot .ig:hover,.foot .ig:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
.foot-logo{display:block;width:160px;height:auto;margin:0 auto 22px}

@media(max-width:600px){
.nav{padding-left:16px;padding-right:16px;gap:10px}
.brand img{height:30px;width:26px;object-fit:cover;object-position:left center}
.nav ul{gap:0 14px;flex-wrap:nowrap}
.nav ul a{font-size:13px;white-space:nowrap;display:inline-block;padding:6px 0}
.btn{min-width:0;width:100%}
.q{padding-top:104px}
.hero{padding-bottom:6vh}
}
@media(max-width:380px){.nav{gap:6px;padding-left:12px;padding-right:12px}.brand img{height:26px;width:23px}.nav ul{gap:0 10px}.nav ul a{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:340px){.nav ul{flex-wrap:wrap;gap:0 8px;justify-content:flex-end}.nav ul a{font-size:11.5px}}
.entry a{overflow-wrap:anywhere}