/* ==========================================================================
ARTÍCULO DE BLOG — específico de single.php (rama tg_is_articulo_blog()).
Componentes reutilizables de otras plantillas (.box/.bt del pilar,
.compartir de la ficha, .sec-hd2, acordeón) viven en components.css;
aquí solo lo exclusivo de esta plantilla.
========================================================================== */
/* ---------- Barra de progreso de lectura ---------- */
.progreso {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: var(--fluo-autores);
z-index: 80;
transition: width 0.1s linear;
}
/* ---------- Hero del artículo ---------- */
.hero {
padding: 20px 0 60px;
}
.hero h1 {
font-size: clamp(32px, 4.2vw, 52px);
margin-top: 16px;
}
.art-meta {
display: flex;
align-items: center;
gap: 20px;
margin-top: 26px;
flex-wrap: wrap;
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.art-meta .sep { opacity: 0.4; }
.destacada {
margin-top: -40px;
position: relative;
z-index: 2;
}
.destacada img {
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
border-radius: var(--radio-tarjeta);
border: 1px solid var(--linea);
}
/* ---------- Cuerpo: rejilla índice + artículo ---------- */
.art {
padding: 56px 0 0;
}
.art-grid {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 64px;
align-items: start;
}
/* ---------- Índice de contenidos (pegajoso, con scroll-spy en site.js) ---------- */
.indice {
position: sticky;
top: 130px;
}
.indice .it {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-40);
padding-bottom: 12px;
border-bottom: 1px solid var(--linea);
}
.indice ol {
list-style: none;
padding: 0;
margin: 14px 0 0;
counter-reset: i;
}
.indice li { counter-increment: i; }
.indice a {
display: flex;
gap: 10px;
padding: 8px 0;
font-size: 15.5px;
color: var(--tinta-60);
text-decoration: none;
border-left: 2px solid transparent;
padding-left: 12px;
margin-left: -14px;
transition: color 0.18s, border-color 0.18s;
}
.indice a::before {
content: counter(i, decimal-leading-zero);
font-family: var(--f-mono);
font-size: 11px;
color: var(--tinta-40);
padding-top: 3px;
}
.indice a:hover, .indice a.on {
color: var(--tinta);
border-left-color: var(--acento);
}
.indice .sub {
padding-left: 30px;
font-size: 15px;
}
.indice .sub::before { content: ""; }
/* ---------- Cuerpo del artículo (texto libre) ----------
Se apoya en la base de assets/css/contenido.css (párrafo, listas, cita,
tabla) y aquí solo se afinan los valores propios de esta plantilla —
scroll-margin-top para que el ancla no quede tapada por la cabecera
pegajosa, y el color de encabezados dentro del cuerpo (contenido.css no
toca h2/h3 porque esos ya los cubre la base de tipografía general). */
.contenido {
font-size: 18.5px;
color: var(--tinta-60);
}
.contenido strong {
font-family: var(--f-display);
font-weight: var(--peso-medio);
color: var(--tinta);
}
.contenido a { color: var(--acento-texto); }
.contenido h2 {
font-size: clamp(26px, 2.6vw, 32px);
color: var(--tinta);
margin: 52px 0 18px;
scroll-margin-top: 130px;
}
.contenido h3 {
font-size: 23px;
color: var(--tinta);
margin: 40px 0 14px;
scroll-margin-top: 130px;
}
.contenido h4 {
font-size: 19px;
color: var(--tinta);
margin: 32px 0 12px;
}
.contenido li::marker { color: var(--acento); }
.tabla-scroll { overflow-x: auto; }
/* ---------- Caja de CTA insertable (shortcode [tg_cta_articulo]) ---------- */
.cta-box {
background: var(--hero);
color: #fff;
border-radius: var(--radio-tarjeta);
padding: 34px 36px;
margin: 44px 0;
}
.cta-box .cta-eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fluo-autores);
}
.cta-box .cta-title {
/* color explícito porque es un : "body p" en contenido.css declara
color directamente sobre el elemento a propósito (ver comentario ahí),
así que gana a la herencia del color:#fff de .cta-box si no se repite
aquí -- mismo motivo por el que .cta-sub ya lo declara el suyo. */
color: #fff;
font-family: var(--f-display);
font-size: 26px;
font-weight: var(--peso-medio);
line-height: 1.2;
margin-top: 14px;
max-width: 34ch;
}
.cta-box .cta-sub {
margin-top: 14px;
color: rgba(255, 255, 255, 0.72);
font-size: 16.5px;
max-width: 52ch;
}
.cta-box .cta-actions {
margin-top: 24px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.cta-box .cta-note {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.45);
}
/* ---------- Ofertas al final del artículo (reutiliza .box/.bt del pilar) ---------- */
.ofertas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 48px 0 0;
}
/* ---------- Pie del artículo: compartir + navegación anterior/siguiente ---------- */
.pie-art {
margin-top: 56px;
padding-top: 26px;
border-top: 1px solid var(--linea);
display: flex;
gap: 16px;
justify-content: space-between;
flex-wrap: wrap;
}
.nav-art {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.na {
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: var(--radio-tarjeta);
padding: 16px 20px;
text-decoration: none;
max-width: 340px;
transition: background 0.18s;
}
.na:hover { background: var(--hover); }
.na .l {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-40);
}
.na .t {
font-family: var(--f-display);
font-weight: var(--peso-medio);
font-size: 16px;
margin-top: 7px;
line-height: 1.3;
}
/* .rel/.rc (rejilla de artículos relacionados) ahora viven en
components.css -- las reutilizan también archive.php y search.php. */
/* ---------- Comentarios nativos de WordPress ---------- */
.coments {
background: var(--superficie);
border-top: 1px solid var(--linea);
border-bottom: 1px solid var(--linea);
}
.com-lista {
list-style: none;
margin: 30px 0 0;
padding: 0;
max-width: 760px;
}
.com {
display: flex;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--fondo-2);
}
.com .av {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--hero);
color: #fff;
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-display);
font-weight: var(--peso-semi);
font-size: 15px;
}
.com .cn { font-family: var(--f-display); font-weight: var(--peso-medio); font-size: 16px; }
.com .cf { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-40); margin-top: 3px; }
.com .ct { margin-top: 11px; font-size: 16.5px; color: var(--tinta-60); }
/* .comment-reply-link es la clase que genera comment_reply_link() de WP core
(no editable desde el callback) — mismo estilo que .resp. */
.com .resp,
.com .comment-reply-link {
margin-top: 12px;
font-family: var(--f-display);
font-weight: var(--peso-medio);
font-size: 14.5px;
color: var(--acento-texto);
text-decoration: none;
display: inline-block;
}
/* Respuestas anidadas de WordPress (comment_form/wp_list_comments) */
.com-lista ul.children {
list-style: none;
margin: 0;
padding-left: 58px;
}
/* Título del formulario: comment_form() lo saca en