/* Ajustes para celular y tablet */
@media screen and (max-width: 768px) {
	/* Espaciados generales */
	.container {
		padding: 40px 15px;
	}

	.section-title {
		font-size: 2rem;
		margin-bottom: 30px;
	}

	/* Menu en celular */
	.navbar {
		flex-direction: row;
		justify-content: space-between;
		gap: 15px;
		padding: 15px;
		position: relative;
	}

	.btn-menu {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	nav {
		display: none;
		position: absolute;
		top: 75px;
		left: 15px;
		right: 15px;
		background-color: var(--bg-tarjetas);
		border: 1px solid #2a2b35;
		border-radius: 8px;
		padding: 15px;
		z-index: 2000;
	}

	nav.activo {
		display: block;
	}

	nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}

	nav ul li a {
		display: block;
		margin: 0;
		padding: 12px;
	}

	/* Portada */
	#hero {
		height: auto;
		padding: 100px 20px 60px 20px;
	}

	.hero-content h1 {
		font-size: 2.4rem;
	}

	/* Tarjetas en una columna */
	.grid-beneficios, .grid-clases {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.clase-card {
		padding: 30px 20px;
	}

	/* Planes */
	.grid-planes {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	/* Promos */
	.grid-promos {
		flex-direction: column;
		align-items: center;
		gap: 25px;
	}

	.plan-card {
		width: 100%;
		max-width: 340px;
		min-height: auto;
		padding: 35px 20px;
	}

	/* Horarios */
	.horarios-flex {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.horario-card {
		width: 100%;
		max-width: 340px;
		height: auto;
		padding: 40px 20px;
	}
	
	.rango-horas {
		font-size: 1.8rem;
	}

	/* Testimonios */
	.grid-testimonios {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Contacto */
	.contacto-flex {
		flex-direction: column-reverse;
		gap: 30px;
	}

	.contacto-texto {
		text-align: center;
	}

	.contacto-grafica {
		width: 100%;
		display: flex;
		justify-content: center;
		max-width: 100%;
	}

	.img-contacto-info {
		max-width: 100%;
		max-height: 320px;
	}

	#contacto h2 {
		font-size: 1.8rem;
	}

	/* WhatsApp flotante */
	.wsp-flotante {
		width: 50px;
		height: 50px;
		bottom: 20px;
		right: 20px;
		font-size: 26px;
	}

	.chat-panel {
		right: 20px;
		bottom: 85px;
		width: calc(100% - 40px);
	}

	/* Footer */
	.footer-content {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	.footer-links {
		justify-content: center;
	}

	/* Detalle de maquinas */
	#nombre-maquina {
		font-size: 2rem;
	}
	
	.info-maquina {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
	
	.consejo-info {
		grid-column: span 1 !important;
	}
	
	.video-maquina {
		min-height: 200px;
	}

	/* Aviso flotante */
	.toast-notificacion {
		width: calc(100% - 30px);
		top: auto;
		bottom: 85px; /* Queda arriba del boton de WhatsApp */
		left: 15px;
		right: -100%;
		transition: bottom 0.4s ease, right 0.4s ease;
	}
	
	.toast-notificacion.mostrar {
		right: 15px;
	}
}