/* =========================================
   Variables de Marca
   ========================================= */
:root {
    --mf-purple: #3e127a;
    --mf-turquoise: #00d2b9;
    --mf-font: 'Montserrat', sans-serif;
}

.mfpt-hero-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--mf-font);
    padding: 20px;
}

.mfpt-main-heading {
    text-align: center;
    color: var(--mf-purple);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 40px;
}

/* =========================================
   DISTRIBUCIÓN
   ========================================= */
.mfpt-grid-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.mfpt-col-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
}

.mfpt-images-top {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.mfpt-img-nutrition-wrap { width: 65%; }
.mfpt-img-can-wrap { width: 35%; }

.mfpt-img-nutrition, .mfpt-img-can, .mfpt-img-lifestyle {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

/* Quitar fondo blanco de la lata forzando transparencia absoluta */
.mfpt-img-can {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* =========================================
   COLUMNA DERECHA
   ========================================= */
.mfpt-col-content {
    flex: 1;
    max-width: 500px;
    background-color: var(--mf-turquoise);
    border-radius: 40px;
    padding: 35px 30px;
    color: var(--mf-purple);
}

.mfpt-sku-label { font-size: 14px; font-weight: 900; display: block; margin-bottom: 5px; }
.mfpt-product-title { font-size: 55px; font-weight: 900; margin: 0; line-height: 1; }
.mfpt-product-subtitle { font-size: 18px; font-weight: 800; margin: 5px 0 15px 0; }
.mfpt-product-desc { font-size: 13px; line-height: 1.4; margin-bottom: 20px; font-weight: 500; }
.mfpt-box-image-wrap { text-align: center; margin-bottom: 20px; }
.mfpt-img-box { max-width: 100%; height: auto; }

/* =========================================
   COMPRA ÚNICA Y CANTIDAD
   ========================================= */
.mfpt-purchase-standard {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    align-items: stretch; /* Permite que ambos elementos crezcan igual */
}

.mfpt-qty-custom {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border-radius: 30px !important;
    border: 2px solid transparent !important;
    padding: 0 15px !important;
    min-height: 55px !important; /* CORRECCIÓN: Evita aplastamiento */
    box-sizing: border-box !important;
    width: auto !important;
}

.mfpt-qty-btn {
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: var(--mf-purple) !important;
    cursor: pointer !important;
    padding: 0 8px !important;
}

.mfpt-qty-input {
    width: 40px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
    color: var(--mf-purple) !important;
    background: transparent !important;
    padding: 0 !important;
}
.mfpt-qty-input::-webkit-outer-spin-button, .mfpt-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Botón de compra */
.mfpt-btn-single {
    flex: 1 !important;
    background-color: #fff !important;
    color: var(--mf-purple) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 15px 25px !important; /* CORRECCIÓN: Forzar padding interno */
    min-height: 55px !important; /* CORRECCIÓN: Evita que el tema lo aplaste */
    height: auto !important;
    box-sizing: border-box !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    text-align: left !important;
    white-space: normal !important;
}

.mfpt-btn-text {
    flex-shrink: 0;
}

.mfpt-btn-single .mfpt-price,
.mfpt-btn-single .price,
.mfpt-btn-single .amount,
.mfpt-btn-single ins,
.mfpt-btn-single del {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mf-purple) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}
.mfpt-btn-single del { opacity: 0.6; font-size: 13px !important; }

.mfpt-shipping-notice {
    font-size: 13px;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* =========================================
   CAJA DE SUSCRIPCIÓN
   ========================================= */
.mfpt-subscription-wrapper { position: relative; }
.mfpt-subscription-box {
    background-color: #fff;
    border-radius: 30px;
    padding: 25px;
    position: relative;
    z-index: 2;
}
.mfpt-sub-heading { font-size: 15px; font-weight: 900; margin: 0 0 15px 0; }
.mfpt-sub-small { font-size: 12px; font-weight: normal; }
.mfpt-sub-list { list-style: none; padding: 0; margin: 0 0 20px 0; font-size: 12px; font-weight: 800; }
.mfpt-sub-list li { margin-bottom: 5px; }
.mfpt-sub-list li::before { content: '•'; margin-right: 5px; }

.mfpt-sub-dropdown {
    width: 100% !important;
    padding: 12px 20px !important;
    min-height: 50px !important; /* CORRECCIÓN: Evita corte en desktop/móvil */
    height: auto !important;
    box-sizing: border-box !important;
    border-radius: 30px !important;
    border: 2px solid var(--mf-purple) !important;
    font-weight: bold !important;
    appearance: none !important;
    background: transparent url('data:image/svg+xml;utf8,<svg fill="%233e127a" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 15px center !important;
    font-size: 15px !important;
    line-height: 1.5 !important; /* CORRECCIÓN: Restaura la altura de línea */
    box-shadow: none !important;
}

.mfpt-tote-image-wrap { margin-top: 15px; border-radius: 20px; overflow: hidden; }
.mfpt-img-totebag { width: 100%; display: block; }

/* =========================================
   TABLA DE COMPARACIÓN
   ========================================= */
.mfpt-comparison-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eaeaea; }
.mfpt-comparison-title { text-align: center; color: var(--mf-purple); font-size: 32px; font-weight: 900; margin-bottom: 30px; }
.mfpt-table-responsive { background: #fbfbfb; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 20px; overflow-x: auto; }
.mfpt-compare-table { width: 100%; min-width: 700px; border-collapse: collapse; font-family: var(--mf-font); }
.mfpt-compare-table th, .mfpt-compare-table td { padding: 15px; text-align: center; vertical-align: middle; border-bottom: 1px solid #e2e8f0; }
.mfpt-col-feature { width: 35%; }
.mfpt-col-mate-head { background-color: #274b43; color: #ffffff; font-size: 16px; font-weight: 800; border-top-left-radius: 15px; border-top-right-radius: 15px; padding: 20px 15px !important; }
.mfpt-col-other-head { background-color: var(--mf-purple); color: #ffffff; font-size: 16px; font-weight: 800; border-left: 1px solid rgba(255,255,255,0.2); }
.mfpt-feature-name { text-align: left !important; font-weight: 800; font-size: 14px; color: #333; }
.mfpt-feature-name span { font-weight: normal; font-size: 13px; color: #666; }
.mfpt-col-mate-body { background-color: #d8ecd2; border-left: 1px solid #cce2c6; border-right: 1px solid #cce2c6; }
.mfpt-comparison-footer { text-align: center; color: var(--mf-purple); font-size: 13px; font-weight: 700; margin-top: 20px; }

/* =========================================
   RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 992px) {
    .mfpt-grid-layout { flex-direction: column; }
    .mfpt-col-content { max-width: 100%; }
}

@media (max-width: 767px) {
    .mfpt-purchase-standard {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }
    
    .mfpt-qty-custom {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .mfpt-btn-single {
        width: 100% !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 15px 20px !important;
    }
}

/* EFECTO SWITCH (EXCLUSIVIDAD UX) */
.mfpt-section-dimmed {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    filter: grayscale(20%);
}

.mfpt-section-active {
    opacity: 1;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 15px rgba(0,0,0,0.05); /* Le da un leve resalte a la opción activa */
}

#mfpt-box-unica, #mfpt-box-subs {
    cursor: pointer;
    border-radius: 30px;
}

button:disabled {
    cursor: not-allowed !important;
}