/* Agridulce: página de artículo (templates/single.html). Solo en entradas; tarjetas en base.css, contenido en clasico.css. */
main.articulo { margin-block-start: 0; }
/* Bloque del artículo: columna de texto (680) + gap + lateral (320) = 1064 px, centrado. Bajo 1024 px, una
   columna de 680. Cabecera, foto de cabecera y cuerpo comparten ese ancho y su borde izquierdo. */
.articulo { --art-ancho: min(680px, 100% - 2 * var(--margen)); --art-gap: 64px; }
@media (min-width: 1024px) { .articulo { --art-ancho: min(1064px, 100% - 2 * var(--margen)); } }
.articulo > * { margin-block-start: 0; }

/* ---- Cabecera: bloque del color de la sección, con luz y trama sutiles ---- */
.articulo-cabecera { --c-bg: var(--ag-tinta); --c-fg: var(--ag-blanco); --c-pill-bg: var(--ag-verde); --c-pill-fg: var(--ag-tinta); --c-luz: rgba(143, 209, 79, .28); --c-luz2: rgba(255, 46, 126, .28); --c-fondo: radial-gradient(60% 120% at 100% 0%, var(--c-luz), transparent 60%), radial-gradient(50% 120% at 0% 100%, var(--c-luz2), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px), var(--c-bg);
	position: relative; overflow: hidden; background: var(--c-fondo); color: var(--c-fg); }
.articulo-cabecera--verde { --c-bg: var(--ag-verde); --c-fg: var(--ag-tinta); --c-pill-bg: var(--ag-tinta); --c-pill-fg: var(--ag-verde); --c-luz: rgba(255, 255, 255, .5); --c-luz2: rgba(255, 46, 126, .16); }
.articulo-cabecera--rosa { --c-bg: var(--ag-rosa); --c-fg: var(--ag-blanco); --c-pill-bg: var(--ag-tinta); --c-pill-fg: var(--ag-blanco); --c-luz: rgba(255, 255, 255, .3); --c-luz2: rgba(143, 209, 79, .28); }
.articulo-cabecera--acento-rosa { --c-pill-bg: var(--ag-rosa); --c-pill-fg: var(--ag-blanco); }
.articulo-cabecera--acento-verde { --c-pill-bg: var(--ag-verde); --c-pill-fg: var(--ag-tinta); }
.articulo-cabecera__interior { position: relative; z-index: 1; display: grid; gap: 24px; padding-block: 32px 28px; }
.articulo-cabecera > .articulo-cabecera__interior { width: var(--art-ancho); }
.articulo-cabecera__texto { min-width: 0; }
.articulo-cabecera__miga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.articulo-cabecera__seccion { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--c-pill-bg); color: var(--c-pill-fg); line-height: 1; text-decoration: none; }
.articulo-cabecera__seccion:hover { text-decoration: underline; }
.articulo-cabecera__titulo { max-width: 900px; margin: 16px 0 12px; font-size: var(--t-xl); color: inherit; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.articulo-cabecera__dek { max-width: 680px; margin: 0 0 16px; font-size: var(--t-md); line-height: 1.4; }
.articulo-cabecera__by { margin: 0; color: inherit; }
.articulo-cabecera__meta { opacity: .75; }
.articulo-cabecera__deco { position: absolute; right: 0; bottom: -.42em; font-size: var(--t-2xl); transform: scale(3); transform-origin: right bottom; line-height: 1; color: var(--ag-rosa); opacity: .4; pointer-events: none; user-select: none; }
.articulo--poema .articulo-cabecera__titulo { padding-right: 32px; }

/* Foto grande (destacada ≥ 560 px): debajo del titular, al ancho del bloque del artículo (≤ su tamaño natural)
   y con su mismo borde izquierdo (si es más angosta, queda alineada con la columna del texto);
   montada sobre el borde inferior del bloque de color. */
.articulo-cabecera--foto { background: transparent; overflow: visible; }
.articulo-cabecera--foto::before { content: ""; position: absolute; inset: 0 0 clamp(64px, 14vw, 180px) 0; background: var(--c-fondo); }
.articulo-cabecera__foto { position: relative; z-index: 1; box-sizing: border-box; width: min(var(--w, 1064px), var(--art-ancho)); margin: 0 0 0 calc((100% - var(--art-ancho)) / 2); overflow: hidden; border-radius: var(--radio); box-shadow: var(--sombra-alta); background: var(--ag-hueco); }
.articulo-cabecera__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 782px) { .articulo-cabecera__foto img { aspect-ratio: 16 / 9; } }
.articulo-cabecera__pie { margin: 0; padding: 10px 16px 12px; background: var(--ag-blanco); color: var(--ag-gris); font-size: var(--t-sm); line-height: 1.4; text-align: center; }
.articulo-cabecera--foto .articulo-cabecera__interior { padding-bottom: 32px; }
/* Con foto, la comilla del poema va arriba a la derecha, dentro del bloque de color (abajo quedaría fuera). */
.articulo-cabecera--foto .articulo-cabecera__deco { top: 0; bottom: auto; transform-origin: right top; }

/* Foto pegada (destacada chica): más grande (hasta su tamaño natural), a la derecha del titular */
.articulo-cabecera__pegada { justify-self: start; box-sizing: border-box; width: min(100%, calc(var(--w, 300px) + 16px)); margin: 0; padding: 8px; background: var(--ag-blanco); border-radius: 10px; box-shadow: 0 18px 36px -12px rgba(12, 12, 14, .45); transform: rotate(var(--giro, 0deg)); }
.articulo-cabecera__pegada img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 900px) {
	.articulo-cabecera__interior { padding-block: 48px 40px; }
}
@media (min-width: 1024px) {
	.articulo-cabecera--pegada .articulo-cabecera__interior { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
	.articulo-cabecera--pegada .articulo-cabecera__pegada { width: min(calc(var(--w, 300px) + 16px), 40vw); max-width: 440px; margin-right: 8px; }
}

/* ---- Cuerpo: columna de 680 px + lateral de 320 px, centradas (lateral debajo bajo 1024 px) ---- */
.articulo__cuerpo { display: grid; gap: 40px; width: var(--art-ancho); margin-inline: auto !important; padding: 28px 0 48px; }
.articulo__cuerpo > * { margin: 0; min-width: 0; }
.articulo__col { max-width: 680px; }
.articulo__col > * { margin-block: 0; }
@media (min-width: 1024px) {
	.articulo__cuerpo { grid-template-columns: minmax(0, 680px) 320px; justify-content: center; gap: var(--art-gap); padding-top: 40px; }
}

/* Lateral: módulos en paneles blancos; solo el último (Boletín) acompaña el scroll */
.articulo__lateral { display: flex; flex-direction: column; gap: 20px; }
.articulo__lateral > * { margin: 0; }
.lateral__modulo { padding: 20px; border-radius: var(--radio); background: var(--ag-blanco); box-shadow: var(--sombra); }
.lateral__titulo, .leido__titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ag-tinta); }
.lateral__titulo .ico { width: 18px; height: 18px; color: var(--ag-rosa); }
.lateral__modulo .chips { margin: 0; }
.lateral__modulo .chip { background: var(--ag-fondo); box-shadow: none; }
.lateral__modulo .chip:hover { background: var(--ag-tinta); }
.lateral__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lateral__lista > li { padding: 10px 0; }
.lateral__cta { position: sticky; top: 24px; color: var(--ag-tinta); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 46, 126, .3), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 14px), var(--ag-verde); }
.lateral__cta-texto { margin: 0 0 8px; font-size: var(--t-lg); }
.lateral__cta-sub { margin: 0 0 16px; font-size: var(--t-sm); }

/* Herramientas */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.herramienta { display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque); padding: 0 16px; border: 0; border-radius: 999px; background: var(--ag-blanco); box-shadow: var(--sombra); color: var(--ag-tinta); font-size: var(--t-sm); font-weight: 700; line-height: 1; cursor: pointer; transition: background-color var(--trans), color var(--trans), transform var(--trans), box-shadow var(--trans); }
.herramienta .ico { width: 16px; height: 16px; flex: none; }
.herramienta:hover { background: var(--ag-tinta); color: var(--ag-blanco); transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.herramienta--principal { background: var(--ag-tinta); color: var(--ag-blanco); }
.herramienta--principal:hover { background: var(--ag-rosa); }
.herramienta:focus-visible { outline: 2px solid var(--ag-rosa); outline-offset: 2px; }

/* Ficha imprimible: ancho fijo igual a sizes (200px) para que el srcset de Photon no cambie la caja al cargar (CLS 0) */
.ficha { display: grid; justify-items: center; gap: 16px; margin: 0 0 24px; padding: 20px; border-radius: var(--radio); background: var(--ag-blanco); box-shadow: var(--sombra); text-align: center; }
.ficha__img { display: block; line-height: 0; }
.ficha .ficha__imagen { display: block; width: min(100%, 200px); height: auto; margin: 0; border-radius: var(--radio-sm); background: var(--ag-blanco); box-shadow: 0 6px 16px -6px rgba(12, 12, 14, .3); }
.ficha .ficha__texto { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ag-gris); text-align: inherit; }
.ficha__titulo { display: block; margin-bottom: 6px; font-size: var(--t-md); font-weight: 800; color: var(--ag-tinta); }
.ficha__pie { display: block; }
.clasico .ficha__descargar, .ficha__descargar { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: 12px; padding: 0 20px; border-radius: 999px; background: var(--ag-rosa); color: var(--ag-blanco); font-size: var(--t-sm); font-weight: 800; line-height: 1; text-decoration: none; transition: background-color var(--trans); }
.clasico .ficha__descargar:hover, .ficha__descargar:hover { background: var(--ag-tinta); color: var(--ag-blanco); }
@media (min-width: 600px) {
	.ficha { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 20px; text-align: left; }
	.ficha--sin-imagen { grid-template-columns: minmax(0, 1fr); }
}

/* Etiquetas */
.articulo__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.articulo__etiquetas a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 14px; border-radius: 999px; background: var(--ag-blanco); box-shadow: var(--sombra); color: var(--ag-tinta); font-size: var(--t-sm); font-weight: 600; text-decoration: none; transition: background-color var(--trans), color var(--trans); }
.articulo__etiquetas a::before { content: "#"; color: var(--ag-rosa); }
.articulo__etiquetas a:hover { background: var(--ag-tinta); color: var(--ag-blanco); }
.articulo__etiquetas .wp-block-post-terms__separator { display: none; }

/* Comentarios nativos: panel blanco */
.comentarios { margin-top: 40px; padding: 24px; border-radius: var(--radio); background: var(--ag-blanco); box-shadow: var(--sombra); font-size: var(--t-base); }
.comentarios__titulo { margin: 0 0 16px; font-size: var(--t-lg); font-stretch: 68%; font-weight: 850; line-height: 1; }
.comentarios .wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.comentarios__lista { margin: 0 0 16px; }
.comentarios__lista > summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque); cursor: pointer; list-style: none; padding: 0 18px; border-radius: 999px; background: var(--ag-fondo); font-size: var(--t-sm); font-weight: 800; transition: background-color var(--trans), color var(--trans); }
.comentarios__lista > summary::-webkit-details-marker { display: none; }
.comentarios__lista > summary::after { content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
.comentarios__lista[open] > summary { margin-bottom: 8px; }
.comentarios__lista[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.comentarios__lista > summary:hover { background: var(--ag-tinta); color: var(--ag-blanco); }
.comentarios__lista > summary:focus-visible { outline: 2px solid var(--ag-rosa); outline-offset: 2px; }
.comentarios .wp-block-comment-template ol { list-style: none; padding-left: 16px; border-left: 3px solid var(--ag-fondo); }
.comentario { padding: 14px 0; }
.comentario + .comentario, .comentarios .wp-block-comment-template > li + li { margin-top: 4px; }
.comentario > * { margin-block: 0; }
.comentario__meta { gap: 8px; align-items: baseline; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.comentario__meta > * { margin: 0; }
.comentario .wp-block-comment-author-name { font-weight: 800; }
.comentario .wp-block-comment-date { color: var(--ag-gris); }
.comentario .wp-block-comment-date a, .comentario .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.comentario .wp-block-comment-content { margin: 6px 0; overflow-wrap: break-word; }
.comentario .wp-block-comment-content p { margin: 0 0 8px; }
.comentario .wp-block-comment-reply-link a { font-size: var(--t-sm); font-weight: 700; color: var(--ag-rosa); }
.comentarios .wp-block-comments-pagination { margin: 16px 0; gap: 8px; font-size: var(--t-sm); font-weight: 700; }
.comentarios .comment-respond { margin-top: 24px; }
.comentarios .comment-reply-title { font-size: var(--t-md); font-weight: 800; margin: 0 0 8px; }
.comentarios .comment-reply-title small, .comentarios .comment-notes, .comentarios .logged-in-as, .comentarios .comment-form-cookies-consent { font-size: var(--t-sm); }
.comentarios .comment-form p { margin: 0 0 12px; }
.comentarios .comment-form label { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: 4px; }
.comentarios .comment-form input:not([type="checkbox"]):not([type="submit"]), .comentarios .comment-form textarea { box-sizing: border-box; width: 100%; min-height: 44px; font-size: var(--t-base); padding: 10px 14px; border: 0; border-radius: var(--radio-sm); background: var(--ag-fondo); }
.comentarios .comment-form input:focus, .comentarios .comment-form textarea:focus { outline: 2px solid var(--ag-tinta); outline-offset: 0; }
.comentarios .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.comentarios .form-submit .wp-block-button__link, .comentarios .form-submit input[type="submit"] { min-height: var(--toque); font-size: var(--t-sm); font-weight: 800; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ag-tinta); color: var(--ag-blanco); cursor: pointer; }

/* Lo más leído (lateral) */
.leido__lista { list-style: none; counter-reset: leido; margin: 0; padding: 0; display: grid; gap: 4px; }
.leido__lista > li { counter-increment: leido; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 0; }
.leido__lista > li::before { content: counter(leido); font-stretch: 68%; font-weight: 850; font-size: var(--t-lg); line-height: .9; color: var(--ag-rosa); }

/* ---- Más de la sección: franja oscura con 4 tarjetas ---- */
.mas-de { color: var(--ag-blanco); background: radial-gradient(55% 90% at 0% 0%, rgba(143, 209, 79, .26), transparent 60%), radial-gradient(50% 90% at 100% 100%, rgba(255, 46, 126, .26), transparent 60%), var(--ag-tinta); }
.mas-de__interior { padding-block: 40px; }
.mas-de__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.mas-de__titulo { margin: 0; font-size: var(--t-xl); color: var(--ag-verde); overflow-wrap: break-word; }
.mas-de__todo { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: var(--t-sm); font-weight: 800; color: var(--ag-blanco); text-decoration: none; transition: background-color var(--trans), color var(--trans); }
.mas-de__todo:hover { background: var(--ag-verde); color: var(--ag-tinta); }
.mas-de__rejilla { margin: 0; }
.mas-de .tarjeta--tinta { --t-bg: #222228; }
@media (min-width: 782px) {
	.mas-de__interior { padding-block: 56px; }
}

/* ---- Poemas: el poema va centrado y estrecho dentro de la columna; herramientas a la izquierda como siempre ---- */
.articulo--poema .articulo__col > .clasico { max-width: 560px; margin-inline: auto; }
.articulo--poema .clasico { font-size: var(--t-md); line-height: 1.7; }
.articulo--poema .clasico p { margin-bottom: 1.375rem; }
/* Poemas en bloques: un párrafo por verso (p.verso, inc/contenido.php); se leen como líneas.
   Un párrafo vacío o uno largo/con <br> conserva la pausa de estrofa. */
.articulo--poema .clasico p.verso:has(+ p.verso) { margin-bottom: .15em; }
.articulo--poema .clasico p:empty { min-height: 1px; margin-bottom: .5rem; }

/* ---- Impresión: solo el artículo (y, en imprimibles, la ficha a página completa) ---- */
@media print {
	.wp-site-blocks > header, .wp-site-blocks > footer, .tendencias, .herramientas, .articulo__lateral, .mas-de, .comentarios, .articulo__etiquetas, .aviso-copiado, .articulo-cabecera__deco, .ficha__descargar { display: none !important; }
	.articulo-cabecera { background: none !important; color: #000 !important; }
	.articulo-cabecera::before { display: none !important; }
	.articulo-cabecera__foto { box-shadow: none; }
	.articulo-cabecera__interior { padding: 0 0 1rem; }
	.articulo-cabecera__titulo { font-size: var(--t-lg); }
	.articulo__cuerpo { display: block; width: auto; padding: 0; }
	.articulo-cabecera > .articulo-cabecera__interior { width: auto; }
	.articulo-cabecera__foto { width: auto; margin: 0; }
	.articulo--imprimible .articulo-cabecera, .articulo--imprimible .clasico > :not(.ficha) { display: none !important; }
	.articulo--imprimible .ficha { display: block; padding: 0; background: none; }
	.articulo--imprimible .ficha__texto { display: none; }
	.articulo--imprimible .ficha .ficha__imagen { width: 100%; max-width: 100%; max-height: 95vh; object-fit: contain; box-shadow: none; }
}