/* ============================================================
   HiperCentro Natural – Estilos Principales v1.1
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
	/* ── Verdes (paleta vibrante moderna) ── */
	--hcn-900: #14532D;
	--hcn-800: #166534;
	--hcn-700: #15803D;
	--hcn-600: #16A34A;   /* verde principal */
	--hcn-500: #22C55E;   /* hover / accento */
	--hcn-400: #4ADE80;   /* acento claro */
	--hcn-200: #BBF7D0;
	--hcn-100: #DCFCE7;
	--hcn-50:  #F0FDF4;

	/* ── Dorado / acento cálido ── */
	--hcn-gold:    #D97706;
	--hcn-gold-l:  #FEF3C7;

	/* ── Neutrales ── */
	--hcn-white:  #FFFFFF;
	--hcn-bg:     #F9FAFB;   /* fondo general – casi blanco */
	--hcn-surface:#FFFFFF;

	/* ── Texto ── */
	--hcn-txt:    #111827;   /* casi negro */
	--hcn-txt-md: #374151;
	--hcn-txt-lt: #6B7280;
	--hcn-txt-xs: #9CA3AF;

	/* ── Bordes / sombras ── */
	--hcn-brd:    #E5E7EB;
	--hcn-brd-l:  #F3F4F6;
	--hcn-sh-s:   0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
	--hcn-sh:     0 4px 16px rgba(0,0,0,.08);
	--hcn-sh-l:   0 8px 32px rgba(0,0,0,.12);
	--hcn-sh-h:   0 16px 48px rgba(0,0,0,.16);

	/* ── Tipografía ── */
	--ff-head: 'Playfair Display', Georgia, serif;
	--ff-body: 'Lato', -apple-system, 'Segoe UI', sans-serif;
	--ff-ui:   'Montserrat', Arial, sans-serif;

	/* ── Espaciado ── */
	--sp1:.25rem; --sp2:.5rem; --sp3:.75rem; --sp4:1rem;
	--sp5:1.25rem; --sp6:1.5rem; --sp8:2rem; --sp10:2.5rem;
	--sp12:3rem; --sp16:4rem;

	/* ── Radio ── */
	--r-sm:4px; --r:8px; --r-lg:12px; --r-xl:20px; --r-full:9999px;

	/* ── Transiciones ── */
	--tr:.22s ease; --tr-sl:.4s ease;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	background: var(--hcn-bg);
	color: var(--hcn-txt);
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: var(--hcn-600); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--hcn-800); }

/* ============================================================
   3. TIPOGRAFÍA
   ============================================================ */
h1,h2,h3,h4,h5,h6,
.entry-title, .page-title {
	font-family: var(--ff-head);
	color: var(--hcn-800);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin-top: 0;
}

/* Secciones oscuras: headings y párrafos heredan blanco del contenedor */
.hcn-cta-section h1, .hcn-cta-section h2, .hcn-cta-section h3,
.hcn-cta-section h4, .hcn-cta-section h5, .hcn-cta-section h6,
.hcn-sale-section h1, .hcn-sale-section h2, .hcn-sale-section h3,
.hcn-section-dark h1, .hcn-section-dark h2, .hcn-section-dark h3,
.hcn-section-dark h4, .hcn-section-dark h5, .hcn-section-dark h6,
.hcn-hero h1, .hcn-hero h2, .hcn-hero h3,
.hcn-hero h4, .hcn-hero h5, .hcn-hero h6,
.hcn-hero .hcn-hero-title { color: #fff !important; }
.hcn-hero .hcn-hero-title em { color: var(--hcn-400) !important; }
.hcn-cta-section p, .hcn-section-dark p,
.hcn-hero p, .hcn-hero .hcn-hero-sub { color: rgba(255,255,255,.85) !important; }

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { color: var(--hcn-txt-md); margin: 0 0 var(--sp4); line-height: 1.8; }
strong { color: var(--hcn-txt); }

/* ============================================================
   COMPATIBILIDAD CON ELEMENTOR
   front-page.php reemplaza la página de inicio, pero todas las
   demás páginas construidas con Elementor funcionan con nuestro
   header/footer propio.
   ============================================================ */

/* Páginas Elementor normales dentro de #hcn-main */
body.elementor-page #hcn-main {
	padding: 0;
	background: transparent;
}

/* Headings y párrafos de Elementor no deben tomar el color heredado del tema */
body.elementor-page .elementor-widget-text-editor p,
body.elementor-page .elementor-widget-heading .elementor-heading-title {
	color: inherit;
	margin: 0;
}

/* Secciones full-width de Elementor */
body.elementor-page .elementor-section-full_width {
	width: 100%;
}

/* Elementor Canvas: ocultar nuestro header/footer en plantillas de lienzo completo */
body.elementor-template-canvas .hcn-topbar,
body.elementor-template-canvas .hcn-header,
body.elementor-template-canvas .hcn-nav-bar,
body.elementor-template-canvas .hcn-footer,
body.elementor-template-canvas .hcn-whatsapp-btn {
	display: none !important;
}

/* ============================================================
   4. BARRA TOP DE ANUNCIO (si el tema la tiene activa)
   ============================================================ */
.ast-banner-area,
.ast-above-header-section {
	background: var(--hcn-700) !important;
	color: var(--hcn-white) !important;
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	letter-spacing: .04em !important;
}

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header, #masthead,
.ast-site-header-wrap,
.ast-header-wrap {
	background: var(--hcn-white) !important;
	border-bottom: 1px solid var(--hcn-brd) !important;
	box-shadow: var(--hcn-sh-s) !important;
	transition: box-shadow var(--tr) !important;
}

.site-header.hcn-scrolled, #masthead.hcn-scrolled {
	box-shadow: var(--hcn-sh) !important;
}

/* Logo */
.custom-logo { max-height: 64px !important; width: auto !important; }

/* Nombre del sitio */
.site-title, .ast-site-title {
	font-family: var(--ff-head) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	color: var(--hcn-800) !important;
}
.site-title a, .ast-site-title a { color: var(--hcn-800) !important; }

.site-description {
	font-family: var(--ff-ui) !important;
	font-size: .6875rem !important;
	color: var(--hcn-600) !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

/* ── Menú de navegación ── */
.main-header-menu .menu-item > a,
.ast-nav-menu > li > a,
#site-navigation .menu > li > a {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--hcn-txt-md) !important;
	padding: .5rem .875rem !important;
	position: relative !important;
	transition: color var(--tr) !important;
}

/* Subrayado animado */
.main-header-menu .menu-item > a::after,
.ast-nav-menu > li > a::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 50%; right: 50%;
	height: 2px;
	background: var(--hcn-600);
	border-radius: var(--r-full);
	transition: left var(--tr), right var(--tr);
}

.main-header-menu .menu-item:hover > a::after,
.main-header-menu .current-menu-item > a::after,
.ast-nav-menu > li:hover > a::after,
.ast-nav-menu > .current-menu-item > a::after {
	left: .875rem; right: .875rem;
}

.main-header-menu .menu-item:hover > a,
.main-header-menu .current-menu-item > a,
.ast-nav-menu > li:hover > a,
.ast-nav-menu > .current-menu-item > a {
	color: var(--hcn-600) !important;
}

/* Submenú */
.main-header-menu .sub-menu, .ast-nav-menu .sub-menu {
	background: var(--hcn-white) !important;
	border-top: 3px solid var(--hcn-600) !important;
	border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
	box-shadow: var(--hcn-sh-l) !important;
	min-width: 210px !important;
	padding: var(--sp2) 0 !important;
}

.main-header-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu li > a {
	font-size: .8125rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--hcn-txt-md) !important;
	padding: var(--sp2) var(--sp5) !important;
	display: block !important;
	transition: background var(--tr), color var(--tr), padding-left var(--tr) !important;
}

.main-header-menu .sub-menu .menu-item > a:hover,
.ast-nav-menu .sub-menu li > a:hover {
	color: var(--hcn-600) !important;
	background: var(--hcn-50) !important;
	padding-left: calc(var(--sp5) + 6px) !important;
}

/* Carrito header */
.ast-cart-menu-wrap .count,
.ast-header-woo-cart .count {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	font-family: var(--ff-ui) !important;
	font-size: .625rem !important;
	font-weight: 800 !important;
	min-width: 17px !important;
	height: 17px !important;
	line-height: 17px !important;
	border-radius: var(--r-full) !important;
}

/* ============================================================
   6. HEADER MÓVIL
   ============================================================ */
@media (max-width: 921px) {
	.ast-mobile-header-wrap,
	.ast-header-break-point .site-header {
		background: var(--hcn-white) !important;
		box-shadow: var(--hcn-sh-s) !important;
	}

	.ast-menu-toggle, button.menu-toggle {
		color: var(--hcn-700) !important;
		border: 1.5px solid var(--hcn-100) !important;
		border-radius: var(--r) !important;
		padding: var(--sp1) var(--sp2) !important;
		background: transparent !important;
	}
	.ast-menu-toggle:hover, button.menu-toggle:hover {
		background: var(--hcn-50) !important;
		border-color: var(--hcn-600) !important;
	}

	.ast-mobile-popup-drawer .menu-item > a,
	.ast-header-break-point .menu-item > a {
		font-family: var(--ff-ui) !important;
		font-size: .9375rem !important;
		font-weight: 600 !important;
		color: var(--hcn-txt) !important;
		padding: var(--sp4) var(--sp6) !important;
		border-bottom: 1px solid var(--hcn-brd-l) !important;
		display: block !important;
	}
	.ast-mobile-popup-drawer .menu-item > a:hover {
		color: var(--hcn-600) !important;
		background: var(--hcn-50) !important;
	}
}

/* ============================================================
   6b. SUPRIMIR ELEMENTOS RESIDUALES DE ASTRA
   ============================================================ */

/* Ocultar el buscador flotante / popup de Astra que se inyecta aunque tengamos header.php propio */
.ast-search-menu-icon,
.ast-search-icon,
.ast-search-icon-type-link,
.ast-search-icon-group,
.ast-fullscreen-search,
.ast-popup-search-box,
.search-caret,
.ast-inline-search-form:not(.hcn-search-form) {
	display: none !important;
}

/* ============================================================
   7. BOTONES GLOBALES
   ============================================================ */
.ast-button,
.button:not(.ast-menu-toggle):not(.menu-toggle):not(.hcn-qty-minus):not(.hcn-qty-plus),
input[type="submit"],
.wp-block-button__link {
	font-family: var(--ff-ui) !important;
	font-weight: 700 !important;
	font-size: .8125rem !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	border-radius: var(--r-full) !important;
	padding: .75rem 1.75rem !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--sp2) !important;
	line-height: 1.2 !important;
	transition: all var(--tr) !important;
	text-decoration: none !important;
}

/* Primario */
.ast-button,
.button:not(.ast-menu-toggle):not(.button-secondary):not(.alt):not(.hcn-qty-minus):not(.hcn-qty-plus),
input[type="submit"] {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border-color: var(--hcn-600) !important;
	box-shadow: 0 4px 12px rgba(22,163,74,.25) !important;
}
.ast-button:hover,
.button:not(.ast-menu-toggle):not(.button-secondary):not(.alt):not(.hcn-qty-minus):not(.hcn-qty-plus):hover,
input[type="submit"]:hover {
	background: var(--hcn-700) !important;
	border-color: var(--hcn-700) !important;
	color: var(--hcn-white) !important;
	box-shadow: 0 8px 20px rgba(21,128,61,.35) !important;
	transform: translateY(-1px) !important;
}

/* Secundario / outline */
.button.alt, .button.button-secondary {
	background: transparent !important;
	color: var(--hcn-600) !important;
	border-color: var(--hcn-600) !important;
	box-shadow: none !important;
}
.button.alt:hover, .button.button-secondary:hover {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
}

/* ============================================================
   8. HERO / COVER BLOCK (bloque Gutenberg de portada)
   ============================================================ */
.wp-block-cover,
.wp-block-cover-image {
	border-radius: 0 !important;
	overflow: hidden !important;
}

.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container {
	max-width: 900px !important;
	margin: 0 auto !important;
	text-align: center !important;
	padding: var(--sp10) var(--sp4) !important;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover-image .wp-block-cover__inner-container h1,
.wp-block-cover-image .wp-block-cover__inner-container h2 {
	font-family: var(--ff-head) !important;
	font-size: clamp(2rem, 6vw, 3.5rem) !important;
	font-weight: 700 !important;
	color: var(--hcn-white) !important;
	text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
	letter-spacing: -.02em !important;
	word-break: break-word !important;
	hyphens: none !important;
	-webkit-hyphens: none !important;
	margin-bottom: var(--sp4) !important;
}

.wp-block-cover .wp-block-cover__inner-container p {
	color: rgba(255,255,255,.9) !important;
	font-size: clamp(.9rem, 2vw, 1.125rem) !important;
	text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
}

/* Botón dentro del cover */
.wp-block-cover .wp-element-button,
.wp-block-cover .wp-block-button__link {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border-radius: var(--r-full) !important;
	padding: .875rem 2.5rem !important;
	font-family: var(--ff-ui) !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	border: 2px solid var(--hcn-600) !important;
	box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
	transition: all var(--tr) !important;
}
.wp-block-cover .wp-element-button:hover,
.wp-block-cover .wp-block-button__link:hover {
	background: var(--hcn-white) !important;
	color: var(--hcn-700) !important;
	transform: translateY(-2px) !important;
}

/* ============================================================
   9. FORMULARIOS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea, select {
	font-family: var(--ff-body) !important;
	font-size: .9375rem !important;
	color: var(--hcn-txt) !important;
	background: var(--hcn-white) !important;
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: var(--r) !important;
	padding: .625rem 1rem !important;
	width: 100% !important;
	transition: border-color var(--tr), box-shadow var(--tr) !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus, select:focus {
	border-color: var(--hcn-600) !important;
	box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
}

input::placeholder, textarea::placeholder { color: var(--hcn-txt-xs) !important; }

label {
	font-family: var(--ff-ui) !important;
	font-size: .875rem !important;
	font-weight: 600 !important;
	color: var(--hcn-txt-md) !important;
	letter-spacing: .02em !important;
	margin-bottom: var(--sp1) !important;
	display: block !important;
}

/* ============================================================
   10. SIDEBAR / WIDGETS
   ============================================================ */
.widget, .wp-block-widget-group {
	background: var(--hcn-white);
	border-radius: var(--r-lg);
	padding: var(--sp6);
	margin-bottom: var(--sp6);
	box-shadow: var(--hcn-sh-s);
	border: 1px solid var(--hcn-brd-l);
}

.widget-title, .widgettitle {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 800 !important;
	color: var(--hcn-700) !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	margin-bottom: var(--sp5) !important;
	padding-bottom: var(--sp3) !important;
	border-bottom: 2px solid var(--hcn-100) !important;
}

/* Lista de categorías del widget */
.widget_product_categories ul,
.widget_product_categories ul.product-categories {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.widget_product_categories ul li a,
.widget_product_categories ul.product-categories li a {
	font-family: var(--ff-ui) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	color: var(--hcn-txt-md) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: var(--sp2) var(--sp3) !important;
	border-radius: var(--r) !important;
	transition: background var(--tr), color var(--tr) !important;
}

.widget_product_categories ul li a:hover,
.widget_product_categories ul.product-categories li a:hover {
	color: var(--hcn-700) !important;
	background: var(--hcn-50) !important;
}

.widget_product_categories ul li.current-cat > a,
.widget_product_categories ul.product-categories li.current-cat > a {
	color: var(--hcn-700) !important;
	background: var(--hcn-100) !important;
	font-weight: 700 !important;
}

/* Conteo de productos en widget */
.widget_product_categories .count {
	font-size: .75rem !important;
	background: var(--hcn-brd-l) !important;
	color: var(--hcn-txt-lt) !important;
	border-radius: var(--r-full) !important;
	padding: 1px 7px !important;
	font-weight: 700 !important;
	min-width: 24px !important;
	text-align: center !important;
}

.widget_product_categories ul li.current-cat > a .count {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
}

/* Layered nav (filtros de atributo con checkbox) */
.woocommerce-widget-layered-nav-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-widget-layered-nav-list__item a {
	font-family: var(--ff-ui) !important;
	font-size: .875rem !important;
	color: var(--hcn-txt-md) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--sp2) !important;
	padding: var(--sp2) var(--sp3) !important;
	border-radius: var(--r) !important;
	transition: background var(--tr), color var(--tr) !important;
}

.woocommerce-widget-layered-nav-list__item a::before {
	content: '' !important;
	width: 16px !important;
	height: 16px !important;
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: 4px !important;
	flex-shrink: 0 !important;
	transition: border-color var(--tr), background var(--tr) !important;
}

.woocommerce-widget-layered-nav-list__item a:hover::before,
.woocommerce-widget-layered-nav-list__item--chosen a::before {
	border-color: var(--hcn-600) !important;
	background: var(--hcn-600) !important;
}

.woocommerce-widget-layered-nav-list__item a:hover {
	color: var(--hcn-700) !important;
	background: var(--hcn-50) !important;
}

.woocommerce-widget-layered-nav-list__item .count {
	margin-left: auto !important;
	font-size: .75rem !important;
	background: var(--hcn-brd-l) !important;
	color: var(--hcn-txt-lt) !important;
	border-radius: var(--r-full) !important;
	padding: 1px 7px !important;
	font-weight: 700 !important;
}

/* ============================================================
   11. BREADCRUMBS
   ============================================================ */
.astra-breadcrumbs, .ast-breadcrumbs-wrapper, .woocommerce-breadcrumb {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	color: var(--hcn-txt-lt) !important;
}
.astra-breadcrumbs a, .woocommerce-breadcrumb a {
	color: var(--hcn-600) !important;
	font-weight: 600 !important;
}

/* ============================================================
   12. PAGINACIÓN
   ============================================================ */
.page-numbers li .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: var(--r) !important;
	color: var(--hcn-txt-md) !important;
	width: 38px !important;
	height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--ff-ui) !important;
	font-weight: 600 !important;
	font-size: .875rem !important;
	transition: var(--tr) !important;
}

.page-numbers li .page-numbers:hover,
.woocommerce-pagination .page-numbers li .page-numbers:hover {
	background: var(--hcn-50) !important;
	border-color: var(--hcn-600) !important;
	color: var(--hcn-700) !important;
}

.page-numbers li span.current,
.woocommerce-pagination .page-numbers li span.current {
	background: var(--hcn-600) !important;
	border-color: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
}

/* ============================================================
   13. BUSCADOR
   ============================================================ */
.search-form { display: flex !important; gap: var(--sp2); }
.search-form .search-field {
	border-radius: var(--r-full) !important;
	flex: 1 !important;
}

.search-form .search-submit {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border: none !important;
	border-radius: var(--r-full) !important;
	padding: .625rem 1.25rem !important;
	font-family: var(--ff-ui) !important;
	font-weight: 700 !important;
	font-size: .75rem !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: var(--tr) !important;
	white-space: nowrap !important;
}
.search-form .search-submit:hover { background: var(--hcn-700) !important; }

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer, #colophon {
	background: var(--hcn-800) !important;
	color: rgba(255,255,255,.85) !important;
}

.ast-footer-widget-area {
	padding: var(--sp12) 0 var(--sp10) !important;
	border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.site-footer .widget, #colophon .widget {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

.site-footer .widget-title, #colophon .widget-title,
.site-footer .widgettitle, #colophon .widgettitle {
	font-family: var(--ff-ui) !important;
	color: var(--hcn-white) !important;
	font-size: .8125rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	border-bottom-color: rgba(255,255,255,.15) !important;
	margin-bottom: var(--sp5) !important;
}

.site-footer p, #colophon p { color: rgba(255,255,255,.65) !important; font-size: .9rem !important; }
.site-footer a, #colophon a { color: #86EFAC !important; transition: color var(--tr) !important; }
.site-footer a:hover, #colophon a:hover { color: var(--hcn-white) !important; }

.ast-footer-below-section, .ast-footer-bar {
	background: var(--hcn-900) !important;
	border-top: 1px solid rgba(255,255,255,.08) !important;
	padding: var(--sp4) 0 !important;
}

.ast-footer-copyright, .ast-copyright-text {
	color: rgba(255,255,255,.4) !important;
	font-size: .8125rem !important;
	font-family: var(--ff-ui) !important;
}

/* ============================================================
   15. PÁGINA 404
   ============================================================ */
.hcn-404-page #main {
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp16) var(--sp4);
}

.hcn-404-container {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}

.hcn-404-icon {
	font-size: 3.5rem;
	display: block;
	margin-bottom: var(--sp4);
	animation: hcn-sway 3s ease-in-out infinite;
}

@keyframes hcn-sway {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(6deg); }
}

.hcn-404-number {
	font-family: var(--ff-head);
	font-size: clamp(6rem, 18vw, 10rem);
	font-weight: 900;
	color: var(--hcn-100);
	line-height: 1;
	margin: 0;
	user-select: none;
}

.hcn-404-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	color: var(--hcn-800);
	margin-top: -var(--sp4);
	margin-bottom: var(--sp4);
}

.hcn-404-text {
	color: var(--hcn-txt-lt);
	margin: 0 auto var(--sp8);
	max-width: 480px;
}

.hcn-404-search { margin: 0 auto var(--sp8); max-width: 440px; }

.hcn-404-actions {
	display: flex;
	gap: var(--sp4);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--sp12);
}

.hcn-404-cats-title {
	font-family: var(--ff-ui);
	font-size: .75rem;
	font-weight: 800;
	color: var(--hcn-txt-xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: var(--sp5);
}

.hcn-404-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp3);
}

@media (max-width: 480px) { .hcn-404-categories { grid-template-columns: repeat(2, 1fr); } }

.hcn-404-cat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp2);
	padding: var(--sp4) var(--sp3);
	background: var(--hcn-white);
	border-radius: var(--r-lg);
	border: 1px solid var(--hcn-brd);
	color: var(--hcn-txt-md);
	font-family: var(--ff-ui);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--tr);
}

.hcn-404-cat-item:hover {
	border-color: var(--hcn-600);
	box-shadow: var(--hcn-sh-s);
	color: var(--hcn-700);
	transform: translateY(-2px);
}

.hcn-404-cat-item img {
	width: 70px; height: 70px; object-fit: cover; border-radius: var(--r);
}

.hcn-404-cat-placeholder {
	width: 70px; height: 70px;
	display: flex; align-items: center; justify-content: center;
	background: var(--hcn-100); border-radius: var(--r);
	font-size: 1.875rem;
}

/* ============================================================
   16. BOTÓN WHATSAPP FLOTANTE
   ============================================================ */
.hcn-whatsapp-btn {
	position: fixed;
	bottom: 28px; right: 28px;
	width: 56px; height: 56px;
	background: #25D366;
	border-radius: var(--r-full);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 20px rgba(37,211,102,.45);
	z-index: 9999;
	transition: transform var(--tr), box-shadow var(--tr);
	text-decoration: none;
}
.hcn-whatsapp-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 32px rgba(37,211,102,.55);
}
.hcn-whatsapp-btn svg { width: 28px; height: 28px; fill: #fff; display: block; }

@media (max-width: 768px) {
	.hcn-whatsapp-btn { bottom: 80px; right: 16px; width: 48px; height: 48px; }
	.hcn-whatsapp-btn svg { width: 24px; height: 24px; }
}

/* ============================================================
   17. SCROLL TO TOP
   ============================================================ */
.ast-scroll-to-top {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border-radius: var(--r-full) !important;
	box-shadow: var(--hcn-sh) !important;
}
.ast-scroll-to-top:hover { background: var(--hcn-700) !important; }

/* ============================================================
   18. PÁGINAS ESTÁTICAS (Nosotros, Contacto, etc.)
   ============================================================ */

/* ── Banner de página ── */
.hcn-page-banner {
	background: linear-gradient(135deg, var(--hcn-800) 0%, var(--hcn-600) 100%);
	padding: 2.5rem 0 2rem;
	position: relative;
	overflow: hidden;
}

.hcn-page-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 80% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
	pointer-events: none;
}

.hcn-page-banner-sm {
	padding: 1.5rem 0 1.25rem;
}

.hcn-page-banner-wc {
	background: linear-gradient(135deg, var(--hcn-800) 0%, #0c4a6e 100%) !important;
}

.hcn-page-banner-inner {
	position: relative;
	z-index: 1;
}

.hcn-page-banner-title {
	font-family: var(--ff-head) !important;
	font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: .5rem 0 0 !important;
	line-height: 1.2 !important;
}

.hcn-page-banner-title-sm {
	font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
	margin-top: .375rem !important;
}

/* Breadcrumbs dentro del banner */
.hcn-page-banner .hcn-breadcrumb,
.hcn-page-banner .woocommerce-breadcrumb {
	margin: 0 !important;
}

.hcn-bc-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcn-bc-list li {
	font-family: var(--ff-ui);
	font-size: .75rem;
	color: rgba(255,255,255,.7);
}

.hcn-bc-list li a {
	color: rgba(255,255,255,.85) !important;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--tr);
}
.hcn-bc-list li a:hover { color: #fff !important; }

.hcn-bc-sep { color: rgba(255,255,255,.4) !important; }

.hcn-bc-current { color: rgba(255,255,255,.6) !important; }

/* ── Contenedor de contenido ── */
.hcn-page-main {
	background: var(--hcn-bg);
	min-height: 60vh;
}

.hcn-page-content-wrap {
	padding: 3rem 0 4rem;
}

/* ── Artículo de página ── */
.hcn-page-article {
	max-width: 860px;
}

.hcn-page-thumbnail {
	margin-bottom: 2rem;
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--hcn-sh);
}

.hcn-page-thumb-img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 460px;
	object-fit: cover;
}

/* Tipografía del contenido de página */
.hcn-page-entry-content,
.hcn-page-main .entry-content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--hcn-txt-md);
}

.hcn-page-entry-content h2,
.hcn-page-entry-content h3,
.hcn-page-entry-content h4 {
	color: var(--hcn-800);
	margin-top: 2rem;
	margin-bottom: .75rem;
}

.hcn-page-entry-content h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
.hcn-page-entry-content h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

.hcn-page-entry-content p { margin-bottom: 1.25rem; }

.hcn-page-entry-content ul,
.hcn-page-entry-content ol {
	padding-left: 1.5rem;
	margin-bottom: 1.25rem;
}

.hcn-page-entry-content li { margin-bottom: .375rem; }

.hcn-page-entry-content a {
	color: var(--hcn-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hcn-page-entry-content a:hover { color: var(--hcn-900); }

.hcn-page-entry-content blockquote {
	border-left: 4px solid var(--hcn-500);
	padding: 1rem 1.5rem;
	background: var(--hcn-50);
	border-radius: 0 var(--r) var(--r) 0;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--hcn-txt-md);
}

.hcn-page-entry-content img {
	border-radius: var(--r-lg);
	max-width: 100%;
	height: auto;
}

/* ── PÁGINA DE CONTACTO ── */
.hcn-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 860px) {
	.hcn-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.hcn-contact-info {
	background: var(--hcn-white);
	border-radius: var(--r-xl);
	padding: 2rem;
	box-shadow: var(--hcn-sh-s);
	border: 1px solid var(--hcn-brd-l);
}

.hcn-contact-info-title {
	font-family: var(--ff-head) !important;
	font-size: 1.25rem !important;
	color: var(--hcn-800) !important;
	margin: 0 0 1.25rem !important;
	padding-bottom: .75rem !important;
	border-bottom: 2px solid var(--hcn-100) !important;
}

.hcn-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.hcn-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
}

.hcn-cl-icon {
	font-size: 1.25rem;
	line-height: 1.4;
	flex-shrink: 0;
}

.hcn-contact-list li div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hcn-contact-list li strong {
	font-family: var(--ff-ui);
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--hcn-txt-lt);
}

.hcn-contact-list li span {
	font-size: .9375rem;
	color: var(--hcn-txt-md);
}

.hcn-contact-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	background: #25D366;
	color: #fff !important;
	text-decoration: none !important;
	padding: .625rem 1.25rem;
	border-radius: var(--r-full);
	font-family: var(--ff-ui);
	font-size: .875rem;
	font-weight: 700;
	transition: opacity var(--tr);
}
.hcn-contact-wa-btn:hover { opacity: .88; }

.hcn-contact-map {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--hcn-brd-l);
}
.hcn-contact-map iframe { display: block; }

.hcn-contact-form-wrap {
	background: var(--hcn-white);
	border-radius: var(--r-xl);
	padding: 2rem 2.5rem;
	box-shadow: var(--hcn-sh-s);
	border: 1px solid var(--hcn-brd-l);
}

@media (max-width: 600px) {
	.hcn-contact-form-wrap { padding: 1.5rem; }
}

/* ── WooCommerce pages (Carrito, Checkout, Mi cuenta) ── */
.hcn-page-wc-inner {
	padding: 2.5rem 0 4rem;
}

/* ── Campos de formulario en Checkout ── */
.woocommerce-checkout .form-row label,
.woocommerce-account .form-row label {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 700 !important;
	color: var(--hcn-txt-md) !important;
	letter-spacing: .03em !important;
	margin-bottom: .3rem !important;
	display: block !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: var(--r) !important;
	padding: .6875rem 1rem !important;
	font-family: var(--ff-body) !important;
	font-size: .9375rem !important;
	color: var(--hcn-txt) !important;
	background: var(--hcn-white) !important;
	width: 100% !important;
	transition: border-color var(--tr), box-shadow var(--tr) !important;
	outline: none !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-account .form-row input.input-text:focus {
	border-color: var(--hcn-600) !important;
	box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* Layout del checkout en 2 columnas */
.woocommerce-checkout .col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem !important;
}

@media (max-width: 768px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
}

/* Mi cuenta: ícono por opción del menú */
.woocommerce-MyAccount-navigation ul li a::before {
	content: '→ ';
	color: var(--hcn-600);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--hcn-white) !important;
	border-radius: var(--r-lg) !important;
	padding: 2rem !important;
	box-shadow: var(--hcn-sh-s) !important;
	border: 1px solid var(--hcn-brd-l) !important;
}

/* Layout Mi cuenta en 2 columnas */
.woocommerce-account .woocommerce {
	display: grid !important;
	grid-template-columns: 220px 1fr !important;
	gap: 1.5rem !important;
	align-items: start !important;
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr !important;
	}
}

/* ── Resultados de búsqueda de productos ── */
.woocommerce-products-header__title,
.woocommerce-products-header h1 {
	font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
	color: var(--hcn-800) !important;
	margin-bottom: 1.5rem !important;
}

/* Fondo de páginas WC (carrito, checkout) */
.woocommerce-cart .hcn-page-main,
.woocommerce-checkout .hcn-page-main {
	background: var(--hcn-bg);
}

/* ============================================================
   17b. FIBOSEARCH — solo wrappers propios, FiboSearch decide el resto
   ============================================================ */

/* Wrapper del header */
.hcn-search-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 580px;
}

/* Wrapper del hero */
.hcn-hero-search-wrap {
	position: relative;
	margin-bottom: 2rem;
	max-width: 540px;
	width: 100%;
}

/* Dropdown visible sobre el overlay del hero */
.dgwt-wcas-suggestions-wrapp { z-index: 999999 !important; }

/* ============================================================
   18. RESPONSIVE GENERAL
   ============================================================ */
@media (max-width: 768px) {
	body { font-size: 15px; }
	.ast-container { padding-left: var(--sp4) !important; padding-right: var(--sp4) !important; }
}