/**
 * @layer components — botones y links con estilo de botón.
 * La "regla del filete" (subrayado que se despliega en hover) se anima en
 * la Fase 8; acá el estado hover ya es correcto, sólo estático.
 *
 * Nota sobre los `!important` de color/text-decoration: WordPress imprime
 * los estilos globales de theme.json como CSS SIN @layer
 * (`a:where(:not(.wp-element-button)){color:...; text-decoration:underline}`,
 * hoja "global-styles-inline-css"). Por especificación, una regla sin capa
 * le gana a cualquier regla dentro de un @layer sin importar su
 * especificidad — así que sin esto, cualquier <a> con estilo de botón
 * queda con el color y el subrayado de link genérico, no con los de
 * .boton. `!important` dentro de un layer sí le gana a lo no-layered, y es
 * el mecanismo que la propia spec de cascade layers prevé para este caso.
 *
 * `.nav-principal__cta > a` comparte estilo con `.boton--primario`: es el
 * link "Contacto" del menú real (armado a mano en Apariencia > Menús), que
 * no tiene forma de llevar la clase .boton en el <a> — sólo se le puede
 * agregar una clase CSS al <li> desde el admin (Opciones de pantalla >
 * Clases CSS). Con el selector `.nav-principal__cta > a` alcanza con poner
 * "nav-principal__cta" como clase de ese item para que se vea como botón.
 */

@layer components {
	.boton,
	.nav-principal__cta > a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: 14px 28px;
		font-size: var(--text-sm);
		font-weight: 500;
		text-decoration: none !important;
		border-radius: 0;
		border: 1px solid transparent;
	}

	.boton--primario,
	.nav-principal__cta > a {
		background: var(--c-accent-600);
		color: var(--c-white) !important;
	}

	.boton--primario:hover,
	.boton--primario:focus-visible,
	.nav-principal__cta > a:hover,
	.nav-principal__cta > a:focus-visible {
		background: var(--c-accent-700);
		color: var(--c-white) !important;
	}

	.boton--secundario {
		padding: 14px 0;
		color: var(--c-ink-900) !important;
		border-bottom: 1px solid var(--c-ink-900);
	}

	.boton--secundario:hover,
	.boton--secundario:focus-visible {
		color: var(--c-accent-600) !important;
		border-bottom-color: var(--c-accent-600);
	}

	/* Variante para fondos oscuros (hero, ver referencia hero.jpg). Va acá
	   —no en pages/front-page.css— porque dos !important en capas distintas
	   invierten su prioridad (la capa declarada antes gana), así que la
	   variante necesita estar en la misma capa que .boton--secundario y
	   después en el archivo para ganar el empate por orden de aparición. */
	.boton--secundario-oscuro {
		color: var(--c-white) !important;
		border-bottom-color: color-mix(in oklab, var(--c-white) 60%, transparent);
	}

	.boton--secundario-oscuro:hover,
	.boton--secundario-oscuro:focus-visible {
		color: var(--c-accent-400) !important;
		border-bottom-color: var(--c-accent-400);
	}

	.boton .icono {
		width: 16px;
		height: 16px;
	}
}