/* ═══════════════════════════════════════════════════════════
   VWT · BODEGAS · identidad Vito
   Regiones como palabras grandes con subrayado bordó, y cada
   bodega como una fila editorial: foto a la izquierda, nombre a
   gran cuerpo, frase, datos y enlace. Los ids y clases de las
   pestañas se conservan para el script existente.
   ═══════════════════════════════════════════════════════════ */
.bo{ --pad: clamp(1.4rem,5vw,6rem); --max: calc(1400px * var(--k, 1)); --sec: clamp(3.2rem,calc(7 * var(--1vh)),5.6rem); --t: .9s; --e: cubic-bezier(.22,1,.36,1);
     --acc: #AC3749; --ink: #0B0708; --soft: #3A3436; --mut: #7F6E73; --papel: #FFFFFF; --humo: #F6F2F0; --negro: #0B0708; --linea: rgba(11,7,8,.14);
     font-family: 'Poppins', sans-serif; background: var(--papel); color: var(--ink) }
.bo-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.bo-kick{ display: block; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.bo-kick-light{ color: rgba(255,255,255,.78) }
.bo-h1, .bo-h2{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .94; max-width: 22ch }
.bo-h2{ color: #fff }
.bo-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch; font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft) }
.bo-lead a{ color: var(--acc); text-decoration: underline; text-underline-offset: .18em }
.bo-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 clamp(2rem,4vw,3rem) }

.bo-sel{ padding: 0 0 var(--sec); border-top: 1px solid var(--linea) }
.bo-tabs{ display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding: clamp(1.4rem,3vw,2.2rem) 0 }
.bo-tab{ appearance: none; background: none; border: 0; padding: .1rem 0; cursor: pointer; font: inherit; font-size: calc(41.6px * var(--k, 1)); font-weight: 300; letter-spacing: -.04em; color: var(--mut); border-bottom: 2px solid transparent; transition: color var(--t) var(--e), border-color var(--t) var(--e) }
.bo-tab-n{ font-size: .82rem; font-weight: 700; color: var(--acc); margin-right: .5rem; letter-spacing: 0; vertical-align: middle }
.bo-tab:hover{ color: var(--ink) }
.bo-tab.active{ color: var(--ink); font-weight: 700; border-bottom-color: var(--acc) }
.bo-panel{ display: none }
.bo-panel.active{ display: block }
.bo-lista{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea) }
.bo-c{ border-bottom: 1px solid var(--linea) }
.bo-c a{ display: grid; grid-template-columns: clamp(160px,26vw,380px) minmax(0,1fr); gap: calc(48.0px * var(--k, 1)); align-items: center; padding: clamp(1.4rem,2.8vw,2.4rem) 0; text-decoration: none; color: inherit }
.bo-c-fig{ display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--negro) }
.bo-c-fig img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--e) }
.bo-c a:hover .bo-c-fig img{ transform: scale(1.06) }
.bo-c-tx{ display: block }
.bo-c-t{ display: block; margin-top: .4rem; font-size: calc(48.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: .98; transition: color var(--t) var(--e), transform .7s var(--e) }
.bo-c a:hover .bo-c-t{ color: var(--acc); transform: translateX(.1em) }
.bo-c-d{ display: block; margin-top: .7rem; max-width: 56ch; font-size: calc(17.9px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft) }
.bo-c-m{ display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1rem }
.bo-c-m > span{ display: grid; gap: .1rem }
.bo-c-m i{ font-style: normal; font-size: .76rem; color: var(--mut) }
.bo-c-m b{ font-size: .95rem; font-weight: 600; color: var(--ink) }
.bo-lnk{ display: inline-flex; align-items: center; gap: .3rem; margin-top: 1.1rem; font-weight: 600; color: var(--ink); text-decoration: none }
.bo-lnk i{ font-style: normal; transition: transform .6s var(--e) }
.bo-c a:hover .bo-lnk i, .bo-lnk:hover i{ transform: translateX(4px) }
.bo-lnk-light{ color: #fff !important; -webkit-text-fill-color: #fff }

.bo-fin{ padding: var(--sec) 0; background: var(--negro); color: #fff }
.bo-fin-grid{ display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,.4fr); gap: calc(80.0px * var(--k, 1)); align-items: end }
.bo-fin-cta{ display: grid; gap: .9rem; justify-items: start }
.bo-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px; background: #fff !important; color: var(--negro) !important; -webkit-text-fill-color: var(--negro); text-decoration: none; font: inherit; font-size: .88rem; font-weight: 600; transition: background-color var(--t) var(--e), color var(--t) var(--e), transform var(--t) var(--e) }
.bo-btn:hover{ background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff; transform: translateY(-2px) }

@media (max-width: 760px){ .bo-c a{ grid-template-columns: 1fr } .bo-fin-grid{ grid-template-columns: 1fr } }
html[data-theme="dark"] .bo, body.dark .bo{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --negro: #0C0A0A; --linea: rgba(255,255,255,.12) }
html[data-theme="dark"] .bo-btn, body.dark .bo-btn{ background: #F7F5F5 !important; color: #000 !important; -webkit-text-fill-color: #000 }