/*
Theme Name:  Mieles Pasabi
Theme URI:   https://tostatronic.com
Description: Tema hijo de Astra para Mieles Pasabi. Colorimetría de abeja (miel, ámbar, negro y crema), tipografía cálida y estilos para el catálogo de productos con etiquetas de envío.
Author:      Tostatronic
Author URI:  https://tostatronic.com
Template:    astra
Version:     1.0.1
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mieles-pasabi
*/

/* ==========================================================================
   Paleta de abeja (respaldo; la paleta oficial se guarda en el Personalizador
   al activar el tema, ver functions.php)
   --ast-global-color-0  miel        #F2A900
   --ast-global-color-1  miel oscura #C98600
   --ast-global-color-2  negro abeja #1F1A17
   --ast-global-color-3  café        #4A3B2A
   --ast-global-color-4  blanco      #FFFFFF
   --ast-global-color-5  crema       #FFF6DF
   --ast-global-color-6  miel clara  #F7D774
   --ast-global-color-7  chocolate   #3B2F2F
   --ast-global-color-8  amarillo    #FFC72C
   ========================================================================== */

:root {
	--mp-miel: var(--ast-global-color-0, #f2a900);
	--mp-miel-oscura: var(--ast-global-color-1, #c98600);
	--mp-negro: var(--ast-global-color-2, #1f1a17);
	--mp-cafe: var(--ast-global-color-3, #4a3b2a);
	--mp-blanco: var(--ast-global-color-4, #ffffff);
	--mp-crema: var(--ast-global-color-5, #fff6df);
	--mp-miel-clara: var(--ast-global-color-6, #f7d774);
	--mp-chocolate: var(--ast-global-color-7, #3b2f2f);
	--mp-amarillo: var(--ast-global-color-8, #ffc72c);
	--mp-fuente-titulos: "Lora", Georgia, serif;
	--mp-fuente-texto: "Nunito", "Segoe UI", system-ui, sans-serif;
	--mp-radio: 14px;
	--mp-sombra: 0 10px 30px rgba(31, 26, 23, 0.08);
	--mp-panal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23f2a900' stroke-opacity='0.16' stroke-width='2'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23f2a900' stroke-opacity='0.16' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */

body,
button,
input,
select,
textarea {
	font-family: var(--mp-fuente-texto);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--mp-fuente-titulos);
	letter-spacing: -0.01em;
}

/* ---------- Cabecera ---------- */

.site-header {
	border-bottom: 3px solid var(--mp-miel);
}

.site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 700;
	color: var(--mp-negro);
}

.site-title a::before {
	content: "";
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	background: url("assets/img/logo-mark.svg") no-repeat center / contain;
}

.site-description {
	color: var(--mp-cafe);
}

.main-header-menu .menu-link {
	font-weight: 700;
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-link:hover {
	color: var(--mp-miel-oscura);
}

/* ---------- Botones ---------- */

.ast-button,
.button,
button,
.wp-block-button__link,
input[type="submit"] {
	border-radius: 10px;
	font-weight: 700;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--mp-miel);
	color: var(--mp-negro);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mp-miel);
	color: var(--mp-negro);
}

/* ---------- Portada ---------- */

.mp-hero.wp-block-cover {
	background: radial-gradient(ellipse at 20% 20%, #ffe9a8 0%, rgba(255, 233, 168, 0) 55%),
		linear-gradient(135deg, #fff6df 0%, #ffe5a3 60%, #f2a900 130%);
	color: var(--mp-negro);
}

.mp-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mp-panal);
	background-size: 56px 100px;
	opacity: 0.9;
	pointer-events: none;
}

.mp-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	color: var(--mp-negro);
}

.mp-hero .wp-block-cover__background {
	display: none;
}

.mp-hero__kicker {
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--mp-miel-oscura);
	margin-bottom: 0.5rem;
}

.mp-hero__titulo {
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	line-height: 1.08;
	margin: 0 0 1rem;
	color: var(--mp-negro);
	max-width: 14ch;
}

.mp-hero__texto {
	font-size: 1.15rem;
	max-width: 52ch;
	color: var(--mp-cafe);
}

.mp-hero__botones {
	margin-top: 1.5rem;
}

/* ---------- Secciones de la portada ---------- */

.mp-seccion {
	padding: 4rem 1.5rem;
}

.mp-seccion--beneficios {
	background: var(--mp-blanco);
}

.mp-seccion--productos {
	background: var(--mp-crema);
}

.mp-seccion--como {
	background: var(--mp-blanco);
}

.mp-seccion--contacto {
	padding-top: 1rem;
	padding-bottom: 4rem;
	background: var(--mp-blanco);
}

.mp-seccion__titulo {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	margin-bottom: 0.5rem;
}

.mp-seccion__titulo::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 0.75rem auto 0;
	border-radius: 2px;
	background: var(--mp-miel);
}

.mp-seccion__sub {
	color: var(--mp-cafe);
	margin-bottom: 2rem;
}

.mp-beneficio {
	background: var(--mp-crema);
	border: 1px solid var(--mp-miel-clara);
	border-radius: var(--mp-radio);
	padding: 1.75rem 1.25rem;
}

.mp-beneficio__icono {
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.mp-beneficio h3 {
	font-size: 1.2rem;
	margin-bottom: 0.4rem;
}

.mp-pasos .wp-block-column {
	padding: 1rem;
}

.mp-paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--mp-miel);
	color: var(--mp-negro);
	font-family: var(--mp-fuente-texto);
	font-size: 1rem;
	font-weight: 800;
}

.mp-lead {
	font-size: 1.2rem;
	color: var(--mp-cafe);
}

/* ---------- Catálogo (WooCommerce) ---------- */

.woocommerce ul.products li.product {
	background: var(--mp-blanco);
	border: 1px solid #f1e6c8;
	border-radius: var(--mp-radio);
	padding: 0.9rem;
	box-shadow: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--mp-sombra);
}

.woocommerce ul.products li.product a img {
	border-radius: 10px;
	margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--mp-negro);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mp-negro);
	font-weight: 800;
}

.woocommerce ul.products li.product .price {
	font-size: 1.15rem;
}

.woocommerce div.product p.price {
	font-size: 1.8rem;
}

/* Listón de envío gratis usa la miel del tema */
.mp-liston {
	background: var(--mp-miel);
	color: var(--mp-negro);
}

/* Página de producto */
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--mp-radio);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--mp-miel);
}

.woocommerce div.product .product_meta {
	color: var(--mp-cafe);
	font-size: 0.9rem;
}

/* Título de la tienda */
.woocommerce-products-header__title.page-title {
	font-size: 2rem;
}

/* ---------- Pie de página ---------- */

.site-footer {
	background: var(--mp-chocolate);
	color: #f3e9d8;
}

.site-footer a {
	color: var(--mp-amarillo);
}

.site-footer .ast-footer-copyright {
	font-size: 0.9rem;
}

/* ---------- Detalles ---------- */

::selection {
	background: var(--mp-amarillo);
	color: var(--mp-negro);
}

@media (max-width: 921px) {
	.mp-seccion {
		padding: 3rem 1rem;
	}
	.mp-hero.wp-block-cover {
		min-height: 420px !important;
	}
}