/* ═══════════════════════════════════════════════════════════
   VWT · BODEGA · plantilla única, construida de cero
   Apertura tipográfica con la foto como banda; una cita en humo;
   los bloques de la casa como lista numerada grande; los vinos
   sobre negro; preguntas con el acordeón del sitio; cierre en
   bordó; más bodegas como lista.
   ═══════════════════════════════════════════════════════════ */
.bd{ --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; --vino: #6B1D2A; --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) }
.bd-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.bd-kick{ display: block; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.bd-kick-light{ color: rgba(255,255,255,.78) }
.bd-h1{ 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: 20ch }
.bd-h1 em, .bd-b-h em, .bd-h2 em{ font-style: normal; color: var(--acc) }
.bd-h2{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(76.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .96; max-width: 20ch }
.bd-h2-light{ color: #fff }
.bd-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch; font-size: calc(21.1px * var(--k, 1)); line-height: 1.55; font-weight: 300; color: var(--soft) }
.bd-miga{ margin: 0 0 1.2rem; font-size: .82rem; color: var(--mut) }
.bd-miga a{ color: var(--mut); text-decoration: none }
.bd-miga a:hover{ color: var(--acc) }
.bd-miga span{ margin: 0 .3rem }
.bd-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px; background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff; text-decoration: none; font: inherit; font-size: .88rem; font-weight: 600; transition: background-color var(--t) var(--e), transform var(--t) var(--e) }
.bd-btn:hover{ background: var(--vino) !important; transform: translateY(-2px) }
.bd-btn-blanco{ background: #fff !important; color: var(--vino) !important; -webkit-text-fill-color: var(--vino) }
.bd-btn-blanco:hover{ background: var(--acc) !important; color: #fff !important; -webkit-text-fill-color: #fff }
.bd-lnk{ display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) }
.bd-lnk i{ font-style: normal; transition: transform .6s var(--e) }
.bd-lnk:hover i{ transform: translateX(4px) }
.bd-lnk-light{ color: #fff !important; -webkit-text-fill-color: #fff }

/* ── apertura ── */
.bd-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 0 }
.bd-datos{ list-style: none; margin: clamp(1.4rem,2.6vw,2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem }
.bd-datos li{ padding: .5rem 1rem; border-radius: 100px; border: 1px solid var(--linea); font-size: .86rem; font-weight: 600; color: var(--ink) }
.bd-cta-l{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: calc(35.2px * var(--k, 1))}
.bd-fig{ margin: clamp(2.4rem,5vw,3.6rem) auto 0; max-width: var(--max); padding-inline: var(--pad) }
.bd-fig img{ width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; border-radius: 22px; background: var(--ink) }

/* ── la cita ── */
.bd-cita{ margin-top: var(--sec); padding: var(--sec) 0; background: var(--humo) }
.bd-cita-p{ margin: 0; max-width: 24ch; font-size: calc(60.8px * var(--k, 1)); font-weight: 300; letter-spacing: -.045em; line-height: 1.1 }
.bd-cita-f{ margin: 1.2rem 0 0; font-size: .82rem; font-weight: 600; color: var(--acc) }

/* ── los bloques ── */
.bd-bloques{ padding: var(--sec) 0 }
.bd-lista{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea) }
.bd-b{ display: grid; grid-template-columns: clamp(3rem,5vw,5rem) minmax(0,.4fr) minmax(0,.6fr); column-gap: calc(48.0px * var(--k, 1)); align-items: start; padding: clamp(2rem,4vw,3.2rem) 0; border-bottom: 1px solid var(--linea) }
.bd-b-n{ font-size: .82rem; font-weight: 700; color: var(--acc); padding-top: .3rem }
.bd-b-hd{ position: sticky; top: calc(var(--nav-h, 62px) + 2rem) }
.bd-b-h{ margin: .5rem 0 0; font-size: calc(48.0px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: .98; max-width: 14ch }
.bd-b-tx p{ margin: 0 0 1.3rem; max-width: 66ch; font-size: calc(19.2px * var(--k, 1)); line-height: 1.7; font-weight: 300; color: var(--soft) }
.bd-b-tx p:last-child{ margin-bottom: 0 }
.bd-b-tx a{ color: var(--acc); text-decoration: underline; text-underline-offset: .18em }
.bd-b-tx ul{ margin: 0 0 1.3rem; padding-left: 1.2rem }
.bd-b-tx li{ font-weight: 300; color: var(--soft); line-height: 1.6; margin-bottom: .4rem }
.bd-b-tx li::marker{ color: var(--acc) }

/* ── los vinos ── */
.bd-vinos{ padding: var(--sec) 0; background: var(--negro); color: #fff; scroll-margin-top: var(--nav-h, 62px) }
.bd-vinos-l{ list-style: none; margin: clamp(2rem,4vw,3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: calc(25.6px * var(--k, 1))}
.bd-vinos-l li{ padding: calc(28.8px * var(--k, 1)); border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12) }
.bd-v-n{ display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--acc) }
.bd-vinos-l h3{ margin: .4rem 0 .6rem; font-size: calc(20.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.035em; line-height: 1.1 }
.bd-vinos-l p{ margin: 0; font-size: .92rem; line-height: 1.5; font-weight: 300; color: rgba(255,255,255,.78) }

/* ── preguntas: acordeón del sitio ── */
.bd-faq{ padding: var(--sec) 0 }
.bd-faq-l{ margin-top: calc(48.0px * var(--k, 1)); border-top: 1px solid var(--linea) }
.bd-q{ border-bottom: 1px solid var(--linea) }
.bd-q summary{ display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none; padding: clamp(1.1rem,2vw,1.5rem) 0; font-size: calc(19.5px * var(--k, 1)); font-weight: 600; letter-spacing: -.025em; transition: color var(--t) var(--e) }
.bd-q summary::-webkit-details-marker{ display: none }
.bd-q summary span{ flex: 1 1 auto }
.bd-q summary:hover, .bd-q[open] summary{ color: var(--acc) }
.bd-q summary i{ position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(11,7,8,.35); transition: background-color var(--t) var(--e), border-color var(--t) var(--e), transform var(--t) var(--e) }
.bd-q summary i::before, .bd-q summary i::after{ content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); transform: translate(-50%,-50%); transition: opacity var(--t) var(--e), background-color var(--t) var(--e) }
.bd-q summary i::before{ width: 9px; height: 1.5px }
.bd-q summary i::after{ width: 1.5px; height: 9px }
.bd-q[open] summary i{ background: var(--acc); border-color: var(--acc); transform: rotate(90deg) }
.bd-q[open] summary i::before{ background: #fff }
.bd-q[open] summary i::after{ opacity: 0 }
.bd-q-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--e) }
.bd-q[open] .bd-q-r{ grid-template-rows: 1fr }
.bd-q-r > div{ overflow: hidden }
.bd-q-r p{ margin: 0; padding: 0 3rem 1.4rem 0; max-width: 62ch; font-size: calc(17.3px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--soft) }

/* ── cierre y más bodegas ── */
.bd-cierre{ padding: var(--sec) 0; background: var(--vino); color: #fff }
.bd-cierre-grid{ display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,.4fr); gap: calc(80.0px * var(--k, 1)); align-items: end }
.bd-cierre-cta{ display: grid; gap: .9rem; justify-items: start }
.bd-rel{ padding: var(--sec) 0; background: var(--humo) }
.bd-rel-l{ list-style: none; margin: clamp(1.4rem,2.6vw,2rem) 0 0; padding: 0; border-top: 1px solid var(--linea) }
.bd-rel-l li{ border-bottom: 1px solid var(--linea) }
.bd-rel-l a{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k i" "t i"; align-items: center; padding: clamp(1rem,2vw,1.4rem) 0; text-decoration: none; color: inherit }
.bd-rel-k{ grid-area: k; font-size: .82rem; font-weight: 600; color: var(--acc) }
.bd-rel-t{ grid-area: t; margin-top: .2rem; font-size: calc(28.8px * var(--k, 1)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; transition: color var(--t) var(--e) }
.bd-rel-l i{ grid-area: i; font-style: normal; font-size: 1.6rem; color: var(--acc); transition: transform .6s var(--e) }
.bd-rel-l a:hover .bd-rel-t{ color: var(--acc) }
.bd-rel-l a:hover i{ transform: translateX(4px) }

@media (max-width: 900px){
  .bd-b{ grid-template-columns: clamp(2.6rem,6vw,3.6rem) 1fr; row-gap: .8rem }
  .bd-b-hd{ position: static }
  .bd-b-tx{ grid-column: 2 }
  .bd-vinos-l{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .bd-cierre-grid{ grid-template-columns: 1fr; align-items: start }
  .bd-fig img{ aspect-ratio: 16/10 }
}
@media (max-width: 560px){ .bd-vinos-l{ grid-template-columns: 1fr } .bd-q-r{ transition: none } }
html[data-theme="dark"] .bd, body.dark .bd{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --negro: #0C0A0A; --linea: rgba(255,255,255,.12) }
html[data-theme="dark"] .bd-q summary i, body.dark .bd-q summary i{ border-color: rgba(255,255,255,.3) }
html[data-theme="dark"] .bd-vinos, body.dark .bd-vinos{ border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12) }