/*
Theme Name: Creativa Revista
Theme URI: https://www.tallerwebmaster.com/
Author: Oyhesoft
Description: Tema liviano tipo revista para los sitios de tutoriales de la red Creativa INT. Un solo CSS, un JS chico, fuentes alojadas en el propio servidor, modo claro y oscuro, y acento configurable (Taller Webmaster / Solo Photoshop).
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.1
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: creativa-revista
*/

/* ───────────── Fuentes (alojadas en el tema, subconjunto latino, OFL) ───────────── */

@font-face {
	font-family: "Figtree";
	src: url("assets/fonts/figtree.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("assets/fonts/figtree-italic.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("assets/fonts/jetbrains-mono.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ───────────── Colores ───────────── */

:root {
	--papel: #ffffff;
	--superficie: #f2f3f5;
	--borde: #dadde3;
	--tinta: #16181d;
	--suave: #5b6170;
	--codigo-fondo: #16181d;
	--codigo-tinta: #e6e8ec;
	--codigo-barra: #23262d;

	--acento: #0b6e5f;
	--acento-suave: #e7f4f1;
	--sobre-acento: #ffffff;

	--fuente-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fuente-titulos: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--fuente-codigo: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	--radio: 14px;
	--ancho: 1240px;
	--margen: clamp(16px, 4vw, 56px);
	color-scheme: light;
}
.variante-photoshop {
	--acento: #b93d0b;
	--acento-suave: #fcede6;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--papel: #16181d;
		--superficie: #1f2228;
		--borde: #33373f;
		--tinta: #e6e8ec;
		--suave: #a3a9b5;
		--codigo-fondo: #0f1115;
		--codigo-barra: #1f2228;
		color-scheme: dark;
	}
	:root:not([data-tema="claro"]) body {
		--acento: #12a88f;
		--acento-suave: #12302b;
		--sobre-acento: #16181d;
	}
	:root:not([data-tema="claro"]) body.variante-photoshop {
		--acento: #ff7a3d;
		--acento-suave: #3a2116;
	}
}
:root[data-tema="oscuro"] {
	--papel: #16181d;
	--superficie: #1f2228;
	--borde: #33373f;
	--tinta: #e6e8ec;
	--suave: #a3a9b5;
	--codigo-fondo: #0f1115;
	--codigo-barra: #1f2228;
	color-scheme: dark;
}
:root[data-tema="oscuro"] body {
	--acento: #12a88f;
	--acento-suave: #12302b;
	--sobre-acento: #16181d;
}
:root[data-tema="oscuro"] body.variante-photoshop {
	--acento: #ff7a3d;
	--acento-suave: #3a2116;
}

/* ───────────── Base ───────────── */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--acento); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--fuente-titulos);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.saltar {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--acento);
	color: var(--sobre-acento);
	border-radius: 8px;
	font-weight: 600;
}
.saltar:focus { top: 12px; }

.envoltura {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--margen);
}
.principal { flex: 1 0 auto; }

.cat {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acento);
	text-decoration: none;
}
.meta { margin: 0; font-size: 0.875rem; color: var(--suave); }
.bajada { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--suave); }

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 14px;
	border-radius: 18px;
	background: var(--papel);
	color: var(--tinta);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--borde);
}
.chip:hover { border-color: var(--acento); color: var(--acento); }

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--acento);
	color: var(--sobre-acento);
	font: 600 0.9375rem var(--fuente-texto);
	cursor: pointer;
}
.boton-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--borde);
	border-radius: 22px;
	background: var(--papel);
	color: var(--tinta);
	cursor: pointer;
	list-style: none;
}
.boton-icono::-webkit-details-marker { display: none; }
.boton-icono:hover { border-color: var(--acento); color: var(--acento); }

/* ───────────── Cabecera ───────────── */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--papel);
	border-bottom: 1px solid var(--borde);
}
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 0; position: relative; } }

.cabecera-interior {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 14px var(--margen);
	display: flex;
	align-items: center;
	gap: 24px;
}

.marca {
	margin: 0;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	font-size: 1.625rem;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}
.marca a { color: var(--tinta); text-decoration: none; }
.marca span { color: var(--acento); }
.custom-logo { display: block; max-height: 40px; width: auto; }

.nav-principal { flex: 1 1 auto; min-width: 0; }
.nav-principal .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-principal a,
.nav-principal summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tinta);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.nav-principal a:hover,
.nav-principal a[aria-current] { color: var(--acento); }
.nav-principal .mas { position: relative; }
.nav-principal summary { list-style: none; gap: 4px; }
.nav-principal summary::-webkit-details-marker { display: none; }
.nav-principal summary::after { content: "▾"; font-size: 0.75em; }
.nav-principal details ul {
	position: absolute;
	right: 0;
	top: 100%;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
.nav-principal details ul a { display: flex; width: 100%; padding: 0 10px; border-radius: 8px; }
.nav-principal details ul a:hover { background: var(--superficie); }

.cabecera-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.buscar-campo {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--borde);
	border-radius: 22px;
	color: var(--suave);
	background: var(--papel);
}
.buscar-campo:focus-within { border-color: var(--acento); }
.buscar-campo input {
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--tinta);
	font: inherit;
	font-size: 0.9375rem;
	width: 160px;
	min-width: 0;
}

.icono-sol { display: none; }
:root[data-tema="oscuro"] .icono-sol { display: block; }
:root[data-tema="oscuro"] .icono-luna { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .icono-sol { display: block; }
	:root:not([data-tema="claro"]) .icono-luna { display: none; }
}

.menu-movil { display: none; position: relative; }
.menu-movil-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: min(86vw, 340px);
	padding: 16px;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgb(0 0 0 / 0.16);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.menu-movil-panel .buscar-campo input { width: 100%; }
.menu-movil-panel .menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.menu-movil-panel .menu a,
.menu-movil-panel summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--tinta);
	font-weight: 500;
	text-decoration: none;
}
.menu-movil-panel .menu a:hover { background: var(--superficie); }
.menu-movil-panel .mas details,
.menu-movil-panel .mas summary { display: contents; }
.menu-movil-panel .mas summary { display: none; }
.menu-movil-panel .mas ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 1080px) {
	.nav-principal { display: none; }
	.menu-movil { display: block; }
}
@media (max-width: 640px) {
	.cabecera-acciones > .buscar { display: none; }
	.marca { font-size: 1.375rem; }
}

.progreso { height: 3px; background: transparent; }
.progreso span {
	display: block;
	height: 3px;
	background: var(--acento);
	transform-origin: left;
	transform: scaleX(0);
}

/* ───────────── Imágenes de tutorial ───────────── */

.img {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radio);
	background: var(--acento-suave);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.img img.cubre { width: 100%; height: 100%; object-fit: cover; }
.img img.externa { object-position: center top; } /* capturas de pasos: se ve el comienzo */
.img img.enmarcada {
	max-width: calc(100% - 24px);
	max-height: calc(100% - 24px);
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
}
.sin-imagen {
	padding: 16px;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--acento);
	text-align: center;
}

/* ───────────── Portada ───────────── */

.franja-temas { background: var(--acento-suave); }
.franja-interior {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.franja-interior::-webkit-scrollbar { display: none; }
.franja-rotulo {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acento);
}
.franja-temas .chip { flex-shrink: 0; border-color: transparent; }

.portada { display: flex; flex-direction: column; gap: 56px; padding-block: 40px 64px; }

.portada-destacados { display: grid; gap: 28px; }
@media (min-width: 900px) {
	.portada-destacados { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.destacado { display: flex; flex-direction: column; gap: 14px; }
.destacado-enlace { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.destacado .img:has(> .enmarcada) { aspect-ratio: 2 / 1; }
.destacado-titulo { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.875rem); }
.destacado-enlace:hover .destacado-titulo { color: var(--acento); }

.secundarios { display: flex; flex-direction: column; gap: 20px; }

.mini-enlace { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; }
.mini .img { flex-shrink: 0; width: 132px; aspect-ratio: 3 / 2; border-radius: 10px; }
.mini .img img.enmarcada { max-width: calc(100% - 10px); max-height: calc(100% - 10px); box-shadow: none; border-radius: 4px; }
.mini .sin-imagen { font-size: 0.75rem; padding: 6px; }
.mini-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mini-titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.1875rem; line-height: 1.18; }
.mini-enlace:hover .mini-titulo { color: var(--acento); }

.anuncio {
	margin-top: auto;
	min-height: 100px;
	display: grid;
	place-items: center;
}

.encabezado-seccion {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 20px;
}
.encabezado-seccion h2 { font-size: 1.875rem; }
.encabezado-seccion a { font-weight: 600; text-decoration: none; white-space: nowrap; }

.grilla { display: grid; gap: 28px 24px; }
.grilla-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.tarjeta { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-enlace { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.tarjeta-titulo { font-size: 1.25rem; line-height: 1.2; }
.tarjeta-enlace:hover .tarjeta-titulo { color: var(--acento); }

.portada-ultimos { display: grid; gap: 40px; }
@media (min-width: 1000px) {
	.portada-ultimos { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); align-items: start; }
}

.mas-leidos {
	padding: 24px;
	background: var(--superficie);
	border-radius: var(--radio);
}
.mas-leidos h2 { font-size: 1.375rem; margin-bottom: 16px; }
.mas-leidos ol { margin: 0; padding: 0; list-style: none; counter-reset: leidos; display: flex; flex-direction: column; gap: 16px; }
.mas-leidos li { counter-increment: leidos; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.mas-leidos li::before {
	content: counter(leidos);
	font-family: var(--fuente-titulos);
	font-weight: 700;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--acento);
}
.mas-leidos a { color: var(--tinta); font-weight: 500; line-height: 1.35; text-decoration: none; }
.mas-leidos a:hover { color: var(--acento); }

.bloque-categoria {
	display: grid;
	gap: 28px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--borde);
	border-radius: 16px;
}
@media (min-width: 900px) {
	.bloque-categoria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bloque-intro { display: flex; flex-direction: column; gap: 12px; }
.bloque-intro h2 { font-size: 2.125rem; }
.bloque-intro p { margin: 0; color: var(--suave); }
.enlace-fuerte { margin-top: auto; font-weight: 600; text-decoration: none; }
.lista-titulares { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lista-titulares li { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.lista-titulares li:first-child { padding-top: 0; }
.lista-titulares li:last-child { border-bottom: 0; }
.lista-titulares a { color: var(--tinta); font-weight: 500; text-decoration: none; }
.lista-titulares a:hover { color: var(--acento); }

/* ───────────── Listados (categoría, búsqueda, archivo) ───────────── */

.listado { display: flex; flex-direction: column; gap: 32px; padding-block: 40px 64px; }
.encabezado-listado { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.encabezado-listado h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); }
.encabezado-listado .bajada p { margin: 0; }

.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--borde);
	border-radius: 10px;
	color: var(--tinta);
	font-weight: 500;
	text-decoration: none;
}
.paginacion .page-numbers.current { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.paginacion a.page-numbers:hover { border-color: var(--acento); color: var(--acento); }
.paginacion .dots { border: 0; }

.vacio { display: flex; flex-direction: column; gap: 16px; }
.buscar-grande { display: flex; gap: 10px; max-width: 560px; }
.buscar-grande input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--borde);
	border-radius: 10px;
	background: var(--papel);
	color: var(--tinta);
	font: inherit;
}
.buscar-grande input:focus { border-color: var(--acento); outline: 0; }

/* ───────────── Tutorial ───────────── */

.tutorial {
	display: grid;
	gap: 40px;
	padding-block: 40px 56px;
	grid-template-columns: minmax(0, 1fr);
	justify-content: center;
}
@media (min-width: 1000px) {
	.tutorial { grid-template-columns: minmax(0, 720px); }
	.tutorial.con-barra { grid-template-columns: minmax(0, 720px) 280px; }
}
@media (min-width: 1200px) {
	.tutorial.con-indice { grid-template-columns: 220px minmax(0, 720px); }
	.tutorial.con-indice.con-barra { grid-template-columns: 220px minmax(0, 720px) 260px; }
}

.indice { font-size: 0.9375rem; }
@media (min-width: 1200px) {
	.indice { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
}
@media (max-width: 1199px) {
	.indice { display: none; }
}
.indice-movil {
	padding: 4px 18px;
	background: var(--superficie);
	border-radius: var(--radio);
	font-size: 0.9375rem;
}
.indice-movil summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	cursor: pointer;
}
.indice-movil ol { margin: 0 0 12px; padding: 0; list-style: none; }
.indice-movil a { display: block; padding: 8px 0; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--borde); }
.indice-movil .nivel-h3 a { padding-left: 14px; color: var(--suave); }
@media (min-width: 1200px) {
	.indice-movil { display: none; }
}
.indice-rotulo {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--suave);
}
.indice ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.indice a {
	display: block;
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--borde);
	color: var(--suave);
	text-decoration: none;
	line-height: 1.35;
}
.indice .nivel-h3 a { padding-left: 24px; font-size: 0.875rem; }
.indice a:hover { color: var(--tinta); }
.indice a[aria-current] { color: var(--tinta); font-weight: 600; border-left-color: var(--acento); }

.articulo { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.articulo-cabecera { display: flex; flex-direction: column; gap: 14px; }
.migas { margin: 0; font-size: 0.875rem; color: var(--suave); }
.migas a { color: var(--suave); }
.migas a:hover { color: var(--acento); }
.articulo-titulo { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; }
.articulo-cabecera .bajada { font-size: 1.3125rem; }
.articulo-cabecera .meta strong { color: var(--tinta); font-weight: 600; }
.articulo-cabecera .meta a { color: inherit; }

.barra { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1000px) { .barra { position: sticky; top: 100px; align-self: start; } }

/* Contenido del tutorial (HTML heredado del sitio viejo incluido). */
.contenido {
	font-size: 1.1875rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.contenido > * { margin-block: 0 1.1em; }
.contenido h2 { font-size: 1.875rem; margin-top: 1.6em; margin-bottom: 0.5em; }
.contenido h3 { font-size: 1.4375rem; margin-top: 1.4em; margin-bottom: 0.4em; }
.contenido h4 { font-size: 1.1875rem; margin-top: 1.2em; }
.contenido p { margin: 0 0 1.1em; }
.contenido ul, .contenido ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.contenido li { margin-bottom: 0.35em; }
.contenido img { height: auto; border-radius: 8px; }
.contenido figure { margin: 0 0 1.4em; }
.contenido figcaption, .contenido .wp-caption-text { font-size: 0.875rem; color: var(--suave); margin-top: 6px; }
.contenido .wp-caption { max-width: 100%; }
.contenido blockquote {
	margin: 0 0 1.1em;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--acento);
	color: var(--suave);
}
.contenido hr { border: 0; border-top: 1px solid var(--borde); margin: 2em 0; }
.contenido code {
	font-family: var(--fuente-codigo);
	font-size: 0.86em;
	padding: 0.1em 0.35em;
	border-radius: 5px;
	background: var(--superficie);
}
.contenido pre {
	margin: 0;
	padding: 18px 18px;
	overflow-x: auto;
	background: var(--codigo-fondo);
	color: var(--codigo-tinta);
	font-family: var(--fuente-codigo);
	font-size: 0.875rem;
	line-height: 1.6;
	border-radius: 12px;
	tab-size: 4;
}
.contenido pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
.contenido .codigo { position: relative; margin: 0 0 1.4em; }
.contenido .codigo pre { padding-top: 48px; }
.copiar {
	position: absolute;
	top: 8px;
	right: 8px;
	min-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--codigo-barra);
	color: var(--codigo-tinta);
	font: 500 0.8125rem var(--fuente-texto);
	cursor: pointer;
}
.copiar:hover { background: #3a3e47; }
.contenido .tabla { overflow-x: auto; margin: 0 0 1.4em; }
.contenido table { border-collapse: collapse; font-size: 0.9375rem; min-width: 100%; }
.contenido th, .contenido td { padding: 8px 10px; border: 1px solid var(--borde); text-align: left; vertical-align: top; }
.contenido th { background: var(--superficie); }
.contenido iframe, .contenido video { max-width: 100%; }
.contenido object, .contenido embed { display: none; } /* Flash: ya no funciona en ningún navegador */
.contenido .video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.4em; border-radius: 12px; overflow: hidden; background: #000; }
.contenido .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contenido .nota-flash { color: var(--suave); }
.contenido .nota {
	padding: 16px 18px;
	background: var(--acento-suave);
	border-radius: 12px;
	font-size: 1rem;
}

/* Normaliza el formato heredado (fuentes y tamaños fijados en línea). */
.contenido font[face], .contenido [style*="font-family"] { font-family: inherit !important; }
.contenido font[size], .contenido [style*="font-size"] { font-size: inherit !important; }
.contenido [style*="color"] { color: inherit !important; }
.contenido [style*="background"]:not(img) { background: none !important; }
.contenido [width] { max-width: 100%; }
.contenido center { text-align: center; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.paginas-articulo { display: flex; gap: 8px; font-weight: 600; }

.segui-con { background: var(--superficie); padding-block: 40px; }
.segui-con h2 { font-size: 1.625rem; margin-bottom: 20px; }

/* ───────────── Widgets ───────────── */

.widget { font-size: 0.9375rem; }
.widget-titulo { font-size: 1.1875rem; margin-bottom: 10px; }
.widget ul { margin: 0; padding-left: 1.2em; }

/* ───────────── Pie ───────────── */

.pie {
	background: #16181d;
	color: #e6e8ec;
	font-size: 0.875rem;
}
.pie-interior {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 28px var(--margen);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 32px;
}
.pie p { margin: 0; }
.pie a { color: #e6e8ec; }
.marca-pie { font-size: 1.25rem; }
.marca-pie a { color: #e6e8ec; }
.pie .marca span { color: #12a88f; }
.variante-photoshop .pie .marca span { color: #ff7a3d; }
.pie-suave { color: #a3a9b5; }
.menu-pie { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pie-widgets { max-width: var(--ancho); margin-inline: auto; padding: 0 var(--margen) 28px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media print {
	.cabecera, .pie, .indice, .barra, .segui-con, .copiar, .franja-temas { display: none !important; }
	body { background: #fff; color: #000; }
	.tutorial { display: block; }
}

/* Celular: tarjetas como filas compactas (más tutoriales por pantalla). */
@media (max-width: 599px) {
	.grilla-3 { gap: 20px; }
	.tarjeta-enlace { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; }
	.tarjeta-enlace .img { grid-row: 1 / span 2; aspect-ratio: 3 / 2; border-radius: 10px; }
	.tarjeta-enlace .img img.enmarcada { width: auto !important; max-width: calc(100% - 10px); max-height: calc(100% - 10px); box-shadow: none; border-radius: 4px; }
	.tarjeta-enlace .sin-imagen { font-size: 0.75rem; padding: 6px; }
	.tarjeta-titulo { font-size: 1.0625rem; }
	.tarjeta .meta { padding-left: 134px; margin-top: -4px; }
}