/*
Theme Name:   Multiservicios MZ (Hello Child)
Theme URI:    https://www.multiserviciosmz.com
Description:  Tema hijo de Hello Elementor para Multiservicios MZ. Contiene el sistema de diseño global, mejoras de WooCommerce y del menú. Al ser un tema hijo, las actualizaciones de Hello Elementor NO borran estos cambios.
Author:       Multiservicios MZ
Author URI:   https://www.multiserviciosmz.com
Template:     hello-elementor
Version:      1.1.2
Text Domain:  hello-elementor-child
License:      GNU General Public License v3 or later
*/

/* =====================================================================
   ESTILOS GLOBALES DEL SITIO
   Lo que va aquí afecta a TODAS las páginas, incluidas las de
   WooCommerce (tienda, producto, carrito, finalizar compra).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens globales
   ------------------------------------------------------------------- */
:root {
	--mz-gold:    #F5A623;
	--mz-gold-2:  #FFD65C;
	--mz-gold-dk: #C97E0A;
	--mz-ink:     #0A0E1A;
	--mz-ink-2:   #121828;
	--mz-mist:    #F6F7FB;
	--mz-line:    #E6E8EF;
	--mz-text:    #131824;
	--mz-text-2:  #5A6274;
	--mz-teal:    #00D4A0;
	--mz-radius:  14px;
}

/* ---------------------------------------------------------------------
   2. Base tipográfica
   ------------------------------------------------------------------- */
body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--mz-text);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	background: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Sora', system-ui, -apple-system, sans-serif;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--mz-text);
}

/* El sitio actual usa MAYÚSCULAS SOSTENIDAS en títulos largos.
   Esto las desactiva: se leen más rápido y no suenan a grito. */
h1, h2, h3 { text-transform: none; }

a { color: var(--mz-gold-dk); }
a:hover { color: var(--mz-gold); }

/* Selección de texto con el color de marca */
::selection { background: var(--mz-gold); color: #14100A; }

/* Foco visible para navegación con teclado (accesibilidad) */
:focus-visible {
	outline: 3px solid var(--mz-gold);
	outline-offset: 2px;
}

/* Scroll suave para los enlaces internos tipo #cotizar */
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------
   3. Barra de desplazamiento con estilo de marca
   ------------------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--mz-mist); }

::-webkit-scrollbar-thumb {
	background: #C7CCDA;
	border-radius: 6px;
	border: 2px solid var(--mz-mist);
}

::-webkit-scrollbar-thumb:hover { background: var(--mz-gold); }

/* ---------------------------------------------------------------------
   4. Cabecera
   ------------------------------------------------------------------- */

/* Cabecera pegajosa: se queda arriba al bajar. Añade la clase
   "mz-sticky" al contenedor del header en Elementor. */
.mz-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	backdrop-filter: blur(14px);
	background: rgba(10, 14, 26, .90) !important;
	transition: box-shadow .3s ease, padding .3s ease;
}

body.mz-scrolled .mz-sticky {
	box-shadow: 0 4px 24px rgba(0, 0, 0, .28);
}

/* Barra superior de contacto */
.mz-topbar {
	background: var(--mz-ink-2);
	color: #A8B0C4;
	font-size: .8125rem;
	padding: 7px 0;
}

.mz-topbar a { color: #D7DCE8; text-decoration: none; }
.mz-topbar a:hover { color: var(--mz-gold-2); }

/* ---- Fila del logo / carrito / menú en tablet y celular acostado ----

   El problema: en pantallas medianas (tablet, o el celular girado a
   horizontal) Elementor deja de aplicar la distribución de escritorio
   pero todavía no entra en la de celular, así que el logo, el carrito y
   el botón de menú quedaban cada uno por su lado — el carrito suelto en
   la mitad, sin relación con nada.

   La solución: por debajo de 1024px esa fila se ordena sola en una
   línea limpia — logo a la izquierda, y carrito + botón de menú
   agrupados a la derecha, que es donde el pulgar los alcanza.

   IMPORTANTE — LEER ANTES DE USAR ESTO:

   En este sitio el encabezado NO es uno solo: hay dos plantillas
   separadas, "HeaderPC" y "HeaderMobile", y se muestra una u otra
   según el dispositivo. Si el encabezado se ve desordenado en tablet o
   con el celular acostado, la causa casi siempre es de visibilidad
   (se está mostrando el de escritorio donde no cabe, o los dos a la
   vez), NO de CSS. Eso se corrige en Elementor:

     Sección -> Avanzado -> Responsivo -> Ocultar en tablet / móvil

   Por eso estas reglas quedan DESACTIVADAS por defecto: solo se
   aplican si se le pone la clase  mz-header-row  a una fila desde
   Elementor -> Avanzado -> Clases CSS. Antes intentaban detectar la
   fila solas con :has(), pero con dos encabezados distintos eso
   alcanzaba a los dos y estorbaba más de lo que ayudaba.

   Úsalas solo si, ya con la visibilidad bien configurada, una fila
   puntual sigue desalineada. */
@media (max-width: 1024px) {

	.mz-header-row > .elementor-container,
	.mz-header-row > .e-con-inner,
	.mz-header-row.e-con > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px;
	}

	/* Las columnas dejan de ocupar un ancho fijo y se ajustan a su
	   contenido, que es lo que permite alinearlas en una sola línea. */
	.mz-header-row .elementor-column,
	.mz-header-row > .e-con-inner > .e-con {
		width: auto !important;
		flex: 0 1 auto !important;
	}

	.mz-header-row .elementor-widget-wrap {
		align-content: center !important;
		justify-content: flex-end;
		padding: 0 !important;
	}

	/* El logo manda a la izquierda y se deja encoger si hace falta,
	   pero nunca desaparece ni se deforma. */
	.mz-header-row .elementor-widget-theme-site-logo,
	.mz-header-row .elementor-widget-image {
		order: 1 !important;
		margin: 0 auto 0 0 !important;
		flex: 0 1 auto !important;
	}

	.mz-header-row .elementor-widget-theme-site-logo img,
	.mz-header-row .elementor-widget-image img {
		max-height: 42px;
		width: auto !important;
	}

	/* Carrito y botón de menú, juntos a la derecha y en ese orden. */
	.mz-header-row .elementor-widget-woocommerce-menu-cart {
		order: 2 !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}

	.mz-header-row .elementor-widget-nav-menu {
		order: 3 !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}

	/* El carrito de Elementor trae su propio centrado que aquí estorba. */
	.mz-header-row .elementor-menu-cart__toggle,
	.mz-header-row .elementor-menu-cart__container {
		margin: 0 !important;
	}

	.mz-header-row .elementor-menu-cart__toggle .elementor-button {
		padding: 6px !important;
	}

	/* El botón de menú (hamburguesa) al filo derecho, sin caja blanca. */
	.mz-header-row .elementor-menu-toggle {
		margin-inline-start: 4px !important;
		background: transparent !important;
		border-radius: 8px !important;
	}
}

/* ---------------------------------------------------------------------
   5. Menú de navegación
   ------------------------------------------------------------------- */

/* Subrayado animado en los ítems del menú */
.mz-nav .elementor-item {
	position: relative;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	letter-spacing: .005em;
}

.mz-nav .elementor-item::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mz-gold), var(--mz-gold-2));
	border-radius: 2px;
	transform: translateX(-50%);
	transition: width .3s cubic-bezier(.22, 1, .36, 1);
}

.mz-nav .elementor-item:hover::after,
.mz-nav .elementor-item.elementor-item-active::after {
	width: 72%;
}

/* Submenús con sombra y bordes redondeados */
.mz-nav .sub-menu,
.mz-nav .elementor-nav-menu--dropdown {
	border-radius: var(--mz-radius) !important;
	box-shadow: 0 20px 50px rgba(10, 14, 26, .22) !important;
	overflow: hidden;
	border: 1px solid var(--mz-line) !important;
}

/* ---------------------------------------------------------------------
   6. WooCommerce — Botones
   ------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	color: #14100A;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	border: 0;
	border-radius: 999px;
	padding: 13px 26px;
	box-shadow: 0 8px 22px rgba(245, 166, 35, .28);
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, filter .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	color: #14100A;
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(245, 166, 35, .38);
}

/* ---------------------------------------------------------------------
   7. WooCommerce — Catálogo
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius);
	padding: 14px;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(10, 14, 26, .13);
}

.woocommerce ul.products li.product img {
	border-radius: 10px;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	font-weight: 600;
	line-height: 1.35;
	padding-top: 10px !important;
}

.woocommerce ul.products li.product .price {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	color: var(--mz-text) !important;
	font-size: 1.0625rem;
}

.woocommerce ul.products li.product .price del { color: var(--mz-text-2); font-weight: 400; }
.woocommerce ul.products li.product .price ins { color: var(--mz-gold-dk); text-decoration: none; }

/* Etiqueta de oferta */
.woocommerce span.onsale {
	background: var(--mz-gold);
	color: #14100A;
	font-family: 'Sora', sans-serif;
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .06em;
	border-radius: 999px;
	padding: 6px 14px;
	min-width: auto;
	min-height: auto;
	line-height: 1.4;
	box-shadow: 0 4px 14px rgba(245, 166, 35, .35);
}

/* ---------------------------------------------------------------------
   8. WooCommerce — Ficha de producto, carrito y checkout
   ------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mz-gold-dk);
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 10px 10px 0 0;
	border-color: var(--mz-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: #fff;
	background: #fff;
}

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border-radius: var(--mz-radius);
	border-color: var(--mz-line);
	overflow: hidden;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 1.5px solid var(--mz-line);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: 'Inter', sans-serif;
	transition: border-color .2s, box-shadow .2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--mz-gold);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .16);
	outline: none;
}

/* Mensajes de WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--mz-gold);
	border-radius: var(--mz-radius);
	background: var(--mz-mist);
}

.woocommerce-error { border-top-color: #EF4444; }

/* ---------------------------------------------------------------------
   9. Aviso de tienda en modo demostración
   Mientras esté activo, lo dejamos MUY visible para el admin
   para que no se olvide de apagarlo. Ver la guía, sección A.
   ------------------------------------------------------------------- */
.woocommerce-store-notice,
p.demo_store {
	background: #EF4444 !important;
	color: #fff !important;
	font-weight: 700;
	text-align: center;
}

/* ---------------------------------------------------------------------
   10. Pie de página
   ------------------------------------------------------------------- */
.mz-footer {
	background: var(--mz-ink);
	color: #A8B0C4;
}

.mz-footer h1, .mz-footer h2, .mz-footer h3,
.mz-footer h4, .mz-footer h5, .mz-footer h6 { color: #fff; }

.mz-footer a { color: #D7DCE8; text-decoration: none; transition: color .2s; }
.mz-footer a:hover { color: var(--mz-gold-2); }

.mz-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, .09);
	margin-top: 34px;
	padding-top: 22px;
	font-size: .8125rem;
	color: #6B7488;
}

/* ---------------------------------------------------------------------
   11. Utilidades reutilizables
   ------------------------------------------------------------------- */
.mz-gradient-text {
	background: linear-gradient(135deg, var(--mz-gold), var(--mz-gold-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mz-glass {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--mz-radius);
}

.mz-shadow-lift { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.mz-shadow-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(10, 14, 26, .16); }

/* Oculta un elemento solo en móvil / solo en escritorio */
@media (max-width: 767px) { .mz-hide-mobile  { display: none !important; } }
@media (min-width: 768px) { .mz-hide-desktop { display: none !important; } }

/* ---------------------------------------------------------------------
   12. Imágenes
   ------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* Efecto de carga suave para imágenes con lazy loading */
img[loading="lazy"] {
	background: linear-gradient(90deg, #F0F2F7 25%, #E6E8EF 50%, #F0F2F7 75%);
	background-size: 200% 100%;
	animation: mz-skeleton 1.4s ease-in-out infinite;
}

img[loading="lazy"].mz-loaded { animation: none; background: none; }

@keyframes mz-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   13. Accesibilidad — movimiento reducido
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}