@layer components {
	/* ===== INTRO SECTION ===== */
	.intro-section {
		max-width: 85%;
		margin: clamp(1.5rem, 2.5vw, 2rem) auto;
		padding: 0 clamp(1rem, 3vw, 2rem);

		p {
			font-size: clamp(0.95rem, 1.8vw, 1.05rem);
			line-height: 1.8;
			color: var(--text-primary);
			margin-bottom: 1.25rem;
			text-align: justify;

			strong {
				color: var(--color-primary);
			}
		}
	}

	.cta-pre-videos {
		text-align: center;
		max-width: 700px;
		margin: 0 auto clamp(1rem, 2vw, 1.5rem);
		padding: clamp(0.75rem, 1.5vw, 1rem);
		background: linear-gradient(135deg, hsl(210, 100%, 97%) 0%, hsl(195, 100%, 98%) 100%);
		border-radius: 12px;
		border: 2px dashed var(--color-primary);

		p {
			font-size: clamp(1rem, 2vw, 1.1rem);
			color: var(--text-primary);
			margin-bottom: 1rem;
		}
	}

	.video-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); /* Ajuste mínimo a 320px para mejor legibilidad 280px*/
		gap: clamp(1.5rem, 3vw, 2.5rem);
		max-width: 1500px;
		margin: 0 auto clamp(2rem, 5vw, 4rem);
		padding: 0 clamp(1rem, 3vw, 2rem);
		container: video-grid / inline-size;

		.video-card {
			all: unset;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 1rem;
			overflow: hidden; /* Para el zoom de la imagen */
			cursor: pointer;
			box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
			transition: translate 0.3s ease, box-shadow 0.3s ease;
			height: 100%;

			&:hover,
			&:focus-visible {
				translate: 0 -6px;
				box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
				z-index: 1; /* Que se eleve sobre hermanos si hay overlap */
			}

			&:hover {
				img {
					scale: 1.05;
				}

				.play-icon {
					background: var(--color-primary);
					scale: 1.1;
				}
			}

			&:focus-visible {
				outline: 2px solid var(--color-primary);
				outline-offset: 4px;
			}

			.thumbnail {
				position: relative;
				aspect-ratio: 16 / 9;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: scale 0.5s ease;
					/* transition: transform 0.4s ease; */
					display: block;
				}

				.play-icon {
					position: absolute;
					inset: 0;
					margin: auto;
					width: 3.5rem;
					height: 3.5rem;
					background: rgba(0, 0, 0, 0.4);
					backdrop-filter: blur(4px);
					border-radius: 50%;
					color: white;
					display: grid;
					place-items: center;
					font-size: 1.25rem;
					transition: background 0.3s, scale 0.3s;

					/* Triangulito ajuste visual */
					padding-left: 4px;
				}

				.badge {
					position: absolute;
					top: clamp(8px, 2vw, 12px);
					right: clamp(8px, 2vw, 12px);
					background: var(--color-primary);
					color: var(--text-on-dark);
					padding: clamp(4px, 1vw, 6px) clamp(10px, 2vw, 14px);
					border-radius: 20px;
					font-size: clamp(0.75rem, 1.5vw, 0.85rem);
					font-weight: 600;
					text-transform: uppercase;
					letter-spacing: 0.5px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

					z-index: 2;

					&.badge-intermediate {
						background: var(--color-secondary);
					}

					&.badge-advanced {
						background: var(--color-cuarto);
					}

					&.badge-lab {
						background: var(--color-tertiary);
					}

					small {
						opacity: 0.85;
						font-weight: 500;
						/* margin-left: 4px; */
						/* text-transform: none; */
					}
				}
			}

			.content {
				padding: clamp(1.25rem, 3vw, 1.75rem);
				/* display: flex; */
				/* flex-direction: column; */
				/* gap: 1.25rem; */
				flex: 1;

				h2 {
					margin: 0;
					/* margin-bottom: clamp(0.75rem, 2vw, 1rem); */
					font-size: clamp(1.1rem, 2.2vw, 1.3rem);
					font-weight: 600;
					color: #333;
					line-height: 1.3;

					/* .sihowin_title {
					display: block;
					margin-bottom: 0.25rem;
				} */
				}

				.details {
					font-size: 0.95rem;
					color: var(--text-muted);
					border-bottom: 1px solid #e2e8f0;
					padding-bottom: 1rem;

					strong {
						color: var(--text-main);
						display: block;
						margin-bottom: 0.25rem;
					}
					p {
						margin: 0;
						line-height: 1.5;
					}
				}

				.features {
					strong {
						display: block;
						font-size: 0.9rem;
						color: var(--text-main);
						margin-bottom: 0.75rem;
					}

					ul li {
						display: flex;
						align-items: flex-start;
						gap: 0.6rem;
						font-size: 0.9rem;
						color: var(--text-muted);
						margin-bottom: 0.6rem;
						line-height: 1.4;

						i {
							color: var(--success);
							flex-shrink: 0;
							margin-top: 2px;
						}
					}
				}

				.benefits {
					margin-top: auto; /* Empuja esto siempre al final de la tarjeta */

					strong {
						font-size: 0.9rem;
						color: var(--text-main);
					}

					p {
						background: #f0fdf4; /* Verde muy claro */
						border-left: 3px solid var(--success);
						padding: 0.75rem;
						border-radius: 0.5rem;
						color: #15803d; /* Verde oscuro texto */
						font-size: 0.85rem;
						line-height: 1.6;
						margin-top: 0.5rem;
					}
				}
			}
		}
	}

	@container video-grid (max-width: 400px) {
		.video-card .content {
			padding: 1rem;
		}
		.video-card h2 {
			font-size: 1.1rem;
		}
		.video-features ul li {
			font-size: 0.85rem;
		}
	}

	/* ===== COMPARISON TABLE ===== */
	.comparison-table-section {
		max-width: 1200px;
		margin: clamp(1.33rem, 2.3vw, 2rem) auto clamp(3rem, 5vw, 4rem);
		padding: 0 clamp(1rem, 3vw, 2rem);

		.section-subtitle {
			font-size: clamp(1rem, 2vw, 1.15rem);
			color: var(--text-secondary);
			text-align: center;
			margin-bottom: clamp(1rem, 2vw, 1.5rem);
		}

		.comparison-table {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			width: 100%;
			border-collapse: collapse;
			font-size: clamp(0.875rem, 1.6vw, 0.95rem);

			thead {
				background: var(--gradient-primary);
				color: var(--text-on-dark);

				th {
					padding: clamp(1rem, 2.5vw, 1.5rem);
					text-align: left;
					font-weight: 600;
					font-size: clamp(0.95rem, 1.8vw, 1.05rem);

					&:first-child {
						width: 40%;
					}

					&.highlight-column {
						text-align: center;
					}
				}
			}

			tbody {
				tr {
					border-bottom: 1px solid var(--gray-200);
					transition: background-color 0.2s ease;

					&:hover {
						background: hsl(210, 100%, 98%);
					}

					&.highlight-row {
						background: hsl(45, 100%, 98%);

						&:hover {
							background: hsl(45, 100%, 96%);
						}
					}

					td {
						padding: clamp(0.875rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem);
						text-align: left;

						&:not(:first-child) {
							text-align: center;
						}

						i.text-success {
							color: var(--color-success);
							font-size: 1.25rem;
						}

						i.text-muted {
							color: var(--gray-400);
							font-size: 1.25rem;
							opacity: 0.5;
						}
					}
				}
			}
		}
	}

	/* ===== FAQ SECTION ===== */
	.faq-section {
		max-width: 1200px;
		margin: auto;
		border-radius: 16px;

		.faq-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
			gap: clamp(1.5rem, 3vw, 2rem);
			margin-top: clamp(1.5rem, 3vw, 2rem);

			.faq-item {
				background: var(--bg-primary);
				border-radius: 12px;
				padding: clamp(1.5rem, 3vw, 2rem);
				box-shadow: var(--shadow);
				transition: transform 0.3s ease, box-shadow 0.3s ease;

				&:hover {
					transform: translateY(-4px);
					box-shadow: var(--shadow-lg);
				}

				h3 {
					display: flex;
					align-items: center;
					gap: 0.75rem;
					font-size: clamp(1rem, 2vw, 1.15rem);
					color: var(--text-primary);
					margin-bottom: 0.75rem;
					font-weight: 600;

					i {
						color: var(--color-primary);
						font-size: clamp(1.25rem, 2.5vw, 1.5rem);
						flex-shrink: 0;
					}
				}

				p {
					font-size: clamp(0.875rem, 1.6vw, 0.95rem);
					line-height: 1.7;
					color: var(--text-secondary);
					margin: 0;

					strong {
						color: var(--text-primary);
					}

					br {
						margin-bottom: 0.5rem;
					}
				}
			}
		}
	}

	/* Video Content */

	/* Video Dialog (Modal) */
	.video-dialog {
		max-width: min(95vw, 1400px);
		width: 100%;
		border-radius: 1rem;
		background: #1a1a1a;
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
		transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete;
		animation: fade-out 0.3s forwards;

		&[open] {
			animation: fade-in 0.3s forwards;
		}

		&::backdrop {
			background: rgba(0, 0, 0, 0.8);
			backdrop-filter: blur(5px);
			animation: fade-in 0.3s forwards;
		}

		header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: clamp(0.5rem, 1vw, 0.75rem);
			background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
			color: var(--text-on-dark);

			h3 {
				font-size: 1.1rem;
			}

			button {
				font-size: 1.5rem;
				padding: 0.5rem;

				&:hover {
					color: var(--primary);
				}
			}
		}

		.aspect-ratio {
			aspect-ratio: 16/9;
			iframe {
				width: 100%;
				height: 100%;
				border: none;
			}
		}
	}

	/* ===== RESPONSIVE DESIGN ===== */
	@media (max-width: 768px) {
		.comparison-table-section {
			.comparison-table {
				font-size: 0.8rem;

				thead th,
				tbody td {
					padding: 0.75rem 0.5rem;
				}
			}
		}

		.faq-section .faq-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 480px) {
		.video-grid .video-card {
			.video-badge {
				font-size: 0.7rem;
				padding: 4px 8px;

				.duration {
					display: block;
					margin-top: 2px;
				}
			}
		}
	}

	/* Container queries */
	@container (max-width: 600px) {
		.video-content {
			.video-description {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
}