/*
Theme Name:   Kadence Child Master
Description:  Child theme maestro y agnostico de nicho sobre Kadence, pensado para clonar sitios de afiliacion/AdSense en menos de 30 minutos.
Author:       Mateo Arias
Template:     kadence
Version:      1.0.33
Text Domain:  kadence-child
*/

/* ==========================================================================
   La paleta base, la tipografia y los espaciados viven en theme.json (nivel
   bloque) y en Kadence > Personalizar > Paleta Global (nivel tema). Aqui van
   los estilos de los componentes propios del tema (hero, tarjetas,
   calculadoras, productos...), que usan esas variables cuando existen.
   ========================================================================== */

/* Tabla comparativa responsive (scroll horizontal en movil sin romper el layout) */
.comparison-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--global-kb-spacing-md, 2rem);
}

.comparison-table-wrap table {
	min-width: 640px;
}

/* Aviso de afiliacion inyectado automaticamente por functions.php */
.affiliate-disclosure {
	font-size: 0.85rem;
	background: var(--global-palette7, #f5f5f5);
	border-left: 4px solid var(--global-palette1, #2a6df4);
	padding: 12px 16px;
	margin: 0 0 1.5rem;
}

/* Lista de categorias en portada (bloque nativo core/categories, siempre
   refleja las categorias reales de WordPress: cero mantenimiento por clon).
   El icono por categoria lo inyecta functions.php (seccion 8) segun el slug. */
.category-pill-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 0;
	margin: 0;
}

.category-pill-list li {
	margin: 0;
}

.category-pill-list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	min-width: 110px;
	padding: 1.25rem 1rem;
	border-radius: 14px;
	background: var(--global-palette7, #ffffff);
	border: 1px solid var(--global-palette9, var(--global-palette6, #e1e1e1));
	text-decoration: none;
	font-weight: 600;
	color: var(--global-palette2, #1a1a1a);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.category-pill-list__icon {
	display: inline-flex;
	color: var(--global-palette1, #e8600a);
	transition: color 0.15s ease;
}

.category-pill-list a:hover {
	background: var(--global-palette1, #e8600a);
	color: #fff;
	transform: translateY(-3px);
}

.category-pill-list a:hover .category-pill-list__icon {
	color: #fff;
}

/* Tarjeta de producto reutilizable (ver patterns/tarjeta-producto.php).
   Colores atados a la Paleta Global de Kadence, no a valores fijos, para
   que sigan coherentes si la cambias desde el Personalizador. */
.product-card {
	border: 1px solid var(--global-palette9, var(--global-palette6, #e1e4e8));
	border-radius: 12px;
	padding: 24px;
	background: var(--global-palette7, #ffffff);
	height: 100%;
}

.product-card__cta .wp-block-button__link {
	background-color: var(--global-palette1, #e8600a);
	color: #ffffff;
	font-weight: 600;
}

.product-card__cta .wp-block-button__link:hover {
	background-color: var(--global-palette2, #1a1a1a);
	color: #ffffff;
}

/* Grid responsive para varias tarjetas de producto seguidas en un articulo */
.product-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (max-width: 600px) {
	.product-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Franja de confianza (justo debajo del hero de portada) */
.trust-strip {
	gap: 0.6rem 1.75rem !important;
}

/* Doble clase: Kadence deja margen inferior en todos los parrafos menos el ultimo */
.trust-strip .trust-strip__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--global-palette8, #f5f5f4);
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--global-palette2, #1a1a1a);
}

.trust-strip__item::before {
	content: "\2713";
	color: var(--global-palette1, #e8600a);
	font-weight: 700;
}

/* ==========================================================================
   Home: hero oscuro, huecos de foto, bloque de autor y captacion de email
   ========================================================================== */
.hero-dark {
	background: linear-gradient(135deg, #111111 0%, #1a1a1a 60%, #26211d 100%);
	color: #f5f5f4;
	padding: 4rem 1.25rem;
}

/* Kadence aplica margenes y padding al contenedor de pagina: en la portada
   los bloques alignfull deben tocar los bordes y la cabecera. */
body.home .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.home .entry-content-wrap {
	padding: 0;
}

body.home .entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}

body.home .hero-dark.alignfull,
body.home .lead-magnet.alignfull {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.hero-dark__cols {
	gap: 2.5rem;
	margin-bottom: 0;
}

.hero-dark .hero-dark__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--global-palette1, #e8600a);
	border-radius: 999px;
	color: var(--global-palette1, #e8600a);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero-dark .hero-dark__title {
	color: #ffffff;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	margin: 0 0 1rem;
}

.hero-dark .hero-dark__lead {
	color: #d6d3d1;
	font-size: 1.15rem;
	margin: 0 0 1.75rem;
}

.hero-dark .wp-block-button__link.has-primary-background-color,
.lead-magnet .wp-block-button__link {
	color: #1a1a1a;
	font-weight: 700;
}

.hero-dark .is-style-outline .wp-block-button__link {
	color: #ffffff;
	border: 2px solid #ffffff;
	background: transparent;
	font-weight: 700;
}

.section-lead {
	color: var(--global-palette5, #6b7280);
	margin-bottom: 1.75rem;
}

.author-block {
	gap: 2.5rem;
	margin-bottom: 0;
}

.lead-magnet {
	background: linear-gradient(135deg, #1a1a1a 0%, #26211d 100%);
	color: #f5f5f4;
	padding: 4rem 1.25rem;
	border-top: 4px solid var(--global-palette1, #e8600a);
}

.lead-magnet .lead-magnet__title {
	color: #ffffff;
	font-weight: 800;
	margin-bottom: 0.75rem;
}

.lead-magnet .lead-magnet__lead {
	color: #d6d3d1;
	font-size: 1.1rem;
}

.lead-magnet__form-slot {
	max-width: 520px;
	margin: 1.75rem auto 1rem;
	padding: 1.5rem;
	border: 2px dashed #78716c;
	border-radius: 12px;
	color: #a8a29e;
	font-size: 0.9rem;
}

.lead-magnet__form-slot p {
	margin: 0;
}

/* Formulario de Brevo ([rem_brevo_form]): se adapta a la seccion oscura.
   Brevo pone estilos en linea, por eso los !important. */
.lead-magnet__form-slot:has(.rem-brevo) {
	padding: 0;
	border: 0;
}

.rem-brevo .sib-form,
.rem-brevo .sib-form-container,
.rem-brevo #sib-container {
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
}

.rem-brevo #sib-container * {
	font-family: inherit !important;
}

.rem-brevo .entry__label,
.rem-brevo .entry__choice,
.rem-brevo .entry__choice label,
.rem-brevo .sib-text-form-block,
.rem-brevo .sib-text-form-block p,
.rem-brevo .sib-optin p {
	color: #d6d3d1 !important;
	text-align: left !important;
}

.rem-brevo .entry__label {
	color: #ffffff !important;
	font-weight: 700 !important;
}

.rem-brevo .entry__field {
	border: 1px solid #78716c !important;
	border-radius: 8px !important;
	background: #ffffff !important;
}

.rem-brevo .entry__field .input,
.rem-brevo input.input {
	color: #1a1a1a !important;
	font-size: 1rem !important;
}

.rem-brevo .entry__specification,
.rem-brevo .entry__error {
	text-align: left !important;
}

.rem-brevo a {
	color: #ffffff !important;
	text-decoration: underline;
}

.rem-brevo .sib-form-block__button {
	width: 100%;
	justify-content: center;
	padding: 0.85rem 1.5rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--global-palette1, #e8600a) !important;
	color: #1a1a1a !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	text-align: center !important;
	cursor: pointer;
}

.rem-brevo .sib-form-block__button:hover {
	background: #ffffff !important;
}

.rem-brevo .sib-form-message-panel {
	max-width: 100% !important;
	border-radius: 8px !important;
	text-align: left;
}

.lead-magnet__legal {
	font-size: 0.78rem;
	color: #a8a29e;
}

.lead-magnet__legal a {
	color: #f5f5f4;
}

@media (max-width: 781px) {
	.hero-dark {
		padding: 2.5rem 1.25rem;
	}
}

/* Marca en cabecera: titulo condensado en mayusculas + lema tecnico */
.site-branding a.brand {
	gap: 0.7rem;
}

.site-branding .site-title {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

.site-branding .site-description {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette1, #e8600a);
	font-weight: 600;
}

/* Tarjetas de "Ultimos articulos" (imagen + titulo + extracto) */
.article-card {
	height: 100%;
}

.article-card p {
	color: var(--global-palette5, #6b7280);
	font-size: 0.95rem;
}

/* Portada: margen lateral en bloques anchos (el contenedor ya no lo da) */
body.home .entry-content > .alignwide {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.author-block .is-style-outline .wp-block-button__link {
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
	background: transparent;
	font-weight: 700;
}

/* Hover de botones del hero y del autor: texto siempre legible.
   Kadence impone su fondo en :hover con !important; sin esto el texto oscuro
   se queda sobre fondo carbon y desaparece. */
.hero-dark .wp-block-button__link:hover,
.hero-dark .wp-block-button__link:focus {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1a1a1a !important;
}

.hero-dark .is-style-outline .wp-block-button__link:hover,
.hero-dark .is-style-outline .wp-block-button__link:focus {
	background-color: var(--global-palette1, #e8600a) !important;
	border-color: var(--global-palette1, #e8600a) !important;
	color: #1a1a1a !important;
}

.author-block .is-style-outline .wp-block-button__link:hover,
.author-block .is-style-outline .wp-block-button__link:focus {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
}

/* Caja de aviso dentro de articulos (apanos, advertencias, notas del autor) */
.note-box {
	background: var(--global-palette8, #f5f5f4);
	border-left: 4px solid var(--global-palette1, #e8600a);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	font-size: 0.95rem;
}

/* Foto del hero: formato vertical, esquinas redondeadas y recorte controlado */
.hero-dark .hero-photo {
	margin: 0;
}

.hero-dark .hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: 16px;
}

@media (max-width: 781px) {
	.hero-dark .hero-photo img {
		aspect-ratio: 4 / 5;
	}
}

/* Hueco de foto con la ilustracion mientras no hay foto real (inc/fotos-pendientes.php) */
.rem-foto-ilustrada img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	box-sizing: border-box;
	padding: 6%;
	background: #fdf3ea;
	border-radius: 12px;
}

.rem-foto-ilustrada.is-cuadrada img {
	aspect-ratio: 1 / 1;
	padding: 12%;
}

.entry-content > .rem-foto-ilustrada.is-horizontal {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* Kadence pinta borde solido en toda imagen con has-custom-border, y WordPress
   pone esa clase con solo redondear las esquinas. Sin grosor salvo que el
   bloque lo fije (va en linea y gana a esta regla). */
.wp-block-image.has-custom-border img {
	border-width: 0;
}

/* Galerias de fotos propias en los articulos: mismas esquinas que el resto */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image,
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 12px;
}

/* Marcadores de foto (bloques de imagen con la imagen "Foto pendiente") */
.is-photo-pending img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sin borde claro alrededor de las fotos del hero ni de los marcadores */
.hero-dark .hero-photo img,
.is-photo-pending img {
	border: 0 !important;
}

/* Fecha de actualizacion al inicio de los articulos */
.post-updated {
	font-size: 0.85rem;
	color: var(--global-palette5, #6b7280);
	margin: 0 0 1rem;
}

/* ==========================================================================
   Plantilla de articulo: cinta de entradilla, cita de fuente y linea de datos
   (inspirada en la estructura de las fichas de sitios de nicho de motos)
   ========================================================================== */

/* Entradilla: cinta oscura con punta de flecha y acento naranja */
.entradilla {
	background: #26211d;
	color: #f5f5f4;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.55;
	padding: 1rem 3.25rem 1rem 1.25rem;
	margin: 0 0 1.5rem;
	border-left: 5px solid var(--global-palette1, #e8600a);
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}

@media (max-width: 600px) {
	.entradilla {
		padding-right: 2.25rem;
		font-size: 1rem;
		clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
	}
}

/* Cita de fuente oficial (texto del BOE, notas de fabricante...) */
blockquote.wp-block-quote.source-quote {
	background: var(--global-palette8, #f5f5f4);
	border: 0;
	border-left: 4px solid var(--global-palette1, #e8600a);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.25rem;
	margin: 1.25rem 0 1.5rem;
}

blockquote.wp-block-quote.source-quote p {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--global-palette2, #1a1a1a);
	margin: 0 0 0.5rem;
}

blockquote.wp-block-quote.source-quote cite {
	display: block;
	font-size: 0.82rem;
	font-style: normal;
	color: var(--global-palette5, #6b7280);
	margin-top: 0.4rem;
}

/* Linea de datos en cada producto: fichas con la informacion clave */
.product-card .product-card__specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0 0 0.9rem;
}

.product-card .product-card__specs li {
	margin: 0;
	padding: 0.25rem 0.7rem;
	background: var(--global-palette8, #f5f5f4);
	border: 1px solid var(--global-palette9, #e7e5e4);
	border-radius: 999px;
	font-size: 0.8rem;
	line-height: 1.4;
}

.product-card .product-card__specs strong {
	color: #c24e05;
	margin-right: 0.25rem;
}

/* Mientras la imagen destacada sea el marcador "foto pendiente", no se muestra
   en la cabecera del articulo (en las tarjetas de la portada si se ve). */
.single .post-thumbnail:has(img[src*="foto-pendiente"]) {
	display: none;
}

.single .entry-header:has(~ .post-thumbnail img[src*="foto-pendiente"]) {
	margin-top: 0;
}

/* ==========================================================================
   Calculadoras para repartidores
   ========================================================================== */
.rem-calc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.rem-calc-tabs a {
	padding: 0.45rem 1rem;
	border: 1px solid var(--global-palette9, #e7e5e4);
	border-radius: 999px;
	background: #ffffff;
	color: var(--global-palette2, #1a1a1a);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.rem-calc-tabs a.is-active {
	background: var(--global-palette2, #1a1a1a);
	border-color: var(--global-palette2, #1a1a1a);
	color: #ffffff;
}

.rem-calc {
	background: var(--global-palette8, #f5f5f4);
	border: 1px solid var(--global-palette9, #e7e5e4);
	border-radius: 14px;
	padding: 1.25rem;
	margin: 0 0 2rem;
}

.rem-calc fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
	min-width: 0;
}

.rem-calc legend {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0;
	margin-bottom: 0.6rem;
	color: var(--global-palette2, #1a1a1a);
}

.rem-calc__grid,
.rem-calc__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
}

.rem-calc__cols fieldset {
	background: #ffffff;
	border: 1px solid var(--global-palette9, #e7e5e4);
	border-radius: 10px;
	padding: 1rem;
	margin: 0;
}

.rem-calc__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.25rem;
}

.rem-calc__field[hidden] {
	display: none;
}

.rem-calc__field label {
	font-size: 0.88rem;
	font-weight: 600;
}

.rem-calc__field small {
	font-size: 0.75rem;
	color: var(--global-palette5, #6b7280);
}

.rem-calc__input {
	position: relative;
	display: flex;
}

.rem-calc input[type="text"],
.rem-calc select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid #a8a29e;
	border-radius: 8px;
	background: #ffffff;
	font-size: 1rem;
	color: var(--global-palette2, #1a1a1a);
}

.rem-calc__input input {
	padding-right: 4.2rem;
}

.rem-calc__unit {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8rem;
	color: var(--global-palette5, #6b7280);
	pointer-events: none;
}

.rem-calc input:focus,
.rem-calc select:focus {
	outline: 3px solid rgba(232, 96, 10, 0.35);
	border-color: var(--global-palette1, #e8600a);
}

.rem-calc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.rem-calc__btn {
	padding: 0.6rem 1.2rem;
	border: 2px solid var(--global-palette1, #e8600a);
	border-radius: 8px;
	background: var(--global-palette1, #e8600a);
	color: #1a1a1a;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}

.rem-calc__btn:hover,
.rem-calc__btn:focus {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #ffffff;
}

.rem-calc__btn.is-ghost {
	background: transparent;
	color: var(--global-palette2, #1a1a1a);
	border-color: #a8a29e;
}

.rem-calc__privacy,
.rem-calc__aviso {
	font-size: 0.78rem;
	color: var(--global-palette5, #6b7280);
	margin: 0.5rem 0 0;
}

.rem-calc__result {
	background: #1a1a1a;
	color: #f5f5f4;
	border-radius: 12px;
	padding: 1.25rem;
}

.rem-calc__empty {
	margin: 0;
	color: #d6d3d1;
}

.rem-calc__label {
	margin: 0;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #d6d3d1;
}

.rem-calc__big {
	margin: 0.15rem 0 0.75rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(2.4rem, 8vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
}

.rem-calc__big.is-pos {
	color: #4ade80;
}

.rem-calc__big.is-neg {
	color: #f87171;
}

.rem-calc__big small {
	font-size: 1rem;
	font-weight: 600;
	color: #d6d3d1;
}

.rem-calc__bar {
	display: flex;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: #3f3f46;
	margin-bottom: 0.6rem;
}

.rem-calc__seg.is-gas { background: #e8600a; }
.rem-calc__seg.is-moto { background: #f59e0b; }
.rem-calc__seg.is-otros { background: #a8a29e; }
.rem-calc__seg.is-benef { background: #4ade80; }

.rem-calc__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	font-size: 0.82rem;
	color: #d6d3d1;
}

.rem-calc__legend li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.rem-calc__legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.rem-calc__legend i.is-gas { background: #e8600a; }
.rem-calc__legend i.is-moto { background: #f59e0b; }
.rem-calc__legend i.is-otros { background: #a8a29e; }
.rem-calc__legend i.is-benef { background: #4ade80; }

.rem-calc__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.rem-calc__stat {
	background: #26211d;
	border-radius: 8px;
	padding: 0.65rem 0.8rem;
}

.rem-calc__stat span {
	display: block;
	font-size: 0.75rem;
	color: #d6d3d1;
}

.rem-calc__stat strong {
	display: block;
	font-size: 1.1rem;
	color: #ffffff;
}

.rem-calc__notes {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	font-size: 0.9rem;
}

.rem-calc__notes li {
	margin-bottom: 0.3rem;
}

.rem-calc__result .rem-calc__aviso {
	color: #a8a29e;
}

.rem-calc__result .rem-calc__btn.is-ghost {
	color: #f5f5f4;
	border-color: #78716c;
}

.rem-calc__prods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.rem-calc__prod {
	background: #26211d;
	border-radius: 10px;
	padding: 1rem;
}

.rem-calc__prod h3 {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	color: #ffffff;
}

.rem-calc__prod .rem-calc__stats {
	margin-bottom: 0;
}

.rem-calc__prod .rem-calc__stat {
	background: #1a1a1a;
}

.rem-calc__veredicto {
	margin: 0 0 0.75rem;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--global-palette1, #e8600a);
	background: #26211d;
	border-radius: 0 8px 8px 0;
}

@media (max-width: 640px) {
	.rem-calc__grid,
	.rem-calc__cols,
	.rem-calc__prods {
		grid-template-columns: 1fr;
	}
}

/* Tarjetas de herramientas en la portada */
.tools-section .tool-card {
	background: #1a1a1a;
	color: #f5f5f4;
	border-radius: 14px;
	padding: 1.5rem;
	height: 100%;
}

.tools-section .tool-card h3 {
	color: #ffffff;
	margin-top: 0;
}

.tools-section .tool-card p {
	color: #d6d3d1;
}

.tools-section .tool-card .wp-block-button__link {
	background: var(--global-palette1, #e8600a);
	color: #1a1a1a;
	font-weight: 700;
}

/* Calculadora de beneficio: retos y pedidos agrupados */
.rem-calc__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	cursor: pointer;
}

.rem-calc__check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-top: 0.1rem;
	accent-color: var(--global-palette1, #e8600a);
	flex-shrink: 0;
}

.rem-calc__retos[hidden] {
	display: none;
}

.rem-calc__sub {
	font-weight: 700;
	margin: 1rem 0 0.4rem;
	font-size: 0.92rem;
}

.rem-calc__sub span {
	font-weight: 400;
	color: var(--global-palette5, #6b7280);
}

.rem-calc__hint {
	font-size: 0.8rem;
	color: var(--global-palette5, #6b7280);
	margin: 0 0 0.6rem;
}

.rem-calc__tier {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.rem-calc__tier-n {
	font-size: 0.85rem;
	font-weight: 600;
}

.rem-calc__weeks-in {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
}

.rem-calc__weeks {
	list-style: none;
	padding: 0;
	margin: 0.4rem 0 1rem;
}

.rem-calc__weeks li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.3rem;
	padding: 0.5rem 0.8rem;
	background: #26211d;
	border-radius: 8px;
	font-size: 0.9rem;
}

.rem-calc__weeks strong {
	color: #4ade80;
}

@media (max-width: 640px) {
	.rem-calc__tier {
		grid-template-columns: 1fr 1fr;
	}

	.rem-calc__tier-n {
		grid-column: 1 / -1;
	}

	.rem-calc__weeks-in {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Escalones de retos: que quepa el numero en movil */
.rem-calc__tier .rem-calc__input input {
	padding-right: 5rem;
}

.rem-calc__tier .rem-calc__input:last-child input {
	padding-right: 2.2rem;
}

/* ==========================================================================
   Productos recomendados en las paginas de categoria
   ========================================================================== */
.rem-productos {
	margin: 0 0 2rem;
}

.rem-productos .rem-productos__titulo,
.rem-productos__articulos {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
}

.rem-productos__articulos {
	margin: 2rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 4px solid var(--global-palette1, #e8600a);
}

.rem-productos__aviso {
	font-size: 0.85rem;
	color: var(--global-palette5, #6b7280);
	margin: 0 0 1.25rem;
}

.rem-productos__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 700px) {
	.rem-productos__grid {
		grid-template-columns: 1fr;
	}
}

.rem-producto {
	display: flex;
	flex-direction: column;
}

.rem-producto h3 {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
}

.rem-producto__img {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 10px;
	margin-bottom: 0.9rem;
	overflow: hidden;
}

.rem-producto__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 0.5rem;
	box-sizing: border-box;
	border: 0;
}

.rem-producto__img img.is-icono,
.rem-producto__img img.is-placeholder {
	object-fit: cover;
	padding: 0;
}

.rem-producto__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
}

.rem-chip {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rem-chip.is-badge {
	background: #1a1a1a;
	color: #ffffff;
}

.rem-chip.is-probado {
	background: #dcfce7;
	color: #166534;
}

.rem-chip.is-sin-probar {
	background: #f5f5f4;
	color: #57534e;
	border: 1px solid #d6d3d1;
}

.rem-producto__texto {
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

.rem-producto__acciones {
	margin: auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.rem-btn {
	display: inline-block;
	align-self: flex-start;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	background: var(--global-palette1, #e8600a);
	color: #1a1a1a;
	font-weight: 700;
	text-decoration: none;
}

.rem-btn:hover,
.rem-btn:focus {
	background: #1a1a1a;
	color: #ffffff;
}

.rem-producto__articulo {
	font-size: 0.88rem;
}

/* Caja de afiliado de Fliits */
.rem-fliits {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	background: #1a1a1a;
	color: #ffffff;
}

.rem-fliits p {
	margin: 0;
}

.rem-fliits__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.35rem !important;
}

.rem-fliits__text {
	margin-bottom: 0.5rem !important;
}

.rem-fliits__note {
	font-size: 0.78rem;
	opacity: 0.75;
}

.rem-fliits__btn {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
}

.rem-fliits__btn:hover,
.rem-fliits__btn:focus {
	background: #ffffff;
	color: #1a1a1a;
}

@media (max-width: 640px) {
	.rem-fliits {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Fotos verticales dentro de un articulo: no ocupan todo el ancho */
.entry-content .wp-block-image.foto-vertical {
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

/* Ilustracion de producto como miniatura de articulo: se ve entera, sin recortes */
.post-thumbnail .post-thumbnail-inner {
	background: #fdf3ea;
}

.post-thumbnail img.is-icono-articulo {
	object-fit: contain !important;
}

/* La imagen del producto tambien lleva al enlace de afiliado */
.rem-producto__imglink {
	display: block;
}

.rem-producto__imglink img {
	transition: transform 0.2s ease;
}

.rem-producto__imglink:hover img,
.rem-producto__imglink:focus img {
	transform: scale(1.03);
}

/* Preguntas frecuentes: seccion separada del articulo, con una tarjeta por pregunta */
.entry-content h2.wp-block-heading:has(+ .rank-math-block) {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 2px solid #e7e5e4;
}

.entry-content h2.wp-block-heading:has(+ .rank-math-block)::before {
	content: "?";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: #e8600a;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
}

.rank-math-block .rank-math-list {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 1rem;
	padding: 1.1rem;
	background: #fdf3ea;
	border-radius: 16px;
	counter-reset: faq;
}

.rank-math-block .rank-math-list-item {
	counter-increment: faq;
	margin: 0;
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid #f0d9c6;
	border-left: 4px solid #e8600a;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
}

.rank-math-block .rank-math-list-item .rank-math-question {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
	font-size: 1.15rem !important;
	line-height: 1.35;
}

.rank-math-block .rank-math-question::before {
	content: counter(faq);
	flex: 0 0 auto;
	min-width: 1.6rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.8rem;
	text-align: center;
}

.rank-math-block .rank-math-answer {
	margin: 0;
	padding-left: 2.2rem;
	color: #44403c;
	font-size: 0.98rem;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.rank-math-block .rank-math-list {
		padding: 0.7rem;
	}

	.rank-math-block .rank-math-answer {
		padding-left: 0;
	}
}

/* Navegacion entre articulos: inferior llamativa y superior discreta */
.single .post-navigation {
	margin-top: 3rem;
}

.single .post-navigation::before {
	content: "Sigue leyendo";
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c24e05;
}

.single .post-navigation .nav-links {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.single .post-navigation .nav-links > div {
	margin: 0;
	max-width: none;
	width: auto;
}

.single .post-navigation .nav-links > div:only-child {
	grid-column: 1 / -1;
}

.single .post-navigation .nav-previous a,
.single .post-navigation .nav-next a {
	display: block;
	height: 100%;
	padding: 1.1rem 1.25rem;
	background: #fdf3ea;
	border: 1px solid #f0d9c6;
	border-left: 4px solid #e8600a;
	border-radius: 14px;
	color: #1a1a1a;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.single .post-navigation .nav-next a {
	text-align: right;
	border-left: 1px solid #f0d9c6;
	border-right: 4px solid #e8600a;
}

.single .post-navigation .nav-previous a:hover,
.single .post-navigation .nav-next a:hover,
.single .post-navigation .nav-previous a:focus,
.single .post-navigation .nav-next a:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(26, 26, 26, 0.12);
	color: #c24e05;
}

.single .post-navigation .post-navigation-sub {
	margin-bottom: 0.5rem;
}

.single .post-navigation .post-navigation-sub small {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.65rem;
	background: #fff;
	border-radius: 999px;
	color: #c24e05;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.single .post-navigation .nav-links {
		grid-template-columns: 1fr;
	}
}

/* Enlaces discretos arriba del articulo */
.rem-topnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.3rem 1.5rem;
	margin: 0 0 1.4rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid #ece9e6;
	font-size: 0.82rem;
	line-height: 1.4;
}

.rem-topnav a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6b645f;
	text-decoration: none;
}

.rem-topnav a:hover,
.rem-topnav a:focus {
	color: #c24e05;
	text-decoration: underline;
}

.rem-topnav .rem-topnav__next {
	margin-left: auto;
	text-align: right;
}

@media (min-width: 701px) {
	.rem-topnav a {
		max-width: 48%;
	}
}

/* Caja "Calcula tu beneficio real" al final de los articulos */
.rem-cta {
	margin: 3rem 0 0;
	padding: 1.6rem 1.5rem;
	background: #1a1a1a;
	border-left: 6px solid #e8600a;
	border-radius: 14px;
	color: #f5f5f4;
}

.rem-cta .rem-cta__title {
	margin: 0 0 0.5rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.rem-cta .rem-cta__text {
	margin: 0 0 1.1rem;
	color: #e7e5e4;
}

.rem-cta .rem-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.4rem;
	margin: 0;
}

.rem-cta .rem-cta__link {
	color: #fdba74;
	font-size: 0.92rem;
}

.rem-cta .rem-cta__link:hover,
.rem-cta .rem-cta__link:focus {
	color: #fff;
}

/* Calculadora de beneficio: el resultado va primero, y el detalle despues del formulario */
.rem-calc__result--top {
	margin-bottom: 1.25rem;
}

.rem-calc__resumen {
	margin: 0 0 0.25rem;
	color: #d6d3d1;
	font-size: 0.92rem;
}

.rem-calc__ejemplo {
	margin: 0.75rem 0 0;
	padding: 0.55rem 0.8rem;
	background: rgba(232, 96, 10, 0.18);
	border-left: 3px solid #e8600a;
	border-radius: 6px;
	color: #fed7aa;
	font-size: 0.88rem;
}

.rem-calc__detail {
	margin-top: 1.25rem;
}

.rem-calc__detail[hidden] {
	display: none;
}

.rem-calc__mini {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 50;
	transform: translateX(-50%);
	padding: 0.65rem 1.2rem;
	background: #1a1a1a;
	border: 2px solid #e8600a;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	color: #4ade80;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	cursor: pointer;
}

.rem-calc__mini[hidden] {
	display: none;
}

/* Ilustracion dentro de un articulo: centrada y sin ocupar todo el ancho */
.entry-content .wp-block-image.ilustracion-articulo {
	max-width: 460px;
	margin: 1.5rem auto;
}

.entry-content .wp-block-image.ilustracion-articulo img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}