/*
Theme Name: Pantalla vs. Papel
Description: Tema editorial tipo periódico para el blog de LENG1040 (Semana 6).
Version: 1.0
Requires at least: 6.0
Text Domain: pantalla-papel
*/

:root {
	--papel: #F3EFE6;
	--papel-2: #EAE4D7;
	--tinta: #1C1A17;
	--tinta-2: #3D3830;
	--gris: #5A544A;
	--linea: #CFC7B6;
	--acento: #9E2A1E;
	--acento-2: #6E1C14;
	--display: 'Fraunces', Georgia, serif;
	--texto: 'Source Serif 4', Georgia, serif;
	--mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 18px; line-height: 1.65; }
a { color: var(--acento); }
a:hover { color: var(--acento-2); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }

/* Cabecera */
.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 32px; }
.topbar nav { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar nav a { color: var(--tinta); text-decoration: none; }
.topbar nav a:hover { color: var(--acento); }
.masthead { border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--tinta); margin-top: 20px; padding: 20px 0; text-align: center; }
.masthead .site-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 9vw, 112px); line-height: 0.95; letter-spacing: -0.03em; }
.masthead .site-title a { color: inherit; text-decoration: none; }
.masthead .site-title em { font-weight: 400; color: var(--acento); }
.masthead .tagline { margin: 12px 0 0; font-style: italic; color: var(--gris); }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 3px double var(--tinta); padding: 8px 0; font-family: var(--mono); font-size: 12px; color: var(--gris); }

/* Entrada */
main { padding-top: 48px; }
.kicker { margin: 0 0 8px; color: var(--acento); }
.entry-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; max-width: 900px; }
.entry-title a { color: inherit; text-decoration: none; }
.entry-content { margin-top: 24px; }
.entry-content .lead { font-size: 22px; line-height: 1.5; color: var(--tinta-2); }
.entry-content h2 { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.15; margin: 64px 0 16px; scroll-margin-top: 24px; }
.entry-content h3 { font-family: var(--display); font-size: 24px; margin: 32px 0 12px; }
.entry-content .has-drop-cap:not(:focus)::first-letter { font-family: var(--display); font-weight: 800; font-size: 4.2em; line-height: 0.8; margin: 0.08em 0.12em 0 0; color: var(--acento); }

/* Listas en rejilla con bordes de periódico */
.entry-content ul.rejilla { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--tinta); border-left: 1px solid var(--tinta); }
.entry-content ul.rejilla li { padding: 20px 24px; border-right: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.entry-content ul.rejilla li:nth-child(even) { background: var(--papel-2); }
.entry-content ul.rejilla strong { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); margin-bottom: 4px; }

/* Tabla comparativa */
.wp-block-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--tinta); font-size: 17px; }
.wp-block-table th { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; background: var(--tinta); color: var(--papel); padding: 14px 20px; }
.wp-block-table td { padding: 14px 20px; border-top: 1px solid var(--tinta); vertical-align: top; }
.wp-block-table td + td, .wp-block-table th + th { border-left: 1px solid var(--tinta); }
.wp-block-table tr:nth-child(even) td { background: var(--papel-2); }
.wp-block-table figcaption { font-size: 15px; color: var(--gris); margin-top: 8px; }

/* Cita destacada */
.wp-block-pullquote { margin: 48px 0; padding: 24px 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); text-align: center; }
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p { font-family: var(--display); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; margin: 0 auto; max-width: 860px; }
.wp-block-pullquote cite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 13px; font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris); }

/* Multimedia */
.entry-content figure { margin: 32px 0; }
.entry-content figure figcaption { font-size: 15px; color: var(--gris); margin-top: 10px; }
.wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.placeholder { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, #E6E0D3 0 12px, #EDE8DD 12px 24px); border: 1px solid var(--linea); font-family: var(--mono); font-size: 13px; color: var(--gris); }

/* Bloque oscuro (conclusión) */
.bloque-oscuro { margin: 64px 0; padding: 40px; background: var(--tinta); color: var(--papel); }
.bloque-oscuro h2 { margin-top: 0; color: var(--papel); }
.bloque-oscuro .mono { color: #E8B4A8; margin: 0 0 8px; }

/* Referencias */
.referencias { margin-top: 64px; padding-top: 8px; border-top: 3px double var(--tinta); }
.entry-content .referencias h2 { margin-top: 16px; font-size: 26px; }
.referencias ol { font-size: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Listado */
.tarjeta { padding: 32px 0; border-bottom: 1px solid var(--tinta); }
.tarjeta .entry-title { font-size: clamp(28px, 4vw, 40px); }
.tarjeta p { color: var(--tinta-2); }

.site-footer { margin-top: 64px; padding: 24px 0 48px; border-top: 1px solid var(--tinta); font-family: var(--mono); font-size: 12px; color: var(--gris); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (max-width: 600px) {
	.bloque-oscuro { padding: 28px 20px; }
	.wp-block-table { overflow-x: auto; }
	.wp-block-table td, .wp-block-table th { padding: 12px; }
}

.wp-block-image img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border: 1px solid var(--tinta); }
.wp-block-image figcaption { font-size: 15px; color: var(--gris); margin-top: 10px; }

/* Infografía */
.infografia-img img { aspect-ratio: auto; object-fit: contain; }
.infografia { border: 1px solid var(--tinta); background: var(--papel); }
.info-cab { padding: 24px 28px; border-bottom: 1px solid var(--tinta); }
.info-cab .mono { margin: 0 0 4px; color: var(--acento); }
.entry-content .info-cab h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.info-col { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.info-col + .info-col { border-left: 1px solid var(--tinta); background: var(--papel-2); }
.info-tag { margin: 0; color: var(--tinta); }
.info-sub { margin: 0; font-style: italic; color: var(--tinta-2); }
.entry-content .pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 36px; flex-grow: 1; justify-content: center; }
.pasos li { position: relative; width: min(100%, 280px); padding: 14px 18px; border: 1px solid var(--tinta); background: var(--papel); font-family: var(--display); font-size: 22px; display: flex; gap: 14px; align-items: baseline; }
.pasos li span { font-family: var(--mono); font-size: 13px; color: var(--acento); }
.pasos li + li::before { content: ""; position: absolute; left: 50%; top: -37px; height: 36px; border-left: 2px solid var(--tinta); }
.pasos li + li::after { content: ""; position: absolute; left: calc(50% - 6px); top: -9px; border: 6px solid transparent; border-top: 8px solid var(--tinta); border-bottom: 0; }
.red { width: 100%; height: auto; display: block; }
.red .lineas line { stroke: var(--tinta); stroke-width: 1.5; }
.red .lineas line.cruce { stroke: var(--acento); stroke-dasharray: 5 5; }
.red .nodo rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }
.red text { font-family: var(--mono); font-size: 15px; text-anchor: middle; fill: var(--tinta); }
.red .centro { fill: var(--acento); }
.red .centro-txt { font-family: var(--display); font-size: 19px; font-weight: 600; fill: #fff; }
.entry-content .rasgos { margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--tinta); font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.rasgos li::before { content: "— "; color: var(--acento); }
.infografia figcaption { padding: 12px 28px; border-top: 1px solid var(--tinta); margin: 0 !important; }
@media (max-width: 680px) { .info-col + .info-col { border-left: 0; border-top: 1px solid var(--tinta); } .info-col, .info-cab { padding: 20px; } }