/* ============================================================
   cedares — Componente · Aviso sobre derechos (reutilizable)
   Figma: 26:434 (desktop) · 161:762 (móvil).
   Móvil: label sobre texto (columna), tipografía grande.
   Desktop (>=1024px): icono+label a la izquierda, texto a la derecha (fila).
   ============================================================ */

/* Contenedor de sección (ancho + padding). Reutilizable en cualquier plantilla. */
.aviso-section {
	max-width: 1400px;
	margin-inline: auto;
	padding: 40px 30px; /* móvil (Figma 83:342) */
}

/* --- Caja del aviso --- */
.aviso-derechos {
	border-radius: 18px;
	background: rgba(115, 61, 137, 0.2); /* morado 20% */
	padding: 24px;
	display: flex;
	flex-direction: column; /* móvil: label sobre texto */
	gap: 20px;
}

.aviso-derechos__head {
	flex: 0 0 auto;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* si el label no cabe (≤360), baja en vez de desbordar */
	gap: 10px 12px; /* móvil */
	color: var(--ced-amarillo);
	font-family: var(--ced-font-base);
	font-weight: 500;
	/* Fluido: ~13px en 220 → 22px tope. Evita que el título se salga en angostos. */
	font-size: clamp(0.8125rem, 4.4vw, 22px);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* El label rompe entre (y si hace falta, dentro de) palabras: nunca se sale. */
	overflow-wrap: anywhere;
}

.aviso-derechos__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aviso-derechos__ico {
	flex: 0 0 auto;
	width: 24px; /* móvil */
	height: 24px;
}

.aviso-derechos__text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	/* Fluido: ~14px en 360 → 18px tope (UX legible sin verse enorme). */
	font-size: clamp(0.875rem, 3.9vw, 18px);
	line-height: 1.65;
	letter-spacing: 0.01em;
	text-align: left; /* móvil: sin justificado (evita ríos en columnas angostas) */
	overflow-wrap: break-word; /* el email no fuerza scroll horizontal */
	color: rgba(255, 255, 255, 0.85);
}

.aviso-derechos__text a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: break-word;
}

/* Móvil pequeño (<=480px): caja más compacta para ganar ancho útil. La
   tipografía ya escala sola con clamp(), sin saltos duros. */
@media (max-width: 480px) {
	.aviso-section {
		padding-inline: 24px;
	}

	.aviso-derechos {
		padding: 20px;
	}
}

/* ============================================================
   Desktop (>=1024px) — Figma 26:434 (fila; tipografía más compacta).
   ============================================================ */
@media (min-width: 1024px) {
	.aviso-section {
		padding: 20px 112px 60px;
	}

	.aviso-derechos {
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
	}

	.aviso-derechos__head {
		gap: 8px;
		font-size: 16px;
		white-space: nowrap;
	}

	.aviso-derechos__ico {
		width: 18px;
		height: 18px;
	}

	.aviso-derechos__text {
		font-size: 14px;
		text-align: justify; /* desktop: columna ancha, el justificado luce bien */
	}
}