/* ==========================================================
   TEIXEIRA & SERRA — Páginas de categoria · 24H Draft
   Componentes das páginas internas. Depende de styles.css
   ========================================================== */

/* ---------- SUBNAV das categorias ---------- */
.subnav{position:sticky;top:0;z-index:99;background:var(--xisto);border-bottom:1px solid var(--linha-esc)}
.subnav__inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav a{flex:1;min-width:132px;text-align:center;padding:15px 12px;font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8B8079;border-right:1px solid var(--linha-esc);transition:.2s;white-space:nowrap}
.subnav a:last-child{border-right:0}
.subnav a:hover{color:var(--cortica-cl);background:#2F2F34}
.subnav a[aria-current="page"]{color:var(--borra-esc);background:var(--cortica)}

/* ---------- HERO de página ---------- */
.ph{background:radial-gradient(110% 140% at 80% 0%,#5A1223 0%,var(--borra) 46%,var(--borra-esc) 100%);color:var(--pergaminho);position:relative;overflow:hidden}
.ph::after{content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,#F1ECE3 1px,transparent 0);background-size:22px 22px}
.ph__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:center;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(56px,7vw,92px)}
.crumb{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8B8079;margin-bottom:22px}
.crumb a{color:var(--cortica);transition:.15s}
.crumb a:hover{color:var(--cortica-cl)}
.crumb span{padding:0 8px}
.ph h1{font-size:clamp(36px,5.2vw,62px);font-weight:500;color:var(--pergaminho);letter-spacing:-.02em}
.ph h1 em{font-style:italic;color:var(--cortica-cl)}
.ph__lead{font-size:clamp(15.5px,1.5vw,18px);color:#D6CABE;margin:24px 0 30px;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chips li{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cortica);border:1px solid rgba(199,154,91,.35);border-radius:40px;padding:7px 15px}
.ph__art{display:grid;place-items:center}
.ph__art svg{width:min(100%,230px);height:auto;overflow:visible}

/* ---------- SECÇÕES ---------- */
.sec{padding:clamp(58px,7.5vw,100px) 0}
.sec--areia{background:#EAE3D8}
.sec--dark{background:var(--xisto);color:var(--pergaminho)}
.sec--dark h2,.sec--dark h3{color:var(--pergaminho)}
.sec--dark h2 em{color:var(--cortica)}
.sec--dark p{color:#A99A92}
.sec--vinho{background:var(--borra);color:var(--pergaminho)}
.sec--vinho h2,.sec--vinho h3{color:var(--pergaminho)}
.sec--vinho h2 em{color:var(--cortica-cl)}
.sec--vinho p{color:#C0AFA5}
.sec__head{max-width:62ch;margin-bottom:clamp(36px,4.5vw,56px)}
.sec__head p{margin-top:18px;color:var(--cinza)}
.sec--dark .sec__head p,.sec--vinho .sec__head p{color:inherit}
.sec__head--c{margin-inline:auto;text-align:center}
.sec__head--c .eyebrow{justify-content:center}

/* ---------- TABELAS ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linha);border-radius:var(--rad);background:#F7F3EC}
.sec--dark .tbl-wrap,.sec--vinho .tbl-wrap{border-color:var(--linha-esc);background:rgba(241,236,227,.03)}
table.tbl{width:100%;border-collapse:collapse;min-width:660px}
.tbl thead th{text-align:left;font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--tinto);padding:18px 20px;border-bottom:1.5px solid var(--linha);white-space:nowrap;background:#EFE9E0}
.sec--dark .tbl thead th,.sec--vinho .tbl thead th{color:var(--cortica);border-bottom-color:var(--linha-esc);background:rgba(0,0,0,.16)}
.tbl td{padding:18px 20px;border-bottom:1px solid var(--linha);font-size:14.5px;vertical-align:top;color:var(--cinza)}
.sec--dark .tbl td,.sec--vinho .tbl td{border-bottom-color:var(--linha-esc);color:#A99A92}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(126,19,39,.035)}
.sec--dark .tbl tbody tr:hover td,.sec--vinho .tbl tbody tr:hover td{background:rgba(199,154,91,.06)}
.tbl td:first-child{font-family:var(--font-d);font-size:17px;font-weight:600;color:var(--borra)}
.sec--dark .tbl td:first-child,.sec--vinho .tbl td:first-child{color:var(--pergaminho)}
.tbl .num{font-family:var(--font-m);font-size:13.5px;color:var(--tinto);white-space:nowrap}
.sec--dark .tbl .num,.sec--vinho .tbl .num{color:var(--cortica)}
.tbl-nota{margin-top:16px;font-family:var(--font-m);font-size:11px;letter-spacing:.1em;color:var(--cinza)}
.sec--dark .tbl-nota,.sec--vinho .tbl-nota{color:#7E736F}

/* ---------- BARRAS ---------- */
.bars{display:grid;gap:20px}
.bar{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:20px;align-items:center}
.bar__l{font-size:14.5px;font-weight:500;color:var(--tinta)}
.sec--dark .bar__l,.sec--vinho .bar__l{color:var(--pergaminho)}
.bar__t{height:9px;border-radius:20px;background:rgba(126,19,39,.12);overflow:hidden}
.sec--dark .bar__t,.sec--vinho .bar__t{background:rgba(241,236,227,.1)}
.bar__t i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--tinto),var(--tinto-cl));width:0;transition:width 1.1s cubic-bezier(.3,0,.2,1)}
.sec--dark .bar__t i,.sec--vinho .bar__t i{background:linear-gradient(90deg,var(--cortica),var(--cortica-cl))}
.bar--alt .bar__t i{background:linear-gradient(90deg,var(--vinha),#6F8259)}
.rv.in .bar__t i{width:var(--w)}
.bar__v{font-family:var(--font-m);font-size:13px;color:var(--tinto);white-space:nowrap;min-width:82px;text-align:right}
.sec--dark .bar__v,.sec--vinho .bar__v{color:var(--cortica)}

/* ---------- ESCALA (gradiente com marcas) ---------- */
.escala{margin-top:12px}
.escala__faixa{height:16px;border-radius:20px;background:linear-gradient(90deg,#9EC7D4,#D9CFA6,#C79A5B,#9C2337,#5A1223)}
.escala--acidez .escala__faixa{background:linear-gradient(90deg,#6F8259,#B7B36A,#C79A5B,#9C2337)}
.escala--acucar .escala__faixa{background:linear-gradient(90deg,#EFE9E0,#E1D5AE,#C79A5B,#A2703A)}
.escala__marcas{display:grid;margin-top:14px;gap:8px}
.marca{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--linha)}
.sec--dark .marca,.sec--vinho .marca{border-bottom-color:var(--linha-esc)}
.marca:last-child{border-bottom:0}
.marca__p{width:12px;height:12px;border-radius:50%;flex:none;align-self:center}
.marca__n{font-size:15px;font-weight:500;color:var(--tinta)}
.sec--dark .marca__n,.sec--vinho .marca__n{color:var(--pergaminho)}
.marca__n small{display:block;font-weight:400;font-size:13px;color:var(--cinza);margin-top:3px}
.sec--dark .marca__n small,.sec--vinho .marca__n small{color:#8B8079}
.marca__v{font-family:var(--font-m);font-size:13px;color:var(--tinto);white-space:nowrap}
.sec--dark .marca__v,.sec--vinho .marca__v{color:var(--cortica)}

/* ---------- GRELHAS E CARTÕES ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.g-split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.card{background:#F7F3EC;border:1px solid var(--linha);border-radius:var(--rad);padding:32px 28px;transition:.25s}
.card:hover{border-color:var(--cortica);transform:translateY(-3px);box-shadow:var(--sombra)}
.sec--dark .card,.sec--vinho .card{background:rgba(241,236,227,.035);border-color:var(--linha-esc)}
.sec--dark .card:hover,.sec--vinho .card:hover{border-color:var(--cortica);box-shadow:none}
.card__n{font-family:var(--font-m);font-size:11px;letter-spacing:.16em;color:var(--cortica);margin-bottom:16px}
.card .ic{width:32px;height:32px;color:var(--tinto);stroke-width:1.2;margin-bottom:18px}
.sec--dark .card .ic,.sec--vinho .card .ic{color:var(--cortica)}
.card h3{font-size:20px;color:var(--borra);margin-bottom:10px}
.sec--dark .card h3,.sec--vinho .card h3{color:var(--pergaminho)}
.card p{font-size:14.5px;color:var(--cinza);line-height:1.6}
.card ul{list-style:none;margin-top:16px;display:grid;gap:9px}
.card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--cinza)}
.card li .ic{width:15px;height:15px;margin:5px 0 0;color:var(--cortica);flex:none}
.card__destaque{border-color:var(--tinto);background:#fff}

/* ---------- MATRIZ DE HARMONIZAÇÃO ---------- */
.matriz{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--rad);overflow:hidden}
.sec--dark .matriz,.sec--vinho .matriz{background:var(--linha-esc);border-color:var(--linha-esc)}
.mrow{display:grid;grid-template-columns:200px 1fr;gap:1px;background:inherit}
.mrow__h{background:#EFE9E0;padding:20px 22px;font-family:var(--font-d);font-weight:600;font-size:17px;color:var(--borra)}
.sec--dark .mrow__h,.sec--vinho .mrow__h{background:rgba(0,0,0,.18);color:var(--pergaminho)}
.mrow__c{background:#F7F3EC;padding:18px 22px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.sec--dark .mrow__c,.sec--vinho .mrow__c{background:rgba(241,236,227,.03)}
.tag{font-size:13.5px;color:var(--cinza);background:#fff;border:1px solid var(--linha);border-radius:40px;padding:6px 14px}
.sec--dark .tag,.sec--vinho .tag{background:transparent;border-color:var(--linha-esc);color:#A99A92}
.tag--forte{border-color:var(--tinto);color:var(--tinto)}
.sec--dark .tag--forte,.sec--vinho .tag--forte{border-color:var(--cortica);color:var(--cortica)}

/* ---------- PASSOS / DIAGRAMA ---------- */
.diag{width:100%;height:auto;overflow:visible}
.diag text{font-family:var(--font-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.diag .t-nome{font-family:var(--font-d);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}

/* ---------- CALCULADORA ---------- */
.calc{background:var(--pergaminho);border:1px solid var(--linha);border-radius:var(--rad);padding:clamp(26px,3.2vw,42px);box-shadow:var(--sombra)}
.sec--dark .calc,.sec--vinho .calc{background:var(--pergaminho);border-color:transparent}
.calc h3{font-size:23px;color:var(--borra);margin-bottom:8px}
.calc>p{font-size:14.5px;color:var(--cinza);margin-bottom:26px}
.calc__campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc__c{display:flex;flex-direction:column;gap:7px}
.calc__c label{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.calc__c input,.calc__c select{font-family:var(--font-m);font-size:15px;color:var(--tinta);background:#fff;border:1px solid var(--linha);border-radius:var(--rad);padding:12px 14px}
.calc__c input:focus,.calc__c select:focus{border-color:var(--tinto);outline:none}
.calc__out{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--rad);overflow:hidden}
.calc__o{background:#fff;padding:22px 18px;text-align:center}
.calc__o b{display:block;font-family:var(--font-d);font-size:clamp(24px,2.8vw,34px);font-weight:500;color:var(--borra);letter-spacing:-.01em;line-height:1}
.calc__o span{display:block;margin-top:9px;font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.calc__nota{margin-top:18px;font-size:12.5px;color:var(--cinza);line-height:1.55}

/* ---------- BLOCO DE PROVA / FICHA ---------- */
.ficha{border-left:2px solid var(--cortica);padding-left:28px}
.ficha dl{display:grid;gap:16px}
.ficha dt{font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.sec--dark .ficha dt,.sec--vinho .ficha dt{color:#7E736F}
.ficha dd{font-size:16px;font-weight:500;color:var(--borra);margin-top:4px}
.sec--dark .ficha dd,.sec--vinho .ficha dd{color:var(--pergaminho)}

/* ---------- CTA FINAL ---------- */
.cta-fim{background:var(--borra-esc);color:var(--pergaminho);padding:clamp(56px,7vw,90px) 0;text-align:center}
.cta-fim h2{color:var(--pergaminho);max-width:20ch;margin:0 auto}
.cta-fim h2 em{color:var(--cortica-cl)}
.cta-fim p{color:#A99A92;margin:20px auto 32px;max-width:52ch}
.cta-fim__b{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1000px){
  .ph__inner{grid-template-columns:1fr;gap:40px}
  .ph__art{order:-1}
  .ph__art svg{width:min(60%,180px)}
  .g-split,.g2{grid-template-columns:1fr;gap:40px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .calc__out{grid-template-columns:1fr}
  .calc__o{border-bottom:1px solid var(--linha)}
}
@media (max-width:700px){
  .g3,.g4{grid-template-columns:1fr}
  .calc__campos{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr;gap:8px}
  .bar__v{text-align:left;min-width:0}
  .mrow{grid-template-columns:1fr}
  .subnav a{min-width:118px;font-size:10px;padding:13px 10px}
  .ficha{padding-left:20px}
}

/* ---------- CARTÃO DE GARRAFA (marcas) ---------- */
.garrafa{background:#F7F3EC;border:1px solid var(--linha);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.garrafa:hover{border-color:var(--cortica);transform:translateY(-4px);box-shadow:var(--sombra)}
.garrafa__foto{position:relative;height:290px;display:grid;place-items:center;padding:28px 20px;
  background:radial-gradient(120% 90% at 50% 100%,#EFE9E0 0%,#F7F3EC 62%);border-bottom:1px solid var(--linha)}
.garrafa__foto::after{content:'';position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:118px;height:12px;border-radius:50%;background:rgba(59,11,24,.12);filter:blur(7px)}
.garrafa__foto img{position:relative;z-index:2;max-height:234px;width:auto;object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(59,11,24,.18))}
.garrafa__ghost{width:78px;height:auto;color:var(--cortica);opacity:.3;position:relative;z-index:2}
.garrafa__foto img+.garrafa__ghost{display:none}
.garrafa__txt{padding:30px 28px 32px;flex:1;display:flex;flex-direction:column}
.garrafa__tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinto);margin-bottom:14px}
.garrafa h3{font-family:var(--font-d);font-size:24px;font-weight:600;color:var(--borra);margin-bottom:12px;letter-spacing:-.01em}
.garrafa__txt>p{font-size:14.5px;color:var(--cinza);line-height:1.62}
.garrafa__txt>p a{color:var(--tinto);border-bottom:1px solid var(--linha)}
.garrafa__txt>p a:hover{border-color:var(--tinto)}
.garrafa__ficha{margin-top:24px;padding-top:22px;border-top:1px solid var(--linha);display:grid;gap:13px}
.garrafa__ficha div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.garrafa__ficha dt{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.garrafa__ficha dd{font-size:14px;font-weight:500;color:var(--borra);text-align:right}
.tbl-nota code{font-family:var(--font-m);font-size:11px;background:rgba(126,19,39,.07);padding:2px 7px;border-radius:3px;color:var(--tinto)}

@media (max-width:1000px){
  .garrafa__foto{height:250px}
  .garrafa__foto img{max-height:196px}
}