/* =============================================================================
   DKT Store Ecuador - Custom Styles v0.2.0
   Estilo: Opcion C Hibrida (estilo DKT Brasil con identidad DKT Magenta)
   Marca: PANTONE 220C Magenta + paleta complementaria oficial Guia Visual 2025
   Tipografias: Poppins (titulos) + Inter (cuerpo) — DEC-007
   ============================================================================= */

:root {
	/* Paleta oficial Guia Visual DKT 2025 */
	--dkt-magenta: #A50050;          /* PANTONE 220C — color principal */
	--dkt-magenta-dark: #87114A;     /* hover botones, acentos oscuros */
	--dkt-vino: #5F0E39;             /* titulos, gradient packaging */
	--dkt-rosa-mid: #B38F8F;         /* secciones secundarias */
	--dkt-rosa-soft: #D8B8B9;        /* backgrounds suaves */
	--dkt-beige: #F2E0E0;            /* secciones sutiles */
	--dkt-negro: #1A1A1A;            /* announcement bar */
	--dkt-white: #FFFFFF;            /* fondo limpio */

	--dkt-gray-light: #F8F8F8;       /* fondo seccion clinica */
	--dkt-gray-medium: #6B7280;
	--dkt-gray-dark: #374151;
	--dkt-border: #E5E7EB;

	--dkt-font-titles: 'Poppins', system-ui, -apple-system, sans-serif;
	--dkt-font-body: 'Inter', system-ui, -apple-system, sans-serif;

	--dkt-shadow-sm: 0 1px 3px rgba(95, 14, 57, 0.06);
	--dkt-shadow-md: 0 4px 12px rgba(95, 14, 57, 0.08);
	--dkt-shadow-lg: 0 10px 30px rgba(95, 14, 57, 0.12);

	--dkt-radius: 6px;
	--dkt-radius-lg: 12px;
	--dkt-transition: all 0.3s ease;
}

/* =============================================================================
   TIPOGRAFIAS GLOBALES
   ============================================================================= */

body, p, li, td, input, textarea, select, button, .ast-button,
.elementor-text-editor {
	font-family: var(--dkt-font-body) !important;
	color: var(--dkt-gray-dark);
}

body { background-color: var(--dkt-white); }

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title,
.widget-title, .widgettitle,
.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.elementor-heading-title {
	font-family: var(--dkt-font-titles) !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dkt-vino);
}

h1 { font-weight: 700; }

a { color: var(--dkt-magenta); transition: var(--dkt-transition); }
a:hover { color: var(--dkt-magenta-dark); }

/* =============================================================================
   ANNOUNCEMENT BAR (NEGRO arriba del header)
   ============================================================================= */

.dkt-announcement-bar {
	background-color: var(--dkt-negro);
	color: var(--dkt-white);
	text-align: center;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	overflow: hidden;
	min-height: 40px;
	line-height: 1.4;
}

.dkt-announcement-bar a { color: var(--dkt-white); text-decoration: underline; }
.dkt-announcement-bar a:hover { color: var(--dkt-beige); }

.dkt-announcement-bar .slide {
	display: none;
	animation: dktFade 0.5s ease;
}

.dkt-announcement-bar .slide.active { display: block; }

@keyframes dktFade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   HEADER BLANCO (Estilo DKT Brasil)
   Fondo blanco limpio + logo magenta + menu vino + acentos magenta
   ============================================================================= */

.site-header,
.ast-header-break-point .main-header-bar,
.main-header-bar,
.ast-primary-header-bar {
	background-color: var(--dkt-white) !important;
	border-bottom: 1px solid var(--dkt-border) !important;
	box-shadow: var(--dkt-shadow-sm);
}

/* Logo del sitio */
.site-logo-img img, .ast-site-identity .site-logo-img img {
	max-height: 60px;
	width: auto;
}

/* Texto del titulo (si no hay logo subido) */
.site-title { font-family: var(--dkt-font-titles) !important; font-weight: 700; }
.site-title a, .site-title { color: var(--dkt-magenta) !important; }

/* Items del menu - texto vino oscuro */
.main-header-menu .menu-item > a,
.main-header-bar .ast-builder-menu-1 .main-header-menu a,
.main-header-bar .main-header-bar-navigation .main-header-menu a {
	color: var(--dkt-vino) !important;
	font-weight: 600;
	font-family: var(--dkt-font-titles) !important;
	font-size: 15px;
	transition: var(--dkt-transition);
	letter-spacing: -0.01em;
}

.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-ancestor > a {
	color: var(--dkt-magenta) !important;
}

/* Iconos del header (search, cart, user) */
.ast-header-search .header-action-icon,
.ast-cart-menu-wrap .ast-cart-menu-icon,
.ast-header-account-wrap,
.ast-builder-menu-1 svg {
	color: var(--dkt-vino) !important;
	fill: var(--dkt-vino);
	transition: var(--dkt-transition);
}

.ast-header-search .header-action-icon:hover,
.ast-cart-menu-wrap:hover .ast-cart-menu-icon,
.ast-header-account-wrap:hover {
	color: var(--dkt-magenta) !important;
	fill: var(--dkt-magenta);
}

/* Cart badge contador */
.ast-cart-menu-wrap .count {
	background-color: var(--dkt-magenta) !important;
	color: var(--dkt-white) !important;
}

/* Sub-menu dropdown */
.main-header-menu .sub-menu {
	background-color: var(--dkt-white) !important;
	border: 1px solid var(--dkt-border);
	box-shadow: var(--dkt-shadow-md);
	border-radius: var(--dkt-radius);
	padding: 8px 0;
}

.main-header-menu .sub-menu a {
	color: var(--dkt-vino) !important;
	padding: 10px 20px !important;
}

.main-header-menu .sub-menu a:hover {
	background-color: var(--dkt-beige) !important;
	color: var(--dkt-magenta) !important;
}

/* =============================================================================
   BOTONES (Magenta DKT como accent)
   ============================================================================= */

.button, button:not(.toggle-on):not(.toggle-off),
input[type="submit"], input[type="button"],
.wp-block-button__link,
a.button, .ast-button,
.woocommerce-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background-color: var(--dkt-magenta) !important;
	color: var(--dkt-white) !important;
	border: none !important;
	border-radius: var(--dkt-radius) !important;
	padding: 12px 28px !important;
	font-family: var(--dkt-font-titles) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: var(--dkt-transition) !important;
	box-shadow: var(--dkt-shadow-sm);
	cursor: pointer;
}

.button:hover, button:hover,
input[type="submit"]:hover, input[type="button"]:hover,
.wp-block-button__link:hover, a.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background-color: var(--dkt-magenta-dark) !important;
	transform: translateY(-1px);
	box-shadow: var(--dkt-shadow-md);
}

/* Boton outline secundario */
.button.dkt-outline, .ast-button.dkt-outline {
	background-color: transparent !important;
	color: var(--dkt-magenta) !important;
	border: 2px solid var(--dkt-magenta) !important;
}
.button.dkt-outline:hover {
	background-color: var(--dkt-magenta) !important;
	color: var(--dkt-white) !important;
}

/* =============================================================================
   FOOTER MAGENTA (mantiene identidad fuerte al final)
   ============================================================================= */

.site-footer, .footer-widget-area,
.footer-primary, .ast-small-footer,
.ast-footer-overlay {
	background-color: var(--dkt-magenta) !important;
	color: var(--dkt-white) !important;
}

.site-footer, .site-footer p, .site-footer a,
.footer-widget-area, .footer-widget-area a,
.footer-widget-area .widget-title,
.ast-small-footer-section, .ast-small-footer-section a {
	color: var(--dkt-white) !important;
}

.footer-widget-area .widget-title {
	font-family: var(--dkt-font-titles) !important;
	font-weight: 600;
	margin-bottom: 16px;
}

.site-footer a:hover, .footer-widget-area a:hover {
	color: var(--dkt-beige) !important;
}

/* Newsletter input en footer */
.site-footer input[type="email"], .site-footer input[type="text"] {
	background-color: rgba(255,255,255,0.15) !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
	color: var(--dkt-white) !important;
}

.site-footer input::placeholder { color: rgba(255,255,255,0.7) !important; }

/* =============================================================================
   HERO Y SECCIONES (alternancia blanco / beige / magenta)
   ============================================================================= */

.dkt-section-white  { background-color: var(--dkt-white); padding: 60px 0; }
.dkt-section-gray   { background-color: var(--dkt-gray-light); padding: 60px 0; }
.dkt-section-beige  { background-color: var(--dkt-beige); padding: 60px 0; }
.dkt-section-magenta {
	background: linear-gradient(135deg, var(--dkt-magenta), var(--dkt-vino));
	color: var(--dkt-white);
	padding: 80px 0;
}
.dkt-section-magenta h1,
.dkt-section-magenta h2,
.dkt-section-magenta h3 { color: var(--dkt-white); }

.dkt-section-vino {
	background-color: var(--dkt-vino);
	color: var(--dkt-white);
	padding: 80px 0;
}
.dkt-section-vino h1, .dkt-section-vino h2 { color: var(--dkt-white); }

/* =============================================================================
   WOOCOMMERCE - PRODUCTOS
   ============================================================================= */

.woocommerce ul.products li.product {
	background-color: var(--dkt-white);
	border-radius: var(--dkt-radius-lg);
	overflow: hidden;
	transition: var(--dkt-transition);
	padding: 16px !important;
	border: 1px solid var(--dkt-border);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--dkt-shadow-md);
	transform: translateY(-2px);
	border-color: var(--dkt-rosa-soft);
}

.woocommerce ul.products li.product .price,
.woocommerce-Price-amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dkt-magenta) !important;
	font-weight: 700 !important;
	font-family: var(--dkt-font-titles) !important;
}

.woocommerce ul.products li.product .price del { color: var(--dkt-gray-medium) !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--dkt-vino) !important;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 600;
	margin-top: 8px;
}

/* Badge "OFERTA" / "SALE" */
.woocommerce span.onsale {
	background-color: var(--dkt-vino) !important;
	color: var(--dkt-white) !important;
	border-radius: var(--dkt-radius) !important;
	font-weight: 600;
	padding: 4px 12px !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.4 !important;
	font-family: var(--dkt-font-body) !important;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* =============================================================================
   MI CUENTA WOOCOMMERCE
   ============================================================================= */

.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--dkt-border);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: var(--dkt-magenta) !important;
	color: var(--dkt-white) !important;
}
.woocommerce-MyAccount-navigation ul li a {
	color: var(--dkt-vino) !important;
	font-weight: 500;
	padding: 12px 16px !important;
	display: block;
	transition: var(--dkt-transition);
}
.woocommerce-MyAccount-navigation ul li:hover:not(.is-active) a {
	background-color: var(--dkt-beige) !important;
	color: var(--dkt-magenta) !important;
}

/* =============================================================================
   NOTIFICACIONES / MENSAJES WOOCOMMERCE
   ============================================================================= */

.woocommerce-message {
	border-top-color: var(--dkt-magenta) !important;
	background-color: var(--dkt-beige) !important;
	color: var(--dkt-vino) !important;
}
.woocommerce-message::before { color: var(--dkt-magenta) !important; }

.woocommerce-info {
	border-top-color: var(--dkt-vino) !important;
	background-color: var(--dkt-gray-light) !important;
	color: var(--dkt-vino) !important;
}

.dkt-notice {
	background: linear-gradient(135deg, var(--dkt-magenta), var(--dkt-vino));
	color: var(--dkt-white);
	padding: 16px 24px;
	border-radius: var(--dkt-radius);
	margin: 16px 0;
	font-weight: 500;
}

/* =============================================================================
   BOTON FLOTANTE WHATSAPP (activado en plugin dkt-store-core M3)
   ============================================================================= */

.dkt-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	background-color: #25D366;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--dkt-shadow-lg);
	transition: var(--dkt-transition);
	color: var(--dkt-white);
	text-decoration: none;
	animation: dktPulse 2s infinite;
}
.dkt-whatsapp-float:hover {
	transform: scale(1.1);
	animation: none;
}
.dkt-whatsapp-float svg { width: 28px; height: 28px; fill: currentColor; }

@keyframes dktPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
	50%      { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* =============================================================================
   BADGES PRECIO DOCTOR / MAYORISTA
   ============================================================================= */

.dkt-precio-doctor {
	display: inline-block;
	background-color: var(--dkt-beige);
	color: var(--dkt-vino);
	padding: 4px 10px;
	border-radius: var(--dkt-radius);
	font-size: 0.85em;
	font-weight: 600;
	margin-left: 8px;
	font-family: var(--dkt-font-titles);
}

.dkt-precio-mayorista {
	display: inline-block;
	background-color: var(--dkt-vino);
	color: var(--dkt-white);
	padding: 4px 10px;
	border-radius: var(--dkt-radius);
	font-size: 0.85em;
	font-weight: 600;
	margin-left: 8px;
	font-family: var(--dkt-font-titles);
}

/* =============================================================================
   BLOG / ARTICULOS EDUCATIVOS
   ============================================================================= */

.entry-content h2 { color: var(--dkt-vino); margin-top: 1.5em; }
.entry-content h3 { color: var(--dkt-vino); margin-top: 1.2em; }

.entry-content a { color: var(--dkt-magenta); text-decoration: underline; }
.entry-content a:hover { color: var(--dkt-magenta-dark); }

blockquote {
	border-left: 4px solid var(--dkt-magenta) !important;
	background-color: var(--dkt-beige);
	padding: 16px 24px !important;
	color: var(--dkt-vino);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
	.site-header { padding: 8px 0; }
	.button, .ast-button { padding: 10px 22px !important; font-size: 14px !important; }
	.dkt-whatsapp-float { width: 48px; height: 48px; bottom: 16px; right: 16px; }
	.dkt-whatsapp-float svg { width: 24px; height: 24px; }
	.dkt-section-white, .dkt-section-gray, .dkt-section-beige { padding: 40px 0; }
	.dkt-section-magenta, .dkt-section-vino { padding: 56px 0; }
}

/* =============================================================================
   ACCESIBILIDAD
   ============================================================================= */

*:focus-visible {
	outline: 2px solid var(--dkt-magenta) !important;
	outline-offset: 2px;
}

button:focus, .button:focus, a:focus {
	outline-color: var(--dkt-magenta) !important;
}