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

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

   Usa el HTML generado por el CÓDIGO N°8:
   .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: flex !important;
	align-items: center !important;
	justify-content: center !important;

	background-color: #01717a !important;
	border: 1px solid #01717a !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: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	white-space: normal !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-color: #005f66 !important;
	border-color: #005f66 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	outline: none !important;
}

.single-product #botones-destinos-container.raco-botones-destinos .raco-boton-destino:focus-visible {
	outline: 3px solid #003f44 !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;
		margin: 30px 0 !important;
		padding: 0 !important;
		width: 100% !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;
	}

	.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 .raco-boton-destino {
		font-size: 12px !important;
		padding: 8px 6px !important;
	}
}