* { box-sizing: border-box; }
:root, .band-dark { font-family: "Space Grotesk", Arial, sans-serif; color-scheme: dark; --bg:#101010; --panel:#191919; --fg:#f5f5f2; --muted:#c5c5c1; --rule:#50504c; --rule-soft:#333; --card:#1b1b1b; --card-line:#2e2e2e; --accent:#ffd600; --accent-soft:#d8b700; --accent-text:#ffd600; --halo:rgba(255,214,0,.18); --photo:#151515; background:var(--bg); color:var(--fg); }
.band-light { --bg:#f4f4f1; --panel:#fff; --fg:#101010; --muted:#45453f; --rule:#cfcdc5; --rule-soft:#dcdad2; --card:#fff; --card-line:#d7d5cc; --accent-soft:#8a7200; --accent-text:#101010; --halo:rgba(16,16,16,.14); --photo:#141414; background:var(--bg); color:var(--fg); }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--fg); }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:3px solid #ffd600; outline-offset:4px; }
::selection { background:var(--accent); color:#101010; }
.wrap { width:min(100% - 48px, 1310px); margin-inline:auto; }
.skip { position:absolute; z-index:10; left:16px; top:-100px; min-height:44px; padding:11px 18px; background:var(--accent); color:#101010; }
.skip:focus { top:12px; }
.reading-progress { position:fixed; z-index:20; inset:0 0 auto 0; height:3px; pointer-events:none; }
.reading-progress span { display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--scroll-progress,0)); }
:root:not([data-motion="on"]) .reading-progress { display:none; }
.blog-header { min-height:82px; display:flex; align-items:center; gap:25px; border-bottom:1px solid var(--rule); }
.blog-logo, .footer-brand { display:inline-flex; flex:none; align-items:center; width:143px; padding:4px; background:#101010; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.blog-logo:hover, .footer-brand:hover { transform:translateY(-2px); }
.blog-logo img, .footer-brand img { display:block; width:100%; height:auto; }
.header-nav { margin-left:auto; display:flex; gap:27px; align-items:center; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.header-nav a { position:relative; padding:14px 0; transition:color .25s; }
.header-nav a::after { content:""; position:absolute; left:0; bottom:10px; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.header-nav a:hover::after, .header-nav [aria-current="page"]::after { transform:scaleX(1); }
.header-nav a:hover, .header-nav [aria-current="page"] { color:var(--accent); }
.blog-controls { display:flex; gap:4px; align-items:center; }
.blog-controls a { min-width:40px; min-height:40px; display:grid; place-items:center; border:1px solid var(--rule); background:transparent; color:var(--fg); font-size:11px; font-weight:800; transition:background .25s, border-color .25s, transform .25s; }
.blog-controls [aria-current="page"] { background:var(--accent); border-color:var(--accent); color:#101010; }
.blog-controls a:hover:not([aria-current]) { background:var(--panel); border-color:var(--accent); }
.breadcrumb { display:flex; gap:11px; align-items:center; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; color:var(--muted); font-size:11px; line-height:1.5; }
.breadcrumb a { border-bottom:1px solid var(--accent); }
.overline { color:var(--accent-text); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; line-height:1.5; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:"Oswald",Impact,sans-serif; font-weight:600; letter-spacing:-.022em; }
.index-hero,.article-hero { position:relative; padding-top:clamp(42px,7vw,118px); padding-bottom:clamp(56px,8vw,128px); border-bottom:1px solid var(--rule); overflow:hidden; }
.index-hero::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.09; background:linear-gradient(90deg,transparent calc(100% - 1px),#ddd calc(100% - 1px)),linear-gradient(0deg,transparent calc(100% - 1px),#ddd calc(100% - 1px)); background-size:92px 92px; mask-image:linear-gradient(#000,transparent); animation:blog-grid 30s linear infinite; }
.index-hero::before,.article-hero::before { content:""; position:absolute; bottom:0; left:-18%; width:15%; height:2px; background:var(--accent); animation:blog-sweep 9s linear infinite; }
.index-hero .overline,.article-hero .overline { margin-bottom:23px; }
.index-hero h1,.article-hero h1 { max-width:1100px; font-size:clamp(52px,8vw,116px); line-height:1.15; margin:0 0 28px; overflow-wrap:break-word; }
.article-hero h1 { font-size:clamp(47px,6vw,92px); max-width:1050px; }
.intro { max-width:780px; color:var(--muted); font-size:clamp(16px,1.65vw,21px); line-height:1.65; margin:0; }
.hero-mark { position:absolute; right:0; bottom:30px; font-family:"Oswald",Impact,sans-serif; color:var(--accent); font-size:42px; animation:blog-float 7s ease-in-out infinite; }
.article-signal { margin-top:40px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:12px; padding-top:14px; font-size:10px; color:var(--muted); font-weight:700; letter-spacing:.13em; }
.index-list { padding:90px 0 104px; }
.index-list .overline,.other-reading .overline { color:var(--muted); }
.list-header { display:grid; grid-template-columns:190px 1fr; gap:35px; align-items:start; margin-bottom:34px; padding-bottom:25px; border-bottom:1px solid var(--rule-soft); }
.list-header h2 { font-size:clamp(33px,4vw,59px); line-height:1.18; max-width:900px; margin:0; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px; }
.blog-card { background:var(--card); color:var(--fg); border:1px solid var(--card-line); min-width:0; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s; }
.blog-card:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 0 -12px var(--halo); }
.blog-card-image { position:relative; display:block; height:clamp(240px,29vw,405px); background:var(--photo); overflow:hidden; }
.blog-card-image img { width:100%; height:100%; display:block; object-fit:contain; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.blog-card:hover .blog-card-image img { transform:scale(1.05); }
.blog-card-image span { position:absolute; left:16px; bottom:14px; background:#101010; color:var(--accent); font-size:12px; font-weight:800; padding:7px 10px; }
.blog-card-body { padding:clamp(23px,3vw,38px); }
.blog-card-body .overline { color:var(--muted); font-size:10px; }
.blog-card h2 { font-size:clamp(29px,3vw,48px); line-height:1.19; margin:18px 0 16px; }
.blog-card h2 a:hover { text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:6px; }
.blog-card-body > p:not(.overline) { color:var(--muted); font-size:15px; line-height:1.7; }
.inline-cta { min-height:44px; display:inline-flex; align-items:center; gap:20px; margin-top:12px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; border-bottom:2px solid var(--accent); transition:color .25s; }
.inline-cta span,.button span,.back-link span { display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.inline-cta:hover span,.button:hover span { transform:translate(3px,-3px); }
.back-link:hover span { transform:translateX(-4px); }
.index-caution { font-size:12px; line-height:1.6; color:var(--muted); margin:24px 0 0; }
.article-photo { position:relative; height:clamp(240px,44vw,575px); background:var(--photo); border:1px solid var(--rule); overflow:hidden; }
.article-photo img { width:100%; height:100%; display:block; object-fit:contain; }
.article-photo > span { position:absolute; left:15px; bottom:12px; background:#101010; color:#ffd600; padding:6px 10px; font-size:10px; font-weight:800; letter-spacing:.08em; }
.article-layout { display:grid; grid-template-columns:minmax(230px,.38fr) minmax(0,.85fr); gap:clamp(35px,7vw,115px); align-items:start; padding-top:78px; padding-bottom:110px; }
.summary { border-top:2px solid var(--accent); padding-top:20px; position:sticky; top:20px; }
.summary ul { list-style:none; padding:0; margin:0; }
.summary li { padding:17px 0; border-bottom:1px solid var(--rule); line-height:1.58; font-size:14px; }
.article-section { border-top:1px solid var(--rule); padding:35px 0 43px; scroll-margin-top:20px; }
.section-index { color:var(--accent-text); font-size:11px; font-weight:800; }
.article-section h2 { font-size:clamp(33px,3.5vw,53px); line-height:1.2; margin:14px 0 22px; }
.article-section p,.article-section li { color:var(--muted); font-size:16px; line-height:1.8; }
.article-section p { margin-bottom:18px; }
.article-section ul { padding-left:23px; }
.article-section li { margin-bottom:10px; padding-left:7px; }
.article-section li::marker { color:var(--accent-soft); }
.article-caveat { padding:24px 28px; border-left:3px solid var(--accent); background:var(--panel); }
.article-caveat p:last-child { line-height:1.7; color:var(--muted); margin:0; }
.sources { margin-top:45px; }
.sources h2 { font-size:33px; margin-bottom:15px; }
.sources ul { padding-left:20px; }
.sources li { margin:12px 0; line-height:1.6; }
.sources a { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.back-link { min-height:44px; display:inline-flex; align-items:center; gap:10px; border-bottom:2px solid var(--accent); margin-top:32px; font-size:12px; font-weight:800; }
.article-shell { padding-bottom:4px; }
.other-reading { border-top:1px solid var(--rule); padding-top:30px; padding-bottom:90px; }
.other-reading > .overline { color:var(--fg); }
.other-reading .blog-card { max-width:650px; }
.blog-cta { border-top:1px solid var(--rule); padding-top:62px; padding-bottom:90px; }
.blog-cta h2 { font-size:clamp(46px,7vw,92px); line-height:1.15; margin:15px 0; }
.blog-cta > p:not(.overline) { color:var(--muted); max-width:790px; line-height:1.6; font-size:14px; }
.button { display:inline-flex; min-height:54px; align-items:center; justify-content:space-between; gap:22px; margin-top:19px; padding:0 22px; background:var(--accent); color:#101010; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:background .25s, color .25s, transform .25s; }
.button:hover { background:#fff; transform:translateY(-2px); }
.blog-footer { display:flex; gap:30px; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); padding-top:45px; padding-bottom:65px; font-size:12px; line-height:1.7; }
.blog-footer p { margin-bottom:8px; }
.blog-footer a:not(.footer-brand) { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }

/* Movimiento discreto, equivalente al de la landing y desactivable. */
:root[data-motion="on"] [data-reveal] { opacity:0; transform:translate3d(0,24px,0); }
:root[data-motion="on"] [data-reveal="left"] { transform:translate3d(-24px,0,0); }
:root[data-motion="on"] [data-reveal="zoom"] { transform:scale(.97); }
:root[data-motion="on"] [data-reveal].is-revealed { opacity:1; transform:none; transition:opacity .75s cubic-bezier(.22,.68,.24,1) var(--reveal-delay,0ms), transform .75s cubic-bezier(.22,.68,.24,1) var(--reveal-delay,0ms); }
@keyframes blog-grid { to { background-position:92px 92px, 92px 92px; } }
@keyframes blog-sweep { from { left:-18%; } to { left:104%; } }
@keyframes blog-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

@media(max-width:850px) { .blog-header{gap:12px;} .blog-grid{gap:12px;} .article-layout{grid-template-columns:1fr; gap:35px;} .summary{position:static;} .summary ul{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} .summary li{border-top:1px solid var(--rule);} }
@media(max-width:640px) { .wrap{width:min(100% - 40px,1310px);} .blog-header{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; min-height:0; padding-top:12px; padding-bottom:8px; gap:0;} .blog-logo{width:114px;} .blog-controls{justify-self:end;} .blog-controls a,.blog-controls button{min-width:42px;min-height:42px;} .header-nav{grid-column:1/-1; grid-row:2; margin:8px 0 0; border-top:1px solid var(--rule); gap:22px;} .header-nav a{min-height:44px; display:inline-flex; align-items:center;} .breadcrumb{font-size:10px;} .index-hero,.article-hero{padding-top:35px;padding-bottom:66px;} .index-hero h1,.article-hero h1{font-size:clamp(47px,11vw,65px);line-height:1.19;} .hero-mark{font-size:26px;bottom:16px;} .article-signal{font-size:9px;} .index-list{padding:62px 0 75px;} .list-header{display:block;} .list-header h2{font-size:39px;margin-top:16px;} .blog-grid{grid-template-columns:1fr;} .blog-card-image{height:min(80vw,340px);} .article-photo{height:min(82vw,380px);} .article-layout{padding-top:42px;padding-bottom:70px;} .summary ul{display:block;} .article-section{padding:27px 0 30px;} .article-section h2{font-size:36px;} .article-section p,.article-section li{font-size:15px;} .blog-cta{padding-top:50px;padding-bottom:70px;} .blog-footer{display:block;padding:34px 0 48px;} .blog-footer > div{margin-top:19px;} :root[data-motion="on"] [data-reveal],:root[data-motion="on"] [data-reveal="left"]{transform:translate3d(0,16px,0);} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after{transition:none!important;animation:none!important;} :root[data-motion="on"] [data-reveal]{opacity:1;transform:none;} }