/*
 Theme Name:   Digital Business
 Template:     Divi
 Version:      1.0.0
*/
/* Etiqueta de envío gratis */

/* Importar la fuente Sora desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');

.badge-envio-gratis {
    font-family: 'Sora', sans-serif !important;
    background-color: #000;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    text-transform: uppercase;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* Efecto de hover en lista de productos */
/* Contenedor que creamos en PHP */
.db-product-gallery-images {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

/* Imagen Principal */
.db-product-gallery-images .main-loop-image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 1;
}

/* Segunda Imagen (Oculta por defecto) */
.db-product-gallery-images .secondary-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(1);
    z-index: 2;
}

/* --- COMPORTAMIENTO HOVER --- */

/* Si NO hay segunda imagen: Zoom a la principal */
ul.products li.product:not(:has(.secondary-hover-image)):hover .main-loop-image {
    transform: scale(1.1);
}

/* Si SÍ hay segunda imagen: Ocultamos principal con suavidad */
ul.products li.product:has(.secondary-hover-image):hover .main-loop-image {
    opacity: 0;
}

/* Si SÍ hay segunda imagen: Mostramos la secundaria con zoom */
ul.products li.product:hover .secondary-hover-image {
    opacity: 1;
    transform: scale(1.1);
}

/* #### LO NUEVO #### */
/* 1. Contenedor principal del producto (la tarjeta) */
ul.products li.product {
    /*background-color: rgba(50, 50, 50, 0.5) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
    border: none !important;
    padding: 15px !important;*/
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(1);
    position: relative;
    box-sizing: border-box;
}

ul.products li.product,
.caja-oscura {
    background-color: rgba(50, 50, 50, 0.5) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
    border: none !important;
    /*display: flex;
    flex-direction: column;*/
    padding: 15px !important;
}

/* Efecto de escalado en la tarjeta entera al hacer hover */
ul.products li.product:hover {
    transform: scale(1.03);
}

/* 2. Contenedor de la imagen (Tu galería personalizada) */
ul.products li.product .db-product-gallery-images,
ul.products li.product .et_shop_image {
    position: relative;
    margin-bottom: 15px !important;
    overflow: hidden;
    border-radius: 2px;
}

/* 3. El recuadro blanco interno sobre la imagen */
ul.products li.product .db-product-gallery-images::before,
ul.products li.product .et_shop_image::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    z-index: 10;
    pointer-events: none;
}

/* 4. Estilos para los textos/títulos del producto */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2, 
ul.products li.product h3 {
    color: #ffffff !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: left !important;
    line-height: 1.3em !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* Forzar que todos los spans internos del título (si existen) hereden el color blanco */
ul.products li.product .woocommerce-loop-product__title span {
    color: #ffffff !important;
}

/* 5. Ocultar precio y elementos nativos de Divi */
ul.products li.product span.price,
ul.products li.product .price,
ul.products li.product .et_overlay {
    display: none !important;
}

/* 6. El Botón "Comprar Ahora" (Amarillo) en flujo natural */
ul.products li.product .button,
ul.products li.product .button.add_to_cart_button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    background-color: #ffd200 !important;
    color: #000000 !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    border: none !important;
    margin-top: auto !important;
    align-self: flex-start;
    font-size: 14px !important;
    z-index: 5;
    transition: background 0.3s ease;
    display: inline-block;
}

/* Efecto Hover del botón */
ul.products li.product .button:hover,
ul.products li.product .button.add_to_cart_button:hover {
    background-color: #e6bd00 !important;
    color: #000000 !important;
}

/* 1. Eliminar la flecha de Divi al hacer hover */
ul.products li.product .button::after,
ul.products li.product .button.add_to_cart_button::after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
}

/* 2. Corregir el espacio que Divi reserva a la derecha para la flecha invisible */
ul.products li.product .button,
ul.products li.product .button.add_to_cart_button,
.boton-iluminado .button,
.boton-iluminado .submit,
.boton-iluminado .wc-block-components-button {
    padding: 12px 25px !important;
    transition: background 0.3s ease, filter 0.3s ease, transform 0.2s ease !important;
}

/* 3. Efecto de iluminación y micro-interacción al hacer hover */
ul.products li.product .button:hover,
ul.products li.product .button.add_to_cart_button:hover,
.boton-iluminado .button:hover,
.boton-iluminado .submit:hover,
.boton-iluminado .wc-block-components-button:hover {
    background-color: #ffd200 !important; /* Mantiene tu amarillo base */
    filter: brightness(1.15) drop-shadow(0px 0px 8px rgba(255, 210, 0, 0.6)) !important;
    transform: translateY(-1px);
}

/* --- RESPONSIVO PARA DISPOSITIVOS MÓVILES (Pantallas menores a 767px) --- */
@media (max-width: 767px) {
    /* 1. Forzar a que las tarjetas de la tienda ocupen el 100% y se vea una sola por fila */
    .et_pb_shop ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. Adaptar el botón para que el texto entre completo sin romperse */
    ul.products li.product .button,
    ul.products li.product .button.add_to_cart_button,
    .boton-iluminado .button,
    .boton-iluminado .submit,
    .boton-iluminado .wc-block-components-button {
        font-size: 13px !important; /* Reduce ligeramente el tamaño de la fuente si es necesario */
        padding: 10px 16px !important; /* Reduce el relleno interno para ganar espacio horizontal */
        white-space: nowrap !important; /* Evita estrictamente que el texto salte a una segunda línea */
        display: inline-block !important;
        width: auto !important; /* Evita que el botón intente forzar un ancho completo e incómodo */
    }
}

/* ==========================================================================
   Adaptación de diseño para Botones de Formulario Divi (Formato WooCommerce)
   ========================================================================== */

/* 1. Formato Base del Botón de Enviar (Amarillo) */
.et_pb_contact_submit,
.et_pb_newsletter_button,
.boton-iluminado .button,
.boton-iluminado .submit,
.boton-iluminado .wc-block-components-button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    background-color: #ffd200 !important;
    color: #000000 !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    border: none !important;
    margin-top: auto !important;
    align-self: flex-start;
    font-size: 14px !important;
    z-index: 5;
    display: inline-block !important;
    /* Corrección de transiciones de Divi */
    transition: background 0.3s ease, filter 0.3s ease, transform 0.2s ease !important;
}

/* 2. Eliminar el icono de flecha de Divi al hacer hover */
.et_pb_contact_submit::after,
.et_pb_newsletter_button::after,
.boton-iluminado .button::after,
.boton-iluminado .submit::after,
.boton-iluminado .wc-block-components-button::after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
}

/* 3. Forzar el padding correcto en hover (evita el desplazamiento por la flecha de Divi) */
.et_pb_contact_submit:hover,
.et_pb_newsletter_button:hover,
.boton-iluminado .button:hover,
.boton-iluminado .submit:hover,
.boton-iluminado .wc-block-components-button:hover {
    padding: 12px 25px !important;
}

/* 4. Efecto de iluminación y micro-interacción al hacer hover */
.et_pb_contact_submit:hover,
.et_pb_newsletter_button:hover,
.boton-iluminado .button:hover,
.boton-iluminado .submit:hover,
.boton-iluminado .wc-block-components-button:hover {
    background-color: #ffd200 !important; /* Mantiene tu amarillo base */
    color: #000000 !important;
    filter: brightness(1.15) drop-shadow(0px 0px 8px rgba(255, 210, 0, 0.6)) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   Color blanco para el texto del Captcha de Divi
   ========================================================================== */

/* Cambia el texto de la operación (ej: 11 + 8 =) a blanco */
.et_pb_contact_captcha_question {
    color: #ffffff !important;
}

/* Opcional: Si el texto "Captcha" que aparece arriba del campo también se pierde, esto lo hace blanco */
.et_pb_contact_captcha_label {
    color: #ffffff !important;
}

/* ### Carrito de compras ### */
.wc-block-cart-items__header-image span,
.wc-block-cart-items__header-total span {
    color: #ffffff;
}

.wc-block-cart-items__header-image span {
    padding-left: 0.75rem;
}

form label {
    color: #fff !important;
}

/* ==========================================================================
   CHECKOUT · Bloque de métodos de pago en modo oscuro
   (el fondo claro #ebe9eb lo pone el módulo de Divi
   .et_pb_wc_checkout_payment_info, no WooCommerce)
   ========================================================================== */

.et_pb_wc_checkout_payment_info,
.woocommerce-checkout #payment,
#payment {
    background-color: rgba(50, 50, 50, 0.5) !important;
    border-radius: 4px !important;
}

/* Textos claros dentro del bloque (nombre del método, avisos, etc.) */
.et_pb_wc_checkout_payment_info,
.et_pb_wc_checkout_payment_info *,
#payment,
#payment li,
#payment label,
#payment p,
#payment .woocommerce-privacy-policy-text {
    color: #ffffff !important;
}

/* Separador entre la lista de métodos y el pie del bloque */
#payment ul.payment_methods,
#payment ul.wc_payment_methods {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Enlaces (política de privacidad, términos) en amarillo de marca */
#payment a {
    color: #ffd200 !important;
}

/* Caja de descripción del método ("Paga a través de PayPal.") */
#payment div.payment_box {
    background-color: rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

/* Flecha superior de esa caja */
#payment div.payment_box::before {
    border-bottom-color: rgba(0, 0, 0, 0.35) !important;
}

/* El botón amarillo mantiene su texto negro */
#payment #place_order,
#payment .button,
.et_pb_wc_checkout_payment_info .button {
    color: #000000 !important;
}
/* --------------------------------------------------------------------------
   Mercado Pago (Checkout Pro): su panel interno viene con fondo blanco
   (#mp-checkout-pro-root .mp-checkout-pro-content) y textos negros.
   -------------------------------------------------------------------------- */

#payment .mp-checkout-container,
#payment #mp-checkout-pro-root.mp-checkout-pro-container,
#payment #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content {
    background: transparent !important;
}

#payment #mp-checkout-pro-root .mp-checkout-pro-benefits-title,
#payment #mp-checkout-pro-root .mp-checkout-pro-benefit-description,
#payment #mp-checkout-pro-root .mp-checkout-pro-benefit-description b,
#payment #mp-checkout-pro-root .mp-checkout-pro-redirect-title,
#payment #mp-checkout-pro-root .mp-checkout-pro-redirect-description {
    color: #ffffff !important;
}

/* Franja inferior "Te llevaremos a Mercado Pago" */
#payment #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-redirect {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px;
}

/* Los iconos de beneficios son SVG negros: los pasamos a blanco */
#payment #mp-checkout-pro-root img.mp-checkout-pro-benefit-icon {
    filter: brightness(0) invert(1) !important;
}

/* Los logos de tarjetas conservan su fondo blanco para seguir legibles */
#payment #mp-checkout-pro-root img.mp-checkout-pro-payment-method-icon {
    background: #ffffff !important;
}

/* Los campos de formulario de las pasarelas conservan su texto oscuro */
#payment div.payment_box input,
#payment div.payment_box select,
#payment div.payment_box textarea,
#payment .mp-checkout-container input,
#payment .mp-checkout-container select {
    color: #000000 !important;
}