main {
	width: clamp(300px, 90%, 1500px);
	padding: clamp(2rem, 2vw, 2rem) 0;
}

.producto-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	align-items: flex-start;

	margin-bottom: clamp(1rem, 2vw, 3rem);
	padding: clamp(1rem, 2vw, 2rem);

	/* Animación de entrada */
	&.fade-in {
		opacity: 0;
		animation: fadeIn 1s ease forwards;
	}

	/* Artículo a la izquierda */
	article {
		/* Flex para alinear imagen a la izq y texto a la der */
		display: flex;
		gap: clamp(1rem, 2vw, 2rem);
		align-items: flex-start;

		img {
			max-width: clamp(200px, 50%, 300px);
			height: auto;
			border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
		}

		.text-block {
			/* Para que el texto no se desborde */
			max-width: 100%;

			h2 {
				font-size: clamp(1.2rem, 2vw, 1.5rem);
				color: #333;
				margin-bottom: clamp(0.5rem, 1vw, 1rem);
			}

			.link_sihowin {
				text-decoration: underline;
				color: #007bff;
			}

			p {
				line-height: 1.6;
				text-align: justify;
				color: #555;
				margin-bottom: clamp(0.5rem, 1vw, 1rem);
				font-size: clamp(0.875rem, 1.5vw, 1rem);
			}

			ul {
				list-style-type: disc;
				padding-left: 1.2em;
				li {
					font-size: clamp(0.875rem, 1.5vw, 1rem);
					margin-bottom: 0.5em;
					color: #555;
				}
			}
		}
	}

	/* Columna del video a la derecha */
	.video-col {
		display: flex;
		align-items: center;
		justify-content: center;

		iframe {
			width: 100%;
			aspect-ratio: 16/9; /* Mantiene proporción sin media queries */
			border: none;
			border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
		}
	}
}

/* Botón rojo (Ver más) */
.btn-red {
	background-color: #dc3545;
	color: #fff;
	border: none;
	padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
	border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
	font-size: clamp(0.875rem, 1.5vw, 1rem);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s ease;
	width: fit-content;

	&:hover {
		background-color: #b52a37;
	}
}

/* Animación fadeIn */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}