/*!
Theme Name:  Blocksy Child
Theme URI:   https://cuidadomasculino.es
Description: Child theme for Blocksy — cuidadomasculino.es
Author:      Iker
Template:    blocksy
Version:     1.0.0
Text Domain: blocksy-child
*/

/* =========================================================
   VARIABLES DE MARCA
   ========================================================= */
:root {
	--cm-primary:       #1a1a2e;
	--cm-primary-light: #252545;
	--cm-accent:        #c9a84c;
	--cm-accent-dark:   #a8863a;
	--cm-text:          #2d2d2d;
	--cm-text-light:    #666;
	--cm-bg:            #fafafa;
	--cm-white:         #ffffff;
	--cm-border:        #e8e8e8;
	--cm-radius:        6px;
	--cm-shadow:        0 2px 12px rgba(0,0,0,.1);
	--cm-shadow-sticky: 0 2px 20px rgba(0,0,0,.15);
	--cm-transition:    0.2s ease;
}

/* =========================================================
   CABECERA — ESTADO NORMAL
   ========================================================= */
html body header#header,
html body header#header[data-id="type-1"],
html body header#header [data-device="desktop"],
html body header#header [data-device="mobile"],
html body header#header [data-row="middle"],
html body header#header [data-row],
html body header#header .ct-container,
html body .ct-header,
html body .ct-header [data-row] {
	background-color: #1a1a2e !important;
	background: #1a1a2e !important;
	border-bottom: 1px solid rgba(255,255,255,.06) !important;
	--row-background: #1a1a2e !important;
	--theme-row-background: #1a1a2e !important;
	--row-bg: #1a1a2e !important;
}

/* Anular posibles gradientes o imágenes de fondo */
html body header#header [data-row="middle"]::before,
html body header#header [data-row="middle"]::after {
	background: transparent !important;
}

/* Título del sitio (sin logo imagen) */
#header .site-title a {
	color: var(--cm-white) !important;
	font-family: var(--cm-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: color var(--cm-transition);
}

#header .site-title a:hover {
	color: var(--cm-accent) !important;
}

/* Sticky */
#header.ct-header.header--is-stuck,
#header.ct-header[data-sticky-class="header--is-stuck"] {
	background-color: rgba(26,26,46,.97) !important;
	box-shadow: var(--cm-shadow-sticky) !important;
	backdrop-filter: blur(8px);
}

/* =========================================================
   NAVEGACIÓN PRINCIPAL — DESKTOP
   ========================================================= */

/* Ítems del menú */
#header .ct-menu-link,
#header .menu > li > a {
	font-size: .9375rem !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	color: rgba(255,255,255,.82) !important;
	padding: .5rem .85rem !important;
	border-radius: var(--cm-radius) !important;
	transition: color var(--cm-transition), background-color var(--cm-transition) !important;
}

#header .menu > li > a:hover,
#header .menu > li.current-menu-item > a,
#header .menu > li.current-menu-ancestor > a {
	color: var(--cm-accent) !important;
	background-color: rgba(201,168,76,.1) !important;
}

/* =========================================================
   DROPDOWN / SUBMENÚ DESKTOP
   ========================================================= */

/* Contenedor del dropdown */
#header .menu .sub-menu {
	background-color: var(--cm-primary) !important;
	border-top: 2px solid var(--cm-accent) !important;
	border-radius: 0 0 var(--cm-radius) var(--cm-radius) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
	min-width: 220px !important;
	padding: .5rem 0 !important;
}

/* Links del submenú */
#header .menu .sub-menu li a {
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,.82) !important;
	padding: .65rem 1.25rem !important;
	display: block !important;
	letter-spacing: .01em !important;
	transition: color var(--cm-transition), background-color var(--cm-transition) !important;
	white-space: nowrap !important;
}

/* Hover en links del submenú */
#header .menu .sub-menu li a:hover {
	color: var(--cm-accent) !important;
	background-color: rgba(201,168,76,.1) !important;
}

/* Iconos de cabecera (búsqueda, etc.) */
#header .ct-header-search,
#header [class*="ct-toggle"] {
	color: rgba(255,255,255,.8) !important;
}

#header .ct-header-search:hover {
	color: var(--cm-accent) !important;
}

/* =========================================================
   NAVEGACIÓN MÓVIL (hamburger)
   ========================================================= */
#header .ct-header-trigger {
	color: var(--cm-white) !important;
}

#header .ct-header-trigger rect {
	fill: var(--cm-white) !important;
}

/* Off-canvas / drawer panel */
.ct-panel,
.ct-mobile-sidebar {
	background-color: var(--cm-primary) !important;
}

.ct-panel .ct-menu a,
.ct-mobile-sidebar .menu a {
	color: rgba(255,255,255,.85);
	font-weight: 600;
}

.ct-panel .ct-menu a:hover,
.ct-mobile-sidebar .menu a:hover {
	color: var(--cm-accent);
}

/* =========================================================
   PIE DE PÁGINA
   ========================================================= */
.site-footer,
#colophon,
footer[id="colophon"] {
	background-color: var(--cm-primary);
	color: rgba(255,255,255,.8);
}

/* Títulos de widgets en footer */
.site-footer .ct-widget-title,
.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
	color: var(--cm-white);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: .75rem;
}

/* Links en footer */
.site-footer a,
#colophon a {
	color: rgba(255,255,255,.7);
	transition: color var(--cm-transition);
}

.site-footer a:hover,
#colophon a:hover {
	color: var(--cm-accent);
}

/* Lista de navegación en footer */
.site-footer .ct-menu,
.site-footer ul.menu,
.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .ct-menu li + li,
.site-footer ul.menu li + li,
.site-footer ul li + li {
	margin-top: .4rem;
}

.site-footer ul li a {
	font-size: .875rem;
	line-height: 1.5;
}

/* Descripción / texto branding en footer */
.cm-footer-brand p {
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(255,255,255,.6);
	max-width: 280px;
}

/* Separador entre área de widgets y barra inferior */
.footer-bottom-bar,
#footer-bottom,
.ct-footer-bottom {
	background-color: var(--cm-primary-light);
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 1rem 0;
}

.footer-bottom-bar p,
.footer-bottom-bar span,
#footer-bottom p,
.ct-footer-bottom p {
	font-size: .8125rem;
	color: rgba(255,255,255,.45);
}

/* =========================================================
   BANDA DE DIVULGACIÓN DE AFILIADOS
   ========================================================= */
.cm-affiliate-disclosure {
	background-color: rgba(0,0,0,.25);
	border-top: 1px solid rgba(255,255,255,.08);
	padding: .875rem 1rem;
	text-align: center;
}

.cm-affiliate-disclosure p {
	font-size: .75rem;
	color: rgba(255,255,255,.45);
	margin: 0;
	line-height: 1.5;
}

.cm-affiliate-disclosure .cm-legal-links {
	font-size: .8125rem;
	margin-bottom: .5rem;
	line-height: 1.8;
}

.cm-affiliate-disclosure .cm-legal-links a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
	transition: color var(--cm-transition);
}

.cm-affiliate-disclosure .cm-legal-links a:hover {
	color: var(--cm-accent);
	text-decoration: underline;
}

/* =========================================================
   RESPONSIVE — ajustes de footer en mobile
   ========================================================= */
@media (max-width: 767px) {
	.site-footer .ct-container,
	.site-footer .footer-widgets-inner {
		flex-direction: column;
	}

	.site-footer .widget-area + .widget-area {
		margin-top: 1.75rem;
		padding-top: 1.75rem;
		border-top: 1px solid rgba(255,255,255,.1);
	}

	.cm-footer-brand p {
		max-width: 100%;
	}
}

/* =========================================================
   SEC 1 — TIPOGRAFÍA
   ========================================================= */
:root {
	--cm-font-heading: 'Playfair Display', Georgia, serif;
	--cm-font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

body {
	font-family: var(--cm-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--cm-text);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-post-title,
.site-title {
	font-family: var(--cm-font-heading);
	line-height: 1.2;
	color: var(--cm-primary);
}

.ct-menu a,
.entry-meta,
.wp-block-button__link,
.button,
.ct-button {
	font-family: var(--cm-font-body);
}

/* Post individual — H1 escalable */
.entry-header .entry-title,
.ct-post-title,
.single .entry-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
}

/* Tarjeta — título de tamaño controlado */
.ct-query-template-grid .wp-block-post .wp-block-post-title,
[data-archive="default"] .entry-card .entry-title {
	font-family: var(--cm-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* =========================================================
   SEC 2 — ARTICLE CARDS
   ========================================================= */

/* Contenedor de tarjeta */
.ct-query-template-grid .wp-block-post,
[data-archive="default"] .entry-card {
	background: var(--cm-white);
	border: 1px solid var(--cm-border);
	border-radius: calc(var(--cm-radius) * 1.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
	.ct-query-template-grid .wp-block-post:hover,
	[data-archive="default"] .entry-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
	}
}

/* Imagen de la tarjeta */
.ct-query-template-grid .wp-block-post .wp-block-post-featured-image,
[data-archive="default"] .entry-card .ct-media-container {
	overflow: hidden;
	border-radius: calc(var(--cm-radius) * 1.5) calc(var(--cm-radius) * 1.5) 0 0;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}

.ct-query-template-grid .wp-block-post .wp-block-post-featured-image img,
[data-archive="default"] .entry-card .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

@media (hover: hover) {
	.ct-query-template-grid .wp-block-post:hover .wp-block-post-featured-image img,
	[data-archive="default"] .entry-card:hover .ct-media-container img {
		transform: scale(1.06);
	}
}

/* Zona de texto */
.ct-query-template-grid .wp-block-post > *:not(.wp-block-post-featured-image),
[data-archive="default"] .card-content {
	padding: 1.25rem 1.25rem 1.5rem;
}

/* Título enlace */
.ct-query-template-grid .wp-block-post .wp-block-post-title a,
[data-archive="default"] .entry-card .entry-title a {
	color: var(--cm-primary);
	text-decoration: none;
	transition: color var(--cm-transition);
}

.ct-query-template-grid .wp-block-post .wp-block-post-title a:hover,
[data-archive="default"] .entry-card .entry-title a:hover {
	color: var(--cm-accent);
}

/* Excerpt — 3 líneas */
.ct-query-template-grid .wp-block-post .wp-block-post-excerpt,
[data-archive="default"] .entry-excerpt {
	font-size: .9rem;
	color: var(--cm-text-light);
	line-height: 1.6;
	margin-top: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Badge de categoría */
.ct-query-template-grid .wp-block-post .wp-block-post-terms a,
[data-archive="default"] .entry-card .entry-meta .ct-meta-elements a {
	display: inline-block;
	font-family: var(--cm-font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cm-accent-dark);
	background: rgba(201, 168, 76, .12);
	border: 1px solid rgba(201, 168, 76, .35);
	border-radius: 50px;
	padding: .2em .7em;
	text-decoration: none;
	transition: background var(--cm-transition), color var(--cm-transition);
	margin-bottom: .5rem;
}

.ct-query-template-grid .wp-block-post .wp-block-post-terms a:hover,
[data-archive="default"] .entry-card .entry-meta .ct-meta-elements a:hover {
	background: var(--cm-accent);
	color: var(--cm-white);
	border-color: var(--cm-accent);
}

/* Fecha */
.ct-query-template-grid .wp-block-post .wp-block-post-date,
[data-archive="default"] .entry-card .entry-meta time {
	font-size: .8125rem;
	color: var(--cm-text-light);
}

/* =========================================================
   SEC 3 — SECTION HEADINGS
   ========================================================= */
.wp-block-group > .wp-block-heading,
.wp-block-group > h2,
.entry-content > h2,
.cm-section-heading {
	position: relative;
	display: inline-block;
	padding-bottom: .45rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--cm-primary);
	margin-bottom: 2rem;
}

.wp-block-group > .wp-block-heading::after,
.wp-block-group > h2::after,
.entry-content > h2::after,
.cm-section-heading::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--cm-accent);
	border-radius: 2px;
}

/* Variante centrada */
.wp-block-group > .wp-block-heading.has-text-align-center::after,
.wp-block-group > h2.has-text-align-center::after,
.cm-section-heading.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* =========================================================
   SEC 4 — HERO BLOCK
   ========================================================= */
.wp-block-cover {
	position: relative;
}

.wp-block-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		160deg,
		rgba(26, 26, 46, .78) 0%,
		rgba(26, 26, 46, .45) 60%,
		rgba(26, 26, 46, .15) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 700px;
}

.wp-block-cover .wp-block-heading,
.wp-block-cover h1,
.wp-block-cover h2 {
	font-family: var(--cm-font-heading) !important;
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	font-weight: 700 !important;
	color: var(--cm-white) !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
	line-height: 1.15;
	margin-bottom: 1rem;
}

.wp-block-cover p:not(.wp-block-button__link) {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	color: rgba(255, 255, 255, .88) !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	max-width: 580px;
	line-height: 1.65;
}

.wp-block-cover.alignfull {
	min-height: clamp(420px, 60vh, 680px);
}

/* =========================================================
   SEC 5 — CATEGORY CARDS (.cm-category-grid)
   ========================================================= */
.cm-category-grid .wp-block-column {
	background: var(--cm-white);
	border: 1px solid var(--cm-border);
	border-radius: calc(var(--cm-radius) * 1.5);
	border-bottom: 3px solid transparent;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
	.cm-category-grid .wp-block-column:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
		border-color: var(--cm-accent);
		border-bottom-color: var(--cm-accent);
	}
}

.cm-category-grid .wp-block-column .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	.cm-category-grid .wp-block-column:hover .wp-block-image img {
		transform: scale(1.05);
	}
}

.cm-category-grid .wp-block-column > *:not(.wp-block-image) {
	padding: 1rem 1.25rem;
}

.cm-category-grid .wp-block-column h3,
.cm-category-grid .wp-block-column h4 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--cm-primary);
	margin-bottom: .35rem;
}

.cm-category-grid .wp-block-column p {
	font-size: .875rem;
	color: var(--cm-text-light);
	line-height: 1.55;
}

/* =========================================================
   SEC 6 — BUTTONS
   ========================================================= */

/* Primario — relleno dorado */
.wp-block-button.cm-btn-primary .wp-block-button__link,
a.cm-btn-primary {
	background-color: var(--cm-accent) !important;
	color: var(--cm-white) !important;
	border: 2px solid var(--cm-accent) !important;
	border-radius: 50px !important;
	font-family: var(--cm-font-body) !important;
	font-size: .9375rem !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	padding: .75rem 1.75rem !important;
	box-shadow: 0 3px 12px rgba(201, 168, 76, .40) !important;
	transition: background-color var(--cm-transition),
	            box-shadow var(--cm-transition),
	            transform var(--cm-transition) !important;
}

.wp-block-button.cm-btn-primary .wp-block-button__link:hover,
a.cm-btn-primary:hover {
	background-color: var(--cm-accent-dark) !important;
	border-color: var(--cm-accent-dark) !important;
	box-shadow: 0 6px 20px rgba(201, 168, 76, .50) !important;
	transform: translateY(-2px) !important;
}

/* Secundario — contorno dorado (clase manual o estilo Outline nativo de Gutenberg) */
.wp-block-button.cm-btn-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
a.cm-btn-secondary {
	background-color: transparent !important;
	color: var(--cm-accent) !important;
	border: 2px solid var(--cm-accent) !important;
	border-radius: 50px !important;
	font-family: var(--cm-font-body) !important;
	font-size: .9375rem !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	padding: .75rem 1.75rem !important;
	box-shadow: inset 0 0 0 0 var(--cm-accent);
	transition: background-color var(--cm-transition),
	            color var(--cm-transition),
	            box-shadow var(--cm-transition),
	            transform var(--cm-transition) !important;
}

.wp-block-button.cm-btn-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
a.cm-btn-secondary:hover {
	background-color: var(--cm-accent) !important;
	color: var(--cm-primary) !important;
	box-shadow: 0 6px 20px rgba(201, 168, 76, .35) !important;
	transform: translateY(-2px) !important;
}

/* "Leer más" con flecha */
.entry-button a,
.wp-block-read-more {
	font-family: var(--cm-font-body);
	font-size: .875rem;
	font-weight: 600;
	color: var(--cm-accent-dark);
	text-decoration: none;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	gap: .3em;
	transition: color var(--cm-transition), gap var(--cm-transition);
}

.entry-button a:hover,
.wp-block-read-more:hover {
	color: var(--cm-accent);
	gap: .5em;
}

.entry-button a::after,
.wp-block-read-more::after {
	content: '→';
	font-size: .9em;
}

/* =========================================================
   SEC 7 — TABLEPRESS
   ========================================================= */
.tablepress {
	--text-color:       var(--cm-text);
	--head-text-color:  var(--cm-white);
	--head-bg-color:    var(--cm-primary);
	--odd-bg-color:     var(--cm-white);
	--even-bg-color:    #f4f6fa;
	--hover-bg-color:   rgba(201, 168, 76, .08);
	--border-color:     var(--cm-border);

	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--cm-radius);
	border: 1px solid var(--cm-border);
	font-family: var(--cm-font-body);
	font-size: .9375rem;
	margin-bottom: 2rem;
}

.tablepress > thead > tr > th {
	font-family: var(--cm-font-body);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	background-color: var(--cm-primary) !important;
	color: var(--cm-white) !important;
	border-color: rgba(255, 255, 255, .12) !important;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 2;
}

.tablepress > tbody > tr > td:first-child {
	font-weight: 600;
	color: var(--cm-primary);
	background-color: #f9fafc;
	border-right: 2px solid var(--cm-border);
}

.tablepress .column-highlight {
	background-color: rgba(201, 168, 76, .07) !important;
	border-left: 3px solid var(--cm-accent) !important;
	font-weight: 600;
}

.tablepress > tfoot > tr > td {
	font-size: .8125rem;
	color: var(--cm-text-light);
	font-style: italic;
	background-color: #f4f6fa;
}

@media (max-width: 480px) {
	.tablepress {
		font-size: .8125rem;
	}
}

/* =========================================================
   SEC 8 — POST BODY CONTENT
   ========================================================= */
.entry-content {
	max-width: 72ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--cm-text);
}

.entry-content p {
	margin-bottom: 1.35em;
}

.entry-content h2 {
	font-size: clamp(1.35rem, 2.8vw, 1.75rem);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.entry-content h3 {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 700;
	color: var(--cm-primary);
	margin-top: 2rem;
	margin-bottom: .75rem;
}

/* Listas — bullet dorado */
.entry-content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 1.35em;
}

.entry-content ul > li {
	padding-left: 1.5rem;
	position: relative;
	margin-bottom: .5em;
	line-height: 1.65;
}

.entry-content ul > li::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: .65em;
	width: 6px;
	height: 6px;
	background: var(--cm-accent);
	border-radius: 50%;
}

.entry-content ol {
	padding-left: 1.5rem;
	margin-bottom: 1.35em;
}

.entry-content ol > li {
	margin-bottom: .5em;
	line-height: 1.65;
}

/* Blockquote */
.entry-content blockquote:not(.is-style-plain) {
	border-left: 4px solid var(--cm-accent) !important;
	background: linear-gradient(90deg, rgba(201, 168, 76, .06) 0%, transparent 100%);
	padding: 1.25rem 1.5rem !important;
	margin: 2rem 0;
	border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
}

.entry-content blockquote p {
	font-family: var(--cm-font-heading);
	font-size: 1.125rem;
	font-style: italic;
	color: var(--cm-primary);
	line-height: 1.55;
}

.entry-content blockquote cite {
	display: block;
	margin-top: .5rem;
	font-size: .875rem;
	font-style: normal;
	font-weight: 600;
	color: var(--cm-text-light);
}

.entry-content strong {
	font-weight: 700;
	color: var(--cm-primary);
}

.entry-content hr {
	border: none;
	height: 2px;
	background: linear-gradient(90deg, var(--cm-accent) 0%, transparent 100%);
	margin: 2.5rem 0;
	opacity: .35;
}

/* =========================================================
   SEC 9 — PRODUCTS SECTION (.cm-products-section)
   ========================================================= */
.cm-products-section {
	background-color: var(--cm-primary);
	padding: 4rem 0;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

.cm-products-section h2,
.cm-products-section .wp-block-heading {
	color: var(--cm-white) !important;
}

.cm-products-section h2::after,
.cm-products-section .wp-block-heading::after {
	background: var(--cm-accent);
}

.cm-products-section .ct-query-template-grid .wp-block-post,
.cm-products-section [data-archive="default"] .entry-card {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
}

.cm-products-section .ct-query-template-grid .wp-block-post .wp-block-post-title a,
.cm-products-section [data-archive="default"] .entry-card .entry-title a {
	color: var(--cm-white);
}

.cm-products-section .ct-query-template-grid .wp-block-post .wp-block-post-title a:hover,
.cm-products-section [data-archive="default"] .entry-card .entry-title a:hover {
	color: var(--cm-accent);
}

.cm-products-section .ct-query-template-grid .wp-block-post .wp-block-post-excerpt,
.cm-products-section [data-archive="default"] .entry-excerpt {
	color: rgba(255, 255, 255, .65);
}

@media (hover: hover) {
	.cm-products-section .ct-query-template-grid .wp-block-post:hover,
	.cm-products-section [data-archive="default"] .entry-card:hover {
		background: rgba(255, 255, 255, .09);
		border-color: var(--cm-accent);
		box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
	}
}

/* =========================================================
   SEC 10 — AFFILIATE PRODUCT CARD (.cm-product-card)
   ========================================================= */
.cm-product-card {
	background: var(--cm-white);
	border: 1px solid var(--cm-border);
	border-radius: calc(var(--cm-radius) * 2);
	padding: 1.75rem;
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
	margin: 2rem 0;
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
	transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
	.cm-product-card:hover {
		box-shadow: 0 6px 28px rgba(0, 0, 0, .12);
	}
}

.cm-product-card > .wp-block-image {
	flex: 0 0 160px;
	max-width: 160px;
}

.cm-product-card > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--cm-radius);
	object-fit: contain;
}

.cm-product-card > *:not(.wp-block-image) {
	flex: 1;
}

.cm-product-card h3,
.cm-product-card h4 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cm-primary);
	margin-top: 0;
	margin-bottom: .5rem;
}

.cm-product-rating {
	color: var(--cm-accent);
	font-size: .9375rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.cm-product-card p:not(.cm-product-rating) {
	font-size: .9375rem;
	color: var(--cm-text-light);
	margin-bottom: 1rem;
	line-height: 1.6;
}

.cm-product-card .wp-block-button__link {
	background-color: var(--cm-accent) !important;
	color: var(--cm-white) !important;
	border-radius: 50px !important;
	font-weight: 600 !important;
	font-size: .875rem !important;
	padding: .6rem 1.5rem !important;
	box-shadow: 0 2px 10px rgba(201, 168, 76, .35) !important;
	border: none !important;
}

@media (max-width: 640px) {
	.cm-product-card {
		flex-direction: column;
	}

	.cm-product-card > .wp-block-image {
		flex: none;
		max-width: 120px;
		margin: 0 auto;
	}
}

/* =========================================================
   SEC 11 — RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
	.ct-query-template-grid {
		grid-template-columns: 1fr !important;
	}

	.wp-block-cover.alignfull {
		min-height: 320px;
	}

	.wp-block-cover .wp-block-cover__inner-container {
		padding: 0 1rem;
	}

	.cm-category-grid .wp-block-column {
		margin-bottom: 1rem;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.ct-query-template-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* =========================================================
   SEC 12 — MICRO-INTERACCIONES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--cm-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background-color: rgba(201, 168, 76, .25);
	color: var(--cm-primary);
}

/* ============================================
   Comparison table (cm-comparison-table)
   ============================================ */
.cm-comparison-table {
	margin: 1.5rem 0 2rem;
	overflow-x: auto;
}

.cm-comparison-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	line-height: 1.4;
}

.cm-comparison-table thead th {
	background-color: var(--cm-primary);
	color: #fff;
	font-family: var(--cm-font-body);
	font-weight: 600;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .75rem .85rem;
	text-align: left;
	border-bottom: 2px solid var(--cm-accent);
}

.cm-comparison-table tbody td {
	padding: .65rem .85rem;
	border-bottom: 1px solid var(--cm-border);
	vertical-align: middle;
}

.cm-comparison-table tbody tr:nth-child(even) {
	background-color: #f7f8fa;
}

.cm-comparison-table tbody tr:hover {
	background-color: rgba(201, 168, 76, .07);
}

.cm-comparison-table tbody td:first-child {
	font-weight: 600;
	color: var(--cm-primary);
}

.cm-comparison-table tbody td:last-child {
	text-align: center;
	white-space: nowrap;
}

.cm-comparison-table .wp-block-button__link {
	padding: .35rem .9rem !important;
	font-size: .8125rem !important;
	border-radius: 50px !important;
}

@media (max-width: 600px) {
	.cm-comparison-table table {
		font-size: .8125rem;
	}
	.cm-comparison-table thead th,
	.cm-comparison-table tbody td {
		padding: .5rem .55rem;
	}
}

/* Featured product card (cm-featured) — vertical layout */
.cm-product-card.cm-featured {
	background: linear-gradient(135deg, rgba(201, 168, 76, .08), rgba(201, 168, 76, .02)) !important;
	border: 1px solid rgba(201, 168, 76, .3) !important;
	border-left: 4px solid var(--cm-accent) !important;
	border-radius: 9px !important;
	padding: 1.75rem 2rem !important;
	margin: 1.5rem 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 1rem !important;
}

.cm-product-card.cm-featured > * {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.cm-product-card.cm-featured > .wp-block-image {
	flex: 0 0 auto !important;
	max-width: 180px !important;
	margin: 0 auto !important;
}

.cm-product-card.cm-featured > .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	border-radius: var(--cm-radius);
	object-fit: contain;
}

.cm-product-card.cm-featured h3 {
	margin: 0 !important;
	color: var(--cm-primary);
	font-size: 1.25rem;
	text-align: center;
}

.cm-product-card.cm-featured p:not(.cm-product-rating) {
	margin: 0 !important;
	max-width: 60ch;
	text-align: center;
}

.cm-product-card.cm-featured p:last-child {
	margin-top: .5rem !important;
	text-align: center;
}

.cm-product-card.cm-featured .cm-featured-label {
	color: var(--cm-accent);
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cm-affiliate-inline {
	font-size: .8125rem;
	color: #6b7280;
	margin: .5rem 0 1.5rem;
	padding: .5rem .75rem;
	border-left: 2px solid var(--cm-accent);
	background: rgba(201, 168, 76, .04);
}

/* Uniform product images inside article column layouts */
.entry-content .wp-block-columns > .wp-block-column .wp-block-image {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 240px;
}

.entry-content .wp-block-columns > .wp-block-column .wp-block-image img {
	max-width: 200px !important;
	max-height: 240px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

/* Editorial images (standalone, not inside columns or product cards) */
.entry-content > .wp-block-image img {
	max-height: 450px;
	width: 100%;
	object-fit: cover;
}

/* =========================================================
   AFFILIATE BUTTONS — layout consistente fuera de tablas
   Hace que los botones [cm_amazon] aparezcan siempre como bloque
   centrado en su propia línea aunque el shortcode comparta <p>
   con texto adicional. En tablas comparativas se mantienen inline.
   ========================================================= */
.entry-content a.cm-btn-primary,
.entry-content a.cm-btn-secondary {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 1.5rem auto;
	text-align: center;
}

.cm-comparison-table a.cm-btn-primary,
.cm-comparison-table a.cm-btn-secondary,
.entry-content table a.cm-btn-primary,
.entry-content table a.cm-btn-secondary {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: .4rem .9rem !important;
	font-size: .8125rem !important;
}

/* =========================================================
   STICKY CTA MOBILE — auto-inyectado por [cm_amazon] (1ª instancia en single post)
   ========================================================= */
.cm-sticky-cta-wrapper {
	display: none;
}

@media (max-width: 768px) {
	.cm-sticky-cta-wrapper {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--cm-border);
		box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.07);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	}

	.cm-sticky-cta-inner {
		max-width: 720px;
		margin: 0 auto;
	}

	.cm-sticky-cta-btn {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 1rem !important;
		padding: 12px 18px !important;
	}

	body.single-post {
		padding-bottom: 72px;
	}
}