/* ==========================================================================
   Reformas en Toledo · Identidad (paso 3 + familias tipográficas)

   Un solo acento, la terracota del barro cocido de los tejados de Toledo,
   sobre papel de cal y tinta cálida. El acento marca lo que se pulsa
   (enlaces, etiquetas, botones, foco) y nada más.

   Contrastes WCAG comprobados:
     acento   #A2462A sobre blanco 6,1:1 · sobre papel 5,7:1
     tinta    #22201C sobre papel 15,2:1
     tinta-3  #6E665D sobre blanco 5,6:1 (metadatos)
     pie      #EDE7DF sobre noche 13,2:1 · acento-noche #D98A6C 6,0:1
   ========================================================================== */

/* Archivo con la anchura fijada en semicondensada (87,5 %): un solo
   archivo variable de peso 500 a 800. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-semicondensed-latin.woff2") format("woff2");
	font-weight: 500 800;
	font-stretch: 87.5%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

:root {
	--rt-ink: #22201c;
	--rt-ink-2: #5a534b;
	--rt-ink-3: #6e665d;
	--rt-paper: #faf7f2;
	--rt-surface: #ffffff;
	--rt-line: #e6ded3;

	--rt-accent: #a2462a;
	--rt-accent-strong: #86381f;
	--rt-accent-soft: #f3e3da;

	--rt-night: #22201c;
	--rt-night-2: #2c2924;
	--rt-night-text: #ede7df;
	--rt-night-muted: #b9afa3;
	--rt-night-accent: #d98a6c;
	--rt-night-line: #3d3832;

	--rt-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--rt-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* --------------------------------------------------------------------------
   Tipografía: dos familias con un papel cada una
   Archivo semicondensada para titulares, logo y secciones (palo seco firme,
   de plano técnico, que encaja con un oficio de obra); Source Sans 3 para
   lectura e interfaz. Archivo sustituyó a Newsreader en la 0.5.0. Sustituye a Lato, Source Sans Pro e IBM Plex
   (esta última ni siquiera se cargaba). El !important es necesario porque
   Blockspare declara la fuente en estilos en línea por bloque.
   -------------------------------------------------------------------------- */
body,
body :is(button, input, select, optgroup, textarea, p, li, td, th, label, time, blockquote, figcaption),
body .main-navigation a,
body .em-breadcrumbs,
body .entry-meta,
body .item-metadata,
body .cat-links a,
body .aft-readmore,
body .widget:not(.widget_block) li,
body .blockspare-posts-block-post-category a,
body .blockspare-posts-block-post-grid-byline,
body .blockspare-posts-block-post-grid-byline :not(i, [class*="fa"]),
body .blockspare-posts-block-post-grid-excerpt,
body .blockspare-posts-block-post-grid-excerpt :not(i, [class*="fa"]),
body .blockspare-posts-block-post-grid-more-link,
body .blockspare-posts-block-post-grid-more-link :not(i, [class*="fa"]),
body .figure-categories .cat-links,
body .grid-item-metadata,
body span.aft-comment-count,
body span.aft-view-count {
	font-family: var(--rt-sans) !important;
}

body :is(h1, h2, h3, h4, h5, h6),
body :is(h1, h2, h3, h4, h5, h6) :is(a, span, strong, em),
body .widget-title,
body .blockspare-title,
body .blockspare-posts-block-post-grid-title,
body .blockspare-posts-block-post-grid-title * {
	font-family: var(--rt-display) !important;
	font-stretch: 87.5%;
	font-weight: 700;
	letter-spacing: -0.012em;
}

body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--rt-ink);
	line-height: 1.2;
}

body {
	background-color: var(--rt-paper);
	color: var(--rt-ink);
}

.entry-content,
.entry-content :is(p, li, td, th) {
	color: var(--rt-ink);
}

::selection {
	background: var(--rt-accent-soft);
	color: var(--rt-ink);
}


/* --------------------------------------------------------------------------
   Cabecera: sin foto, papel de cal y logo tipográfico
   -------------------------------------------------------------------------- */
#masthead .masthead-banner {
	background: var(--rt-paper);
	padding: 28px 0;
}

#masthead .masthead-banner::before {
	display: none;
}

.rt-wordmark,
.rt-wordmark:is(:hover, :focus, :visited) {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-wordmark__mark {
	flex: none;
	width: 36px;
	height: 32px;
	color: var(--rt-accent);
}

.rt-wordmark__text {
	font-family: var(--rt-display);
	font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.375rem);
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.rt-wordmark__b {
	color: var(--rt-accent);
	font-weight: 600;
}

/* El título de texto que CoverNews pinta junto al logo sobra: el logo ya es texto. */
#masthead .site-branding .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 991px) {
	#masthead .masthead-banner {
		padding: 16px 0;
	}

	#masthead .masthead-banner .site-branding {
		text-align: center;
		padding-right: 0;
	}

	.rt-wordmark {
		gap: 9px;
	}

	.rt-wordmark__mark {
		width: 28px;
		height: 25px;
	}
}

/* Logo dentro de la barra fija al hacer scroll en móvil. */
.main-navigation span.af-mobile-site-title-wrap .rt-wordmark {
	height: 100%;
}

.main-navigation span.af-mobile-site-title-wrap .rt-wordmark__text {
	font-size: 1.25rem;
}

.main-navigation span.af-mobile-site-title-wrap .rt-wordmark__mark {
	width: 22px;
	height: 20px;
}


/* --------------------------------------------------------------------------
   Menú: barra clara entre filetes; el acento solo marca la sección actual
   -------------------------------------------------------------------------- */
#masthead nav.main-navigation {
	background: var(--rt-surface);
	border-top: 1px solid var(--rt-line);
	border-bottom: 1px solid var(--rt-line);
}

#masthead .main-navigation #primary-menu > li > a,
#masthead .main-navigation .menu-desktop > ul > li > a {
	color: var(--rt-ink);
	font-weight: 600;
}

#masthead .main-navigation #primary-menu > li > a:hover,
#masthead .main-navigation #primary-menu > li.current-menu-item > a,
#masthead .main-navigation #primary-menu > li.current-menu-ancestor > a {
	color: var(--rt-accent);
}

#masthead .main-navigation #primary-menu > li > a::after {
	background-color: var(--rt-accent);
}

#masthead .ham,
#masthead .ham::before,
#masthead .ham::after {
	background-color: var(--rt-ink);
}

#masthead .ham.exit {
	background-color: transparent;
}

#masthead .search-icon,
#masthead .search-icon:is(:visited, :hover, :focus, :active) {
	color: var(--rt-ink);
}

/* Submenús y menú móvil desplegado: tinta, no gris neutro. */
.main-navigation .menu ul ul,
.main-navigation .menu .menu-mobile {
	background: var(--rt-night);
}


/* --------------------------------------------------------------------------
   Etiquetas de categoría: una sola etiqueta en toda la web
   (antes: roja en archivo y entrada, cian en la portada, amarilla en el slider)
   -------------------------------------------------------------------------- */
/* La clase repetida sube la especificidad por encima de los estilos que
   Blockspare genera por bloque (.blockspare-<id> .… a { color … !important }). */
body .figure-categories .cat-links a.covernews-categories,
body .cat-links a.covernews-categories[class*="category-color-"],
body .blockspare-posts-block-post-category.blockspare-posts-block-post-category.blockspare-posts-block-post-category a {
	background-color: var(--rt-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 2px;
	padding: 3px 8px !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	text-transform: none;
}

body .figure-categories .cat-links a.covernews-categories *,
body .blockspare-posts-block-post-category a * {
	color: inherit !important;
}


/* --------------------------------------------------------------------------
   Enlaces y acciones
   -------------------------------------------------------------------------- */

/* Hover general de enlaces: CoverNews lo pinta en rojo #bb1919 en todos
   los enlaces que no tienen regla propia. */
a:hover,
a:focus,
a:active {
	color: var(--rt-accent);
}

/* Enlaces dentro del texto: antes azul Material #2196F3 (3,1:1). CoverNews
   los pinta con un selector de especificidad (0,4,3); el !important evita
   tener que copiarlo entero. */
body .entry-content a:not([class]),
body .entry-content :is(p, li, td) a,
body .widget_text a:not([class]),
body .post-excerpt a,
body .comment-content a {
	color: var(--rt-accent) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body .entry-content a:not([class]):hover,
body .entry-content :is(p, li, td) a:hover {
	color: var(--rt-accent-strong) !important;
	text-decoration-thickness: 2px;
}

/* Titulares enlazados: tinta en reposo, acento al pasar. */
body .blockspare-posts-block-post-grid-title a,
body .blockspare-posts-block-post-grid-title a span,
body .entry-title a,
body .article-title a {
	color: var(--rt-ink) !important;
}

body .blockspare-posts-block-post-grid-title a:hover,
body .blockspare-posts-block-post-grid-title a:hover span,
body .blockspare-posts-block-title-link:hover span,
body .entry-title a:hover,
body .article-title a:hover {
	color: var(--rt-accent) !important;
}

/* Sobre las fotos del carrusel principal, los titulares van en blanco. */
body .has-trending-title-hover .blockspare-posts-block-post-grid-title a,
body .has-trending-title-hover .blockspare-posts-block-post-grid-title a span,
body .blockspare-banner-wrapper .blockspare-posts-block-post-grid-title a,
body .blockspare-banner-wrapper .blockspare-posts-block-post-grid-title a span {
	color: #fff !important;
}

body .aft-readmore,
body .blockspare-posts-block-post-grid-more-link a {
	color: var(--rt-accent);
	font-weight: 600;
}

body .aft-readmore:hover,
body .blockspare-posts-block-post-grid-more-link a:hover {
	color: var(--rt-accent-strong);
}

/* Botones (buscador, formularios, bloques de botón). */
body :is(button, input[type="button"], input[type="reset"], input[type="submit"]):not(.cky-btn):not(.slick-arrow):not(.rt-carousel__btn):not([class*="toggle"]),
body .wp-element-button,
body .wp-block-button.is-style-fill a,
body .wp-block-search__button,
body .site-content .search-form .search-submit,
body .site-footer .search-form .search-submit {
	background: var(--rt-accent);
	border-color: var(--rt-accent);
	color: #fff;
}

body .wp-block-button.is-style-outline a {
	color: var(--rt-accent);
	border-color: var(--rt-accent);
}

#scroll-up,
#scroll-up.secondary-color {
	background-color: var(--rt-ink);
	border-color: var(--rt-ink);
	color: #fff;
}

#scroll-up::after {
	border-bottom-color: #fff;
}

#reading-progress-bar {
	background-color: var(--rt-accent);
}

/* Foco visible con teclado. El tema usa un punteado de 1px (o ninguno) con
   selectores más específicos; el !important garantiza un anillo claro y
   uniforme en todos los controles. Solo con teclado (:focus-visible). */
:focus-visible {
	outline: 2px solid var(--rt-accent) !important;
	outline-offset: 2px !important;
}

.site-footer :focus-visible {
	outline-color: var(--rt-night-accent) !important;
}


/* --------------------------------------------------------------------------
   Títulos de sección: a la izquierda, con un filete corto de acento
   (Blockspare los centraba mientras su filete quedaba a la izquierda)
   -------------------------------------------------------------------------- */
body .blockspare-title,
body .blockspare-title-wrapper,
body .blockspare-section-head-wrap {
	text-align: left !important;
}

body .widget-title,
body #primary .widget-title,
body .blockspare-title {
	color: var(--rt-ink) !important;
}

body .widget-title span::before,
body #secondary .widget-title span::after,
body .covernews-heading-style::before,
body .em-reated-posts .related-title::before,
body .widget_block .wp-block-heading::before,
body .widget_block .wp-block-search__label::before,
body .wp-block-group .wp-block-heading::before,
body span.header-after::after,
body span.border-after {
	background: var(--rt-accent) !important;
}


/* --------------------------------------------------------------------------
   Barra lateral (categorías, búsqueda): sobre el papel, sin cajas blancas
   -------------------------------------------------------------------------- */
#secondary :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .wp-block-latest-comments, .wp-block-search__inside-wrapper, form.search-form),
#secondary .widget > ul {
	/* !important: CoverNews pone fondo blanco y sombra con más especificidad. */
	background: transparent !important;
	box-shadow: none !important;
	padding-inline: 0;
}

#secondary :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li,
#secondary .widget > ul > li {
	margin: 0;
	padding: 0.7em 0;
	border-bottom: 1px solid var(--rt-line);
}

#secondary :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li:last-child,
#secondary .widget > ul > li:last-child {
	border-bottom: 0;
}

#secondary :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .widget) li a {
	color: var(--rt-ink);
	font-weight: 600;
	line-height: 1.4;
}

#secondary :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives, .widget) li a:hover {
	color: var(--rt-accent);
}

#secondary .wp-block-search__inside-wrapper {
	padding: 0;
}

#secondary .wp-block-search__input,
#secondary .search-field {
	border: 1px solid var(--rt-line);
	background: var(--rt-surface);
}


/* --------------------------------------------------------------------------
   Carrusel principal de la portada: tinta cálida en vez de negro puro
   -------------------------------------------------------------------------- */
body .blockspare-2680bccf-2720-4 > .blockspare-block-container-wrapper {
	background-color: var(--rt-night) !important;
}

body .blockspare-banner-wrapper .blockspare-posts-block-post-grid-date,
body .blockspare-banner-wrapper .blockspare-posts-block-post-grid-byline,
body .blockspare-banner-wrapper .blockspare-posts-block-post-grid-byline * {
	color: var(--rt-night-muted) !important;
}


/* --------------------------------------------------------------------------
   Metadatos (autor, fecha) en gris cálido legible
   -------------------------------------------------------------------------- */
body .entry-meta,
body .entry-meta a,
body .item-metadata,
body .item-metadata a,
body .blockspare-posts-block-post-grid-byline,
body .blockspare-posts-block-post-grid-byline a {
	color: var(--rt-ink-3);
}

body .em-breadcrumbs,
body .em-breadcrumbs a {
	color: var(--rt-ink-2);
}


/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--rt-night);
	color: var(--rt-night-text);
}

.site-footer :is(p, li, span, .widget-title) {
	color: var(--rt-night-text);
}

.site-footer a {
	color: var(--rt-night-text);
}

.site-footer a:hover {
	color: var(--rt-night-accent);
}

/* Columna de la marca: el logo en negativo y qué es la web. */
.site-footer .rt-footer-brand .rt-wordmark,
.site-footer .rt-footer-brand .rt-wordmark:is(:hover, :focus, :visited) {
	color: var(--rt-night-text);
}

.site-footer .rt-footer-brand :is(.rt-wordmark__mark, .rt-wordmark__b) {
	color: var(--rt-night-accent);
}

.site-footer .rt-footer-brand .rt-wordmark__text {
	font-size: 1.75rem;
}

.site-footer .rt-footer-brand__text {
	max-width: 38ch;
	margin: 1.25rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--rt-night-muted);
}

/* Correo de contacto bajo la presentación: el dato que más se busca en un
   pie, así que va en el color de acento y a buen tamaño. */
.site-footer .rt-footer-brand__contact {
	margin: 1.25rem 0 0;
}

.site-footer .rt-footer-brand__label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--rt-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rt-night-muted);
}

.site-footer .rt-footer-brand__contact a {
	display: inline-block;
	padding-block: 4px;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--rt-night-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.site-footer .rt-footer-brand__contact a:hover {
	color: var(--rt-night-text);
}

/* Correo destacado en la página de contacto. */
.rt-contact-email {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--rt-accent);
	background: var(--rt-accent-soft);
	font-size: 1.25rem;
}

.rt-contact-email a {
	font-weight: 600;
	color: var(--rt-accent-strong);
	overflow-wrap: anywhere;
}

.site-footer .tagcloud a,
.site-footer .wp-block-tag-cloud a,
.site-footer .widget_categories a,
.site-footer .cat-links a {
	border-color: var(--rt-night-line);
}

/* Categorías del pie (nube de etiquetas): CoverNews les pone fondo rojo al
   pasar el ratón. */
body .tagcloud a:hover,
body .wp-block-tag-cloud a:hover,
body .tagcloud a:focus-visible {
	background: var(--rt-accent);
	border-color: var(--rt-accent);
	color: #fff;
}

.site-footer .menu a,
.site-footer .footer-navigation a {
	display: inline-block;
	padding-block: 10px;
}

.site-footer .site-info,
.site-footer .site-info a,
.site-footer .site-info p {
	color: var(--rt-night-muted);
}

.site-footer .secondary-footer,
.site-footer .site-info {
	background: var(--rt-night-2);
}


/* --------------------------------------------------------------------------
   Aviso de cookies con los colores de la marca
   (CookieYes pinta los botones desde atributos style: de ahí el !important)
   -------------------------------------------------------------------------- */
.cky-consent-container .cky-btn-accept {
	background-color: var(--rt-accent) !important;
	border-color: var(--rt-accent) !important;
	color: #fff !important;
}

.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize,
.cky-consent-container .cky-btn-preferences {
	color: var(--rt-ink) !important;
	border-color: var(--rt-ink) !important;
	background: transparent !important;
}

.cky-consent-container .cky-notice-des a {
	color: var(--rt-accent) !important;
}