@layer components {
	html {
		scroll-padding-top: 100px; /* Compensa la altura del header fijo al hacer click en anchors */
	}

	.funciones-container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 1.5rem 2rem;

		@media (max-width: 768px) {
			padding: 1.5rem 1rem;
		}
		.funciones-hero p {
			font-size: clamp(0.9rem, 2vw, 1.1rem);
			color: var(--text-secondary);
			margin-bottom: 1.5rem;
		}

		.funciones-toc {
			background: var(--bg-secondary);
			border-left: 4px solid var(--color-primary);
			padding: 1.5rem;
			border-radius: 0.5rem;
			margin-bottom: 3rem;

			h3 {
				color: var(--color-tertiary);
				margin-bottom: 1rem;
				font-size: clamp(1.25rem, 2.5vw, 1.5rem);
			}

			.toc-lista {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				a {
					/* display: flex; */
					align-items: center;
					font-weight: 600;
					/* border-radius: 0.375rem; */
					/* transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast); */

					display: inline-block;
					padding: 0.5rem 1rem;
					color: var(--text-secondary);
					border-radius: 99px;
					font-size: clamp(0.9375rem, 1.8vw, 1rem);
					border: 1px solid #e2e8f0;
					transition: all 0.2s;

					&:hover {
						background: var(--color-primary);
						color: white;
						border-color: var(--color-primary);
						transform: translateY(-2px);
					}
				}
			}
		}

		/* ===== CATEGORÍAS DE FUNCIONES ===== */
		.categoria-funciones {
			margin-bottom: 4rem;
			/* scroll-margin-top: 80px; */
			animation: fade-up linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 20%;

			.categoria-titulo {
				display: flex;
				align-items: center;
				gap: 0.75rem;
				font-size: clamp(1.5rem, 3vw, 1.875rem);
				color: var(--color-tertiary);
				margin-bottom: 1.5rem;
				padding-bottom: 0.5rem;
				border-bottom: 2px solid var(--color-primary);

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

			/* ===== ITEMS DE FUNCIÓN (Acordeón con <details>) ===== */
			.funcion-item {
				background: var(--bg-primary);
				border-radius: 0.5rem;
				/* box-shadow: var(--shadow); */
				margin-bottom: 1rem;
				/* transition: box-shadow var(--transition-base), transform var(--transition-fast); */
				transition: box-shadow var(--transition-base);

				/* border: 1px solid #e2e8f0;
				overflow: hidden; */

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

				&:hover {
					box-shadow: var(--shadow-lg);
				}

				&[open] {
					border-color: var(--color-primary);
					/* background: var(--bg-secondary);
					border-bottom: 1px solid var(--gray-200); */
					.funcion-header {
						background: #f0f9ff;
					}
					.chevron {
						transform: rotate(180deg);
					}
				}

				.funcion-header {
					display: flex;
					align-items: center;
					gap: 1rem;
					padding: 1.25rem;
					/* padding: 1.5rem 2rem; */
					cursor: pointer;
					list-style: none;
					/* user-select: none;
					transition: background var(--transition-base); */

					&::-webkit-details-marker {
						display: none; /* Oculta el triángulo nativo */
					}

					&:hover {
						background: var(--bg-secondary);
					}

					.icono-main {
						font-size: 1.25rem;
						color: var(--color-secondary);
						/* flex-shrink: 0;
						transition: color var(--transition-base), transform var(--transition-base); */
					}
					.titulo_sum {
						flex: 1;
						font-weight: 600;
						color: #334155;
						font-size: clamp(1.0625rem, 2vw, 1.25rem);
						/* line-height: 1.3; */
					}
					.chevron {
						transition: transform var(--transition-base);
						color: #94a3b8;
					}
				}

				.contenido {
					padding: 2rem;
					/* padding: 2rem; */
					/* color: #475569; */
					/* Animación suave al abrir */
					/* Nota: Animar height en details requiere 'interpolate-size' (muy nuevo) o hacks */
					/* Por ahora animamos opacidad */
					animation: slide-in var(--transition-slow) ease-out;

					p {
						margin-bottom: 1rem;
						/* font-size: clamp(0.9375rem, 1.8vw, 1rem); */
						/* color: var(--text-primary); */
						/* text-align: justify; */

						/* &:last-child {
							margin-bottom: 0;
						} */
					}

					.beneficio-box {
						background: var(--color-success-lighter);
						/* color: #065f46; */
						padding: 1rem;
						border-radius: 0.5rem;
						border-left: 4px solid var(--color-success);
						margin: 1rem 0;
						font-size: 0.95rem;

						strong {
							color: var(--color-success-dark);
						}
					}

					.check-list li {
						display: flex;
						gap: 0.5rem;
						margin-bottom: 0.5rem;

						i {
							color: #10b981;
						}
					}
				}

				@media (max-width: 768px) {
					.funcion-header {
						padding: 1rem 1.5rem;
						gap: 0.5rem;

						.funcion-icono {
							font-size: 1.25rem;
						}

						.chevron-toggle {
							font-size: 1rem;
						}
					}

					.funcion-contenido {
						padding: 1.5rem;
					}
				}
			}

			/* ===== ANIMACIONES ===== */
			@keyframes fade-up {
				from {
					opacity: 0;
					transform: translateY(50px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			@keyframes slide-in {
				from {
					opacity: 0;
					transform: translateY(-5px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		}
	}

	/* ===== SECCIÓN DE VIDEO ===== */
	.video-section {
		max-width: 90%;
		margin: 0 auto clamp(3rem, 4vw, 4rem);
		text-align: center;

		.video-wrapper {
			position: relative;

			padding-bottom: 56.25%; /* Aspect ratio 16:9 */
			height: 0;
			overflow: hidden;
			border-radius: 1rem;
			box-shadow: var(--shadow-xl);
			background: var(--gray-900);
			margin: 1.5rem 0;

			iframe {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border-radius: 1rem;
			}
		}
	}
}