/*
Theme Name: Mega-Gumi
Theme URI: https://megagumi.com
Author: Asociación Mega-Gumi
Description: Tema oficial de la Asociación Mega-Gumi. Diseño Shonen Dynamic — estética manga 80s/90s.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: megagumi
*/

/* ========================================================================
   DESIGN TOKENS
   ======================================================================== */

:root {
    --color-primary:          #bb0018;
    --color-primary-dark:     #930010;
    --color-secondary:        #0057bf;
    --color-secondary-dark:   #004396;
    --color-yellow:           #FFD600;
    --color-ink:              #1A1A1B;
    --color-paper:            #FFFFFF;
    --color-surface:          #fff8f7;
    --color-surface-low:      #fff0ef;
    --color-halftone:         #E2E2E2;
    --color-text:             #281716;
    --color-text-muted:       #5d3f3d;

    --font-headline: 'Anybody', sans-serif;
    --font-body:     'Be Vietnam Pro', sans-serif;
    --font-label:    'Space Grotesk', sans-serif;

    --border-heavy:      3px solid var(--color-ink);
    --border-heavy-4:    4px solid var(--color-ink);
    --border-medium:     2px solid var(--color-ink);
    --shadow-block:      4px 4px 0 var(--color-ink);
    --shadow-block-lg:   6px 6px 0 var(--color-ink);
    --shadow-block-red:  4px 4px 0 var(--color-primary);
    --shadow-block-yellow: 6px 6px 0 var(--color-yellow);

    --radius-sm:  0.125rem;
    --radius:     0.25rem;
    --radius-lg:  0.5rem;

    --gutter:          1.5rem;
    --margin-mobile:   1rem;
    --margin-desktop:  2.5rem;
    --panel-gap:       2rem;
    --stack-tight:     0.75rem;

    --container-max: 1200px;
    --sidebar-width: 280px;
    --header-height:   80px;
}

/* ========================================================================
   RESET & BASE
   ======================================================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul,
ol {
    padding-left: 1.5rem;
}

/* ========================================================================
   LAYOUT
   ======================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}

.content-area {
    padding-block: 2rem;
}

.posts-layout {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}

.posts-main {
    min-width: 0;
    flex: 1;
}

.page-layout {
    max-width: 800px;
    margin-inline: auto;
}

.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 800; }
h4 { font-size: 1.1rem; font-weight: 800; }

p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.post-meta {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.post-meta .material-symbols-outlined {
    font-size: 1rem;
    vertical-align: middle;
}

/* ========================================================================
   COMPONENTS
   ======================================================================== */

/* .card */
.card {
    background: var(--color-paper);
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block-lg);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

/* .btn-primary */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-paper);
    background: var(--color-primary);
    border: var(--border-heavy);
    box-shadow: var(--shadow-block);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    text-decoration: none;
    line-height: 1.2;
}

.btn-primary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-ink);
    color: var(--color-paper);
    text-decoration: none;
}

/* .btn-secondary */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-paper);
    background: var(--color-secondary);
    border: var(--border-heavy);
    box-shadow: var(--shadow-block);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    text-decoration: none;
    line-height: 1.2;
}

.btn-secondary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-ink);
    color: var(--color-paper);
    text-decoration: none;
}

/* .chip */
.chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink);
    background: var(--color-yellow);
    border: 2px solid var(--color-ink);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 1.5;
    transition: background 0.15s ease, color 0.15s ease;
}

.chip:hover {
    background: var(--color-primary);
    color: var(--color-paper);
    text-decoration: none;
}

.chip--tag {
    background: var(--color-surface-low);
    font-size: 0.6875rem;
}

/* .burst */
.burst {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-paper);
    background: var(--color-primary);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
    width: 3.5rem;
    height: 3.5rem;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

.burst--large {
    width: 6rem;
    height: 6rem;
    font-size: 1.5rem;
}

/* .halftone-bg */
.halftone-bg {
    background-color: var(--color-surface);
    background-image: radial-gradient(
        circle,
        var(--color-halftone) 2px,
        transparent 2px
    );
    background-size: 10px 10px;
}

/* .speech-bubble */
.speech-bubble {
    position: relative;
    background: var(--color-paper);
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block-lg);
    border-radius: var(--radius);
    padding: 1.5rem;
    isolation: isolate;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 2rem;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 0 solid transparent;
    border-top: 20px solid var(--color-ink);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: calc(2rem + 4px);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 0 solid transparent;
    border-top: 16px solid var(--color-paper);
    z-index: 1;
}

/* ========================================================================
   SITE HEADER
   ======================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-ink);
    border-bottom: 4px solid var(--color-primary);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.75rem;
    padding-inline: var(--margin-mobile);
    max-width: var(--container-max);
    margin-inline: auto;
    gap: 1rem;
}

.site-branding a {
    display: block;
    text-decoration: none;
}

.custom-logo,
.site-branding img {
    height: 48px;
    width: auto;
    display: block;
}

.site-name {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-paper);
    letter-spacing: -0.02em;
    text-decoration: none;
    display: block;
    font-style: italic;
    text-transform: uppercase;
}

.site-name:hover {
    color: var(--color-yellow);
    text-decoration: none;
}

/* Desktop primary nav — hidden on mobile */
.nav-primary {
    display: none;
    flex: 1;
    justify-content: flex-end;
}

.nav-primary ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.nav-primary ul li a {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-paper);
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: color 0.15s ease;
    position: relative;
    white-space: nowrap;
}

.nav-primary ul li a:hover,
.nav-primary ul li.current-menu-item > a,
.nav-primary ul li.current_page_item > a,
.nav-primary ul li.current-menu-ancestor > a {
    color: var(--color-yellow);
    text-decoration: none;
}

.nav-primary ul li.current-menu-item:not(.menu-hazte-socio) > a::after,
.nav-primary ul li.current_page_item:not(.menu-hazte-socio) > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.625rem;
    right: 0.625rem;
    height: 2px;
    background: var(--color-primary);
}

/* Hide sub-menus — flat nav only, no dropdowns */
.nav-primary .sub-menu,
.nav-mobile-overlay .sub-menu {
    display: none !important;
}

/* "Hazte socio" styled as Impact Button in desktop nav */
.nav-primary ul li.menu-hazte-socio > a {
    color: var(--color-paper);
    background: var(--color-primary);
    border: 2px solid var(--color-paper);
    box-shadow: 2px 2px 0 var(--color-paper);
    padding: 0.375rem 0.75rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.nav-primary ul li.menu-hazte-socio > a:hover {
    color: var(--color-paper);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--color-paper);
    text-decoration: none;
}

/* Hamburger toggle — shown on mobile only */
.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid var(--color-paper);
    color: var(--color-paper);
    padding: 0.375rem;
    cursor: pointer;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.nav-toggle .material-symbols-outlined {
    font-size: 1.5rem;
}

/* ========================================================================
   MOBILE NAV OVERLAY
   ======================================================================== */

.nav-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--color-ink);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--margin-mobile) var(--margin-mobile);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.nav-mobile-overlay.is-open {
    transform: translateX(0);
}

.nav-close {
    position: absolute;
    top: 1rem;
    right: var(--margin-mobile);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid var(--color-paper);
    color: var(--color-paper);
    padding: 0.375rem;
    cursor: pointer;
    border-radius: var(--radius);
}

.nav-close .material-symbols-outlined {
    font-size: 1.5rem;
}

.nav-mobile-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.nav-mobile-overlay ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-mobile-overlay ul li a {
    display: block;
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-paper);
    padding: 0.75rem 0;
    text-decoration: none;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.nav-mobile-overlay ul li a:hover {
    color: var(--color-yellow);
    padding-left: 0.5rem;
    text-decoration: none;
}

/* ========================================================================
   SITE FOOTER
   ======================================================================== */

.site-footer {
    background: var(--color-ink);
    color: var(--color-paper);
    border-top: 4px solid var(--color-primary);
    margin-top: 3rem;
}

.footer-widgets {
    padding-block: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.footer-bottom {
    padding-block: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-copy {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}


.site-footer .widget {
    color: var(--color-paper);
}

.site-footer .widget-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-yellow);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.site-footer .widget a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-footer .widget a:hover {
    color: var(--color-yellow);
}

.site-footer .widget ul {
    list-style: none;
    padding: 0;
}

.site-footer .widget ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 0.375rem;
}

/* ========================================================================
   SIDEBAR & WIDGETS
   ======================================================================== */

.sidebar {
    display: none;
}

.widget {
    margin-bottom: 1.5rem;
    background: var(--color-paper);
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block-lg);
    padding: 1rem;
    border-radius: var(--radius);
}

.widget-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-ink);
    border-bottom: var(--border-heavy);
    padding-bottom: 0.375rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.widget ul {
    list-style: none;
    padding: 0;
}

.widget ul li {
    border-bottom: 2px solid var(--color-halftone);
    padding-block: 0.4rem;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
}

.widget ul li a:hover {
    color: var(--color-primary);
}

/* Search widget */
.widget .search-form {
    display: flex;
    gap: 0.5rem;
}

.widget .search-field {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-paper);
    border: var(--border-heavy);
    border-radius: var(--radius);
    outline: none;
    min-width: 0;
}

.widget .search-field:focus {
    border-color: var(--color-secondary);
}

.widget .search-submit {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-paper);
    background: var(--color-primary);
    border: var(--border-heavy);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: transform 0.1s ease;
}

.widget .search-submit:hover {
    transform: translate(1px, 1px);
}

/* ========================================================================
   POST CARDS
   ======================================================================== */

.content-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.content-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--color-ink);
}

.card-image {
    overflow: hidden;
    border-bottom: var(--border-heavy-4);
    flex-shrink: 0;
}

.card-image a {
    display: block;
    overflow: hidden;
}

.card-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.content-card:hover .card-thumb {
    transform: scale(1.04);
}

.card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.card-title {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.card-title a {
    color: var(--color-ink);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    flex: 1;
    margin: 0;
}

/* ========================================================================
   FEATURED CARD
   ======================================================================== */

.content-featured {
    position: relative;
    margin-bottom: 0.5rem;
}

.featured-badge {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    z-index: 2;
    border: 3px solid var(--color-ink);
}

.featured-image {
    border-bottom: var(--border-heavy-4);
    overflow: hidden;
    flex-shrink: 0;
}

.featured-thumb {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.featured-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-surface-low);
}

.featured-title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
    font-style: italic;
}

.featured-title a {
    color: var(--color-ink);
    text-decoration: none;
}

.featured-title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.featured-excerpt {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* ========================================================================
   SINGLE POST
   ======================================================================== */

.single-featured-image {
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block-lg);
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--radius);
}

.single-thumb {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.entry-header {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.entry-title {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0;
}

.post-author {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Gutenberg / entry-content styles */
.entry-content {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
}

.entry-content > * + * {
    margin-top: 1.25rem;
}

.entry-content h2 {
    font-size: 1.5rem;
    margin-block: 2rem 0.75rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--color-primary);
}

.entry-content h3 {
    font-size: 1.2rem;
    margin-block: 1.75rem 0.5rem;
    color: var(--color-primary);
}

.entry-content h4 {
    font-size: 1.05rem;
    margin-block: 1.5rem 0.375rem;
}

.entry-content p {
    margin: 0;
}

.entry-content ul,
.entry-content ol {
    margin: 0;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-halftone);
    line-height: 1.5;
}

.entry-content li:last-child {
    border-bottom: none;
}

.entry-content blockquote {
    position: relative;
    background: var(--color-paper);
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block);
    padding: 1.25rem 1.25rem 1.25rem 2rem;
    border-radius: var(--radius);
    font-style: italic;
    font-size: 1.05rem;
}

.entry-content blockquote::before {
    content: '\201C';
    font-family: var(--font-headline);
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-primary);
    position: absolute;
    top: -0.75rem;
    left: 0.5rem;
    line-height: 1;
    font-style: normal;
}

.entry-content blockquote p {
    margin: 0;
}

.entry-content img {
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block);
    border-radius: var(--radius);
    max-width: 100%;
    height: auto;
}

.entry-content a {
    color: var(--color-secondary);
    text-decoration: underline;
    font-weight: 500;
}

.entry-content a:hover {
    color: var(--color-primary);
}

.entry-content strong {
    font-weight: 700;
    color: var(--color-ink);
}

.entry-content em {
    font-style: italic;
}

.entry-content hr {
    border: none;
    border-top: var(--border-heavy);
    margin-block: 2rem;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    border: var(--border-heavy-4);
}

.entry-content th {
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    text-align: left;
    letter-spacing: 0.03em;
}

.entry-content td {
    border: 1px solid var(--color-halftone);
    padding: 0.5rem 0.75rem;
}

.entry-content tr:nth-child(even) td {
    background: var(--color-surface-low);
}

.entry-content figure {
    margin: 0;
}

.entry-content figcaption {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    padding: 0.375rem 0.5rem;
    background: var(--color-halftone);
    border: 2px solid var(--color-ink);
    border-top: none;
}

.entry-content .alignwide {
    margin-inline: -1rem;
}

.entry-content .alignfull {
    margin-inline: calc(-1 * var(--margin-mobile));
}

/* Entry footer: tags */
.entry-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: var(--border-heavy-4);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.entry-footer-label {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Post prev/next navigation */
.post-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: var(--border-heavy-4);
}

.post-nav-prev,
.post-nav-next {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.post-nav-prev .nav-label,
.post-nav-next .nav-label {
    display: block;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.post-nav-prev .nav-title,
.post-nav-next .nav-title {
    display: block;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-nav-prev .nav-title:hover,
.post-nav-next .nav-title:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ========================================================================
   ARCHIVE HEADER
   ======================================================================== */

.archive-header {
    padding-block: 2rem;
    border-bottom: var(--border-heavy-4);
}

.archive-title {
    font-family: var(--font-headline);
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    text-transform: uppercase;
    margin: 0;
}

.archive-title span {
    color: var(--color-primary);
}

.archive-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    font-family: var(--font-body);
}

/* ========================================================================
   SECTION HEADING
   ======================================================================== */

.section-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin: 0;
}

.section-heading-line {
    flex: 1;
    height: 4px;
    background: var(--color-ink);
    border-radius: 2px;
}

/* ========================================================================
   NO POSTS / EMPTY STATE
   ======================================================================== */

.no-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
}

.no-posts {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-text-muted);
    margin: 0;
}

/* ========================================================================
   404 PAGE
   ======================================================================== */

.page-404 {
    text-align: center;
    padding-block: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.page-404 .entry-title {
    font-size: 2rem;
    text-align: center;
}

.page-404 p {
    max-width: 480px;
    color: var(--color-text-muted);
    text-align: center;
}

/* ========================================================================
   INSCRÍBETE PAGE
   ======================================================================== */

.inscribete-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin-inline: auto;
}

.inscribete-image img {
    border: var(--border-heavy-4);
    box-shadow: var(--shadow-block-lg);
    border-radius: var(--radius);
    width: 100%;
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.step-card {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.step-number {
    align-self: flex-start;
    font-size: 1rem;
    line-height: 1.2;
    width: 3.25rem;
    height: 3.25rem;
}

.step-card h3 {
    font-size: 1.1rem;
    color: var(--color-ink);
    margin: 0;
}

.step-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

.inscribete-cta {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.inscribete-cta p {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
}

.inscribete-download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.inscribete-age-note {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

/* ========================================================================
   GENERIC PAGE
   ======================================================================== */

.page-content .entry-title {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: var(--border-heavy-4);
}

/* ========================================================================
   PAGINATION
   ======================================================================== */

.pagination,
.nav-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: var(--border-heavy-4);
    align-items: center;
}

.page-numbers,
.page-numbers a {
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-ink);
    background: var(--color-paper);
    border: var(--border-heavy);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform 0.1s ease, background 0.1s ease;
    display: inline-block;
}

.page-numbers:hover,
.page-numbers a:hover,
.page-numbers.current {
    background: var(--color-primary);
    color: var(--color-paper);
    text-decoration: none;
}

.page-numbers.dots {
    border: none;
    background: none;
    box-shadow: none;
}

/* ========================================================================
   RESPONSIVE — DESKTOP (>=768px)
   ======================================================================== */

@media (min-width: 768px) {

    .container {
        padding-inline: var(--margin-desktop);
    }

    .posts-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .sidebar {
        display: block;
        width: var(--sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: var(--header-height);
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-primary {
        display: flex;
    }

    .nav-toggle {
        display: none;
    }

    h1 { font-size: 3rem; }
    .entry-title { font-size: 2.75rem; }
    .archive-title { font-size: 3rem; }
    .section-heading h2 { font-size: 2.25rem; }
    .featured-title { font-size: 2.25rem; }

    .content-featured {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .featured-image {
        border-bottom: none;
        border-right: var(--border-heavy-4);
    }

    .featured-thumb {
        height: 100%;
        min-height: 320px;
        max-height: 420px;
    }

    .featured-body {
        padding: 2rem;
        justify-content: center;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-widgets {
        grid-template-columns: repeat(3, 1fr);
    }

    .entry-content .alignwide {
        margin-inline: -2rem;
    }

    .entry-content .alignfull {
        margin-inline: calc(-1 * var(--margin-desktop));
    }
}

@media (min-width: 1024px) {

    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .card-thumb {
        height: 220px;
    }
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}