/* Coprocar · ajustes sobre el kit Meatezy
   El kit venía armado para un catálogo con precios y reseñas; al sacarlos quedaron
   huecos y jerarquías que aquí se recomponen. Todo lo demás lo sigue mandando Elementor. */

:root {
	--cpr-carbon: #1B1410;
	--cpr-rojo: #830A0A;
	--cpr-rojo-cta: #A6231F;
	--cpr-hueso: #F3EBDD;
	--cpr-texto: #5F5348;
}

/* ---------------------------------------------------------------- tipografía */

body {
	-webkit-font-smoothing: antialiased;
}

/* El kit deja los párrafos muy sueltos y con poco cuerpo para lectura larga. */
.elementor-widget-text-editor p {
	line-height: 1.7;
}

/* ------------------------------------------------------------------ contraste */

/* Bajadas y descripciones sobre fondo claro: el gris del demo no llegaba a AA. */
.elementor-widget-text-editor,
.jkit-icon-box .jkit-content-box p,
.jkit-heading .jkit-description {
	color: var(--cpr-texto);
}

/* Sobre las secciones oscuras manda el color claro del propio kit. */
.elementor-section[data-settings*="background_overlay"] .elementor-widget-text-editor {
	color: inherit;
}

/* ------------------------------------------------------------------ espaciado */

/* Las tarjetas de cortes usaban un escalonado pensado para el bloque de precio y
   reseñas; sin ellos quedaba un vacío de ~300px bajo la fila. */
.elementor-widget-jkit_heading + .elementor-widget-jkit_button {
	margin-top: 4px;
}

/* Fila de cortes destacados: alinear tarjetas y cerrar el hueco que dejó el rating. */
.cpr-cortes .elementor-column {
	align-self: flex-start;
}

/* --------------------------------------------------------------- líneas (grid) */

/* Las seis líneas de producto ahora llevan CTA: se les da aire y un borde que las
   vuelve tarjeta clicable en vez de texto suelto. */
.jkit-icon-box .jkit-readmore-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-weight: 600;
	letter-spacing: .08em;
}

/* ------------------------------------------------------------------ botones */

.jkit-button .jkit-button-wrapper,
.elementor-button {
	transition: background-color .18s ease, border-color .18s ease;
}

/* El foco de teclado del kit es invisible: se repone uno propio. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
.jkit-button a:focus-visible {
	outline: 3px solid var(--cpr-rojo-cta);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------- móvil */

@media (max-width: 767px) {

	/* El header quedaba transparente sobre el hero y el logo (negro) se perdía
	   contra la madera oscura de la foto. */
	.ehf-header .elementor-section,
	header.site-header .elementor-section {
		background-color: #FFFFFF !important;
	}

	/* Los dos CTA del hero tenían anchos distintos y quedaban desalineados.
	   El kit los marca con elementor-widget__width-auto, que hay que soltar. */
	.elementor-widget-jkit_button.elementor-widget__width-auto,
	.elementor-widget-jkit_button {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-widget-jkit_button .jkit-button,
	.elementor-widget-jkit_button .jkit-button-wrapper {
		display: flex;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Con los botones a lo ancho, el par del hero necesita separación propia. */
	.elementor-widget-jkit_button + .elementor-widget-jkit_button {
		margin-top: 12px;
	}

	/* Respiro lateral consistente: el kit dejaba el texto pegado al borde. */
	.elementor-section .elementor-container {
		padding-left: 6px;
		padding-right: 6px;
	}

	/* Titulares: el kit los deja demasiado grandes y rompen palabras largas. */
	.elementor-widget-heading h1,
	.elementor-widget-heading h2 {
		word-break: normal;
		overflow-wrap: anywhere;
	}

	/* Menos aire vertical: en móvil los 50px por lado alargaban mucho la página. */
	.elementor-section.elementor-top-section {
		padding-top: 38px !important;
		padding-bottom: 38px !important;
	}

	/* Las tarjetas de corte se veían cortadas por el escalonado del kit. */
	.elementor-column {
		margin-bottom: 0;
	}
}

/* --------------------------------------------------------- accesibilidad extra */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}