/*
Theme Name: Casa FHO Catalogo
Theme URI: https://casafho.cl/catalogo
Author: Casa FHO
Author URI: https://casafho.cl
Description: Tema personalizado para el catálogo industrial de Casa FHO con WooCommerce, basado en Tailwind y diseño Neumórfico.
Version: 1.0.47.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casafho
*/

/* 
 * ESTILOS GLOBALES NEUMÓRFICOS Y UTILIDADES 
 * Estos estilos fueron extraídos de los diseños de Stitch
 */

/* Neomorphic Utilities */
.neo-convex {
    background: #eeeeee !important;
    box-shadow: 8px 8px 16px #cacaca, -8px -8px 16px #ffffff !important;
    border: none !important;
    transition: box-shadow 1.5s ease-out, transform 0.7s ease-out;
}
.neo-concave {
    background: #eeeeee !important;
    box-shadow: inset 8px 8px 16px #cacaca, inset -8px -8px 16px #ffffff !important;
    border: none !important;
    transition: box-shadow 1.5s ease-out;
}
.neo-convex-white {
    background: #f9f9f9 !important;
    box-shadow: 8px 8px 16px #d4d4d4, -8px -8px 16px #ffffff !important;
    border: none !important;
    transition: box-shadow 1.5s ease-out, transform 0.7s ease-out;
}

.bg-industrial-gray { background-color: #f9f9f9; }
.bg-off-white { background-color: #f9f9f9; }

/* Ticker Animation */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.ticker-wrap {
    overflow: hidden;
    background-color: #0B3E70; /* Deep Blue */
    color: white;
    white-space: nowrap;
    display: flex;
}
.ticker-move {
    display: inline-block;
    animation: ticker 20s linear infinite;
}
.ticker-item {
    display: inline-block;
    padding: 8px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.radius-neo { border-radius: 5px !important; }
.text-deep-blue { color: #0B3E70; }
.bg-deep-blue { background-color: #0B3E70; }

/* Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Efectos Neumórficos Generales */
.neumorphic-convex {
    box-shadow: 6px 6px 12px #dadada, -6px -6px 12px #ffffff;
    transition: box-shadow 1.5s ease-out, transform 0.7s ease-out;
}
.neumorphic-concave {
    box-shadow: inset 6px 6px 12px #dadada, inset -6px -6px 12px #ffffff;
}
.neo-shadow-eeeeee {
    box-shadow: 12px 12px 24px #d4d4d4, -12px -12px 24px #ffffff;
}
.neo-shadow-f9f9f9 {
    box-shadow: 12px 12px 24px #e0e0e0, -12px -12px 24px #ffffff;
}
.neo-shadow-f3f3f4 {
    box-shadow: 12px 12px 24px #dadada, -12px -12px 24px #ffffff;
}
.neo-inset-slate {
    box-shadow: inset 8px 8px 16px #09325a, inset -8px -8px 16px #0d4a86;
}

.btn-premium {
    background: #0B3E70;
    color: white;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.1), -6px -6px 12px rgba(255,255,255,0.8);
    transition: all 0.2s ease;
    --neo-press-shadow-1: rgba(0,0,0,0.3);
    --neo-press-shadow-2: rgba(255,255,255,0.1);
}
.btn-premium:active {
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.1);
}
.glass-surface {
    background-color: rgba(238, 238, 238, 0.8);
    backdrop-filter: blur(12px);
}

/* Neomorphic Elastic Animations */
.hover-neo-stretch {
    transition: all 1.8s ease-in-out !important;
}

/* Restored original neo effects */
.hover-neo-stretch:hover { 
    box-shadow: 12px 12px 24px var(--neo-hover-shadow-1, #d4d4d4), -12px -12px 24px var(--neo-hover-shadow-2, #ffffff) !important; 
    transform: scale(1.01); 
}
.neo-press { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.neo-press:active { 
    transform: scale(0.98); 
    box-shadow: inset 4px 4px 8px var(--neo-press-shadow-1, rgba(0,0,0,0.15)), inset -4px -4px 8px var(--neo-press-shadow-2, rgba(255,255,255,0.7)) !important; 
}

/* The new gravity button class */
.btn-gravity {
    position: relative;
}
.btn-gravity:hover {
    transform: scale(1.03) !important;
    box-shadow: 20px 20px 40px var(--neo-hover-shadow-1, #cecece), -20px -20px 40px var(--neo-hover-shadow-2, #ffffff) !important;
    transition: transform 0.7s ease-out, box-shadow 0.7s ease-out !important;
    z-index: 10;
}
.btn-gravity:active {
    transform: scale(0.97) !important;
    box-shadow: inset 8px 8px 16px var(--neo-press-shadow-1, #d4d4d4), inset -8px -8px 16px var(--neo-press-shadow-2, #ffffff) !important;
    transition: all 0.15s ease-out !important;
}

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom Effects from Reference */

        /* Neomorphic shadows calibrated for inverted backgrounds */
        /* For #eeeeee background (previously #f9f9f9) */
        .neo-shadow-eeeeee {
            box-shadow: 12px 12px 24px #d4d4d4, -12px -12px 24px #ffffff;
        }
        /* For #f9f9f9 background (previously #eeeeee) */
        .neo-shadow-f9f9f9 {
            box-shadow: 12px 12px 24px #e0e0e0, -12px -12px 24px #ffffff;
        }
        /* For #f3f3f4 background (remains or adjusts to new surrounding context) */
        .neo-shadow-f3f3f4 {
            box-shadow: 12px 12px 24px #dadada, -12px -12px 24px #ffffff;
        }
        .neo-inset-slate {
            box-shadow: inset 8px 8px 16px #09325a, inset -8px -8px 16px #0d4a86;
        }
        .btn-premium {
            background: #0B3E70;
            color: white;
            box-shadow: 6px 6px 12px rgba(0,0,0,0.1), -6px -6px 12px rgba(255,255,255,0.8);
            transition: all 0.2s ease;
        
            --neo-press-shadow-1: rgba(0,0,0,0.3);
            --neo-press-shadow-2: rgba(255,255,255,0.1);
            }
        .btn-premium:active {
            box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.1);
        }
        .glass-surface {
            background-color: rgba(238, 238, 238, 0.8);
            backdrop-filter: blur(12px);
        }
    
        /* Neomorphic Elastic Animations */
        .hover-neo-stretch {
            transition: all 1.8s ease-in-out !important;
        }

        
        /* Restored original neo effects */
        .hover-neo-stretch:hover { box-shadow: 12px 12px 24px var(--neo-hover-shadow-1, #d4d4d4), -12px -12px 24px var(--neo-hover-shadow-2, #ffffff) !important; transform: scale(1.01); }
        .neo-press { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .neo-press:active { transform: scale(0.98); box-shadow: inset 4px 4px 8px var(--neo-press-shadow-1, rgba(0,0,0,0.15)), inset -4px -4px 8px var(--neo-press-shadow-2, rgba(255,255,255,0.7)) !important; }

        /* The new gravity button class specifically for links and buttons outside nav/footer */
        .btn-gravity {
            position: relative;
        }
        .btn-gravity:hover {
            transform: scale(1.03) !important;
            box-shadow: 20px 20px 40px var(--neo-hover-shadow-1, #cecece), -20px -20px 40px var(--neo-hover-shadow-2, #ffffff) !important;
            transition: transform 0.7s ease-out, box-shadow 0.7s ease-out !important;
            z-index: 10;
        }
        .btn-gravity:active {
            transform: scale(0.97) !important;
            box-shadow: inset 8px 8px 16px var(--neo-press-shadow-1, #d4d4d4), inset -8px -8px 16px var(--neo-press-shadow-2, #ffffff) !important;
            transition: all 0.15s ease-out !important;
        }

        
        /* Blue Button Inner Shadows */
        .bg-\[\#0B3E70\] {
            --neo-press-shadow-1: rgba(0,0,0,0.5);
            --neo-press-shadow-2: rgba(255,255,255,0.1);
        }

        /* Entrance Animations */
        .scroll-fade-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .scroll-visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        /* Hero Immediate Animation */
        .hero-fade-up {
            animation: heroFadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            opacity: 0; /* Starts hidden before animation kicks in */
        }
        @keyframes heroFadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Fabric Neomorphism Effects */
        
        .fabric-shadow-inset-init {
            box-shadow: inset 0px 0px 0px transparent, inset 0px 0px 0px transparent !important;
        }

        .fabric-shadow-init {
            box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent !important;
        }
        .neo-shadow-eeeeee {
            transition: box-shadow 1.5s ease-out, transform 0.7s ease-out; 
        }
        .neo-shadow-f9f9f9 {
            transition: box-shadow 1.5s ease-out; /* Faster timing to compensate for lower contrast on white backgrounds */
        }
        .neo-shadow-f3f3f4 {
            transition: box-shadow 4s ease-in-out, transform 0.7s ease-out; 
        }
        .neo-inset-slate, .btn-premium, button[type="submit"] {
            transition: box-shadow 2.2s ease-out, transform 0.7s ease-out;  /* Slightly faster for the form so it doesn't feel too slow */
        }

    
        button[type="submit"] {
            --neo-hover-shadow-1: #072848;
            --neo-hover-shadow-2: #0f5498;
        }

        /* Botón Especial: Gravedad y Tela */
        .bg-surface-container neo-shadow-eeeeee hover-neo-stretch neo-press btn-gravity {
            background-color: #eeeeee;
            box-shadow: 12px 12px 24px #d4d4d4, -12px -12px 24px #ffffff;
            transition: all 0.7s ease-out; /* Roll over equilibrado */
            transform: scale(1);
            position: relative;
        }
        
        .bg-surface-container neo-shadow-eeeeee hover-neo-stretch neo-press btn-gravity:hover {
            transform: scale(1.03);
            box-shadow: 20px 20px 40px #cecece, -20px -20px 40px #ffffff;
        }

        .bg-surface-container neo-shadow-eeeeee hover-neo-stretch neo-press btn-gravity:active {
            transform: scale(0.97);
            transition: all 0.15s ease-out; /* Click sigue siendo instantáneo */
            box-shadow: inset 8px 8px 16px #d4d4d4, inset -8px -8px 16px #ffffff !important;
        }
    

/* Efecto de sombra para Lupa AJAX */
.dgwt-wcas-search-wrapper, .aws-container, .is-search-form, .widget_search, .ajax-search-form {
    border-radius: 16px !important;
    transition: box-shadow 3s ease-in-out, transform 0.7s ease-out !important;
}
.dgwt-wcas-search-wrapper:hover, .aws-container:hover, .is-search-form:hover, .widget_search:hover, .ajax-search-form:hover {
    box-shadow: 8px 8px 16px #cacaca, -8px -8px 16px #ffffff !important;
    transform: scale(1.02);
}
.dgwt-wcas-search-wrapper .dgwt-wcas-sf-wrapp input[type="search"] {
    border-radius: 16px !important;
}

/* Lupa extra CSS */
input[type="search"], .dgwt-wcas-search-input, .search-field {
    border-radius: 16px !important;
    transition: box-shadow 3s ease-in-out, transform 0.7s ease-out !important;
}
input[type="search"]:hover, .dgwt-wcas-search-input:hover, .search-field:hover {
    box-shadow: 8px 8px 16px #cacaca, -8px -8px 16px #ffffff !important;
}

/* Animación de entrada automática para Lupa AJAX */
@keyframes lupaEntrance {
    0% { box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent !important; }
    100% { box-shadow: 8px 8px 16px #cacaca, -8px -8px 16px #ffffff !important; }
}

input[type="search"], .dgwt-wcas-search-input, .search-field, .dgwt-wcas-search-wrapper, .aws-container, .is-search-form, .widget_search, .ajax-search-form {
    border-radius: 16px !important;
    animation: lupaEntrance 3s ease-in-out forwards !important;
    transition: transform 0.7s ease-out !important; /* Keep hover transform */
}

input[type="search"]:hover, .dgwt-wcas-search-input:hover, .search-field:hover, .dgwt-wcas-search-wrapper:hover, .aws-container:hover, .is-search-form:hover, .widget_search:hover, .ajax-search-form:hover {
    box-shadow: 12px 12px 24px #cacaca, -12px -12px 24px #ffffff !important;
    transform: scale(1.02);
}

/* Custom class for the f3f3f4 hero tags */
.neo-convex-f3f3f4 {
    background: #f3f3f4 !important;
    box-shadow: 4px 4px 10px #d4d4d4, -4px -4px 10px #ffffff !important;
    border: none !important;
    transition: box-shadow 1.5s ease-out, transform 0.7s ease-out;
}

/* Accordion Animation */
details[open] summary ~ * {
    animation: accordion-sweep 0.3s ease-out forwards;
}

@keyframes accordion-sweep {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Neumorphic open state for accordions */
details[open] > .summary-neo {
    box-shadow: inset 6px 6px 12px #dadada, inset -6px -6px 12px #ffffff !important;
    background-color: #eeeeee !important;
}

/* Premium Blue Neumorphic Button */
.btn-premium-neo {
    background: #0B3E70 !important;
    color: white !important;
    box-shadow: 6px 6px 12px #dadada, -6px -6px 12px #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    border: none !important;
}

.btn-premium-neo:hover {
    transform: scale(1.02);
}

.btn-premium-neo:active {
    transform: scale(0.98);
    box-shadow: inset 6px 6px 12px #072a4c, inset -6px -6px 12px #0f5294 !important;
}

/* Custom Neumorphic Pagination */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul,
.facetwp-pager ul.page-numbers {
    display: flex !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul li,
.facetwp-pager ul.page-numbers li {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    float: none !important;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
.woocommerce nav.woocommerce-pagination ul li .page-numbers,
.facetwp-pager .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    background: #eeeeee !important;
    color: #333333 !important;
    box-shadow: 4px 4px 10px #d4d4d4, -4px -4px 10px #ffffff !important;
    margin: 0 !important;
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers:hover,
.facetwp-pager .page-numbers:hover {
    background: #e3e2e2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 6px 6px 14px #d4d4d4, -6px -6px 14px #ffffff !important;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.facetwp-pager .page-numbers.current {
    background: #0B3E70 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* ==========================================================================
   BLOG / PROSE CONTENT STYLES
   Fallback if Tailwind Typography plugin is not present
   ========================================================================== */
.prose {
    color: #42474f;
    line-height: 1.75;
}
.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #0B3E70;
    font-weight: 800;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3;
}
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.35rem; }
.prose a {
    color: #0B3E70;
    text-decoration: none;
    font-weight: 700;
}
.prose a:hover {
    text-decoration: underline;
}
.prose strong {
    color: #0a3159;
    font-weight: 700;
}
.prose ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
.prose ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.prose blockquote {
    font-style: italic;
    border-left: 4px solid #0B3E70;
    background-color: #e0e5ec;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.prose img {
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   CUSTOM TYPOGRAPHY & FOOTER FIXES
   (Manually mapped from tailwind.config)
   ========================================================================== */
.font-body-sm {
    font-family: "Inter", sans-serif;
}
.text-body-sm {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}
.font-label-caps {
    font-family: "Inter", sans-serif;
}
.text-label-caps {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.15em;
    font-weight: 600;
}
.text-white\/50 {
    color: rgba(255, 255, 255, 0.5);
}
.text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
}
.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}
.text-\[\#0B3E70\] {
    color: #0B3E70;
}
.bg-surface-container-low {
    background-color: #f3f3f4;
}

/* Scrollbar personalizado para lista de colores */
.casafho-custom-scroll::-webkit-scrollbar {
    width: 4px;
}
.casafho-custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
.casafho-custom-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}
.casafho-custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #0B3E70; 
}