/* ==========================================================================
   Raúl Serrano — main.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
	/* Paleta */
	--color-primary:       #12343B;
	--color-primary-hover: #0B252B;
	--color-secondary:     #2D5F6A;
	--color-text:          #1F2933;
	--color-text-muted:    #5B6470;
	--color-bg:            #FAF8F5;
	--color-bg-alt:        #F1EDE7;
	--color-card:          #FFFFFF;
	--color-border:        #D8D2CA;
	--color-accent:        #B66A3C;
	--color-accent-light:  #F3D6C3;
	--color-archived-bg:   #FFF4E8;
	--color-archived-text: #7A4A20;
	--color-white:         #FFFFFF;

	/* Tipografía */
	--font-sans: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--font-size-sm:   15px;
	--font-size-base: 18px;
	--font-size-lead: 21px;
	--font-size-h3:   24px;
	--font-size-h2:   33px;
	--font-size-h1:   44px;
	--font-size-xl:   52px;

	--line-height-body:    1.7;
	--line-height-heading: 1.1;

	/* Layout */
	--width-container: 1140px;
	--width-content:   740px;
	--gutter:          24px;

	/* Secciones */
	--section-gap:        96px;
	--section-gap-mobile: 64px;

	/* Espaciado de utilidad */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 40px;
	--sp-8: 56px;
	--sp-9: 64px;

	/* Bordes */
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Transiciones */
	--transition: 0.15s ease;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

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

/* --------------------------------------------------------------------------
   3. Accesibilidad
   -------------------------------------------------------------------------- */
.skip-to-content {
	position: absolute;
	left: -9999px;
	top: var(--sp-4);
	z-index: 9999;
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.skip-to-content:focus {
	left: var(--sp-4);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* El skip link enfoca #main; quitamos el outline visible del contenedor */
#main:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   4. Contenedores
   -------------------------------------------------------------------------- */
.container {
	max-width: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.content-width {
	max-width: var(--width-content);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--color-text);
	margin-top: 0;
	margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-h1); line-height: 1.05; }
h2 { font-size: var(--font-size-h2); line-height: 1.2;  }
h3 { font-size: var(--font-size-h3); line-height: 1.25; }
h4 { font-size: 20px;                line-height: 1.3;  }
h5 { font-size: var(--font-size-base); line-height: 1.4; }
h6 { font-size: var(--font-size-sm);   line-height: 1.4; }

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

.lead {
	font-size: var(--font-size-lead);
	line-height: 1.55;
	color: var(--color-text-muted);
}

.text-muted {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

strong, b {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Enlaces y foco
   -------------------------------------------------------------------------- */
a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   7. Listas
   -------------------------------------------------------------------------- */
ul, ol {
	padding-left: 1.5em;
	margin-top: 0;
	margin-bottom: 1.25em;
}

li {
	margin-bottom: 0.4em;
}

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

/* --------------------------------------------------------------------------
   8. Código
   -------------------------------------------------------------------------- */
code,
kbd,
samp {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background-color: var(--color-bg-alt);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

pre {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background-color: var(--color-text);
	color: var(--color-bg);
	padding: var(--sp-6);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: var(--sp-7) 0;
	line-height: 1.6;
}

pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   9. Tablas
   -------------------------------------------------------------------------- */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	margin-bottom: var(--sp-7);
}

th, td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

th {
	font-weight: 600;
	background-color: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   10. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

/* Ajuste cuando el admin bar está visible */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	gap: var(--sp-5);
}

.site-header__name {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: -0.015em;
	white-space: nowrap;
}

.site-header__name:hover {
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   11. Navegación principal — desktop
   -------------------------------------------------------------------------- */
.site-navigation {
	display: flex;
	align-items: center;
}

#primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

#primary-menu a {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	padding: var(--sp-2) 0;
	position: relative;
}

#primary-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-primary);
	transition: width var(--transition);
}

#primary-menu a:hover::after,
#primary-menu .current-menu-item > a::after,
#primary-menu .current-page-ancestor > a::after {
	width: 100%;
}

#primary-menu a:hover {
	color: var(--color-primary);
}

#primary-menu .current-menu-item > a,
#primary-menu .current-page-ancestor > a {
	color: var(--color-primary);
}

/* Submenús — ocultos en primera versión */
#primary-menu .sub-menu {
	display: none;
}

/* --------------------------------------------------------------------------
   12. Menú móvil
   -------------------------------------------------------------------------- */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--sp-2);
	width: 36px;
	height: 36px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-text);
	border-radius: 2px;
	transition: opacity var(--transition), transform var(--transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--color-primary);
	color: var(--color-bg);
}

.site-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sp-8);
	padding-top: var(--sp-9);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-5);
	flex-wrap: wrap;
}

.site-footer__name {
	font-weight: 600;
	font-size: var(--font-size-base);
	color: var(--color-white);
	margin: 0;
}

.site-footer__claim {
	font-size: var(--font-size-sm);
	color: rgba(250, 248, 245, 0.65);
	margin: var(--sp-2) 0 0;
	max-width: 340px;
	line-height: 1.5;
}

.site-footer__nav-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	align-items: flex-end;
}

.site-footer__nav ul,
.site-footer__social ul,
.site-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
}

.site-footer__nav a,
.site-footer__social a {
	color: rgba(250, 248, 245, 0.75);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: 500;
	transition: color var(--transition);
}

.site-footer__nav a:hover,
.site-footer__social a:hover {
	color: var(--color-white);
}

.site-footer__legal a {
	color: rgba(250, 248, 245, 0.65);
	text-decoration: none;
	font-size: var(--font-size-sm);
	transition: color var(--transition);
}

.site-footer__legal a:hover {
	color: rgba(250, 248, 245, 0.9);
}

.site-footer__copyright {
	font-size: var(--font-size-sm);
	color: rgba(250, 248, 245, 0.60);
	margin: 0;
}

/* --------------------------------------------------------------------------
   14. Contenido principal
   -------------------------------------------------------------------------- */
.site-main {
	min-height: 50vh;
	padding-block: var(--section-gap);
}

.site-main--home,
.rs-front-page {
	padding-block: 0;
}

/* --------------------------------------------------------------------------
   15. Botones
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 11px 22px;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
	border: 2px solid transparent;
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-white);
	text-decoration: none;
}

.btn-secondary {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
}

.btn-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-primary);
	font-size: var(--font-size-base);
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	transition: color var(--transition), gap var(--transition);
}

.btn-link::after {
	content: '→';
	display: inline-block;
	transition: transform var(--transition);
}

.btn-link:hover {
	color: var(--color-primary-hover);
}

.btn-link:hover::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   16. Tarjetas
   -------------------------------------------------------------------------- */
.card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-6);
}

/* Card de post */
.card-post {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-6);
	display: flex;
	flex-direction: column;
	transition: border-color var(--transition);
}

.card-post:hover {
	border-color: var(--color-secondary);
}

.card-post__meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.card-post__meta a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.card-post__meta a:hover {
	color: var(--color-primary);
}

.card-post__title {
	font-size: var(--font-size-h3);
	line-height: 1.25;
	margin-bottom: var(--sp-3);
}

.card-post__title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}

.card-post__title a:hover {
	color: var(--color-primary);
}

.card-post__excerpt {
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
	line-height: 1.6;
	margin-bottom: var(--sp-4);
}

.card-post__link {
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	transition: color var(--transition);
}

.card-post__link::after {
	content: '→';
	transition: transform var(--transition);
}

.card-post__link:hover {
	color: var(--color-primary-hover);
}

.card-post__link:hover::after {
	transform: translateX(3px);
}

.card-post__footer {
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}

.card-post__dateline {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* Card destacada — artículo principal en la página Artículos */
.card-featured {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--sp-8) var(--sp-7);
	margin-bottom: var(--sp-8);
}

.card-featured__label {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-4);
}

.card-featured__title {
	font-size: var(--font-size-h2);
	line-height: 1.15;
	margin-bottom: var(--sp-4);
}

.card-featured__title a {
	color: var(--color-text);
	text-decoration: none;
}

.card-featured__title a:hover {
	color: var(--color-primary);
}

.card-featured__excerpt {
	font-size: var(--font-size-lead);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-6);
}

.card-featured__meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   17. Bloques destacados / callouts editoriales
   -------------------------------------------------------------------------- */
.block-highlight {
	background-color: var(--color-bg-alt);
	border-left: 3px solid var(--color-primary);
	padding: var(--sp-5) var(--sp-6);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: var(--sp-7) 0;
}

.block-highlight p:last-child {
	margin-bottom: 0;
}

.block-highlight--accent {
	border-left-color: var(--color-accent);
}

.block-highlight--info {
	background-color: rgba(45, 95, 106, 0.06);
	border-left-color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   18. Grid de posts
   -------------------------------------------------------------------------- */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6);
}

/* --------------------------------------------------------------------------
   19. Cabeceras de archivo
   -------------------------------------------------------------------------- */
.archive-header {
	margin-bottom: var(--sp-9);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid var(--color-border);
}

.archive-title {
	margin-bottom: var(--sp-3);
}

.archive-description {
	font-size: var(--font-size-lead);
	color: var(--color-text-muted);
	line-height: 1.55;
	max-width: var(--width-content);
}

.archive-description p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   20. Cabecera y contenido de entrada
   -------------------------------------------------------------------------- */
.entry-header {
	margin-bottom: var(--sp-7);
}

.entry-title {
	margin-bottom: var(--sp-3);
}

.entry-meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	margin-bottom: var(--sp-4);
}

.entry-meta a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--color-primary);
}

.entry-meta__sep {
	color: var(--color-border);
}

.entry-content {
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   21. Paginación
   -------------------------------------------------------------------------- */
.navigation {
	margin-top: var(--sp-9);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--color-border);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.page-numbers:hover {
	background-color: var(--color-bg-alt);
	border-color: var(--color-secondary);
	color: var(--color-primary);
}

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

.page-numbers.dots {
	border: none;
	background: none;
	cursor: default;
}

/* --------------------------------------------------------------------------
   22. Bloques Gutenberg — frontend y editor
   -------------------------------------------------------------------------- */

/* Hereda fuente del tema */
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.wp-block-pullquote {
	font-family: var(--font-sans);
}

/* Code y preformatted */
.wp-block-code,
.wp-block-preformatted {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background-color: var(--color-text);
	color: var(--color-bg);
	padding: var(--sp-6);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

.wp-block-code code {
	font-family: inherit;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Quote */
.wp-block-quote {
	border-left: 3px solid var(--color-primary);
	padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
	margin: var(--sp-7) 0;
}

.wp-block-quote p {
	font-size: var(--font-size-lead);
	line-height: 1.55;
	font-style: italic;
	color: var(--color-text);
	margin-bottom: 0;
}

.wp-block-quote cite,
.wp-block-quote footer {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	font-style: normal;
	margin-top: var(--sp-3);
	display: block;
}

/* Pullquote */
.wp-block-pullquote {
	border-top: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	padding: var(--sp-7) 0;
	margin: var(--sp-8) 0;
	text-align: left;
}

.wp-block-pullquote blockquote p {
	font-size: var(--font-size-h3);
	line-height: 1.35;
	font-style: italic;
	color: var(--color-primary);
	margin-bottom: 0;
}

/* Separador */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--sp-8) 0;
}

.wp-block-separator.is-style-wide {
	border-top-width: 2px;
}

/* Botones Gutenberg */
.wp-block-buttons {
	margin: var(--sp-6) 0;
}

.wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	padding: 11px 22px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--font-size-base);
	text-decoration: none;
	border: 2px solid var(--color-primary);
	transition: background-color var(--transition), border-color var(--transition);
}

.wp-block-button__link:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* Imagen */
.wp-block-image {
	margin: var(--sp-7) 0;
}

.wp-block-image img {
	border-radius: var(--radius-md);
}

.wp-block-image figcaption {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-top: var(--sp-3);
	font-style: italic;
}

/* Tabla */
.wp-block-table {
	margin: var(--sp-7) 0;
	font-size: var(--font-size-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.wp-block-table thead th {
	background-color: var(--color-bg-alt);
	font-weight: 600;
}

/* Cover y Group con fondo oscuro */
.wp-block-cover,
.wp-block-group.has-primary-background-color {
	color: var(--color-white);
}

/* Columnas */
.wp-block-columns {
	margin: var(--sp-7) 0;
}


/* --------------------------------------------------------------------------
   23. Aviso de contenido archivado
   -------------------------------------------------------------------------- */
.archived-notice {
	background-color: var(--color-archived-bg);
	color: var(--color-archived-text);
	border: 1px solid #e8caa0;
	border-radius: var(--radius-md);
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-7);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.archived-notice p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   24. Mensaje vacío
   -------------------------------------------------------------------------- */
.no-posts-message {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--sp-8) var(--sp-7);
	font-size: var(--font-size-lead);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: var(--width-content);
}

/* --------------------------------------------------------------------------
   25. Utilidades
   -------------------------------------------------------------------------- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.section-gap {
	padding-block: var(--section-gap);
}

.section-gap-sm {
	padding-block: var(--sp-8);
}

/* --------------------------------------------------------------------------
   26. Responsive — tablet (max 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--width-container: 100%;
	}

	.site-footer__top {
		gap: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   26b. Responsive — tablet media (max 860px) — colapsar grid editorial inicio
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.home-articles__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   27. Responsive — móvil (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--font-size-h1:       36px;
		--font-size-h2:       28px;
		--font-size-h3:       22px;
		--font-size-lead:     19px;
		--section-gap:        var(--section-gap-mobile);
	}

	/* Menú toggle visible */
	.menu-toggle {
		display: flex;
	}

	#primary-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		padding: var(--sp-5) var(--gutter);
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		z-index: 100;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	#primary-menu.is-open {
		display: flex;
	}

	#primary-menu li {
		width: 100%;
	}

	#primary-menu a {
		display: block;
		padding: var(--sp-3) 0;
		font-size: var(--font-size-base);
		border-bottom: 1px solid var(--color-border);
	}

	#primary-menu a::after {
		display: none;
	}

	#primary-menu li:last-child a {
		border-bottom: none;
	}

	/* Footer móvil */
	.site-footer__top {
		flex-direction: column;
		gap: var(--sp-6);
		padding-top: var(--sp-7);
	}

	.site-footer__nav-group {
		align-items: flex-start;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-3);
	}

	/* Grid posts: 1 columna */
	.posts-grid {
		grid-template-columns: 1fr;
	}

	/* Card destacada */
	.card-featured {
		padding: var(--sp-6) var(--sp-5);
	}

	/* Destacado inicio: reducir padding y espaciado en móvil */
	.card-post--featured {
		padding: var(--sp-6);
	}

	.card-post--featured .card-post__footer {
		margin-top: var(--sp-4);
	}

	/* alignwide y alignfull en móvil: anular negativos */
	.rs-page-editorial .entry-content .alignwide,
	.rs-page-editorial .entry-content .alignfull {
		max-width: 100%;
		width: 100%;
		margin-inline: 0;
	}

	/* CTA editorial en móvil: anular breakout y reducir separación */
	.rs-page-editorial .rs-cta-editorial {
		width: 100%;
		margin-top: var(--sp-8);
		margin-left: 0;
		margin-right: 0;
	}

	/* Formulario de búsqueda: apilar campo y botón */
	.search-form {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   28. Entradas — imagen destacada, footer, etiquetas
   -------------------------------------------------------------------------- */
.entry-thumbnail {
	margin-bottom: var(--sp-7);
}

.entry-thumbnail__img {
	width: 100%;
	border-radius: var(--radius-md);
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.entry-thumbnail__caption {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: var(--sp-3);
	text-align: center;
}

.entry-footer {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--color-border);
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--font-size-sm);
}

.post-tags__label {
	color: var(--color-text-muted);
	font-weight: 500;
}

.post-tags__item {
	display: inline-block;
	padding: 3px 10px;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 13px;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.post-tags__item:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* --------------------------------------------------------------------------
   29. Archivo — badge encima del título
   -------------------------------------------------------------------------- */
.archive-header__badge {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--sp-3);
}

/* --------------------------------------------------------------------------
   30. Búsqueda — query destacada y formulario en 404
   -------------------------------------------------------------------------- */
.search-query {
	color: var(--color-primary);
	font-style: normal;
}

.not-found-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: var(--sp-7) 0;
}

.not-found-search {
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--color-border);
}

.not-found-search p {
	margin-bottom: var(--sp-4);
	color: var(--color-text-muted);
}

/* Formulario de búsqueda de WordPress */
.search-form {
	display: flex;
	gap: var(--sp-3);
}

.search-form label {
	flex: 1;
}

.search-form .search-field {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background-color: var(--color-white);
	transition: border-color var(--transition);
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(18, 52, 59, 0.1);
}

.search-form .search-submit {
	padding: 10px 20px;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
	white-space: nowrap;
}

.search-form .search-submit:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   31. Comentarios (solo si están abiertos)
   -------------------------------------------------------------------------- */
.comments-area {
	margin-top: var(--sp-9);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	font-size: var(--font-size-h3);
	margin-bottom: var(--sp-6);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-7);
}

.comment-body {
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--color-border);
}

.comment-author {
	font-weight: 600;
	margin-bottom: var(--sp-2);
}

.comment-meta {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3);
}

.comment-content p {
	font-size: var(--font-size-base);
}

/* --------------------------------------------------------------------------
   32. Artículos relacionados
   -------------------------------------------------------------------------- */
.related-posts {
	margin-top: var(--sp-9);
	padding-top: var(--sp-8);
	border-top: 1px solid var(--color-border);
}

.related-posts__title {
	font-size: var(--font-size-h3);
	margin-bottom: var(--sp-7);
}

.related-posts .posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
	.related-posts .posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.related-posts .posts-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   33. Bloque de artículos en Inicio
   -------------------------------------------------------------------------- */
.home-articles {
	padding-block: var(--section-gap);
	background-color: var(--color-bg-alt);
}

.home-articles__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-bottom: var(--sp-7);
}

.home-articles__title {
	font-size: var(--font-size-h2);
	margin: 0;
}

/* Layout editorial: destacado a la izquierda, secundarios apilados a la derecha */
.home-articles__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--sp-6);
	align-items: start;
}

.home-articles__secondary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.home-articles__secondary .card-post {
	padding: var(--sp-5);
}

/* Variante destacada: mayor protagonismo visual */
.card-post--featured {
	padding: var(--sp-7);
}

.card-post--featured .card-post__title {
	font-size: var(--font-size-h2);
	line-height: 1.2;
	margin-bottom: var(--sp-4);
}

.card-post--featured .card-post__excerpt {
	font-size: var(--font-size-lead);
	margin-bottom: var(--sp-5);
}

.card-post--featured .card-post__footer {
	margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   34. Cabecera de categoría archivado
   -------------------------------------------------------------------------- */
.archive-header--archivado {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: var(--sp-5);
}

.archive-header--archivado + .archived-notice {
	margin-bottom: var(--sp-8);
}

/* --------------------------------------------------------------------------
   35. Patrones Gutenberg
   -------------------------------------------------------------------------- */

/* --- Eyebrow editorial: componente común para secciones de Inicio --- */
.section-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-primary);
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	line-height: 1;
}

.section-eyebrow::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 32px;
	height: 2px;
	background-color: var(--color-accent);
	margin-right: 10px;
}


/* --- Hero editorial: 2 columnas en desktop --- */
.pattern-hero {
	padding: 72px 0 48px;
}


.hero-columns.wp-block-columns {
	gap: var(--sp-7) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (min-width: 783px) {
	.hero-columns.wp-block-columns {
		align-items: flex-start;
	}

	.hero-col-aside.wp-block-column {
		padding-top: 56px;
	}
}

.hero-heading.wp-block-heading {
	font-size: clamp(28px, 3.2vw, 40px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin-bottom: var(--sp-5) !important;
}

/* Párrafo 1: subtitular del hero, peso ligeramente mayor */
.hero-lead {
	font-size: 20px !important;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3) !important;
}

/* Párrafo 2: copy secundario del hero, visiblemente menor pero aún en registro hero */
.hero-lead--secondary {
	font-size: 17px !important;
	line-height: 1.65;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-5) !important;
}

.hero-buttons.wp-block-buttons {
	margin-top: var(--sp-5) !important;
	margin-bottom: 0 !important;
}

.hero-buttons .wp-block-button__link {
	font-size: 15px;
	padding: 10px 20px;
}

/* Tarjeta lateral: blanca, con sombra suave, nota editorial */
.hero-focus-card.wp-block-group {
	background-color: var(--color-card);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: var(--sp-7) var(--sp-6) !important;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.04);
}

.hero-focus-label {
	font-size: 11px !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-4) !important;
	position: relative;
}

.hero-focus-label::after {
	content: '';
	display: block;
	width: 28px;
	height: 1px;
	background-color: var(--color-border);
	margin-top: var(--sp-3);
}

.hero-focus-text {
	font-size: var(--font-size-sm) !important;
	color: var(--color-text-muted);
	line-height: 1.7;
	margin-bottom: var(--sp-3) !important;
}

.hero-focus-text:last-child {
	margin-bottom: 0 !important;
}

/* --- Áreas de especialización: grid 4→2→1 --- */
.pattern-areas {
	padding: 56px 0;
}

.pattern-areas .wp-block-heading {
	margin-bottom: var(--sp-7);
}

/* Igualar eyebrow y H2 con el eje izquierdo del grid (mismo max-width que alignwide) */
.pattern-areas .section-eyebrow,
.pattern-areas .wp-block-heading {
	max-width: var(--width-container) !important;
}

.areas-columns.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--sp-5) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.areas-columns .wp-block-column {
	flex: unset !important;
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.pattern-card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: var(--sp-6);
	height: 100%;
}

.pattern-card__num {
	font-size: 22px !important;
	font-weight: 700;
	color: var(--color-accent);
	opacity: 0.3;
	letter-spacing: -0.03em;
	margin: 0 0 var(--sp-3) !important;
	line-height: 1;
}

.pattern-card .wp-block-heading {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: var(--sp-3);
	color: var(--color-text);
}

.pattern-card p {
	font-size: 16px;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: 0;
}

/* --- Escenarios de valor: fondo alternativo cálido, 6 items 2 columnas --- */
.pattern-scenarios {
	background-color: var(--color-bg-alt);
	padding: 56px 0;
}

.pattern-scenarios .wp-block-heading {
	margin-bottom: var(--sp-4);
}

/* Igualar eyebrow, H2 e intro con el eje izquierdo del grid (mismo max-width que alignwide) */
.pattern-scenarios .section-eyebrow,
.pattern-scenarios .wp-block-heading,
.pattern-scenarios .pattern-scenarios__intro {
	max-width: var(--width-container) !important;
}

.pattern-scenarios__intro {
	font-size: var(--font-size-lead) !important;
	color: var(--color-text-muted);
	line-height: 1.55;
	margin-bottom: var(--sp-6) !important;
	max-width: 680px;
}

/* Grid 2 columnas con subgrid: iguala altura por filas sin forzar altura global */
.scenarios-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--sp-4) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.scenarios-col.wp-block-column {
	display: grid !important;
	grid-row: span 3 !important;
	grid-template-rows: subgrid !important;
}

.scenario-item.wp-block-group {
	background-color: var(--color-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	padding: var(--sp-5) !important;
	margin-bottom: 0;
}

.scenario-item__text {
	font-size: var(--font-size-base) !important;
	color: var(--color-text);
	line-height: 1.55;
	margin: 0 !important;
}

/* --- CTA final: tarjeta oscura, 2 columnas desktop --- */
.pattern-cta-section {
	padding: 56px 0;
}

.pattern-cta {
	background-color: var(--color-primary);
	border-radius: 12px;
	padding: var(--sp-8) var(--sp-8);
}

.cta-columns.wp-block-columns {
	gap: var(--sp-7) !important;
	margin: 0 !important;
}

@media (min-width: 783px) {
	.cta-columns.wp-block-columns {
		align-items: center;
	}
}

.cta-col-text .wp-block-heading {
	color: var(--color-white) !important;
	font-size: var(--font-size-h2) !important;
	margin-bottom: var(--sp-3) !important;
}

.cta-col-text p {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--font-size-lead);
	line-height: 1.55;
	margin-bottom: 0 !important;
}

.cta-col-action .wp-block-buttons {
	margin: 0 !important;
}

@media (min-width: 783px) {
	.cta-col-action .wp-block-buttons {
		justify-content: flex-end;
	}
}

.pattern-cta .wp-block-button__link {
	background-color: var(--color-white) !important;
	color: var(--color-primary) !important;
	border-color: var(--color-white) !important;
	font-weight: 600;
	white-space: nowrap;
}

.pattern-cta .wp-block-button__link:hover {
	background-color: var(--color-bg-alt) !important;
	border-color: var(--color-bg-alt) !important;
}

/* --- Bloque destacado editorial --- */
.pattern-highlight {
	padding: var(--sp-7);
	background-color: var(--color-bg-alt);
	border-left: 4px solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: var(--sp-7) 0;
}

.pattern-highlight__text {
	font-size: var(--font-size-lead);
	color: var(--color-primary);
	font-style: italic;
	line-height: 1.55;
	margin: 0;
}

/* --- Contacto breve --- */
.pattern-contact {
	padding: var(--sp-6);
	border-left: 4px solid var(--color-border);
}

/* --- Disponibilidad --- */
.pattern-availability {
	padding: var(--sp-7);
	background-color: var(--color-bg-alt);
	border-left: 4px solid var(--color-secondary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pattern-availability__badge {
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-secondary);
	margin-bottom: var(--sp-3);
}

/* --- Tablet: áreas 2 columnas --- */
@media (max-width: 900px) {
	.areas-columns.wp-block-columns {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* --- Móvil: ajustes de patrón --- */
@media (max-width: 768px) {
	.pattern-hero {
		padding: 40px 0 28px;
	}

	.hero-heading.wp-block-heading {
		font-size: 26px !important;
		text-wrap: unset;
	}

	.hero-lead {
		font-size: var(--font-size-base) !important;
	}

	.pattern-areas,
	.pattern-scenarios,
	.pattern-grid {
		padding: 32px 0;
	}

	.areas-columns.wp-block-columns {
		grid-template-columns: 1fr !important;
	}

	/* Escenarios móvil: columna única con altura natural */
	.scenarios-grid.wp-block-columns {
		grid-template-columns: 1fr !important;
	}

	.scenarios-col.wp-block-column {
		grid-row: auto !important;
		grid-template-rows: auto !important;
	}

	.scenario-item.wp-block-group {
		margin-bottom: var(--sp-4) !important;
	}

	.scenario-item.wp-block-group:last-child {
		margin-bottom: 0 !important;
	}

	.pattern-cta-section {
		padding: 32px 0;
	}

	.pattern-cta {
		padding: var(--sp-7) var(--sp-5);
		border-radius: var(--radius-md);
	}

	.cta-col-text .wp-block-heading {
		text-align: center !important;
	}

	.cta-col-text p {
		text-align: center !important;
	}

	.cta-col-action .wp-block-buttons {
		justify-content: center !important;
	}

	.pattern-highlight,
	.pattern-availability {
		padding: var(--sp-5);
	}
}

/* --------------------------------------------------------------------------
   36b. Utilidad: grupo con fondo alternativo (.rs-section-alt)
   -------------------------------------------------------------------------- */

.rs-section-alt {
	background: var(--color-bg-alt);
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   37. Capa editorial global — .rs-page-editorial
   -------------------------------------------------------------------------- */

/* Anclar cabecera, imagen y footer al ancho editorial */
.rs-page-editorial .entry-header,
.rs-page-editorial .entry-thumbnail,
.rs-page-editorial .entry-footer {
	max-width: var(--width-content);
	margin-inline: auto;
}

/* Contenido: ancho editorial 740px, centrado */
.rs-page-editorial .entry-content {
	max-width: var(--width-content);
	margin-inline: auto;
}

/* Jerarquía tipográfica */
.rs-page-editorial .entry-content h2 {
	font-size: var(--font-size-h2);
	line-height: 1.2;
	margin-top: var(--sp-9);
	margin-bottom: var(--sp-5);
}

.rs-page-editorial .entry-content h3 {
	font-size: var(--font-size-h3);
	line-height: 1.3;
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-4);
}

.rs-page-editorial .entry-content h4 {
	font-size: var(--font-size-base);
	font-weight: 600;
	margin-top: var(--sp-7);
	margin-bottom: var(--sp-3);
}

/* Ritmo vertical de párrafos y listas */
.rs-page-editorial .entry-content p {
	margin-top: 0;
	margin-bottom: var(--sp-5);
}

.rs-page-editorial .entry-content ul,
.rs-page-editorial .entry-content ol {
	margin-top: 0;
	margin-bottom: var(--sp-5);
	padding-left: var(--sp-6);
}

.rs-page-editorial .entry-content li {
	margin-bottom: var(--sp-2);
}

.rs-page-editorial .entry-content img {
	border-radius: var(--radius-md);
	margin-block: var(--sp-7);
}

.rs-page-editorial .entry-content a {
	text-decoration-thickness: 1px;
}

/* alignwide: hasta ~960px, fluid para no desbordar en viewports medios */
.rs-page-editorial .entry-content .alignwide {
	--_alignwide: min(960px, calc(100vw - 2 * var(--gutter)));
	max-width: 960px;
	width: var(--_alignwide);
	margin-inline: calc(50% - var(--_alignwide) / 2);
}

/* Columnas Gutenberg en contexto editorial: separación y ritmo generoso */
.rs-page-editorial .entry-content .wp-block-columns {
	gap: clamp(2rem, 4vw, 3rem);
	margin-block: var(--sp-7);
}

/* pattern-highlight dentro de columna: funcional, sin estética de cita */
.wp-block-column .pattern-highlight {
	margin-block: 0;
	height: 100%;
}

.wp-block-column .pattern-highlight__text {
	font-style: normal;
	font-size: var(--font-size-base);
	color: var(--color-text);
}

/* alignfull: ancho de viewport completo */
.rs-page-editorial .entry-content .alignfull {
	max-width: 100%;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Utilidades editoriales reutilizables
   -------------------------------------------------------------------------- */

/* Párrafo de entrada o lead */
.rs-lead {
	font-size: var(--font-size-lead);
	line-height: 1.55;
	color: var(--color-text);
	margin-bottom: var(--sp-6);
}

/* Caja resaltada con acento lateral */
.rs-highlight {
	background-color: var(--color-bg-alt);
	border-left: 3px solid var(--color-accent);
	padding: var(--sp-5) var(--sp-6);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin-block: var(--sp-7);
}

.rs-highlight p:last-child {
	margin-bottom: 0;
}

/* Enlace o acción editorial contextual */
.rs-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--transition);
}

.rs-cta:hover {
	color: var(--color-accent);
}

/* CTA editorial — franja de cierre suave, fondo alternativo, sin caja */
.rs-page-editorial .rs-cta-editorial {
	/* Rompe el contenedor editorial de 740px hacia ancho de viewport */
	width: 100vw;
	margin-top: clamp(4rem, 7vw, 5.5rem);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(3rem, 5vw, 4rem) var(--gutter);
	background-color: var(--color-bg-alt);
	border: 0;
	border-radius: 0;
	text-align: center;
}

/* Acotar el contenido interno a la columna editorial */
.rs-page-editorial .rs-cta-editorial > * {
	max-width: var(--width-content);
	margin-left: auto;
	margin-right: auto;
}

.rs-page-editorial .rs-cta-editorial .wp-block-heading {
	color: var(--color-text) !important;
	font-size: var(--font-size-h3) !important;
	margin-top: 0 !important;
	margin-bottom: var(--sp-3) !important;
}

.rs-page-editorial .rs-cta-editorial p {
	max-width: 680px;
	margin: 0 auto 1.5rem;
	color: var(--color-text);
	font-size: clamp(1.08rem, 1.6vw, 1.2rem);
	line-height: 1.65;
}

.rs-page-editorial .rs-cta-editorial .wp-block-buttons {
	justify-content: center !important;
}

.rs-page-editorial .rs-cta-editorial .wp-block-button__link {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	border-radius: 0.4rem;
	padding: 0.75rem 1.15rem;
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
}

.rs-page-editorial .rs-cta-editorial .wp-block-button__link:hover,
.rs-page-editorial .rs-cta-editorial .wp-block-button__link:focus {
	background-color: var(--color-primary-hover) !important;
	border-color: var(--color-primary-hover) !important;
	color: var(--color-white) !important;
}

/* --------------------------------------------------------------------------
   38. Contact Form 7
   -------------------------------------------------------------------------- */

/* Estructura de grid: cada párrafo CF7 es un campo del formulario */
.wpcf7-form {
	display: grid;
	gap: 1.25rem;
}

/* Anular el margen editorial que se aplica a <p> dentro de .entry-content */
.wpcf7-form p,
.rs-page-editorial .entry-content .wpcf7-form p {
	margin: 0;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 0.45rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 3px rgba(45, 95, 106, 0.16);
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	min-height: auto;
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.wpcf7-form .wpcf7-acceptance a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	width: auto;
	padding: 0.75rem 1.35rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-white);
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--transition);
}

.wpcf7-form input[type="submit"]:hover:not(:disabled):not(.disabled) {
	background: var(--color-primary-hover);
}

/* Cubre el atributo disabled nativo y la clase .disabled que añade CF7 */
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form input[type="submit"].disabled {
	background: var(--color-primary);
	color: var(--color-white);
	opacity: 0.55;
	cursor: not-allowed;
}

/* Mensajes de error inline (bajo cada campo) */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: var(--color-accent);
}

/* Respuesta global del formulario */
.wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border-radius: var(--radius-md);
	font-size: 0.95rem;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
	border: 1px solid var(--color-secondary);
	background-color: rgba(45, 95, 106, 0.08);
	color: var(--color-secondary);
}

.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-spam-blocked {
	border: 1px solid var(--color-accent);
	background-color: var(--color-archived-bg);
	color: var(--color-archived-text);
}

/* --------------------------------------------------------------------------
   39. Página Contacto — .contact-form-section
   -------------------------------------------------------------------------- */

/* Grupo exterior: fondo alternativo, padding generoso, radio suave */
.contact-form-section {
	margin-top: 3rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	padding-bottom: clamp(2rem, 3vw, 2.5rem);
	background: var(--color-bg-alt);
	border-radius: 12px;
}

/* En alignwide: expandir hasta el ancho del contenedor (1140px) */
.rs-page-editorial .entry-content .contact-form-section.alignwide {
	--_alignwide: min(var(--width-container), calc(100vw - 2 * var(--gutter)));
	max-width: var(--width-container);
	width: var(--_alignwide);
	margin-inline: calc(50% - var(--_alignwide) / 2);
}

/* Título discreto antes del formulario (añadir clase contact-form-title al H2 en Gutenberg) */
.contact-form-title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
}

/* Anular el margin-top que aplica la capa editorial a h2 dentro de .entry-content */
.rs-page-editorial .entry-content .contact-form-section .contact-form-title {
	margin-top: 0;
	font-size: clamp(1.35rem, 2vw, 1.6rem);
}

/* Columnas dentro de la sección: gap y alineación al inicio */
.rs-page-editorial .entry-content .contact-form-section .wp-block-columns {
	gap: clamp(2rem, 4vw, 3rem);
	align-items: flex-start;
	margin-block: 0;
}

.contact-form-section .wp-block-column:first-child {
	min-width: 0;
}

/* Columna derecha: ancho mínimo y altura natural (no estirada) */
.contact-form-section .wp-block-column:last-child {
	min-width: 280px;
	align-self: flex-start;
}

/* Nota lateral: práctica, altura natural sin estirarse */
/* Soporta .contact-note (clase manual desde Gutenberg) y .pattern-highlight */
.contact-form-section .contact-note,
.contact-form-section .pattern-highlight {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: rgba(255, 255, 255, 0.45);
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin-block: 0;
	height: auto;
}

/* Anular height:100% del rule global .wp-block-column .pattern-highlight */
.contact-form-section .wp-block-column .pattern-highlight {
	height: auto;
}

/* Título de la nota: menor que H1, sin margen superior */
.rs-page-editorial .entry-content .contact-form-section .contact-note h2,
.rs-page-editorial .entry-content .contact-form-section .contact-note .wp-block-heading,
.rs-page-editorial .entry-content .contact-form-section .pattern-highlight h2,
.rs-page-editorial .entry-content .contact-form-section .pattern-highlight .wp-block-heading {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
}

/* Texto de la nota: tono atenuado, sin cursiva */
.rs-page-editorial .entry-content .contact-form-section .contact-note p,
.rs-page-editorial .entry-content .contact-form-section .pattern-highlight p,
.contact-form-section .pattern-highlight__text {
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	font-style: normal;
}

/* --- Responsive 782px --- */
@media (max-width: 782px) {
	.contact-form-section {
		padding: 1.5rem;
		border-radius: 12px;
	}

	.rs-page-editorial .entry-content .contact-form-section .wp-block-columns {
		gap: 2rem;
	}

	.contact-form-section .wp-block-column:last-child {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   40. Página Colaboración — sección "Dónde encajo mejor" (.rs-fit-*)
   -------------------------------------------------------------------------- */

/* Contenedor de sección — ancho editorial, sin fondo especial */
.rs-fit-section {
	max-width: var(--width-content);
	margin-inline: auto;
}

/* Lista editorial con marcador integrado */
.rs-fit-list {
	list-style: none;
	padding: 0;
	margin-block: var(--sp-7) 0;
}

.rs-fit-list li {
	display: grid;
	grid-template-columns: 0.875rem 1fr;
	column-gap: 0.875rem;
	align-items: start;
	padding-block: 0.9rem;
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

/* Separador inset: solo entre ítems, alineado con el texto */
.rs-fit-list li + li {
	border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.rs-fit-list li::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* punto central sólido + hueco + aro exterior suave */
	background: radial-gradient(
		circle,
		var(--color-accent) 0%,
		var(--color-accent) 33%,
		transparent 33%,
		transparent 56%,
		color-mix(in srgb, var(--color-accent) 40%, transparent) 56%,
		color-mix(in srgb, var(--color-accent) 40%, transparent) 100%
	);
	justify-self: center;
	flex-shrink: 0;
	/* centrar el bullet respecto a la primera línea de texto */
	margin-top: calc((var(--line-height-body) * var(--font-size-base) - 10px) / 2);
}

/* Nota editorial "Para que haya buen encaje" — nota secundaria ligera */
.rs-fit-note {
	margin-top: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	position: relative;
}

.rs-fit-note::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 48%;
	height: 1px;
	background: color-mix(in srgb, var(--color-border) 55%, transparent);
}

.rs-fit-note__title {
	margin: 0 0 0.3rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary);
}

.rs-fit-note p:not(.rs-fit-note__title) {
	margin-top: 0;
	margin-bottom: 0;
	font-size: clamp(0.9rem, 1.1vw, 0.975rem);
	line-height: 1.65;
	color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
	.rs-fit-note {
		margin-top: var(--sp-7);
	}
}

/* --------------------------------------------------------------------------
   41. Página Colaboración — sección "Formas de colaboración" (.rs-collab-*)
   -------------------------------------------------------------------------- */

/* Sección de fondo alternativo con ancho amplio */
.rs-collab-section {
	background: var(--color-bg-alt);
	padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(0.5rem, 1.25vw, 0.875rem);
	margin-block: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Breakout a ancho completo dentro de la capa editorial (igual que alignfull) */
.rs-page-editorial .entry-content .rs-collab-section {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 768px) {
	.rs-page-editorial .entry-content .rs-collab-section {
		width: 100%;
		margin-inline: 0;
	}
}

/* Contenedor interior centrado */
.rs-collab-section__inner {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Título y párrafo introductorio dentro del inner */
/* Usar .rs-collab-section como ancestro sube la especificidad a (0,2,1)
   y supera la regla editorial .rs-page-editorial .entry-content h2 */
.rs-collab-section .rs-collab-section__inner > h2,
.rs-collab-section .rs-collab-section__inner > .wp-block-heading {
	margin-top: 0 !important;
	margin-bottom: 1rem;
}

.rs-collab-section__inner > p {
	max-width: 68ch;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	color: var(--color-text-muted);
}

/* Grid de dos tarjetas equilibradas */
.rs-collab-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
	align-items: stretch;
}

/* wp-block-column es el item directo del grid; debe estirarse */
.rs-collab-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Tarjeta individual */
.rs-collab-card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	height: 100%;
	box-sizing: border-box;
}

.rs-collab-section .rs-collab-card h3,
.rs-collab-section .rs-collab-card .wp-block-heading {
	margin-top: 0 !important;
	margin-bottom: 1rem;
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.rs-collab-card p {
	font-size: clamp(0.95rem, 1.3vw, 1rem);
	line-height: 1.65;
	color: var(--color-text);
	margin-bottom: 0.75rem;
}

.rs-collab-card p:last-child {
	margin-bottom: 0;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
	.rs-collab-cards {
		grid-template-columns: 1fr;
	}

	.rs-collab-section {
		margin-block: 2rem;
		padding-block: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   36. Print
   -------------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.menu-toggle,
	.navigation {
		display: none;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}