/* =============================================================================
   EL RACO EXPERIENCE
   CÓDIGO N°7
   Botones ¿Cómo será tu viaje?, Tours en Chile y Destinos Nacionales

   Archivo:
   07-botones-como-sera-tu-viaje-tours-en-chile-destinos-nacionales.css

   Usa el HTML generado por el CÓDIGO N°7:
   #botones-destinos-container
   .raco-botones-destinos
   .raco-boton-destino
   ============================================================================= */

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 8px !important;

	width: 100% !important;
	max-width: 1180px !important;

	margin: 40px auto 40px auto !important;
	padding: 0 !important;

	clear: both !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
	width: 100% !important;
	min-height: 48px !important;
	height: auto !important;

	margin: 0 !important;
	padding: 10px 20px !important;
	float: none !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	background: linear-gradient(180deg, #07868c 0%, #01717a 100%) !important;
	border: 1px solid rgba(1, 113, 122, 0.95) !important;
	border-radius: 6px !important;

	color: #ffffff !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;

	box-shadow: 0 8px 18px rgba(1, 113, 122, 0.13) !important;
	text-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	white-space: normal !important;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease !important;
}

/* ==========================================================================
   HOVER Y FOCO
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:hover,
.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:focus {
	background: linear-gradient(180deg, #006f77 0%, #005f66 100%) !important;
	border-color: #005f66 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: 0 10px 24px rgba(1, 113, 122, 0.22) !important;
	transform: translateY(-1px) !important;
}

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:focus-visible {
	outline: 3px solid rgba(1, 113, 122, 0.28) !important;
	outline-offset: 3px !important;
}

/* ==========================================================================
   SEGURIDAD CONTRA ESTILOS DE ASTRA / WOOCOMMERCE
   ========================================================================== */

.single-product #botones-destinos-container.raco-botones-destinos a,
.single-product #botones-destinos-container.raco-botones-destinos a:visited,
.single-product #botones-destinos-container.raco-botones-destinos a:hover,
.single-product #botones-destinos-container.raco-botones-destinos a:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {
	.single-product #botones-destinos-container.raco-botones-destinos {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin: 40px auto 40px auto !important;
		padding: 0 !important;
	}

	.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
		padding: 10px 12px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 768px) {
	.single-product #botones-destinos-container.raco-botones-destinos {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;

		width: 100% !important;
		max-width: 100% !important;

		/*
		   Ajuste móvil:
		   El espacio superior viene principalmente del bloque anterior.
		   Por eso se usa margen superior negativo solo en móvil.
		*/
		margin: -42px 0 16px 0 !important;
		padding: 0 !important;

		clear: both !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 2 !important;
	}

	.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
		min-height: 44px !important;
		padding: 10px 8px !important;
		font-size: 13px !important;
		line-height: 1.15 !important;
		border-radius: 7px !important;
	}

	.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:nth-child(1) {
		grid-column: 1 / -1 !important;
	}
}

/* ==========================================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================================== */

@media (max-width: 480px) {
	.single-product #botones-destinos-container.raco-botones-destinos {
		margin: -56px 0 14px 0 !important;
		gap: 7px !important;
	}

	.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino {
		min-height: 42px !important;
		font-size: 12px !important;
		padding: 8px 6px !important;
	}
}