/* =========================================================================
   mundoputo.com — front público
   Réplica del tema WordPress "Dyad 2" (Automattic) con las personalizaciones
   del sitio original: tipografía Source Code Pro, cabecera blanca translúcida,
   acento ámbar, hero fijo con efecto parallax y pie blanco.
   CSS puro, mobile-first, 1rem = 10px (font-size: 62.5%).
   ========================================================================= */

:root {
    --page-bg:        #242629;   /* fondo tras el hero */
    --content-bg:     #ffffff;
    --text:           #6a6c6e;   /* cuerpo / extractos */
    --text-strong:    #1a1c1e;   /* títulos */
    --text-muted:     #abb7c3;
    --rule:           #e0e0e0;
    --accent:         #e7ae01;   /* "leer más", separadores */
    --accent-hover:   #f0b80e;
    --header-overlay: #ffffff;
    --on-dark:        #c3c3c3;   /* texto sobre fondo oscuro (entradas) */
    --on-dark-strong: #f1f1f1;
    --on-dark-muted:  #8a8d90;
    --on-dark-rule:   rgba(255,255,255,.14);
    --font: "Source Code Pro", "Courier 10 Pitch", Courier, ui-monospace, monospace;
    --header-h: 90px;
    --transition: .3s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background-color: var(--page-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.7rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img, iframe, video { max-width: 100%; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #fff; padding: .8rem 1.4rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ---------------------------------------------------------------- Header */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
    min-height: var(--header-h);
    padding: 15px 40px;
    display: table;
    z-index: 5;
    background: transparent;
}
.site-header::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-color: var(--header-overlay);
    opacity: .8;
}
.site-header__inner {
    position: relative; z-index: 1;
    display: table; width: 100%; table-layout: fixed;
}
.site-branding { display: table-cell; vertical-align: middle; width: 34%; }
.site-title {
    margin: 0; font-size: 3rem; line-height: 1.2; font-weight: 400;
    color: var(--text-strong); white-space: nowrap;
}
.site-title a { color: inherit; }

.main-navigation { display: table-cell; vertical-align: middle; text-align: right; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li { display: inline-block; margin-left: 2.4em; }
.main-navigation a {
    display: inline-block;
    font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-strong); opacity: .85;
    transition: opacity var(--transition);
}
.main-navigation a:hover { opacity: 1; }
.main-navigation .btn-mini {
    border: 1px solid currentColor; padding: .5em .9em; opacity: .7;
}

.nav-toggle {
    display: none; position: relative; z-index: 1;
    background: none; border: 0; cursor: pointer; padding: .6rem;
    float: right; margin-top: .4rem;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-strong); margin: 5px 0; }

/* ---------------------------------------------------------------- Hero / parallax */
.site-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1;
    height: 37vw; min-height: 340px; max-height: 90vh;
    background-color: var(--page-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.site-banner::after {   /* degradado inferior, como en Dyad 2 */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 45%;
    background: linear-gradient(to bottom, rgba(36,38,41,0) 0%, rgba(36,38,41,.55) 100%);
}
.no-hero .site-banner { display: none; }

/* El contenido se desliza por encima del hero fijo -> efecto parallax. */
.site-content {
    position: relative; z-index: 2;
    margin-top: 37vw;
    background: var(--content-bg);
    overflow: hidden;
}
.no-hero .site-content { margin-top: var(--header-h); }
@media (min-width: 1px) {
    .site-content { min-height: 60vh; }
}

/* ---------------------------------------------------------------- Post grid (Dyad) */
.posts { overflow: hidden; background: var(--content-bg); }

.hentry {
    position: relative; float: left; width: 33.3333%;
    background: var(--content-bg); overflow: hidden;
}
.hentry .entry-media {
    float: left; width: 50%; padding-bottom: 66.666%;
    background-color: var(--content-bg);
    background-position: center center; background-size: cover;
}
.hentry .entry-inner {
    position: absolute; top: 0; bottom: 0; right: 0; width: 50%;
    background: var(--content-bg);
}
.hentry .entry-inner-content {
    position: absolute; bottom: 50%; right: 0; width: 100%;
    transform: translateY(50%);
    max-height: 88%; overflow: hidden;
    padding: 0 14%; text-align: center;
}
.hentry .entry-title {
    margin: 0; font-size: 3rem; font-weight: 400; line-height: 1.25;
    word-wrap: break-word;
}
.hentry .entry-title a { color: var(--text-strong); }
.hentry .entry-summary {
    margin: 0; padding-top: 2rem;
    font-size: 1.6rem; line-height: 1.7; color: var(--text);
}
.hentry .link-more { margin-top: 1.5rem; text-align: center; }
.hentry .link-more a {
    display: inline-block;
    background-color: var(--accent); color: #fff;
    font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .62em 1.62em;
    transition: background-color var(--transition), opacity var(--transition);
}
.hentry:hover .link-more a { background-color: var(--accent-hover); }

/* Posts sin imagen destacada: la tarjeta ocupa todo el ancho de la celda */
.hentry:not(.has-post-thumbnail) .entry-media { display: none; }
.hentry:not(.has-post-thumbnail) .entry-inner { position: relative; width: 100%; }
.hentry:not(.has-post-thumbnail) .entry-inner-content {
    position: relative; transform: none; bottom: auto;
    padding: 12rem 14% 4rem; max-height: none;
}
.hentry:not(.has-post-thumbnail)::before {
    content: ""; position: absolute; left: 15%; right: 15%; top: 4rem;
    border-top: 1px solid #d8dfe6;
}

/* Alternancia por fila (3 por fila -> grupos de 6) en escritorio grande */
@media (min-width: 1201px) {
    .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-media,
    .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-media,
    .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-media { float: right; }
    .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-inner,
    .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-inner,
    .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-inner { left: 0; right: auto; }
}

/* Tablet: 2 por fila */
@media (max-width: 1200px) {
    .hentry { width: 50%; }
    .hentry.has-post-thumbnail:nth-of-type(4n+3) .entry-media,
    .hentry.has-post-thumbnail:nth-of-type(4n+4) .entry-media { float: right; }
    .hentry.has-post-thumbnail:nth-of-type(4n+3) .entry-inner,
    .hentry.has-post-thumbnail:nth-of-type(4n+4) .entry-inner { left: 0; right: auto; }
}

/* Móvil: 1 por fila, imagen arriba y texto debajo */
@media (max-width: 900px) {
    .site-banner { height: 56vw; min-height: 260px; }
    .site-content { margin-top: 56vw; }
    .hentry, .hentry:nth-of-type(n) { width: 100%; float: none; }
    .hentry .entry-media,
    .hentry:not(.has-post-thumbnail) .entry-media {
        display: block; float: none; width: 100%; padding-bottom: 60%;
    }
    .hentry .entry-inner {
        position: relative; width: 100%; left: auto; right: auto;
    }
    .hentry .entry-inner-content {
        position: relative; transform: none; bottom: auto; max-height: none;
        padding: 4.6rem 8% 3.2rem;
    }
    .hentry:not(.has-post-thumbnail) .entry-inner-content { padding: 6rem 8% 3.2rem; }
}

/* ---------------------------------------------------------------- Paginación */
.posts-navigation {
    clear: both; text-align: center; padding: 4rem 1rem;
    background: var(--content-bg);
}
.posts-navigation a, .posts-navigation .current {
    display: inline-block; margin: 0 .3rem;
    font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .7em 1.4em; color: #858d95;
    background-color: rgba(0,0,0,.06);
    transition: opacity var(--transition);
}
.posts-navigation a:hover { opacity: .7; }
.posts-navigation .current { background-color: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- Encabezados de archivo */
.page-header {
    background: var(--content-bg); text-align: center;
    padding: 5rem 1.5rem 1rem;
}
.page-header .page-title { margin: 0; font-size: 3.2rem; font-weight: 400; color: var(--text-strong); }
.page-header .page-title::before {
    content: ""; display: block; width: 120px; height: 6px; margin: 0 auto 2.4rem;
    background: var(--accent);
}
.page-header .archive-description { margin: 1rem auto 0; max-width: 40rem; font-size: 1.5rem; }

/* ================================================================ Artículo (single)
   Layout dividido de Dyad 2: imagen destacada fija a la izquierda (50 %),
   texto desplazándose a la derecha (50 %), sobre fondo oscuro.
   ================================================================ */

.single .site-content { margin-top: 0; background: var(--page-bg); }
.single-post { position: relative; background: var(--page-bg); color: var(--on-dark); }

/* --- Portada con imagen destacada --- */
.post-cover {
    background-color: #191b1d;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.post-cover__header { text-align: left; color: rgba(255, 255, 255, .82); }
.post-cover__meta {
    margin: 0 0 1.2rem; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase;
}
.post-cover__meta .cat {
    display: inline-block; padding: .55em .95em; margin-right: .4em;
    background: rgba(0, 0, 0, .4); color: rgba(255, 255, 255, .85);
}
.post-cover__meta a { color: rgba(255, 255, 255, .8); }
.post-cover__title {
    margin: 0; font-weight: 400; line-height: 1.15; color: #fff;
    font-size: clamp(2.6rem, 3.6vw, 4.4rem); word-wrap: break-word;
}
.post-cover__byline {
    margin: 1.8rem 0 0; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.post-cover__byline a { color: rgba(255, 255, 255, .8); text-decoration: underline; }

/* --- Cuerpo del artículo --- */
.post-body { background: var(--page-bg); }
.post-body__inner {
    position: relative; max-width: 58rem; margin: 0 auto;
    padding: 12rem 4rem 9rem;
}
.post-body__inner::before {   /* punto ámbar separador de Dyad */
    content: ""; position: absolute; top: 7rem; left: 50%; transform: translateX(-50%);
    width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
}

/* --- Escritorio: pantalla dividida 50 / 50 --- */
@media (min-width: 901px) {
    .single-post--cover .post-cover {
        position: fixed; top: 0; left: 0; width: 50%; height: 100vh; z-index: 1;
    }
    .single-post--cover .post-cover__header {
        position: absolute; left: 0; bottom: 0; width: 100%;
        padding: 0 6rem 6rem;
        background: rgba(0, 0, 0, .4);
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
    .single-post--cover .post-body { width: 50%; margin-left: 50%; min-height: 100vh; }
    .single-post--cover .post-body__inner { padding-left: 7rem; padding-right: 7rem; }
}

/* --- Entradas / páginas sin imagen: columna centrada --- */
.post-plainhead {
    text-align: center; color: var(--on-dark);
    padding: calc(var(--header-h) + 5rem) 8% 0;
}
.post-plainhead .post-cover__title { color: var(--on-dark-strong); }
.post-plainhead .post-cover__meta,
.post-plainhead .post-cover__byline { color: var(--on-dark-muted); }
.single-post:not(.single-post--cover) .post-body__inner { max-width: 62rem; padding-top: 6rem; }
.single-post:not(.single-post--cover) .post-body__inner::before { top: 2rem; }

/* --- Móvil / tablet: imagen como bloque superior --- */
@media (max-width: 900px) {
    .single-post--cover .post-cover {
        position: relative; width: 100%; height: 0; padding-bottom: 62%; min-height: 300px;
    }
    .single-post--cover .post-cover__header {
        position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 8%;
        background: linear-gradient(transparent, rgba(0, 0, 0, .78));
    }
    .post-body__inner { padding: 6rem 8% 6rem; }
    .post-body__inner::before { top: 3rem; }
}
@media (max-width: 520px) {
    .single-post--cover .post-cover { padding-bottom: 80%; }
    .post-body__inner { padding: 5rem 6% 5rem; }
}

/* --- Tipografía del cuerpo (texto claro sobre oscuro) --- */
.entry-content { font-size: 1.7rem; line-height: 1.9; color: var(--on-dark); }
.entry-content > * + * { margin-top: 1.6rem; }
.entry-content p { margin: 0; }
.entry-content h2 { font-size: 2.4rem; font-weight: 400; margin-top: 3rem; color: var(--on-dark-strong); }
.entry-content h3 { font-size: 2rem; font-weight: 400; margin-top: 2.4rem; color: var(--on-dark-strong); }
.entry-content a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.entry-content strong, .entry-content b { color: var(--on-dark-strong); }
.entry-content blockquote {
    border-left: 3px solid var(--accent); padding-left: 1.4rem;
    color: var(--on-dark-muted); font-style: italic;
}
.entry-content img, .entry-content figure { margin: 2.4rem auto; }
.entry-content figcaption { text-align: center; font-size: 1.3rem; color: var(--on-dark-muted); margin-top: .6rem; }
.entry-content pre {
    background: rgba(0, 0, 0, .3); border: 1px solid var(--on-dark-rule);
    padding: 1.4rem; overflow-x: auto; font-size: 1.4rem;
}
.entry-content code { background: rgba(0, 0, 0, .3); padding: .1em .4em; font-size: .9em; }
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--on-dark-rule); margin: 2.4rem 0; }
.embed { position: relative; margin: 2.4rem 0; }
.embed--youtube { aspect-ratio: 16/9; }
.embed--youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Etiquetas / relacionados --- */
.entry-taxonomy { margin: 3rem 0 0; }
.entry-taxonomy a {
    display: inline-block; margin: 0 .5em .5em 0; padding: .3em .8em;
    background: rgba(255, 255, 255, .08); color: var(--on-dark-muted); font-size: 1.3rem;
    transition: background var(--transition), color var(--transition);
}
.entry-taxonomy a:hover { background: var(--accent); color: #fff; }

.post-related { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--on-dark-rule); }
.post-related h2 {
    font-size: 1.3rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-dark-muted); font-weight: 400; margin: 0 0 1rem;
}
.post-related a { display: block; padding: .5rem 0; color: var(--on-dark); }
.post-related a:hover { color: #fff; }

/* --- Comentarios --- */
.comments-area { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--on-dark-rule); }
.comments-title { font-size: 2rem; font-weight: 400; color: var(--on-dark-strong); margin: 0 0 2rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding: 1.6rem 0; border-bottom: 1px solid var(--on-dark-rule); }
.comment-meta { font-size: 1.3rem; color: var(--on-dark-muted); margin-bottom: .6rem; }
.comment-author { color: var(--on-dark-strong); }
.comment-list .children { list-style: none; margin: 0 0 0 2rem; padding-left: 1.6rem; border-left: 1px solid var(--on-dark-rule); }
.comment-reply-link {
    background: none; border: 0; padding: 0; margin-top: .6rem; cursor: pointer; font-family: inherit;
    font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

.comment-form { margin-top: 2.5rem; display: grid; gap: 1.4rem; }
.comment-form label { display: block; font-size: 1.3rem; margin-bottom: .4rem; color: var(--on-dark-muted); }
.comment-form input, .comment-form textarea {
    width: 100%; padding: .9rem 1rem; font-family: inherit; font-size: 1.5rem;
    border: 1px solid var(--on-dark-rule); background: rgba(255, 255, 255, .05); color: var(--on-dark-strong);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form textarea { min-height: 10rem; resize: vertical; }
@media (min-width: 620px) { .comment-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.form-honeypot { position: absolute; left: -9999px; }

/* --- Cabecera sobre las páginas oscuras (single) --- */
body.single-post .site-header::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    opacity: 1;
}
body.single-post .site-title, body.single-post .site-title a { color: #fff; }
body.single-post .main-navigation a { color: rgba(255, 255, 255, .82); }
body.single-post .nav-toggle span { background: #fff; }

.btn {
    display: inline-block; cursor: pointer;
    background-color: var(--accent); color: #fff; border: 0;
    font-family: inherit; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .8em 1.8em;
    transition: background-color var(--transition);
}
.btn:hover { background-color: var(--accent-hover); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--rule); color: var(--text-strong); }

.alert { padding: 1rem 1.4rem; border: 1px solid var(--rule); background: #fafafa; font-size: 1.4rem; }
.alert--success { border-color: #37d67a; }
.alert--error, .alert--danger { border-color: #ff5c5c; }
.messages { list-style: none; margin: 0 auto; padding: 1.5rem 8%; max-width: 70rem; display: grid; gap: .6rem; }

.empty-state { text-align: center; padding: 6rem 1.5rem; color: var(--text-muted); background: var(--content-bg); }

/* ---------------------------------------------------------------- Búsqueda / login */
.narrow {
    max-width: 42rem; margin: 0 auto; padding: 5rem 1.5rem 6rem; background: var(--content-bg);
}
.narrow h1 { font-size: 3rem; font-weight: 400; color: var(--text-strong); margin: 0 0 2rem; }
.field { margin-bottom: 1.6rem; }
.field label { display: block; font-size: 1.3rem; margin-bottom: .4rem; }
.field input {
    width: 100%; padding: .9rem 1rem; font-family: inherit; font-size: 1.5rem;
    border: 1px solid var(--rule); background: #fff;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
    position: relative; z-index: 2;
    background-color: var(--content-bg);
    color: #616a74; text-align: center;
    padding: 4rem 1.5rem;
    font-size: 1.3rem; letter-spacing: .04em;
    border-top: 1px solid var(--rule);
}
.site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer nav { margin-top: 1rem; }
.site-footer nav a { margin: 0 .8rem; text-transform: uppercase; letter-spacing: .1em; font-size: 1.2rem; }

/* ---------------------------------------------------------------- Nav responsive */
@media (max-width: 900px) {
    .site-header { padding: 12px 20px; }
    .site-branding { display: block; width: auto; }
    .nav-toggle { display: block; position: absolute; right: 20px; top: 12px; }
    .main-navigation {
        display: block; text-align: left; width: 100%;
        max-height: 0; overflow: hidden; transition: max-height var(--transition);
    }
    .main-navigation.is-open { max-height: 60vh; padding-top: 1rem; }
    .main-navigation li { display: block; margin: 0; }
    .main-navigation a { display: block; padding: .9rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    html { scroll-behavior: auto; }
}