/* Blog de Chimenea Mágica (tools/blog.mjs): el aspecto de la B «Paraguas» en páginas de lectura. Sin JavaScript.
   Media queries con sintaxis clásica (iOS 15). */
@font-face { font-family: 'Fraunces B'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fraunces.woff2') format('woff2-variations'); }
@font-face { font-family: 'Manrope B'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('manrope.woff2') format('woff2-variations'); }
:root { --noche: #0e1340; --noche-2: #161d5a; --crema: #fff4e2; --suave: rgba(255, 244, 226, 0.76); --linea: rgba(255, 244, 226, 0.14); --oro: #ffcf6b; --rosa: #ff7eb6; --margen: clamp(18px, 5vw, 64px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.bl { margin: 0; background: radial-gradient(900px 500px at 90% -10%, rgba(255, 207, 107, 0.12), transparent 60%), var(--noche); color: var(--crema); font: 500 17px/1.7 'Manrope B', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color-scheme: dark; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--oro); }
a:focus-visible, .bl-boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
h1, h2 { font-family: 'Fraunces B', Georgia, serif; font-weight: 380; line-height: 1.1; letter-spacing: -0.015em; }
.bl-saltar { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 10px; background: var(--crema); color: var(--noche); }
.bl-saltar:focus { top: 12px; }

.bl-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: max(14px, env(safe-area-inset-top)) var(--margen) 14px; }
.bl-marca { display: flex; align-items: center; gap: 12px; color: var(--crema); text-decoration: none; min-width: 0; }
.bl-marca img { width: 46px; flex: none; }
.bl-marca span { display: grid; font-size: 13px; line-height: 1.3; color: var(--suave); }
.bl-marca b { font-family: 'Fraunces B', Georgia, serif; font-weight: 450; font-size: 19px; color: var(--crema); }
.bl-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--oro); color: var(--noche); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 28px -12px rgba(255, 207, 107, 0.7); }
@media (max-width: 480px) { .bl-marca span { display: none; } }

.bl-migas { padding: 6px var(--margen) 0; font-size: 14px; }
.bl-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: var(--suave); }
.bl-migas li + li::before { content: '›'; margin-right: 6px; color: var(--oro); }
.bl-migas a { color: var(--suave); }
.bl-main { padding: 0 var(--margen) 8vh; }
.bl-intro { max-width: 760px; margin: 0 auto; padding: 5vh 0 3vh; }
.bl-ante { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.bl-intro h1 { margin: 0; font-size: clamp(36px, 6vw, 64px); }
.bl-intro > p:last-child { color: var(--suave); font-size: 18px; max-width: 58ch; }

.bl-sobre { max-width: 760px; margin: 0 auto 5vh; color: var(--suave); }
.bl-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bl-tarjeta a { display: grid; gap: 10px; height: 100%; padding: 12px 12px 22px; border-radius: 28px; background: rgba(255, 244, 226, 0.04); box-shadow: inset 0 0 0 1px var(--linea); color: var(--crema); text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; }
.bl-tarjeta img { width: 100%; border-radius: 50% 50% 18px 18px / 22% 22% 18px 18px; }
.bl-tarjeta__t { padding: 6px 8px 0; font-family: 'Fraunces B', Georgia, serif; font-size: 23px; line-height: 1.2; }
.bl-tarjeta__d { padding: 0 8px; color: var(--suave); font-size: 15px; line-height: 1.55; }
@media (hover: hover) { .bl-tarjeta a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 207, 107, 0.5); } }

.bl-articulo { max-width: 760px; margin: 0 auto; }
.bl-foto { margin: 0 0 4vh; }
.bl-foto img { width: 100%; border-radius: 50% 50% 22px 22px / 16% 16% 22px 22px; box-shadow: 0 30px 70px -30px rgba(2, 4, 20, 0.9); }
.bl-texto h2 { margin: 2.2em 0 0.5em; font-size: clamp(26px, 3.6vw, 34px); color: var(--crema); }
.bl-texto p, .bl-texto li { color: var(--suave); }
.bl-texto b { color: var(--crema); }
.bl-texto ul { padding-left: 1.2em; }
.bl-texto li { margin: 0.4em 0; }
.bl-tabla { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.bl-tabla caption { text-align: left; padding-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.bl-tabla th, .bl-tabla td { padding: 12px 10px; border-bottom: 1px solid var(--linea); text-align: left; }
.bl-tabla thead th { color: var(--suave); font-size: 13px; font-weight: 700; }
.bl-tabla tbody th { font-weight: 700; color: var(--crema); }
.bl-tabla td:last-child { color: var(--oro); font-weight: 800; }
.bl-cta { margin: 6vh 0 0; padding: clamp(22px, 4vw, 36px); border-radius: 28px; background: linear-gradient(160deg, #1d2774, #131a5a); box-shadow: inset 0 0 0 1px rgba(255, 207, 107, 0.45); }
.bl-cta__t { margin: 0 0 6px; font-family: 'Fraunces B', Georgia, serif; font-size: 28px; }
.bl-cta p { color: var(--suave); }
.bl-mas { max-width: 1100px; margin: 8vh auto 0; }
.bl-mas h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 22px; }

.bl-pie { padding: 5vh var(--margen) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); text-align: center; color: var(--suave); font-size: 15px; }
.bl-pie a { color: var(--crema); }
.bl-firma a { display: inline-block; padding: 12px 0; color: var(--oro); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (prefers-reduced-motion: reduce) { .bl-tarjeta a { transition: none; } }