/*
Theme Name: ABC Alpha Blog
Theme URI: https://abcalpha.net/blog/
Author: ABC Alpha Innovación Digital S.A.
Description: Tema ligero del blog de abcalpha.net. Usa el menú, los colores y la tipografía del sitio principal. Las entradas se escriben con el editor de bloques de WordPress.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: abcalpha-blog
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--primary:   #12488a;
	--secondary: #32b1c5;
	--highlight: #fdc600;
	--bg:        #080D18;
	--bg2:       #0C1422;
	--bg3:       #101B2E;
	--card:      #0F1826;
	--border:    rgba(255,255,255,0.07);
	--border-h:  rgba(50,177,197,0.3);
	--text:      #DDE8F5;
	--muted:     #7090A8;
	--muted2:    #8AAABF;
	--ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--secondary); }

.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 9999; background: var(--highlight); color: #080D18; padding: .6rem 1.2rem; border-radius: 0 0 6px 6px; font-weight: 700; font-size: .88rem; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ── NAV (igual que abcalpha.net) ── */
nav#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 2.5rem; display: flex; align-items: center; justify-content: space-between; background: rgba(8,13,24,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: background .3s, padding .35s ease; }
nav#navbar.scrolled { padding: .5rem 2.5rem; background: rgba(8,13,24,0.98); }
.nav-logo img { height: 72px; display: block; transition: height .35s ease; }
nav#navbar.scrolled .nav-logo img { height: 44px; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { color: var(--muted2); text-decoration: none; font-size: .875rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-current { color: var(--text); }
.nav-cta { padding: .48rem 1.3rem; background: var(--highlight); border-radius: 6px; font-size: .84rem; font-weight: 700; color: #080D18 !important; transition: transform 160ms var(--ease-out), opacity 200ms; }
.nav-cta:hover { opacity: .88; transform: translateY(-1px); }
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; }
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.nav-dropdown > a::after { content: ''; display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--muted2); border-bottom: 2px solid var(--muted2); transform: rotate(45deg) translateY(-2px); transition: transform .25s, border-color .2s; flex-shrink: 0; }
.nav-dropdown:hover > a::after { transform: rotate(-135deg) translateY(2px); border-color: var(--secondary); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: .6rem; z-index: 200; min-width: 240px; }
.dropdown-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .6rem; }
.dropdown-inner { background: #0C1422; border: 1px solid rgba(50,177,197,0.18); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.55); }
.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; color: var(--muted2) !important; text-decoration: none; font-size: .85rem; font-weight: 500; border-bottom: 1px solid var(--border); }
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: rgba(50,177,197,0.07); color: var(--text) !important; }
.dm-icon { font-size: 1.15rem; flex-shrink: 0; }
.dm-label { display: flex; flex-direction: column; }
.dm-label span { font-size: .72rem; color: var(--muted); font-weight: 400; }

/* ── ENCABEZADO DEL BLOG ── */
.blog-hero { padding: 9.5rem 1.5rem 3rem; text-align: center; background: radial-gradient(ellipse at top, rgba(18,72,138,.35), transparent 65%); border-bottom: 1px solid var(--border); }
.blog-hero .eyebrow { color: var(--secondary); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.blog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin: .5rem 0 .8rem; line-height: 1.2; }
.blog-hero p { color: var(--muted2); max-width: 640px; margin: 0 auto; font-size: .98rem; }
.cat-filter { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.8rem; }
.cat-filter a { padding: .38rem .95rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted2); text-decoration: none; font-size: .8rem; transition: border-color .2s, color .2s; }
.cat-filter a:hover, .cat-filter a.is-current { border-color: var(--secondary); color: var(--text); }
.blog-search { margin: 1.4rem auto 0; max-width: 420px; display: flex; gap: .5rem; }
.blog-search input[type=search] { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .6rem .9rem; font: inherit; font-size: .88rem; }
.blog-search button { background: var(--secondary); border: 0; border-radius: 8px; color: #080D18; font-weight: 700; padding: 0 1rem; cursor: pointer; font: inherit; font-size: .85rem; }

/* ── LISTADO ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.post-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .25s var(--ease-out); }
.post-card:hover { border-color: var(--border-h); transform: translateY(-3px); }
.post-card .thumb { aspect-ratio: 1200 / 630; background: var(--bg3); display: block; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .body { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card h2 { font-size: 1.08rem; line-height: 1.35; font-weight: 700; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--secondary); }
.post-card .excerpt { color: var(--muted2); font-size: .87rem; }
.post-card .more { margin-top: auto; color: var(--highlight); font-size: .82rem; font-weight: 600; text-decoration: none; }
.meta { color: var(--muted); font-size: .78rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.meta .cat { color: var(--secondary); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.pagination .page-numbers { padding: .45rem .85rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted2); text-decoration: none; font-size: .85rem; }
.pagination .current { border-color: var(--secondary); color: var(--text); }
.empty { text-align: center; color: var(--muted2); padding: 3rem 0; }

/* ── ARTÍCULO ── */
.single-head { padding: 9rem 1.5rem 2rem; max-width: 820px; margin: 0 auto; }
.single-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.22; font-weight: 800; margin: .7rem 0 1rem; }
.single-head .lead { color: var(--muted2); font-size: 1.02rem; }
.single-thumb { max-width: 1000px; margin: 0 auto 2rem; padding: 0 1.5rem; }
.single-thumb img { border-radius: 12px; border: 1px solid var(--border); display: block; width: 100%; }
.entry { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 3rem; font-size: 1rem; color: #CFDCEC; }
.entry > * + * { margin-top: 1.15rem; }
.entry h2 { font-size: 1.5rem; color: var(--text); margin-top: 2.4rem; line-height: 1.3; }
.entry h3 { font-size: 1.18rem; color: var(--text); margin-top: 1.8rem; }
.entry a { color: var(--secondary); text-underline-offset: 3px; }
.entry strong { color: var(--text); }
.entry ul, .entry ol { padding-left: 1.4rem; }
.entry li + li { margin-top: .45rem; }
.entry blockquote { border-left: 3px solid var(--highlight); background: var(--card); padding: 1rem 1.2rem; border-radius: 0 8px 8px 0; color: var(--muted2); }
.entry code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; background: var(--bg3); border: 1px solid var(--border); padding: .1em .35em; border-radius: 4px; color: #9fe3ee; }
.entry pre { background: #050A12; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; overflow-x: auto; font-size: .82rem; line-height: 1.55; }
.entry pre code { background: none; border: 0; padding: 0; color: #CFE6F5; }
.entry table { width: 100%; border-collapse: collapse; font-size: .88rem; display: block; overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--border); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.entry th { background: var(--bg3); color: var(--text); }
.entry figure { margin-left: 0; margin-right: 0; }
.entry .wp-block-table { overflow-x: auto; }
.entry hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.entry .has-text-align-center { text-align: center; }
.entry .wp-block-image img { border-radius: 10px; }
.entry figcaption { color: var(--muted); font-size: .8rem; margin-top: .4rem; }
.post-tags { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.post-tags a { font-size: .75rem; color: var(--muted2); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; text-decoration: none; }
.post-nav { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); font-size: .88rem; }
.post-nav a { color: var(--muted2); text-decoration: none; }
.post-nav a:hover { color: var(--secondary); }
.cta-box { max-width: 760px; margin: 0 auto 3rem; padding: 1.6rem; background: linear-gradient(135deg, rgba(18,72,138,.45), rgba(50,177,197,.12)); border: 1px solid var(--border-h); border-radius: 12px; }
.cta-box h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.cta-box p { color: var(--muted2); font-size: .9rem; margin-bottom: 1rem; }
.cta-box a { display: inline-block; background: var(--highlight); color: #080D18; padding: .55rem 1.2rem; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: .86rem; }

/* ── PIE (igual que abcalpha.net) ── */
footer.site-footer { background: #050A12; padding: 2.8rem 2rem; border-top: 1px solid var(--border); }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo img { height: 44px; display: block; }
.footer-copy { color: var(--muted); font-size: .79rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: .82rem; transition: color .2s; }
.footer-links a:hover { color: var(--secondary); }

@media (max-width: 768px) {
	nav#navbar, nav#navbar.scrolled { padding: .5rem 1rem; }
	.nav-logo img { height: 48px; }
	.nav-links { display: none; }
	.hamburger { display: flex; }
	.nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 66px; left: 0; right: 0; background: rgba(8,13,24,0.98); padding: 2rem; gap: 1.5rem; border-bottom: 1px solid var(--border); }
	.nav-dropdown > a::after { display: none; }
	.dropdown-menu { display: block; position: static; transform: none; padding-top: .5rem; }
	.dropdown-menu::before { display: none; }
	.dropdown-inner { background: transparent; border: none; border-radius: 0; box-shadow: none; padding-left: 1rem; border-left: 2px solid rgba(50,177,197,0.2); }
	.blog-hero { padding-top: 7rem; }
	.single-head { padding-top: 7rem; }
	.post-grid { grid-template-columns: 1fr; }
	.wrap { padding: 2rem 1rem 3rem; }
	.entry, .single-head, .post-tags, .post-nav { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }