/*
Theme Name:  Mieles Pasabi
Theme URI:   https://tostatronic.com
Description: Tema hijo de Astra para Mieles Pasabi. Paleta toffee, chocolate, lemonade, cream y lemon curd; títulos manuscritos (Caveat), banner con miel cayendo y estilos para el catálogo de productos con etiquetas de envío.
Author:      Tostatronic
Author URI:  https://tostatronic.com
Template:    astra
Version:     1.1.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mieles-pasabi
*/

/* ==========================================================================
   Paleta (respaldo; la oficial se guarda en el Personalizador al activar el
   tema, ver functions.php)
   --ast-global-color-0  toffee          #BD7A50
   --ast-global-color-1  toffee oscuro   #9E5F38
   --ast-global-color-2  chocolate       #421A1E
   --ast-global-color-3  chocolate texto #4E2A24
   --ast-global-color-4  blanco          #FFFFFF
   --ast-global-color-5  cream           #F6EEE9
   --ast-global-color-6  lemonade        #F3AABC
   --ast-global-color-7  chocolate pie   #421A1E
   --ast-global-color-8  lemon curd      #FDE977
   ========================================================================== */

:root {
	--mp-toffee: var(--ast-global-color-0, #bd7a50);
	--mp-toffee-oscuro: var(--ast-global-color-1, #9e5f38);
	--mp-chocolate: var(--ast-global-color-2, #421a1e);
	--mp-texto: var(--ast-global-color-3, #4e2a24);
	--mp-blanco: var(--ast-global-color-4, #ffffff);
	--mp-crema: var(--ast-global-color-5, #f6eee9);
	--mp-lemonade: var(--ast-global-color-6, #f3aabc);
	--mp-limon: var(--ast-global-color-8, #fde977);
	--mp-crema-oscura: #eadfd6;
	--mp-fuente-titulos: "Caveat", "Segoe Script", "Bradley Hand", cursive;
	--mp-fuente-producto: "Lora", Georgia, serif;
	--mp-fuente-texto: "Nunito", "Segoe UI", system-ui, sans-serif;
	--mp-radio: 18px;
	--mp-sombra: 0 12px 32px rgba(66, 26, 30, 0.1);
}

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

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

body {
	background: var(--mp-crema);
	color: var(--mp-texto);
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--mp-fuente-titulos);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.05;
	color: var(--mp-chocolate);
}

/* Caveat tiene ojo pequeño: los títulos suben de tamaño para compensar. */
h1 { font-size: clamp(2.8rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2.3rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
h4 { font-size: 1.6rem; }

/* Los nombres de producto se quedan en Lora, tal como estaban. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.woocommerce-products-header__title.page-title {
	font-family: var(--mp-fuente-producto);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

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

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

.site-title {
	font-size: 2.2rem;
}

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

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

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

.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-toffee-oscuro);
}

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

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

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

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

/* ---------- Portada: banner con miel cayendo ---------- */

.mp-hero.wp-block-cover {
	position: relative;
	min-height: 620px !important;
	overflow: hidden;
	background: var(--mp-crema);
	color: var(--mp-chocolate);
}

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

.mp-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px !important; /* Astra/Cover a ancho completo lo ponen en none */
	margin: 0 auto;
	color: var(--mp-chocolate);
}

/* El texto deja libre el lado derecho para la escena. */
.mp-hero .wp-block-cover__inner-container > .wp-block-group {
	max-width: 640px;
	margin-left: 0;
}

/* Escena: cucharón y gotas. Altura fija para que las gotas siempre aterricen
   en el charco (el final de la escena coincide con la cresta del charco). */
.mp-hero__miel {
	position: absolute;
	right: clamp(0px, 7vw, 110px);
	bottom: 34px;
	z-index: 1;
	height: 580px;
	pointer-events: none;
}

.mp-hero__miel svg {
	display: block;
	height: 100%;
	width: auto;
	overflow: visible;
}

.mp-hero__charco {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 0;
	height: 84px;
	pointer-events: none;
}

.mp-hero__charco svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Cada gota: el hilo se estira desde el cucharón, se adelgaza, se desprende
   y cae hasta el charco, donde deja una onda. --s y --d vienen del SVG. */
.mp-gota__hilo,
.mp-gota__cuerpo,
.mp-gota__onda {
	transform-box: fill-box;
	animation-duration: 5.4s;
	animation-iteration-count: infinite;
	animation-delay: var(--t, 0s);
}

.mp-gota__hilo {
	transform-origin: top center;
	transform: scaleY(0.06);
	animation-name: mp-hilo;
	animation-timing-function: ease-in-out;
}

.mp-gota__cuerpo {
	transform-origin: top center;
	animation-name: mp-cuerpo;
	animation-timing-function: ease-in-out;
}

.mp-gota__onda {
	transform-origin: center;
	transform: scale(0.1);
	opacity: 0;
	animation-name: mp-onda;
	animation-timing-function: ease-out;
}

@keyframes mp-hilo {
	0%, 12%  { transform: scaleY(0.06); }
	44%      { transform: scaleY(1); animation-timing-function: ease-in; }
	50%      { transform: scaleY(0.06); }
	100%     { transform: scaleY(0.06); }
}

@keyframes mp-cuerpo {
	0%       { transform: translateY(0) scale(0.55); opacity: 0; }
	12%      { transform: translateY(0) scale(0.75); opacity: 1; }
	44%      { transform: translateY(calc(var(--s) * 1px)) scale(1); animation-timing-function: ease-in; }
	47%      { transform: translateY(calc(var(--s) * 1px + 20px)) scale(0.9, 1.3); }
	50%      { transform: translateY(calc((var(--s) + var(--d)) * 1px)) scale(1.1, 0.7); opacity: 1; }
	51%      { transform: translateY(calc((var(--s) + var(--d)) * 1px)) scale(1.1, 0.7); opacity: 0; }
	52%, 100%{ transform: translateY(0) scale(0.55); opacity: 0; }
}

@keyframes mp-onda {
	0%, 49%  { transform: scale(0.1); opacity: 0; }
	50%      { transform: scale(0.25); opacity: 0.9; }
	78%, 100%{ transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-gota__hilo,
	.mp-gota__cuerpo,
	.mp-gota__onda {
		animation: none;
	}
	.mp-gota__hilo { transform: scaleY(1); }
	.mp-gota__cuerpo { transform: translateY(calc(var(--s) * 1px)); opacity: 1; }
}

.mp-hero__kicker {
	font-family: var(--mp-fuente-titulos);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--mp-toffee-oscuro);
	margin-bottom: 0.25rem;
}

.mp-hero__titulo {
	font-size: clamp(2.6rem, 7.5vw, 6rem);
	line-height: 0.95;
	margin: 0 0 1rem;
	color: var(--mp-chocolate);
	max-width: 12ch;
}

.mp-hero p.mp-hero__texto {
	font-size: 1.15rem;
	max-width: 46ch;
	color: var(--mp-texto);
}

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

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

.mp-seccion {
	padding: 4.5rem 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 {
	margin-bottom: 0.75rem;
}

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

.mp-beneficio {
	background: var(--mp-lemonade);
	border-radius: var(--mp-radio);
	padding: 2rem 1.25rem;
	color: var(--mp-chocolate);
}

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

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

.mp-beneficio p {
	color: var(--mp-chocolate);
}

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

.mp-paso__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--mp-limon);
	color: var(--mp-chocolate);
	font-family: var(--mp-fuente-titulos);
	font-size: 1.5rem;
	font-weight: 700;
}

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

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

.woocommerce ul.products li.product {
	background: var(--mp-blanco);
	border: 1px solid var(--mp-crema-oscura);
	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: 12px;
	margin-bottom: 0.75rem;
}

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

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

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

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

/* Etiquetas de envío del plugin, en la paleta del tema */
.mp-envio--gratis {
	background: var(--mp-limon);
	color: var(--mp-chocolate);
	border-color: #f0d75a;
}

.mp-envio--costo {
	background: var(--mp-crema);
	color: var(--mp-texto);
	border-color: var(--mp-crema-oscura);
}

.mp-liston {
	background: var(--mp-limon);
	color: var(--mp-chocolate);
}

/* Bloque de contacto del plugin */
.mp-contacto {
	background: var(--mp-crema);
	border-color: var(--mp-crema-oscura);
}

/* 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-toffee);
}

.woocommerce div.product .product_meta {
	color: var(--mp-texto);
	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: #f6eee9;
}

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

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

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

::selection {
	background: var(--mp-lemonade);
	color: var(--mp-chocolate);
}

:focus-visible {
	outline: 3px solid var(--mp-toffee);
	outline-offset: 2px;
}

@media (max-width: 921px) {
	.mp-seccion {
		padding: 3rem 1rem;
	}
	/* En pantallas angostas la escena baja debajo del texto, sin encimarse. */
	.mp-hero.wp-block-cover {
		min-height: 0 !important;
		padding-bottom: 420px !important; /* escena (320px) + charco + mango que asoma */
	}
	.mp-hero__miel {
		height: 320px;
		right: 50%;
		bottom: 30px;
		transform: translateX(50%);
	}
	.mp-hero__charco {
		height: 60px;
	}
	.mp-hero__titulo {
		max-width: none;
	}
}