/**
 * DASALO — Sistema de Marca
 *
 * Guía oficial de identidad visual.
 * Agosto 2026.
 *
 * Este archivo se carga después de style.css.
 * Su función es aplicar la identidad visual oficial
 * sin modificar la estructura histórica del tema.
 */


/* =========================================================
   VARIABLES OFICIALES DE MARCA
========================================================= */

:root {

	/* Colores principales */
	--dasalo-negro: #171310;
	--dasalo-crema: #F1EBE1;
	--dasalo-bronce: #B08D57;
	--dasalo-piso: #C9C6BE;
	--dasalo-fondo: #F3F3F1;

	/* Tipografías oficiales */
	--dasalo-font-editorial: 'Cormorant Garamond', serif;
	--dasalo-font-functional: 'Plus Jakarta Sans', sans-serif;

	/* Compatibilidad con variables antiguas */
	--ngold: var(--dasalo-bronce);
	--nocre: var(--dasalo-negro);
}


/* =========================================================
   BASE GENERAL
========================================================= */

html,
body {
	font-family: var(--dasalo-font-functional);
	color: var(--dasalo-negro);
}

body {
	background: #fff;
}

p,
li,
span,
small,
label,
input,
select,
textarea,
button {
	font-family: var(--dasalo-font-functional);
}


/* =========================================================
   TIPOGRAFÍA EDITORIAL
========================================================= */

h1,
h2,
h3,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.product_title,
.woocommerce-loop-product__title,
.producto-item h3,
.related.products h2 {
	font-family: var(--dasalo-font-editorial);
}


/* =========================================================
   REGLA DE LEGIBILIDAD CORMORANT
========================================================= */

.product h2,
.woocommerce-loop-product__title,
.producto-item h3 {
	font-weight: 600;
}


/* =========================================================
   PRECIOS DE PRODUCTO
   Se conserva la apariencia anterior.
========================================================= */

.product .price,
.product .price *,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price *,
.producto-item .precio,
.producto-item .precio *,
.woocommerce div.product p.price,
.woocommerce div.product p.price *,
.woocommerce div.product span.price,
.woocommerce div.product span.price *,
.woocommerce-Price-amount,
.woocommerce-Price-amount *,
.woocommerce-Price-amount bdi {
	font-family: 'Roboto Condensed', Helvetica, sans-serif !important;
	font-weight: 400 !important;
}


/* =========================================================
   PRECIOS CARRITO / CHECKOUT
========================================================= */

.wc-block-components-product-price,
.wc-block-components-product-price *,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__value * {
	font-family: var(--dasalo-font-functional) !important;
	font-weight: 400;
}


/* =========================================================
   INTERFAZ FUNCIONAL
========================================================= */

button,
input,
select,
textarea,
label,
menu,
nav,
footer,
#topbar,
.woocommerce button,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce a.button,
.wc-block-components-button,
.wc-block-components-text-input,
.wc-block-components-checkbox,
.wc-block-components-radio-control,
.wc-block-components-totals-item__label,
.wc-block-components-product-name {
	font-family: var(--dasalo-font-functional);
}


/* =========================================================
   HEADER
========================================================= */

body > header {
	background: #fff;
	color: var(--dasalo-negro);
}

#topbar {
	background: var(--dasalo-negro);
	color: var(--dasalo-crema);
}


/* =========================================================
   LINKS Y ACENTOS
========================================================= */

menu li a:hover,
footer a:hover,
.woocommerce-MyAccount-content a {
	color: var(--dasalo-bronce);
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

form button,
.summary .button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--dasalo-negro);
	color: var(--dasalo-crema);
}

form button:hover,
.summary .button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--dasalo-bronce);
	color: var(--dasalo-negro);
}


/* =========================================================
   BOTONES HOME
========================================================= */

#home button {
	box-shadow:
		var(--dasalo-negro)
		0 0 0 3px
		inset;
}

#home button:first-child {
	background: var(--dasalo-negro);
	color: var(--dasalo-crema);
}

#home button:hover {
	background: var(--dasalo-bronce);

	box-shadow:
		var(--dasalo-bronce)
		0 0 0 3px
		inset;

	color: var(--dasalo-negro);
}


/* =========================================================
   FORMULARIOS
========================================================= */

input,
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox-control input {
	color: var(--dasalo-negro);
	background: #fff;
	border-color: var(--dasalo-piso);
}

input:focus,
select:focus,
textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus {
	border-color: var(--dasalo-bronce);
	outline-color: var(--dasalo-bronce);
}


/* =========================================================
   FONDOS SECUNDARIOS
========================================================= */

#single_header_new {
	background: var(--dasalo-fondo);
}

#colecciones_home {
	background:
		linear-gradient(
			0deg,
			var(--dasalo-fondo),
			var(--dasalo-fondo)
		)
		center 35%
		no-repeat;

	background-size: 100% 50%;
}


/* =========================================================
   ETIQUETAS DE OFERTA
========================================================= */

.woocommerce span.onsale {
	background: var(--dasalo-bronce);
	color: var(--dasalo-negro);
}


/* =========================================================
   PRODUCTOS
========================================================= */

.product h2,
.producto-item h3,
.woocommerce-loop-product__title {
	color: var(--dasalo-negro);
}

.product a.button {
	background: var(--dasalo-fondo);
	color: var(--dasalo-negro);
}

.product a.button:hover {
	background: var(--dasalo-bronce);
	color: var(--dasalo-negro);
}


/* =========================================================
   PRECIOS DE PRODUCTO
========================================================= */

.product .summary .price ins bdi,
ins .woocommerce-Price-amount bdi {
	color: var(--dasalo-negro);
}


/* =========================================================
   PRODUCTO INDIVIDUAL
========================================================= */

.summary .button {
	background: var(--dasalo-negro) !important;
	color: var(--dasalo-crema) !important;
}

.summary .button:hover {
	background: var(--dasalo-bronce) !important;
	color: var(--dasalo-negro) !important;
}


/* =========================================================
   PRODUCTOS RELACIONADOS
========================================================= */

.related.products h2 {
	border-color: var(--dasalo-piso);
}


/* =========================================================
   BORDES Y DIVISORES
========================================================= */

.related.products h2,
.woocommerce-MyAccount-navigation li,
.woocommerce-MyAccount-content,
.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
	border-color: var(--dasalo-piso);
}


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

.woocommerce-MyAccount-navigation li {
	color: var(--dasalo-negro);
	border-color: var(--dasalo-piso);
}

.woocommerce-MyAccount-navigation li.is-active {
	color: var(--dasalo-bronce);
}

.woocommerce-MyAccount-content {
	border-color: var(--dasalo-piso);
}

.woocommerce-MyAccount-content a {
	color: var(--dasalo-bronce);
}


/* =========================================================
   CARRITO Y CHECKOUT
========================================================= */

.wc-block-cart,
.wc-block-checkout,
.wc-block-components-sidebar-layout,
.wc-block-components-order-summary {
	color: var(--dasalo-negro);
}

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
	font-family: var(--dasalo-font-editorial);
	font-weight: 600;
	color: var(--dasalo-negro);
}

.wc-block-components-checkout-step__description,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__label,
.wc-block-components-product-metadata,
.wc-block-components-address-card {
	font-family: var(--dasalo-font-functional);
}


/* =========================================================
   BOTONES WOOCOMMERCE BLOCKS
========================================================= */

.wc-block-components-button {
	background: var(--dasalo-negro);
	color: var(--dasalo-crema);
}

.wc-block-components-button:hover {
	background: var(--dasalo-bronce);
	color: var(--dasalo-negro);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
	font-family: var(--dasalo-font-functional);
}

footer h4 {
	font-family: var(--dasalo-font-functional);
}


/* =========================================================
   AJUSTE HEADER / MENÚ DESKTOP
========================================================= */

@media all and (min-width: 961px) {

	body > header {
		gap: 2em;
	}

	menu {
		flex: 1;
		min-width: 0;
	}

	menu ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.6em;
	}

	menu li {
		flex: 0 0 auto;
		white-space: nowrap;
		position: relative;
	}

	menu li a {
		display: block;
	}

	nav {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}


/* =========================================================
   SUBMENÚS DESKTOP
========================================================= */

@media all and (min-width: 961px) {

	menu > div > ul > li > ul {
		position: absolute;
		top: 100%;
		left: 0;
		display: none;
		width: max-content;
		min-width: 300px;
		height: auto;
		padding: 0;
		margin: 0;
		background: var(--dasalo-negro);
		overflow: visible;
		z-index: 200;
	}

	menu > div > ul > li:hover > ul {
		display: block;
	}

	menu > div > ul > li > ul > li {
		position: relative;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	menu > div > ul > li > ul > li > a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 300px;
		padding: 0.7em 1em;
		background: var(--dasalo-negro);
		color: var(--dasalo-crema);
		line-height: 1.35;
		white-space: nowrap;
		font-family: var(--dasalo-font-functional);
		font-size: 0.95em;
		font-weight: 400;
		text-align: left;
	}

	menu > div > ul > li > ul > li > a:hover {
		padding-left: 1.25em;
		padding-right: 0.75em;
		background: var(--dasalo-bronce);
		color: var(--dasalo-negro);
	}

	menu > div > ul > li > ul > li > ul {
		position: absolute;
		top: 0;
		left: 100%;
		display: none;
		width: max-content;
		min-width: 300px;
		margin: 0;
		padding: 0;
		background: var(--dasalo-negro);
		z-index: 210;
	}

	menu > div > ul > li > ul > li:hover > ul {
		display: block;
	}

	menu > div > ul > li > ul > li > ul > li {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	menu > div > ul > li > ul > li > ul > li > a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 300px;
		padding: 0.7em 1em;
		background: var(--dasalo-negro);
		color: var(--dasalo-crema);
		line-height: 1.35;
		white-space: nowrap;
		font-family: var(--dasalo-font-functional);
		font-size: 0.95em;
		font-weight: 400;
		text-align: left;
	}

	menu > div > ul > li > ul > li > ul > li > a:hover {
		background: var(--dasalo-bronce);
		color: var(--dasalo-negro);
	}
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media all and (max-width: 960px) {

	#menu_opener > div {
		background: var(--dasalo-piso);
	}

	menu {
		background: var(--dasalo-fondo);
	}

	menu > div > ul > li > ul > li a {
		background: transparent;
		color: var(--dasalo-negro);
		border-color: var(--dasalo-piso);
	}

	menu > div > ul > li > ul > li > ul {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		padding: 0;
		background: transparent;
		overflow: visible;
	}

	menu > div > ul > li > ul > li > ul > li {
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	menu > div > ul > li > ul > li > ul > li > a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		padding-left: 2.5em;
		padding-right: 1em;
		background: transparent;
		color: var(--dasalo-negro);
		border-top: var(--dasalo-piso) solid 1px;
		line-height: 2.5em;
		white-space: normal;
		font-family: var(--dasalo-font-functional);
		text-align: left;
	}

	menu > div > ul > li > ul > li > ul > li > a:hover {
		background: transparent;
		color: var(--dasalo-bronce);
	}

	.wc-block-components-title,
	.wc-block-components-checkout-step__title,
	.wc-block-cart__totals-title {
		font-family: var(--dasalo-font-editorial);
		font-weight: 600;
	}

	#colecciones_home p a {
		background: var(--dasalo-negro);
		color: var(--dasalo-crema);
	}
}