/*
 * [MARCA] Child Theme — Paleta, utilidades y estilos de shortcodes.
 *
 * Mobile-first: los estilos base están pensados para 360px de ancho;
 * los media queries solo amplían hacia arriba.
 *
 * Reglas de uso de la paleta:
 *  - Fondo blanco predominante y mucho espacio en blanco.
 *  - El azul es el ÚNICO color de acción (botones, links).
 *  - Rojo / amarillo / verde solo en detalles pequeños (números de pasos,
 *    estrellas, badges). Nunca los cuatro colores juntos en un bloque grande.
 */

/* -------------------------------------------------------------------------
 * Paleta
 * ---------------------------------------------------------------------- */
:root {
	--brand-blue:   #4285F4;  /* color principal: CTAs, links */
	--brand-red:    #EA4335;  /* acento puntual */
	--brand-yellow: #FBBC04;  /* estrellas, acentos */
	--brand-green:  #34A853;  /* acento puntual, estados de éxito */
	--brand-dark:   #202124;  /* textos */
	--brand-gray:   #5F6368;  /* textos secundarios */
	--brand-bg:     #FFFFFF;  /* fondo base */
	--brand-bg-alt: #F8F9FA;  /* fondos de sección alternos */

	/* Derivados */
	--brand-blue-hover: #3367D6;
	--brand-radius:     8px;
	--brand-shadow:     0 1px 3px rgba(32, 33, 36, 0.12);
}

/* -------------------------------------------------------------------------
 * Utilidades (para usar como clases CSS en secciones de Elementor)
 * ---------------------------------------------------------------------- */
.marca-bg-alt        { background-color: var(--brand-bg-alt); }
.marca-texto-sec     { color: var(--brand-gray); }
.marca-acento-rojo   { color: var(--brand-red); }
.marca-acento-verde  { color: var(--brand-green); }
.marca-acento-azul   { color: var(--brand-blue); }

/* Círculos numerados para la sección "Cómo funciona" (3 pasos). */
.marca-paso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
}
.marca-paso--azul  { background-color: var(--brand-blue); }
.marca-paso--rojo  { background-color: var(--brand-red); }
.marca-paso--verde { background-color: var(--brand-green); }

/* Aviso solo-admin (ej. WooCommerce inactivo). */
.marca-aviso-admin {
	padding: 0.75em 1em;
	border-left: 4px solid var(--brand-red);
	background-color: var(--brand-bg-alt);
	color: var(--brand-gray);
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * [boton_app] — botones hacia la app (dashboard)
 * ---------------------------------------------------------------------- */
.marca-btn {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: var(--brand-radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	/* En 360px los botones ocupan cómodo el ancho disponible. */
	max-width: 100%;
}

.marca-btn--primario {
	background-color: var(--brand-blue);
	border: 2px solid var(--brand-blue);
	color: #fff;
}
.marca-btn--primario:hover,
.marca-btn--primario:focus {
	background-color: var(--brand-blue-hover);
	border-color: var(--brand-blue-hover);
	color: #fff;
}

.marca-btn--secundario {
	background-color: transparent;
	border: 2px solid var(--brand-blue);
	color: var(--brand-blue);
}
.marca-btn--secundario:hover,
.marca-btn--secundario:focus {
	background-color: var(--brand-blue);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * [estrellas] — fila de estrellas
 * ---------------------------------------------------------------------- */
.marca-estrellas {
	display: inline-flex;
	gap: 0.2em;
	color: var(--brand-yellow);
	line-height: 1;
	vertical-align: middle;
}

.marca-estrella {
	width: 1.4em;
	height: 1.4em;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * [whatsapp] — botón de contacto
 * ---------------------------------------------------------------------- */
.marca-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border-radius: var(--brand-radius);
	background-color: var(--brand-green);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.15s ease;
	max-width: 100%;
}
.marca-whatsapp:hover,
.marca-whatsapp:focus {
	filter: brightness(0.92);
	color: #fff;
}

.marca-whatsapp__icono {
	width: 1.3em;
	height: 1.3em;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * [productos_destacados] — grid de productos WooCommerce
 * El markup lo genera WooCommerce/Astra; aquí solo se alinea con la paleta.
 * ---------------------------------------------------------------------- */
.marca-productos ul.products li.product {
	background-color: var(--brand-bg);
	border-radius: var(--brand-radius);
	box-shadow: var(--brand-shadow);
	padding: 1rem;
	text-align: center;
}

.marca-productos ul.products li.product .woocommerce-loop-product__title {
	color: var(--brand-dark);
	font-weight: 600;
}

.marca-productos ul.products li.product .price {
	color: var(--brand-gray);
}

.marca-productos ul.products li.product .price ins {
	color: var(--brand-green);
	text-decoration: none;
}

.marca-productos ul.products li.product .star-rating {
	color: var(--brand-yellow);
}

/* El azul es el único color de acción: botones del loop de producto. */
.marca-productos ul.products li.product .button,
.marca-productos ul.products li.product .added_to_cart {
	background-color: var(--brand-blue);
	color: #fff;
	border-radius: var(--brand-radius);
	font-weight: 600;
}
.marca-productos ul.products li.product .button:hover,
.marca-productos ul.products li.product .button:focus,
.marca-productos ul.products li.product .added_to_cart:hover,
.marca-productos ul.products li.product .added_to_cart:focus {
	background-color: var(--brand-blue-hover);
	color: #fff;
}

/* Mobile-first: una columna en pantallas chicas aunque se pidan 3 columnas. */
@media (max-width: 560px) {
	.marca-productos ul.products[class*="columns-"] li.product {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}