/* Blog (/blog/): artículos de cada episodio. Generado por WEB/_fuentes/blog/build_blog.py, que copia este archivo
   a site/assets/css/blog.css. Editar aquí, no en site/. Usa las variables de main.css. */

.bl-wrap { padding-top: clamp(18px, 3vw, 34px); padding-bottom: 48px; }
.bl-crumbs { font: 700 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.bl-crumbs a { color: var(--seal); text-decoration: none; }
.bl-crumbs a:hover { text-decoration: underline; }

.bl-article { max-width: 780px; margin: 0 auto; }
.bl-head { display: grid; gap: 12px; margin-bottom: 22px; }
.bl-head h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; margin: 0; text-wrap: balance; }
.bl-head--index { max-width: 780px; margin: 0 auto 28px; }
.bl-head--index .row { margin-top: 6px; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* vídeo: miniatura propia, el iframe solo al pulsar */
.yt-frame { position: relative; aspect-ratio: 16 / 9; border: var(--line) solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }
.yt-frame iframe, .yt-lite, .yt-lite img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-lite img { object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 60px; transform: translate(-50%, -50%); border-radius: 16px; background: var(--seal); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease; }
.yt-play::after { content: ""; position: absolute; left: 34px; top: 16px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--white); }
.yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { transform: translate(-50%, -50%) scale(1.08); }

/* texto */
.bl-body { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--ink-2); margin-top: 26px; }
.bl-body > p:first-child { font-size: 1.12em; color: var(--ink); }
.bl-body h2 { font-size: clamp(24px, 2.8vw, 31px); line-height: 1.15; color: var(--ink); margin: 42px 0 12px; }
.bl-body h3 { font-size: 20px; color: var(--ink); margin: 26px 0 6px; }
.bl-body p { margin: 0 0 16px; }
.bl-body a:not(.btn) { color: var(--seal); font-weight: 600; }
.bl-body ul, .bl-body ol { padding-left: 1.3em; margin: 0 0 16px; }
.bl-body li { margin-bottom: 6px; }
.bl-body strong { color: var(--ink); }
.bl-body blockquote { margin: 0 0 16px; border-left: 5px solid var(--gold); padding: 10px 16px; background: var(--white); border-radius: 0 12px 12px 0; }
.bl-body .jp { font-family: var(--f-jp); font-weight: 700; color: var(--ink); }

.bl-table { overflow-x: auto; margin: 6px 0 20px; border: var(--line) solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); background: var(--white); }
.bl-table table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.35; }
.bl-table th { text-align: left; font: 800 13px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.bl-table td { padding: 10px 14px; border-top: 2px solid var(--paper-3); vertical-align: top; }
.bl-table td:first-child { font-size: 20px; white-space: nowrap; }
.bl-table td:first-child .jp { color: var(--seal); }

/* llamada al vídeo */
.bl-cta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin: 36px 0 10px; padding: 18px 20px; background: var(--cream); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.bl-cta img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--ink); background: var(--white); }
.bl-cta b { font: 900 22px/1.1 var(--f-display); color: var(--ink); }
.bl-cta p { margin: 6px 0 12px; font-size: 16px; line-height: 1.45; }
.bl-wrap .btn svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .bl-cta { grid-template-columns: 1fr; text-align: left; } .bl-cta img { width: 72px; height: 72px; } }

/* tarjetas */
.bl-more { max-width: 1100px; margin: 54px auto 0; }
.bl-more h2 { font-size: clamp(24px, 3vw, 32px); }
.bl-more .row { margin-top: 18px; }
.bl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.bl-grid > li { display: flex; min-width: 0; }
.bl-card { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--white); color: var(--ink); text-decoration: none; border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.bl-card:hover, .bl-card:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.bl-thumb { display: block; aspect-ratio: 16 / 9; background: var(--paper-3); border-bottom: var(--line) solid var(--ink); }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card-txt { display: grid; gap: 8px; padding: 14px 16px 18px; }
.bl-card-txt b { font: 800 19px/1.2 var(--f-display); }
.bl-card-txt small { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.bl-grid--index { max-width: 1100px; margin: 0 auto; }