/* ============================================================
   3D EFFECTS - Blue Fish
   Potencia visual con profundidad, perspectiva y movimiento
   ============================================================ */

:root {
   --btn-color: #386b8f;
   --text-color: hsla(210, 50%, 85%, 1);
   --shadow-color: hsla(210, 40%, 52%, .4);
}

/* ---- Perspective global para cards ---- */
.product-card,
.our_fishs_box,
.product-card-simple,
.producto-card {
    perspective: 1200px;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1),
                box-shadow 0.4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.product-card:hover,
.our_fishs_box:hover,
.product-card-simple:hover {
    transform: perspective(1200px) rotateY(-2deg) translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.25),
        0 8px 16px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* Efecto 3D con luz especular */
.product-card::before,
.our_fishs_box::before,
.product-card-simple::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.25) 0%,
        transparent 50%,
        rgba(0,0,0,0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.product-card:hover::before,
.our_fishs_box:hover::before,
.product-card-simple:hover::before {
    opacity: 1;
}

/* ---- 3D Imágenes ---- */
.product-card img,
.our_fishs_box img,
.product-card-simple img,
.product-image img,
.carousel-product-image,
.combos-product-image,
.masvendidos-product-image {
    transition: transform 0.5s cubic-bezier(.4,0,.2,1),
                filter 0.4s ease;
    will-change: transform;
}

.product-card:hover img,
.product-card-simple:hover img,
.product-image:hover img {
    transform: perspective(800px) rotateY(3deg) rotateX(2deg) scale(1.08);
    filter: brightness(1.05) contrast(1.05);
}

.our_fishs_box:hover img {
    transform: perspective(800px) rotateY(3deg) scale(1.1);
}

/* ---- 3D Botones (Uiverse Layered) ---- */
.read_more,
.btn-add-to-cart,
.send_btn,
.btn-calcular,
.btn-limpiar,
button.btn,
.add-to-cart-btn,
.add-to-cart-btn-ofertas,
.add-to-cart-btn-combo,
.category-btn,
.reload-btn,
.follow-button,
.filter-btn {
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    border-radius: 100em;
    background-color: var(--btn-color);
    box-shadow:
        -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
        0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
    font-family: "Source Code Pro", monospace;
    letter-spacing: 0.5px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-color);
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transform: none;
    transition: none;
}

/* Inner gradient surface */
.read_more::before,
.btn-add-to-cart::before,
.send_btn::before,
.btn-calcular::before,
.btn-limpiar::before,
button.btn::before,
.add-to-cart-btn::before,
.add-to-cart-btn-ofertas::before,
.add-to-cart-btn-combo::before,
.category-btn::before,
.reload-btn::before,
.follow-button::before,
.filter-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: calc(100% - 0.07em);
    height: calc(100% - 0.07em);
    top: 0.035em;
    left: 0.035em;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgba(160, 200, 230, 1), rgba(80, 145, 190, 1));
    transition: box-shadow 300ms ease, clip-path 250ms ease, transform 250ms ease;
    will-change: box-shadow, clip-path, transform;
    overflow: clip;
    clip-path: inset(0 0 0 0 round 100em);
    box-shadow:
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

/* Gradient overlay */
.read_more::after,
.btn-add-to-cart::after,
.send_btn::after,
.btn-calcular::after,
.btn-limpiar::after,
button.btn::after,
.add-to-cart-btn::after,
.add-to-cart-btn-ofertas::after,
.add-to-cart-btn-combo::after,
.category-btn::after,
.reload-btn::after,
.follow-button::after,
.filter-btn::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg, rgba(5, 5, 5, 0.5), transparent 20%, transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.25;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Hover: inner surface pressed */
.read_more:hover::before,
.btn-add-to-cart:hover::before,
.send_btn:hover::before,
.btn-calcular:hover::before,
.btn-limpiar:hover::before,
button.btn:hover::before,
.add-to-cart-btn:hover::before,
.add-to-cart-btn-ofertas:hover::before,
.add-to-cart-btn-combo:hover::before,
.category-btn:hover::before,
.reload-btn:hover::before,
.follow-button:hover::before,
.filter-btn:hover::before {
    clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em);
    box-shadow:
        0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
        -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
        0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
        0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
        0 0 0 0 inset rgba(255, 255, 255, 1),
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

/* Hover: text scale */
.read_more:hover,
.btn-add-to-cart:hover,
.send_btn:hover,
.btn-calcular:hover,
.btn-limpiar:hover,
button.btn:hover,
.add-to-cart-btn:hover,
.add-to-cart-btn-ofertas:hover,
.add-to-cart-btn-combo:hover,
.category-btn:hover,
.reload-btn:hover,
.follow-button:hover,
.filter-btn:hover {
    transform: scale(1);
}
.read_more:hover > *,
.btn-add-to-cart:hover > *,
.send_btn:hover > *,
.btn-calcular:hover > *,
.btn-limpiar:hover > *,
button.btn:hover > *,
.add-to-cart-btn:hover > *,
.add-to-cart-btn-ofertas:hover > *,
.add-to-cart-btn-combo:hover > *,
.category-btn:hover > *,
.reload-btn:hover > *,
.follow-button:hover > *,
.filter-btn:hover > * {
    transform: scale(0.975);
}

/* Active: inner surface scale */
.read_more:active::before,
.btn-add-to-cart:active::before,
.send_btn:active::before,
.btn-calcular:active::before,
.btn-limpiar:active::before,
button.btn:active::before,
.add-to-cart-btn:active::before,
.add-to-cart-btn-ofertas:active::before,
.add-to-cart-btn-combo:active::before,
.category-btn:active::before,
.reload-btn:active::before,
.follow-button:active::before,
.filter-btn:active::before {
    transform: scale(0.975);
}

/* Ensure child elements are above pseudo-elements */
.read_more > *,
.btn-add-to-cart > *,
.send_btn > *,
.btn-calcular > *,
.btn-limpiar > *,
button.btn > *,
.add-to-cart-btn > *,
.add-to-cart-btn-ofertas > *,
.add-to-cart-btn-combo > *,
.category-btn > *,
.reload-btn > *,
.follow-button > *,
.filter-btn > * {
    position: relative;
    z-index: 4;
    color: var(--text-color);
}

/* ---- 3D Navegación Carrusel ---- */
.owl-nav button {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease !important;
    transform-style: preserve-3d !important;
}

.owl-nav button:hover {
    transform: scale(1.15) translateZ(10px) !important;
    box-shadow:
        0 8px 20px rgba(74, 134, 175, 0.4),
        0 0 0 2px rgba(74, 134, 175, 0.2) !important;
}

.owl-nav button:active {
    transform: scale(0.95) translateZ(0) !important;
}

/* ---- 3D Social Sidebar ---- */
.social ul li a {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease,
                padding 0.25s ease !important;
    transform-style: preserve-3d;
}

.social ul li a:hover {
    transform: translateX(-18px) scale(1.05) !important;
    box-shadow:
        0 16px 32px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.1) inset !important;
}

.social-buttons a {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease !important;
    transform-style: preserve-3d;
}

.social-buttons a:hover {
    transform: scale(1.15) translateZ(8px) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.1) !important;
}

/* ---- 3D Navigation Items ---- */
.index-navigation .navbar-nav .nav-item,
.index-navigation .categories-menu .nav-item {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease,
                background 0.3s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.index-navigation .navbar-nav .nav-item:hover,
.index-navigation .categories-menu .nav-item:hover {
    transform: perspective(800px) rotateX(2deg) translateY(-3px) scale(1.03);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.2),
        0 4px 12px rgba(0,0,0,0.1),
        0 0 0 1px rgba(255,255,255,0.15) inset;
}

.index-navigation .navbar-nav .nav-item.active,
.index-navigation .categories-menu .nav-item.active {
    transform: perspective(800px) translateZ(5px);
    box-shadow:
        0 12px 35px rgba(106, 169, 176, 0.5),
        0 4px 12px rgba(106, 169, 176, 0.3) !important;
}

/* ---- 3D Cart Icon ---- */
.cart-icon {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease !important;
}

.cart-icon:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255,255,255,0.1) inset !important;
}

/* ---- 3D Search Container ---- */
.search-container {
    perspective: 600px;
}

.search-container .search-icon {
    transition: transform 0.3s cubic-bezier(.4,0,.2,1),
                box-shadow 0.3s ease;
}

.search-container .search-icon:hover {
    transform: scale(1.15) translateZ(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ---- 3D Logo ---- */
.logo img {
    transition: transform 0.4s cubic-bezier(.4,0,.2,1),
                filter 0.3s ease;
}

.logo img:hover {
    transform: perspective(600px) rotateY(-5deg) scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
}

/* ---- Floating 3D en carruseles ---- */
.owl-item .item {
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
}

.owl-item.active .item {
    animation: floatIn 0.6s cubic-bezier(.4,0,.2,1) both;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: perspective(800px) rotateY(5deg) translateZ(-30px) translateY(20px);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateY(0) translateZ(0) translateY(0);
    }
}

/* ---- Depth dividers ---- */
.nav-divider {
    position: relative;
    box-shadow:
        1px 0 0 rgba(255,255,255,0.2),
        -1px 0 0 rgba(0,0,0,0.1);
}

/* ---- Product card bottom bar 3D ---- */
.our_fishs_box > div[style*="background: #A7B69A"],
.product-card > div[style*="background: #A7B69A"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover > div[style*="background: #A7B69A"],
.our_fishs_box:hover > div[style*="background: #A7B69A"] {
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

/* ---- Loading spinner 3D ---- */
.spinner-border {
    animation: spin3d 0.8s cubic-bezier(.6,0,.4,1) infinite !important;
}

@keyframes spin3d {
    from { transform: perspective(400px) rotateY(0deg) rotateX(10deg); }
    to { transform: perspective(400px) rotateY(360deg) rotateX(10deg); }
}

/* ---- Responsive: reducir 3D en móvil para rendimiento ---- */
@media (max-width: 768px) {
}

/* ---- 3D Header/Appbar ---- */
.header {
    position: relative;
    z-index: 10;
    background: linear-gradient(145deg, #5a9fc9, #3a7aa8) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        0 2px 8px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    pointer-events: none;
    z-index: 1;
}

    .product-card:hover img,
    .product-card-simple:hover img,
    .product-image:hover img {
        transform: scale(1.05);
    }

    .index-navigation .navbar-nav .nav-item:hover,
    .index-navigation .categories-menu .nav-item:hover {
        transform: translateY(-2px);
    }

    .owl-item.active .item {
        animation: none;
    }

    .logo img:hover {
        transform: scale(1.03);
    }
}

/* ---- Optimizaciones táctiles móvil ---- */
@media (pointer: coarse) {
    .read_more,
    .btn-add-to-cart,
    .send_btn,
    .btn-calcular,
    .btn-limpiar,
    button.btn,
    .add-to-cart-btn,
    .add-to-cart-btn-ofertas,
    .add-to-cart-btn-combo,
    .category-btn,
    .reload-btn,
    .follow-button,
    .filter-btn {
        /* Eliminar efecto hover en táctil */
        -webkit-tap-highlight-color: transparent;
    }
    /* En táctil el hover se muestra al tocar, pero sin sombras pesadas */
    .category-btn:hover::before,
    .reload-btn:hover::before,
    .add-to-cart-btn:hover::before,
.filter-btn:hover::before {
        box-shadow:
            0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.5),
            0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.1);
    }
}

/* ---- Botones más grandes en pantallas pequeñas ---- */
@media (max-width: 575.98px) {
    .category-btn,
    .reload-btn,
    .add-to-cart-btn,
    .add-to-cart-btn-ofertas,
    .add-to-cart-btn-combo,
    .filter-btn,
    .btn-calcular,
    .btn-limpiar {
        font-size: 13px;
    }
}