/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
.header-nav p{margin-bottom:0;}
.header-top .form-search-control {
    background: #fff;
    color: #000;
    border: 1px solid #e3e3e3;
	border-radius: 5px;
}

/* ============================================================
   Registro de cliente — diseño limpio (v2 Mazuelas)
   ============================================================ */
.mz-register-page { padding: 40px 16px; background: #fafafa; min-height: 60vh; }

.mz-register {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.05);
    overflow: hidden;
}
.mz-register__inner { padding: 44px 44px 36px; }

.mz-register__head {
    text-align: center;
    margin-bottom: 28px;
}
.mz-register__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--mz-text);
    margin: 0 0 8px;
    letter-spacing: -0.4px;
}
.mz-register__title::after {
    content: ".";
    color: var(--mz-magenta);
}
.mz-register__sub {
    font-size: 14px;
    color: var(--mz-muted);
    margin: 0 auto;
    line-height: 1.55;
    max-width: 420px;
}

/* === RESET COMPLETO del grid horizontal de PrestaShop dentro del registro === */
.mz-form .form-group.row,
.mz-form .form-group.row.align-items-center,
.mz-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 0 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mz-form .form-group.row > [class*="col-"],
.mz-form .form-group > [class*="col-"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Ocultar el "gutter" derecho que PrestaShop pone para los comentarios — vacío en casi todos los campos */
.mz-form .form-group > .col-md-2.form-control-comment,
.mz-form .form-group > .col-md-3.form-control-comment {
    display: none !important;
}
/* El comentario que SÍ aparece está en .js-input-column o como hijo del input wrapper */
.mz-form .form-group .js-input-column .form-control-comment {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    color: #999 !important;
    padding: 0 !important;
}

.mz-form .col-form-label,
.mz-form .form-control-label,
.mz-form .form-group > label,
.mz-form .form-group.row > label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #444 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.4 !important;
}
/* Etiqueta vacía (placeholder de grid Bootstrap) → no ocupar espacio */
.mz-form .form-group > label.col-form-label:empty,
.mz-form .form-group > label.form-control-label:empty {
    display: none !important;
}
.mz-form .col-form-label.required::after,
.mz-form .form-control-label.required::after,
.mz-form label.required::after {
    content: " *";
    color: var(--mz-magenta);
    font-weight: 800;
    margin-left: 2px;
}
.mz-form .required > em,
.mz-form .form-control-label .required { display: none; }

/* === Inputs limpios y modernos === */
.mz-form .form-control,
.mz-form input[type="text"],
.mz-form input[type="email"],
.mz-form input[type="password"],
.mz-form input[type="date"],
.mz-form input[type="tel"],
.mz-form select {
    width: 100% !important;
    background: #fff !important;
    border: 1.5px solid #e3e3e3 !important;
    border-radius: 10px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    color: var(--mz-text) !important;
    height: auto !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mz-form .form-control:focus,
.mz-form input:focus,
.mz-form select:focus {
    border-color: var(--mz-magenta) !important;
    box-shadow: 0 0 0 4px rgba(181,25,119,0.10) !important;
    outline: none !important;
}
.mz-form .form-control::placeholder { color: #b0b0b0; }

/* Input-group (campo de contraseña con botón "ver"): forzar fila, no wrap */
.mz-form .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    position: relative;
}
.mz-form .input-group > .form-control,
.mz-form .input-group > input {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}
.mz-form .input-group-append {
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.mz-form .input-group-append .btn,
.mz-form .input-group-append button {
    background: #fafafa !important;
    border: 1.5px solid #e3e3e3 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    color: var(--mz-muted) !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    box-shadow: none !important;
}
.mz-form .input-group-append .btn:hover {
    background: #f0f0f0 !important;
    color: var(--mz-magenta) !important;
}
/* Cuando el input recibe foco, propagar el contorno también al botón append para que se vean como uno */
.mz-form .input-group:focus-within > .form-control {
    border-color: var(--mz-magenta) !important;
    box-shadow: none !important;
}
.mz-form .input-group:focus-within > .input-group-append > .btn {
    border-color: var(--mz-magenta) !important;
}
.mz-form .input-group:focus-within {
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(181,25,119,0.10) !important;
}

.mz-form .form-control-comment {
    display: block !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    color: #999 !important;
}
.mz-form .help-block,
.mz-form .form-control-feedback {
    margin-top: 5px;
    font-size: 12.5px;
    color: #c62333;
}

/* === Grid de campos: 2 columnas en escritorio para nombre/apellidos === */
.mz-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
.mz-form__cell--full { grid-column: 1 / -1; }
.mz-form__cell--half { grid-column: span 1; }
@media (max-width: 575px) {
    .mz-form__grid { grid-template-columns: 1fr; }
}

/* === Bloque profesional (módulo registro_profesionales) === */
.mz-form__pro {
    margin: 10px 0 18px;
    padding: 18px 18px 6px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 12px;
}
.mz-form__pro .isProfessional,
.mz-form__pro .professional-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
.mz-form__pro .isProfessional > [class*="col-"],
.mz-form__pro .professional-form .form-group > [class*="col-"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mz-form__pro .isProfessional > label.col-md-3:empty,
.mz-form__pro .isProfessional > div.col-md-3.form-control-comment,
.mz-form__pro .professional-form > .form-group > .col-md-3:empty,
.mz-form__pro .professional-form > .form-group > .col-md-3.form-control-comment { display: none !important; }
.mz-form__pro .isProfessional .container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer;
    padding: 14px 16px !important;
    background: rgba(181,25,119,0.04) !important;
    border: 1.5px solid #f0dde9 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mz-text);
    transition: border-color .15s ease, background .15s ease;
    margin: 0 !important;
}
.mz-form__pro .isProfessional .container:hover {
    border-color: var(--mz-magenta) !important;
    background: rgba(181,25,119,0.08) !important;
}
.mz-form__pro .isProfessional input[type="checkbox"] {
    accent-color: var(--mz-magenta);
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.mz-form__pro .isProfessional a {
    color: var(--mz-magenta) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
.mz-form__pro .isProfessional .checkmark { display: none !important; }
.mz-form__pro .professional-form { margin-top: 14px; }
.mz-form__pro .professional-form .form-group { margin-bottom: 12px !important; }
.mz-form__pro .info-extra-negocio {
    margin: 12px 0 0;
    padding: 11px 14px;
    background: #fff8e7;
    border-left: 3px solid #f5b614;
    border-radius: 8px;
    font-size: 12.5px;
    color: #6b5300;
    line-height: 1.5;
}

/* === Preferencias (newsletter, optin, psgdpr) === */
.mz-form__prefs {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #f0f0f0;
}
.mz-form__prefs .form-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.mz-form__prefs .form-group label {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.5;
}
.mz-form__prefs input[type="checkbox"] {
    accent-color: var(--mz-magenta);
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* === Botón submit === */
.mz-form__footer {
    margin-top: 24px;
    text-align: center;
    border: none;
    padding: 0;
}
.mz-form__submit {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 28px !important;
    border-radius: 10px !important;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 6px 16px rgba(181,25,119,0.25);
}
.mz-form__submit:hover {
    background: #8e125c !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(181,25,119,0.36);
}
.mz-register__login {
    text-align: center;
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--mz-muted);
}
.mz-register__login a {
    color: var(--mz-magenta) !important;
    font-weight: 700;
    text-decoration: none;
}
.mz-register__login a:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .mz-register__inner { padding: 30px 22px 24px; }
    .mz-register__title { font-size: 24px; }
}

/* Campos ocultos del formulario (id_gender / id_customer / hidden) */
.mz-form__hidden { display: none !important; }

/* ============================================================
   Checkout — pulido visual ligero (mantiene el flujo nativo de PrestaShop)
   ============================================================ */
body#checkout section.checkout-step {
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    background: #fff !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
body#checkout section.checkout-step .step-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mz-text);
    margin: 0 0 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--mz-magenta);
}
body#checkout section.checkout-step .step-number {
    background: var(--mz-magenta);
    color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    margin-right: 10px;
}
body#checkout section.checkout-step .done {
    color: #2e7d44;
    margin-left: 8px;
}
body#checkout section.checkout-step .step-edit {
    color: var(--mz-magenta) !important;
    font-size: 13px;
    font-weight: 600;
}

/* Inputs */
body#checkout .checkout-step .form-control,
body#checkout .checkout-step input[type="text"],
body#checkout .checkout-step input[type="email"],
body#checkout .checkout-step input[type="tel"],
body#checkout .checkout-step input[type="password"],
body#checkout .checkout-step select,
body#checkout .checkout-step textarea {
    background: #fff !important;
    border: 1.5px solid #e3e3e3 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: var(--mz-text) !important;
    height: auto !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body#checkout .checkout-step .form-control:focus,
body#checkout .checkout-step input:focus,
body#checkout .checkout-step select:focus,
body#checkout .checkout-step textarea:focus {
    border-color: var(--mz-magenta) !important;
    box-shadow: 0 0 0 3px rgba(181,25,119,0.10) !important;
    outline: none !important;
}
body#checkout .checkout-step label,
body#checkout .checkout-step .col-form-label,
body#checkout .checkout-step .form-control-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555 !important;
    margin-bottom: 5px !important;
}

/* Métodos de envío y pago como tarjetas */
body#checkout .delivery-option,
body#checkout .payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
body#checkout .delivery-option:hover,
body#checkout .payment-option:hover {
    border-color: var(--mz-magenta);
    background: rgba(181,25,119,0.03);
}
body#checkout .delivery-option input[type="radio"],
body#checkout .payment-option input[type="radio"] {
    accent-color: var(--mz-magenta);
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* Botones (Continuar, Realizar pedido) */
body#checkout .checkout-step .continue.btn,
body#checkout .checkout-step button[type="submit"].continue,
body#checkout .checkout-step .btn-primary {
    background: var(--mz-magenta) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    transition: background .15s ease, transform .15s ease;
}
body#checkout .checkout-step .continue.btn:hover,
body#checkout .checkout-step button[type="submit"].continue:hover,
body#checkout .checkout-step .btn-primary:hover {
    background: #8e125c !important;
    transform: translateY(-1px);
}
body#checkout .checkout-step .btn-secondary,
body#checkout .checkout-step .btn-outline-secondary {
    background: #fff !important;
    border: 1.5px solid #e3e3e3 !important;
    color: var(--mz-text) !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600;
}

/* Resumen lateral del carrito */
body#checkout .cart-summary,
body#checkout .cart-grid-right .card {
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
body#checkout .cart-total .value,
body#checkout .cart-summary-totals .cart-total .value {
    color: var(--mz-magenta) !important;
    font-weight: 800 !important;
}


/* Enlace "olvidaste contraseña" en el login */
.mz-form__forgot {
    text-align: right;
    margin: -6px 0 18px;
}
.mz-form__forgot a {
    font-size: 13px;
    color: var(--mz-muted) !important;
    text-decoration: none;
    transition: color .15s ease;
}
.mz-form__forgot a:hover {
    color: var(--mz-magenta) !important;
    text-decoration: underline;
}


/* ============================================================
   Prefooter Newsletter — Mazuelas
   ============================================================ */
.mz-prefooter {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    color: #fff;
    isolation: isolate;
    background-color: #2a0d1d; /* fallback oscuro si no carga la imagen */
}
/* Capa 1: imagen de fondo (modelo a la derecha). Cae al color de fallback si no existe. */
.mz-prefooter__bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/prefooter-bg.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    filter: brightness(.85);
    z-index: -3;
}
/* Capa 2: overlay magenta oscuro con degradado fuerte a la izquierda
   y casi transparente a la derecha (para que se vea la modelo) */
.mz-prefooter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(40, 5, 26, 0.94) 0%,
            rgba(110, 14, 70, 0.88) 35%,
            rgba(181, 25, 119, 0.55) 65%,
            rgba(181, 25, 119, 0.20) 100%);
    z-index: -2;
}
/* Capa 3: viñeta sutil de oscuridad en los bordes para profundidad */
.mz-prefooter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% center,
        transparent 30%,
        rgba(0, 0, 0, 0.25) 100%);
    z-index: -1;
    pointer-events: none;
}
/* Forzar el contenido del prefooter alineado a la izquierda
   para que la modelo de la imagen quede visible a la derecha sin tapar texto */
.mz-prefooter__inner {
    text-align: left;
    margin: 0;
    max-width: 560px;
}
@media (min-width: 768px) {
    .mz-prefooter__inner { padding-left: 8px; }
    .mz-prefooter__form .ps-emailsubscription-block .newsletter-input-group { margin: 0; }
}
.mz-prefooter__inner {
    max-width: 640px;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
}
.mz-prefooter__icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    backdrop-filter: blur(8px);
}
.mz-prefooter__title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 10px;
    color: #fff;
}
.mz-prefooter__desc {
    font-size: 15px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}
.mz-prefooter__form .ps-emailsubscription-block .newsletter-input-group {
    display: flex !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    padding: 6px !important;
    max-width: 520px;
    margin: 0 auto;
}
.mz-prefooter__form input[type="text"],
.mz-prefooter__form input[type="email"] {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    flex: 1 1 auto;
    outline: none !important;
    box-shadow: none !important;
}
.mz-prefooter__form input::placeholder { color: rgba(255, 255, 255, 0.7) !important; }
.mz-prefooter__form .btn-subscribe {
    background: #fff !important;
    color: var(--mz-magenta) !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.mz-prefooter__form .btn-subscribe:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.mz-prefooter__form .alert,
.mz-prefooter__form .text-success,
.mz-prefooter__form .text-danger { margin-top: 12px; color: #fff !important; }

@media (max-width: 575px) {
    .mz-prefooter { padding: 40px 0; }
    .mz-prefooter__title { font-size: 22px; }
    .mz-prefooter__form .ps-emailsubscription-block .newsletter-input-group {
        flex-wrap: wrap;
        border-radius: 18px !important;
    }
    .mz-prefooter__form .btn-subscribe { width: 100%; }
}

/* ============================================================
   Footer — Mazuelas
   ============================================================ */
#footer {
    background: linear-gradient(180deg, #1c1c1c 0%, #0e0e0e 100%) !important;
    color: #c4c4c4 !important;
    padding: 64px 0 0 !important;
    position: relative;
    overflow: hidden;
}
#footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--mz-magenta) 0%, #e851ad 50%, var(--mz-magenta) 100%);
    z-index: 2;
}
#footer::after {
    content: "";
    position: absolute;
    top: -120px; right: -160px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(181,25,119,.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
#footer .footer-container { position: relative; z-index: 1; }

/* Bloques y títulos */
#footer .block,
#footer .block-footer { margin-bottom: 28px; background: transparent !important; border: none !important; }
#footer .block .block-title,
#footer .block-footer .block-title,
#footer .block-title,
#footer .block .block-title span,
#footer .block-footer .block-title span,
#footer .block-title span {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    letter-spacing: 1.2px;
    padding: 0 0 12px !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    background: transparent !important;
    position: relative;
}
#footer .block .block-title::after,
#footer .block-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 32px; height: 2px;
    background: var(--mz-magenta);
    border-radius: 2px;
}
#footer .block .block-title span { background: transparent !important; padding: 0 !important; }
/* Acordeón móvil del IQIT: oculta su flechita */
#footer .block .block-title .float-right,
#footer .block .block-title i.fa-angle-down { display: none !important; }

/* Listas de links */
#footer .block-content ul {
    list-style: none;
    padding: 0; margin: 0;
}
#footer .block-content li { margin: 0 0 9px; line-height: 1.45; }
#footer .block-content a,
#footer a:not(.btn):not(.fa) {
    color: #c4c4c4 !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: color .2s ease, padding-left .2s ease;
    display: inline-block;
}
#footer .block-content a:hover,
#footer a:not(.btn):not(.fa):hover {
    color: var(--mz-magenta) !important;
    padding-left: 4px;
}

/* Ocultar las redes sociales que aparecen dentro del bloque de contacto (duplicadas con "Síguenos") */
#footer .block-iqitcontactpage .social-links,
#footer .block-iqitcontactpage ul.social-links._footer { display: none !important; }

/* Bloque de contacto */
#footer .block-iqitcontactpage .contact-rich { font-size: 14px; line-height: 1.55; }
#footer .block-iqitcontactpage .contact-rich > .part {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #c4c4c4;
}
#footer .block-iqitcontactpage .contact-rich > .part > i,
#footer .block-iqitcontactpage .contact-rich > .part .fa {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(181,25,119,0.15);
    color: var(--mz-magenta) !important;
    border-radius: 50%;
    font-size: 13px;
    margin: 0 !important;
}
#footer .block-iqitcontactpage .contact-rich a { color: #fff !important; }
#footer .block-iqitcontactpage .contact-rich a:hover { color: var(--mz-magenta) !important; padding-left: 0; }
.tiendas-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    color: #c4c4c4 !important;
    margin-top: 6px;
    font-size: 13px;
}
.tiendas-link a {
    color: var(--mz-magenta) !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* Redes sociales */
#footer .social-links,
#footer .ps-social-follow ul,
#footer ul.social-links._footer {
    display: flex !important;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    flex-wrap: wrap;
}
#footer .social-links li,
#footer .ps-social-follow li { margin: 0 !important; }
#footer .social-links a,
#footer .ps-social-follow a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 50%;
    color: #fff !important;
    font-size: 14px;
    transition: background .2s ease, transform .2s ease, color .2s ease;
    padding: 0 !important;
}
#footer .social-links a:hover,
#footer .ps-social-follow a:hover {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    transform: translateY(-2px);
    padding-left: 0 !important;
}
#footer .social-links a .fa,
#footer .social-links a i { color: inherit !important; }
/* Oculta enlaces sociales sin URL (los que ponen literalmente 'twitter url' etc.) */
#footer .social-links a[href$="url"],
#footer .social-links a[href="twitter url"],
#footer .social-links a[href="pintrest url"],
#footer .social-links a[href="youtube url"],
#footer .social-links a[href="vimeo url"],
#footer .social-links a[href="google url"] { display: none !important; }

/* Bloque newsletter */
#footer .block-newsletter {
    background: rgba(181,25,119,0.08) !important;
    border: 1px solid rgba(181,25,119,0.22) !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin-bottom: 28px;
}
#footer .block-newsletter .block-title { color: #fff !important; }
#footer .block-newsletter .title-news {
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #fff !important;
    margin: 0 0 8px;
    text-align: left !important;
}
#footer .block-newsletter .desc-news {
    color: #b8b8b8 !important;
    font-size: 14px !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    line-height: 1.5;
}
#footer .ps-emailsubscription-block input[type="text"],
#footer .ps-emailsubscription-block input[type="email"] {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    height: auto !important;
}
#footer .ps-emailsubscription-block input::placeholder { color: rgba(255,255,255,0.42) !important; }
#footer .ps-emailsubscription-block .newsletter-input-group {
    display: flex !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
}
#footer .ps-emailsubscription-block .btn-subscribe {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
#footer .ps-emailsubscription-block .btn-subscribe:hover {
    background: #fff !important;
    color: var(--mz-magenta) !important;
    transform: translateY(-1px);
}

/* Barra inferior de copyright */
#footer-copyrights,
#footer-copyrights._footer-copyrights-2 {
    background: #0a0a0a !important;
    color: #888 !important;
    padding: 18px 0 !important;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
#footer-copyrights a { color: #c4c4c4 !important; }
#footer-copyrights a:hover { color: var(--mz-magenta) !important; }
#footer-copyrights .copyright-txt,
#footer-copyrights._footer-copyrights-2 .copyright-txt { margin: 0 !important; font-size: 13px; }

/* Badge contador del carrito en el header: fondo magenta + texto blanco */
#header .cart-products-count-btn,
#header .cart-products-count,
#header .blockcart .cart-products-count-btn,
.header-cart-btn .cart-products-count-btn,
#ps-shoppingcart .cart-products-count-btn {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    border-color: var(--mz-magenta) !important;
}

@media (max-width: 767px) {
    #footer { padding-top: 44px !important; }
    #footer .block { margin-bottom: 20px; }
    #footer .block-newsletter { padding: 18px !important; }
    #footer .ps-emailsubscription-block .newsletter-input-group { flex-wrap: wrap; }
    #footer .ps-emailsubscription-block .btn-subscribe { width: 100%; }
}

/* ============================================================
   Categoría — Hero + filtros + cards (Fase 2)
   ============================================================ */

:root {
    --mz-magenta: #b51977;
    --mz-magenta-dark: #8e125c;
    --mz-magenta-soft: rgba(181, 25, 119, 0.08);
    --mz-text: #222;
    --mz-muted: #777;
    --mz-border: #ececec;
}

/* ---------- Hero del header de categoría ---------- */
.mz-category-hero {
    position: relative;
    margin: 0 0 24px;
    padding: 36px 32px 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, #faeef4 0%, #ffffff 60%, #f7e3ee 100%);
    overflow: hidden;
    isolation: isolate;
}
.mz-category-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2px) saturate(1.1);
    opacity: .35;
    z-index: 0;
}
.mz-category-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.10) 0%, rgba(255, 255, 255, 0.85) 60%);
    z-index: 1;
}
.mz-category-hero--with-image .mz-category-hero__overlay {
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.55) 0%, rgba(255, 255, 255, 0.78) 75%);
}
.mz-category-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

/* Orbes magenta flotantes en la derecha */
.mz-category-hero__orbs {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 45%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.mz-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.55;
    will-change: transform;
}
.mz-orb--1 {
    width: 260px; height: 260px;
    top: -60px; right: -40px;
    background: radial-gradient(circle, rgba(181, 25, 119, 0.85) 0%, rgba(181, 25, 119, 0) 70%);
    animation: mz-orb-float-1 14s ease-in-out infinite;
}
.mz-orb--2 {
    width: 170px; height: 170px;
    top: 40%; right: 22%;
    background: radial-gradient(circle, rgba(232, 92, 173, 0.7) 0%, rgba(232, 92, 173, 0) 70%);
    animation: mz-orb-float-2 11s ease-in-out infinite -3s;
}
.mz-orb--3 {
    width: 110px; height: 110px;
    bottom: -20px; right: 38%;
    background: radial-gradient(circle, rgba(142, 18, 92, 0.7) 0%, rgba(142, 18, 92, 0) 70%);
    animation: mz-orb-float-3 9s ease-in-out infinite -6s;
}
@keyframes mz-orb-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-28px, 22px) scale(1.08); }
}
@keyframes mz-orb-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -18px) scale(0.92); }
}
@keyframes mz-orb-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-15px, -25px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-orb { animation: none !important; }
}
@media (max-width: 575px) {
    .mz-category-hero__orbs { width: 60%; }
    .mz-orb--1 { width: 180px; height: 180px; }
    .mz-orb--2 { width: 120px; height: 120px; }
    .mz-orb--3 { width: 80px; height: 80px; }
}
.mz-category-hero__title {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--mz-text);
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mz-category-hero__title::after {
    content: ".";
    color: var(--mz-magenta);
    margin-left: 2px;
}
.mz-category-hero__meta { display: flex; align-items: center; gap: 12px; }
.mz-category-hero__count {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: var(--mz-magenta);
    color: #fff;
    font-size: 13px; font-weight: 700;
    border-radius: 999px;
    letter-spacing: .3px;
}
@media (max-width: 767px) {
    .mz-category-hero { padding: 24px 22px 22px; margin-bottom: 18px; }
    .mz-category-hero__title { font-size: 30px; }
}

/* ---------- Filtros (ps_facetedsearch) más compactos ---------- */
#search_filters_wrapper {
    background: #f4f4f4;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 18px 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
#search_filters_wrapper .h6,
#search_filters_wrapper .block-title,
#search_filters_wrapper h3 {
    font-size: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mz-magenta);
    color: var(--mz-text);
}
#search_filters_wrapper .facet {
    padding: 10px 0 !important;
    border-top: 1px solid var(--mz-border);
}
#search_filters_wrapper .facet:first-of-type { border-top: none; }
#search_filters_wrapper .facet-title,
#search_filters_wrapper .facet .h6,
#search_filters_wrapper .facet > p {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .25px;
    margin: 0 0 8px !important;
    color: var(--mz-text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
}
#search_filters_wrapper .facet ul,
#search_filters_wrapper .facet .collapse,
#search_filters_wrapper .facet ul.facet-label {
    list-style: none;
    padding: 0; margin: 0;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mz-magenta) #f0f0f0;
}
#search_filters_wrapper .facet ul::-webkit-scrollbar { width: 6px; }
#search_filters_wrapper .facet ul::-webkit-scrollbar-thumb { background: var(--mz-magenta); border-radius: 3px; }
#search_filters_wrapper .facet ul::-webkit-scrollbar-track { background: #f0f0f0; }
#search_filters_wrapper .facet li {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.35;
}
#search_filters_wrapper .facet li label,
#search_filters_wrapper .facet-label {
    color: #444;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 0;
    width: 100%;
}
#search_filters_wrapper .facet li label:hover,
#search_filters_wrapper .facet-label:hover { color: var(--mz-magenta); }
#search_filters_wrapper .facet input[type="checkbox"],
#search_filters_wrapper .facet input[type="radio"] {
    accent-color: var(--mz-magenta);
    width: 14px; height: 14px;
    margin: 0;
}
#search_filters_wrapper .facet .magnitude { color: var(--mz-muted); font-size: 11px; }
#search_filters_wrapper .ui-slider .ui-slider-range,
#search_filters_wrapper .ui-slider .ui-slider-handle { background: var(--mz-magenta) !important; border-color: var(--mz-magenta) !important; }
#search_filters_wrapper .js-search-filters-clear-all,
#search_filters_wrapper .clear-all-wrapper a {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--mz-magenta);
    text-decoration: underline;
}

/* Filtros activos arriba */
.js-active-search-filters,
.active-filters {
    background: var(--mz-magenta-soft);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}
.active-filters .filter-block {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--mz-magenta);
    color: var(--mz-magenta);
    border-radius: 999px;
    padding: 3px 12px;
    margin: 2px 4px 2px 0;
    font-weight: 600;
}

/* ---------- Cards de producto ---------- */
.product-miniature {
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ececec;
}
.product-miniature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    border-color: var(--mz-magenta);
}
.product-miniature .product-title,
.product-miniature .product-title a {
    font-size: 14px !important;
    line-height: 1.3;
    color: var(--mz-text) !important;
    font-weight: 600;
}
.product-miniature .product-title a:hover { color: var(--mz-magenta) !important; }
.product-miniature .price,
.product-miniature .product-price,
.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping .product-price {
    color: var(--mz-magenta) !important;
    font-weight: 500 !important;
}
.product-miniature .regular-price { color: var(--mz-muted) !important; font-weight: 400 !important; }

/* Badge de descuento: círculo, porque el texto es corto ("-41%") y cabe */
.product-miniature .product-flag.discount,
.product-miniature .product-flag.discount-percentage,
.product-flags .discount,
.product-flags .discount-percentage {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 52px; height: 52px;
    display: flex !important; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 14px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(181, 25, 119, 0.3);
    text-transform: none;
    padding: 0 !important;
    line-height: 1;
}

/* Badge "¡En oferta!": rectangular, con la misma forma que "Nuevo".
   Como círculo no funciona: el texto es largo y se salía de los 52px. */
.product-miniature .product-flag.on-sale,
.product-flags .on-sale {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    display: table !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Botón Añadir al carrito en hover magenta */
.product-miniature .btn-product-list,
.product-miniature .add-to-cart {
    background: #111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    transition: background .2s ease;
}
.product-miniature:hover .btn-product-list,
.product-miniature:hover .add-to-cart,
.product-miniature .btn-product-list:hover,
.product-miniature .add-to-cart:hover {
    background: var(--mz-magenta) !important;
}

/* Badge "Últimas unidades / Disponible / Agotado" en cards de listado:
   pill arriba-izquierda, solo cuando realmente aplica (no se ve un contenedor vacío) */
.product-miniature .product-availability,
.product-miniature-grid .product-availability {
    position: absolute !important;
    top: 0; left: 0; right: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    z-index: 3 !important;
    pointer-events: none;
}
.product-miniature .product-availability .badge,
.product-miniature-grid .product-availability .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 8px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .2px;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    white-space: normal !important;
    max-width: calc(100% - 16px);
}
.product-miniature .product-availability .badge.d-none,
.product-miniature-grid .product-availability .badge.d-none { display: none !important; }
.product-miniature .badge.product-last-items {
    background: #fff5dc !important;
    color: #946b00 !important;
    border: 1px solid #ffe8a8 !important;
}
.product-miniature .badge.product-available {
    background: #e6f6ec !important;
    color: #2e7d44 !important;
    border: 1px solid #cce8d4 !important;
}
.product-miniature .badge.product-unavailable {
    background: #fde8e9 !important;
    color: #a82431 !important;
    border: 1px solid #f5c5c9 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Miniaturas — evitar que el badge "Fuera de stock" tape el flag "Nuevo".
   El theme deja .product-flags arriba-izquierda y .product-availability se
   muestra ahí también en algunos layouts (carruseles / sliders). Forzamos
   que la availability quede en el borde inferior del thumb, no arriba.
   ───────────────────────────────────────────────────────────────────────────── */
.product-miniature .product-thumbnail-container,
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature article,
.product-miniature .product-miniature-img-wrapper {
    position: relative;
}
/* Flags (etiquetas Nuevo / Promo / etc.) — arriba a la izquierda, z-index alto */
.product-miniature .product-flags {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 6 !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}
.product-miniature .product-flag {
    margin-top: 4px !important;
    pointer-events: auto;
}
/* Disponibilidad ("Fuera de stock") — ARRIBA A LA DERECHA, para no tapar
   ni el flag "Nuevo" (arriba-izquierda) ni los iconos de favoritos / vista
   previa (que aparecen abajo-centrados en el hover). */
.product-miniature .product-availability {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    text-align: right;
}
.product-miniature .product-availability .badge {
    margin: 0 !important;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Mantener visible y en su sitio también en :hover (no la desplazamos) */
.product-miniature:hover .product-availability {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Botón wishlist en cards de producto: siempre visible (no solo hover) */
/* Sobreescribe el display:none que IQIT inyecta en custom_s_1.css cuando pl_grid_func_btn=0 */
.product-miniature-grid .product-functional-buttons,
.product-miniature .product-functional-buttons {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.product-miniature-grid .product-functional-buttons-bottom,
.product-miniature .product-functional-buttons-bottom {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.product-miniature-grid .product-functional-buttons a:link,
.product-miniature-grid .product-functional-buttons a:visited,
.product-miniature-grid .product-functional-buttons a:hover {
    color: #777 !important;
}
.product-miniature .btn-iqitwishlist-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50%;
    font-size: 16px;
    color: #777 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
    padding: 0 !important;
    margin: 0 4px;
    opacity: 1 !important;
}
.product-miniature .btn-iqitwishlist-add:hover {
    color: var(--mz-magenta) !important;
    background: #fff !important;
    transform: scale(1.08);
    opacity: 1 !important;
}
.product-miniature .btn-iqitwishlist-add.added {
    color: var(--mz-magenta) !important;
    background: #fff !important;
}

/* ---------- Cabecera de la lista (ordenar / vista) ---------- */
.products-selection {
    background: #fff;
    border: 1px solid var(--mz-border);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
}
.products-selection .total-products,
.products-selection .total-products p { font-size: 13px; color: var(--mz-muted); margin: 0; }

/* ---------- Paginación ---------- */
.pagination .page-list { gap: 4px; display: inline-flex; }
.pagination .page-list li { margin: 0; }
.pagination .page-list a,
.pagination .page-list span {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--mz-text);
    background: #fff;
    border: 1px solid var(--mz-border);
    font-size: 14px; font-weight: 600;
}
.pagination .page-list a:hover {
    color: var(--mz-magenta);
    border-color: var(--mz-magenta);
}
.pagination .page-list li.current a,
.pagination .page-list li.current a.disabled,
.pagination .page-list li.current span {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    border-color: var(--mz-magenta) !important;
    opacity: 1 !important;
}

/* ============================================================
   Página de producto (Fase 3)
   ============================================================ */

/* Miniaturas a la izquierda con borde finito gris */
.images-container-left .thumb-container,
.col-left-product-thumbs .thumb-container {
    margin-bottom: 8px;
}
.images-container-left .thumb,
.col-left-product-thumbs .thumb {
    border: 1px solid #e3e3e3 !important;
    border-radius: 6px;
    transition: border-color .2s ease, transform .15s ease;
    background: #fff;
}
.images-container-left .thumb:hover,
.col-left-product-thumbs .thumb:hover {
    border-color: #b7b7b7 !important;
}
.images-container-left .thumb.selected,
.col-left-product-thumbs .thumb.selected,
.col-left-product-thumbs .thumb.js-thumb-selected {
    border-color: var(--mz-magenta) !important;
}
/* Imagen principal: borde finito gris (mismo estilo que las miniaturas) — fila con thumbs alineada */
.images-container .row.no-gutters,
.images-container-left .row.no-gutters {
    align-items: flex-start;
}
.col-left-product-cover .product-cover,
.images-container .product-cover {
    position: relative;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    padding: 0;
    aspect-ratio: 1 / 1;
}
.col-left-product-cover .product-images-large,
.images-container .product-images-large {
    background: #fff;
    height: 100% !important;
    width: 100%;
}
.col-left-product-cover .product-images-large .swiper-wrapper,
.images-container .product-images-large .swiper-wrapper { height: 100%; }
.col-left-product-cover .product-lmage-large,
.images-container .product-lmage-large {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-left-product-cover .product-lmage-large picture,
.col-left-product-cover .easyzoom,
.images-container .product-lmage-large picture {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#product .product-cover img,
#product .product-cover picture,
#product .product-cover .product-lmage-large img,
#product .product-cover .easyzoom img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
    margin: 0 !important;
}

/* Miniaturas cuadradas con la imagen rellenando todo el cuadrado */
.col-left-product-thumbs .thumb-container,
.col-left-product-thumbs .swiper-slide .thumb-container {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}
.col-left-product-thumbs .thumb-container .thumb,
.col-left-product-thumbs .thumb-container picture,
.col-left-product-thumbs .thumb-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
}

/* Flechas de navegación de la columna de miniaturas: pequeñas, dentro de la columna */
.col-left-product-thumbs { position: relative; padding-top: 28px; padding-bottom: 28px; }
.col-left-product-thumbs .swiper-button-prev,
.col-left-product-thumbs .swiper-button-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 30px !important;
    height: 24px !important;
    background: #fff !important;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    color: var(--mz-text) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5;
    cursor: pointer;
    margin: 0 !important;
}
.col-left-product-thumbs .swiper-button-prev { top: 0 !important; bottom: auto !important; }
.col-left-product-thumbs .swiper-button-next { top: auto !important; bottom: 0 !important; }
.col-left-product-thumbs .swiper-button-prev:hover,
.col-left-product-thumbs .swiper-button-next:hover { border-color: var(--mz-magenta); color: var(--mz-magenta) !important; }
.col-left-product-thumbs .swiper-button-prev::after,
.col-left-product-thumbs .swiper-button-next::after {
    font-family: "FontAwesome";
    font-size: 12px;
    font-weight: bold;
    content: "";
}
.col-left-product-thumbs .swiper-button-prev::after { content: "\f077"; } /* fa-chevron-up */
.col-left-product-thumbs .swiper-button-next::after { content: "\f078"; } /* fa-chevron-down */

/* Las flechas del cover principal: dentro de la imagen, centradas verticalmente */
#product .product-cover .swiper-button-prev,
#product .product-cover .swiper-button-next {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}
#product .product-cover .swiper-button-prev { left: 1rem !important; right: auto !important; }
#product .product-cover .swiper-button-next { right: 1rem !important; left: auto !important; }

/* Input cantidad con botones - / + a los lados */
.qty.mz-qty {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 50px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.mz-qty .mz-qty-btn {
    flex: 0 0 auto;
    width: 42px;
    background: #fff;
    border: none;
    color: var(--mz-text);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mz-qty .mz-qty-btn:hover { background: var(--mz-magenta-soft); color: var(--mz-magenta); }
.mz-qty .mz-qty-minus { border-right: 1px solid #ececec; }
.mz-qty .mz-qty-plus  { border-left:  1px solid #ececec; }
.mz-qty .mz-qty-input,
.mz-qty input[type="number"].mz-qty-input,
.mz-qty input.input-group {
    border: none !important;
    background: transparent !important;
    text-align: center;
    width: 56px !important;
    min-width: 0 !important;
    max-width: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700;
    font-size: 16px;
    -moz-appearance: textfield;
    flex: 0 0 auto !important;
}
input.mz-qty-input::-webkit-outer-spin-button,
input.mz-qty-input::-webkit-inner-spin-button,
.mz-qty input[type="number"]::-webkit-outer-spin-button,
.mz-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
input.mz-qty-input { appearance: textfield; -moz-appearance: textfield; -webkit-appearance: textfield; }

/* TouchSpin de Bootstrap añade sus propios botones up/down al input; los ocultamos porque ya tenemos los nuestros */
.mz-qty .bootstrap-touchspin .input-group-btn-vertical,
.mz-qty .bootstrap-touchspin-up,
.mz-qty .bootstrap-touchspin-down,
.mz-qty .input-group-btn-vertical { display: none !important; }
.mz-qty .bootstrap-touchspin {
    display: contents !important; /* hace que el wrapper de TouchSpin no rompa nuestro flex */
}

/* Botón añadir a favoritos en ficha de producto: mismo radio que el de añadir al carrito */
#product .btn-iqitwishlist-add,
#product button.btn-iqitwishlist-add.btn-secondary {
    border-radius: 8px !important;
    border: 1px solid #e3e3e3 !important;
    background: #fff !important;
    color: var(--mz-text) !important;
    height: 50px;
    width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
#product .btn-iqitwishlist-add:hover,
#product .btn-iqitwishlist-add.added {
    color: var(--mz-magenta) !important;
    border-color: var(--mz-magenta) !important;
}
/* Columna de miniaturas: la altura del swiper debe coincidir con la del cover */
.col-left-product-thumbs {
    padding-right: 8px;
}
.col-left-product-thumbs .js-qv-mask,
.col-left-product-thumbs .product-images,
.col-left-product-thumbs #product-images-thumbs {
    height: 100%;
}
.col-left-product-thumbs .swiper-slide {
    height: auto !important;
}
/* La columna entera de miniaturas se ajusta a la altura del cover */
.images-container-left .row.no-gutters > .col-left-product-thumbs,
.images-container .row.no-gutters > .col-left-product-thumbs {
    align-self: stretch;
}

/* Estrellas de valoración bajo el título del producto */
.product_header_container .iqitreviews-simple,
.product_header_container #iqitreviews-rating-product {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
}
.product_header_container .iqitreviews-rating { display: inline-flex; gap: 2px; }
.product_header_container .iqit-review-star {
    color: #f5b614;
    font-size: 16px;
}
.product_header_container .iqit-review-star.mz-star-empty,
.product_header_container .fa-star-o { color: #d4d4d4; }
.product_header_container .iqitreviews-nb {
    font-size: 13px;
    color: var(--mz-muted);
    font-weight: 600;
}

/* Quitar la rayita que el tema dibuja encima del bloque de info adicional */
#product .product-additional-info,
#product .product-additional-info.js-product-additional-info {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 14px;
}

/* Iconos de métodos de pago */
.mz-payment-methods {
    margin-top: 12px;
    text-align: left;
}
.mz-payment-methods img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    opacity: .9;
}

/* Badges de envío bajo el botón "Añadir al carrito" */
.mz-product-badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mz-product-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #faf3f7;
    border: 1px solid #f0dde9;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-product-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(181, 25, 119, 0.10);
    border-color: var(--mz-magenta);
}
.mz-product-badge__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mz-magenta);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
}
.mz-product-badge__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mz-product-badge__text strong {
    font-size: 13px;
    color: var(--mz-text);
    font-weight: 700;
}
.mz-product-badge__text small {
    font-size: 11.5px;
    color: var(--mz-muted);
    margin-top: 2px;
}
@media (max-width: 575px) {
    .mz-product-badges { grid-template-columns: 1fr; }
}

/* Precio destacado en la ficha de producto */
.product-information .product-prices,
#product .product-prices {
    margin-bottom: 14px;
}
.product-information .current-price,
#product .current-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.product-information .current-price-value,
.product-information .product-price.current-price-value,
#product .current-price .product-price {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: var(--mz-magenta) !important;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.product-information .regular-price,
#product .regular-price {
    font-size: 16px !important;
    color: var(--mz-muted) !important;
    text-decoration: line-through;
    font-weight: 400 !important;
}
.product-information .discount,
.product-information .product-discount .discount,
#product .discount {
    background: var(--mz-magenta) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.product-information .product-reference {
    font-size: 12px;
    color: var(--mz-muted);
    margin-bottom: 8px;
}
.product-information .product-reference .label {
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-right: 4px;
}

/* Botón "Añadir al carrito" en ficha de producto: negro → magenta hover */
#product .add-to-cart,
#product button.add-to-cart.btn-primary {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 14px 22px !important;
    border-radius: 8px !important;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
#product .add-to-cart:hover:not([disabled]),
#product button.add-to-cart.btn-primary:hover:not([disabled]) {
    background: var(--mz-magenta) !important;
    border-color: var(--mz-magenta) !important;
    transform: translateY(-1px);
}
#product .add-to-cart[disabled] { opacity: 0.5; cursor: not-allowed; }
#product .qty input[type="number"] {
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    text-align: center;
    font-weight: 600;
    padding: 10px;
}

/* Logo de marca a la derecha del título del producto */
.product_header_container { position: relative; }
.product_header_container > .product-manufacturer-next {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 !important;
    float: none !important;
    z-index: 2;
}
.product_header_container > .product-manufacturer-next .manufacturer-logo {
    max-height: 90px;
    max-width: 170px;
    width: auto;
    opacity: .95;
    transition: opacity .2s ease;
}
.product_header_container > .product-manufacturer-next a:hover .manufacturer-logo { opacity: 1; }
/* Título más estrecho y un pelín más pequeño para dejar más sitio al logo */
.product_header_container > .page-title {
    width: calc(100% - 200px);
    padding-right: 0 !important;
    margin-bottom: .8rem !important;
    font-size: 24px !important;
    line-height: 1.2;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 767px) {
    .product_header_container > .product-manufacturer-next .manufacturer-logo {
        max-height: 60px;
        max-width: 110px;
    }
    .product_header_container > .page-title {
        padding-right: 120px;
        font-size: 22px !important;
    }
}
@media (max-width: 575px) {
    .product_header_container > .product-manufacturer-next .manufacturer-logo {
        max-height: 44px;
        max-width: 90px;
    }
    .product_header_container > .page-title {
        padding-right: 100px;
        font-size: 20px !important;
    }
}

/* Pestañas horizontales de la ficha de producto (pp_tabs=tabh) */
.product-tabs #product-infos-tabs.nav-tabs,
#product-infos-tabs.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #e3e3e3 !important;
    margin: 0 0 22px;
    padding: 0;
}
.product-tabs #product-infos-tabs .nav-item { margin: 0; }
.product-tabs #product-infos-tabs .nav-link {
    background: transparent !important;
    color: var(--mz-muted) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: color .2s ease, border-color .2s ease;
}
.product-tabs #product-infos-tabs .nav-link:hover {
    color: var(--mz-text) !important;
    border-bottom-color: #d0d0d0 !important;
}
.product-tabs #product-infos-tabs .nav-link.active {
    color: var(--mz-magenta) !important;
    border-bottom-color: var(--mz-magenta) !important;
}
.product-tabs .tab-content {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 26px 28px;
}
.product-tabs .tab-content .tab-pane {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}
.product-tabs .tab-content .rte-content {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}

/* Mantengo estilos por si se vuelve a "section" en el futuro */
.product-sections .section-title,
.product-sections h4.section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mz-text) !important;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e3e3e3;
    position: relative;
}
.product-sections .section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 56px; height: 3px;
    background: var(--mz-magenta);
    border-radius: 2px;
}
.product-sections .section-title span { background: transparent !important; padding: 0 !important; }
.product-sections .product-description-section,
.product-sections .block-section {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 24px 26px;
    margin-bottom: 18px;
}
.product-sections .section-content,
.product-sections .rte-content {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}

/* Sticky add-to-cart: el bloque de compra acompaña al scroll en desktop */
@media (min-width: 992px) {
    #product .col-product-info,
    #product .col-md-6.col-product-info {
        align-self: flex-start;
        position: sticky;
        top: 90px;
    }
}

/* Badges de stock */
#product .product-availability,
#product .product-quantities,
#product .product-last-items,
#product .badge.product-available,
#product .badge.product-unavailable,
#product .badge.product-last-items {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 8px;
}
#product .badge-success,
#product .product-availability.product-available,
#product .badge.product-available {
    background: #e6f6ec !important;
    color: #2e7d44 !important;
    border: 1px solid #cce8d4 !important;
}
#product .badge-warning,
#product .product-last-items {
    background: #fff5dc !important;
    color: #946b00 !important;
    border: 1px solid #ffe8a8 !important;
}
#product .badge-danger,
#product .product-unavailable,
#product .badge.product-unavailable {
    background: #fde8e9 !important;
    color: #a82431 !important;
    border: 1px solid #f5c5c9 !important;
}
/* Pequeño punto antes del texto */
#product .product-availability .material-icons,
#product .product-availability i { font-size: 14px; }

/* Productos relacionados (crossselling, accessories) */
.crossselling-products,
.product-accessories {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #ececec;
}
.crossselling-products .section-title,
.product-accessories .section-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    color: var(--mz-text) !important;
    margin-bottom: 18px;
    padding-bottom: 10px;
    position: relative;
}
.crossselling-products .section-title::after,
.product-accessories .section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--mz-magenta);
    border-radius: 2px;
}
.crossselling-products .section-title span,
.product-accessories .section-title span {
    background: transparent !important;
    padding: 0 !important;
}
/* Las cards usan .product-miniature → heredan el estilo del listado */

/* ---------- Megamenú: backdrop al abrir submenú ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
body:has(#cbp-hrmenu .cbp-hrmenu-tab.cbp-has-submeu:hover)::before,
body:has(#cbp-hrmenu .cbp-hrmenu-tab.cbp-has-submeu .cbp-hrsub:hover)::before {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s linear 0s;
}

/* El submenú debe quedar por encima del backdrop */
#cbp-hrmenu .cbp-hrsub {
    z-index: 95;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
/* La barra del megamenú también, para que la pestaña activa se vea encima */
.container-iqitmegamenu,
#iqitmegamenu-horizontal {
    position: relative;
    z-index: 95;
}

/* ════════════════════════════════════════════════════════════════════
   ÁREA "MI CUENTA" — MAZUELAS
   ════════════════════════════════════════════════════════════════════ */

/* Hero / título de la página */
.page-customer-account #content-wrapper > .page-header,
body[id^="my-account"] #content-wrapper > .page-header,
body[id^="identity"] #content-wrapper > .page-header,
body[id^="history"] #content-wrapper > .page-header,
body[id^="addresses"] #content-wrapper > .page-header,
body[id^="address"] #content-wrapper > .page-header {
    text-align: center;
    margin: 24px 0 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}
.page-customer-account #content-wrapper > .page-header .page-title,
body[id^="my-account"] .page-header .page-title,
body[id^="identity"] .page-header .page-title,
body[id^="history"] .page-header .page-title,
body[id^="addresses"] .page-header .page-title,
body[id^="address"] .page-header .page-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    margin: 0;
}
.page-customer-account .page-header .page-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--mz-magenta, #b51977);
    margin: 12px auto 0;
    border-radius: 2px;
}

/* Wrapper principal de la sección de cuenta */
.my-account-page-content-wrapper {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    border: 1px solid #ececec;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03);
    margin-bottom: 40px;
}
.my-account-page-content-wrapper > .row {
    align-items: stretch;
}

/* ─────── SIDEBAR DE NAVEGACIÓN ─────── */
.my-account-side-links {
    padding: 0 18px 0 0;
    border-right: 1px solid #f0f0f0;
}
.my-account-side-links a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 13px 14px !important;
    margin-bottom: 4px;
    color: #444 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 8px;
    background: transparent;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    position: relative;
}
.my-account-side-links a .link-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: inherit;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-weight: inherit;
    line-height: 1.3;
}
.my-account-side-links a i {
    width: 22px;
    text-align: center;
    color: var(--mz-magenta, #b51977);
    font-size: 16px;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.my-account-side-links a:hover {
    background: rgba(181, 25, 119, 0.06) !important;
    color: var(--mz-magenta, #b51977) !important;
    border-left-color: rgba(181, 25, 119, 0.4);
    transform: translateX(2px);
}
.my-account-side-links a:hover i {
    transform: scale(1.1);
}
.my-account-side-links a.active,
.my-account-side-links a.current,
.my-account-side-links a:focus {
    background: rgba(181, 25, 119, 0.10) !important;
    color: var(--mz-magenta, #b51977) !important;
    border-left-color: var(--mz-magenta, #b51977);
    font-weight: 700;
    outline: none;
}

/* ─────── CONTENIDO DE LA SECCIÓN ─────── */
.my-account-page-content-wrapper .page-content {
    padding-left: 24px;
}
.my-account-page-content-wrapper .page-content > h1,
.my-account-page-content-wrapper .page-content > h2,
.page-content--customer-form h1,
.page-content--customer-form h2 {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 4px 0 22px;
    letter-spacing: -0.2px;
    position: relative;
    padding-bottom: 12px;
}
.my-account-page-content-wrapper .page-content > h1::after,
.my-account-page-content-wrapper .page-content > h2::after,
.page-content--customer-form h1::after,
.page-content--customer-form h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--mz-magenta, #b51977);
    border-radius: 2px;
}

/* ─────── FORMULARIO ─────── */
#customer-form .form-control-label,
#customer-form label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #555 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}
#customer-form .form-control-label .required,
#customer-form label .required {
    color: var(--mz-magenta, #b51977);
    font-weight: 700;
    margin-left: 2px;
}
#customer-form .form-control {
    height: auto;
    padding: 12px 16px;
    font-size: 14.5px;
    background: #fafafa;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    color: #222;
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#customer-form .form-control:focus,
#customer-form .form-control:active {
    background: #fff;
    border-color: var(--mz-magenta, #b51977);
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.10);
    outline: none;
}
#customer-form .form-control::placeholder {
    color: #aaa;
    font-weight: 400;
}
#customer-form .form-text,
#customer-form .form-group .text-muted {
    font-size: 12px;
    color: #888 !important;
    margin-top: 6px;
    font-style: italic;
    line-height: 1.4;
}

/* Botón "ver contraseña" dentro del input */
#customer-form .input-group {
    position: relative;
}
#customer-form .input-group .input-group-btn,
#customer-form .input-group .input-group-append {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    z-index: 4;
}
#customer-form .input-group button[data-action="show-password"],
#customer-form button[data-action="show-password"] {
    background: transparent !important;
    border: 0 !important;
    color: #888 !important;
    font-size: 18px;
    padding: 6px 10px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: color .15s ease;
}
#customer-form button[data-action="show-password"]:hover {
    color: var(--mz-magenta, #b51977) !important;
}

/* Mensaje "Soy un Profesional" / aviso destacado */
.page-content--customer-form .iqit-customer-info,
.page-content--customer-form .alert-info,
.page-content--customer-form .professional-message,
.page-content--customer-form .registro-profesional-msg {
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.06), rgba(181, 25, 119, 0.02));
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-left: 4px solid var(--mz-magenta, #b51977);
    border-radius: 12px;
    padding: 16px 22px;
    margin: 22px 0;
    color: #444;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.page-content--customer-form .iqit-customer-info a,
.page-content--customer-form .alert-info a,
.page-content--customer-form .professional-message a,
.page-content--customer-form .registro-profesional-msg a {
    color: var(--mz-magenta, #b51977) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botones de acción del formulario */
#customer-form .form-footer,
#customer-form footer.form-footer {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
#customer-form button[type="submit"],
#customer-form .btn-primary {
    background: var(--mz-magenta, #b51977) !important;
    border-color: var(--mz-magenta, #b51977) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(181, 25, 119, 0.25);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#customer-form button[type="submit"]:hover,
#customer-form .btn-primary:hover {
    background: #8e125c !important;
    border-color: #8e125c !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.32);
}

/* Estado válido / inválido de campos */
#customer-form .form-control.is-valid,
#customer-form .js-input-column.valid .form-control {
    border-color: #2e7d44;
    background: #fff;
}
#customer-form .form-control.is-invalid,
#customer-form .js-input-column.has-error .form-control {
    border-color: #c0392b;
    background: #fff;
}

/* Bloque de listado de pedidos (Historial) */
body[id^="history"] .my-account-page-content-wrapper table.table {
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
body[id^="history"] table.table thead th {
    background: #fafafa;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #555;
    border: 0;
    border-bottom: 1px solid #ececec;
    padding: 14px 16px;
}
body[id^="history"] table.table tbody td {
    padding: 14px 16px;
    border-top: 1px solid #f3f3f3;
    vertical-align: middle;
    font-size: 14px;
}
body[id^="history"] table.table tbody tr:hover {
    background: rgba(181, 25, 119, 0.025);
}

/* Listado de direcciones */
body[id^="addresses"] .address {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: border-color .15s ease, transform .15s ease;
}
body[id^="addresses"] .address:hover {
    border-color: rgba(181, 25, 119, 0.3);
    transform: translateY(-2px);
}
body[id^="addresses"] .address .address-body h4 {
    color: var(--mz-magenta, #b51977);
    font-weight: 800;
    margin-bottom: 10px;
}
body[id^="addresses"] .address .address-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f3f3f3;
}

/* Responsive */
@media (max-width: 767.98px) {
    .my-account-page-content-wrapper {
        padding: 18px;
    }
    .my-account-side-links {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }
    .my-account-page-content-wrapper .page-content {
        padding-left: 0;
    }
    .page-customer-account .page-header .page-title,
    body[id^="my-account"] .page-header .page-title,
    body[id^="identity"] .page-header .page-title {
        font-size: 26px;
    }
}

/* ─────── BLOQUES DEL MÓDULO GDPR (Mis datos personales) ─────── */
.psgdprinfo17 {
    background: #fafafa !important;
    border: 1px solid #ececec;
    border-left: 4px solid var(--mz-magenta, #b51977);
    border-radius: 12px;
    padding: 22px 26px !important;
    margin-bottom: 18px;
    color: #444;
    line-height: 1.65;
}
.psgdprinfo17 h2 {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 10px;
    letter-spacing: -0.1px;
}
.psgdprinfo17 p {
    font-size: 14.5px;
    margin: 0 0 16px;
}
.psgdprinfo17 p:last-child { margin-bottom: 0; }
.psgdprinfo17 a:not(.btn) {
    color: var(--mz-magenta, #b51977);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.psgdprinfo17 .psgdprgetdatabtn17,
.psgdprinfo17 a.btn-primary {
    background: var(--mz-magenta, #b51977) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 10px;
    margin-right: 10px;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(181, 25, 119, 0.25);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    text-decoration: none !important;
    display: inline-block;
}
.psgdprinfo17 .psgdprgetdatabtn17:hover,
.psgdprinfo17 a.btn-primary:hover {
    background: #8e125c !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.32);
    color: #fff !important;
}

/* ─────── BLOQUES DE WISHLIST (Mi lista de deseos) ─────── */
#iqitwishlist-user-products .iqitwishlist-product {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#iqitwishlist-user-products .iqitwishlist-product:hover {
    border-color: rgba(181, 25, 119, 0.30);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
#iqitwishlist-user-products .iqitwishlist-product hr { display: none; }
#iqitwishlist-user-products .iqitwishlist-product ._name a {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14.5px;
    line-height: 1.4;
}
#iqitwishlist-user-products .iqitwishlist-product ._name a:hover {
    color: var(--mz-magenta, #b51977);
}
#iqitwishlist-user-products .iqitwishlist-product .product-price {
    font-weight: 800;
    font-size: 17px;
    color: var(--mz-magenta, #b51977);
}
#iqitwishlist-user-products .iqitwishlist-product img {
    border-radius: 8px;
    max-width: 80px;
    height: auto;
}
#iqitwishlist-user-products .iqitwishlist-product .js-iqitwishlist-remove {
    color: #999;
    font-size: 18px;
    transition: color .15s ease;
}
#iqitwishlist-user-products .iqitwishlist-product .js-iqitwishlist-remove:hover {
    color: #c0392b;
}

/* Bloque compartir wishlist */
#iqitwishlist-share {
    margin-top: 24px;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.05), rgba(181, 25, 119, 0.01));
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-left: 4px solid var(--mz-magenta, #b51977);
    border-radius: 12px;
}
#iqitwishlist-share h3 {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 12px;
    letter-spacing: -0.1px;
}
#iqitwishlist-share .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
#iqitwishlist-share .input-group .form-control.js-to-clipboard {
    background: #fff;
    border: 1.5px solid #e6e6e6;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #444;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    flex: 1;
    box-shadow: none;
}
#iqitwishlist-share .input-group .form-control.js-to-clipboard:focus {
    border-color: var(--mz-magenta, #b51977);
    box-shadow: none;
    outline: none;
}
#iqitwishlist-share .input-group .input-group-append {
    display: flex;
    margin: 0;
}
#iqitwishlist-share #iqitwishlist-clipboard-btn {
    background: var(--mz-magenta, #b51977) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: 0 10px 10px 0 !important;
    cursor: pointer;
    transition: background .15s ease;
    white-space: nowrap;
}
#iqitwishlist-share #iqitwishlist-clipboard-btn:hover {
    background: #8e125c !important;
}

/* Aviso wishlist vacía */
#iqitwishlist-warning,
.my-account-page-content-wrapper p.alert.alert-warning {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-left: 4px solid #fa8c16;
    border-radius: 10px;
    color: #663b00;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "EXCLUSIVO PROFESIONALES" (CMS id=10)
   Prefijo .mz-pro__ — scoped para no afectar a otras páginas.
   ════════════════════════════════════════════════════════════════════ */
.mz-pro {
    --mz-pro-magenta: #b51977;
    --mz-pro-magenta-dark: #8e125c;
    --mz-pro-ink: #1a1a1a;
    --mz-pro-muted: #666;
    --mz-pro-bg-soft: #faf6f8;
    color: var(--mz-pro-ink);
    font-size: 16px;
    line-height: 1.6;
}
.mz-pro *,
.mz-pro *::before,
.mz-pro *::after { box-sizing: border-box; }

/* Eyebrow */
.mz-pro__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(181, 25, 119, 0.10);
    color: var(--mz-pro-magenta);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}
.mz-pro__eyebrow--dark {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
/* Dentro del hero (fondo magenta) el eyebrow va en blanco con halo claro */
.mz-pro__hero .mz-pro__eyebrow {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* Botones */
.mz-pro__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1;
}
.mz-pro__btn i { font-size: 16px; }
.mz-pro__btn--primary {
    background: #b51977 !important;
    color: #fff !important;
    border-color: #b51977 !important;
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.28);
}
.mz-pro__btn--primary:hover,
.mz-pro__btn--primary:focus {
    background: #8e125c !important;
    border-color: #8e125c !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(181, 25, 119, 0.34);
    color: #fff !important;
}
.mz-pro__btn--ghost {
    background: transparent !important;
    color: #b51977 !important;
    border-color: #b51977 !important;
}
.mz-pro__btn--ghost:hover,
.mz-pro__btn--ghost:focus {
    background: #b51977 !important;
    color: #fff !important;
    border-color: #b51977 !important;
    transform: translateY(-2px);
}
.mz-pro__btn--xl {
    padding: 18px 36px;
    font-size: 15px;
    border-radius: 14px;
}

/* HERO */
.mz-pro__hero {
    position: relative;
    margin: -40px -15px 60px;
    padding: 80px 30px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 50%, #5e0a3d 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
}
.mz-pro__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px circle at 85% 15%, rgba(255,255,255,0.12), transparent 50%),
        radial-gradient(500px circle at 10% 90%, rgba(255,255,255,0.08), transparent 50%);
    pointer-events: none;
}
.mz-pro__hero-inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.mz-pro__hero-text { max-width: 640px; }
.mz-pro__title {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 18px;
    color: #fff;
    letter-spacing: -1px;
}
.mz-pro__title span {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 6px;
}
.mz-pro__subtitle {
    font-size: 17.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
    max-width: 560px;
}
.mz-pro__hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.mz-pro__hero-actions .mz-pro__btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5);
}
/* El !important es necesario: la regla genérica .mz-pro__btn--ghost:hover pone
   el fondo magenta con !important, y aquí el texto también va en magenta, así
   que sin forzar el fondo blanco el botón se quedaba magenta sobre magenta y
   las letras desaparecían al pasar por encima. */
.mz-pro__hero-actions .mz-pro__btn--ghost:hover,
.mz-pro__hero-actions .mz-pro__btn--ghost:focus {
    background: #fff !important;
    color: var(--mz-pro-magenta) !important;
    border-color: #fff !important;
}

/* Badge -15% */
.mz-pro__hero-badge {
    background: #fff;
    color: var(--mz-pro-magenta);
    border-radius: 50%;
    width: 220px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    transform: rotate(-8deg);
    flex-shrink: 0;
    border: 6px solid rgba(255, 255, 255, 0.25);
}
.mz-pro__hero-badge-top {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #999;
    line-height: 1.2;
}
.mz-pro__hero-badge-num {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin: 6px 0;
    color: var(--mz-pro-magenta);
    letter-spacing: -2px;
}
.mz-pro__hero-badge-bottom {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mz-pro-magenta);
}

/* SECTION HEAD */
.mz-pro__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.mz-pro__section-head h2 {
    font-size: 34px;
    font-weight: 900;
    color: var(--mz-pro-ink);
    margin: 0 0 12px;
    letter-spacing: -0.7px;
    line-height: 1.15;
}
.mz-pro__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 18px auto 0;
    background: var(--mz-pro-magenta);
    border-radius: 2px;
}
.mz-pro__section-head p {
    font-size: 17px;
    color: var(--mz-pro-muted);
    margin: 22px 0 0;
}

/* BENEFICIOS */
.mz-pro__benefits {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-pro__benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mz-pro__benefit {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 28px 26px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-pro__benefit:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-pro__benefit-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.12), rgba(181, 25, 119, 0.05));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.mz-pro__benefit-icon i {
    font-size: 28px;
    color: var(--mz-pro-magenta);
}
.mz-pro__benefit:hover .mz-pro__benefit-icon {
    transform: scale(1.08);
    background: linear-gradient(135deg, var(--mz-pro-magenta), var(--mz-pro-magenta-dark));
}
.mz-pro__benefit:hover .mz-pro__benefit-icon i { color: #fff; }
.mz-pro__benefit h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--mz-pro-ink);
    margin: 0 0 8px;
    line-height: 1.25;
}
.mz-pro__benefit p {
    font-size: 14.5px;
    color: var(--mz-pro-muted);
    margin: 0;
    line-height: 1.55;
}

/* FORMACIONES */
.mz-pro__training {
    background: linear-gradient(135deg, var(--mz-pro-ink), #2a2a2a);
    color: #fff;
    padding: 70px 30px;
    margin: 0 -15px 70px;
    border-radius: 28px;
}
.mz-pro__training-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
}
.mz-pro__training-text h2 {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.mz-pro__training-text p {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
    line-height: 1.65;
}
.mz-pro__training-visual {
    background: linear-gradient(135deg, var(--mz-pro-magenta), var(--mz-pro-magenta-dark));
    border-radius: 22px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(181, 25, 119, 0.40);
    position: relative;
    overflow: hidden;
}
.mz-pro__training-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%);
}
.mz-pro__training-visual-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.mz-pro__training-visual-inner i {
    font-size: 56px;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* CTA FINAL */
.mz-pro__cta {
    text-align: center;
    background: var(--mz-pro-bg-soft);
    border-radius: 28px;
    padding: 60px 30px;
    max-width: 1140px;
    margin: 0 auto 60px;
}
.mz-pro__cta h2 {
    font-size: 34px;
    font-weight: 900;
    color: var(--mz-pro-ink);
    margin: 0 0 14px;
    letter-spacing: -0.6px;
}
.mz-pro__cta p {
    font-size: 17px;
    color: var(--mz-pro-muted);
    margin: 0 0 28px;
}
.mz-pro__cta-help {
    margin-top: 24px !important;
    font-size: 14px !important;
}
.mz-pro__cta-help a {
    color: var(--mz-pro-magenta);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* BANNER intermedio Mazuelas+ */
.mz-pro__banner--plus {
    background:
        radial-gradient(800px circle at 80% 20%, rgba(255, 230, 245, 0.35), transparent 60%),
        linear-gradient(135deg, #fff 0%, #faf6f8 100%);
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-radius: 28px;
    padding: 70px 30px;
    margin: 0 -15px 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mz-pro__banner--plus::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(181, 25, 119, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.mz-pro__banner--plus::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(181, 25, 119, 0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.mz-pro__banner-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}
.mz-pro__banner--plus .mz-pro__eyebrow--dark {
    background: var(--mz-pro-magenta);
    color: #fff;
}
.mz-pro__banner--plus h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--mz-pro-ink);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.mz-pro__banner--plus p {
    font-size: 17px;
    color: var(--mz-pro-muted);
    margin: 0 0 28px;
    line-height: 1.65;
}

/* RESPONSIVE — tablet */
@media (max-width: 991.98px) {
    .mz-pro__hero-inner { grid-template-columns: 1fr; text-align: center; }
    .mz-pro__hero-text { max-width: 100%; }
    .mz-pro__hero-badge { margin: 0 auto; width: 180px; height: 180px; }
    .mz-pro__hero-badge-num { font-size: 52px; }
    .mz-pro__hero-actions { justify-content: center; }
    .mz-pro__title { font-size: 36px; }
    .mz-pro__title span { font-size: 26px; }
    .mz-pro__benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .mz-pro__training-inner { grid-template-columns: 1fr; gap: 40px; }
    .mz-pro__training-visual { max-width: 480px; margin: 0 auto; }
}

/* RESPONSIVE — móvil */
@media (max-width: 575.98px) {
    .mz-pro__hero { padding: 56px 22px; border-radius: 0 0 20px 20px; }
    .mz-pro__title { font-size: 28px; }
    .mz-pro__title span { font-size: 20px; }
    .mz-pro__subtitle { font-size: 15.5px; }
    .mz-pro__hero-badge { width: 150px; height: 150px; }
    .mz-pro__hero-badge-num { font-size: 42px; }
    .mz-pro__hero-actions .mz-pro__btn { width: 100%; justify-content: center; }
    .mz-pro__section-head h2,
    .mz-pro__cta h2 { font-size: 26px; }
    .mz-pro__benefits-grid { grid-template-columns: 1fr; }
    .mz-pro__training { padding: 50px 22px; border-radius: 20px; }
    .mz-pro__training-text h2 { font-size: 24px; }
    .mz-pro__training-visual-inner i { font-size: 42px; }
    .mz-pro__cta { padding: 48px 22px; border-radius: 20px; }
    .mz-pro__banner--plus { padding: 48px 22px; border-radius: 20px; }
    .mz-pro__banner--plus h2 { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "QUIÉNES SOMOS" (CMS id=13)
   Prefijo .mz-about__ — scoped.
   ════════════════════════════════════════════════════════════════════ */
.mz-about {
    --about-magenta: #b51977;
    --about-magenta-dark: #8e125c;
    --about-ink: #1a1a1a;
    --about-muted: #666;
    --about-bg-soft: #faf6f8;
    color: var(--about-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-about *,
.mz-about *::before,
.mz-about *::after { box-sizing: border-box; }

.mz-about__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}
.mz-about__eyebrow--soft {
    background: rgba(181, 25, 119, 0.10);
    color: var(--about-magenta);
}

/* HERO */
.mz-about__hero {
    position: relative;
    margin: -40px -15px 60px;
    padding: 90px 30px 80px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 50%, #5e0a3d 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-about__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 75% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-about__hero-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}
.mz-about__hero h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 18px;
    color: #fff;
    letter-spacing: -1.2px;
}
.mz-about__hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.6;
}

/* HISTORIA + CIFRAS */
.mz-about__story {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-about__story-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
}
.mz-about__story-text h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--about-ink);
    margin: 0 0 18px;
    letter-spacing: -0.6px;
    line-height: 1.2;
}
.mz-about__story-text p {
    font-size: 16.5px;
    color: var(--about-muted);
    margin: 0 0 14px;
    line-height: 1.7;
}
.mz-about__story-text p strong { color: var(--about-ink); }

.mz-about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mz-about__stat {
    background: linear-gradient(135deg, #fff, var(--about-bg-soft));
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-about__stat:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-about__stat strong {
    display: block;
    font-size: 32px;
    font-weight: 900;
    color: var(--about-magenta);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.mz-about__stat span {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--about-muted);
}

/* SECTION HEAD */
.mz-about__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.mz-about__section-head h2 {
    font-size: 34px;
    font-weight: 900;
    color: var(--about-ink);
    margin: 0 0 12px;
    letter-spacing: -0.7px;
    line-height: 1.15;
}
.mz-about__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 18px auto 0;
    background: var(--about-magenta);
    border-radius: 2px;
}
.mz-about__section-head p {
    font-size: 17px;
    color: var(--about-muted);
    margin: 22px 0 0;
}

/* MISIÓN, VISIÓN, VALORES */
.mz-about__values {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-about__values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mz-about__value {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 32px 28px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-about__value:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-about__value-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, var(--about-magenta), var(--about-magenta-dark));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(181, 25, 119, 0.25);
}
.mz-about__value-icon i {
    font-size: 30px;
    color: #fff;
}
.mz-about__value h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--about-ink);
    margin: 0 0 10px;
}
.mz-about__value p {
    font-size: 15px;
    color: var(--about-muted);
    margin: 0;
    line-height: 1.65;
}

/* EQUIPO */
.mz-about__team {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-about__team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mz-about__person {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 26px 22px 22px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
}
.mz-about__person:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-about__avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--about-magenta), var(--about-magenta-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 22px rgba(181, 25, 119, 0.30);
    border: 4px solid #fff;
    outline: 2px solid rgba(181, 25, 119, 0.18);
    outline-offset: 2px;
    overflow: hidden;
    position: relative;
}
.mz-about__avatar span {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1;
}
.mz-about__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mz-about__avatar--fallback {
    /* aplicada vía JS onerror si la foto no carga */
    background: linear-gradient(135deg, var(--about-magenta), var(--about-magenta-dark));
}
.mz-about__person:hover .mz-about__avatar {
    transform: scale(1.03);
    transition: transform .25s ease;
}
.mz-about__person-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--about-ink);
    margin: 0 0 4px;
    line-height: 1.2;
}
.mz-about__person-role {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--about-magenta);
    margin: 0 0 12px;
}
.mz-about__person-bio {
    font-size: 13.5px;
    color: var(--about-muted);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

/* CTA FINAL */
.mz-about__cta {
    text-align: center;
    background: linear-gradient(135deg, var(--about-bg-soft), #fff);
    border: 1px solid #ececec;
    border-radius: 28px;
    padding: 60px 30px;
    max-width: 1140px;
    margin: 0 auto 60px;
}
.mz-about__cta h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--about-ink);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.mz-about__cta p {
    font-size: 17px;
    color: var(--about-muted);
    margin: 0 0 28px;
}
.mz-about__cta-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "ECOHEM" (CMS id=37) — Responsabilidad social
   Prefijo .mz-eco__ — scoped.
   ════════════════════════════════════════════════════════════════════ */
.mz-eco {
    --eco-magenta: #b51977;
    --eco-magenta-dark: #8e125c;
    --eco-green: #2e7d44;
    --eco-green-dark: #1f5a30;
    --eco-red: #c0392b;
    --eco-ink: #1a1a1a;
    --eco-muted: #666;
    --eco-bg-soft: #faf6f8;
    color: var(--eco-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-eco *,
.mz-eco *::before,
.mz-eco *::after { box-sizing: border-box; }

/* Eyebrow (reusa el patrón ya conocido) */
.mz-eco__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}
.mz-eco__eyebrow--soft {
    background: rgba(181, 25, 119, 0.10);
    color: var(--eco-magenta);
}

/* HERO */
.mz-eco__hero {
    position: relative;
    margin: -40px -15px 60px;
    padding: 90px 30px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 45%, #5e0a3d 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-eco__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 75% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-eco__hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}
.mz-eco__hero h1 {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 8px;
    color: #fff;
    letter-spacing: -2px;
}
.mz-eco__hero-tagline {
    font-size: 22px;
    font-weight: 300;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.5px;
}
.mz-eco__hero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.65;
}

/* INTRO: 2 bloques numerados */
.mz-eco__intro {
    max-width: 1140px;
    margin: 0 auto 80px;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.mz-eco__intro-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-eco__intro-card:hover {
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-eco__intro-num {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 80px;
    font-weight: 900;
    color: var(--eco-magenta);
    opacity: 0.10;
    line-height: 1;
    letter-spacing: -3px;
}
.mz-eco__intro-card h2 {
    font-size: 24px;
    font-weight: 900;
    color: var(--eco-ink);
    margin: 0 0 14px;
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.mz-eco__intro-card p {
    font-size: 15.5px;
    color: var(--eco-muted);
    margin: 0 0 12px;
    line-height: 1.7;
}
.mz-eco__intro-card p:last-child { margin-bottom: 0; }

/* SECTION HEAD genérica */
.mz-eco__chapters-header {
    max-width: 1140px;
    margin: 0 auto 40px;
    padding: 0 15px;
}
.mz-eco__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.mz-eco__section-head h2 {
    font-size: 34px;
    font-weight: 900;
    color: var(--eco-ink);
    margin: 0 0 12px;
    letter-spacing: -0.7px;
    line-height: 1.15;
}
.mz-eco__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 18px auto 0;
    background: var(--eco-magenta);
    border-radius: 2px;
}
.mz-eco__section-head p {
    font-size: 16.5px;
    color: var(--eco-muted);
    margin: 22px 0 0;
}

/* CAPÍTULOS */
.mz-eco__chapter {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-eco__chapter-head {
    display: flex;
    gap: 26px;
    align-items: center;
    margin-bottom: 32px;
    padding: 28px 30px;
    border-radius: 22px;
    background: var(--eco-bg-soft);
    border: 1px solid #ececec;
}
.mz-eco__chapter-icon {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.mz-eco__chapter-icon i { font-size: 36px; }
.mz-eco__chapter-head h3 {
    font-size: 26px;
    font-weight: 900;
    color: var(--eco-ink);
    margin: 6px 0 8px;
    letter-spacing: -0.4px;
}
.mz-eco__chapter-head p {
    font-size: 15px;
    color: var(--eco-muted);
    margin: 0;
    line-height: 1.55;
}

/* Variantes de color por capítulo */
.mz-eco__chapter--equipo .mz-eco__chapter-icon {
    background: linear-gradient(135deg, var(--eco-magenta), var(--eco-magenta-dark));
}
.mz-eco__chapter--ambiente .mz-eco__chapter-icon {
    background: linear-gradient(135deg, var(--eco-green), var(--eco-green-dark));
    box-shadow: 0 10px 26px rgba(46, 125, 68, 0.30);
}
.mz-eco__chapter--social .mz-eco__chapter-icon {
    background: linear-gradient(135deg, #e74c3c, var(--eco-red));
    box-shadow: 0 10px 26px rgba(192, 57, 43, 0.30);
}
.mz-eco__chapter--ambiente .mz-eco__card-icon { background: linear-gradient(135deg, rgba(46, 125, 68, 0.14), rgba(46, 125, 68, 0.04)); }
.mz-eco__chapter--ambiente .mz-eco__card-icon i { color: var(--eco-green); }
.mz-eco__chapter--ambiente .mz-eco__card:hover .mz-eco__card-icon { background: linear-gradient(135deg, var(--eco-green), var(--eco-green-dark)); }
.mz-eco__chapter--ambiente .mz-eco__card:hover { border-color: rgba(46, 125, 68, 0.30); box-shadow: 0 14px 32px rgba(46, 125, 68, 0.10); }
.mz-eco__chapter--social .mz-eco__card-icon { background: linear-gradient(135deg, rgba(192, 57, 43, 0.14), rgba(192, 57, 43, 0.04)); }
.mz-eco__chapter--social .mz-eco__card-icon i { color: var(--eco-red); }
.mz-eco__chapter--social .mz-eco__card:hover .mz-eco__card-icon { background: linear-gradient(135deg, #e74c3c, var(--eco-red)); }
.mz-eco__chapter--social .mz-eco__card:hover { border-color: rgba(192, 57, 43, 0.30); box-shadow: 0 14px 32px rgba(192, 57, 43, 0.10); }

/* GRID DE CARDS */
.mz-eco__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mz-eco__card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-eco__card:hover {
    transform: translateY(-3px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-eco__card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.14), rgba(181, 25, 119, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: background .2s ease;
}
.mz-eco__card-icon i {
    font-size: 22px;
    color: var(--eco-magenta);
    transition: color .2s ease;
}
.mz-eco__card:hover .mz-eco__card-icon {
    background: linear-gradient(135deg, var(--eco-magenta), var(--eco-magenta-dark));
}
.mz-eco__card:hover .mz-eco__card-icon i { color: #fff; }
.mz-eco__card h4 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--eco-ink);
    margin: 0 0 8px;
    line-height: 1.3;
}
.mz-eco__card p {
    font-size: 13.5px;
    color: var(--eco-muted);
    margin: 0;
    line-height: 1.55;
}

/* PRODUCTO SOLIDARIO */
.mz-eco__product {
    max-width: 1140px;
    margin: 20px auto 70px;
    padding: 0 15px;
}
.mz-eco__product-inner {
    background: linear-gradient(135deg, #fff, var(--eco-bg-soft));
    border: 1px solid rgba(181, 25, 119, 0.20);
    border-left: 6px solid var(--eco-magenta);
    border-radius: 24px;
    padding: 44px 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: center;
}
.mz-eco__product-text h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--eco-ink);
    margin: 0 0 14px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.mz-eco__product-text p {
    font-size: 16px;
    color: var(--eco-muted);
    margin: 0 0 22px;
    line-height: 1.7;
}
.mz-eco__product-visual {
    background: linear-gradient(135deg, var(--eco-magenta), var(--eco-magenta-dark));
    border-radius: 22px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    box-shadow: 0 20px 50px rgba(181, 25, 119, 0.30);
    position: relative;
    overflow: hidden;
}
.mz-eco__product-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%);
}
.mz-eco__product-visual > i {
    position: relative;
    font-size: 80px;
    margin-top: 18px;
    opacity: 0.92;
}
.mz-eco__product-badge {
    position: relative;
    text-align: center;
}
.mz-eco__product-badge strong {
    display: block;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}
.mz-eco__product-badge span {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-top: 6px;
    opacity: 0.92;
}

/* CTA FINAL */
.mz-eco__cta {
    text-align: center;
    background: linear-gradient(135deg, var(--eco-bg-soft), #fff);
    border: 1px solid #ececec;
    border-radius: 28px;
    padding: 60px 30px;
    max-width: 1140px;
    margin: 0 auto 60px;
}
.mz-eco__cta h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--eco-ink);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.mz-eco__cta p {
    font-size: 16.5px;
    color: var(--eco-muted);
    margin: 0 0 28px;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .mz-eco__hero h1 { font-size: 56px; }
    .mz-eco__intro { grid-template-columns: 1fr; }
    .mz-eco__grid { grid-template-columns: repeat(2, 1fr); }
    .mz-eco__chapter-head { flex-direction: column; text-align: center; align-items: center; }
    .mz-eco__product-inner { grid-template-columns: 1fr; gap: 30px; }
    .mz-eco__product-visual { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 575.98px) {
    .mz-eco__hero { padding: 60px 22px; border-radius: 0 0 20px 20px; }
    .mz-eco__hero h1 { font-size: 44px; }
    .mz-eco__hero-tagline { font-size: 17px; }
    .mz-eco__hero-sub { font-size: 15px; }
    .mz-eco__intro-card { padding: 28px 24px; }
    .mz-eco__intro-card h2 { font-size: 20px; }
    .mz-eco__intro-num { font-size: 64px; }
    .mz-eco__section-head h2 { font-size: 26px; }
    .mz-eco__chapter-head { padding: 24px; }
    .mz-eco__chapter-head h3 { font-size: 22px; }
    .mz-eco__grid { grid-template-columns: 1fr; }
    .mz-eco__product-inner { padding: 32px 24px; border-radius: 20px; }
    .mz-eco__product-text h2 { font-size: 22px; }
    .mz-eco__product-badge strong { font-size: 56px; }
    .mz-eco__cta { padding: 48px 22px; border-radius: 20px; }
    .mz-eco__cta h2 { font-size: 24px; }
    .mz-eco__cta .mz-about__cta-actions .mz-pro__btn { width: 100%; justify-content: center; }
}

/* ──── RESPONSIVE ABOUT (heredado abajo) ──── */
@media (max-width: 991.98px) {
    .mz-about__hero h1 { font-size: 40px; }
    .mz-about__story-inner { grid-template-columns: 1fr; gap: 40px; }
    .mz-about__values-grid { grid-template-columns: 1fr; }
    .mz-about__team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "50 ANIVERSARIO" (CMS id=41) — Timeline cronológico
   Prefijo .mz-50__ — scoped.
   ════════════════════════════════════════════════════════════════════ */
.mz-50 {
    --m50-magenta: #b51977;
    --m50-magenta-dark: #8e125c;
    --m50-magenta-light: #ff007f;
    --m50-ink: #1a1a1a;
    --m50-muted: #666;
    --m50-bg-soft: #faf6f8;
    color: var(--m50-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-50 *,
.mz-50 *::before,
.mz-50 *::after { box-sizing: border-box; }

.mz-50__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}
.mz-50__eyebrow--soft {
    background: rgba(181, 25, 119, 0.10);
    color: var(--m50-magenta);
}

/* HERO con número "50" grande */
.mz-50__hero {
    position: relative;
    margin: -40px -15px 60px;
    padding: 100px 30px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 55%, #4a0930 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-50__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(400px circle at 15% 80%, rgba(255,255,255,0.10), transparent 55%);
    pointer-events: none;
}
.mz-50__hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.mz-50__hero h1 {
    font-size: 160px;
    font-weight: 900;
    line-height: 0.9;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -8px;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.30);
}
.mz-50__hero h1 span {
    display: block;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 12px;
    text-transform: uppercase;
    margin-top: 10px;
    text-shadow: none;
}
.mz-50__hero-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.92);
    margin: 18px auto 0;
    max-width: 580px;
    line-height: 1.65;
}

/* INTRO */
.mz-50__intro {
    max-width: 820px;
    margin: 0 auto 80px;
    padding: 0 15px;
    text-align: center;
}
.mz-50__intro-inner h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--m50-ink);
    margin: 8px 0 22px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.mz-50__intro-inner p {
    font-size: 17px;
    color: var(--m50-muted);
    margin: 0 0 14px;
    line-height: 1.7;
}
.mz-50__intro-inner p strong { color: var(--m50-ink); }

/* TIMELINE */
.mz-50__timeline {
    position: relative;
    max-width: 1140px;
    margin: 0 auto 80px;
    padding: 40px 15px;
}
.mz-50__timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(to bottom, transparent 0%, var(--m50-magenta) 10%, var(--m50-magenta) 90%, transparent 100%);
    transform: translateX(-50%);
    pointer-events: none;
}
.mz-50__milestone {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: 0;
    margin-bottom: 48px;
    align-items: start;
}
.mz-50__milestone:last-child { margin-bottom: 0; }
.mz-50__milestone-year {
    grid-column: 2;
    grid-row: 1;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--m50-magenta), var(--m50-magenta-dark));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.5px;
    box-shadow: 0 8px 22px rgba(181, 25, 119, 0.40);
    border: 4px solid #fff;
    z-index: 2;
    position: relative;
}
.mz-50__milestone-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
}
.mz-50__milestone-card:hover {
    transform: translateY(-3px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-50__milestone--left .mz-50__milestone-card {
    grid-column: 1;
    margin-right: 30px;
    text-align: right;
}
.mz-50__milestone--right .mz-50__milestone-card {
    grid-column: 3;
    margin-left: 30px;
}
/* Conector card → track */
.mz-50__milestone-card::before {
    content: "";
    position: absolute;
    top: 32px;
    width: 30px;
    height: 2px;
    background: var(--m50-magenta);
    opacity: 0.5;
}
.mz-50__milestone--left .mz-50__milestone-card::before { right: -30px; }
.mz-50__milestone--right .mz-50__milestone-card::before { left: -30px; }

.mz-50__milestone-card h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--m50-magenta);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.mz-50__milestone-card p {
    font-size: 15px;
    color: var(--m50-muted);
    margin: 0 0 12px;
    line-height: 1.7;
}
.mz-50__milestone-card p:last-child { margin-bottom: 0; }
.mz-50__milestone-card p strong { color: var(--m50-ink); }

/* Variantes especiales */
.mz-50__milestone-card--highlight {
    background: linear-gradient(135deg, #fff, var(--m50-bg-soft));
    border-color: rgba(181, 25, 119, 0.30);
    border-left: 4px solid var(--m50-magenta);
}
.mz-50__milestone-card--future {
    background: linear-gradient(135deg, var(--m50-ink), #2a2a2a);
    border: 0;
}
.mz-50__milestone-card--future h3 { color: #fff; }
.mz-50__milestone-card--future p { color: rgba(255, 255, 255, 0.85); }
.mz-50__milestone-card--future p strong { color: #fff; }

/* Imagen dentro de cada hito */
.mz-50__milestone-img {
    margin: -28px -30px 22px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    line-height: 0;
}
.mz-50__milestone-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease;
}
.mz-50__milestone-card:hover .mz-50__milestone-img img {
    transform: scale(1.03);
}
.mz-50__milestone-card--future .mz-50__milestone-img {
    /* el futuro tiene fondo oscuro: borde superior coherente */
    border-radius: 18px 18px 0 0;
}

/* EVENTO SOLIDARIO */
.mz-50__event {
    max-width: 1140px;
    margin: 0 auto 80px;
    padding: 0 15px;
}
.mz-50__event-banner {
    margin: 0 0 -40px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 1;
}
.mz-50__event-banner img {
    width: 100%;
    height: auto;
    display: block;
}
.mz-50__event-inner {
    background: linear-gradient(135deg, #fff, var(--m50-bg-soft));
    border: 1px solid rgba(181, 25, 119, 0.20);
    border-left: 6px solid var(--m50-magenta);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Banner separador (BANNER_WEB_6) */
.mz-50__divider {
    max-width: 1140px;
    margin: 0 auto 60px;
    padding: 0 15px;
}
.mz-50__divider img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Reconocimientos */
.mz-50__awards {
    max-width: 1140px;
    margin: 0 auto 80px;
    padding: 0 15px;
}
.mz-50__awards-banner {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.mz-50__awards-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "EVENTO SOLIDARIO" (CMS id=35)
   Prefijo .mz-event__ — scoped.
   ════════════════════════════════════════════════════════════════════ */
.mz-event {
    --ev-magenta: #b51977;
    --ev-magenta-dark: #8e125c;
    --ev-magenta-light: #ff5fb0;
    --ev-ink: #1a1a1a;
    --ev-muted: #666;
    --ev-bg-soft: #fff0f7;
    color: var(--ev-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-event *,
.mz-event *::before,
.mz-event *::after { box-sizing: border-box; }

.mz-event__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}

/* HERO */
.mz-event__hero {
    position: relative;
    margin: -40px -15px 0;
    padding: 80px 30px 60px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 55%, #4a0930 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-event__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 75% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-event__hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
.mz-event__hero h1 {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
    letter-spacing: -1px;
}
.mz-event__hero h1 span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    margin: 0 6px;
}
.mz-event__hero-sub {
    font-size: 17.5px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 30px;
    max-width: 640px;
    line-height: 1.6;
}
.mz-event__hero-meta {
    display: inline-flex;
    align-items: stretch;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    backdrop-filter: blur(6px);
}
.mz-event__hero-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
}
.mz-event__hero-date strong {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    letter-spacing: -2px;
}
.mz-event__hero-date span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.85);
}
.mz-event__hero-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.mz-event__hero-info p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}
.mz-event__hero-info i {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.7);
}

/* BANNERS (figura imagen ancha) */
.mz-event__banner {
    max-width: 1140px;
    margin: -36px auto 60px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}
.mz-event__banner figure {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.mz-event__banner img {
    width: 100%;
    height: auto;
    display: block;
}
.mz-event__banner--mid {
    margin: 0 auto 60px;
}

/* INFO + MAPA */
.mz-event__info {
    max-width: 1140px;
    margin: 0 auto 60px;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: stretch;
}
.mz-event__info-card {
    background: #fff;
    border: 1px solid #ececec;
    border-left: 4px solid var(--ev-magenta);
    border-radius: 18px;
    padding: 32px 30px;
}
.mz-event__info-card h2 {
    font-size: 26px;
    font-weight: 900;
    color: var(--ev-ink);
    margin: 8px 0 16px;
    letter-spacing: -0.4px;
    line-height: 1.25;
}
.mz-event__info-card h2 em { color: var(--ev-magenta); font-style: italic; font-weight: 800; }
.mz-event__info-card p {
    font-size: 15.5px;
    color: var(--ev-muted);
    margin: 0 0 14px;
    line-height: 1.7;
}
.mz-event__info-card p strong { color: var(--ev-ink); }
.mz-event__info-map {
    border-radius: 18px;
    overflow: hidden;
    background: #f5f5f5;
    min-height: 280px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.mz-event__info-map iframe { width: 100%; height: 100%; min-height: 280px; }

/* RECAP 2024 */
.mz-event__recap {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-event__recap-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(135deg, var(--ev-bg-soft), #fff);
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-radius: 22px;
    padding: 36px 40px;
}
.mz-event__recap-amount {
    text-align: center;
    padding: 26px 34px;
    background: linear-gradient(135deg, var(--ev-magenta), var(--ev-magenta-dark));
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.30);
}
.mz-event__recap-amount strong {
    display: block;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}
.mz-event__recap-amount span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 8px;
    font-weight: 700;
    opacity: 0.92;
}
.mz-event__recap-text h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--ev-ink);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.mz-event__recap-text p {
    font-size: 15.5px;
    color: var(--ev-muted);
    margin: 0 0 14px;
    line-height: 1.65;
}
.mz-event__recap-text p strong { color: var(--ev-magenta); }

/* SECTION HEAD */
.mz-event__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}
.mz-event__section-head h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--ev-ink);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.mz-event__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 16px auto 0;
    background: var(--ev-magenta);
    border-radius: 2px;
}
.mz-event__section-head p {
    font-size: 16px;
    color: var(--ev-muted);
    margin: 18px 0 0;
}

/* PROGRAMA */
.mz-event__program { max-width: 1140px; margin: 0 auto 60px; padding: 0 15px; }
.mz-event__program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.mz-event__act {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px 26px 26px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-event__act:hover {
    transform: translateY(-3px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-event__act-num {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ev-magenta), var(--ev-magenta-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(181, 25, 119, 0.30);
}
.mz-event__act > i {
    display: inline-flex;
    font-size: 28px;
    color: var(--ev-magenta);
    margin-bottom: 14px;
}
.mz-event__act h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ev-ink);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.mz-event__act p {
    font-size: 14px;
    color: var(--ev-muted);
    margin: 0;
    line-height: 1.55;
}

/* PREMIOS */
.mz-event__prizes { max-width: 1140px; margin: 0 auto 70px; padding: 0 15px; }
.mz-event__prizes-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.mz-event__prizes-list li {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 18px 22px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mz-event__prizes-list li:hover {
    border-color: rgba(181, 25, 119, 0.30);
    transform: translateX(4px);
    box-shadow: 0 8px 18px rgba(181, 25, 119, 0.08);
}
.mz-event__prize-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(181, 25, 119, 0.14), rgba(181, 25, 119, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mz-event__prize-icon i { font-size: 20px; color: var(--ev-magenta); }
.mz-event__prize-text { flex: 1; min-width: 0; }
.mz-event__prize-text h4 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ev-ink);
    margin: 0 0 4px;
    line-height: 1.3;
}
.mz-event__prize-tickets {
    font-size: 13px;
    font-weight: 700;
    color: var(--ev-magenta);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.4px;
}
.mz-event__prizes-note {
    background: #fff8e6;
    border: 1px solid #ffd591;
    border-left: 4px solid #fa8c16;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    color: #663b00;
    margin: 0;
    line-height: 1.55;
}
.mz-event__prizes-note i { margin-right: 8px; color: #fa8c16; }
.mz-event__prizes-note strong { color: #663b00; }

/* GALERÍA */
.mz-event__gallery { max-width: 1140px; margin: 0 auto 70px; padding: 0 15px; }
.mz-event__gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mz-event__gallery-grid figure {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transition: transform .25s ease;
}
.mz-event__gallery-grid figure:hover { transform: scale(1.02); }
.mz-event__gallery-grid img { width: 100%; height: auto; display: block; }

/* ════════════════════════════════════════════════════════════════════
   LANDINGS DE MARCA / PROMO (CMS 32, 34, 36, 38, 42, 43)
   Prefijo .mz-promo__ — esqueleto compartido.
   ════════════════════════════════════════════════════════════════════ */
.mz-promo {
    --promo-magenta: #b51977;
    --promo-magenta-dark: #8e125c;
    --promo-ink: #1a1a1a;
    --promo-muted: #666;
    --promo-bg-soft: #faf6f8;
    color: var(--promo-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-promo *,
.mz-promo *::before,
.mz-promo *::after { box-sizing: border-box; }

.mz-promo__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}

/* HERO compacto */
.mz-promo__hero {
    position: relative;
    margin: -40px -15px 0;
    padding: 70px 30px 60px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 55%, #4a0930 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-promo__hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(700px circle at 80% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-promo__hero-inner { position: relative; max-width: 740px; margin: 0 auto; }
.mz-promo__hero h1 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #fff;
    letter-spacing: -1px;
}
.mz-promo__hero p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.6;
}

/* Banner principal solapado al hero */
.mz-promo__banner {
    max-width: 1140px;
    margin: -32px auto 50px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}
.mz-promo__banner figure {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.mz-promo__banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* INTRO (opcional) */
.mz-promo__intro { max-width: 980px; margin: 0 auto 50px; padding: 0 15px; }
.mz-promo__intro-inner {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 36px 38px;
}
.mz-promo__intro h2 {
    font-size: 26px;
    font-weight: 900;
    color: var(--promo-ink);
    margin: 0 0 18px;
    letter-spacing: -0.4px;
    line-height: 1.25;
    text-align: center;
}
.mz-promo__intro h2 span { color: var(--promo-magenta); }
.mz-promo__intro p {
    font-size: 16px;
    color: var(--promo-muted);
    margin: 0 0 14px;
    line-height: 1.65;
}
.mz-promo__intro p strong { color: var(--promo-ink); }
.mz-promo__intro .mz-promo__intro-img {
    margin: 24px 0 8px;
    border-radius: 16px;
    overflow: hidden;
}
.mz-promo__intro .mz-promo__intro-img img { width: 100%; height: auto; display: block; }
.mz-promo__legal {
    font-size: 13px !important;
    color: #888 !important;
    text-align: center;
    margin-top: 18px !important;
    line-height: 1.55 !important;
}
.mz-promo__legal em { font-style: italic; }

/* Pasos numerados (CMS 36) */
.mz-promo__steps {
    list-style: none;
    padding: 0;
    margin: 18px 0;
}
.mz-promo__steps li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--promo-bg-soft);
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 16px;
}
.mz-promo__step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--promo-magenta), var(--promo-magenta-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(181, 25, 119, 0.30);
}

/* Bloque highlight (CMS 36 promo) */
.mz-promo__highlight {
    background: linear-gradient(135deg, var(--promo-bg-soft), #fff);
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-left: 4px solid var(--promo-magenta);
    border-radius: 16px;
    padding: 28px 30px;
    margin: 0 0 22px;
}
.mz-promo__highlight h2 { text-align: left; }

/* PRODUCTOS (preserva shortcodes {product:XXX}) */
.mz-promo__products {
    max-width: 1140px;
    margin: 0 auto 60px;
    padding: 0 15px;
}
.mz-promo__products #landing-personalizada {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 991.98px) {
    .mz-promo__products #landing-personalizada { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .mz-promo__products #landing-personalizada { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mz-promo__products #landing-personalizada { grid-template-columns: 1fr; }
}

/* EXTRA / TUTORIAL (CMS 38) */
.mz-promo__extra { max-width: 1140px; margin: 0 auto 60px; padding: 0 15px; }
.mz-promo__extra-inner {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 40px 38px;
}
.mz-promo__section-head {
    text-align: center;
    margin: 0 0 28px;
}
.mz-promo__section-head h2 {
    font-size: 26px;
    font-weight: 900;
    color: var(--promo-ink);
    margin: 0 0 8px;
    letter-spacing: -0.4px;
}
.mz-promo__section-head p {
    font-size: 15px;
    color: var(--promo-muted);
    margin: 0;
}

.mz-promo__tutorial {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mz-promo__tutorial > li {
    background: var(--promo-bg-soft);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.mz-promo__tutorial h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--promo-magenta);
    margin: 0 0 6px;
    line-height: 1.3;
}
.mz-promo__tutorial p {
    font-size: 14px;
    color: var(--promo-muted);
    margin: 0;
    line-height: 1.55;
}
.mz-promo__tutorial p strong { color: var(--promo-ink); }

.mz-promo__tips {
    margin-top: 24px;
    background: rgba(181, 25, 119, 0.05);
    border-radius: 14px;
    padding: 22px 26px;
}
.mz-promo__tips h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--promo-magenta);
    margin: 0 0 12px;
}
.mz-promo__tips ul {
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    color: var(--promo-muted);
    line-height: 1.7;
}
.mz-promo__tips li { margin-bottom: 4px; }

/* BOTÓN WHATSAPP (CMS 36) */
.mz-promo__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    background: #25d366;
    border-radius: 14px;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.30);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    margin: 0 auto;
}
.mz-promo__whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.40);
    color: #fff !important;
}
.mz-promo__whatsapp i { font-size: 26px; }
.mz-promo__whatsapp span { display: flex; flex-direction: column; align-items: flex-start; }
.mz-promo__whatsapp small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.92;
    line-height: 1;
    margin-bottom: 3px;
}
.mz-promo__whatsapp strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
}
.mz-promo__extra-inner:has(> .mz-promo__whatsapp),
.mz-promo__extra:has(.mz-promo__whatsapp) {
    text-align: center;
}
/* Fallback simple sin :has() */
.mz-promo__extra .mz-promo__whatsapp { display: inline-flex; }

/* CTA FINAL */
.mz-promo__cta {
    text-align: center;
    margin: 0 auto 60px;
    padding: 0 15px;
}

@media (max-width: 575.98px) {
    .mz-promo__hero { padding: 56px 22px 50px; border-radius: 0 0 20px 20px; }
    .mz-promo__hero h1 { font-size: 26px; }
    .mz-promo__hero p { font-size: 15px; }
    .mz-promo__banner { margin-top: -16px; }
    .mz-promo__intro-inner { padding: 28px 22px; }
    .mz-promo__intro h2 { font-size: 21px; }
    .mz-promo__highlight { padding: 22px; }
    .mz-promo__extra-inner { padding: 28px 22px; }
    .mz-promo__tutorial { grid-template-columns: 1fr; }
    .mz-promo__section-head h2 { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   LANDING "MOBILIARIO" (CMS id=15 Peluquería · id=17 Estética)
   Prefijo .mz-furn__ — compartido por ambas landings.
   ════════════════════════════════════════════════════════════════════ */
.mz-furn {
    --furn-magenta: #b51977;
    --furn-magenta-dark: #8e125c;
    --furn-ink: #1a1a1a;
    --furn-muted: #666;
    --furn-bg-soft: #faf6f8;
    color: var(--furn-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-furn *,
.mz-furn *::before,
.mz-furn *::after { box-sizing: border-box; }

.mz-furn__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}

/* HERO */
.mz-furn__hero {
    position: relative;
    margin: -40px -15px 0;
    padding: 80px 30px 70px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 55%, #4a0930 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-furn__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 80% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-furn__hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.mz-furn__hero h1 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #fff;
    letter-spacing: -1px;
}
.mz-furn__hero-sub {
    font-size: 17.5px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 28px;
    max-width: 580px;
    line-height: 1.6;
}
.mz-furn__phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 14px;
    color: #fff !important;
    text-decoration: none !important;
    backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
}
.mz-furn__phone:hover {
    background: #fff;
    color: var(--furn-magenta) !important;
    transform: translateY(-2px);
}
.mz-furn__phone i { font-size: 22px; }
.mz-furn__phone span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mz-furn__phone small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.85;
    line-height: 1;
    margin-bottom: 4px;
}
.mz-furn__phone strong {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* FEATURES (sellos de confianza) */
.mz-furn__features {
    max-width: 1140px;
    margin: -32px auto 60px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}
.mz-furn__features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}
.mz-furn__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid #f0f0f0;
}
.mz-furn__feature:last-child { border-right: 0; }
.mz-furn__feature i {
    font-size: 26px;
    color: var(--furn-magenta);
    margin-bottom: 10px;
}
.mz-furn__feature strong {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--furn-ink);
    line-height: 1.25;
    margin-bottom: 4px;
}
.mz-furn__feature span {
    font-size: 13px;
    color: var(--furn-muted);
    line-height: 1.4;
}

/* CATALOG */
.mz-furn__catalog { max-width: 1140px; margin: 0 auto 70px; padding: 0 15px; }
.mz-furn__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}
.mz-furn__section-head h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--furn-ink);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.mz-furn__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 16px auto 0;
    background: var(--furn-magenta);
    border-radius: 2px;
}
.mz-furn__section-head p {
    font-size: 16px;
    color: var(--furn-muted);
    margin: 18px 0 0;
}

.mz-furn__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 32px;
}
.mz-furn__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-furn__card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 18px 36px rgba(181, 25, 119, 0.12);
}
.mz-furn__card-img {
    margin: 0;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #fafafa;
}
.mz-furn__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.mz-furn__card:hover .mz-furn__card-img img { transform: scale(1.05); }
.mz-furn__card-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 10px;
}
.mz-furn__card-body h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--furn-ink);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.mz-furn__card-cta {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--furn-magenta);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s ease;
}
.mz-furn__card:hover .mz-furn__card-cta { gap: 10px; }
.mz-furn__card-cta--phone {
    color: var(--furn-muted);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.mz-furn__catalog-cta {
    text-align: center;
}

/* CONTACTO */
.mz-furn__contact { max-width: 1140px; margin: 0 auto 60px; padding: 0 15px; }
.mz-furn__contact-inner {
    background: linear-gradient(135deg, var(--furn-bg-soft), #fff);
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 56px 40px;
    text-align: center;
}
.mz-furn__contact-inner h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--furn-ink);
    margin: 8px 0 14px;
    letter-spacing: -0.5px;
}
.mz-furn__contact-inner p {
    font-size: 16.5px;
    color: var(--furn-muted);
    margin: 0 auto 28px;
    max-width: 580px;
    line-height: 1.65;
}
.mz-furn__contact-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .mz-furn__hero h1 { font-size: 36px; }
    .mz-furn__features-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
    .mz-furn__feature { border-right: 0; padding: 8px; }
    .mz-furn__feature:nth-child(odd) { border-right: 1px solid #f0f0f0; }
    .mz-furn__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .mz-furn__hero { padding: 56px 22px 60px; border-radius: 0 0 20px 20px; }
    .mz-furn__hero h1 { font-size: 26px; }
    .mz-furn__hero-sub { font-size: 15px; }
    .mz-furn__features-grid { grid-template-columns: 1fr; padding: 18px; }
    .mz-furn__feature { border-right: 0; padding: 14px 8px; border-bottom: 1px solid #f0f0f0; }
    .mz-furn__feature:nth-child(odd) { border-right: 0; }
    .mz-furn__feature:last-child { border-bottom: 0; }
    .mz-furn__grid { grid-template-columns: 1fr; }
    .mz-furn__section-head h2 { font-size: 24px; }
    .mz-furn__contact-inner { padding: 40px 22px; border-radius: 20px; }
    .mz-furn__contact-inner h2 { font-size: 24px; }
    .mz-furn__contact-actions .mz-pro__btn { width: 100%; justify-content: center; }
}

/* CTA FINAL */
.mz-event__cta {
    text-align: center;
    background: linear-gradient(135deg, var(--ev-bg-soft), #fff);
    border: 1px solid #ececec;
    border-radius: 28px;
    padding: 60px 30px;
    max-width: 1140px;
    margin: 0 auto 60px;
}
.mz-event__cta-logo {
    display: inline-block;
    margin-bottom: 22px;
    transition: transform .2s ease;
}
.mz-event__cta-logo:hover { transform: scale(1.05); }
.mz-event__cta-logo img { max-width: 200px; height: auto; }
.mz-event__cta h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--ev-ink);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.mz-event__cta p {
    font-size: 16.5px;
    color: var(--ev-muted);
    margin: 0 0 28px;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .mz-event__hero h1 { font-size: 36px; }
    .mz-event__info { grid-template-columns: 1fr; }
    .mz-event__info-map { min-height: 320px; }
    .mz-event__recap-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .mz-event__recap-amount { justify-self: center; min-width: 180px; }
    .mz-event__program-grid { grid-template-columns: repeat(2, 1fr); }
    .mz-event__prizes-list { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .mz-event__hero { padding: 60px 22px 50px; border-radius: 0 0 20px 20px; }
    .mz-event__hero h1 { font-size: 26px; }
    .mz-event__hero-sub { font-size: 15px; }
    .mz-event__hero-meta { flex-direction: column; gap: 14px; padding: 16px; align-items: center; }
    .mz-event__hero-date { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.20); padding: 0 0 14px; }
    .mz-event__hero-info { text-align: center; align-items: center; }
    .mz-event__hero-date strong { font-size: 44px; }
    .mz-event__banner { margin-top: -20px; }
    .mz-event__info-card { padding: 26px 22px; }
    .mz-event__info-card h2 { font-size: 22px; }
    .mz-event__recap-inner { padding: 28px 24px; }
    .mz-event__recap-amount strong { font-size: 32px; }
    .mz-event__section-head h2 { font-size: 24px; }
    .mz-event__program-grid { grid-template-columns: 1fr; }
    .mz-event__gallery-grid { grid-template-columns: 1fr; }
    .mz-event__cta { padding: 48px 22px; border-radius: 20px; }
    .mz-event__cta h2 { font-size: 22px; }
    .mz-event__cta .mz-about__cta-actions .mz-pro__btn { width: 100%; justify-content: center; }
}
.mz-50__event-inner h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--m50-ink);
    margin: 8px 0 14px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.mz-50__event-inner p {
    font-size: 16.5px;
    color: var(--m50-muted);
    margin: 0 auto 24px;
    max-width: 640px;
    line-height: 1.6;
}

/* VALORES */
.mz-50__values { max-width: 1140px; margin: 0 auto 80px; padding: 0 15px; }
.mz-50__section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.mz-50__section-head h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--m50-ink);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.mz-50__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 16px auto 0;
    background: var(--m50-magenta);
    border-radius: 2px;
}
.mz-50__section-head p { font-size: 16px; color: var(--m50-muted); margin: 18px 0 0; }

.mz-50__values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.mz-50__value {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-50__value:hover {
    transform: translateY(-3px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-50__value-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--m50-magenta), var(--m50-magenta-dark));
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.25);
}
.mz-50__value-icon i { font-size: 22px; }
.mz-50__value h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--m50-ink);
    margin: 0 0 8px;
}
.mz-50__value p {
    font-size: 13.5px;
    color: var(--m50-muted);
    margin: 0;
    line-height: 1.55;
}

/* CTA FINAL */
.mz-50__cta {
    text-align: center;
    background: linear-gradient(135deg, var(--m50-bg-soft), #fff);
    border: 1px solid #ececec;
    border-radius: 28px;
    padding: 60px 30px;
    max-width: 1140px;
    margin: 0 auto 60px;
}
.mz-50__cta h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--m50-ink);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.mz-50__cta p {
    font-size: 16.5px;
    color: var(--m50-muted);
    margin: 0 0 28px;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .mz-50__hero h1 { font-size: 120px; letter-spacing: -5px; }
    .mz-50__hero h1 span { font-size: 22px; letter-spacing: 8px; }
    .mz-50__values-grid { grid-template-columns: repeat(2, 1fr); }
    /* Timeline a una sola columna izquierda */
    .mz-50__timeline-track { left: 45px; transform: none; }
    .mz-50__milestone { grid-template-columns: 90px 1fr; }
    .mz-50__milestone-year { grid-column: 1; }
    .mz-50__milestone--left .mz-50__milestone-card,
    .mz-50__milestone--right .mz-50__milestone-card {
        grid-column: 2;
        margin: 0 0 0 20px;
        text-align: left;
    }
    .mz-50__milestone--left .mz-50__milestone-card::before,
    .mz-50__milestone--right .mz-50__milestone-card::before {
        left: -20px;
        right: auto;
    }
}
@media (max-width: 575.98px) {
    .mz-50__hero { padding: 60px 22px; border-radius: 0 0 20px 20px; }
    .mz-50__hero h1 { font-size: 88px; letter-spacing: -3px; }
    .mz-50__hero h1 span { font-size: 17px; letter-spacing: 5px; }
    .mz-50__hero-sub { font-size: 15px; }
    .mz-50__intro-inner h2 { font-size: 24px; }
    .mz-50__milestone-year { width: 70px; height: 70px; font-size: 16px; }
    .mz-50__timeline-track { left: 35px; }
    .mz-50__milestone { grid-template-columns: 70px 1fr; }
    .mz-50__milestone-card { padding: 22px 20px; }
    .mz-50__milestone-card h3 { font-size: 18px; }
    .mz-50__event-inner { padding: 36px 24px; }
    .mz-50__event-inner h2 { font-size: 22px; }
    .mz-50__values-grid { grid-template-columns: 1fr; }
    .mz-50__cta { padding: 48px 22px; border-radius: 20px; }
    .mz-50__cta h2 { font-size: 24px; }
}
@media (max-width: 575.98px) {
    .mz-about__hero { padding: 60px 22px; border-radius: 0 0 20px 20px; }
    .mz-about__hero h1 { font-size: 30px; }
    .mz-about__hero p { font-size: 15.5px; }
    .mz-about__story-text h2 { font-size: 24px; }
    .mz-about__stats { grid-template-columns: 1fr 1fr; }
    .mz-about__stat strong { font-size: 26px; }
    .mz-about__section-head h2 { font-size: 26px; }
    .mz-about__team-grid { grid-template-columns: 1fr; }
    .mz-about__cta { padding: 48px 22px; border-radius: 20px; }
    .mz-about__cta h2 { font-size: 24px; }
    .mz-about__cta-actions .mz-pro__btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — título + logo de marca sin solaparse
   El theme original usa float-right en el logo, lo que provoca que con
   títulos largos el texto pase por debajo del logo. Solución:
   posicionamos el logo de forma ABSOLUTA en la esquina superior derecha
   del header, y reservamos espacio en el <h1> con padding-right.
   ════════════════════════════════════════════════════════════════════ */
.product_header_container {
    position: relative;
}
.product_header_container > .product-manufacturer-next.float-right {
    float: none !important;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 160px;
    margin: 0;
    z-index: 2;
}
.product_header_container > .product-manufacturer-next.float-right .manufacturer-logo {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    display: block;
}
.product_header_container .page-title,
.product_header_container h1.page-title,
.product_header_container > h1,
#col-product-info .product_header_container .page-title {
    padding-right: 190px !important; /* reserva espacio para el logo + gap */
    box-sizing: border-box !important;
}

/* En tablet — logo algo más pequeño */
@media (max-width: 767.98px) {
    .product_header_container > .product-manufacturer-next.float-right { max-width: 120px; }
    .product_header_container > .product-manufacturer-next.float-right .manufacturer-logo { max-height: 64px; }
    .product_header_container .page-title,
    .product_header_container h1.page-title,
    .product_header_container > h1,
    #col-product-info .product_header_container .page-title { padding-right: 140px !important; }
}
/* En móvil pequeño: marca vuelve al flujo, encima del título */
@media (max-width: 480px) {
    .product_header_container > .product-manufacturer-next.float-right {
        position: static;
        margin: 0 0 10px 0;
        max-width: 110px;
    }
    .product_header_container .page-title,
    .product_header_container h1.page-title,
    .product_header_container > h1,
    #col-product-info .product_header_container .page-title { padding-right: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — OPTIMIZACIÓN MÓVIL
   • Ocultar breadcrumb (ya el menú devuelve el contexto)
   • Mantener miniaturas de imagen a la izquierda en móvil
   • Reducir paddings/márgenes innecesarios
   ════════════════════════════════════════════════════════════════════ */

/* 1. OCULTAR BREADCRUMB EN MÓVIL */
@media (max-width: 767.98px) {
    body[id^="product"] nav.breadcrumb,
    body[id^="product"] .breadcrumb,
    body[id^="product"] .breadcrumb-wrapper,
    body[id^="product"] #js-product-list-top .breadcrumb,
    .product-detail .breadcrumb,
    #product .breadcrumb {
        display: none !important;
    }
}

/* 2. MINIATURAS EN MÓVIL: COVER ARRIBA, THUMBS HORIZONTALES ABAJO + FLECHAS */
@media (max-width: 767.98px) {
    /* Romper el row a columna */
    .images-container .row.no-gutters {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* Cover primero, ancho completo */
    .images-container .col-left-product-cover {
        order: 1;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Thumbs después de la imagen, ancho completo y posición relative para alojar las flechas */
    .images-container .col-left-product-thumbs {
        order: 2;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 12px;
        position: relative;
    }

    /* Reset del transform Swiper para que veamos todas las thumbs y hacer scroll nativo */
    .col-left-product-thumbs .swiper-wrapper {
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: 8px;
        padding: 0 36px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .col-left-product-thumbs .swiper-wrapper::-webkit-scrollbar { display: none; }

    /* Cada miniatura: ancho fijo cómodo para deslizar */
    .col-left-product-thumbs .thumb-container,
    .col-left-product-thumbs .swiper-slide {
        flex: 0 0 auto !important;
        width: 72px !important;
        height: auto !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    .col-left-product-thumbs img.thumb,
    .col-left-product-thumbs .thumb-container img,
    .col-left-product-thumbs .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px;
    }

    /* Flechas izquierda/derecha */
    .mz-thumbs-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ececec;
        color: #b51977;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
        font-size: 14px;
        padding: 0;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .mz-thumbs-nav:hover { background: #b51977; color: #fff; }
    .mz-thumbs-nav:active { transform: translateY(-50%) scale(0.95); }
    .mz-thumbs-nav--prev { left: 2px; }
    .mz-thumbs-nav--next { right: 2px; }
    .mz-thumbs-nav[disabled] { opacity: 0; pointer-events: none; }
}

/* 3. AJUSTES VARIOS DE FICHA EN MÓVIL */
@media (max-width: 767.98px) {
    /* Reducir el padding-right reservado para el logo si el título es largo */
    .product_header_container { padding-right: 0; }

    /* Espaciado del bloque info al lado derecho */
    .col-product-info,
    #col-product-info { padding-top: 10px; }

    /* Ocultar las flechas verticales nativas del Swiper de miniaturas — solo móvil.
       Usamos nuestras propias flechas horizontales .mz-thumbs-nav */
    .col-left-product-thumbs .swiper-button-prev,
    .col-left-product-thumbs .swiper-button-next,
    .col-left-product-thumbs .swiper-button-inner-prev,
    .col-left-product-thumbs .swiper-button-inner-next,
    .col-left-product-thumbs .swiper-button-arrow {
        display: none !important;
    }

    /* Qty + Añadir al carrito + Favoritos en una sola línea */
    .product-add-to-cart .row.product-quantity {
        flex-wrap: nowrap !important;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
    }
    .product-add-to-cart .col-add-qty {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        margin-top: 0 !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    .product-add-to-cart .col-add-btn {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
        margin-top: 0 !important;
        padding-left: 4px;
        padding-right: 4px;
        min-width: 0;
    }
    .product-add-to-cart .col-add-wishlist {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        margin-top: 0 !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    .product-add-to-cart .add {
        width: 100%;
    }
    .product-add-to-cart .add-to-cart {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
    /* Que el botón corazón sea más compacto */
    .product-add-to-cart .btn-iqitwishlist-add,
    .product-add-to-cart .col-add-wishlist .btn {
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
    }
    /* Compactar el qty selector en móvil */
    .product-add-to-cart .qty.mz-qty {
        height: 44px;
    }
    .product-add-to-cart .mz-qty-btn { width: 32px; }
    .product-add-to-cart .mz-qty-input { width: 36px; font-size: 14px; }

    /* Tabs / acordeón compacto */
    .product-information .nav-tabs .nav-link,
    .nav-product-info .nav-link {
        font-size: 13px;
        padding: 9px 12px;
    }
}

/* Móvil pequeño (≤380 px) — recortar texto del botón si hace falta */
@media (max-width: 380px) {
    .product-add-to-cart .add-to-cart {
        font-size: 12px;
        padding-left: 6px;
        padding-right: 6px;
        letter-spacing: 0;
    }
    .product-add-to-cart .add-to-cart .bag-icon { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PARCHES MÓVIL — ajustes finos para todas las landings Mazuelas
   Resultado de auditoría minuciosa móvil.
   ════════════════════════════════════════════════════════════════════ */

/* Salvaguarda global: imágenes nunca desbordan el contenedor */
.mz-pro img,
.mz-about img,
.mz-eco img,
.mz-50 img,
.mz-event img,
.mz-furn img,
.mz-promo img {
    max-width: 100%;
    height: auto;
}

/* IFRAMES (mapas, vídeos): responsive */
.mz-pro iframe,
.mz-about iframe,
.mz-eco iframe,
.mz-50 iframe,
.mz-event iframe,
.mz-furn iframe,
.mz-promo iframe {
    max-width: 100%;
}

/* Asegura tap-targets mínimos en móvil (≥44 px alto) en todos los botones .mz-pro__btn */
@media (max-width: 575.98px) {
    .mz-pro__btn { min-height: 44px; }
}

/* === CMS 41 (50 Aniversario): timeline-img que no desborda el card en móvil === */
@media (max-width: 991.98px) {
    .mz-50__milestone-img { margin: -28px -22px 18px; }
}
@media (max-width: 575.98px) {
    .mz-50__milestone-img {
        margin: -22px -20px 16px;
        border-radius: 14px 14px 0 0;
    }
    .mz-50__milestone-card { overflow: hidden; }
    .mz-50__intro-inner h2 { font-size: 22px; line-height: 1.25; }
}

/* === CMS 41 móvil extra-pequeño: hero h1 reducido para iPhone SE etc. === */
@media (max-width: 380px) {
    .mz-50__hero h1 { font-size: 72px; letter-spacing: -2px; }
    .mz-50__hero h1 span { font-size: 14px; letter-spacing: 4px; }
}

/* === CMS 37 (ECOHEM): chapter-icon más pequeño en móvil === */
@media (max-width: 575.98px) {
    .mz-eco__chapter-icon { width: 64px; height: 64px; border-radius: 16px; }
    .mz-eco__chapter-icon i { font-size: 28px; }
    .mz-eco__intro-num { font-size: 56px; top: 10px; right: 14px; }
    .mz-eco__product-badge strong { font-size: 48px; }
    .mz-eco__product-visual { aspect-ratio: 4/3; padding: 24px; }
    .mz-eco__product-visual > i { font-size: 56px; margin-top: 10px; }
}

/* === CMS 15/17 (Mobiliario): botón teléfono del hero que se adapta a pantallas finas === */
@media (max-width: 575.98px) {
    .mz-furn__phone {
        flex-wrap: wrap;
        padding: 12px 18px;
        gap: 10px;
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    .mz-furn__phone i { font-size: 20px; }
    .mz-furn__phone strong { font-size: 17px; }
    .mz-furn__feature i { font-size: 22px; }
    .mz-furn__card-body { padding: 16px 18px 18px; }
    .mz-furn__card-body h3 { font-size: 15px; }
}

/* === CMS 35 (Evento): mapa con altura razonable + meta tags más comprimidas === */
@media (max-width: 575.98px) {
    .mz-event__info-map { min-height: 240px; }
    .mz-event__info-map iframe { min-height: 240px; }
    .mz-event__hero-meta { width: 100%; max-width: 320px; }
    .mz-event__act { padding: 24px 22px; }
    .mz-event__act-num { width: 30px; height: 30px; font-size: 13px; }
    .mz-event__prize-text h4 { font-size: 13.5px; }
    .mz-event__prize-tickets { font-size: 12px; }
    .mz-event__cta-logo img { max-width: 160px; }
}

/* === CMS 10/19 (Profesionales/Plus): badge -15% no debe desbordar en móvil pequeño === */
@media (max-width: 380px) {
    .mz-pro__hero-badge {
        width: 130px;
        height: 130px;
        transform: rotate(-6deg);
    }
    .mz-pro__hero-badge-num { font-size: 36px; }
    .mz-pro__hero-badge-top,
    .mz-pro__hero-badge-bottom { font-size: 10px; letter-spacing: 0.9px; }
    .mz-pro__title { font-size: 24px; }
    .mz-pro__title span { font-size: 17px; }
}

/* === CMS 13 (Quiénes Somos): stats compactas en móvil === */
@media (max-width: 380px) {
    .mz-about__stats { grid-template-columns: 1fr; }
    .mz-about__avatar { width: 90px; height: 90px; }
    .mz-about__avatar span { font-size: 26px; }
}

/* === CMS 32/34/36/38/42/43 (.mz-promo): textos legales y tutoriales compactos === */
@media (max-width: 575.98px) {
    .mz-promo__hero h1 { line-height: 1.15; }
    .mz-promo__steps li {
        padding: 12px 14px;
        gap: 12px;
        font-size: 14.5px;
    }
    .mz-promo__step-num { width: 30px; height: 30px; font-size: 14px; }
    .mz-promo__whatsapp {
        width: 100%;
        max-width: 320px;
        padding: 14px 18px;
        gap: 12px;
    }
    .mz-promo__whatsapp i { font-size: 22px; }
    .mz-promo__whatsapp strong { font-size: 15px; }
    .mz-promo__tutorial > li { padding: 18px 20px; }
    .mz-promo__tutorial h3 { font-size: 15px; }
    .mz-promo__tips { padding: 18px 20px; }
}

/* Botones .mz-pro__btn dentro de bloques centrados sin elasticidad → no se estiran feo */
@media (max-width: 575.98px) {
    .mz-promo__cta .mz-pro__btn,
    .mz-event__cta .mz-pro__btn,
    .mz-50__cta .mz-pro__btn,
    .mz-furn__contact-actions .mz-pro__btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* Prevención: cualquier .mz-* container no permite scroll horizontal */
.mz-pro,
.mz-about,
.mz-eco,
.mz-50,
.mz-event,
.mz-furn,
.mz-promo,
.mz-contact {
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   PÁGINA DE CONTACTO (/contactenos)
   Prefijo .mz-contact__ — scoped.
   ════════════════════════════════════════════════════════════════════ */
.mz-contact-wrapper { padding: 0; }
.mz-contact {
    --c-magenta: #b51977;
    --c-magenta-dark: #8e125c;
    --c-ink: #1a1a1a;
    --c-muted: #666;
    --c-bg-soft: #faf6f8;
    color: var(--c-ink);
    font-size: 16px;
    line-height: 1.65;
}
.mz-contact *,
.mz-contact *::before,
.mz-contact *::after { box-sizing: border-box; }

.mz-contact__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}

/* HERO */
.mz-contact__hero {
    position: relative;
    margin: -40px -15px 0;
    padding: 80px 30px 70px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 55%, #4a0930 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}
.mz-contact__hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(700px circle at 80% 20%, rgba(255,255,255,0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255,255,255,0.08), transparent 55%);
    pointer-events: none;
}
.mz-contact__hero-inner { position: relative; max-width: 700px; margin: 0 auto; }
.mz-contact__hero h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
    letter-spacing: -1.2px;
}
.mz-contact__hero p {
    font-size: 17.5px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto;
    max-width: 580px;
    line-height: 1.6;
}

/* CANALES */
.mz-contact__channels {
    max-width: 1140px;
    margin: -38px auto 70px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mz-contact__channel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 30px 28px;
    text-decoration: none !important;
    color: var(--c-ink) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}
.mz-contact__channel:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 18px 40px rgba(181, 25, 119, 0.14);
    color: var(--c-ink) !important;
}
.mz-contact__channel > i {
    font-size: 32px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #fff;
}
.mz-contact__channel--whatsapp > i {
    background: linear-gradient(135deg, #25d366, #1ebe5d);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28);
}
.mz-contact__channel--phone > i,
.mz-contact__channel--email > i {
    background: linear-gradient(135deg, var(--c-magenta), var(--c-magenta-dark));
    box-shadow: 0 8px 22px rgba(181, 25, 119, 0.28);
}
.mz-contact__channel h3 {
    font-size: 19px;
    font-weight: 900;
    color: var(--c-ink);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.mz-contact__channel p {
    font-size: 14px;
    color: var(--c-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.mz-contact__channel strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-magenta);
    display: block;
    margin-bottom: 14px;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.3px;
}
.mz-contact__channel--whatsapp strong { color: #1ebe5d; }
.mz-contact__channel-cta {
    margin-top: auto;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-magenta);
}
.mz-contact__channel--whatsapp .mz-contact__channel-cta { color: #1ebe5d; }

/* SECTION HEAD reutilizable */
.mz-contact__section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}
.mz-contact__section-head h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--c-ink);
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}
.mz-contact__section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin: 16px auto 0;
    background: var(--c-magenta);
    border-radius: 2px;
}
.mz-contact__section-head p {
    font-size: 16px;
    color: var(--c-muted);
    margin: 18px 0 0;
}

/* FORM SECTION */
.mz-contact__form-section { max-width: 820px; margin: 0 auto 80px; padding: 0 15px; }
.mz-contact__form-wrap {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 40px 42px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

/* FORMULARIO */
.mz-contact__form { margin: 0; }
.mz-contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.mz-contact__field { display: flex; flex-direction: column; margin-bottom: 18px; }
.mz-contact__field label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #555;
    margin-bottom: 8px;
}
.mz-contact__field label span[aria-hidden] { color: var(--c-magenta); margin-left: 2px; }
.mz-contact__field small {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    font-style: italic;
}
.mz-contact__field input,
.mz-contact__field select,
.mz-contact__field textarea {
    padding: 12px 16px;
    font-size: 14.5px;
    background: #fafafa;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    color: var(--c-ink);
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    width: 100%;
    line-height: 1.4;
}
.mz-contact__field input:focus,
.mz-contact__field select:focus,
.mz-contact__field textarea:focus {
    background: #fff;
    border-color: var(--c-magenta);
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.10);
    outline: none;
}
.mz-contact__field textarea { resize: vertical; min-height: 140px; }
.mz-contact__field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23b51977' stroke-width='2' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Notificación */
.mz-contact__notif {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    border-radius: 12px;
    margin-bottom: 22px;
    border: 1px solid;
}
.mz-contact__notif i { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.mz-contact__notif ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.55;
}
.mz-contact__notif--success {
    background: #e6f6ec;
    border-color: #cce8d4;
    color: #2e7d44;
}
.mz-contact__notif--success i { color: #2e7d44; }
.mz-contact__notif--error {
    background: #fde8e9;
    border-color: #f5c5c9;
    color: #a82431;
}
.mz-contact__notif--error i { color: #a82431; }

/* Footer del form */
.mz-contact__form-footer {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}
.mz-contact__form-footer .mz-pro__btn {
    min-width: 220px;
    justify-content: center;
}

/* TIENDAS */
.mz-contact__stores { max-width: 1140px; margin: 0 auto 70px; padding: 0 15px; }
.mz-contact__stores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.mz-contact__store {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 26px 24px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-contact__store:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 25, 119, 0.30);
    box-shadow: 0 14px 32px rgba(181, 25, 119, 0.10);
}
.mz-contact__store-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-magenta), var(--c-magenta-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 18px rgba(181, 25, 119, 0.25);
}
.mz-contact__store-icon i { font-size: 22px; }
.mz-contact__store h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-ink);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.mz-contact__store p {
    font-size: 14px;
    color: var(--c-muted);
    margin: 0 0 10px;
    line-height: 1.5;
}
.mz-contact__store-note {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-magenta);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(181, 25, 119, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .mz-contact__hero h1 { font-size: 40px; }
    .mz-contact__channels { grid-template-columns: 1fr; max-width: 480px; }
    .mz-contact__stores-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .mz-contact__hero { padding: 56px 22px 60px; border-radius: 0 0 20px 20px; }
    .mz-contact__hero h1 { font-size: 32px; }
    .mz-contact__hero p { font-size: 15.5px; }
    .mz-contact__channels { margin-top: -26px; }
    .mz-contact__channel { padding: 26px 24px; }
    .mz-contact__channel h3 { font-size: 17px; }
    .mz-contact__channel strong { font-size: 16px; }
    .mz-contact__form-wrap { padding: 28px 22px; }
    .mz-contact__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .mz-contact__field { margin-bottom: 16px; }
    .mz-contact__section-head h2 { font-size: 24px; }
    .mz-contact__form-footer { text-align: center; }
    .mz-contact__form-footer .mz-pro__btn { width: 100%; }
    .mz-contact__stores-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   BARRA "TE FALTAN X € PARA ENVÍO GRATIS" en el slide-cart
   ════════════════════════════════════════════════════════════════════ */
.mz-freeship {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #faf6f8 0%, #fff 100%);
    border: 1px solid rgba(181, 25, 119, 0.18);
    border-left: 4px solid #b51977;
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}
.mz-freeship__msg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mz-freeship__msg i {
    color: #b51977;
    font-size: 22px;
    flex-shrink: 0;
}
.mz-freeship__msg span { flex: 1; }
.mz-freeship__msg strong { color: #b51977; font-weight: 800; }
.mz-freeship__progress {
    width: 100%;
    height: 8px;
    background: #f0e4ed;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mz-freeship__bar {
    height: 100%;
    background: linear-gradient(90deg, #b51977, #d83a99);
    border-radius: 999px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
}
.mz-freeship__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    animation: mz-freeship-shine 2.2s linear infinite;
}
@keyframes mz-freeship-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Estado conseguido */
.mz-freeship--reached {
    background: linear-gradient(135deg, #e6f6ec 0%, #fff 100%);
    border-color: rgba(46, 125, 68, 0.30);
    border-left-color: #2e7d44;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mz-freeship--reached i {
    color: #2e7d44;
    font-size: 22px;
    flex-shrink: 0;
}
.mz-freeship--reached span { color: #2e7d44; font-size: 14.5px; }
.mz-freeship--reached strong { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .mz-freeship__bar::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PROMO "-15% dto al registrarte" en el menú móvil (al final)
   ════════════════════════════════════════════════════════════════════ */
.mz-mobile-menu-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 16px 22px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 100%);
    color: #fff !important;
    border-radius: 14px;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(181, 25, 119, 0.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mz-mobile-menu-promo:hover,
.mz-mobile-menu-promo:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(181, 25, 119, 0.36);
    color: #fff !important;
    text-decoration: none !important;
}
.mz-mobile-menu-promo > i {
    font-size: 26px;
    flex-shrink: 0;
    opacity: 0.92;
}
.mz-mobile-menu-promo > span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 2px;
}
.mz-mobile-menu-promo strong {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.mz-mobile-menu-promo small {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Variante PROFESIONAL — fondo grafito con acento magenta, contrasta con el banner rosa */
.mz-mobile-menu-promo--pro {
    margin-top: 0;                                        /* pegado al de arriba */
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1.5px solid rgba(181, 25, 119, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
}
.mz-mobile-menu-promo--pro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(181, 25, 119, 0.22), transparent 60%);
    pointer-events: none;
}
.mz-mobile-menu-promo--pro:hover,
.mz-mobile-menu-promo--pro:focus {
    border-color: rgba(181, 25, 119, 0.95);
    box-shadow: 0 12px 28px rgba(181, 25, 119, 0.30);
}
.mz-mobile-menu-promo--pro > i {
    color: var(--mz-magenta, #b51977);
    opacity: 1;
    position: relative;
    z-index: 1;
}
.mz-mobile-menu-promo--pro > span {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   BANNER DE SUBVENCIONES / FONDOS — fuera del footer oscuro
   Aparece después del copyright con fondo blanco y la imagen centrada.
   ════════════════════════════════════════════════════════════════════ */
.mz-grants-banner {
    background: #ffffff;
    padding: 24px 15px;
    text-align: center;
    border-top: 1px solid #ececec;
}
.mz-grants-banner img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}
@media (max-width: 575.98px) {
    .mz-grants-banner { padding: 18px 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   BANNER PROFESIONAL EN FICHA DE PRODUCTO
   Ocupa todo el ancho de la columna .col-product-info.
   ════════════════════════════════════════════════════════════════════ */
.mz-pro-banner {
    display: block;
    width: 100%;
    margin: 16px 0 6px;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none !important;
}
.mz-pro-banner:hover,
.mz-pro-banner:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(181, 25, 119, 0.20);
    text-decoration: none !important;
}
.mz-pro-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* === "Quiénes somos" — biografía en modal === */
.mz-about__person--has-bio .mz-about__person-bio { display: none; }
.mz-about__avatar--clickable {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    outline: none;
}
.mz-about__avatar--clickable:hover,
.mz-about__avatar--clickable:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(181, 25, 119, 0.18);
}
.mz-about__person--has-bio .mz-about__avatar-img {
    cursor: pointer;
}
/* Enlace "Ver más" debajo del cargo en personas con bio */
.mz-about__bio-link {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #b51977 !important;
    background: transparent;
    border: 1.5px solid #b51977;
    border-radius: 999px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.mz-about__bio-link:hover,
.mz-about__bio-link:focus {
    background: #b51977;
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ─── Mapa Google Maps en línea con horarios (col-md-3) ─── */
.store-item .store-map {
    padding: 0 8px;
    position: relative;
}
.store-item .store-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.store-item .store-map__directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: #b51977;
    color: #ffffff !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(181, 25, 119, 0.25);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.store-item .store-map__directions:hover {
    background: #8e125c;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(181, 25, 119, 0.35);
}
.store-item .store-map__directions i { font-size: 12px; }

/* En tablet/móvil: mapa pasa a fila propia debajo */
@media (max-width: 991.98px) {
    .store-item .store-map {
        padding: 0;
        margin-top: 18px;
    }
    .store-item .store-map iframe { height: 260px; }
}

/* Compactar la columna de horarios para que quepa bien */
.store-item .store-hours table { font-size: 12px; }
.store-item .store-hours th { padding-right: 4px; }

.mz-bio-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mz-bio-modal[hidden] { display: none; }
.mz-bio-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mz-bio-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    animation: mzBioModalIn .22s ease;
}
@keyframes mzBioModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.mz-bio-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 30px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 10px;
    transition: color .15s ease;
}
.mz-bio-modal__close:hover { color: #b51977; }
.mz-bio-modal__avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f3f3;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.mz-bio-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mz-bio-modal__name {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 4px;
}
.mz-bio-modal__role {
    color: #b51977;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 16px;
}
.mz-bio-modal__bio {
    color: #333;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    text-align: left;
}
body.mz-bio-modal-open { overflow: hidden; }
@media (max-width: 575px) {
    .mz-bio-modal__panel { padding: 26px 20px 22px; border-radius: 14px; }
    .mz-bio-modal__avatar { width: 90px; height: 90px; }
    .mz-bio-modal__name { font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Home — sección «NUEVA COLECCIÓN ANDREIA 2026»
   Centrar verticalmente la imagen (col izq czawk4t) respecto al texto (col der n6151o8).
   ───────────────────────────────────────────────────────────────────────────── */
.elementor-element.elementor-element-czawk4t,
.elementor-element.elementor-element-czawk4t > .elementor-column-wrap,
.elementor-element.elementor-element-czawk4t > .elementor-column-wrap > .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
}
.elementor-element.elementor-element-czawk4t > .elementor-column-wrap,
.elementor-element.elementor-element-czawk4t > .elementor-column-wrap > .elementor-widget-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
}
/* El widget de esta columna es image-carousel (swiper), no image plano.
   Hay que estilarlo desde sus contenedores swiper. */
.elementor-element.elementor-element-czawk4t .elementor-widget-image,
.elementor-element.elementor-element-czawk4t .elementor-widget-image-carousel {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}
.elementor-element.elementor-element-czawk4t .elementor-widget-image .elementor-widget-container,
.elementor-element.elementor-element-czawk4t .elementor-widget-image-carousel .elementor-widget-container,
.elementor-element.elementor-element-czawk4t .elementor-image-carousel-wrapper,
.elementor-element.elementor-element-czawk4t .elementor-image-carousel,
.elementor-element.elementor-element-czawk4t .swiper,
.elementor-element.elementor-element-czawk4t .swiper-wrapper,
.elementor-element.elementor-element-czawk4t .swiper-slide,
.elementor-element.elementor-element-czawk4t .swiper-slide-inner,
.elementor-element.elementor-element-czawk4t .swiper-slide-image {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}
.elementor-element.elementor-element-czawk4t .elementor-widget-image img,
.elementor-element.elementor-element-czawk4t .elementor-widget-image-carousel img,
.elementor-element.elementor-element-czawk4t .swiper-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Menú móvil — slide desde la izquierda (espejo del carrito side-cart de la derecha).
   El theme warehouse define el patrón pero luego lo pisa con max-height/height:auto.
   Aquí lo forzamos.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Panel del menú móvil — fixed, full height, fuera de pantalla por la izquierda */
    #_mobile_iqitmegamenu-mobile.dropdown-menu,
    #_mobile_iqitmegamenu-mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        z-index: 5005 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translate3d(-115%, 0, 0) !important;
        transition: transform .4s cubic-bezier(.7, 0, .3, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.20);
        animation: none !important;
        animation-fill-mode: none !important;
    }
    #_mobile_iqitmegamenu-mobile.show.dropdown-menu,
    #_mobile_iqitmegamenu-mobile.show {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Overlay clickeable detrás del menú — el theme ya inyecta el div, sólo lo estilamos */
    #mobile_menu_click_overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.45);
        z-index: 5000;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
        pointer-events: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    /* El overlay se activa cuando el padre del botón menú tiene .show */
    .col-mobile-btn-menu.show #mobile_menu_click_overlay,
    .col-mobile-btn-menu.dropdown.show ~ #mobile_menu_click_overlay,
    body:has(.col-mobile-btn-menu.show) #mobile_menu_click_overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Bloquear scroll del body cuando el menú está abierto */
    body:has(.col-mobile-btn-menu.show) {
        overflow: hidden;
    }

    /* La cabecera del menú móvil (logo + cerrar) un poco más densa */
    #_mobile_iqitmegamenu-mobile .mobile-menu__header-wrapper {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #ffffff;
        border-bottom: 1px solid #eaeaea;
    }

    /* La promoción "-15% dto" que inyectamos al final se ve mejor con padding */
    .mz-mobile-menu-promo {
        margin: 8px 12px 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Home — sección «Compra por categoría» + productos en tabs
   Replica el tratamiento visual del prefooter newsletter:
   imagen de fondo + overlay magenta degradado + viñeta radial.
   Anula el background-color plano (#de118d) que pinta Elementor inline.
   ───────────────────────────────────────────────────────────────────────────── */
.elementor-element.elementor-element-gl2abjg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #2a0d1d !important;        /* fallback oscuro */
    background-image: url('../img/prefooter-bg.jpg') !important;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
/* Overlay magenta diagonal — la mancha de imagen se intuye por la derecha */
.elementor-element.elementor-element-gl2abjg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(40, 5, 26, 0.95)   0%,
        rgba(110, 14, 70, 0.90) 35%,
        rgba(181, 25, 119, 0.78) 65%,
        rgba(222, 17, 141, 0.55) 100%);
    z-index: 0;
    pointer-events: none;
}
/* Viñeta sutil para dar profundidad */
.elementor-element.elementor-element-gl2abjg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
        transparent 30%,
        rgba(0, 0, 0, 0.30) 100%);
    z-index: 0;
    pointer-events: none;
}
/* Inutilizo el background-overlay nativo de Elementor (era #0a0a0a opacity .15) */
.elementor-element.elementor-element-gl2abjg > .elementor-background-overlay {
    display: none !important;
}
/* Toda la maquetería del contenido tiene que ir por encima de las capas decorativas */
.elementor-element.elementor-element-gl2abjg > .elementor-container,
.elementor-element.elementor-element-gl2abjg > .elementor-row,
.elementor-element.elementor-element-gl2abjg .elementor-column,
.elementor-element.elementor-element-gl2abjg .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* Tipografía y contraste sobre fondo oscuro magenta */
.elementor-element.elementor-element-gl2abjg .elementor-heading-title,
.elementor-element.elementor-element-gl2abjg .elementor-heading-title span,
.elementor-element.elementor-element-gl2abjg h2,
.elementor-element.elementor-element-gl2abjg h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.elementor-element.elementor-element-gl2abjg .elementor-heading-title {
    letter-spacing: 1px;
}

/* Pestañas (tabs) del widget ProductsListTabs sobre fondo oscuro */
.elementor-element.elementor-element-gl2abjg .iqit-tabs-nav,
.elementor-element.elementor-element-gl2abjg .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    justify-content: center;
}
.elementor-element.elementor-element-gl2abjg .iqit-tabs-nav a,
.elementor-element.elementor-element-gl2abjg .nav-tabs > li > a,
.elementor-element.elementor-element-gl2abjg .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.80) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: none !important;
    background: transparent !important;
    padding: 10px 18px;
    transition: color .18s ease, border-color .18s ease;
}
.elementor-element.elementor-element-gl2abjg .iqit-tabs-nav a:hover,
.elementor-element.elementor-element-gl2abjg .nav-tabs > li > a:hover,
.elementor-element.elementor-element-gl2abjg .nav-tabs .nav-link:hover {
    color: #ffffff !important;
}
.elementor-element.elementor-element-gl2abjg .iqit-tabs-nav .active,
.elementor-element.elementor-element-gl2abjg .iqit-tabs-nav a.active,
.elementor-element.elementor-element-gl2abjg .nav-tabs > li.active > a,
.elementor-element.elementor-element-gl2abjg .nav-tabs .nav-link.active {
    color: #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
}

/* Las miniaturas dentro mantienen su fondo blanco propio,
   sólo ajustamos sombra para que floten sobre el magenta */
.elementor-element.elementor-element-gl2abjg .product-miniature {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.elementor-element.elementor-element-gl2abjg .product-miniature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Flechas del carrusel: blancas para verse sobre el fondo magenta */
.elementor-element.elementor-element-gl2abjg .slick-arrow,
.elementor-element.elementor-element-gl2abjg .iqit-arrow,
.elementor-element.elementor-element-gl2abjg .swiper-button-next,
.elementor-element.elementor-element-gl2abjg .swiper-button-prev {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.elementor-element.elementor-element-gl2abjg .slick-arrow:hover,
.elementor-element.elementor-element-gl2abjg .swiper-button-next:hover,
.elementor-element.elementor-element-gl2abjg .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.32) !important;
}

/* Padding cómodo (la sección actual tenía padding: 0 0 40px 0 + 40px 0 0 0).
   Reforzamos un padding global para que respire sobre el degradado. */
.elementor-element.elementor-element-gl2abjg {
    padding-top: 60px !important;
    padding-bottom: 70px !important;
}
@media (max-width: 767.98px) {
    .elementor-element.elementor-element-gl2abjg {
        padding-top: 40px !important;
        padding-bottom: 50px !important;
        background-position: 70% center;
    }
    .elementor-element.elementor-element-gl2abjg::before {
        background: linear-gradient(180deg,
            rgba(40, 5, 26, 0.96)   0%,
            rgba(110, 14, 70, 0.92) 45%,
            rgba(181, 25, 119, 0.86) 100%);
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MENÚ — Submenú "Marcas" (grid de logos bonito). Desktop + móvil.
   El megamenu renderiza contentType 5 como <ul class="cbp-manufacturers">.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Título del submenú de marcas */
.cbp-menu-column-inner > .cbp-column-title {
    display: inline-block;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #1a1a1a !important;
    margin: 4px 0 16px !important;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mz-magenta, #b51977);
}

/* Grid de logos — desktop: 6 por fila */
ul.cbp-manufacturers {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    width: 100% !important;
}
ul.cbp-manufacturers > li {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
ul.cbp-manufacturers > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;                 /* recorta el blanco sobrante del logo */
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
ul.cbp-manufacturers > li > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(181, 25, 119, 0.16);
    border-color: rgba(181, 25, 119, 0.45);
}
ul.cbp-manufacturers img.logo_manufacturer {
    /* Las imágenes de marca traen mucho blanco "cocido" (el logo ocupa ~15% del alto).
       Con cover + zoom recortamos ese blanco y el logo se ve grande y centrado. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.5);
    filter: grayscale(18%);
    opacity: .95;
    transition: filter .16s ease, opacity .16s ease, transform .16s ease;
}
ul.cbp-manufacturers > li > a:hover img.logo_manufacturer {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.58);
}

/* Enlace "ver todas" tras el grid (el propio título ya enlaza a /marcas) */

/* ── Tablet: 4 por fila (tarjetas más anchas → logos más grandes) ── */
@media (max-width: 1199.98px) {
    ul.cbp-manufacturers { grid-template-columns: repeat(4, 1fr); }
    ul.cbp-manufacturers > li > a { height: 104px; }
}

/* ── Menú MÓVIL: el megamenu usa el acordeón; 3 por fila ── */
@media (max-width: 991.98px) {
    ul.cbp-manufacturers {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 8px 4px 12px !important;
    }
    ul.cbp-manufacturers > li > a {
        height: 72px;
        padding: 6px;
        border-radius: 8px;
    }
    .cbp-menu-column-inner > .cbp-column-title {
        font-size: 13px !important;
        margin: 8px 12px 12px !important;
    }
}
@media (max-width: 400px) {
    ul.cbp-manufacturers { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   MENÚ — Directorio A-Z de marcas (contentType 51). Todas las marcas por letra.
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-brands-az {
    column-count: 6;
    column-gap: 26px;
    max-height: 460px;
    overflow-y: auto;
    padding: 4px 4px 8px;
    margin: 0;
}
.mz-brands-az__group {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 14px;
}
.mz-brands-az__letter {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--mz-magenta, #b51977);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-bottom: 5px;
    margin-bottom: 6px;
    border-bottom: 2px solid rgba(181, 25, 119, 0.25);
}
.mz-brands-az__group ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mz-brands-az__group li {
    list-style: none !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}
.mz-brands-az__group li a {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #444 !important;
    text-decoration: none;
    padding: 1px 0;
    transition: color .12s ease, padding-left .12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mz-brands-az__group li a:hover {
    color: var(--mz-magenta, #b51977) !important;
    padding-left: 4px;
}
/* scrollbar sutil */
.mz-brands-az::-webkit-scrollbar { width: 8px; }
.mz-brands-az::-webkit-scrollbar-thumb { background: #e0cdd8; border-radius: 8px; }

/* Responsive del directorio (por si se muestra en pantallas menores) */
@media (max-width: 1199.98px) { .mz-brands-az { column-count: 4; } }
@media (max-width: 991.98px)  { .mz-brands-az { column-count: 3; max-height: none; } }
@media (max-width: 575.98px)  { .mz-brands-az { column-count: 2; } }

/* ═════════════════════════════════════════════════════════════════════════════
   PÁGINA /marcas — Directorio A-Z con LOGO + NOMBRE (tarjetas). Escala con muchas marcas.
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-brands-page { max-width: 1300px; margin: 0 auto; }

/* Navegación A-Z (sticky) */
.mz-az-nav {
    position: sticky; top: 0; z-index: 6;
    display: flex; flex-wrap: wrap; gap: 6px;
    background: #fff; padding: 12px 0; margin: 0 0 8px;
    border-bottom: 1px solid #eee;
}
.mz-az-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 9px;
    border: 1px solid #e6e6e6; border-radius: 8px;
    font-weight: 700; font-size: 14px; color: #1a1a1a !important;
    text-decoration: none !important; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.mz-az-nav a:hover {
    background: var(--mz-magenta, #b51977);
    border-color: var(--mz-magenta, #b51977);
    color: #fff !important;
}
.mz-az-nav .ms-l-sep { display: none; }

/* Grupo de letra */
.mz-az-group { scroll-margin-top: 72px; margin: 26px 0 8px; }
.mz-az-heading {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 26px; font-weight: 800; color: var(--mz-magenta, #b51977);
    text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 16px; padding-bottom: 8px;
    border-bottom: 2px solid rgba(181, 25, 119, 0.2);
}
.mz-az-count { font-size: 13px; font-weight: 600; color: #b9b9b9; }

/* Grid de tarjetas */
.mz-brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mz-brand-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #ececec; border-radius: 12px;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mz-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(181, 25, 119, 0.16);
    border-color: rgba(181, 25, 119, 0.4);
}
.mz-brand-card__logo {
    display: flex; align-items: center; justify-content: center;
    height: 96px; padding: 8px 12px; overflow: hidden; background: #fff;
}
.mz-brand-card__logo img {
    /* cover recorta el blanco cocido sin ampliar (evita cortar logos anchos) */
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .18s ease;
}
.mz-brand-card:hover .mz-brand-card__logo img { transform: scale(1.05); }
.mz-brand-card__name {
    display: block; text-align: center; padding: 8px 6px 12px;
    font-size: 13px; font-weight: 600; color: #333 !important;
    text-decoration: none !important; border-top: 1px solid #f2f2f2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mz-brand-card__name:hover { color: var(--mz-magenta, #b51977) !important; }

@media (max-width: 1199.98px) { .mz-brand-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991.98px)  { .mz-brand-grid { grid-template-columns: repeat(4, 1fr); } .mz-az-heading { font-size: 22px; } }
@media (max-width: 767.98px)  { .mz-brand-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ═════════════════════════════════════════════════════════════════════════════
   TOP BAR — En móvil solo se muestra el mensaje de envíos (los otros dos son
   d-none). Se centra ocultando las dos columnas vacías que lo descentraban.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .header-nav .row {
        justify-content: center !important;
    }
    /* columnas sin contenido visible en móvil: su padding descentraba el mensaje */
    .header-nav .center-nav,
    .header-nav .right-nav {
        display: none !important;
    }
    .header-nav .left-nav {
        flex: 0 0 auto;
        max-width: 100%;
        text-align: center;
    }
    .header-nav .mz-topbar-msg--envio {
        display: inline-block;
        text-align: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   TOP BAR FIJA (desktop ≥992px) — El tema fija #desktop-header (.stuck-header)
   pero la top bar quedaba fuera y desaparecía al scrollear. La fijamos arriba y
   desplazamos el header sticky justo debajo.
   ═════════════════════════════════════════════════════════════════════════════ */
:root { --mz-topbar-h: 37px; }

@media (min-width: 992px) {
    #header .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5001;          /* por encima del header fijo (5000) */
    }
    /* compensa el hueco que deja la top bar al salir del flujo */
    #header {
        padding-top: var(--mz-topbar-h);
    }
    /* el header sticky se coloca justo debajo de la top bar */
    #desktop-header.stuck-header {
        top: var(--mz-topbar-h);
    }
}
@media (max-width: 479.98px)  { .mz-brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═════════════════════════════════════════════════════════════════════════════
   PRODUCTOS AGOTADOS EN LISTADO — botón "Agotado" gris (sin badge de stock).
   El badge "Fuera de stock" se elimina en el override de product-miniature-thumb;
   aquí solo se pinta el botón sustituto en gris, sin hover magenta.
   ═════════════════════════════════════════════════════════════════════════════ */
.product-miniature .btn-product-list.btn-product-list--soldout,
.product-miniature:hover .btn-product-list.btn-product-list--soldout,
.product-miniature .btn-product-list.btn-product-list--soldout:hover,
.product-miniature .btn-product-list.btn-product-list--soldout:focus {
    background: #9e9e9e !important;
    color: #fff !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   MINIATURAS DE LISTADO — sin swatches de colores/variantes bajo el precio
   (con muchos colores se descuadra la card). Refuerza el ajuste del tema
   pl_grid_colors=Hide sin depender de recompilar el CSS del theme editor.
   ═════════════════════════════════════════════════════════════════════════════ */
.product-miniature .products-variants,
.product-miniature-grid .products-variants {
    display: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   LISTADOS EN MÓVIL — título de producto más compacto (12px).
   Solo el título: el precio mantiene su tamaño original.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .product-miniature .product-title,
    .product-miniature .product-title a {
        font-size: 12px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   LANDING "ECOHEM" — AMPLIACIÓN: carruseles de fotos por sección + timeline
   de Acción Social por años. Carrusel CSS puro (scroll-snap, sin JS).
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-eco__carousel { margin: 26px 0 34px; }
.mz-eco__carousel-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 25, 119, 0.45) transparent;
}
.mz-eco__carousel-track::-webkit-scrollbar { height: 6px; }
.mz-eco__carousel-track::-webkit-scrollbar-thumb {
    background: rgba(181, 25, 119, 0.35);
    border-radius: 999px;
}
.mz-eco__slide {
    flex: 0 0 auto;
    width: min(420px, 78%);
    margin: 0;
    scroll-snap-align: start;
}
.mz-eco__slide img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
}
.mz-eco__carousel-hint {
    margin: 8px 2px 0;
    font-size: 12px;
    color: var(--eco-muted, #666);
    letter-spacing: 0.3px;
}
@media (max-width: 575.98px) {
    .mz-eco__slide { width: 86%; }
    .mz-eco__slide img { height: 200px; }
}

/* ---- Timeline por años (Acción social) ---- */
.mz-eco__timeline {
    position: relative;
    margin: 10px 0 40px;
    padding-left: 86px;
}
.mz-eco__timeline::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--eco-magenta, #b51977), rgba(181, 25, 119, 0.15));
}
.mz-eco__tl-item {
    position: relative;
    padding: 6px 0 26px;
}
.mz-eco__tl-marker {
    position: absolute;
    left: -86px;
    top: 6px;
    width: 62px;
    text-align: center;
}
.mz-eco__tl-year {
    display: inline-block;
    padding: 7px 10px;
    background: var(--eco-magenta, #b51977);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.6px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(181, 25, 119, 0.35);
}
.mz-eco__tl-item::before {
    content: "";
    position: absolute;
    left: -60px;
    top: 44px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--eco-magenta, #b51977);
    transform: translateX(50%);
}
.mz-eco__tl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.mz-eco__tl-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(26, 26, 26, 0.05);
}
.mz-eco__tl-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--eco-ink, #1a1a1a);
}
.mz-eco__tl-card p {
    margin: 0;
    font-size: 14px;
    color: var(--eco-muted, #666);
}
.mz-eco__tl-card .mz-eco__card-icon { flex: 0 0 auto; }
.mz-eco__section-head--sub { margin-top: 8px; }
@media (max-width: 575.98px) {
    .mz-eco__timeline { padding-left: 58px; }
    .mz-eco__timeline::before { left: 20px; }
    .mz-eco__tl-marker { left: -58px; width: 44px; }
    .mz-eco__tl-year { font-size: 12px; padding: 6px 8px; }
    .mz-eco__tl-item::before { left: -38px; top: 40px; width: 10px; height: 10px; }
    .mz-eco__tl-cards { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PÁGINA /tiendas ("Nuestras tiendas") — rediseño con el lenguaje de las
   landings (hero magenta + tarjetas). Prefijo .mz-stores__ — scoped.
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-stores {
    --st-magenta: #b51977;
    --st-magenta-dark: #8e125c;
    --st-ink: #1a1a1a;
    --st-muted: #666;
    color: var(--st-ink);
    font-size: 15px;
    line-height: 1.6;
}
.mz-stores *, .mz-stores *::before, .mz-stores *::after { box-sizing: border-box; }

/* Hero */
.mz-stores__hero {
    background: linear-gradient(135deg, var(--st-magenta) 0%, var(--st-magenta-dark) 100%);
    border-radius: 18px;
    padding: 56px 28px;
    text-align: center;
    color: #fff;
    margin-bottom: 34px;
}
.mz-stores__title {
    margin: 0 0 10px;
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 800;
    color: #fff;
}
.mz-stores__title span { opacity: 0.85; }
.mz-stores__sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
}

/* Grid de tarjetas */
.mz-stores__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    margin-bottom: 40px;
}
.mz-stores__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mz-stores__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(26, 26, 26, 0.12);
}

/* Foto + ciudad */
.mz-stores__photo { position: relative; }
.mz-stores__photo img,
.mz-stores__photo-placeholder {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.mz-stores__photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6e7f0, #efd3e4);
    color: var(--st-magenta);
    font-size: 44px;
}
.mz-stores__city {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--st-magenta);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.15);
}

/* Cuerpo */
.mz-stores__body { padding: 18px 18px 6px; flex: 1 1 auto; }
.mz-stores__name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--st-ink);
}
.mz-stores__address {
    margin: 0 0 10px;
    font-style: normal;
    color: var(--st-muted);
    font-size: 13.5px;
}
.mz-stores__contact {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.mz-stores__contact li { margin: 3px 0; font-size: 14px; }
.mz-stores__contact a { color: var(--st-ink); text-decoration: none; font-weight: 600; }
.mz-stores__contact a:hover { color: var(--st-magenta); }
.mz-stores__contact .fa { color: var(--st-magenta); width: 18px; text-align: center; }
.mz-stores__note { color: var(--st-muted); font-size: 13px; }

/* Horario plegable */
.mz-stores__hours { margin: 4px 0 10px; }
.mz-stores__hours summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--st-magenta);
    user-select: none;
}
.mz-stores__hours summary::-webkit-details-marker { display: none; }
.mz-stores__hours[open] .mz-stores__hours-chev { transform: rotate(180deg); }
.mz-stores__hours-chev { transition: transform .15s ease; }
.mz-stores__hours-table {
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    border-collapse: collapse;
}
.mz-stores__hours-table th {
    text-align: left;
    font-weight: 700;
    padding: 4px 8px 4px 0;
    color: var(--st-ink);
    white-space: nowrap;
    vertical-align: top;
}
.mz-stores__hours-table td { padding: 4px 0; color: var(--st-muted); }
.mz-stores__hours-table tr + tr { border-top: 1px dashed rgba(26, 26, 26, 0.08); }
.mz-stores__closed { color: #a82431; font-weight: 600; }

/* Mapa */
.mz-stores__map iframe {
    display: block;
    width: 100%;
    height: 170px;
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.06);
}

/* Acciones */
.mz-stores__actions {
    display: flex;
    gap: 10px;
    padding: 14px 18px 18px;
}
.mz-stores__cta {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    font-size: 13.5px !important;
}
@media (max-width: 575.98px) {
    .mz-stores__hero { padding: 42px 18px; }
    .mz-stores__grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ECOHEM — flechas de los carruseles (inyectadas por custom.js) y timeline
   en zigzag centrado a partir de tablet (en móvil sigue en columna).
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-eco__carousel { position: relative; }
.mz-eco__carousel-btn {
    position: absolute;
    top: 130px; /* centro vertical de la foto (260px) */
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--eco-magenta, #b51977);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(26, 26, 26, 0.22);
    z-index: 2;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mz-eco__carousel-btn:hover {
    background: var(--eco-magenta, #b51977);
    color: #fff;
}
.mz-eco__carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.mz-eco__carousel-btn--prev { left: -8px; }
.mz-eco__carousel-btn--next { right: -8px; }
@media (max-width: 575.98px) {
    .mz-eco__carousel-btn { top: 100px; width: 38px; height: 38px; }
}

/* Timeline zigzag centrado (tablet y escritorio) */
@media (min-width: 768px) {
    .mz-eco__timeline { padding-left: 0; }
    .mz-eco__timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    .mz-eco__tl-item {
        width: calc(50% - 40px);
        padding: 0 0 38px;
    }
    .mz-eco__tl-item:nth-child(odd) { margin-right: auto; }
    .mz-eco__tl-item:nth-child(even) { margin-left: auto; }
    .mz-eco__tl-item::before { display: none; } /* el año hace de marcador sobre la línea */
    .mz-eco__tl-marker { top: 4px; width: auto; }
    .mz-eco__tl-item:nth-child(odd) .mz-eco__tl-marker {
        left: auto;
        right: -40px;
        transform: translateX(50%);
    }
    .mz-eco__tl-item:nth-child(even) .mz-eco__tl-marker {
        left: -40px;
        transform: translateX(-50%);
    }
    .mz-eco__tl-cards { grid-template-columns: 1fr; padding-top: 46px; }
    .mz-eco__tl-item:nth-child(odd) .mz-eco__tl-card { text-align: right; flex-direction: row-reverse; }
}

/* ═══════════════════════════════════════════════════════════════════
   "Quiénes somos" — trayectoria, valores ampliados y compromiso social
   Reutiliza la línea de tiempo de la página 50 aniversario (.mz-50__).
   ═══════════════════════════════════════════════════════════════════ */
.mz-about__timeline {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-about__timeline .mz-50__timeline {
    margin-bottom: 0;
    padding-top: 0;
}
.mz-about__timeline-cta {
    text-align: center;
    margin: 34px 0 0;
}

/* Segunda fila de valores (superación, personas, equipo) */
.mz-about__values-grid--second { margin-top: 24px; }

/* Compromiso social */
.mz-about__social {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 0 15px;
}
.mz-about__social-inner {
    background: var(--about-bg-soft);
    border: 1px solid rgba(181, 25, 119, 0.12);
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
}
.mz-about__social-inner h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--about-ink);
    margin: 0 0 16px;
}
.mz-about__social-inner p {
    font-size: 16px;
    color: var(--about-muted);
    margin: 0 auto 28px;
    max-width: 760px;
}
.mz-about__social-inner p strong { color: var(--about-ink); }

@media (max-width: 767px) {
    .mz-about__values-grid--second { margin-top: 24px; }
    .mz-about__social-inner { padding: 34px 22px; }
    .mz-about__social-inner h2 { font-size: 24px; }
    .mz-about__social-inner .mz-pro__btn { width: 100%; justify-content: center; }
    .mz-about__timeline-cta .mz-pro__btn { width: 100%; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   REGISTRO — dos tipos de alta en pestañas (cliente / profesional)
   y campo de documentación del alta profesional.
   ═════════════════════════════════════════════════════════════════════════════ */
.mz-register__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 24px;
}

.mz-register__tab {
    display: block;
    padding: 16px 18px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mz-register__tab:hover {
    border-color: var(--mz-magenta);
}

.mz-register__tab.is-active {
    border-color: var(--mz-magenta);
    background: #fdf4f9;
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.10);
}

.mz-register__tab-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--mz-text);
    line-height: 1.3;
}

.mz-register__tab.is-active .mz-register__tab-title {
    color: var(--mz-magenta);
}

.mz-register__tab-desc {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--mz-muted);
}

.mz-register__tab-nota {
    margin: -10px 0 22px;
    padding: 12px 14px;
    border-left: 3px solid var(--mz-magenta);
    background: #fafafa;
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mz-muted);
}

/* La casilla "Soy un Profesional" la sustituyen las pestañas */
.mz-register .form-group.row.isProfessional {
    display: none !important;
}

/* Documentación del alta profesional */
.mz-pro-doc {
    margin: 4px 0 18px;
}

.mz-pro-doc__field {
    padding: 16px 16px 14px;
    border: 1px dashed rgba(181, 25, 119, 0.35);
    border-radius: 12px;
    background: #fdf9fb;
}

.mz-pro-doc__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mz-text);
}

.mz-pro-doc__label span {
    color: var(--mz-magenta);
}

.mz-pro-doc__help {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mz-muted);
}

.mz-pro-doc__input {
    display: block;
    width: 100%;
    font-size: 13.5px;
    color: var(--mz-text);
}

.mz-pro-doc__input::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--mz-magenta);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mz-pro-doc__input::file-selector-button:hover {
    background: #8e125c;
}

.mz-pro-doc__formats {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #8a8a8a;
}

.mz-pro-doc__error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf3f3;
    border-left: 3px solid #d9534f;
    color: #a94442;
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .mz-register__tabs { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESTABLECER CONTRASEÑA — los campos venían casi blancos y sin borde, así que
   no se veía dónde escribir. Se les da el mismo aspecto que al resto de
   formularios del sitio.
   ═════════════════════════════════════════════════════════════════════════════ */
.renew-password .form-control {
    height: auto;
    padding: 12px 16px;
    background: #fafafa;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14.5px;
    color: #222;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.renew-password .form-control:focus {
    background: #fff;
    border-color: var(--mz-magenta);
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.12);
    outline: 0;
}

.renew-password .form-control-label,
.renew-password label {
    font-size: 13px;
    font-weight: 700;
    color: var(--mz-text);
    text-transform: none;
}

/* La rejilla del tema deja el bloque descentrado y muy estrecho */
.renew-password .container-fluid {
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
}

.renew-password .row.form-group {
    display: block !important;
    margin: 0 0 16px !important;
}

.renew-password .row.form-group > label,
.renew-password .row.form-group > div {
    /* el grid del tema deja la columna en un tercio; aquí se ocupa el ancho */
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.renew-password .form-control {
    width: 100%;
}

.renew-password .row.form-group > label {
    display: block;
    margin-bottom: 6px;
}

.renew-password .email {
    max-width: 520px;
    margin: 0 auto 18px;
    font-size: 14px;
    color: var(--mz-muted);
}

/* ---------- /recuperar-contraseña: input y botón ---------- */
/* El tema pinta este formulario con .form-inline: label, campo y botón en una
   sola línea. Con un botón de texto largo ("Enviar enlace de restablecimiento
   de contraseña") el campo queda estrujado, así que se apila y se le da el
   mismo acabado que al resto de formularios de la cuenta (.renew-password). */
.page-password .form-fields .form-inline {
    display: block;
    max-width: 520px;
    margin: 0 auto;
}

.page-password .form-fields .form-inline > label {
    display: block;
    margin: 0 0 6px !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--mz-text);
    text-transform: none;
}

.page-password .form-fields .form-inline .form-control {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 14px !important;
    padding: 12px 16px;
    background: #fafafa;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14.5px;
    color: #222;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.page-password .form-fields .form-inline .form-control:focus {
    background: #fff;
    border-color: var(--mz-magenta);
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.12);
    outline: 0;
}

.page-password .form-fields .form-inline #send-reset-link {
    display: block;
    width: 100%;
    height: auto;
    padding: 13px 24px;
    background: var(--mz-magenta);
    border: 0;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-transform: none;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.page-password .form-fields .form-inline #send-reset-link:hover,
.page-password .form-fields .form-inline #send-reset-link:focus {
    background: var(--mz-magenta-dark);
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.25);
    color: #fff;
}

.page-password .form-fields .form-inline #send-reset-link:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* El texto introductorio y el enlace de vuelta, alineados con el formulario */
.page-password .send-renew-password-link {
    max-width: 520px;
    margin: 0 auto 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mz-muted);
}

.page-password #back-to-login {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mz-magenta);
}

.page-password #back-to-login:hover {
    color: var(--mz-magenta-dark);
    text-decoration: underline;
}

/* =============================================================================
   PÁGINAS LEGALES (5, 6, 9, 11, 12) Y "TRABAJA CON NOSOTROS" (48)

   Mismo lenguaje visual que las landings: hero magenta, tipografía cuidada y
   botones de píldora. El contenido de las legales no se toca —es texto
   jurídico—, solo se le da forma desde aquí.
   ========================================================================== */

/* ---------- Cabecera ---------- */
.mz-legal__hero {
    position: relative;
    margin: -40px -15px 48px;
    padding: 64px 30px 58px;
    background: linear-gradient(135deg, #b51977 0%, #8e125c 45%, #5e0a3d 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    text-align: center;
}

.mz-legal__hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 75% 20%, rgba(255, 255, 255, 0.14), transparent 55%),
        radial-gradient(500px circle at 15% 90%, rgba(255, 255, 255, 0.08), transparent 55%);
    pointer-events: none;
}

.mz-legal__hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

.mz-legal__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
}

.mz-legal__title {
    margin: 0;
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
}

.mz-legal__sub {
    max-width: 660px;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 767px) {
    .mz-legal__hero { padding: 46px 20px 42px; margin-bottom: 34px; }
    .mz-legal__title { font-size: 30px; }
    .mz-legal__sub { font-size: 15px; }
}

/* ---------- Cuerpo del texto legal ---------- */
.mz-legal .rte-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 4px 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #3a3a3a;
}

/* El primer <h2> repite el título del hero: sobra */
.mz-legal .rte-content > h2:first-child {
    display: none;
}

.mz-legal .rte-content h2,
.mz-legal .rte-content h3,
.mz-legal .rte-content h4 {
    margin: 36px 0 14px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mz-text);
}

.mz-legal .rte-content h2 { font-size: 23px; }
.mz-legal .rte-content h3 { font-size: 19px; }
.mz-legal .rte-content h4 { font-size: 17px; }

/* Rayita magenta bajo los encabezados de primer nivel */
.mz-legal .rte-content h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: var(--mz-magenta);
    border-radius: 3px;
}

.mz-legal .rte-content p { margin: 0 0 14px; }

/* El contenido viene con muchos <p></p> vacíos usados como separador */
.mz-legal .rte-content p:empty { display: none; }

.mz-legal .rte-content strong { color: var(--mz-text); font-weight: 700; }

.mz-legal .rte-content a {
    color: var(--mz-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mz-legal .rte-content a:hover { color: var(--mz-magenta-dark); }

.mz-legal .rte-content ul,
.mz-legal .rte-content ol { margin: 0 0 16px; padding-left: 22px; }

.mz-legal .rte-content li { margin-bottom: 7px; }

.mz-legal .rte-content table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.mz-legal .rte-content th,
.mz-legal .rte-content td {
    padding: 10px 12px;
    border: 1px solid var(--mz-border);
    text-align: left;
    vertical-align: top;
}

.mz-legal .rte-content th { background: #faf4f8; font-weight: 700; }

/* Las tablas largas (cookies, condiciones) no deben desbordar en móvil */
@media (max-width: 767px) {
    .mz-legal .rte-content table { display: block; overflow-x: auto; }
}

/* ---------- Trabaja con nosotros: el formulario ---------- */
.mz-trabaja .elementor-section {
    max-width: 720px;
    margin: 0 auto;
}

.mz-trabaja .elementor-heading-title {
    margin-bottom: 22px;
    font-size: 24px;
    font-weight: 800;
    color: var(--mz-text);
    text-align: center;
}

.mz-trabaja .contact-form .form-control-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mz-text);
}

.mz-trabaja .contact-form .form-control {
    width: 100%;
    height: auto;
    padding: 12px 16px;
    background: #fafafa;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14.5px;
    color: #222;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mz-trabaja .contact-form .form-control:focus {
    background: #fff;
    border-color: var(--mz-magenta);
    box-shadow: 0 0 0 3px rgba(181, 25, 119, 0.12);
    outline: 0;
}

.mz-trabaja .contact-form .form-group { margin-bottom: 16px; }

.mz-trabaja .contact-form .form-footer { text-align: center !important; }

.mz-trabaja .contact-form [type="submit"] {
    min-width: 220px;
    padding: 13px 30px;
    background: var(--mz-magenta);
    border: 0;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mz-trabaja .contact-form [type="submit"]:hover,
.mz-trabaja .contact-form [type="submit"]:focus {
    background: var(--mz-magenta-dark);
    box-shadow: 0 6px 18px rgba(181, 25, 119, 0.25);
    color: #fff;
}

.mz-trabaja .contact-form [type="submit"]:active { transform: translateY(1px); }

/* Botón de "Seleccionar archivo" del adjunto */
.mz-trabaja .elementor-attachment-field .btn {
    background: #fff;
    border: 1.5px solid #e6e6e6;
    border-radius: 10px;
    color: var(--mz-text);
    font-weight: 600;
}

.mz-trabaja .elementor-attachment-field .btn:hover {
    border-color: var(--mz-magenta);
    color: var(--mz-magenta);
}

/* ============================================================
   Checkout — "Recoger en tienda" agrupado con desplegable de tiendas
   (themes/warehousechild/templates/checkout/_partials/steps/shipping.tpl)
   ============================================================ */
/* Las filas reales de cada tienda quedan en el formulario pero no se ven */
body#checkout section.checkout-step .delivery-option.mz-recogida__real,
body#checkout section.checkout-step .carrier-extra-content.mz-recogida__real {
    display: none !important;
}
body#checkout section.checkout-step .delivery-option.mz-recogida {
    flex-wrap: wrap;
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}
body#checkout section.checkout-step .delivery-option.mz-recogida--activa {
    border-color: var(--mz-magenta);
    background: rgba(181, 25, 119, 0.04);
}
body#checkout section.checkout-step .mz-recogida__tienda {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 12px 0 2px 0;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body#checkout section.checkout-step .mz-recogida__etiqueta {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--mz-text);
}
body#checkout section.checkout-step .mz-recogida__select {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto !important;
    padding: 11px 44px 11px 14px !important;
    font-size: 15px !important;
    font-weight: 600;
    color: var(--mz-text) !important;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b51977' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center !important;
    border: 1.5px solid #e3e3e3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
body#checkout section.checkout-step .mz-recogida__select:focus {
    border-color: var(--mz-magenta) !important;
    box-shadow: 0 0 0 4px rgba(181, 25, 119, 0.10) !important;
    outline: none !important;
}

/* ============================================================
   Reporte cliente 18-09: correcciones puntuales
   ============================================================ */

/* Footer · Contacto: la dirección multilínea iba pegada al icono/línea,
   sin margen. Se le da aire y se alinea con el icono. */
#footer .block-iqitcontactpage .contact-rich > .part .data {
    padding-top: 5px;
    line-height: 1.6;
}
#footer .block-iqitcontactpage .contact-rich hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer · el enlace "Configuración de cookies" salía subrayado */
#footer a[href="#cookies-config"],
#footer a[href="#cookies-config"]:hover,
#footer a[href="#cookies-config"]:focus {
    text-decoration: none !important;
}

/* Registro · los checkboxes (condiciones, newsletter, privacidad) traían un
   label vacío con clase "required" que dejaba el asterisco "*" suelto y muy
   separado a la izquierda. Se oculta ese label vacío; el asterisco no aporta
   nada porque el propio checkbox ya es obligatorio. */
.mz-form__prefs .form-group > label.col-form-label,
.mz-form__prefs .form-group > label.col-form-label.required,
.mz-form__prefs .form-group > label:empty {
    display: none !important;
}
.mz-form__prefs .form-group > .js-input-column {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
}

/* ============================================================
   Quickview (ojito) — el nombre del producto salía en vertical (una letra
   por línea) porque la columna de información se quedaba a ~0 de ancho: al
   ser items flex, la columna de la imagen no encogía y aplastaba la del texto.
   min-width:0 permite que ambas columnas respeten su 50%.
   ============================================================ */
#quickview-modal #quickview-modal-product-content {
    flex-wrap: nowrap;
    align-items: flex-start;
}
#quickview-modal #quickview-modal-product-content > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
}
#quickview-modal .quickview-info {
    min-width: 0;
}
#quickview-modal .quickview-info .page-title,
#quickview-modal .quickview-info .page-title a {
    display: block;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}
/* En el quickview no hay logo de marca: el título ocupa todo el ancho de la
   columna (en la ficha se le reserva sitio al logo con width/padding-right). */
#quickview-modal .product_header_container > .page-title,
#quickview-modal .product_header_container .page-title,
#quickview-modal .product_header_container h1.page-title,
#quickview-modal .product_header_container > h1 {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
}
@media (max-width: 767px) {
    #quickview-modal #quickview-modal-product-content { flex-wrap: wrap; }
    #quickview-modal #quickview-modal-product-content > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Pantalla "pedido confirmado" — con la cabecera y el footer de la web.
   El checkout tiene header/footer en modo "simple" (se ocultan en body#checkout).
   La confirmación debe llevar la estética completa de la web, así que forzamos
   la cabecera y el footer normales (cubrimos ambos posibles id de body).
   ============================================================ */
body#order-confirmation #header,
body#order-confirmation #footer,
body#checkout.page-order-confirmation #header,
body#checkout.page-order-confirmation #footer,
body.page-order-confirmation #header,
body.page-order-confirmation #footer {
    display: block !important;
}
body#order-confirmation #checkout-header,
body#checkout.page-order-confirmation #checkout-header,
body.page-order-confirmation #checkout-header {
    display: none !important;
}

/* ============================================================
   Megamenú (escritorio) — columnas de subcategorías en rejilla limpia.
   Las columnas usaban col-3 con float y, al tener distinta altura, se
   descuadraban y se solapaban. Con una rejilla de 4 columnas cada bloque
   queda alineado y legible.
   ============================================================ */
@media (min-width: 992px) {
    .iqitmegamenu-submenu-container .row.menu_row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px 28px;
        align-items: start;
    }
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 10px 0 !important;
    }
    /* Columnas únicas o a ancho completo (p. ej. "Nuestras marcas" A-Z)
       ocupan toda la rejilla, no una celda de 1/4 */
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column.col-12,
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column:only-child,
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column:has(.mz-brands-az),
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column:has(.cbp-manufacturers) {
        grid-column: 1 / -1;
    }
    .cbp-menu-column-inner > .cbp-links.cbp-category-tree {
        list-style: none;
        margin: 6px 0 0;
        padding: 0;
    }
    .cbp-menu-column-inner > .cbp-links.cbp-category-tree > li { margin: 0 0 2px; }
}

/* ============================================================
   Megamenú (escritorio) — estilo del desplegable de categorías.
   Panel con más aire, títulos con acento magenta, enlaces legibles
   en mayúscula inicial y separador entre filas de columnas.
   ============================================================ */
@media (min-width: 992px) {
    /* Aire del panel */
    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 38px 52px 36px !important;
    }
    #cbp-hrmenu .cbp-hrsub {
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
    }
    .iqitmegamenu-submenu-container .row.menu_row {
        gap: 34px 44px;
    }
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column {
        padding: 0 !important;
    }
    /* A partir de la 2.ª fila (4 columnas por fila): separador fino */
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column:nth-child(n+5) {
        border-top: 1px solid #ececec;
        padding-top: 28px !important;
    }

    /* Título de cada bloque: pequeño, espaciado, con rayita magenta */
    .iqitmegamenu-submenu-container .cbp-menu-column-inner > .cbp-column-title {
        display: block !important;
        position: relative;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: .08em;
        line-height: 1.35 !important;
        color: #1a1a1a !important;
        margin: 0 0 16px !important;
        padding: 0 0 12px !important;
        border-bottom: 0 !important;
    }
    .iqitmegamenu-submenu-container .cbp-menu-column-inner > .cbp-column-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 34px;
        height: 2px;
        background: var(--mz-magenta, #b51977);
    }

    /* Enlaces: mayúscula inicial, gris, hover magenta con pequeño desplazamiento */
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > a,
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > .cbp-category-link-w > a {
        display: block;
        font-size: 14px !important;
        line-height: 1.45 !important;
        padding: 5px 0 !important;
        color: #555 !important;
        text-transform: lowercase !important;
        letter-spacing: 0;
        transition: color .15s ease, padding-left .15s ease;
    }
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > a::first-letter,
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > .cbp-category-link-w > a::first-letter {
        text-transform: uppercase;
    }
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > a:hover,
    .iqitmegamenu-submenu-container .cbp-links.cbp-category-tree > li > .cbp-category-link-w > a:hover {
        color: var(--mz-magenta, #b51977) !important;
        padding-left: 6px !important;
    }
}

/* "Mis datos personales": texto de ayuda bajo los campos de contraseña */
.mz-form__hint {
    display: block;
    margin: -8px 0 16px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6f6f6f;
}

/* ============================================================
   Megamenú (escritorio) — panel a TODO el ancho de la ventana.
   Antes el panel se posicionaba respecto a la columna del menú
   (#iqitmegamenu-horizontal era position:relative por la regla del
   z-index) y con 8 bloques a 4 columnas ocupaba dos filas y se salía
   de la pantalla. Ahora el contenedor de referencia es #header, las
   columnas son automáticas (tantas como quepan) y el panel nunca
   supera la altura visible: si hace falta, hace scroll por dentro.
   ============================================================ */
@media (min-width: 992px) {
    .container-iqitmegamenu,
    #iqitmegamenu-horizontal {
        position: static !important;
        z-index: auto !important;
    }
    /* Cabecera (y con ella el panel) por encima del fondo oscuro */
    #header {
        position: relative;
        z-index: 95;
    }
    #cbp-hrmenu .cbp-hrmenu-tab > .cbp-hrsub.col-12 {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .iqitmegamenu-submenu-container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
    }
    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 36px 60px 34px !important;
        max-height: calc(100vh - var(--mz-menu-offset, 190px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Tantas columnas como quepan (~8 en pantalla grande, 5-6 en portátil) */
    .iqitmegamenu-submenu-container .row.menu_row {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 30px 32px;
    }
    /* Con columnas automáticas ya no se sabe cuál empieza la 2.ª fila: sin separador */
    .iqitmegamenu-submenu-container .row.menu_row > .cbp-menu-column:nth-child(n+5) {
        border-top: 0;
        padding-top: 0 !important;
    }
}

/* ============================================================
   PÁGINA "PEDIDO CONFIRMADO" (checkout/order-confirmation.tpl del tema hijo)
   Cabecera centrada con icono en círculo magenta y referencia destacada;
   debajo dos tarjetas: detalles del pedido (con iconos) y artículos + totales.
   ============================================================ */
#content-hook_order_confirmation.mz-oc {
    max-width: 1180px;
    margin: 0 auto;
    padding: 6px 0 44px;
}
.mz-oc__hero {
    text-align: center;
    padding: 30px 16px 36px;
}
.mz-oc__badge {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--mz-magenta, #b51977);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 12px 28px rgba(181, 25, 119, 0.28);
}
.mz-oc__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #1a1a1a;
}
.mz-oc__subtitle {
    font-size: 17px;
    color: #444;
    margin: 0 0 10px;
}
.mz-oc__ref {
    display: inline-block;
    background: #fbe7f2;
    color: var(--mz-magenta, #b51977);
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .05em;
    margin-left: 4px;
}
.mz-oc__mail {
    color: #777;
    font-size: 14px;
    margin: 0;
}
.mz-oc__mail a {
    color: var(--mz-magenta, #b51977);
    text-decoration: underline;
}

.mz-oc__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 26px;
    align-items: start;
}
.mz-oc__col > * + * { margin-top: 18px; }

.mz-oc__card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 26px 28px 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}
.mz-oc__card-title,
.mz-oc #order-items .card-title {
    position: relative;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #efefef;
    color: #1a1a1a;
}
.mz-oc__card-title::after,
.mz-oc #order-items .card-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 38px;
    height: 2px;
    background: var(--mz-magenta, #b51977);
}

/* Detalles con icono */
.mz-oc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}
.mz-oc__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.mz-oc__list li > i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fbe7f2;
    color: var(--mz-magenta, #b51977);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.mz-oc__label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a8a8a;
    margin-bottom: 3px;
}
.mz-oc__value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}
.mz-oc__value em {
    font-style: normal;
    font-weight: 400;
    color: #777;
    margin-left: 6px;
}

/* Instrucciones del método de pago (texto que devuelve el módulo) */
.mz-oc__hooks:empty { display: none; }
.mz-oc__hooks > * {
    background: #fff8fc;
    border: 1px dashed #e8bfd6;
    border-radius: 14px;
    padding: 18px 22px;
    font-size: 14px;
    color: #444;
}
.mz-oc__hooks > * + * { margin-top: 14px; }
.mz-oc__hooks p:last-child { margin-bottom: 0; }
.mz-oc__hooks .card-title, .mz-oc__hooks h3 { font-size: 15px; font-weight: 800; margin: 0 0 8px; }

/* Botones */
.mz-oc__actions {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
.mz-oc__btn {
    display: inline-block;
    background: var(--mz-magenta, #b51977);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
}
.mz-oc__btn:hover { background: #951462; transform: translateY(-1px); }
.mz-oc__link {
    color: #444 !important;
    font-weight: 600;
    text-decoration: underline;
}

/* Artículos y totales */
.mz-oc #order-items .order-line {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mz-oc #order-items .order-line:last-of-type { border-bottom: 0; }
.mz-oc #order-items .order-line .image img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 4px;
}
.mz-oc #order-items .order-line .details span {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.4;
}
.mz-oc #order-items .order-line .qty { color: #666; font-size: 14px; }
.mz-oc #order-items .order-line .qty .bold { font-weight: 800; color: #1a1a1a; font-size: 15px; }
.mz-oc #order-items hr { display: none; }
.mz-oc #order-items table {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
}
.mz-oc #order-items table td {
    padding: 7px 0;
    font-size: 14px;
    color: #666;
    border: 0;
}
.mz-oc #order-items table td:last-child {
    text-align: right;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}
.mz-oc #order-items table tr.totals td {
    border-top: 2px solid #1a1a1a;
    padding-top: 14px;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
}
.mz-oc #order-items table tr.totals td:last-child {
    color: var(--mz-magenta, #b51977);
    font-size: 22px;
}

@media (max-width: 991.98px) {
    .mz-oc__grid { grid-template-columns: 1fr; gap: 18px; }
    .mz-oc__title { font-size: 30px; }
    .mz-oc__card { padding: 20px 18px; border-radius: 14px; }
    .mz-oc__hero { padding: 18px 8px 26px; }
}
/* El aviso del email en la confirmación no lleva la franja gris del tema */
.mz-oc .mz-oc__mail.mail-sent-info {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

/* ============================================================
   Quickview — botón "Añadir al carrito" con el mismo estilo que en el
   listado: negro, esquinas 6px, magenta al pasar; y si no hay stock,
   gris "Agotado" (sin transparencia, sin icono).
   ============================================================ */
#quickview-modal .product-add-to-cart .add-to-cart {
    background: #111 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: background .2s ease;
}
#quickview-modal .product-add-to-cart .add-to-cart:not([disabled]):hover,
#quickview-modal .product-add-to-cart .add-to-cart:not([disabled]):focus {
    background: var(--mz-magenta, #b51977) !important;
    color: #fff !important;
}
#quickview-modal .product-add-to-cart .add-to-cart[disabled],
#quickview-modal .product-add-to-cart .add-to-cart.add-to-cart--soldout {
    background: #9e9e9e !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none;
}

/* Footer · Contacto: el envoltorio .icon de la dirección se encogía a 14 px
   (texto largo + flex) y el icono de 32 px se salía, desplazando el texto.
   Ancho fijo para todos los iconos y el texto ocupa el resto. */
#footer .block-iqitcontactpage .contact-rich > .part > .icon {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
}
#footer .block-iqitcontactpage .contact-rich > .part > .data {
    flex: 1 1 auto;
    min-width: 0;
}

/* Footer · "Configuración de cookies" salía con fondo gris como si fuera un
   botón: se muestra como el resto de enlaces del bloque Legal. */
#footer a[href="#cookies-config"],
#footer a[href="#cookies-config"]:hover,
#footer a[href="#cookies-config"]:focus,
#footer a[href="#cookies-config"]:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ============================================================
   Ficha de producto — mensaje de promoción/regalo (quantitydiscountpro,
   hook displayQuantityDiscountProCustom1 dentro del bloque de precios).
   ============================================================ */
.product-prices .product-information-discount {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 6px;
    padding: 14px 16px;
    background: #fbe7f2;
    border: 1px solid #f1c6dd;
    border-left: 4px solid var(--mz-magenta, #b51977);
    border-radius: 10px;
    color: #4a1232;
    font-size: 14px;
    line-height: 1.5;
}
.product-prices .product-information-discount::before {
    content: "\f06b"; /* fa-gift */
    font-family: "FontAwesome";
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mz-magenta, #b51977);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.product-prices .product-information-discount > span {
    display: block;
    padding-top: 6px;
}
.product-prices .product-information-discount > span::first-line {
    font-weight: 600;
}

/* ============================================================
   Mis facturas (módulo sqlpyme) — skin del datepicker de jQuery UI: solo se
   cargaba el CSS de estructura, sin tema, y el calendario salía transparente.
   ============================================================ */
.ui-datepicker {
    width: 19em;
    padding: 12px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    z-index: 1100 !important;
    font-size: 13px;
    color: #222;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 6px 0 10px;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 28px;
    margin: 0 36px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #333;
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: var(--mz-magenta, #b51977); color: #fff; }
.ui-datepicker .ui-datepicker-prev::before { content: "\2039"; }
.ui-datepicker .ui-datepicker-next::before { content: "\203A"; }
.ui-datepicker .ui-icon { display: none; }
.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.ui-datepicker th {
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8a8a;
    text-align: center;
    border: 0;
}
.ui-datepicker td {
    padding: 2px;
    border: 0;
    text-align: center;
}
.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: 6px 0;
    border-radius: 8px;
    color: #222;
    text-decoration: none;
    text-align: center;
}
.ui-datepicker td a:hover { background: #fbe7f2; color: var(--mz-magenta, #b51977); }
.ui-datepicker td .ui-state-highlight { font-weight: 700; color: var(--mz-magenta, #b51977); }
.ui-datepicker td .ui-state-active { background: var(--mz-magenta, #b51977) !important; color: #fff !important; }
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-state-disabled span { color: #c5c5c5; }

/* ============================================================
   Direcciones — la primera dirección (facturación) no se puede editar ni
   eliminar: distintivo y aviso en Mi cuenta y en el checkout.
   ============================================================ */
.mz-address__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fbe7f2;
    color: var(--mz-magenta, #b51977);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mz-address__locked {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #8a8a8a;
    font-size: 12.5px;
    line-height: 1.45;
}
.mz-address__locked i { color: var(--mz-magenta, #b51977); margin-top: 2px; }
#checkout .address-item .address-footer .mz-address__locked { font-size: 12px; }
/* Datepicker: ocultar el texto "Ant"/"Sig" de las flechas (el CSS base lo fuerza visible) */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

/* Megamenú: desplegables sin tercer nivel (p. ej. BARBERÍA) quedaban con un
   hueco vacío debajo de los títulos. Se recorta el aire inferior y se oculta
   la lista vacía que dejaba el módulo. */
@media (min-width: 992px) {
    #cbp-hrmenu .cbp-hrsub-inner { padding-bottom: 26px !important; }
    .iqitmegamenu-submenu-container .row.menu_row { margin-bottom: 0 !important; }
    .cbp-menu-column-inner > .cbp-links.cbp-category-tree:empty { display: none; }
    .cbp-menu-column-inner > .cbp-column-title:last-child,
    .cbp-menu-column-inner > .cbp-column-title:has(+ .cbp-category-tree:empty) { margin-bottom: 0 !important; }
}

/* ============================================================
   Megamenú — pestañas con desplegable VERTICAL (submenu_width = 3, lo
   decide intercomenucats cuando hay un solo nivel o 3 bloques o menos):
   panel estrecho colgando de su pestaña, lista vertical y, si una
   subcategoría tiene hijas, un segundo nivel que se abre a la derecha.
   ============================================================ */
@media (min-width: 992px) {
    #cbp-hrmenu .cbp-hrmenu-tab:has(> .cbp-hrsub.col-3) {
        position: relative;
    }
    #cbp-hrmenu .cbp-hrmenu-tab > .cbp-hrsub.col-3 {
        left: 0 !important;
        right: auto !important;
        width: 300px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-hrsub-inner {
        padding: 14px 0 12px !important;
        overflow: visible !important;
        max-height: none !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .iqitmegamenu-submenu-container .row.menu_row {
        display: block !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-menu-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-menu-column-inner > .cbp-links.cbp-category-tree {
        margin: 0 !important;
        padding: 0;
        list-style: none;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li {
        position: relative;
        margin: 0;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li > .cbp-category-link-w > a {
        display: block;
        padding: 10px 22px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #222 !important;
        text-transform: none !important;
        transition: background .15s ease, color .15s ease, padding-left .15s ease;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li > .cbp-category-link-w > a::first-letter {
        text-transform: uppercase;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li:hover > .cbp-category-link-w > a {
        background: #fbe7f2;
        color: var(--mz-magenta, #b51977) !important;
        padding-left: 28px !important;
    }
    /* Indicador y segundo nivel (subcategorías de una subcategoría) */
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li.cbp-hrsub-haslevel2 > .cbp-category-link-w > a::after {
        content: "\f105"; /* fa-angle-right */
        font-family: "FontAwesome";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 ul.cbp-hrsub-level2 {
        display: none;
        position: absolute;
        left: 100%;
        top: -14px;
        min-width: 280px;
        margin: 0 0 0 4px;
        padding: 14px 0 12px;
        list-style: none;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 0 12px 12px 0;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
        z-index: 2;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li.cbp-hrsub-haslevel2:hover > .cbp-category-link-w > ul.cbp-hrsub-level2 {
        display: block;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 ul.cbp-hrsub-level2 > li > .cbp-category-link-w > a {
        display: block;
        padding: 9px 22px;
        font-size: 13.5px;
        color: #333 !important;
        text-transform: none;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 ul.cbp-hrsub-level2 > li > .cbp-category-link-w > a::first-letter { text-transform: uppercase; }
    #cbp-hrmenu .cbp-hrsub.col-3 ul.cbp-hrsub-level2 > li:hover > .cbp-category-link-w > a {
        background: #fbe7f2;
        color: var(--mz-magenta, #b51977) !important;
    }
}
/* Desplegable vertical: nombres en minúscula con inicial, sitio para la flecha,
   y nada recorta el segundo nivel que se abre a la derecha. */
@media (min-width: 992px) {
    #cbp-hrmenu .cbp-hrsub.col-3,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-hrsub-inner,
    #cbp-hrmenu .cbp-hrsub.col-3 .iqitmegamenu-submenu-container,
    #cbp-hrmenu .cbp-hrsub.col-3 .row.menu_row,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-menu-column,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-menu-column-inner,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li,
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-link-w {
        overflow: visible !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li > .cbp-category-link-w > a,
    #cbp-hrmenu .cbp-hrsub.col-3 ul.cbp-hrsub-level2 > li > .cbp-category-link-w > a {
        text-transform: lowercase !important;
        padding-right: 40px !important;
    }
    #cbp-hrmenu .cbp-hrsub.col-3 .cbp-category-tree > li.cbp-hrsub-haslevel2:hover > .cbp-category-link-w > ul.cbp-hrsub-level2 {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto;
    }
}