/* =========================================================================
 * Rodando Van — Shortcodes
 * Todos los componentes de shortcodes propios. Conservan los nombres de
 * clase para compatibilidad con posts ya publicados.
 * ========================================================================= */

/* =========================================================================
 * CONTAINERS — flexbox + grid
 * ========================================================================= */
.flexbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--rv-space-6);
	padding: var(--rv-space-5) 0;
}

.contenedor-grid-recursos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 120px var(--rv-space-6);
	padding: 100px var(--rv-space-5) var(--rv-space-7);
	max-width: 1200px;
	margin: 0 auto;
	align-items: stretch;
}
@media (max-width: 992px) { .contenedor-grid-recursos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .contenedor-grid-recursos { grid-template-columns: 1fr; gap: 120px var(--rv-space-4); } }

/* =========================================================================
 * RV TARJETA PAÍS — versión hero (.item)
 * Shortcode [rv_tarjeta_pais]
 * ========================================================================= */
.item {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.2;
	background-size: cover;
	background-position: center;
	border-radius: var(--rv-radius-lg);
	overflow: hidden;
	transition: transform var(--rv-duration-md) var(--rv-ease);
	background-color: var(--rv-primary-soft);
}
.item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 30, 26, 0.2) 0%, rgba(15, 30, 26, 0.65) 100%);
	transition: background var(--rv-duration) var(--rv-ease);
}
.item:hover { transform: scale(1.03); }
.item:hover::before { background: linear-gradient(180deg, rgba(15, 30, 26, 0.1) 0%, rgba(15, 30, 26, 0.85) 100%); }
.item .rv-tarjeta-enlace {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
}
.item .content {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	padding: var(--rv-space-5);
	z-index: 1;
}
.item .content h1,
.item .content h2,
.item .content h3 {
	color: white;
	font-family: var(--rv-font-serif);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0;
	max-width: 100%;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* =========================================================================
 * CARD PAÍS — versión rica con descripción (.card-pais)
 * Shortcode [card_pais]
 * ========================================================================= */
.grid-paises {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--rv-space-5);
	padding: var(--rv-space-5) 0;
}

.card-pais-link-wrapper,
.card-pais-global-link {
	text-decoration: none !important;
	color: inherit !important;
	display: block;
	height: 100%;
}

.card-pais {
	background: white;
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius-lg);
	overflow: hidden;
	transition: all var(--rv-duration-md) var(--rv-ease);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-pais-link-wrapper:hover .card-pais,
.card-pais-global-link:hover .card-pais {
	transform: translateY(-5px);
	box-shadow: var(--rv-shadow-md);
	border-color: color-mix(in srgb, var(--rv-primary) 30%, var(--rv-line));
}

.card-pais-img {
	width: 100%;
	height: 240px;
	background-size: cover;
	background-position: center;
	background-color: var(--rv-primary-soft);
}

.card-pais-content {
	padding: var(--rv-space-5);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.card-pais-header {
	display: flex;
	align-items: center;
	gap: var(--rv-space-3);
	margin-bottom: var(--rv-space-3);
}

.card-pais-flag {
	font-size: 1.5rem;
	line-height: 1;
}

.card-pais-title {
	margin: 0;
	font-family: var(--rv-font-serif);
	font-size: var(--rv-text-xl);
	color: var(--rv-ink);
	font-weight: 700;
}

.card-pais-desc {
	font-size: var(--rv-text-sm);
	color: var(--rv-text);
	line-height: var(--rv-leading-normal);
	margin: 0 0 var(--rv-space-4);
}

.card-pais-footer {
	color: var(--rv-primary-dark);
	font-weight: 600;
	font-size: var(--rv-text-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--rv-space-2);
	margin-top: auto;
	margin-left: auto;
	transition: gap var(--rv-duration) var(--rv-ease);
}
.card-pais-link-wrapper:hover .card-pais-footer,
.card-pais-global-link:hover .card-pais-footer {
	gap: var(--rv-space-3);
	color: var(--rv-primary);
}
.card-pais .arrow {
	transition: transform var(--rv-duration) var(--rv-ease);
}
.card-pais-link-wrapper:hover .arrow,
.card-pais-global-link:hover .arrow {
	transform: translateX(4px);
}

/* =========================================================================
 * RECURSO — tarjeta con círculo arriba (.rv-tarjeta-recurso)
 * Shortcode [rv_recurso_tarjeta]
 * ========================================================================= */
.rv-container-recurso {
	width: 100%;
	display: flex;
}

.rv-tarjeta-link {
	text-decoration: none !important;
	display: flex;
	width: 100%;
}

.rv-tarjeta-recurso {
	background: white;
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius-xl);
	padding: 100px var(--rv-space-5) var(--rv-space-6);
	position: relative;
	text-align: center;
	transition: all var(--rv-duration-md) var(--rv-ease);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}
.rv-tarjeta-link:hover .rv-tarjeta-recurso {
	transform: translateY(-8px);
	box-shadow: var(--rv-shadow-md);
	border-color: color-mix(in srgb, var(--rv-primary) 30%, var(--rv-line));
}

.rv-tarjeta-circulo {
	position: absolute;
	top: -130px;
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	height: 250px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.rv-tarjeta-circulo img {
	width: 60%;
	height: auto;
}

.rv-tarjeta-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.rv-tarjeta-content h3 {
	color: var(--rv-ink);
	font-family: var(--rv-font-serif);
	font-size: var(--rv-text-xl);
	font-weight: 800;
	margin: 0 0 var(--rv-space-3);
	text-transform: uppercase;
	letter-spacing: var(--rv-tracking-tight);
}

.rv-tarjeta-content p {
	color: var(--rv-text);
	font-size: var(--rv-text-base);
	line-height: var(--rv-leading-normal);
	margin: 0;
	flex-grow: 1;
}

/* =========================================================================
 * SLIDER HOME — modernizado
 * Shortcode [slider_sudamerica]
 * ========================================================================= */
.rv-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--rv-ink);
}
.rv-slider .rv-slider-track {
	position: relative;
	aspect-ratio: 16 / 7;
	min-height: 480px;
	max-height: 80vh;
}
@media (max-width: 768px) {
	.rv-slider .rv-slider-track {
		aspect-ratio: 4 / 5;
		min-height: 520px;
	}
}

.rv-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity var(--rv-duration-lg) var(--rv-ease), transform 8s linear;
	will-change: opacity, transform;
}
.rv-slide.is-active {
	opacity: 1;
	transform: scale(1);
}

.rv-slider-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--rv-space-6);
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(15, 30, 26, 0.25) 0%,
		rgba(15, 30, 26, 0.45) 50%,
		rgba(15, 30, 26, 0.65) 100%
	);
}
.rv-slider-text {
	max-width: 900px;
	color: white;
	display: flex;
	flex-direction: column;
	gap: var(--rv-space-3);
}
.rv-slider-text .rv-eyebrow {
	font-family: var(--rv-font-sans);
	font-size: var(--rv-text-sm);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}
.rv-slider-text h1 {
	font-family: var(--rv-font-serif);
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--rv-tracking-tight);
	color: white;
	margin: 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.rv-slider-text h2,
.rv-slider-text .rv-subtitle {
	font-family: var(--rv-font-sans);
	font-size: clamp(1rem, 1.8vw, 1.375rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.95);
	margin: 0;
}
.rv-slider-cta {
	margin-top: var(--rv-space-4);
	pointer-events: auto;
	display: inline-flex;
	gap: var(--rv-space-3);
	justify-content: center;
}

/* Indicadores (dots) */
.rv-slider-dots {
	position: absolute;
	bottom: var(--rv-space-5);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--rv-space-2);
	z-index: 3;
}
.rv-slider-dots button {
	width: 32px;
	height: 3px;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	border-radius: var(--rv-radius-pill);
	cursor: pointer;
	padding: 0;
	transition: background var(--rv-duration) var(--rv-ease), width var(--rv-duration) var(--rv-ease);
}
.rv-slider-dots button:hover { background: rgba(255, 255, 255, 0.7); }
.rv-slider-dots button.is-active {
	background: white;
	width: 48px;
}

/* Flechas — visibles en desktop, ocultas en mobile (solo swipe) */
.rv-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: white;
	font-size: 1.2rem;
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rv-duration) var(--rv-ease), transform var(--rv-duration) var(--rv-ease);
}
.rv-slider-arrow:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-50%) scale(1.05);
}
.rv-slider-arrow.prev { left: var(--rv-space-5); }
.rv-slider-arrow.next { right: var(--rv-space-5); }
@media (max-width: 768px) {
	.rv-slider-arrow { display: none; }
}

/* Progress bar arriba */
.rv-slider-progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--rv-primary);
	z-index: 4;
	width: 0;
	transition: width 100ms linear;
}

/* =========================================================================
 * BOTÓN [boton]
 * ========================================================================= */
.btn-custom-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: var(--rv-space-5) 0;
}
.btn-custom {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--rv-space-3) !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: var(--rv-radius-pill) !important;
	background: var(--rv-primary) !important;
	color: white !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: var(--rv-text-sm) !important;
	border: none !important;
	cursor: pointer !important;
	transition: all var(--rv-duration) var(--rv-ease) !important;
	font-family: var(--rv-font-sans) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.btn-custom:hover {
	background: var(--rv-primary-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--rv-shadow) !important;
	color: white !important;
}
.btn-custom .dashicons {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* =========================================================================
 * CARRUSEL/GRID DE PRODUCTOS AFILIADOS (CPT affiliate_product)
 * Shortcodes [tarjetas_carrusel_productos] y [tarjetas_grid_productos]
 * ========================================================================= */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--rv-space-3) var(--rv-space-2);
	margin: 0;
}
.section-header h1,
.section-header h2 {
	margin: 0;
	font-size: var(--rv-text-2xl);
	font-family: var(--rv-font-serif);
}
.section-header > a {
	text-decoration: none;
}
.section-header .ver-todos {
	font-size: var(--rv-text-sm);
	font-weight: 600;
	color: var(--rv-primary);
	transition: color var(--rv-duration) var(--rv-ease);
}
.section-header .ver-todos:hover { color: var(--rv-primary-dark); }

.carousel {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	background-color: var(--rv-primary-tint);
	border-radius: var(--rv-radius);
	padding: var(--rv-space-4);
	gap: var(--rv-space-4);
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel .card { scroll-snap-align: start; }

.general-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
	gap: var(--rv-space-5);
	background-color: var(--rv-primary-tint);
	border-radius: var(--rv-radius);
	padding: var(--rv-space-4);
	justify-content: center;
}

.card {
	flex: 0 0 auto;
	width: 160px;
	margin: var(--rv-space-2);
	text-align: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.card-inner,
.card-inner-grid {
	aspect-ratio: 1 / 1;
	background: white;
	border-radius: var(--rv-radius);
	width: 100%;
	overflow: hidden;
	transition: transform var(--rv-duration) var(--rv-ease), box-shadow var(--rv-duration) var(--rv-ease);
	padding: var(--rv-space-3);
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-inner img,
.card-inner-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.card-title {
	margin-top: var(--rv-space-2);
	font-size: var(--rv-text-sm);
	font-weight: 600;
	color: var(--rv-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card:hover .card-inner,
.card:hover .card-inner-grid {
	transform: translateY(-4px);
	box-shadow: var(--rv-shadow);
}

@media (max-width: 768px) {
	.card { width: 140px; }
	.section-header h1, .section-header h2 { font-size: var(--rv-text-xl); }
}
@media (max-width: 480px) {
	.card { width: 120px; }
}

/* =========================================================================
 * TÍTULO BOOK (legacy compat)
 * ========================================================================= */
.title-book {
	font-family: var(--rv-font-serif);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--rv-ink);
	letter-spacing: var(--rv-tracking-tight);
}

/* =========================================================================
 * FILTRO AJAX (página /camperizacion/)
 * ========================================================================= */
.rv-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rv-space-2);
	padding: var(--rv-space-4) 0;
	justify-content: center;
}
.rv-filter-btn {
	padding: 0.5rem 1.1rem;
	background: white;
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius-pill);
	font-size: var(--rv-text-sm);
	font-weight: 500;
	color: var(--rv-text);
	cursor: pointer;
	transition: all var(--rv-duration) var(--rv-ease);
}
.rv-filter-btn:hover {
	background: var(--rv-primary-soft);
	border-color: var(--rv-primary);
	color: var(--rv-primary-dark);
}
.rv-filter-btn.is-active {
	background: var(--rv-primary);
	border-color: var(--rv-primary);
	color: white;
}
.rv-filter-results {
	min-height: 200px;
}
.rv-filter-loading {
	text-align: center;
	padding: var(--rv-space-7);
	color: var(--rv-muted);
}