:root {
    --primary: #ff5c2a;
    --primary-dark: #d83d12;
    --secondary: #0077ff;
    --ink: #071a3d;
    --muted: #637089;
    --surface: #ffffff;
    --soft: #f4f7fb;
    --border: #e2e8f0;
    --shadow: 0 18px 50px rgba(7, 26, 61, .12);
    --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--soft);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.shell { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: #fff; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 16px; }

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226,232,240,.9);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 54px; height: 54px; object-fit: contain; }
.brand span { display: grid; line-height: 1.1; }
.brand strong { font-size: 1.05rem; }
.brand small { color: var(--primary); font-weight: 800; letter-spacing: .08em; margin-top: 4px; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a { text-decoration: none; font-weight: 700; padding: 10px 14px; border-radius: 999px; }
.site-nav a:hover, .site-nav a:focus-visible { background: #edf2f8; }
.site-nav .nav-cta { color: #fff; background: var(--primary); }
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible { background: var(--primary-dark); }
.menu-toggle { display: none; border: 0; border-radius: 999px; background: var(--ink); color: #fff; padding: 9px 15px; font-weight: 800; }

.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(0,119,255,.65), transparent 34%),
        linear-gradient(135deg, #061e52 0%, #071a3d 55%, #030b1e 100%);
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: url('/imagen/primario.webp'); background-size: cover; background-position: center; }
.hero-grid { position: relative; min-height: 470px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 70px; padding-block: 72px; }
.eyebrow { color: var(--primary); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero h1, .article-heading h1, .page-panel h1 { margin: 12px 0 18px; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.045em; }
.hero p { max-width: 680px; color: rgba(255,255,255,.78); font-size: clamp(1rem, 2vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 14px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 850; border: 0; }
.button:hover, .button:focus-visible { background: var(--primary-dark); }
.button-secondary { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.button-secondary:hover, .button-secondary:focus-visible { background: rgba(255,255,255,.2); }
.hero-card { justify-self: end; width: min(100%, 330px); padding: 34px; display: grid; justify-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 34px; background: rgba(255,255,255,.09); box-shadow: 0 26px 70px rgba(0,0,0,.25); backdrop-filter: blur(15px); }
.hero-card img { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.28)); }
.hero-card strong { font-size: 2rem; margin-top: 10px; }
.hero-card span { color: rgba(255,255,255,.7); }

.content-section { padding-block: 76px 90px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; }
.search-form { display: flex; gap: 8px; min-width: min(100%, 420px); }
.search-form input { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; background: #fff; }
.search-form button { border: 0; border-radius: 14px; padding: 0 18px; background: var(--ink); color: #fff; font-weight: 800; cursor: pointer; }
.category-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.category-list a { text-decoration: none; background: #fff; color: var(--muted); border: 1px solid var(--border); padding: 7px 13px; border-radius: 999px; font-size: .9rem; font-weight: 750; }
.category-list a.active, .category-list a:hover { color: #fff; background: var(--secondary); border-color: var(--secondary); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(7,26,61,.06); transition: transform .25s ease, box-shadow .25s ease; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #dce5f2; }
.post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-image img { transform: scale(1.04); }
.post-body { padding: 24px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: .82rem; }
.post-meta a { color: var(--secondary); text-decoration: none; font-weight: 850; }
.post-meta time::before { content: "•"; margin-right: 10px; color: #b3bdca; }
.post-card h3 { margin: 14px 0 10px; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.post-card h3 a { text-decoration: none; }
.post-card p { color: var(--muted); margin: 0 0 18px; }
.read-more { color: var(--primary-dark); text-decoration: none; font-weight: 850; }
.empty-state, .page-panel { margin: 58px auto; max-width: 780px; padding: clamp(28px, 6vw, 60px); text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); }
.empty-state h1, .empty-state h3 { margin: 10px 0; }
.empty-state p { color: var(--muted); margin-bottom: 24px; }

.article-main { padding-bottom: 90px; }
.article-hero { color: #fff; background: linear-gradient(135deg, #061e52, #071a3d); }
.article-heading { padding-block: 70px 110px; max-width: 960px; }
.article-heading h1 { max-width: 920px; font-size: clamp(2.3rem, 6vw, 4.8rem); }
.article-heading > p { max-width: 780px; color: rgba(255,255,255,.75); font-size: 1.15rem; }
.article-heading .post-meta { color: rgba(255,255,255,.65); }
.article-heading .post-meta a { color: #ffab8f; }
.back-link { display: inline-block; color: rgba(255,255,255,.75); text-decoration: none; font-weight: 800; margin-bottom: 28px; }
.article-layout { max-width: 960px; margin-top: -70px; position: relative; }
.article-cover { overflow: hidden; aspect-ratio: 16 / 8.5; border-radius: 28px; background: #dce5f2; box-shadow: var(--shadow); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-content { max-width: 780px; margin: 46px auto 0; font-size: 1.08rem; }
.article-content p { margin: 0 0 1.35em; }
.article-content a:not(.button) { color: var(--secondary); }
.article-author { margin-top: 40px !important; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: .95rem; }
.page-main { min-height: 62vh; padding-block: 30px; }
.page-panel h1 { font-size: clamp(2.2rem, 5vw, 4rem); }

.site-footer { color: rgba(255,255,255,.75); background: #030b1e; }
.footer-inner { min-height: 210px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 20px 40px; padding-block: 42px; }
.footer-inner strong { color: #fff; font-size: 1.2rem; }
.footer-inner p { margin: 5px 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer-links a { color: #fff; text-decoration: none; font-weight: 750; }
.copyright { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }

@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .site-nav { display: none; position: absolute; top: 68px; left: 18px; right: 18px; padding: 14px; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
    .site-nav.is-open { display: flex; }
    .site-nav a { text-align: center; }
    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .hero-card { justify-self: start; width: 280px; }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .shell { width: min(100% - 24px, 1160px); }
    .brand img { width: 48px; height: 48px; }
    .hero-grid { min-height: auto; padding-block: 56px; }
    .hero h1 { font-size: 2.65rem; }
    .hero-card { display: none; }
    .content-section { padding-block: 52px 66px; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .search-form { min-width: 0; }
    .post-grid { grid-template-columns: 1fr; }
    .post-body { padding: 21px; }
    .article-heading { padding-block: 52px 92px; }
    .article-layout { margin-top: -52px; }
    .article-cover { border-radius: 20px; }
    .article-content { margin-top: 30px; }
    .footer-inner { grid-template-columns: 1fr; }
    .copyright { grid-column: 1; }
}

/* Interacciones de noticias */
.article-toolbar,.engagement-card,.share-card{border:1px solid var(--border);background:#fff;border-radius:22px;box-shadow:0 8px 28px rgba(7,26,61,.06)}
.article-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 18px;margin-bottom:30px}.article-metrics{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:.9rem}.rating-summary{display:flex;align-items:center;gap:6px}.rating-icon{color:#ffb300;font-size:1.35rem}.rating-summary strong{font-size:1.15rem}.rating-summary span:last-child{color:var(--muted);font-size:.86rem}
.engagement-card,.share-card{padding:clamp(22px,4vw,34px);margin-top:34px}.engagement-card h2,.share-card h2{margin:6px 0 18px;font-size:clamp(1.5rem,3vw,2rem)}
.star-rating{display:inline-flex;flex-direction:row;gap:4px;margin-bottom:12px}.star-rating button{border:0;background:transparent;color:#cbd3df;font-size:2.35rem;line-height:1;cursor:pointer;padding:2px;transition:transform .15s,color .15s}.star-rating button:hover,.star-rating button:focus-visible,.star-rating button.is-selected{color:#ffb300;transform:scale(1.1)}
.reaction-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:20px}.reaction-list button{display:grid;justify-items:center;gap:4px;border:1px solid var(--border);border-radius:16px;background:var(--soft);padding:13px 8px;cursor:pointer;transition:.2s}.reaction-list button:hover,.reaction-list button.is-selected{border-color:var(--secondary);background:#edf6ff;transform:translateY(-2px)}.reaction-list span{font-size:1.65rem}.reaction-list b{font-size:.75rem}.reaction-list small{color:var(--muted)}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px}.share-buttons a,.share-buttons button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--border);border-radius:12px;padding:0 14px;background:var(--soft);color:var(--ink);font-weight:800;text-decoration:none;cursor:pointer}.share-buttons a:hover,.share-buttons button:hover{background:var(--ink);color:#fff}.interaction-message{min-height:1.2em;color:var(--secondary);font-size:.9rem;margin:8px 0 0}
@media(max-width:760px){.article-toolbar{align-items:flex-start;flex-direction:column}.reaction-list{grid-template-columns:repeat(3,minmax(0,1fr))}.share-buttons>*{flex:1 1 46%}}
@media(max-width:420px){.reaction-list{grid-template-columns:repeat(2,minmax(0,1fr))}.share-buttons>*{flex-basis:100%}}

.post-stats{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0;color:var(--muted);font-size:.88rem}.post-stats span{display:inline-flex;align-items:center;gap:4px}.reaction-list span,.post-stats span{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}