/*
 * CochesRC — hoja de estilos unica del front.
 *
 * Los valores de color y tipografia estan medidos sobre cochesrc.com v5.0
 * para que el cambio de tema no se note como un cambio de marca.
 * Lo que cambia respecto a la v5.0: tamanos fluidos, foco visible,
 * y las tarjetas de listado con rejilla en vez de floats.
 */

/* ------------------------------------------------------------------ *\
   1. Variables
\* ------------------------------------------------------------------ */

:root {
	/*
	 * Escala de rojos de la marca. Los tres valores estan medidos sobre
	 * material corporativo real, no inventados:
	 *   #FF0000  logo e isotipo (.ai original). Contraste 4,0:1 sobre blanco:
	 *            no pasa AA, asi que NUNCA se usa en texto ni en interfaz.
	 *   #DD3333  rojo de interfaz de la web v5.0. 4,57:1, pasa AA.
	 *   #B81516  rojo de las etiquetas de la tarjeta de visita. 6,65:1.
	 *            Es el de hover y el de cualquier texto pequeno en rojo.
	 */
	--rc-red: #DD3333;
	--rc-red-dark: #B81516;
	--rc-red-pure: #FF0000;
	--rc-red-tint: #FDECEC;

	/* Neutros. El gris viene del bloque oscuro de la tarjeta corporativa. */
	--rc-ink: #111111;
	--rc-body: #332F2E;
	--rc-muted: #6B7280;
	--rc-line: #E5E7EB;
	--rc-surface: #F7F7F8;
	--rc-white: #FFFFFF;

	/* Apoyo */
	--rc-green: #1D9A5B;
	--rc-amber: #F5A524;

	/* Tipografia */
	--rc-font-head: "Roboto Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--rc-font-body: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Medidas */
	--rc-container: 1056px;
	--rc-container-ancho: 1320px; /* listados y portada en pantallas grandes */
	--rc-medida: 880px;           /* medida maxima del texto corrido */
	--rc-gutter: 16px;
	--rc-sidebar: 320px;
	--rc-gap: 40px;
	--rc-radius: 6px;
	--rc-header-h: 56px;

	/*
	 * Proporcion de la caja de imagen en listados y destacada. Es la del
	 * tamano cochesrc-card (390x220) que registra inc/setup.php, no un 16/9
	 * redondo: la caja de CSS y el recorte del servidor tienen que ser el
	 * mismo, o la miniatura ya recortada se vuelve a recortar al pintarla.
	 * Si alli cambia el tamano, aqui cambia la proporcion.
	 */
	--rc-card-media: 390 / 220;

	/* Sombras */
	--rc-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 4px 12px rgba(17, 17, 17, .06);
	--rc-shadow-lg: 0 8px 30px rgba(17, 17, 17, .12);
}

/* ------------------------------------------------------------------ *\
   2. Reset
\* ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* --rc-header-real la fija nav.js midiendo la barra de verdad: cuando el
	   menu ocupa dos lineas la cabecera fija mide 112px y no 56px, y cuando
	   la cabecera no es fija (movil) vale 0. Sin JavaScript queda el alto
	   nominal de una linea, que es lo que habia hasta ahora. */
	scroll-padding-top: calc(var(--rc-header-real, var(--rc-header-h)) + 16px);
}

body {
	margin: 0;
	font-family: var(--rc-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rc-body);
	background: var(--rc-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, video, iframe, svg { max-width: 100%; height: auto; display: block; }
img { border: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ol, ul, dl { margin: 0; }
ol, ul { padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* Foco visible en todo lo que se navega con teclado. La v5.0 no lo tenia. */
:focus-visible {
	outline: 3px solid var(--rc-red);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------------ *\
   3. Tipografia
\* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rc-font-head);
	font-weight: 700;
	color: var(--rc-ink);
	line-height: 1.2;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 2.75rem); line-height: 1.15; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }

a {
	color: var(--rc-red);
	text-decoration: none;
	transition: color .15s ease;
}

a:hover { color: var(--rc-red-dark); text-decoration: underline; }

strong, b { font-weight: 700; }

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	background: var(--rc-surface);
	padding: .15em .4em;
	border-radius: 3px;
}

pre {
	background: var(--rc-ink);
	color: #F5F5F5;
	padding: 20px;
	border-radius: var(--rc-radius);
	overflow-x: auto;
}

pre code { background: none; padding: 0; color: inherit; }

blockquote {
	border-left: 4px solid var(--rc-red);
	padding: 4px 0 4px 20px;
	margin: 28px 0;
	color: var(--rc-ink);
	font-size: 1.125rem;
}

hr { border: 0; border-top: 1px solid var(--rc-line); margin: 40px 0; }

/* ------------------------------------------------------------------ *\
   4. Estructura
\* ------------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: var(--rc-container);
	margin-inline: auto;
	padding-inline: var(--rc-gutter);
}

.site-main { min-height: 50vh; }

.content-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rc-sidebar);
	gap: var(--rc-gap);
	align-items: start;
	padding-block: 40px 64px;
}

/* Sin lateral, el contenido de un articulo se queda estrecho a proposito:
   una linea de 90 caracteres se lee mal. Los listados, en cambio, pintan
   rejilla y aprovechan todo el ancho. */
.no-sidebar .content-wrap { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
/* Ojo: aqui hay que devolver el ancho del contenedor, no "none". Este
   selector es mas especifico que .container, asi que un "none" se cargaria
   tambien el tope de 1056px y la rejilla se estiraria a toda la pantalla. */
.no-sidebar.listado .content-wrap { max-width: var(--rc-container); }

@media (max-width: 900px) {
	.content-wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* Pantallas grandes (v1.0.8): la caja crece, la medida del texto no. Las
   pantallas de 1920 son el estandar de escritorio y el contenedor de 1056
   se quedaba corto. El tope de 94vw evita que en un portatil de 1366 el
   contenido bese los bordes. Por debajo de 1100px nada cambia. */
@media (min-width: 1100px) {

	/* Listados (archivos y busqueda) y portada: rejillas a todo lo ancho. */
	.no-sidebar.listado .content-wrap,
	.home .content-wrap { max-width: min(var(--rc-container-ancho), 94vw); }

	/* La entrada crece menos: el texto guarda su medida (abajo) y el ancho
	   extra se lo quedan la destacada, las tablas y los relacionados. */
	.single .content-wrap { max-width: min(1120px, 94vw); }

	.single .entry-content > p,
	.single .entry-content > h2,
	.single .entry-content > h3,
	.single .entry-content > h4,
	.single .entry-content > ul,
	.single .entry-content > ol,
	.single .entry-content > blockquote { max-width: var(--rc-medida); }

	/* La portada es una pagina con bloques de revista (clases crc-* en su
	   propio contenido): las rejillas usan todo el ancho y el texto corrido
	   guarda la medida. Los dos :not() dejan pasar los titulos de seccion
	   con filete rojo y la rejilla del bloque de lo ultimo. */
	.home .entry-content > p,
	.home .entry-content > h2:not(.crc-sec),
	.home .entry-content > h3,
	.home .entry-content > ul:not(.crc-ultimo),
	.home .entry-content > ol,
	.home .entry-content > figure.wp-block-table { max-width: var(--rc-medida); }
}

/* ------------------------------------------------------------------ *\
   5. Barra de aviso y marca
\* ------------------------------------------------------------------ */

.topbar {
	background: var(--rc-ink);
	color: var(--rc-white);
	font-size: .875rem;
	text-align: center;
	padding: 8px 0;
}

.topbar a { color: var(--rc-white); display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--rc-white); text-decoration: underline; }

.branding-bar {
	background: var(--rc-white);
	padding: 24px 0 20px;
	text-align: center;
}

.site-branding img,
.custom-logo {
	margin-inline: auto;
	width: auto;
	max-width: min(100%, 500px);
	max-height: 124px;
}

.site-title {
	font-family: var(--rc-font-head);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -.02em;
}

.site-title a { color: var(--rc-ink); }
.site-title a:hover { color: var(--rc-red); text-decoration: none; }

/* Solo aparece si se enciende en Personalizar. Cuando se enciende, se pinta
   como rotulo de marca y no como el texto gris por defecto de WordPress. */
.site-description {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--rc-font-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--rc-red-dark);
}

/* ------------------------------------------------------------------ *\
   6. Barra roja y menu de escritorio
\* ------------------------------------------------------------------ */

.site-header {
	background: var(--rc-red);
	color: var(--rc-white);
	position: relative;
	z-index: 40;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: var(--rc-header-h);
	position: relative;
}

/* Nombre del sitio dentro de la barra: solo aparece cuando la cabecera
   se queda fija y el logo grande ya ha salido de pantalla. */
.header-home {
	display: none;
	font-family: var(--rc-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--rc-white);
	margin-right: auto;
}

.header-home:hover { color: var(--rc-white); text-decoration: none; }

.primary-menu {
	list-style: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.primary-menu li { position: relative; }

.primary-menu a {
	display: block;
	padding: 0 14px;
	line-height: var(--rc-header-h);
	color: var(--rc-white);
	font-size: 1rem;
	white-space: nowrap;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	background: var(--rc-red-dark);
	color: var(--rc-white);
	text-decoration: none;
}

/* Submenus. El z-index es necesario: los li del menu estan posicionados,
   y si la barra ocupa dos lineas los items de la segunda van despues en el
   DOM y se pintarian encima del desplegable abierto de la primera. */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	min-width: 250px;
	background: var(--rc-white);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	box-shadow: var(--rc-shadow-lg);
	border-radius: 0 0 var(--rc-radius) var(--rc-radius);
	border-top: 3px solid var(--rc-red-dark);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	line-height: 1.4;
	padding: 10px 18px;
	color: var(--rc-body);
	white-space: normal;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu .current-menu-item > a {
	background: var(--rc-red-tint);
	color: var(--rc-red-dark);
}

.primary-menu .sub-menu .sub-menu { top: 0; left: 100%; border-radius: var(--rc-radius); border-top-width: 0; }

/* El ultimo item abre el submenu hacia la izquierda para no salirse. */
.primary-menu > li:last-child .sub-menu { left: auto; right: 0; }

/* Cabecera fija.

   Al quedarse fija NO se mete el nombre del sitio en la barra: el menu de
   escritorio mide 925px y el contenedor 1056px, asi que con el titulo (238px)
   no caben juntos a ningun ancho de pantalla y el menu se partia en dos
   lineas cada vez que se hacia scroll. La barra fija queda identica a la
   normal, solo con sombra, y asi nada se mueve al pasar de un estado a otro.
   En movil (<=900px) el titulo si se muestra, porque ahi no hay menu
   horizontal con el que pelear. */
.header-sticky .site-header { position: sticky; top: 0; }
.header-sticky.is-stuck .site-header { box-shadow: 0 2px 10px rgba(17, 17, 17, .18); }

/* Con sesion de administrador iniciada, la barra de WordPress ocupa 32px
   fijos por encima: la cabecera se pega justo debajo de ella. */
body.admin-bar.header-sticky .site-header { top: 32px; }

@media (max-width: 900px) {
	.header-sticky .site-header { position: relative; }
}

/* Acciones de la derecha */
.header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	position: absolute;
	right: var(--rc-gutter);
	top: 50%;
	transform: translateY(-50%);
}

.header-search-toggle,
.nav-toggle {
	color: var(--rc-white);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rc-radius);
}

.header-search-toggle:hover,
.nav-toggle:hover { background: var(--rc-red-dark); }

.nav-toggle { display: none; }

.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.nav-toggle-bars span + span { margin-top: 5px; }

.header-search {
	background: var(--rc-red-dark);
	padding: 14px 0;
}

.header-search[hidden] { display: none; }

@media (max-width: 900px) {
	.primary-menu-wrapper { display: none; }
	.nav-toggle { display: flex; }
	.header-inner { justify-content: flex-end; }
	.header-actions { position: static; transform: none; }
	.header-home { display: block; }
}

/* ------------------------------------------------------------------ *\
   7. Menu movil
\* ------------------------------------------------------------------ */

.menu-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(17, 17, 17, .5);
	display: flex;
	justify-content: flex-end;
}

.menu-modal[hidden] { display: none; }

.menu-modal-inner {
	background: var(--rc-white);
	width: min(360px, 88vw);
	height: 100%;
	overflow-y: auto;
	padding: 0 0 32px;
	box-shadow: var(--rc-shadow-lg);
	animation: rc-slide-in .2s ease;
}

@keyframes rc-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.menu-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	background: var(--rc-red);
	color: var(--rc-white);
	position: sticky;
	top: 0;
}

.menu-modal-title {
	font-family: var(--rc-font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.nav-close { color: var(--rc-white); display: flex; padding: 4px; }

.mobile-menu, .mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; }

.mobile-menu a {
	display: block;
	padding: 13px 20px;
	color: var(--rc-body);
	border-bottom: 1px solid var(--rc-line);
	font-size: 1rem;
}

.mobile-menu a:hover { background: var(--rc-red-tint); color: var(--rc-red-dark); text-decoration: none; }
.mobile-menu .sub-menu a { padding-left: 36px; font-size: .9375rem; color: var(--rc-muted); }
.mobile-menu .sub-menu .sub-menu a { padding-left: 52px; }

/* El boton de desplegar lo inyecta nav.js, para que el enlace del padre
   siga llevando a su propia pagina en vez de solo abrir el submenu. */
.mobile-menu .menu-item-has-children { position: relative; }

.submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 47px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rc-muted);
	border-left: 1px solid var(--rc-line);
}

.submenu-toggle:hover { color: var(--rc-red); }
.submenu-toggle svg { transition: transform .2s ease; }
.submenu-toggle.abierto svg { transform: rotate(180deg); }

.menu-modal-search { padding: 20px; }

body.menu-abierto { overflow: hidden; }

/* ------------------------------------------------------------------ *\
   8. Migas de pan
\* ------------------------------------------------------------------ */

.breadcrumbs {
	font-size: .875rem;
	color: var(--rc-muted);
	margin-bottom: 16px;
}

.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--rc-line); }
.breadcrumbs a { color: var(--rc-muted); }
.breadcrumbs a:hover { color: var(--rc-red); }
.breadcrumbs .sep { color: var(--rc-line); }

/* ------------------------------------------------------------------ *\
   9. Listados
\* ------------------------------------------------------------------ */

.page-header { margin-bottom: 32px; }
.page-title { margin-bottom: 10px; }
.page-title span { color: var(--rc-red); }
.archive-description { color: var(--rc-muted); font-size: 1.0625rem; }
.search-count { color: var(--rc-muted); font-size: .9375rem; }

/*
 * Rejilla de tarjetas.
 *
 * auto-fill con un minimo de 260px reparte las columnas segun el ancho real
 * disponible: 3 en un listado sin lateral, 2 cuando hay lateral o en tableta,
 * 1 en movil. No hace falta declarar el numero de columnas en ningun sitio.
 */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px 24px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.entry-thumbnail {
	display: block;
	overflow: hidden;
	border-radius: var(--rc-radius);
	background: var(--rc-surface);
}

/*
 * La caja manda sobre la imagen, nunca al reves.
 *
 * Las entradas antiguas pueden no tener generado el recorte cochesrc-card;
 * ahi WordPress sirve la imagen completa reducida para CABER en 390x220 y
 * sale a 228x220, a 351x220 o a lo que toque. Con la proporcion fija y
 * object-fit el hueco mide siempre igual y se recorta lo que sobre, que es
 * preferible a una fila dentada. display:block quita ademas la franja de
 * fondo que deja el hueco de linea base debajo de una imagen en linea.
 */
.card .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rc-card-media);
	object-fit: cover;
	transition: transform .3s ease;
}

.card:hover .entry-thumbnail img { transform: scale(1.04); }

/* Hueco para las entradas sin imagen destacada. La inclinacion es la misma
   que la del logotipo, para que se lea como un elemento de marca y no como
   una imagen que falta. */
.card-placeholder {
	display: block;
	aspect-ratio: var(--rc-card-media);
	border-radius: var(--rc-radius);
	background: repeating-linear-gradient(
		-63deg,
		var(--rc-surface) 0 12px,
		#EDEDEF 12px 24px
	);
}

.card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.card-kicker {
	align-self: flex-start;
	font-family: var(--rc-font-head);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--rc-red-dark);
	margin-bottom: 6px;
}

.card-title {
	font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem);
	line-height: 1.25;
	margin-bottom: 8px;
	text-wrap: balance;
}

.card-title a { color: var(--rc-ink); }
.card-title a:hover { color: var(--rc-red); text-decoration: none; }

/* Recortar por lineas y no por palabras mantiene las filas parejas
   independientemente de lo largo que sea cada extracto. */
.card-excerpt {
	color: var(--rc-muted);
	font-size: .9375rem;
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Los datos se pegan abajo para que queden alineados entre tarjetas. */
.card .entry-meta {
	margin-top: auto;
	gap: 12px;
	font-size: .75rem;
}

/* Datos de la entrada */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: .8125rem;
	color: var(--rc-muted);
}

.entry-meta span { display: inline-flex; align-items: center; gap: 5px; }
.entry-meta .icon { color: var(--rc-muted); flex-shrink: 0; }

/* ------------------------------------------------------------------ *\
   10. Entrada y pagina
\* ------------------------------------------------------------------ */

.entry-header { margin-bottom: 24px; }
.entry-title { margin-bottom: 14px; }

.entry-single .entry-thumbnail {
	margin-bottom: 32px;
}

/* La destacada llega a resolucion completa (ver single.php) y aqui se
   recorta a la proporcion de las tarjetas: misma foto, mismo encuadre en el
   listado y en la entrada, y nitida en el contenedor ancho. Va a la misma
   variable que las tarjetas para que las dos no puedan separarse. */
.entry-single .entry-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--rc-card-media);
	object-fit: cover;
}

/* Pie de la imagen destacada. Solo aparece si la imagen tiene pie en Medios.
   Se usa sobre todo para el credito cuando la portada no sale del archivo
   propio (fichas de producto de fabricante). Se quita el fondo y el recorte
   del contenedor y el radio pasa a la imagen, para que el texto no quede
   sobre la banda gris del hueco de carga. */
.entry-single .entry-thumbnail {
	background: none;
	overflow: visible;
}

.entry-single .entry-thumbnail img { border-radius: var(--rc-radius); }

.entry-single .entry-thumbnail figcaption {
	font-size: .875rem;
	color: var(--rc-muted);
	text-align: center;
	margin-top: 8px;
}

.entry-content { font-size: 1.0625rem; line-height: 1.7; }

.entry-content > * + * { margin-top: 1.25em; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content h4 { margin-top: 1.4em; }

.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content img { border-radius: var(--rc-radius); }

.entry-content figure { margin-block: 1.6em; }
.entry-content figcaption {
	font-size: .875rem;
	color: var(--rc-muted);
	text-align: center;
	margin-top: 8px;
}

/* Articulos relacionados al pie de la entrada (v1.0.8). Reutilizan la
   tarjeta estandar de los listados; aqui solo va el marco de la seccion.
   El filete rojo es el mismo lenguaje que los titulos de la portada. */
.related-posts { margin-top: 56px; }

.related-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.375rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 24px;
}

.related-title::after {
	content: "";
	flex: 1;
	height: 3px;
	background: var(--rc-red-dark);
}

.entry-content table {
	font-size: .9375rem;
	margin-block: 1.6em;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.entry-content th, .entry-content td {
	padding: 10px 14px;
	border: 1px solid var(--rc-line);
	text-align: left;
}

.entry-content th {
	background: var(--rc-surface);
	font-family: var(--rc-font-head);
	font-weight: 700;
	color: var(--rc-ink);
}

.entry-content tbody tr:nth-child(even) { background: #FBFBFC; }

.alignwide { width: 100%; }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }

.entry-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--rc-line);
	font-size: .9375rem;
}

.entry-footer p { margin-bottom: 6px; }
.entry-footer span {
	font-family: var(--rc-font-head);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .8125rem;
	letter-spacing: .05em;
	color: var(--rc-muted);
	margin-right: 6px;
}

/* Navegacion entre entradas */
.post-navigation { margin-top: 40px; }

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.post-navigation a {
	display: block;
	padding: 16px 20px;
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.post-navigation a:hover { border-color: var(--rc-red); box-shadow: var(--rc-shadow); text-decoration: none; }
.post-navigation .nav-next { text-align: right; }

.nav-label {
	display: block;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rc-muted);
	margin-bottom: 4px;
}

.nav-title {
	font-family: var(--rc-font-head);
	font-weight: 700;
	color: var(--rc-ink);
	line-height: 1.3;
}

/* ------------------------------------------------------------------ *\
   11. Paginacion
\* ------------------------------------------------------------------ */

.pagination { margin-top: 40px; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	color: var(--rc-body);
	font-weight: 500;
}

.pagination .page-numbers:hover { border-color: var(--rc-red); color: var(--rc-red); text-decoration: none; }

.pagination .page-numbers.current {
	background: var(--rc-red);
	border-color: var(--rc-red);
	color: var(--rc-white);
}

.pagination .dots { border-color: transparent; }

/* ------------------------------------------------------------------ *\
   12. Lateral y widgets
\* ------------------------------------------------------------------ */

.sidebar-inner { position: sticky; top: calc(var(--rc-header-real, var(--rc-header-h)) + 24px); }

@media (max-width: 900px) {
	.sidebar-inner { position: static; }
}

.widget + .widget { margin-top: 32px; }

.widget-title {
	font-size: .9375rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rc-ink);
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 3px solid var(--rc-red);
}

.widget ul { list-style: none; margin: 0; padding: 0; }

.widget li + li { margin-top: 2px; }

.widget li a {
	display: block;
	padding: 7px 0;
	color: var(--rc-body);
	font-size: .9375rem;
	border-bottom: 1px solid var(--rc-line);
}

.widget li a:hover { color: var(--rc-red); text-decoration: none; padding-left: 4px; }

.widget .sub-menu { padding-left: 14px; }

/* ------------------------------------------------------------------ *\
   13. Formularios y botones
\* ------------------------------------------------------------------ */

input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	background: var(--rc-white);
	font-size: 1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, textarea:focus, select:focus {
	border-color: var(--rc-red);
	box-shadow: 0 0 0 3px var(--rc-red-tint);
	outline: none;
}

textarea { min-height: 140px; resize: vertical; }

.btn,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--rc-red);
	color: var(--rc-white);
	font-family: var(--rc-font-head);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	border: 0;
	border-radius: var(--rc-radius);
	transition: background .15s ease;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--rc-red-dark);
	color: var(--rc-white);
	text-decoration: none;
}

/* Buscador */
.search-form { display: flex; gap: 8px; }
.search-form .search-field { flex: 1; }

.search-form .search-submit {
	flex-shrink: 0;
	width: 48px;
	padding: 0;
	background: var(--rc-red);
	color: var(--rc-white);
	border-radius: var(--rc-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-search .search-form { max-width: 620px; margin-inline: auto; }
.header-search .search-field { border-color: transparent; }
.header-search .search-submit { background: var(--rc-ink); }

/* ------------------------------------------------------------------ *\
   14. Comentarios
\* ------------------------------------------------------------------ */

.comments-area {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--rc-line);
}

.comments-title { margin-bottom: 28px; }

.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 28px; border-left: 2px solid var(--rc-line); margin-top: 20px; }

.comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--rc-line);
}

.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }

.comment-metadata { font-size: .8125rem; color: var(--rc-muted); margin: 4px 0 10px; }
.comment-metadata a { color: var(--rc-muted); }

.comment-content { font-size: .9375rem; }
.comment-content > * + * { margin-top: .8em; }

.reply { margin-top: 10px; }

.reply a {
	font-size: .8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.comment-respond { margin-top: 40px; }
.comment-reply-title { margin-bottom: 8px; }
.comment-notes, .comment-form-cookies-consent label { font-size: .875rem; color: var(--rc-muted); }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.comment-form-cookies-consent input { width: auto; }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }

/* ------------------------------------------------------------------ *\
   15. Sin resultados y 404
\* ------------------------------------------------------------------ */

.no-results, .error-404 { padding: 40px 0; max-width: 640px; }
.no-results h2, .error-404 .page-title { margin-bottom: 12px; }
.no-results p, .error-text { color: var(--rc-muted); margin-bottom: 20px; }

.error-code {
	font-family: var(--rc-font-head);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--rc-red);
	margin-bottom: 8px;
}

.error-suggestions { margin-top: 40px; }
.error-suggestions h2 { font-size: 1.25rem; margin-bottom: 14px; }
.error-links { list-style: none; margin: 0; padding: 0; }
.error-links li + li { margin-top: 2px; }
.error-links a { display: block; padding: 9px 0; border-bottom: 1px solid var(--rc-line); color: var(--rc-body); }
.error-links a:hover { color: var(--rc-red); }

/* ------------------------------------------------------------------ *\
   16. Pie
\* ------------------------------------------------------------------ */

.site-footer { margin-top: 40px; }

.footer-widgets {
	background: var(--rc-surface);
	border-top: 1px solid var(--rc-line);
	padding: 48px 0 40px;
}

.footer-grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-col .widget-title { border-bottom-color: var(--rc-red); }
.footer-col .widget li a { border-bottom-color: #DEDEE2; }

.footer-disclosure {
	background: var(--rc-surface);
	padding: 0 0 32px;
}

.footer-disclosure p {
	font-size: .8125rem;
	color: var(--rc-muted);
	line-height: 1.6;
	max-width: 900px;
	padding-top: 24px;
	border-top: 1px solid var(--rc-line);
}

.footer-bottom {
	background: var(--rc-ink);
	color: rgba(255, 255, 255, .75);
	padding: 18px 0;
	font-size: .875rem;
}

.footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.footer-legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-bottom a { color: rgba(255, 255, 255, .75); }
.footer-bottom a:hover { color: var(--rc-white); }

/* ------------------------------------------------------------------ *\
   17. Utilidades y accesibilidad
\* ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--rc-white);
	color: var(--rc-red);
	font-weight: 700;
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-shadow-lg);
}

.icon { display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------ *\
   18. Indice de contenidos y ficha de veredicto

   Las dos piezas salen de la auditoria del 30/08/2026: el indice porque no
   habia ninguno en articulos de 3.500 palabras, y la ficha porque Google
   exige que la nota de un analisis se vea en pantalla para poder marcarla.
\* ------------------------------------------------------------------ */

.indice-contenidos {
	margin: 32px 0;
	padding: 20px 24px 22px;
	background: var(--rc-surface);
	border-left: 4px solid var(--rc-red);
	border-radius: var(--rc-radius);
}

.indice-contenidos .indice-titulo {
	margin: 0 0 10px;
	font-family: var(--rc-font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rc-muted);
}

.indice-contenidos ol {
	margin: 0;
	padding-left: 22px;
	display: grid;
	gap: 6px;
}

.indice-contenidos li { line-height: 1.45; }

.indice-contenidos a {
	color: var(--rc-body);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.indice-contenidos a:hover,
.indice-contenidos a:focus {
	color: var(--rc-red);
	border-bottom-color: currentColor;
}

/* Las anclas del indice no llevan scroll-margin propio: el scroll-padding
   global del html ya aparta la cabecera fija, y los dos se sumarian. */

.ficha-veredicto {
	margin: 40px 0 8px;
	padding: 24px 26px;
	background: var(--rc-red-tint);
	border: 1px solid var(--rc-red);
	border-radius: var(--rc-radius);
}

.ficha-veredicto .veredicto-et {
	margin: 0 0 6px;
	font-family: var(--rc-font-head);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rc-red-dark);
}

.ficha-veredicto .veredicto-nota {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--rc-font-head);
	line-height: 1;
}

.ficha-veredicto .nota-num {
	font-size: 3rem;
	font-weight: 700;
	color: var(--rc-red-dark);
	font-variant-numeric: tabular-nums;
}

.ficha-veredicto .nota-de {
	font-size: 1rem;
	font-weight: 400;
	color: var(--rc-muted);
}

.ficha-veredicto .veredicto-modelo {
	margin: 4px 0 0;
	font-family: var(--rc-font-head);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--rc-ink);
}

.ficha-veredicto .veredicto-texto {
	margin: 10px 0 0;
	color: var(--rc-body);
}

/* La introduccion de las paginas de archivo, que antes iban sin texto. */
.archive-description {
	max-width: 68ch;
	margin-top: 10px;
	color: var(--rc-body);
}

.archive-description p { margin: 0 0 12px; }
.archive-description p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *\
   19. Impresion
\* ------------------------------------------------------------------ */

@media print {
	.topbar, .site-header, .menu-modal, .sidebar,
	.site-footer, .post-navigation, .comments-area,
	.breadcrumbs, .header-search, .indice-contenidos { display: none !important; }

	body { font-size: 11pt; color: #000; }
	.content-wrap { display: block; padding: 0; }
	a { color: #000; text-decoration: underline; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}