/**
Theme Name: Orquidea
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orquidea
Template: astra
*/

/* Forzamos la prioridad con 'body' */
body .contenedor-moderno {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: block !important;
}

body .contenedor-moderno img {
    border-radius: 20px !important;
    transition: transform 0.6s ease !important;
}

body .contenedor-moderno:hover img {
    transform: scale(1.1) !important;
}

/* El botón encima */
body .contenedor-moderno .wp-block-button {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
}

body .contenedor-moderno .wp-block-button__link {
    background-color: #bb9b5e !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
}

/* ==========================================================================
   TARJETAS DE PRODUCTO MODERNAS (SIN BOTÓN)
   ========================================================================== */

/* 1. Contenedor de la Tarjeta */
.contenedor-moderno {
    position: relative !important;
    border-radius: 20px !important; /* Puntas curvas que pediste */
    overflow: hidden !important; /* Mantiene la imagen dentro de la curva */
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    background: #ffffff;
    cursor: pointer;
}

/* 2. Efecto de Elevación y Sombra Premium */
.contenedor-moderno:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(187, 155, 94, 0.15) !important; /* Sombra sutil con tono dorado */
}

/* 3. La Imagen y su comportamiento */
.contenedor-moderno img {
    border-radius: 20px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.8s ease !important;
}

/* 4. Zoom suave al pasar el mouse */
.contenedor-moderno:hover img {
    transform: scale(1.06) !important;
}

/* 5. Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .contenedor-moderno {
        border-radius: 15px !important;
    }
    .contenedor-moderno img {
        border-radius: 15px !important;
    }
}

/* =============================================================
   NUEVA ARQUITECTURA DE TARJETAS: ALINEACIÓN TOTAL Y EFECTOS
   ============================================================= */

/* 1. Contenedor con alineación inteligente */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin: 0 auto !important;
}

/* 2. La Tarjeta como "Caja Flex" (Para que todo se alinee abajo) */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    width: calc(25% - 15px) !important; /* 4 columnas exactas en PC */
    min-height: 100% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Ajuste 2 columnas para Móvil */
@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        width: calc(50% - 10px) !important;
    }
}

/* 3. Filtro de Imagen "Vívido" y Zoom */
.woocommerce ul.products li.product img {
    filter: saturate(1.1) contrast(1.02) !important; /* Mejora los colores de tus productos */
    border-radius: 20px 20px 0 0 !important;
    transition: all 0.6s ease !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important; /* Todas las fotos cuadradas iguales */
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.08) !important;
    filter: saturate(1.2) !important;
}

/* 4. Cuerpo de la tarjeta (Empuja el botón al fondo) */
.woocommerce-loop-product__title {
    flex-grow: 1 !important; /* Fuerza a que el título ocupe el espacio necesario */
    padding: 20px 15px 10px 15px !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}

/* 5. Precio con resplandor suave */
.price {
    padding: 0 15px 15px 15px !important;
    color: #bb9b5e !important;
    font-size: 1.2rem !important;
    display: block !important;
    text-shadow: 0 2px 4px rgba(187, 155, 94, 0.1) !important;
}

/* 6. Botón Azul con efecto "Glossy" (Brillante) */
.woocommerce ul.products li.product .button {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    margin: 0 15px 20px 15px !important;
    border-radius: 12px !important; /* Redondeado menos exagerado, más moderno */
    padding: 15px !important;
    color: #fff !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto de luz pasando por el botón al hacer hover */
.woocommerce ul.products li.product .button::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: rgba(255,255,255,0.1) !important;
    transform: rotate(45deg) !important;
    transition: 0.5s !important;
    opacity: 0 !important;
}

.woocommerce ul.products li.product .button:hover::after {
    left: 100% !important;
    opacity: 1 !important;
}

/* Selector de máxima jerarquía para ignorar Spectra */
html body .woocommerce div.product form.cart .btn-custom-gold {
    background-color: #000000 !important;
    color: #ffffff !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Efecto Flotante */
html body .woocommerce div.product form.cart .btn-custom-gold:hover {
    background-color: #222222 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}