/* Los Diaz · 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. Mostaza de texto = 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;
	}
}

/* ---- Plato de quesos (inc/ilustraciones.php) ----------------------------------------
   Foto sin fondo de Rocío. Se usa en la 404 y en el carrito vacío; el tamaño lo pone cada
   página. La sombra sigue el borde del plato (drop-shadow respeta la transparencia). */
.cc-plato {
	display: block;
	height: auto;
	filter: drop-shadow(0 10px 18px rgba(77, 58, 44, 0.18));
}