@layer components {
	.encuentro {
		min-block-size: 100vh;
		background: var(--bg-primary, #fff);
	}

	/* Hero */
	.encuentro__hero {
		position: relative;
		overflow: hidden;
		max-block-size: 420px;
		background: hsl(27 80% 55%);

		&-img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			object-position: center top;
			display: block;
		}
	}

	/* Body - dos columnas */
	.encuentro__body {
		display: grid;
		grid-template-columns: 1fr 400px;
		gap: 3rem;
		max-inline-size: 1100px;
		margin-inline: auto;
		padding: 3rem 2rem 4rem;
	}

	/* Columna izquierda - Info */
	.encuentro__info {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.encuentro__badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--color-tertiary-alpha-10, hsl(313, 54%, 48%, 0.1));
		color: var(--color-tertiary-dark, hsl(313, 54%, 38%));
		padding: 0.5rem 1rem;
		border-radius: 8px;
		font-weight: 700;
		font-size: 0.875rem;
		width: fit-content;
	}

	.encuentro__titulo {
		font-size: clamp(1.75rem, 4vw, 2.5rem);
		font-weight: 800;
		color: var(--text-primary, #111);
		line-height: 1.15;
		margin: 0;
	}

	.encuentro__subtitulo {
		font-size: clamp(1rem, 2vw, 1.2rem);
		color: var(--text-secondary, #6b7280);
		margin: -0.5rem 0 0;
		line-height: 1.5;
	}

	/* Detalles */
	.encuentro__detalles {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.encuentro__detalle {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;

		i {
			font-size: 1.25rem;
			color: var(--color-primary, hsl(27, 93%, 59%));
			margin-block-start: 0.15rem;
		}

		div {
			display: flex;
			flex-direction: column;
			gap: 0.1rem;
		}

		strong {
			font-size: 0.8125rem;
			text-transform: uppercase;
			letter-spacing: 0.04em;
			color: var(--text-tertiary, #9ca3af);
		}

		span {
			font-size: 0.95rem;
			color: var(--text-primary, #111);
		}
	}

	.encuentro__mapa-link {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-tertiary, hsl(313, 54%, 48%));
		text-decoration: none;
		margin-block-start: 0.25rem;
		transition: opacity var(--transition-base, 200ms ease);

		&:hover {
			opacity: 0.75;
		}
	}

	/* Agenda */
	.encuentro__agenda {
		h2 {
			font-size: 1.125rem;
			font-weight: 700;
			color: var(--text-primary, #111);
			margin: 0 0 1rem;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
		}

		li {
			display: flex;
			align-items: flex-start;
			gap: 0.75rem;
			font-size: 0.95rem;
			color: var(--text-secondary, #6b7280);
			line-height: 1.5;

			i {
				color: var(--color-secondary, hsl(349, 83%, 61%));
				font-size: 1.1rem;
				margin-block-start: 0.15rem;
				flex-shrink: 0;
			}
		}
	}

	/* WhatsApp */
	.encuentro__contacto {
		border-block-start: 1px solid var(--border-color, #e5e7eb);
		padding-block-start: 1.5rem;

		p {
			font-size: 0.875rem;
			color: var(--text-tertiary, #9ca3af);
			margin: 0 0 0.5rem;
		}
	}

	.encuentro__whatsapp {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: #25d366;
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		transition: opacity var(--transition-base, 200ms ease);

		&:hover {
			opacity: 0.8;
		}

		i {
			font-size: 1.25rem;
		}
	}

	/* Columna derecha - Formulario */
	.encuentro__registro {
		position: sticky;
		inset-block-start: 2rem;
		align-self: start;
	}

	.encuentro__form-card {
		background: white;
		border-radius: 16px;
		border: 1px solid var(--border-color, #e5e7eb);
		box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
		overflow: hidden;
	}

	.encuentro__form-header {
		background: var(--gradient-primary, linear-gradient(135deg, hsl(349, 83%, 61%), hsl(313, 54%, 48%)));
		padding: 1.5rem;
		color: white;

		h2 {
			font-size: 1.25rem;
			font-weight: 700;
			margin: 0 0 0.25rem;
		}

		p {
			font-size: 0.85rem;
			margin: 0;
			opacity: 0.9;
		}
	}

	.encuentro__form-card form {
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.encuentro__campo {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;

		label {
			font-size: 0.8125rem;
			font-weight: 600;
			color: var(--text-primary, #111);

			span {
				color: var(--color-secondary, hsl(349, 83%, 61%));
			}
		}

		input {
			padding: 0.65rem 0.85rem;
			border: 1.5px solid var(--border-color, #d1d5db);
			border-radius: 8px;
			font-size: 0.9rem;
			color: var(--text-primary, #111);
			transition: border-color var(--transition-base, 200ms ease), box-shadow var(--transition-base, 200ms ease);
			outline: none;

			&::placeholder {
				color: var(--text-tertiary, #9ca3af);
			}

			&:focus {
				border-color: var(--color-tertiary, hsl(313, 54%, 48%));
				box-shadow: 0 0 0 3px var(--color-tertiary-alpha-20, hsl(313, 54%, 48%, 0.2));
			}
		}
	}

	.encuentro__submit {
		margin-block-start: 0.5rem;
		justify-content: center;
		width: 100%;
	}

	.encuentro__privacidad {
		font-size: 0.75rem;
		color: var(--text-tertiary, #9ca3af);
		text-align: center;
		margin: 0;

		a {
			color: var(--color-tertiary, hsl(313, 54%, 48%));
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}

	/* Responsive */
	@media (max-width: 768px) {
		.encuentro__hero {
			max-block-size: 280px;
		}

		.encuentro__body {
			grid-template-columns: 1fr;
			gap: 2rem;
			padding: 2rem 1.25rem 3rem;
		}

		.encuentro__registro {
			position: static;
		}
	}
}