/* Canal Cero · components.css — estados globales de interacción.
   Los colores y el hover de los botones de Divi viven en sus Presets (Divi → Presets
   de Botón: primario, secundario, claro, agregar). Aquí solo va lo que un Preset no
   puede expresar: transición, foco de teclado y estado presionado. */

:root {
	--cc-duracion: 200ms;
	--cc-curva: cubic-bezier(0.2, 0, 0, 1);
	--cc-foco-ancho: 2px;
	--cc-foco-separacion: 3px;
}

/* Foco visible solo con teclado, en todo el sitio. Acento de texto (oro oscuro #826532) = contraste AA
   sobre fondo, superficie y superficie alternativa. :is() (no :where()) para ganarle
   al reset de Divi ":focus { outline: 0 }" sin !important. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--cc-foco-ancho) solid var(--cc-acento-texto);
	outline-offset: var(--cc-foco-separacion);
}

/* Botones de Divi: la transición del hover la define el Preset (Divi, 300ms).
   Aquí solo el "presionado", con transform para no mover el layout. */
.et_pb_button:active {
	transform: translateY(1px);
}

/* Sobre fondos oscuros o fotos, el foco pasa a claro. */
.cc-sobre-oscuro :focus-visible {
	outline-color: var(--cc-superficie);
}

/* Movimiento reducido. El selector largo iguala +1 la especificidad del CSS de
   Presets de Divi ("body #page-container .et_pb_section .preset--…") sin !important. */
@media (prefers-reduced-motion: reduce) {
	a,
	html body #page-container .et_pb_section .et_pb_button {
		transition: none;
	}

	.et_pb_button:active {
		transform: none;
	}
}

/* Botón que main.js pone dentro del título de acordeones y toggles de Divi: se ve
   como el título (hereda tipografía y color) pero recibe foco y anuncia su estado. */
.cc-toggle-boton {
	all: inherit;
	display: block;
	width: 100%;
	cursor: pointer;
}