/* Todo ARM: superficies neumórficas compartidas por portal, índices y artículos.
   Cargar una vez desde seo.html, después de navegación y las hojas de sección. */
:root {
    color-scheme: dark;
    /* Conserva la paleta original definida en style.css. */
    --neu-surface: var(--color-panel-bg);
    --neu-tile: #10212b;
    --neu-raised: 14px 14px 28px #020508d9, -7px -7px 20px #21425266,
        inset 1px 1px 0 #c4f4ff1f, inset -1px -1px 0 #00000099;
    --neu-small: 7px 7px 14px #020508cc, -4px -4px 12px #21425280,
        inset 1px 1px 0 #c4f4ff24, inset -1px -1px 0 #00000080;
    --neu-inset: inset 7px 7px 16px #020508cc, inset -5px -5px 12px #21425280,
        1px 1px 0 #c4f4ff14;
    --color-tech: #1cbcd4;
    --color-gaming: #c18bff;
    --color-elec: #f5a623;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    --max-width-header: 1200px;
    --padding-body: 32px clamp(18px, 4vw, 64px);
}
body { background: var(--bg-gradient); }
.site-header { background: var(--neu-surface); padding: 18px 24px; border: 1px solid #29434f; border-radius: 24px; box-shadow: var(--neu-raised); margin-bottom: 56px; }
.site-brand { border-radius: 16px; }
.site-header .logo-image, .top .brand img { width: 52px; height: 52px; }
.site-header .site-nav { gap: 8px 16px; }
.site-header .site-nav > a { font-size: .8rem; }
.site-header .site-directory > summary, .site-menu > summary, .language-switcher .language-option, .site-header .site-search input {
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    background: var(--neu-surface);
    color: var(--color-text-light);
    box-shadow: var(--neu-small);
}
.site-header .site-search input { background: #0d1922; box-shadow: var(--neu-inset); }
.site-header .site-search button { border-radius: 12px; background: var(--color-focus); border-color: transparent; box-shadow: var(--neu-small); }
.language-switcher .language-option--current, .language a[aria-current] { background: var(--color-focus); color: #06171e; border-color: var(--color-focus); box-shadow: var(--neu-inset); }
.language-switcher a.language-option--link, .language-switcher a.language-option--link:visited { background: #102a35; color: var(--color-text-secondary); }
.site-header nav.site-benefits > a { border-radius: 10px; box-shadow: var(--neu-small); }
.site-directory-panel, .site-menu-panel { border-radius: 18px; }
.site-directory-panel { background: var(--neu-surface); box-shadow: var(--neu-raised); }
.main-content--news, main { max-width: 1120px; }
.news-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; gap: 48px; padding: 20px 0 64px; text-align: left; }
.news-hero-copy { min-width: 0; }
.news-hero .tagline, .eyebrow { justify-content: flex-start; font-size: .7rem; letter-spacing: .16em; color: var(--color-tech); }
.pulse-dot, .dot { flex: none; width: 7px; height: 7px; background: var(--color-tech); box-shadow: 0 0 0 5px #1cbcd419; animation: none; }
.news-hero .title, .hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.12; letter-spacing: -.045em; font-weight: 750; margin: 22px 0; text-wrap: balance; }
.news-hero .title span, .hero h1 span { color: var(--color-focus); }
.news-hero .description, .intro { max-width: 46ch; font-size: .95rem; color: var(--color-text-secondary); line-height: 1.75; font-weight: 400; }
.update-stamp { font-size: .7rem; letter-spacing: .02em; text-transform: none; margin-top: 24px; }
.hero-actions, .portal-shortcuts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-actions a, .portal-shortcuts a { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 12px 18px; font-size: .8rem; font-weight: 650; text-decoration: none; border-radius: 12px; border: 1px solid var(--color-divider); background: var(--neu-surface); color: var(--color-text-light); box-shadow: var(--neu-small); }
.hero-actions .hero-primary, .portal-shortcuts a.portal-primary { background: var(--color-focus); color: #06171e; border-color: var(--color-focus); }
.news-category-nav { display: flex; flex-direction: column; width: 100%; max-width: none; gap: 14px; margin: 0; padding: 26px; border: 1px solid #29434f; border-radius: 26px; box-shadow: var(--neu-inset); }
.news-category-heading { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-text-muted); margin-bottom: 4px; }
.news-category-nav a { --route-color: var(--color-tech); display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; padding: 16px; border: 1px solid #29434f; border-radius: 16px; background: var(--neu-surface); color: var(--color-text-light); box-shadow: var(--neu-small); text-align: left; white-space: normal; }
.news-category-nav a:nth-of-type(2) { --route-color: var(--color-gaming); }
.news-category-nav a:nth-of-type(3) { --route-color: var(--color-elec); }
.route-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; box-shadow: var(--neu-inset); color: var(--route-color); font-family: var(--font-mono); font-size: .7rem; }
.route-copy { display: flex; flex-direction: column; gap: 3px; }
.route-copy strong { font-size: .85rem; font-weight: 650; }
.route-copy small { font-size: .7rem; line-height: 1.5; font-weight: 400; color: var(--color-text-muted); }
.route-arrow { color: var(--route-color); }
.news-section { margin-bottom: 64px; }
.news-section-header { align-items: center; gap: 18px; padding-bottom: 18px; margin-bottom: 28px; border-bottom-color: var(--color-divider); }
.news-section-header::before { content: ""; flex: none; width: 8px; height: 28px; border-radius: 8px; background: var(--section-accent, var(--color-tech)); box-shadow: var(--neu-small); }
.news-section--tech { --section-accent: var(--color-tech); }
.news-section--gaming { --section-accent: var(--color-gaming); }
.news-section--elec { --section-accent: var(--color-elec); }
.news-section--picks { --section-accent: var(--color-elec); }
.news-section-header .cat-label { font-size: .7rem; letter-spacing: .1em; }
.news-section-header h2 { font-size: .95rem; font-weight: 500; color: var(--color-text-secondary); }
.news-grid { gap: 26px; }
.news-card, .pick-card { position: relative; padding: 28px; border: 1px solid #29434f; border-radius: 22px; background: var(--neu-surface); box-shadow: var(--neu-raised); transition: transform 180ms var(--ease-out), border-color 180ms ease; }
.news-section .news-card { border-left: 1px solid #29434f; }
.news-card--featured { background: var(--neu-tile); }
.news-card .meta { border-bottom-color: var(--color-divider); font-size: .7rem; letter-spacing: .03em; padding-bottom: 16px; }
.news-card .meta span:first-child { color: var(--section-accent); }
.news-card h3, .news-card--featured h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.45; margin: 4px 0; }
.news-card p, .pick-card p { font-size: .85rem; line-height: 1.8; color: var(--color-text-secondary); }
.news-card a.read-more { font-family: var(--font-main); font-size: .75rem; font-weight: 650; text-transform: none; letter-spacing: 0; margin-top: 10px; }
.news-card:focus-within { border-color: var(--color-focus); background: var(--neu-surface); }
.picks-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.pick-card { gap: 12px; padding: 24px; }
.pick-label { align-self: flex-start; padding: 6px 10px; border-radius: 8px; box-shadow: var(--neu-inset); color: var(--color-elec); font-size: .65rem; }
.pick-card h3 { font-size: 1rem; line-height: 1.45; }
.pick-cta { color: var(--color-elec); font-family: var(--font-main); font-size: .75rem; text-transform: none; margin-top: 12px; }
.news-section--picks .cat-label { color: var(--color-elec); }
.affiliate-disclosure { padding: 18px 22px; margin: -8px 0 28px; border-radius: 14px; background: var(--neu-surface); box-shadow: var(--neu-inset); font-size: .75rem; }
/* Portal principal: jerarquía compartida con el panel editorial. */
.hero { gap: 56px; padding: 20px 0 56px; }
.portal-topics { padding: 28px; border-radius: 26px; border-color: #29434f; background: var(--neu-surface); box-shadow: var(--neu-inset); }
.portal-topics h2 { font-size: .95rem; font-weight: 550; }
.portal-topic-grid { gap: 16px; }
.portal-topic-grid a { padding: 18px 16px; border-radius: 16px; border-color: #29434f; background: var(--neu-tile); box-shadow: var(--neu-small); }
.portal-topic-title { font-size: .8rem; }
.portal-topic-title > span { color: var(--color-tech); }
.portal-topic-description { font-size: .7rem; }
.section-label { font-size: .7rem; font-weight: 500; letter-spacing: .14em; border-bottom-color: var(--color-divider); color: var(--color-text-muted); padding-bottom: 18px; margin: 0 0 28px; }
.destinations { gap: 28px; }
.card { --card-accent: var(--color-focus); border: 1px solid #29434f; border-radius: 26px; padding: 32px; background: var(--neu-surface); box-shadow: var(--neu-raised); transition: transform 180ms var(--ease-out), border-color 180ms ease; }
.card--gaming { --card-accent: var(--color-gaming); }
.icon, .card--gaming .icon { width: 56px; height: 56px; border-radius: 18px; background: var(--neu-surface); box-shadow: var(--neu-inset); }
.card h2 { margin: 24px 0 12px; font-size: 1.5rem; letter-spacing: -.025em; }
.card p { font-size: .85rem; color: var(--color-text-secondary); }
.card .number, .card .tags { font-size: .65rem; }
.card .cta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-divider); font-family: var(--font-main); font-size: .8rem; font-weight: 650; }
.card .arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 1.1rem; box-shadow: var(--neu-small); }
.site-footer, .wrap > footer { border-top-color: var(--color-divider); }
.site-footer-bottom { border-top-color: var(--color-divider); }
/* El relieve conserva bordes y focos visibles; no depende solo de sombras. */
.hero-actions a:active, .portal-shortcuts a:active, .news-category-nav a:active, .portal-topic-grid a:active { box-shadow: var(--neu-inset); }
@media (hover: hover) and (pointer: fine) {
    .news-card:hover, .pick-card:hover, .card:hover { transform: translateY(-3px); background: var(--neu-surface); border-color: #286075; }
    .news-category-nav a:hover, .portal-topic-grid a:hover { background: var(--neu-surface); border-color: var(--color-tech); }
    .hero-actions a:hover, .portal-shortcuts a:hover { border-color: var(--color-tech); color: var(--color-tech); }
    .hero-actions .hero-primary:hover, .portal-shortcuts a.portal-primary:hover { background: #9de8f1; color: #06171e; }
}
@media (hover: none), (pointer: coarse) { .news-card:hover, .pick-card:hover, .card:hover { transform: none; background: var(--neu-surface); } }
@media (max-width: 1000px) {
    .news-hero { gap: 28px; }
    .site-header { padding: 16px; }
}
@media (max-width: 900px) {
    .site-header { margin-bottom: 36px; }
    .hero, .news-hero { grid-template-columns: 1fr; gap: 32px; }
    .hero h1, .news-hero .title { max-width: 650px; }
    .news-category-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px; }
    .news-category-heading { grid-column: 1 / -1; }
    .news-category-nav a { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
    .route-number { display: none; }
    .site-menu-panel { background: var(--neu-surface); }
}
@media (max-width: 640px) {
    :root { --padding-body: 20px 18px; }
    .site-header { border-radius: 20px; margin-bottom: 28px; }
    .site-header .logo-image, .top .brand img { width: 40px; height: 40px; }
    .hero, .news-hero { padding: 8px 0 40px; }
    .news-hero .title, .hero h1 { font-size: clamp(2rem, 8.4vw, 2.8rem); }
    .news-category-nav { grid-template-columns: 1fr; padding: 20px; }
    .news-category-nav a { grid-template-columns: 38px minmax(0, 1fr) 20px; }
    .route-number { display: grid; }
    .news-grid, .destinations { grid-template-columns: 1fr; gap: 22px; }
    .news-card, .pick-card, .card { padding: 24px; border-radius: 20px; }
    .news-section { margin-bottom: 44px; }
    .main-content--news .news-section-header { gap: 8px 14px; }
    .main-content--news .news-section-header h2 { flex-basis: auto; width: 100%; padding-left: 22px; }
    .portal-topics { padding: 22px; }
    .portal-topic-grid { gap: 12px; }
    .portal-topic-grid a { padding: 16px 12px; }
    .hero-actions, .portal-shortcuts { gap: 12px; }
    .hero-actions a, .portal-shortcuts a { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .news-card, .pick-card, .card { transition: none; }
    .news-card:hover, .pick-card:hover, .card:hover { transform: none; }
}
@media (forced-colors: active) { .card, .news-card, .pick-card, .portal-topics, .news-category-nav { border: 1px solid CanvasText; } }
/* Índices y artículos: los mismos materiales, con el ancho de lectura de cada sección. */
.component-card, .components-example, .topic-article, .rank-item, .tops-method, .tops-hub-card, .goty-summary > div {
    min-width: 0;
    border-radius: 22px;
    box-shadow: var(--neu-raised);
}
.component-card, .topic-article, .rank-item, .tops-method, .tops-hub-card { background: var(--neu-surface); border-color: #29434f; }
.component-grid, .tops-hub-grid, .gaming-genre-grid { gap: 28px; }
.component-card, .topic-article, .rank-item, .components-example { scroll-margin-top: 24px; }
.component-index a, .quick-picks a, .tops-crosslinks a, .gaming-toc a, .gaming-pagination a, .category-pagination a, .reference-links a {
    min-height: 44px;
    border-radius: 12px;
    box-shadow: var(--neu-small);
}
.component-index a, .quick-picks a, .tops-crosslinks a, .category-pagination a { background: var(--neu-surface); border: 1px solid #29434f; }
.category-pagination a { display: inline-flex; align-items: center; padding: 10px 16px; }
.topic-overview, .gaming-toc, .gaming-table-scroll, .site-search--page {
    border-radius: 22px;
    box-shadow: var(--neu-inset);
}
.site-search--page { padding: 24px; border: 1px solid #29434f; background: var(--neu-surface); }
.site-search--page input { box-shadow: var(--neu-inset); border-radius: 12px; }
.site-search--page button, .buy-btn, .gaming-main .site-roblox-button { box-shadow: var(--neu-small); border-radius: 12px; }
.rank-badge, .rank-number { border-radius: 10px; box-shadow: var(--neu-inset); }
.rank-number { display: inline-flex; justify-content: center; align-items: center; min-width: 48px; min-height: 48px; font-size: 1.3rem; }
.components-hero h1, .tops-hero .title { font-weight: 700; letter-spacing: -.035em; }
.site-footer, .wrap > .portal-footer { padding: 28px; background: var(--neu-surface); border: 1px solid #29434f; border-radius: 24px; box-shadow: var(--neu-raised); }
.site-footer-links > .site-amazon-button, .site-footer-links > .site-rewards-button, .site-footer-links > .site-roblox-button { box-shadow: var(--neu-small); border-radius: 12px; }
/* Referencia accesible sin JavaScript y específica de la página actual. */
.site-citation { flex-basis: 100%; width: 100%; min-width: 0; margin: 0 0 24px; border: 1px solid #29434f; border-radius: 16px; background: var(--neu-surface); box-shadow: var(--neu-small); text-align: left; }
.portal-footer .site-citation { margin: 8px 0 0; }
.site-citation > summary { min-height: 48px; padding: 14px 18px; color: var(--color-focus); font-size: .85rem; font-weight: 650; cursor: pointer; border-radius: 16px; }
.site-citation > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.site-citation-content { padding: 4px 20px 20px; }
.site-citation-reference { padding: 18px; border-radius: 12px; box-shadow: var(--neu-inset); color: var(--color-text-light); font-size: .85rem; line-height: 1.8; overflow-wrap: anywhere; user-select: text; }
.site-citation-url { color: var(--color-focus); text-decoration: underline; text-underline-offset: 3px; }
.site-citation-help { margin-top: 14px; color: var(--color-text-muted); font-size: .75rem; line-height: 1.7; }
@media (hover: none), (pointer: coarse) {
    .quick-picks a:hover, .tops-hub-card:hover, .buy-btn:hover { transform: none; }
}
@media (max-width: 900px) { .site-menu-panel { box-shadow: var(--neu-raised); } }
@media (max-width: 640px) {
    .component-grid, .tops-hub-grid, .gaming-genre-grid { gap: 24px; }
    .component-card, .components-example, .topic-article, .rank-item, .tops-method, .tops-hub-card, .goty-summary > div { border-radius: 20px; }
    .site-search--page, .site-footer, .wrap > .portal-footer { padding: 20px; }
    .site-citation-content { padding: 0 14px 16px; }
    .site-citation-reference { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .quick-picks a { transition: none; } .quick-picks a:hover { transform: none; } }
@media (forced-colors: active) {
    .component-card, .components-example, .topic-article, .rank-item, .tops-method, .tops-hub-card, .goty-summary > div, .site-citation { border-color: CanvasText; }
}