.banana-hero-cta-primary:hover {
	background: #E84F4F;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255,107,107,0.45);
}
.banana-hero-cta-secondary:hover {
	border-color: rgba(255,255,255,0.9);
	background: rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
	/* OJO: no tocar height/min-height/padding de .banana-hero aca. El fondo (video o
	   imagen) usa container queries (container-type:size en el wrapper, cqh/cqw en el
	   iframe/video) que necesitan que la seccion tenga una altura DEFINIDA para
	   funcionar - forzar height:auto rompe el fondo. El clamp(560px, 56.25vw, 82vh)
	   inline ya resuelve a un piso fijo de 560px en mobile/tablet (56.25vw < 560px por
	   debajo de ~995px de ancho), asi que solo hace falta achicar la tipografia para
	   que el contenido entre comodo dentro de esos 560px.
	*/
	.banana-hero-tagline {
		font-size: 9px !important;
		padding: 6px 16px !important;
		margin-bottom: 24px !important;
	}
	.banana-hero-tagline-text {
		display: block;
		text-wrap: balance;
	}
	.banana-hero-title {
		font-size: 44px !important;
		margin-bottom: 18px !important;
	}
	.banana-hero-subtitle {
		font-size: 15px !important;
		margin-bottom: 32px !important;
	}
	.banana-hero-ctas a {
		padding: 14px 32px !important;
		font-size: 12px !important;
	}
	.banana-hero-scroll-indicator {
		display: none !important;
	}
}