:root{--mabe-rose:#d98691;--mabe-dark:#261d20;--mabe-soft:#fff5f6}
html{scroll-behavior:smooth}
.mabe-brand{display:inline-flex;flex-direction:column;line-height:.85;text-decoration:none;color:var(--mabe-dark);min-width:135px}
.mabe-brand-main{font-size:30px;font-weight:900;letter-spacing:4px}
.mabe-brand-sub{font-size:12px;font-weight:700;letter-spacing:8px;margin-top:7px;margin-left:2px}
.mabe-whatsapp{white-space:nowrap}
.mabe-whatsapp .fa-whatsapp{font-size:20px}
@media(max-width:1199px){.mabe-whatsapp{padding:12px 16px;font-size:13px}}
@media(max-width:575px){.extra-nav{display:none}.mabe-brand-main{font-size:25px}}
.mabe-category-card{display:block;position:relative;border-radius:18px;overflow:hidden;background:#fff;color:#111;box-shadow:0 10px 35px rgba(0,0,0,.08)}.mabe-category-card img{width:100%;height:260px;object-fit:cover}.mabe-category-card div{padding:18px}.mabe-category-card small{opacity:.6}.mabe-category-card h4{margin:4px 0}.mabe-promo-card{height:100%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.08)}.mabe-promo-card>img{width:100%;height:300px;object-fit:cover}.mabe-promo-content{padding:24px}.mabe-promo-content strong{font-size:25px;display:block;margin:12px 0}.treatment-detail{padding-top:180px}.treatment-detail-image{max-height:620px;object-fit:cover}.benefits-box{padding:28px;background:#f6f2ef;border-radius:20px}.benefits-box li{margin:12px 0}.mabe-richtext{font-size:18px;line-height:1.8}


/* Popup promocional Mabe */
.mabe-popup-overlay{position:fixed;inset:0;z-index:99999;background:rgba(20,15,16,.72);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .18s ease}.mabe-popup-overlay.is-open{opacity:1}.mabe-popup-card{width:min(860px,96vw);max-height:90vh;display:grid;grid-template-columns:46% 54%;background:#fff;border-radius:26px;overflow:hidden;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.35)}.mabe-popup-close{position:absolute;right:14px;top:14px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#201b19;color:#fff;font-size:28px;line-height:1;cursor:pointer}.mabe-popup-image{min-height:470px;background:#f1e8e4}.mabe-popup-image img{width:100%;height:100%;min-height:470px;object-fit:cover}.mabe-popup-placeholder{height:100%;min-height:470px;display:grid;place-content:center;text-align:center;font-size:45px;letter-spacing:8px;font-weight:900;color:#c77f62}.mabe-popup-placeholder small{font-size:14px;letter-spacing:6px}.mabe-popup-content{padding:64px 48px 46px;display:flex;flex-direction:column;justify-content:center}.mabe-popup-kicker{font-size:13px;letter-spacing:2px;color:#c77f62;font-weight:800}.mabe-popup-content h2{font-size:38px;line-height:1.05;margin:10px 0 12px;color:#201b19}.mabe-popup-content p{font-size:17px;color:#6e6260;margin:0 0 20px}.mabe-popup-prices{display:flex;align-items:baseline;gap:14px;margin:6px 0 22px}.mabe-popup-prices del{font-size:18px;color:#9b918d}.mabe-popup-prices strong{font-size:42px;color:#201b19}.mabe-popup-cta{display:block;text-align:center;background:#25d366;color:#fff!important;border-radius:12px;padding:15px 18px;font-weight:900}.mabe-popup-note{margin-top:13px;color:#948985;text-align:center}@media(max-width:700px){.mabe-popup-card{grid-template-columns:1fr;max-height:92vh;overflow:auto}.mabe-popup-image{min-height:220px;height:250px}.mabe-popup-image img{min-height:0;height:250px}.mabe-popup-content{padding:30px 24px}.mabe-popup-content h2{font-size:30px}.mabe-popup-prices strong{font-size:36px}}

/* =========================================================
   MABE STETIC - POPUP PROMOCIONAL
   Imagen vertical 3:4 sin deformación
   ========================================================= */

.mabe-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.mabe-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mabe-popup-overlay[hidden] {
    display: none !important;
}


/* CAJA PRINCIPAL */

.mabe-popup-card {
    position: relative;

    width: min(960px, 94vw);
    max-height: 90vh;

    display: grid;
    grid-template-columns: minmax(380px, 48%) 1fr;

    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;

    box-shadow: 0 25px 80px rgba(0,0,0,.35);
}


/* =========================================================
   IMAGEN
   ========================================================= */

.mabe-popup-image {
    width: 100%;
    height: 100%;
    min-height: 570px;

    background: #f3f3f3;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.mabe-popup-image img {
    width: 100%;
    height: 100%;

    /* MUY IMPORTANTE:
       mantiene la proporción y NO estira el flyer */
    object-fit: cover;
    object-position: center center;

    display: block;
}


/* CONTENIDO DERECHO */

.mabe-popup-content {
    padding: 54px 48px 38px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.mabe-popup-kicker {
    display: block;

    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #c97859;
}

.mabe-popup-content h2 {
    margin: 0 0 18px;

    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;

    color: #111;
}

.mabe-popup-content p {
    margin: 0 0 24px;

    font-size: 17px;
    line-height: 1.55;

    color: #6a6060;
}


/* PRECIOS */

.mabe-popup-prices {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 8px 0 25px;
}

.mabe-popup-prices del {
    font-size: 20px;
    color: #999;
}

.mabe-popup-prices strong {
    font-size: 42px;
    line-height: 1;
    font-weight: 800;

    color: #111;
}


/* BOTÓN WHATSAPP */

.mabe-popup-cta {
    display: block;

    width: 100%;

    padding: 17px 20px;

    border-radius: 11px;

    background: #25D366;
    color: #fff !important;

    text-align: center;
    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition: transform .15s ease, filter .15s ease;
}

.mabe-popup-cta:hover {
    transform: translateY(-2px);
    filter: brightness(.96);
}


/* NOTA */

.mabe-popup-note {
    display: block;

    margin-top: 15px;

    text-align: center;
    color: #999;
    font-size: 13px;
}


/* CERRAR */

.mabe-popup-close {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 5;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: #211c1a;
    color: #fff;

    font-size: 30px;
    line-height: 40px;

    cursor: pointer;
}

.mabe-popup-close:hover {
    background: #000;
}


/* PLACEHOLDER */

.mabe-popup-placeholder {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: #aaa;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .mabe-popup-card {
        width: min(820px, 95vw);
        grid-template-columns: 45% 55%;
    }

    .mabe-popup-image {
        min-height: 520px;
    }

    .mabe-popup-content {
        padding: 45px 32px 32px;
    }

    .mabe-popup-content h2 {
        font-size: 30px;
    }

    .mabe-popup-content p {
        font-size: 15px;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 650px) {

    .mabe-popup-overlay {
        padding: 12px;
        align-items: center;
    }

    .mabe-popup-card {
        width: 94vw;
        max-height: 94vh;

        display: block;

        overflow-y: auto;

        border-radius: 20px;
    }

    .mabe-popup-image {
        width: 100%;
        height: auto;
        min-height: 0;

        /* proporción exacta 3:4 */
        aspect-ratio: 3 / 4;
    }

    .mabe-popup-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .mabe-popup-content {
        padding: 25px 22px 25px;
    }

    .mabe-popup-content h2 {
        font-size: 27px;
        margin-bottom: 12px;
    }

    .mabe-popup-content p {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 16px;
    }

    .mabe-popup-prices {
        margin: 5px 0 18px;
    }

    .mabe-popup-prices strong {
        font-size: 36px;
    }

    .mabe-popup-close {
        position: fixed;

        top: 18px;
        right: 18px;

        width: 40px;
        height: 40px;

        font-size: 27px;
    }

}

.mabe-popup-text {
    font-size: 16px;
    line-height: 1.55;
    color: #6a6060;
}

.mabe-popup-text p {
    margin: 0 0 14px;
}

.mabe-popup-text p:last-child {
    margin-bottom: 0;
}

.mabe-popup-text strong {
    font-weight: 700;
    color: #222;
}

/* =========================================
   LOGO HEADER - MABE STETIC
========================================= */

.logo-header {
    width: auto !important;
}

.mabe-brand-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.mabe-header-logo {
    width: auto;
    height: 70px;
    max-width: 330px;
    object-fit: contain;
    display: block;
}

/* Header cuando queda fijo al hacer scroll */
.is-fixed .mabe-header-logo {
    height: 60px;
}

/* =========================================
   LOGO HEADER MABE STETIC
========================================= */

.logo-header.logo-dark {
    width: 280px !important;
    min-width: 280px !important;
    height: 90px !important;

    display: flex;
    align-items: center;
}

.mabe-brand-logo {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mabe-header-logo {
    width: 270px !important;
    max-width: none !important;
    height: auto !important;

    display: block;
    object-fit: contain;
}


/* HEADER FIJO AL HACER SCROLL */

.is-fixed .logo-header.logo-dark {
    height: 75px !important;
}

.is-fixed .mabe-header-logo {
    width: 240px !important;
}


/* TABLET */

@media (max-width: 1199px) {

    .logo-header.logo-dark {
        width: 230px !important;
        min-width: 230px !important;
        height: 75px !important;
    }

    .mabe-header-logo {
        width: 220px !important;
    }

}


/* CELULAR */

@media (max-width: 767px) {

    .logo-header.logo-dark {
        width: 190px !important;
        min-width: 190px !important;
        height: 65px !important;
    }

    .mabe-header-logo {
        width: 185px !important;
    }

}

/* =========================================================
   PRELOADER MABE STETIC
========================================================= */

.mabe-preloader {
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mabe-preloader-content {
    width: 100%;
    max-width: 440px;
    padding: 30px;
    text-align: center;
}


/* LOGO */

.mabe-preloader-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    animation: mabeLogoEntrada 1.1s ease forwards;
}

.mabe-preloader-logo img {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;

    animation: mabeLogoPulso 2s ease-in-out infinite;
}


/* LÍNEA INFERIOR */

.mabe-preloader-line {
    position: relative;

    width: 180px;
    height: 2px;

    margin: 25px auto 16px;

    background: rgba(214, 67, 132, 0.15);

    overflow: hidden;
    border-radius: 10px;
}

.mabe-preloader-line span {
    position: absolute;

    top: 0;
    left: -60%;

    width: 60%;
    height: 100%;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #7b5aa6,
        #d64384,
        #ef729e
    );

    animation: mabeCarga 1.5s ease-in-out infinite;
}


/* TEXTO */

.mabe-preloader-text {
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    color: #777;

    opacity: 0;

    animation: mabeTextoEntrada .8s ease .4s forwards;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes mabeLogoEntrada {

    0% {
        opacity: 0;
        transform: translateY(12px) scale(.94);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


@keyframes mabeLogoPulso {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}


@keyframes mabeCarga {

    0% {
        left: -60%;
    }

    100% {
        left: 110%;
    }

}


@keyframes mabeTextoEntrada {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: .75;
        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 575px) {

    .mabe-preloader-content {
        max-width: 330px;
        padding: 25px;
    }

    .mabe-preloader-logo img {
        max-width: 280px;
    }

    .mabe-preloader-line {
        width: 140px;
        margin-top: 20px;
    }

    .mabe-preloader-text {
        font-size: 8px;
        letter-spacing: 2px;
    }

}

/* Mabe Stetic: barra de desplazamiento vertical visible */
html {
  overflow-y: scroll;
  scrollbar-width: auto;
  scrollbar-color: #a88a92 #f5f0f1;
}

html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #f5f0f1; }
html::-webkit-scrollbar-thumb {
  background: #a88a92;
  border-radius: 8px;
  border: 2px solid #f5f0f1;
}
html::-webkit-scrollbar-thumb:hover { background: #875d69; }


/* Franja: recorrido completo de todos los registros activos. */
.mabe-franja .dz-features-wrapper { overflow: hidden; }
.mabe-franja .dz-features.text-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  max-width: none;
  animation: mabeTickerCompleto 65s linear infinite !important;
  animation-play-state: running !important;
}
.mabe-franja .dz-features.text-wrapper > .item { flex: 0 0 auto; }
.mabe-franja .dz-features.text-wrapper .title { white-space: nowrap; }
@keyframes mabeTickerCompleto {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* =========================================================
   MABE STETIC - DENSIDAD VISUAL COMPACTA (WEB PUBLICA)
   Ajustes moderados y adaptativos. No afecta el administrador
   ni altera las dimensiones/animaciones del carrusel de ofertas.
   ========================================================= */
@media (min-width: 992px) {
  .page-content .container,
  .site-footer .container { max-width: 1170px; }

  .page-content .content-inner { padding-top: 54px; padding-bottom: 54px; }
  .page-content .content-inner-2 { padding-top: 48px; padding-bottom: 48px; }
  .page-content .content-inner-3 { padding-top: 42px; padding-bottom: 42px; }

  .page-content .section-head { margin-bottom: 24px; }
  .page-content .section-head h2.title { font-size: clamp(29px, 2.7vw, 38px); line-height: 1.17; }
  .page-content p { line-height: 1.55; }

  .page-content .btn.btn-lg { padding: 12px 24px; }
  .page-content .row.g-5 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }

  /* Portada: reducir el tamaño del texto y el aire alrededor
     sin forzar tamaños en las imágenes del slider. */
  .page-content .main-slider h1,
  .page-content .main-slider .title,
  .page-content .main-slider .slider-title { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.1; }

  /* Fichas individuales de tratamientos y promociones */
  .page-content .treatment-detail { padding-top: 105px; padding-bottom: 48px; }
  .page-content .treatment-detail h1,
  .page-content .mabe-promotion-detail-section h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
  .page-content .treatment-detail-image { max-height: 520px; }
  .page-content .mabe-promotion-detail-section { padding-top: 45px; padding-bottom: 50px; }
  .page-content .mabe-richtext { font-size: 16px; line-height: 1.65; }
  .page-content .benefits-box { padding: 20px; }
  .page-content .benefits-box li { margin: 8px 0; }
  .site-footer .footer-top { padding-top: 48px; padding-bottom: 40px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .page-content .content-inner { padding-top: 42px; padding-bottom: 42px; }
  .page-content .content-inner-3 { padding-top: 34px; padding-bottom: 34px; }
  .page-content .section-head { margin-bottom: 22px; }
  .page-content .treatment-detail { padding-top: 88px; }
}
@media (max-width: 575.98px) {
  .page-content .content-inner { padding-top: 30px; padding-bottom: 30px; }
  .page-content .content-inner-3 { padding-top: 26px; padding-bottom: 26px; }
  .page-content .section-head { margin-bottom: 18px; }
  .page-content .treatment-detail { padding-top: 78px; }
  .page-content .mabe-richtext { font-size: 15px; line-height: 1.6; }
}


/* Portada más compacta: selectores reales del slider Pixio/Mabe */
@media (min-width: 992px) {
  .main-slider-wrapper { min-height: 0 !important; }
  .main-slider-wrapper .slider-inner { padding-top: 24px !important; padding-bottom: 22px !important; min-height: 0 !important; }
  .main-slider-wrapper .slider-main .content-info { padding-top: 12px !important; padding-bottom: 8px !important; }
  .main-slider-wrapper .slider-main .content-info h1.title { font-size: clamp(34px, 3.2vw, 46px) !important; line-height: 1.12 !important; margin-bottom: 12px !important; }
  .main-slider-wrapper .slider-main .content-info .description { font-size: 15px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .main-slider-wrapper .slider-main .content-info .sub-title { margin-bottom: 8px !important; }
  .main-slider-wrapper .slider-main .swiper-meta-items { margin-bottom: 14px !important; }
  .main-slider-wrapper .slider-main .price-num { font-size: 36px !important; line-height: 1.2 !important; }
  .main-slider-wrapper .slider-main .content-btn { margin-bottom: 12px !important; }
  .main-slider-wrapper .slider-main .content-btn .btn { padding: 10px 20px !important; font-size: 13px !important; }
  .main-slider-wrapper .slider-thumbs .banner-media .img-preview img { max-height: 540px !important; object-fit:contain !important; }
  .main-slider-wrapper .bottom-content { margin-top: 10px !important; }
  .page-content .content-inner { padding-top: 38px; padding-bottom: 38px; }
  .page-content .content-inner-2 { padding-top: 34px; padding-bottom: 34px; }
  .page-content .content-inner-3 { padding-top: 30px; padding-bottom: 30px; }
  .page-content .treatment-detail { padding-top: 88px; padding-bottom: 36px; }
  .page-content .mabe-promotion-detail-section { padding-top: 32px; padding-bottom: 36px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .main-slider-wrapper .slider-inner { padding-top: 22px !important; padding-bottom: 22px !important; }
  .main-slider-wrapper .slider-main .content-info h1.title { font-size: 38px !important; }
}

/* ==============================================
   MABE STETIC - POPUP RESPONSIVE
   Ajuste para celulares y pantallas pequeñas
   ============================================== */

.mabe-popup-overlay {
    box-sizing: border-box;
    padding: 12px;
}

.mabe-popup-card {
    box-sizing: border-box;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
}

@media (max-width: 650px) {

    .mabe-popup-overlay {
        padding: 10px;
        align-items: center;
        justify-content: center;
    }

    .mabe-popup-card {
        width: 100%;
        max-width: 430px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 18px;
    }

    .mabe-popup-image {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 40vh;
        max-height: 40dvh;
        aspect-ratio: auto;
        flex-shrink: 0;
        background: #ffffff;
    }

    .mabe-popup-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 40vh;
        max-height: 40dvh;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }

    .mabe-popup-content {
        padding: 16px 20px 22px;
        flex-shrink: 0;
    }

    .mabe-popup-content h2 {
        font-size: clamp(21px, 5vw, 27px);
        line-height: 1.2;
    }

    .mabe-popup-content p {
        font-size: 14px;
        line-height: 1.45;
    }

    .mabe-popup-prices strong {
        font-size: 32px;
    }

    .mabe-popup-close {
        position: sticky;
        top: 8px;
        align-self: flex-end;
        margin-bottom: -40px;
        margin-right: 8px;
        flex-shrink: 0;
        z-index: 10;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 650px) and (max-height: 600px) {
    .mabe-popup-image,
    .mabe-popup-image img {
        max-height: 30vh;
        max-height: 30dvh;
    }
}