/**
 * @layer utilities — landing de un área de práctica.
 *
 * `color`/`text-decoration`/`font-size`/`font-family` con !important: ver la
 * nota en buttons.css — WordPress imprime color, tipografía y tamaño de
 * a/h1-h6 como CSS global sin @layer.
 */

@layer utilities {

	.area-hero {
		padding-block: var(--space-8) var(--space-7);
		border-bottom: 1px solid var(--c-ink-200);
	}

	.area-hero .eyebrow {
		margin: 0 0 var(--space-3);
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-accent-600);
	}

	.area-hero h1 {
		margin: 0 0 var(--space-4);
	}

	.area-hero__intro {
		max-width: var(--measure-max);
		font-size: var(--text-lg);
		color: var(--c-ink-700);
	}

	.area-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-block: var(--space-8);
	}

	@media (width >= 1024px) {
		.area-layout {
			grid-template-columns: 8fr 3fr;
			align-items: start;
			gap: var(--space-9);
		}
	}

	.area-seccion {
		padding-block: var(--space-7);
		border-top: 1px solid var(--c-ink-200);
	}

	.area-seccion:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.area-seccion h2 {
		font-size: var(--text-xl) !important;
		margin-bottom: var(--space-5);
	}

	.area-seccion--editor :where(p, ul, ol, blockquote) {
		max-width: var(--measure-max);
	}

	/* Listas con filete (servicios, casos típicos) */

	.lista-filetes {
		display: flex;
		flex-direction: column;
	}

	.lista-filetes li {
		padding-block: var(--space-4);
		border-top: 1px solid var(--c-ink-200);
	}

	.lista-filetes li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.lista-filetes h3 {
		font-size: var(--text-base) !important;
		font-family: var(--font-body) !important;
		font-weight: 600 !important;
		margin: 0 0 var(--space-1);
	}

	.lista-filetes li p {
		margin: 0;
		color: var(--c-ink-500);
	}

	.lista-filetes--simple li {
		color: var(--c-ink-700);
	}

	/* FAQ */

	.faq-lista {
		display: flex;
		flex-direction: column;
	}

	.faq-item {
		padding-block: var(--space-4);
		border-top: 1px solid var(--c-ink-200);
	}

	.faq-item:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.faq-item summary {
		cursor: pointer;
		font-weight: 500;
		list-style: none;
	}

	.faq-item summary::-webkit-details-marker {
		display: none;
	}

	.faq-item summary::before {
		content: '+';
		display: inline-block;
		width: 1em;
		color: var(--c-accent-600);
	}

	.faq-item[open] summary::before {
		content: '–';
	}

	.faq-item__respuesta {
		padding-top: var(--space-3);
		padding-left: 1em;
		color: var(--c-ink-700);
	}

	/* Apertura/cierre suave (fila #12 del inventario de movimiento): sólo
	   donde el navegador soporta ::details-content — degrada al
	   comportamiento nativo instantáneo del <details> en el resto. */
	@supports selector(::details-content) {
		.faq-item {
			interpolate-size: allow-keywords;
		}

		.faq-item::details-content {
			overflow: hidden;
			height: 0;
			opacity: 0;
			transition:
				height var(--dur-3) var(--ease-glide),
				opacity var(--dur-2) var(--ease-glide),
				content-visibility var(--dur-3) allow-discrete;
			transition-behavior: allow-discrete;
		}

		.faq-item[open]::details-content {
			height: auto;
			opacity: 1;
		}
	}

	.faq-item__respuesta p {
		margin: 0;
		max-width: var(--measure-max);
	}

	/* Sidebar / índice de áreas */

	.area-sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		padding-top: var(--space-7);
		border-top: 1px solid var(--c-ink-200);
	}

	@media (width >= 1024px) {
		.area-sidebar {
			position: sticky;
			top: calc(var(--space-8) + 72px);
			padding-top: 0;
			border-top: 0;
		}
	}

	.area-indice__titulo {
		margin: 0 0 var(--space-3);
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-ink-500);
	}

	.area-indice ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.area-indice a {
		font-size: var(--text-sm);
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
	}

	.area-indice a:hover,
	.area-indice a:focus-visible {
		color: var(--c-accent-600) !important;
	}

	.area-indice a.es-actual {
		color: var(--c-accent-600) !important;
		font-weight: 600;
	}

	.area-sidebar__contacto {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding-top: var(--space-5);
		border-top: 1px solid var(--c-ink-200);
	}

}