/* ============================================================
   Madera Anzoátegui — Estudio de mercado
   ============================================================ */

:root{
  --bg:#f6f2ea;
  --surface:#fffdf8;
  --surface-2:#fbf6ec;
  --ink:#2b2118;
  --ink-soft:#544639;
  --muted:#7d6f61;
  --line:#e4d9c6;
  --wood-900:#3f2a17;
  --wood-800:#59391d;
  --wood-700:#7a5026;
  --wood-600:#96662f;
  --wood-500:#b07c3f;
  --amber:#d9a05b;
  --sand:#efdfc4;
  --accent:#b4552d;
  --accent-soft:#f3ded2;
  --green:#3e7c4f;
  --green-soft:#e2efe4;
  --red:#a83a2e;
  --red-soft:#f6e0dc;
  --blue:#3a627c;
  --blue-soft:#e0ecf3;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(63,42,23,.06), 0 10px 30px -18px rgba(63,42,23,.35);
  --shadow-lg:0 2px 4px rgba(63,42,23,.08), 0 24px 50px -24px rgba(63,42,23,.4);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,canvas{max-width:100%}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em; color:var(--wood-900)}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem); letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,3vw,2.1rem); letter-spacing:-.015em}
h3{font-size:1.12rem; margin-top:.2em}
h4{font-size:1rem}
p{margin:.35em 0 .9em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:.4em 0 .6em; padding-left:1.15em}
li{margin:.28em 0}
strong{color:var(--wood-800)}

.wrap{width:min(1180px,100% - 2.4rem); margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.hidden{display:none !important}
.narrow{max-width:62ch}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; gap:1.2rem; padding:.55rem 0}
.brand{display:flex; align-items:center; gap:.6rem; flex:0 0 auto}
.brand-mark{display:grid; place-items:center}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-size:.98rem; color:var(--wood-900)}
.brand-text small{color:var(--muted); font-size:.74rem}
.nav{
  display:flex; gap:.2rem; overflow-x:auto; margin-left:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  white-space:nowrap; padding:.34rem .62rem; border-radius:999px;
  color:var(--ink-soft); font-size:.82rem; font-weight:600;
  border:1px solid transparent;
}
.nav a:hover{background:var(--sand); text-decoration:none; color:var(--wood-900)}
.nav a.active{background:var(--wood-800); color:#fff}

/* ---------- Sections ---------- */
.section{padding:3.4rem 0}
.section.alt{background:var(--surface-2); border-block:1px solid var(--line)}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:800; color:var(--wood-600); margin:0 0 .5rem;
}
.lede{font-size:1.06rem; color:var(--ink-soft); max-width:75ch}
.hero{padding-top:3.8rem}
.hero .lede{font-size:1.12rem}

/* ---------- Cards & grids ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.15rem 1.25rem;
  box-shadow:var(--shadow);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin:1.1rem 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:1.1rem 0}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ---------- KPIs ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin:1.6rem 0;
}
@media (max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi{
  background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:.95rem 1rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.15rem;
}
.kpi-num{
  font-size:1.55rem; font-weight:800; color:var(--wood-800);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kpi-label{font-size:.83rem; color:var(--muted); line-height:1.45}

/* ---------- Lists ---------- */
.checklist{list-style:none; padding-left:0; margin:.4em 0}
.checklist li{position:relative; padding-left:1.5em; margin:.34em 0}
.checklist li::before{
  content:""; position:absolute; left:.15em; top:.52em;
  width:.55em; height:.55em; border-radius:2px;
  background:var(--wood-500); box-shadow:0 0 0 3px var(--sand);
}
.tag{
  display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--wood-700); background:var(--sand);
  border-radius:999px; padding:.18rem .62rem; margin-top:.2em;
}

/* ---------- Product cards ---------- */
.prod{position:relative; overflow:hidden; padding-top:1.5rem}
.prod-bar{position:absolute; top:0; left:0; right:0; height:7px}
.b1{background:linear-gradient(90deg,#b07c3f,#d9a05b)}
.b2{background:linear-gradient(90deg,#96662f,#c68b4c)}
.b3{background:linear-gradient(90deg,#7a5026,#a97439)}
.highlight{border-left:5px solid var(--amber); background:linear-gradient(180deg,#fffdf8,#fdf7ea)}

/* ---------- Chain ---------- */
.chain{
  display:flex; align-items:stretch; gap:.5rem; margin:1rem 0 1.4rem;
  overflow-x:auto; padding-bottom:.4rem;
}
.chain-node{
  flex:1 1 0; min-width:210px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:.9rem 1rem; box-shadow:var(--shadow);
}
.chain-node small{display:block; color:var(--muted); font-size:.8rem; margin-top:.25rem; line-height:1.45}
.chain-ico{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--wood-800); color:#fff; font-weight:800; font-size:.8rem; margin-bottom:.4rem;
}
.chain-arrow{
  align-self:center; color:var(--wood-500); font-size:1.5rem; font-weight:800; flex:0 0 auto;
}
@media (max-width:800px){
  .chain{flex-direction:column}
  .chain-arrow{transform:rotate(90deg); text-align:center}
}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:620px}
thead th{
  background:var(--wood-800); color:#f7efe2; text-align:left;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.6rem .7rem; white-space:nowrap;
}
tbody td{padding:.58rem .7rem; border-top:1px solid var(--line); vertical-align:top}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:hover{background:var(--sand)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.badge-price{font-weight:800; color:var(--wood-800)}
.badge-pt{font-weight:700; color:var(--accent)}
.pri{display:inline-block; font-size:.72rem; font-weight:800; border-radius:999px; padding:.1rem .55rem}
.pri.max{background:var(--green-soft); color:var(--green)}
.pri.med{background:#fdefd7; color:#8a5a14}
.pri.low{background:#ece7df; color:var(--muted)}

/* ---------- Stats ---------- */
.stat-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; margin:1.1rem 0;
}
@media (max-width:980px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stat-row{grid-template-columns:1fr}}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .9rem; box-shadow:var(--shadow);
}
.stat strong{display:block; font-size:1.25rem; color:var(--wood-800); letter-spacing:-.01em}
.stat span{font-size:.78rem; color:var(--muted); line-height:1.4; display:block; margin-top:.15rem}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin:1.2rem 0 .9rem}
.tab{
  font:inherit; font-size:.86rem; font-weight:700; cursor:pointer;
  background:var(--surface); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.42rem 1rem;
  transition:all .15s ease;
}
.tab:hover{border-color:var(--wood-500); color:var(--wood-800)}
.tab.active{background:var(--wood-800); border-color:var(--wood-800); color:#fff}
.tab-panel{display:none; animation:fade .25s ease}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---------- Charts ---------- */
.chart-card{padding-bottom:1rem}
.chart-box{position:relative; height:320px; margin-top:.4rem}
.chart-box.tall{height:380px}

/* ---------- Formula ---------- */
.formula{
  background:var(--wood-900); color:#f7efe2; border-radius:var(--radius);
  padding:1rem 1.3rem; margin:1.2rem 0; box-shadow:var(--shadow-lg);
}
.formula span{font-size:1.15rem; font-weight:800; letter-spacing:.01em}
.formula small{display:block; color:#d9c9ad; margin-top:.3rem; font-size:.82rem}

/* ---------- Notes & callouts ---------- */
.note{
  font-size:.83rem; color:var(--muted); border-left:3px solid var(--amber);
  padding:.35rem 0 .35rem .7rem; margin:.8rem 0;
}
.callout h3{margin-bottom:.3em}
.callout p{margin-bottom:.2em; font-size:.92rem}

/* ---------- DAFO ---------- */
.dafo{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0}
@media (max-width:760px){.dafo{grid-template-columns:1fr}}
.dafo-card{border-radius:var(--radius); padding:1rem 1.15rem; border:1px solid var(--line); box-shadow:var(--shadow)}
.dafo-card h4{display:flex; align-items:center; gap:.5rem; margin-bottom:.4em}
.dafo-card h4::before{content:""; width:.6rem; height:.6rem; border-radius:2px}
.dafo-card ul{margin:0; padding-left:1.1em}
.dafo-card li{margin:.24em 0; font-size:.9rem}
.dafo-card.f{background:var(--green-soft)} .dafo-card.f h4::before{background:var(--green)}
.dafo-card.d{background:var(--red-soft)}   .dafo-card.d h4::before{background:var(--red)}
.dafo-card.o{background:var(--blue-soft)}  .dafo-card.o h4::before{background:var(--blue)}
.dafo-card.a{background:#fdf3da}           .dafo-card.a h4::before{background:#b8860b}

/* ---------- Calculator ---------- */
.calc{display:grid; grid-template-columns:420px 1fr; gap:1.1rem; align-items:start; margin-top:1.3rem}
@media (max-width:980px){.calc{grid-template-columns:1fr}}
.calc-inputs label{
  display:block; font-size:.85rem; font-weight:700; color:var(--wood-800);
  margin:.85rem 0 .3rem;
}
.calc-inputs select,.calc-inputs input[type=number]{
  width:100%; font:inherit; font-size:.9rem; padding:.5rem .6rem;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink);
}
.calc-inputs input[type=range]{
  width:100%; accent-color:var(--wood-600); margin:.15rem 0 .2rem;
}
.calc-inputs .val{float:right; color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums}
.field-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; margin-top:.4rem}
.custom-dims{margin-top:.3rem; padding:.6rem; background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius-sm)}
.calc-results{display:grid; gap:1.1rem}
.result-main{border-top:5px solid var(--wood-600)}
.result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:.6rem 0}
@media (max-width:640px){.result-grid{grid-template-columns:1fr 1fr}}
.result{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.6rem .7rem;
}
.result.big{grid-column:span 3; background:var(--wood-900); border-color:var(--wood-900)}
@media (max-width:640px){.result.big{grid-column:span 2}}
.result.big .r-label{color:#d9c9ad}
.result.big .r-value{color:#fff; font-size:1.8rem}
.result.big .r-sub{color:var(--amber)}
.r-label{display:block; font-size:.73rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.r-value{display:block; font-size:1.18rem; font-weight:800; color:var(--wood-800); font-variant-numeric:tabular-nums; margin-top:.1rem}
.r-value.pos{color:var(--green)}
.r-sub{display:block; font-size:.8rem; color:var(--muted); margin-top:.1rem}
.badge-row{display:flex; gap:.5rem; flex-wrap:wrap; margin:.4rem 0}
.badge{
  display:inline-block; font-size:.78rem; font-weight:800; border-radius:999px;
  padding:.28rem .8rem; background:var(--green-soft); color:var(--green);
  border:1px solid transparent;
}
.badge.warn{background:#fdefd7; color:#8a5a14}
.badge.bad{background:var(--red-soft); color:var(--red)}
.badge.ghost{background:transparent; border-color:var(--line); color:var(--muted)}

/* ---------- Timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.2rem 0}
@media (max-width:860px){.timeline{grid-template-columns:1fr}}
.t-step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.15rem 1rem 1.3rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.t-step::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--amber),var(--wood-700))}
.t-num{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--wood-700); border-radius:999px; padding:.16rem .6rem; margin-bottom:.5rem;
}
.t-step h4{margin:0 0 .3em}
.t-step ul{margin:0; padding-left:1.05em}
.t-step li{font-size:.88rem; margin:.26em 0}

/* ---------- Risks ---------- */
.risk-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:1rem}
@media (max-width:1020px){.risk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.risk-grid{grid-template-columns:1fr}}
.risk h4{margin-bottom:.25em}
.risk p{font-size:.86rem; margin-bottom:.45em}
.risk .mit{color:var(--green); font-size:.84rem; font-weight:600; border-top:1px dashed var(--line); padding-top:.45em; margin-bottom:0}

/* ---------- Sources ---------- */
.sources{padding-left:1.1em; margin:0}
.sources li{font-size:.88rem; margin:.4em 0}
.sources em{color:var(--wood-700)}

/* ---------- Footer ---------- */
.footer{background:var(--wood-900); color:#e9dcc6; margin-top:2.5rem; padding:1.6rem 0}
.footer-inner{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center}
.footer strong{color:#fff}
.footer p{margin:.3em 0 0; font-size:.82rem; color:#c9b795}
.footer-meta{display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; color:#d9c9ad; text-align:right}
@media (max-width:640px){.footer-meta{text-align:left}}

/* ---------- Print ---------- */
@media print{
  .topbar{position:static}
  .nav{display:none}
  .section{padding:1.2rem 0; break-inside:avoid}
  .card{box-shadow:none}
}