/**
 * Ficha de producto: bloque de conversión para visitantes no registrados.
 *
 * CSS plano a propósito, por la misma razón que whatsapp-modal.css: Tailwind se
 * compila en un build aparte que no corre en este servidor, así que una clase
 * nueva de Tailwind saldría sin estilos.
 *
 * Jerarquía deliberada: el prospecto nuevo (alta de distribuidor) manda, el
 * cliente existente (acceso al portal) va en segundo plano y WhatsApp queda
 * como ayuda, no como cierre.
 */

.lavin-cta {
    background: #faf9f6;
    border: 1px solid #e8e4da;
    border-radius: 14px;
    padding: 30px 28px;
}

.lavin-cta__titulo {
    font-family: "The Seasons", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: #1b2632;
    margin: 0 0 10px;
    line-height: 1.22;
}

.lavin-cta__texto {
    font-size: 0.9375rem;
    line-height: 1.65;
    font-weight: 300;
    color: #5b6773;
    margin: 0 0 26px;
}

/* --- CTA primario: alta de distribuidor --------------------------------- */
.lavin-cta__principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px 28px;
    background: #1b2632;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 26px rgba(27, 38, 50, 0.2);
    transition: background-color 0.45s cubic-bezier(.16,1,.3,1), transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease;
}

.lavin-cta__principal:hover,
.lavin-cta__principal:focus {
    background: #2c3d4f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(27, 38, 50, 0.26);
}

.lavin-cta__principal svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- CTA secundario: ya soy cliente ------------------------------------- */
.lavin-cta__secundario {
    display: block;
    margin-top: 18px;
    font-size: 0.875rem;
    font-weight: 300;
    color: #497b9c;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

.lavin-cta__secundario:hover,
.lavin-cta__secundario:focus {
    color: #33607f;
    text-decoration: underline;
}

.lavin-cta__secundario b {
    font-weight: 600;
}

/* --- Ayuda: WhatsApp como tercer nivel ---------------------------------- */
.lavin-cta__ayuda {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e8e4da;
    text-align: center;
}

.lavin-cta__ayuda-texto {
    font-size: 0.8125rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    color: #8a96a3;
    margin: 0 0 10px;
}

.lavin-cta__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5b6773;
    text-decoration: none;
}

.lavin-cta__wa:hover,
.lavin-cta__wa:focus {
    color: #1d9c5a;
}

.lavin-cta__wa svg {
    width: 17px;
    height: 17px;
}

/* --- Barra fija en móvil ------------------------------------------------ */
.lavin-cta-fija {
    display: none;
}

@media (max-width: 767px) {
    .lavin-cta-fija {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(8px);
        border-top: 1px solid #e5e1d8;
        box-shadow: 0 -4px 16px rgba(27, 38, 50, 0.08);
    }

    .lavin-cta-fija__info {
        flex: 1;
        min-width: 0;
    }

    .lavin-cta-fija__etiqueta {
        display: block;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #8a96a3;
        line-height: 1.2;
    }

    .lavin-cta-fija__nombre {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #1b2632;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lavin-cta-fija__boton {
        flex-shrink: 0;
        padding: 13px 20px;
        background: #1b2632;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
        border-radius: 999px;
        white-space: nowrap;
    }

    .lavin-cta-fija__boton:hover,
    .lavin-cta-fija__boton:focus {
        background: #2c3d4f;
        color: #fff;
    }

    /* Deja aire para que la barra no tape el final del contenido. */
    body.single-product.lavin-con-barra {
        padding-bottom: 76px;
    }

    /* Sube la burbuja de WhatsApp para que no quede debajo de la barra. */
    body.single-product.lavin-con-barra .whatsapp-bubble {
        bottom: 92px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lavin-cta__principal,
    .lavin-cta__principal:hover {
        transition: none;
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   Pase editorial: la ficha respira más y la jerarquía se vuelve más tranquila.
   El titular del producto pasa a la serif de la marca, como el resto del sitio.
   -------------------------------------------------------------------------- */
.single-product .product-specs {
    border-color: #e8e4da;
    border-radius: 12px;
    padding: 18px 20px;
}

.single-product .informacion-movil h1,
.single-product .product-info-summary > p.font-extrabold {
    font-family: "The Seasons", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.14;
}

/* --------------------------------------------------------------------------
   Ritmo y tipografía a prueba de !important.

   El tema declara en dist/style.css:
       p { margin: 0 !important; font-family: "Montserrat" !important; }
   Como el título y los textos de este bloque son <p>, perdían tanto el
   espaciado como la serif de la marca. El ritmo se resuelve con flex + gap
   (que no depende de los márgenes de los hijos) y la tipografía necesita
   !important para poder ganarle a la regla global.
   -------------------------------------------------------------------------- */
.lavin-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.lavin-cta__titulo {
    font-family: "The Seasons", Georgia, serif !important;
    margin-bottom: 0;
}

.lavin-cta__texto {
    margin-bottom: 0;
}

.lavin-cta__principal {
    margin-top: 6px;
}

.lavin-cta__secundario {
    margin-top: 0;
}

.lavin-cta__ayuda {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lavin-cta__ayuda-texto {
    margin-bottom: 0;
}

/* El titular del producto también es un <p> en la versión de escritorio. */
.single-product .product-info-summary > p.font-extrabold {
    font-family: "The Seasons", Georgia, serif !important;
}