:root { color-scheme: dark; --canvas:#0e1114; --surface:#171e24; --raised:#1d262f; --ink:#f4f1eb; --muted:#aeb7bf; --line:rgba(220,230,238,.15); --orange:#f47721; --orange-light:#ffb057; --blue:#69c8fa; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { background:var(--canvas); } body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(ellipse 55% 30% at 50% 5%,rgba(80,113,143,.2),transparent),var(--canvas); line-height:1.6; } a { color:inherit; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:fixed; z-index:20; top:-4rem; left:50%; padding:.7rem 1rem; color:#111; background:#fff; transform:translateX(-50%); } .skip-link:focus-visible { top:1rem; }
.site-header { position:relative; z-index:10; height:68px; border-bottom:1px solid var(--line); background:#0a0c0e; } .site-header__inner { display:flex; width:min(calc(100% - 64px),1080px); height:100%; align-items:center; justify-content:space-between; margin:auto; gap:2rem; } .brand { display:flex; align-items:center; gap:.55rem; color:#fff; font-size:.88rem; font-weight:900; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; } .brand small { display:block; color:var(--muted); font-size:.5rem; letter-spacing:.1em; } .brand__orb { display:grid; width:29px; height:29px; place-items:center; border:2px solid var(--orange-light); border-radius:50%; color:var(--orange-light); font-size:.85rem; } .primary-nav { display:flex; align-items:center; gap:1.4rem; } .primary-nav > a { color:#e7ebee; font-size:.76rem; font-weight:700; text-decoration:none; } .primary-nav > a:hover,.primary-nav > a:focus-visible { color:var(--orange-light); } .header-search { position:relative; display:flex; align-items:center; margin:0; } .header-search input { width:145px; padding:.45rem .6rem; border:1px solid var(--line); border-radius:3px 0 0 3px; color:var(--ink); background:#171b20; } .header-search button { padding:.43rem .62rem; border:1px solid var(--line); border-left:0; color:var(--orange-light); background:#171b20; cursor:pointer; } .header-search p,.header-search ul { position:absolute; left:-9999px; } .menu-toggle { display:none; }
.entry-hero { position:relative; min-height:clamp(360px,37.5vw,560px); padding:clamp(72px,8vw,118px) max(7vw,70px) 52px; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(3,13,25,.98),rgba(3,13,25,.9) 38%,rgba(7,38,65,.58) 70%,rgba(21,70,103,.38)),radial-gradient(circle at 78% 45%,rgba(255,154,42,.35),transparent 17%),radial-gradient(circle at 68% 58%,rgba(95,196,255,.4),transparent 32%); } .entry-hero__media { position:absolute; z-index:0; inset:0; } .entry-hero__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .entry-hero::before { position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(3,13,25,.98),rgba(3,13,25,.88) 34%,rgba(3,13,25,.46) 62%,rgba(3,13,25,.2)),radial-gradient(#d9efff 1px,transparent 1px); background-size:auto,55px 55px; content:""; } .entry-hero--with-media::before { background:linear-gradient(90deg,rgba(3,13,25,.98),rgba(3,13,25,.88) 34%,rgba(3,13,25,.46) 62%,rgba(3,13,25,.2)); } .entry-hero > :not(.entry-hero__ornament):not(.entry-hero__media) { position:relative; z-index:2; max-width:min(52%,650px); } .entry-hero__ornament { position:absolute; z-index:1; top:-130px; right:13%; width:430px; height:430px; border:2px solid rgba(255,176,87,.3); border-radius:50%; box-shadow:0 0 0 38px rgba(255,176,87,.07),0 0 0 78px rgba(105,200,250,.05); } .entry-categories,.entry-tags { display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:0; list-style:none; } .entry-categories { margin-bottom:.9rem; } .entry-categories a,.entry-categories span,.entry-tags a,.entry-tags span { display:block; padding:.23rem .55rem; border:1px solid rgba(255,176,87,.6); border-radius:999px; color:var(--orange-light); font-size:.64rem; font-weight:800; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; } .entry-categories a:hover,.entry-tags a:hover { color:#fff; border-color:#fff; } h1 { margin:0 0 .7rem; font-size:clamp(2.8rem,7vw,5.5rem); line-height:.94; letter-spacing:-.055em; text-transform:uppercase; } .entry-excerpt { max-width:36rem; margin:0 0 1.1rem; color:#e0e7ea; font-size:clamp(1rem,2vw,1.25rem); line-height:1.55; text-wrap:balance; } .entry-meta { margin:0; color:#cad1d7; font-size:.78rem; font-weight:700; }
.editorial-surface,.site-index { width:min(calc(100% - 40px),800px); margin:auto; padding:42px 27px 0; border-right:1px solid var(--line); border-left:1px solid var(--line); background:linear-gradient(105deg,rgba(25,32,39,.98),rgba(17,25,32,.98)); box-shadow:0 18px 42px rgba(0,0,0,.12); } .article-flow > p { margin:0 0 1.3rem; color:#e5e8ea; font-size:1.02rem; } .article-flow h2 { margin:2.8rem 0 .8rem; padding-left:.8rem; border-left:5px solid var(--orange); font-size:1.6rem; line-height:1.2; } .article-flow h3 { margin:2rem 0 .6rem; color:#fff; font-size:1.22rem; } .article-flow blockquote { margin:2rem 0; padding:1rem 1.2rem; border-left:3px solid var(--blue); color:#dbe9f2; background:rgba(105,200,250,.09); } .article-flow .callout { margin:2rem 0; padding:1rem 1.2rem; border:1px solid rgba(105,200,250,.34); border-left:4px solid var(--blue); background:rgba(105,200,250,.09); color:#e5e8ea; } .article-flow .callout::before { display:block; margin-bottom:.55rem; color:var(--blue); font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .article-flow .callout--info::before { content:"i  Información"; } .article-flow .callout--did-you-know { border-left-color:var(--orange); background:rgba(255,154,42,.09); } .article-flow .callout--did-you-know::before { color:var(--orange-light); content:"✦  ¿Sabías que...?"; } .article-flow .callout--tip { border-left-color:#72d6a0; background:rgba(114,214,160,.09); } .article-flow .callout--tip::before { color:#9ce8bc; content:"✦  Consejo"; } .article-flow .callout--note { border-left-color:#b8c0c8; background:rgba(184,192,200,.08); } .article-flow .callout--note::before { color:#d7dde2; content:"•  Nota"; } .article-flow .callout--warning { border-left-color:#ef5b5b; background:rgba(239,91,91,.11); } .article-flow .callout--warning::before { color:#ff9b9b; content:"!  Advertencia"; } .article-flow pre { overflow:auto; padding:1rem; background:#0b1015; } .article-flow :is(ul,ol) { padding-left:1.4rem; } .content-image { max-width:100%; margin:1.6rem auto; } .content-image img { display:block; max-width:100%; height:auto; } .content-image figcaption { margin-top:.45rem; color:var(--muted); font-size:.72rem; } .content-image--small { width:min(100%,20rem); } .content-image--medium { width:min(100%,36rem); } .content-image--large { width:min(100%,46rem); } .content-image--full-width { width:100%; } .content-image--full-width img { width:100%; } .article-flow .ad-placeholder { display:grid; min-height:95px; place-content:center; gap:.3rem; margin:2.25rem 0; border:1px dashed rgba(202,211,218,.42); border-radius:5px; color:#c3c7cb; text-align:center; } .article-flow .ad-placeholder span { font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .article-flow .ad-placeholder small { color:#9ca2a8; font-size:.65rem; } .entry-footer { padding:1.5rem 0 2rem; border-top:1px solid var(--line); } .entry-tags { align-items:center; } .entry-tags::before { color:var(--muted); font-size:.68rem; content:"Etiquetas"; } .entry-tags a,.entry-tags span { border-color:rgba(105,200,250,.5); color:#dcecf5; }
.related { width:min(calc(100% - 40px),800px); margin:0 auto; padding:3rem 27px 4rem; border-right:1px solid var(--line); border-left:1px solid var(--line); background:linear-gradient(105deg,rgba(25,32,39,.98),rgba(17,25,32,.98)); } .related__heading { margin-bottom:1.3rem; } .related__heading h2 { margin:0; color:#fff; font-size:1.45rem; line-height:1.2; text-transform:uppercase; } .related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .related-card { min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--raised); transition:border-color .18s ease,transform .18s ease; } .related-card > a { display:grid; height:100%; color:inherit; text-decoration:none; } .related-card img,.related-card__placeholder { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:linear-gradient(135deg,#223340,#14212b 58%,#362315); } .related-card > a > span:not(.related-card__placeholder) { padding:.75rem .8rem 0; color:var(--orange-light); font-size:.62rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .related-card h3 { margin:.35rem .8rem 0; color:#fff; font-size:1rem; line-height:1.25; } .related-card p { margin:.55rem .8rem 0; color:#cbd3d9; font-size:.78rem; line-height:1.45; } .related-card b { align-self:end; padding:.85rem .8rem; color:var(--blue); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; } .related-card b i { font-style:normal; } .related-card:hover { border-color:rgba(255,176,87,.75); transform:translateY(-2px); } .related-card > a:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
.site-index { min-height:60vh; padding-bottom:3rem; } .site-index h1 { font-size:2.1rem; text-transform:none; } .entry-list { padding:0; list-style:none; } .entry-list article { padding:1rem 0; border-top:1px solid var(--line); } .entry-list h2 { margin:0; font-size:1.15rem; } .entry-list a { color:var(--orange-light); text-decoration:none; }
.home-section { padding:2.8rem 0; border-top:1px solid var(--line); } .home-section__header { margin-bottom:1.2rem; } .home-section__header h2 { position:relative; margin:0; padding-left:1rem; color:#fff; font-size:1.5rem; line-height:1.2; text-transform:uppercase; } .home-section__header h2::before { position:absolute; top:.08em; bottom:.08em; left:0; width:4px; background:var(--orange); content:""; } .home-featured-grid,.home-latest-grid { display:grid; align-items:start; gap:1rem; } .home-featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-latest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .home-featured-card,.home-latest-card { min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--raised); } .home-featured-card__link,.home-latest-card__link { display:block; color:inherit; text-decoration:none; } .home-featured-card img,.home-featured-card__placeholder,.home-latest-card img,.home-latest-card__placeholder { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:linear-gradient(135deg,#223340,#14212b 58%,#362315); } .home-featured-card__body { padding:1rem; } .home-latest-card__body { padding:.8rem; } .home-featured-card h3,.home-latest-card h3 { margin:.25rem 0 .45rem; color:#fff; line-height:1.25; } .home-featured-card h3 { font-size:1.2rem; } .home-latest-card h3 { font-size:1rem; } .home-featured-card p,.home-latest-card p { margin:.35rem 0 .65rem; color:#cbd3d9; font-size:.82rem; line-height:1.45; } .home-card__categories { display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:0; list-style:none; } .home-card__categories a { color:var(--orange-light); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; } .home-featured-card:focus-within,.home-latest-card:focus-within { outline:2px solid var(--orange-light); outline-offset:3px; } .home-category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.75rem; } .home-category-card { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:4rem; padding:1rem; border:1px solid rgba(255,176,87,.45); color:var(--orange-light); background:rgba(244,119,33,.06); font-size:.76rem; font-weight:900; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } .home-category-card:hover,.home-category-card:focus-visible { border-color:#fff; color:#fff; outline:none; } .home-category-card b { color:var(--blue); font-size:1.1rem; }
.site-footer { border-top:1px solid var(--line); background:#090b0d; } .site-footer__inner { display:grid; width:min(calc(100% - 64px),1080px); padding:2.2rem 0 1.3rem; margin:auto; grid-template-columns:1fr 1fr; gap:1rem; } .site-footer p,.site-footer small { margin:0; color:#9da7af; font-size:.72rem; } .site-social-links { display:flex; align-items:center; justify-content:flex-end; gap:.45rem; } .site-social-link { display:grid; width:30px; height:30px; place-items:center; border:1px solid rgba(255,176,87,.48); border-radius:50%; color:var(--orange-light); } .site-social-link:hover,.site-social-link:focus-visible { border-color:#fff; color:#fff; } .site-social-link svg { width:15px; height:15px; fill:currentColor; } .site-footer small { grid-column:1/-1; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.08); }
@media (max-width:820px) { .site-header { height:64px; } .site-header__inner { width:calc(100% - 40px); } .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.18); background:transparent; } .menu-toggle span:not(.sr-only) { display:block; width:16px; height:1px; margin:auto; background:#fff; } .primary-nav { position:absolute; top:64px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:1rem 20px 1.3rem; border-bottom:1px solid var(--line); background:#17191d; } .primary-nav.is-open { display:flex; } .primary-nav > a { padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.08); } .header-search { width:100%; margin-top:.9rem; } .header-search input { flex:1; width:auto; } }
@media (max-width:760px) { .entry-hero { min-height:410px; padding:76px 20px 52px; background:linear-gradient(90deg,rgba(3,13,25,.98),rgba(3,13,25,.91) 48%,rgba(3,13,25,.55)),radial-gradient(circle at 78% 52%,rgba(255,154,42,.33),transparent 19%),radial-gradient(circle at 72% 63%,rgba(95,196,255,.34),transparent 35%); } .entry-hero::before { background:linear-gradient(90deg,rgba(3,13,25,.98),rgba(3,13,25,.9) 49%,rgba(3,13,25,.52)),radial-gradient(#d9efff 1px,transparent 1px); background-size:auto,55px 55px; } .entry-hero__media img { object-position:65% center; } .entry-hero > :not(.entry-hero__ornament):not(.entry-hero__media) { max-width:100%; } .entry-hero__ornament { top:50px; right:-95px; width:270px; height:270px; } .editorial-surface,.site-index,.related { width:calc(100% - 40px); padding:35px 20px 0; } .related { padding-bottom:3.5rem; } .related-grid { grid-template-columns:1fr; } .home-featured-grid,.home-latest-grid { grid-template-columns:1fr; } .article-flow > p { font-size:1.04rem; line-height:1.75; } .article-flow h2 { margin-top:3.25rem; font-size:1.65rem; } .content-image--small,.content-image--medium,.content-image--large,.content-image--full-width { width:100%; } .entry-footer { padding-bottom:3.5rem; } .site-footer__inner { width:calc(100% - 40px); grid-template-columns:1fr; } .site-footer small { grid-column:auto; } }
/* DB-TPL-001: jerarquía editorial H2/H3; los pseudo-elementos son decorativos. */
.article-flow h2 { position:relative; padding-left:2rem; border-left:0; color:#fff; }
.article-flow h2::before { position:absolute; top:.14em; bottom:auto; left:0; width:1.25rem; height:1.25rem; border:1px solid rgba(255,205,100,.82); border-radius:50%; background:radial-gradient(circle at 34% 29%,#ffd77c 0 7%,transparent 8%),linear-gradient(145deg,#ff9a2b,#e65b12); box-shadow:0 0 10px rgba(255,122,24,.2); content:""; }
.article-flow h2::after { position:absolute; top:calc(.14em + .34rem); left:.34rem; width:.57rem; height:.57rem; background:#fff4c4; clip-path:polygon(50% 0%,61% 35%,98% 38%,68% 60%,79% 96%,50% 74%,21% 96%,32% 60%,2% 38%,39% 35%); content:""; }
.article-flow h3 { position:relative; margin:2.2rem 0 .85rem; padding-left:.78rem; color:#fff; font-size:1.18rem; font-weight:750; line-height:1.3; }
.article-flow h3::before { position:absolute; top:.19em; bottom:.18em; left:0; width:2px; border-radius:2px; background:var(--orange); content:""; }
.article-flow :is(p,.callout__content) a { color:var(--orange-light); font-weight:700; text-decoration-line:underline; text-decoration-thickness:.12em; text-underline-offset:.16em; } .article-flow :is(p,.callout__content) a:hover { color:#fff; } .article-flow :is(p,.callout__content) a:focus-visible { outline:2px solid var(--orange-light); outline-offset:3px; }
@media (max-width:760px) { .article-flow h2 { padding-left:1.85rem; } .article-flow h2::before { top:.16em; width:1.15rem; height:1.15rem; } .article-flow h2::after { top:calc(.16em + .31rem); left:.31rem; width:.53rem; height:.53rem; } .article-flow h3 { margin-top:2rem; padding-left:.72rem; font-size:1.16rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }