/* =========================================================
   Portada del blog v2 · blog-v2-a / -b / -c.html (js/blog-v2.js)
   1. Base (título, categoría, meta, chips, buscador, fila de la lista C, bloque láser, «Cargar más»)
   2. Slider común (diapositivas, tarjetas con barra de progreso, pausa)
   3. Slider A · B · C
   4. Sección 2: lista en una columna + suscripción pegajosa
   5. Responsive
   Autocontenido: no necesita css/blog-propuestas.css.
   ========================================================= */
.blog2 { --bg-borde: rgba(31, 26, 21, .24); --bg-linea: rgba(31, 26, 21, .1); --bv-oscuro: #221912; --bv-error: #B3261E; --dorado: #F0C38A; }
.blog2 main { overflow-x: clip; }

/* ---------- 1. Base ---------- */
.bg-h1 { font-family: var(--serif); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; }
.bg-h1 em { font-style: normal; color: var(--acento-hondo); }
.bg-cat { display: block; font-size: 12.5px; font-weight: 600; color: var(--acento-hondo); }
.bg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--texto-60); letter-spacing: -0.01em; }
.bg-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bg-meta .lucide { width: 15px; height: 15px; }

.bg-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--pad-x); }
.bg-chips::-webkit-scrollbar { display: none; }
.bg-chips--der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.bg-chips--izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.bg-chips--izq.bg-chips--der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.bg-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: var(--r-pildora); font-size: 14px; font-weight: 500; color: var(--texto-60); white-space: nowrap; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.bg-chip span { font-size: 12px; font-weight: 500; color: var(--texto-60); font-variant-numeric: tabular-nums; }
.bg-chip:hover { background: var(--crema); color: var(--texto); }
.bg-chip[aria-pressed="true"] { background: var(--texto); color: var(--blanco); }
.bg-chip[aria-pressed="true"] span { color: var(--dorado); }
.bg-chip:focus-visible { outline-offset: 1px; }

.bg-buscar__campo { display: flex; align-items: center; height: 54px; padding: 0 6px 0 18px; border: 1.5px solid var(--bg-borde); border-radius: var(--r-pildora); background: var(--blanco); cursor: text; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bg-buscar__campo:hover { border-color: rgba(31, 26, 21, .4); }
.bg-buscar__campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bg-buscar__campo > .lucide { width: 19px; height: 19px; opacity: .7; }
.bg-buscar input { flex: 1; min-width: 0; height: 100%; margin-left: 10px; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--texto); outline: none; }
.bg-buscar input::placeholder { color: var(--texto-60); }
.bg-buscar input::-webkit-search-cancel-button { display: none; }
.bg-buscar__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto-60); }
.bg-buscar__x:hover { background: var(--crema-2); color: var(--texto); }
.bg-buscar__x .lucide { width: 16px; height: 16px; }
.bg-buscar__x[hidden] { display: none; }

.bg-estado { font-size: 14px; color: var(--texto-60); }
.bg-estado:empty { display: none; }
.bg-estado:not(:empty) { margin: 20px 0 0; }

.bgc-fila + .bgc-fila { border-top: 1px solid var(--bg-linea); }
.bgc-fila__a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; }
.bgc-fila__foto { display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 12px; background: var(--crema-2); }
.bgc-fila__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.bgc-fila__a:hover .bgc-fila__foto img { transform: scale(1.04); }
.bgc-fila__txt { display: flex; flex-direction: column; gap: 8px; }
.bgc-fila__tit { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; transition: color .2s var(--curva-hover); }
.bgc-fila__a:hover .bgc-fila__tit { color: var(--acento-hondo); }
.bg-t__ext { font-size: 14.5px; line-height: 1.5; color: var(--texto-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bg-conv { position: relative; display: flex; align-items: center; overflow: hidden; margin: 12px 0; border-radius: 16px; background: var(--crema); }
.bg-conv__foto { display: block; flex: 0 0 220px; aspect-ratio: 5 / 4; overflow: hidden; }
.bg-conv__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.bg-conv__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 32px; }
.bg-conv__tit { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.bg-conv__tit em { font-style: normal; color: var(--acento-hondo); }
.bg-conv__p { font-size: 14.5px; line-height: 1.5; color: var(--texto-60); }
.bg-conv__p b { color: var(--texto); font-weight: 600; }
.bg-conv__cta { margin-top: 8px; }

.bg-vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; padding: 56px 16px; border-radius: 14px; background: var(--crema); text-align: center; color: var(--texto-60); }
.bg-vacio > .lucide { width: 28px; height: 28px; color: var(--acento-hondo); }
.bg-nota { font-size: 14px; color: var(--texto-60); text-align: center; }

.bg-mas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.bg-mas__n { font-size: 14px; color: var(--texto-60); font-variant-numeric: tabular-nums; }
.bg-mas__barra { width: 200px; height: 3px; border-radius: 3px; background: var(--crema-2); overflow: hidden; }
.bg-mas__barra span { display: block; height: 100%; background: var(--acento); border-radius: inherit; transition: width .4s var(--curva); }
.bg-mas__btn { margin-top: 8px; padding: 0 18px 0 22px; height: 48px; }

/* ---------- 2. Slider común ---------- */
.bv-cab { padding-top: 40px; margin-bottom: 28px; }
.bv-cab__sub { margin-top: 8px; font-size: 16px; color: var(--texto-60); }
.bv-cab--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bv-cab--fila .bv-cab__sub { margin: 0 0 6px; }

.bv-sl { position: relative; }
.bv-escena { position: relative; display: grid; touch-action: pan-y; } /* el swipe horizontal lo gestiona JS; el scroll vertical sigue nativo */
.bv-c__fotos { touch-action: pan-y; }
.bv-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--curva), visibility 0s linear .6s; }
.bv-slide.activo { opacity: 1; visibility: visible; transition: opacity .6s var(--curva), visibility 0s; z-index: 1; }
.bv-slide__foto { display: block; overflow: hidden; background: var(--crema-2); }
.bv-slide__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; -webkit-user-drag: none; user-select: none; }
.bv-slide.activo .bv-slide__foto img, .bv-c__foto.activo img { transform: scale(1); }
.bv-slide__caja { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bv-slide__caja > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--curva), transform .5s var(--curva); }
.bv-slide.activo .bv-slide__caja > * { opacity: 1; transform: none; }
.bv-slide.activo .bv-slide__caja > :nth-child(2) { transition-delay: .06s; }
.bv-slide.activo .bv-slide__caja > :nth-child(3) { transition-delay: .12s; }
.bv-slide.activo .bv-slide__caja > :nth-child(n+4) { transition-delay: .18s; }
.bv-slide__tit { font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 1.95rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.032em; }
.bv-slide__tit a { transition: color .2s var(--curva-hover); }
.bv-slide__tit a:hover { color: var(--acento-hondo); }
.bv-slide__ext { max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--texto-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv-slide__cta { height: 46px; margin-top: 4px; }

/* Tarjetas de navegación con «cargador» */
.bv-tab { position: relative; display: grid; align-items: center; min-width: 0; overflow: hidden; text-align: left; transition: background-color .3s var(--curva-hover), color .3s var(--curva-hover), box-shadow .3s var(--curva-hover); }
.bv-tab__foto { display: block; overflow: hidden; border-radius: 10px; background: var(--crema-2); }
.bv-tab__foto img { width: 100%; height: 100%; object-fit: cover; }
.bv-tab__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bv-tab__cat { font-size: 12.5px; font-weight: 600; color: var(--acento-hondo); }
.bv-tab__tit { font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv-tab__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-linea); }
.bv-tab__barra span { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bv-tab:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.bv-pausa { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--texto); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .85; transition: opacity .2s var(--curva-hover), background-color .2s var(--curva-hover); }
.bv-pausa:hover, .bv-pausa:focus-visible { opacity: 1; background: var(--blanco); }
.bv-pausa .lucide { width: 16px; height: 16px; }
.bv-pausa[hidden] { display: none; }

/* ---------- 3A · Slide grande + 3 tarjetas apiladas ---------- */
.bv-sl--a { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
.bv-sl--a .bv-escena { height: clamp(460px, 36vw, 520px); overflow: hidden; border-radius: 20px; background: var(--crema-2); }
.bv-sl--a .bv-slide { position: relative; }
.bv-sl--a .bv-slide__foto { position: absolute; inset: 0; }
.bv-sl--a .bv-slide__caja { position: absolute; left: 24px; bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; width: min(600px, calc(100% - 48px)); padding: 26px 28px 24px; border-radius: 18px; background: var(--blanco); box-shadow: 0 18px 44px rgba(31, 26, 21, .14); }
.bv-sl--a .bv-slide__caja > :not(.bv-slide__pie):not(.bv-slide__cta) { grid-column: 1 / -1; }
.bv-sl--a .bv-slide__cta { margin-top: 6px; }
.bv-sl--a .bv-slide__pie { margin-top: 6px; }
.bv-sl--a .bv-tabs { display: flex; flex-direction: column; gap: 12px; }
.bv-sl--a .bv-tab { flex: 1; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 18px 14px 14px; border: 1px solid var(--bg-linea); border-radius: 18px; background: var(--blanco); }
.bv-sl--a .bv-tab__foto { aspect-ratio: 1; }
.bv-sl--a .bv-tab:hover { background: var(--crema); }
.bv-sl--a .bv-tab[aria-selected="true"] { border-color: transparent; background: var(--crema); }
.bv-sl--a .bv-tab:not([aria-selected="true"]) .bv-tab__tit { color: var(--texto-60); }
.bv-sl--a .bv-tab__barra { left: 14px; right: 14px; bottom: 0; border-radius: 3px; }

/* ---------- 3B · Slide a todo el ancho con velo + tarjetas en fila (estilo BanBif) ---------- */
.bv-sl--b .bv-escena { height: clamp(460px, 38vw, 540px); overflow: hidden; border-radius: 22px; clip-path: inset(0 round 22px); isolation: isolate; background: var(--bv-oscuro); color: var(--blanco); }
.bv-sl--b .bv-slide { position: relative; }
.bv-sl--b .bv-slide__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; background: var(--bv-oscuro); }
.bv-sl--b .bv-slide__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bv-oscuro) 0%, rgba(34, 25, 18, .78) 20%, rgba(34, 25, 18, .2) 55%, rgba(34, 25, 18, 0) 75%); }
.bv-sl--b .bv-slide__caja { position: relative; justify-content: center; height: 100%; max-width: 600px; padding: 48px 0 104px 56px; }
.bv-sl--b .bg-cat { color: var(--dorado); }
.bv-sl--b .bv-slide__tit { font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.12; }
.bv-sl--b .bv-slide__tit a:hover { color: var(--dorado); }
.bv-sl--b .bv-slide__ext { color: rgba(255, 255, 255, .8); }
.bv-sl--b .bg-meta { color: rgba(255, 255, 255, .78); }
.bv-sl--b { margin-top: 32px; }
.bv-sl--b .bv-slide__caja { gap: 0; padding: 56px 0 56px 112px; max-width: 700px; }
.bv-sl--b .bv-slide__tit { margin-top: 18px; }
.bv-sl--b .bv-slide__ext { margin-top: 24px; }
.bv-sl--b .bv-slide__pie { margin-top: 28px; }
.bv-sl--b .bv-pausa { top: 20px; right: 20px; }

/* Flechas (solo escritorio) */
.bv-flecha { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanco); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.bv-flecha:hover { background: var(--blanco); color: var(--texto); }
.bv-flecha:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.bv-flecha .lucide { width: 22px; height: 22px; }
.bv-flecha--ant { left: 28px; }
.bv-flecha--sig { right: 28px; }

/* Dots con cargador: el activo se alarga y se llena (--p de 0 a 1) */
.bv-dots { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; align-items: center; padding: 0 8px; border-radius: var(--r-pildora); background: rgba(20, 14, 8, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bv-dots .bv-tab { display: grid; place-items: center; overflow: visible; height: 44px; padding: 0 6px; }
.bv-dot { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .42); transition: width .45s var(--curva), background-color .2s var(--curva-hover); }
.bv-dot span { position: absolute; inset: 0; background: var(--dorado); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bv-dots .bv-tab:not([aria-selected="true"]) .bv-dot span { transform: scaleX(0); }
.bv-dots .bv-tab:hover .bv-dot { background: rgba(255, 255, 255, .8); }
.bv-dots .bv-tab[aria-selected="true"] .bv-dot { width: 44px; background: rgba(255, 255, 255, .26); }
.bv-dots .bv-tab:focus-visible { outline: 2px solid var(--dorado); outline-offset: -4px; border-radius: 12px; }

/* Vista previa flotante al pasar el mouse por un dot (tarjeta tipo BanBif) */
.bv-prev { position: absolute; right: -14px; bottom: calc(100% + 10px); display: none; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; width: 330px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--blanco); color: var(--texto); text-align: left; box-shadow: 0 18px 40px rgba(20, 14, 8, .28); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--curva), transform .25s var(--curva); }
.bv-prev::after { content: ""; position: absolute; right: 26px; top: 100%; border: 7px solid transparent; border-top-color: var(--blanco); }
.bv-prev .bv-tab__foto { aspect-ratio: 1; }
@media (hover: hover) and (min-width: 901px) {
  .bv-prev { display: grid; }
  .bv-dots .bv-tab:not([aria-selected="true"]):hover .bv-prev,
  .bv-dots .bv-tab:not([aria-selected="true"]):focus-visible .bv-prev { opacity: 1; transform: none; }
}

/* ---------- 3C · Split: texto + foto en arco, pestañas numeradas con anillo ---------- */
.bv-banda { padding: 48px 0 64px; background: var(--crema); }
.bv-banda .bv-cab { padding-top: 0; }
.bv-sl--c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.bv-c__izq { display: flex; flex-direction: column; min-width: 0; }
.bv-cab--c { margin-bottom: 36px; }
.bv-sl--c .bv-slide__caja { gap: 14px; }
.bv-sl--c .bv-slide__tit { font-size: clamp(1.7rem, 2.5vw, 2.35rem); line-height: 1.13; }
.bv-tabs-fila { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--bg-linea); }
.bv-sl--c .bv-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.bv-sl--c .bv-tab { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 6px 8px 6px 0; border-radius: 12px; overflow: visible; color: var(--texto-60); }
.bv-sl--c .bv-tab:hover { color: var(--texto); }
.bv-sl--c .bv-tab[aria-selected="true"] { color: var(--texto); }
.bv-sl--c .bv-tab__tit { font-family: var(--sans); font-size: 13.5px; line-height: 1.35; letter-spacing: -0.01em; }
.bv-sl--c .bv-tab__cat { color: inherit; }
.bv-sl--c .bv-tab[aria-selected="true"] .bv-tab__cat { color: var(--acento-hondo); }
.bv-tab__anillo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.bv-tab__anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bv-tab__anillo circle { fill: none; stroke-width: 2; }
.bv-anillo__fondo { stroke: rgba(31, 26, 21, .16); }
.bv-anillo__valor { stroke: var(--acento); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.bv-tab__anillo b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bv-sl--c .bv-tab[aria-selected="true"] .bv-tab__anillo b { color: var(--acento-hondo); }
.bv-sl--c .bv-pausa { position: static; flex: none; background: var(--blanco); opacity: 1; }
.bv-sl--c .bv-pausa:hover { background: var(--crema-2); }
.bv-c__marco { position: relative; padding: 14px; }
.bv-c__marco::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(168, 106, 40, .35); border-radius: 999px 999px 32px 32px; pointer-events: none; }
.bv-c__fotos { position: relative; display: grid; aspect-ratio: 5 / 5.6; max-height: 600px; overflow: hidden; border-radius: 999px 999px 22px 22px; background: var(--crema-2); }
.bv-c__foto { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .7s var(--curva), visibility 0s linear .7s; }
.bv-c__foto.activo { opacity: 1; visibility: visible; transition: opacity .7s var(--curva), visibility 0s; }
.bv-c__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; -webkit-user-drag: none; user-select: none; }

/* Sin movimiento: sin autoavance (la tarjeta activa se ve llena) y sin transiciones */
.bv-sl--quieto .bv-slide, .bv-sl--quieto .bv-slide__caja > *, .bv-sl--quieto .bv-slide__foto img, .bv-sl--quieto .bv-c__foto, .bv-sl--quieto .bv-c__foto img { transition: none !important; transform: none !important; }

/* ---------- 4. Sección 2: lista + suscripción ---------- */
.bv-cuerpo { padding: 80px 0 112px; }
.bv-cuerpo__in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; }
.bv-principal { min-width: 0; }
.bv-herr { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; }
.bv-dd { position: relative; }
.bv-dd__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 54px; padding: 0 18px 0 22px; border: 1.5px solid var(--bg-borde); border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font-size: 15.5px; font-weight: 500; text-align: left; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bv-dd__btn:hover { border-color: rgba(31, 26, 21, .4); }
.bv-dd__btn:focus-visible, .bv-dd--abierto .bv-dd__btn { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bv-dd__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-dd__n { flex: none; min-width: 32px; padding: 3px 9px; border-radius: var(--r-pildora); background: var(--crema); color: var(--acento-hondo); font-size: 12.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.bv-dd__btn > .lucide { flex: none; width: 18px; height: 18px; transition: transform .3s var(--curva); }
.bv-dd--abierto .bv-dd__btn > .lucide { transform: rotate(180deg); }
.bv-dd__lista { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 20px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .06), 0 24px 48px rgba(31, 26, 21, .16); outline: none; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 50% 0; transition: opacity .2s var(--curva), transform .25s var(--curva), visibility 0s linear .25s; }
.bv-dd--abierto .bv-dd__lista { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--curva), transform .25s var(--curva), visibility 0s; }
.bv-dd__op { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 14px; border-radius: 12px; color: var(--texto); font-size: 15px; cursor: pointer; transition: background-color .15s var(--curva-hover); }
.bv-dd__op:first-child { margin-bottom: 7px; }
.bv-dd__op:first-child::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -4px; height: 1px; background: var(--bg-linea); }
.bv-dd__nom { flex: 1; min-width: 0; }
.bv-dd__op .bv-dd__n { color: var(--texto-60); font-weight: 500; }
.bv-dd__op > .lucide { flex: none; width: 18px; height: 18px; color: var(--acento-hondo); opacity: 0; }
.bv-dd__op.activo { background: var(--crema); }
.bv-dd__op.activo .bv-dd__n { background: var(--blanco); }
.bv-dd__op[aria-selected="true"] { color: var(--acento-hondo); font-weight: 600; }
.bv-dd__op[aria-selected="true"] > .lucide { opacity: 1; }
.bv-dd__lista:focus-visible .bv-dd__op.activo { box-shadow: inset 0 0 0 2px rgba(206, 137, 59, .45); }

/* Carga al filtrar / buscar: esqueleto y entrada escalonada de los resultados */
.bv-esq__fila { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 0; }
.bv-esq__fila + .bv-esq__fila { border-top: 1px solid var(--bg-linea); }
.bv-esq__foto { display: block; aspect-ratio: 5 / 4; border-radius: 12px; }
.bv-esq__txt { display: grid; gap: 12px; }
.bv-esq__txt i { display: block; height: 12px; border-radius: 6px; }
.bv-esq__txt i:nth-child(1) { width: 22%; }
.bv-esq__txt i:nth-child(2) { width: 88%; height: 20px; }
.bv-esq__txt i:nth-child(3) { width: 66%; }
.bv-esq__txt i:nth-child(4) { width: 32%; }
.bv-esq__foto, .bv-esq__txt i { background: linear-gradient(90deg, var(--crema) 25%, var(--crema-2) 50%, var(--crema) 75%); background-size: 200% 100%; animation: bv-brillo 1.1s linear infinite; }
@keyframes bv-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bv-items--entra > * { animation: bv-entra .5s var(--curva) both; }
.bv-items--entra > :nth-child(2) { animation-delay: .05s; }
.bv-items--entra > :nth-child(3) { animation-delay: .1s; }
.bv-items--entra > :nth-child(n+4) { animation-delay: .15s; }
.bv-items { margin-top: 12px; }

.bv-lateral__in { position: sticky; top: calc(var(--bg-nav, 64px) + 24px); }
.bv-sus { padding: 30px 28px 28px; border-radius: 22px; background: var(--crema); }
.bv-sus__tit { text-wrap: balance; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; }
.bv-sus__tit em { font-style: normal; color: var(--acento-hondo); }
.bv-sus__p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--texto-60); }
.bv-sus form { display: grid; gap: 12px; margin-top: 22px; }
.bv-campo__caja { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1.5px solid var(--bg-borde); border-radius: 14px; background: var(--blanco); cursor: text; transition: border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
.bv-campo__caja:hover { border-color: rgba(31, 26, 21, .4); }
.bv-campo__caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .18); }
.bv-campo__caja > .lucide { width: 19px; height: 19px; flex: none; color: var(--texto-60); }
.bv-campo__caja input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; letter-spacing: -0.01em; outline: none; }
.bv-campo__caja input::placeholder { color: var(--texto-45); }
.bv-campo__error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 4px; color: var(--bv-error); font-size: 13px; }
.bv-campo__error[hidden] { display: none; }
.bv-campo--error .bv-campo__caja { border-color: var(--bv-error); }
.bv-campo--error .bv-priv__caja { border-color: var(--bv-error); }
.bv-priv { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; color: var(--texto-60); font-size: 14px; line-height: 1.45; cursor: pointer; }
.bv-priv input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bv-priv__caja { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--bg-borde); border-radius: 7px; background: var(--blanco); color: transparent; transition: background-color .2s var(--curva-hover), border-color .2s var(--curva-hover); }
.bv-priv__caja .lucide { width: 15px; height: 15px; stroke-width: 2.4; }
.bv-priv input:checked + .bv-priv__caja { border-color: var(--acento); background: var(--acento); color: var(--blanco); }
.bv-priv input:focus-visible + .bv-priv__caja { outline: 2px solid var(--acento); outline-offset: 2px; }
.bv-priv a { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.bv-sus__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 4px; border-radius: var(--r-pildora); background: var(--acento); color: var(--blanco); font-size: 15.5px; font-weight: 600; transition: background-color .2s var(--curva-hover); }
.bv-sus__btn:hover:not(:disabled) { background: var(--acento-hondo); }
.bv-sus__btn:disabled { cursor: progress; opacity: .8; }
.bv-sus__nota { font-size: 12.5px; color: var(--texto-60); text-align: center; }
.bv-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bv-sus__listo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; outline: none; animation: bv-entra .5s var(--curva) both; }
.bv-sus__listo > .lucide { width: 40px; height: 40px; margin-bottom: 8px; color: var(--acento-hondo); }
.bv-sus__listo .bv-sus__p { margin-top: 0; font-size: 16px; }
@keyframes bv-entra { from { opacity: 0; transform: translateY(8px); } }


/* Pantallas bajas: si el formulario no cabe, no se fija */
@media (max-height: 700px) and (min-width: 901px) { .bv-lateral__in { position: static; } }

/* ---------- 5. Responsive ---------- */
@media (max-width: 1180px) {
  .bv-sl--a { grid-template-columns: minmax(0, 1fr) 320px; }
  .bv-sl--a .bv-tab { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .bv-cuerpo__in { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .bv-sl--c { gap: 48px; }
  .bv-sl--c .bv-tab__tit { display: none; }
}
@media (max-width: 900px) {
  .bg-h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .bv-cab { padding-top: 24px; margin-bottom: 18px; }
  .bv-cab__sub { font-size: 15px; margin-top: 6px; }
  .bv-cab--fila { display: block; }
  .bv-cab--fila .bv-cab__sub { margin: 6px 0 0; }
  .bv-slide__ext { font-size: 15px; }
  .bv-pausa { top: 12px; right: 12px; width: 38px; height: 38px; }

  /* Tarjetas en móvil: 3 columnas compactas, solo la categoría + la barra */
  .bv-tabs:not(.bv-dots) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .bv-sl--a .bv-tab { display: flex; align-items: flex-start; min-height: 60px; padding: 10px 12px 13px; border-radius: 12px; }
  .bv-sl--a .bv-tab__foto, .bv-sl--a .bv-tab__tit { display: none; }
  .bv-sl--a .bv-tab__cat { font-size: 12.5px; line-height: 1.3; }
  .bv-sl--a .bv-tab__barra { left: 10px; right: 10px; }

  /* A: la caja de texto monta sobre el borde inferior de la foto */
  .bv-sl--a { grid-template-columns: 1fr; gap: 14px; }
  .bv-sl--a .bv-escena { height: auto; overflow: visible; border-radius: 0; background: none; }
  .bv-sl--a .bv-slide__foto { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 16px; }
  .bv-sl--a .bv-slide__caja { position: relative; left: auto; bottom: auto; width: auto; margin: -44px 12px 0; padding: 18px 18px 18px; gap: 8px 12px; border-radius: 16px; box-shadow: 0 12px 30px rgba(31, 26, 21, .12); }
  .bv-sl--a .bv-slide__tit, .bv-sl--b .bv-slide__tit, .bv-sl--c .bv-slide__tit { font-size: 1.3rem; line-height: 1.2; }
  .bv-sl--a .bv-slide__ext { display: none; }
  .bv-sl--a .bv-slide__caja { column-gap: 10px; }
  .bv-sl--a .bv-slide__caja .bg-meta { column-gap: 12px; }
  .bv-sl--a .bv-slide__cta { height: 42px; padding: 0 16px 0 14px; }
  .bv-sl--a .bv-tab { border-color: var(--bg-linea); }

  /* B: foto arriba, texto sobre el mismo fondo oscuro, tarjetas debajo */
  .bv-sl--b .bv-escena { height: auto; border-radius: 18px; clip-path: inset(0 round 18px); }
  .bv-sl--b .bv-slide__foto { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .bv-sl--b .bv-slide__foto::after { background: linear-gradient(180deg, rgba(34, 25, 18, 0) 45%, var(--bv-oscuro) 100%); }
  .bv-sl--b { margin-top: 16px; }
  .bv-sl--b .bv-slide__caja { height: auto; max-width: none; margin-top: -40px; padding: 0 20px 60px; }
  .bv-sl--b .bv-slide__tit { margin-top: 10px; }
  .bv-sl--b .bv-slide__ext { margin-top: 14px; }
  .bv-sl--b .bv-slide__pie { margin-top: 16px; }
  .bv-sl--b .bv-slide__ext { -webkit-line-clamp: 2; }
  .bv-sl--b .bv-slide__cta { height: 42px; }
  .bv-flecha { display: none; }
  .bv-dots { right: 14px; bottom: 14px; }
  .bv-dots .bv-tab { height: 34px; }

  /* C: título, arco, texto, pestañas */
  .bv-banda { padding: 24px 0 36px; }
  .bv-sl--c { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .bv-c__izq { display: contents; }
  .bv-cab--c { order: 0; margin-bottom: 18px; }
  .bv-c__marco { order: 1; padding: 10px; margin-bottom: 22px; }
  .bv-c__marco::before { border-radius: 50% 50% 24px 24px / 42% 42% 24px 24px; }
  .bv-c__fotos { aspect-ratio: 1 / .86; border-radius: 50% 50% 16px 16px / 42% 42% 16px 16px; }
  .bv-sl--c .bv-escena { order: 2; }
  .bv-sl--c .bv-slide__caja { gap: 10px; }
  .bv-sl--c .bv-slide__cta { height: 42px; }
  .bv-tabs-fila { order: 3; margin-top: 24px; padding-top: 18px; gap: 8px; align-items: flex-start; }
  .bv-sl--c .bv-tab { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 2px 4px 4px 0; }
  .bv-sl--c .bv-tab__tit { display: none; }
  .bv-sl--c .bv-tab__cat { font-size: 12.5px; line-height: 1.3; }
  .bv-tab__anillo { width: 38px; height: 38px; }
  .bv-sl--c .bv-pausa { width: 38px; height: 38px; }

  /* Sección 2 en una columna; la suscripción se intercala en la lista (JS) */
  .bv-cuerpo { padding: 48px 0 80px; }
  .bv-cuerpo__in { grid-template-columns: 1fr; gap: 0; }
  .bv-lateral { display: none; }
  .bv-herr { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10px; }
  .bg-buscar__campo, .bv-dd__btn { height: 50px; }
  .bv-items .bv-sus { margin: 16px 0; }
  .bv-items .bv-sus + .bgc-fila { border-top: 0; }
}
@media (max-width: 760px) {
  .bgc-fila__a { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; }
  .bgc-fila__foto { aspect-ratio: 1; border-radius: 10px; }
  .bv-esq__fila { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .bv-esq__foto { aspect-ratio: 1; border-radius: 10px; }
  .bgc-fila__tit { font-size: 16.5px; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bgc-fila .bg-t__ext { display: none; }
  .bgc-fila__txt { gap: 6px; }
  .bgc-fila .bg-meta { gap: 4px 12px; font-size: 12.5px; }
  .bg-conv { align-items: stretch; }
  .bg-conv__foto { flex: 0 0 34%; aspect-ratio: auto; }
  .bg-conv__txt { padding: 18px; }
  .bg-conv__tit { font-size: 20px; }
  .bg-conv__p { font-size: 14px; }
  .bv-sus { padding: 24px 20px 22px; }
  .bv-sus__tit { font-size: 24px; }
  .bg-mas { margin-top: 36px; }
}
@media (max-width: 380px) {
  .bg-conv { flex-direction: column; }
  .bg-conv__foto { flex: none; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .bgc-fila__foto img, .bv-slide__foto img, .bv-c__foto img { transition: none; transform: none; }
  .bv-slide, .bv-slide__caja > *, .bv-c__foto { transition: none; }
  .bv-sus__listo, .bv-items--entra > *, .bv-esq__foto, .bv-esq__txt i { animation: none; }
}
@media (max-width: 560px) {
  .bv-herr { grid-template-columns: 1fr; }
}

/* Espacio reservado para el slider mientras js/blog-v2.js lo pinta (evita el salto de diseño) */
.bv-top:empty { min-height: calc(clamp(460px, 38vw, 540px) + 32px); }
.bv-items:empty { min-height: 120vh; }
@media (max-width: 900px) { .bv-top:empty { min-height: calc((100vw - 2 * var(--pad-x)) * .75 + 300px); } }