/*
Evox Pro Box — brand.css
Plantilla estándar Evox Pro: para otra marca, cambiar solo las 4 variables de :root.
Colores tomados del logo de Box:
  - Oscuro:  #231337 (header y footer)
  - Acento:  #9A86F5 (botones, enlaces destacados)
  - Texto sobre oscuro: #FFFFFF
  - Texto sobre acento: #231337 (el blanco sobre el morado claro no tiene contraste suficiente)
*/

:root {
	--evoxpro-oscuro: #231337;
	--evoxpro-acento: #9A86F5;
	--evoxpro-texto-claro: #FFFFFF;
	--evoxpro-texto-boton: #231337;
}

/* Header */
.site-header,
#masthead,
.ast-header-break-point .site-header,
.main-header-bar,
.ast-above-header,
.ast-below-header {
	background-color: var(--evoxpro-oscuro) !important;
}

/* Footer (incluye los contenedores internos de Astra que traen fondo blanco propio) */
.site-footer,
#colophon,
.ast-small-footer,
footer.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-builder-grid-row-container.site-below-footer-wrap,
.ast-builder-grid-row-container.site-above-footer-wrap,
.ast-builder-grid-row-container.site-primary-footer-wrap {
	background-color: var(--evoxpro-oscuro) !important;
}

/* Texto y enlaces sobre fondo oscuro */
.site-header, .site-header a, .site-header p, .site-header span,
#masthead a, .main-header-bar a, .main-header-menu a, .ast-builder-menu a,
.site-title a, .site-description,
.ast-above-header, .ast-above-header a, .ast-above-header p, .ast-above-header span,
.ast-below-header, .ast-below-header a, .ast-below-header p, .ast-below-header span,
.site-footer, .site-footer a, .site-footer p, .site-footer span, .site-footer li,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
#colophon, #colophon a, #colophon p, #colophon span, #colophon li,
#colophon h1, #colophon h2, #colophon h3, #colophon h4,
.site-above-footer-wrap, .site-above-footer-wrap a, .site-above-footer-wrap p, .site-above-footer-wrap span,
.site-primary-footer-wrap, .site-primary-footer-wrap a, .site-primary-footer-wrap p, .site-primary-footer-wrap span,
.site-below-footer-wrap, .site-below-footer-wrap a, .site-below-footer-wrap p, .site-below-footer-wrap span {
	color: var(--evoxpro-texto-claro) !important;
}

/* Hover del menú en el color de acento */
.main-header-menu a:hover,
.ast-builder-menu a:hover,
.site-footer a:hover,
#colophon a:hover {
	color: var(--evoxpro-acento) !important;
}

/* Íconos SVG (buscar, carrito, menú hamburguesa, etc.) */
.site-header svg, #masthead svg, .ast-above-header svg, .ast-below-header svg,
.site-footer svg, #colophon svg {
	fill: var(--evoxpro-texto-claro) !important;
	color: var(--evoxpro-texto-claro) !important;
}

/* Botones (Astra, bloques nativos, WooCommerce) */
.wp-block-button__link,
.wp-element-button,
.ast-button,
button:not(.menu-toggle),
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce a.added_to_cart,
a.button,
.btn {
	background-color: var(--evoxpro-acento) !important;
	border-color: var(--evoxpro-acento) !important;
	color: var(--evoxpro-texto-boton) !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.ast-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
a.button:hover,
.btn:hover {
	background-color: var(--evoxpro-oscuro) !important;
	border-color: var(--evoxpro-oscuro) !important;
	color: var(--evoxpro-texto-claro) !important;
}

/* Precios y etiqueta de oferta */
.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--evoxpro-oscuro) !important;
}
.woocommerce span.onsale {
	background-color: var(--evoxpro-acento) !important;
	color: var(--evoxpro-texto-boton) !important;
}

/* Logo en el header: el sello ya incluye el nombre de la marca */
.site-branding .custom-logo-link img,
.custom-logo-link img.custom-logo {
	width: 90px !important;
	max-width: 90px !important;
	height: auto !important;
}
.site-branding .site-title,
.site-branding .site-description {
	display: none !important;
}
@media (max-width: 768px) {
	.site-branding .custom-logo-link img,
	.custom-logo-link img.custom-logo {
		width: 64px !important;
		max-width: 64px !important;
	}
}

/* ===== Kit Evox Pro: pie de página ===== */
.evoxpro-footer {
	background: var(--evoxpro-oscuro);
	color: var(--evoxpro-texto-claro);
	border-top: 4px solid var(--evoxpro-acento);
	padding: 40px 20px 24px;
}
.evoxpro-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.evoxpro-footer p {
	margin: 0 0 8px;
	color: var(--evoxpro-texto-claro);
}
.evoxpro-footer a {
	color: var(--evoxpro-texto-claro);
	text-decoration: none;
}
.evoxpro-footer a:hover {
	color: var(--evoxpro-acento);
}
.evoxpro-footer__brand {
	font-size: 1.25rem;
	font-weight: 700;
}
.evoxpro-footer__title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .85rem;
	color: var(--evoxpro-acento) !important;
}
.evoxpro-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.evoxpro-footer__menu li {
	margin: 0 0 6px;
}
.evoxpro-footer__small {
	font-size: .85rem;
	opacity: .75;
}
@media (max-width: 768px) {
	.evoxpro-footer__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ===== Kit Evox Pro: página de inicio ===== */
.evoxpro-hero {
	background: var(--evoxpro-oscuro);
	color: var(--evoxpro-texto-claro);
	padding: 72px 20px !important;
	margin-top: 0 !important;
	margin-bottom: 48px !important;
}
.evoxpro-hero h1,
.evoxpro-hero p {
	color: var(--evoxpro-texto-claro) !important;
}
.evoxpro-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin-bottom: 12px;
}
.evoxpro-hero p {
	font-size: 1.15rem;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.evoxpro-beneficios {
	margin-bottom: 48px;
}
.evoxpro-beneficios .wp-block-column {
	border-top: 4px solid var(--evoxpro-acento);
	padding-top: 16px;
}
.evoxpro-beneficios h3 {
	color: var(--evoxpro-oscuro);
	font-size: 1.15rem;
}
.evoxpro-seccion-titulo {
	color: var(--evoxpro-oscuro);
}
.evoxpro-cta {
	background: rgba(0, 0, 0, .04);
	border-left: 6px solid var(--evoxpro-acento);
	padding: 32px !important;
	margin-top: 48px !important;
	margin-bottom: 48px !important;
}
.evoxpro-cta h2 {
	color: var(--evoxpro-oscuro);
}