/* ═══════════════════════════════════════════════════════════
   VWT · BLOG · identidad Vito
   Un destacado a pantalla ancha, filtros como palabras grandes y
   los artículos como piezas editoriales: foto con esquinas,
   categoría en bordó, título que se enciende. Contrato del sitio.
   ═══════════════════════════════════════════════════════════ */
.bl{ --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; --linea: rgba(11,7,8,.14);
     font-family: 'Poppins', sans-serif; background: var(--papel); color: var(--ink) }
.bl-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.bl-kick{ display: block; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.bl-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: 22ch }
.bl-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) }
.bl-lnk{ display: inline-flex; align-items: center; gap: .3rem; margin-top: 1.2rem; font-weight: 600; color: var(--ink) }
.bl-lnk i{ font-style: normal; transition: transform .6s var(--e) }
.bl-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 clamp(2rem,4vw,3rem) }

/* destacado: foto ancha con el texto al pie */
.bl-dest{ padding-bottom: var(--sec) }
.bl-dest-a{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: calc(64.0px * var(--k, 1)); align-items: end; text-decoration: none; color: inherit }
.bl-dest-fig{ display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16/10; background: var(--ink) }
.bl-dest-fig img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.4s var(--e) }
.bl-dest-a:hover .bl-dest-fig img{ transform: scale(1.06) }
.bl-dest-tx{ display: block; padding-bottom: .4rem }
.bl-dest-t{ display: block; margin-top: .8rem; font-size: calc(51.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: 1; transition: color var(--t) var(--e) }
.bl-dest-d{ display: block; margin-top: 1rem; font-size: calc(17.9px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft); max-width: 46ch }
.bl-dest-a:hover .bl-dest-t{ color: var(--acc) }
.bl-dest-a:hover .bl-lnk i{ transform: translateX(4px) }

/* filtros como palabras */
.bl-todos{ padding: 0 0 var(--sec); border-top: 1px solid var(--linea) }
.bl-filtros{ display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: clamp(1.4rem,3vw,2.2rem) 0 }
.bl-f{ appearance: none; background: none; border: 0; padding: .1rem 0; cursor: pointer; font: inherit; font-size: calc(25.6px * var(--k, 1)); font-weight: 300; letter-spacing: -.03em; color: var(--mut); border-bottom: 2px solid transparent; transition: color var(--t) var(--e), border-color var(--t) var(--e) }
.bl-f:hover{ color: var(--ink) }
.bl-f.is-on{ color: var(--ink); font-weight: 700; border-bottom-color: var(--acc) }

/* la lista */
.bl-lista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.6rem,3vw,2.8rem) clamp(1.4rem,2.6vw,2.4rem) }
.bl-a{ transition: opacity .5s var(--e) }
.bl-a.oculto{ display: none }
.bl-a a{ display: block; text-decoration: none; color: inherit }
.bl-a-fig{ display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--ink) }
.bl-a-fig img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--e) }
.bl-a a:hover .bl-a-fig img{ transform: scale(1.06) }
.bl-a-k{ display: block; margin-top: .9rem; font-size: .82rem; font-weight: 600; color: var(--acc) }
.bl-a-t{ display: block; margin-top: .4rem; font-size: calc(23.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; transition: color var(--t) var(--e) }
.bl-a a:hover .bl-a-t{ color: var(--acc) }
.bl-a-d{ display: block; margin-top: .5rem; font-size: .98rem; line-height: 1.55; font-weight: 300; color: var(--soft) }

@media (max-width: calc(1024px * var(--k, 1))){ .bl-lista{ grid-template-columns: repeat(2, minmax(0,1fr)) } .bl-dest-a{ grid-template-columns: 1fr } }
@media (max-width: 620px){ .bl-lista{ grid-template-columns: 1fr } }

/* modo oscuro */
html[data-theme="dark"] .bl, body.dark .bl{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --linea: rgba(255,255,255,.12) }