/* ==========================================================================
   CABECERA EDITORIAL DE TIENDA ONLINE · MARCA DAMA BLANCA (ALTA GAMA)
   Diseño de Escenario Editorial, Escaparate de Producto y Filtros Interactivos
   ========================================================================== */
.db-shop-main-wrap {
    width: 100%;
    max-width: 100vw;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-x: clip;
}
.i2-shop-section {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* ==========================================================================
   ANIMACIONES SUAVES EDITORIALES (ENTRADA Y SCROLL REVEAL)
   ========================================================================== */
@keyframes dbHeroFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dbHeroImgReveal {
    from {
        opacity: 0;
        transform: scale(0.98) translateX(14px);
    }
    to {
        opacity: 0.98;
        transform: scale(1) translateX(0);
    }
}

/* 1. ESCENARIO PRINCIPAL DE TIENDA (EDITORIAL ALTA GAMA - ANCHO COMPLETO) */
.db-shop-brand-hero {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 450px;
    background-color: #f4f4f4;
    border-radius: 0 !important;
    border: none;
    border-bottom: 1px solid rgba(18, 18, 16, 0.07);
    padding: clamp(3.5rem, 5.5vw, 5.5rem) clamp(2rem, 5.5vw, 6.5rem);
    margin-top: var(--i2-header-h, 140px);
    margin-bottom: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    animation: dbHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Imagen de producto a gran tamaño en su nitidez y luminosidad natural */
.db-shop-brand-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://salinasdecadiz.com/wp-content/uploads/2026/09/pack_damablanca_sal_marina_en_sanlucar_salinas_de_cadiz.webp');
    background-repeat: no-repeat;
    background-position: right 0% center;
    background-size: min(1150px, 88%) auto;
    opacity: 0.98;
    pointer-events: none;
    z-index: 1;
    animation: dbHeroImgReveal 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

/* Difuminado editorial lateral limpio para garantizar 100% legibilidad del texto */
.db-shop-brand-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f4f4f4 0%, #f4f4f4 35%, rgba(244, 244, 244, 0.92) 50%, rgba(244, 244, 244, 0) 74%);
    pointer-events: none;
    z-index: 1;
}

.db-shop-hero-text {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.db-shop-nav-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(18, 18, 16, 0.45);
    margin-bottom: 1.1rem;
    animation: dbHeroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}
.db-shop-nav-crumbs a {
    color: rgba(18, 18, 16, 0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}
.db-shop-nav-crumbs a:hover {
    color: #121210;
}
.db-shop-nav-crumbs .sep {
    opacity: 0.35;
    color: rgba(18, 18, 16, 0.35);
}
.db-shop-nav-crumbs .current {
    color: #121210;
    font-weight: 500;
}

.db-shop-eyebrow {
    display: block;
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(18, 18, 16, 0.5);
    margin-bottom: 0.5rem;
    animation: dbHeroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s backwards;
}

.db-shop-title {
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: clamp(2rem, 2.8vw, 2.75rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #121210;
    margin: 0 0 0.85rem 0;
    animation: dbHeroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards;
}

.db-shop-subtitle {
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: clamp(0.95rem, 1.08vw, 1.08rem);
    font-weight: 400;
    line-height: 1.62;
    color: #2b2b2b;
    margin: 0;
    animation: dbHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.42s backwards;
}

.db-shop-section-header {
    width: 100%;
    margin-bottom: clamp(2rem, 3.8vw, 3.2rem);
    text-align: left;
}
.db-shop-catalog-h2 {
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: var(--i2-fs-display);
    font-weight: 500;
    line-height: var(--i2-lh-display);
    letter-spacing: -0.025em;
    color: #121210;
    margin: 0 0 0.5rem 0;
}
.db-shop-catalog-sub {
    font-family: 'Object Sans', 'ObjectSans', sans-serif;
    font-size: clamp(0.95rem, 1.08vw, 1.08rem);
    font-weight: 400;
    line-height: 1.62;
    color: #2b2b2b;
    margin: 0;
    max-width: 680px;
}
.i2-pack-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.i2-pack-title-link:hover {
    color: #0d1238;
}
.i2-pack-img-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ==========================================================================
   SISTEMA DE ANIMACIÓN AL SCROLL (SUAVE, ELEGANTE Y FLUIDO)
   ========================================================================== */
.i2-anim-slide-up,
.i2-anim-from-left,
.i2-anim-from-right,
.i2-anim-scale-up,
.i2-anim-tilt-left,
.i2-anim-tilt-right {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.i2-anim-slide-up {
    transform: translateY(26px);
}
.i2-anim-from-left {
    transform: translateX(-28px);
}
.i2-anim-from-right {
    transform: translateX(28px);
}
.i2-anim-scale-up {
    transform: translateY(16px);
}
.db-shop-main-wrap .i2-pack-banner {
    margin-bottom: 0 !important;
}
.i2-anim-tilt-left {
    transform: translateY(20px) rotate(-1deg);
}
.i2-anim-tilt-right {
    transform: translateY(20px) rotate(1deg);
}

/* Estado activo cuando entra en el viewport */
.is-visible.i2-anim-slide-up,
.is-visible.i2-anim-from-left,
.is-visible.i2-anim-from-right,
.is-visible.i2-anim-scale-up,
.is-visible.i2-anim-tilt-left,
.is-visible.i2-anim-tilt-right,
.is-visible .i2-anim-slide-up,
.is-visible .i2-anim-from-left,
.is-visible .i2-anim-from-right,
.is-visible .i2-anim-scale-up,
.is-visible .i2-anim-tilt-left,
.is-visible .i2-anim-tilt-right {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

/* Delays escalonados */
[data-i2-delay="1"] { transition-delay: 0.1s; }
[data-i2-delay="2"] { transition-delay: 0.2s; }
[data-i2-delay="3"] { transition-delay: 0.3s; }

/* Micro-interacciones suaves en hover */
.i2-product-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.i2-prod-img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    .i2-product-card:hover {
        transform: translateY(-4px);
    }
    .i2-product-card:hover .i2-prod-img {
        transform: scale(1.03);
    }
}

/* Tarjeta de Certificación Ecológica Oficial (Columna 2) */
.i2-cert-seal-wrap {
    width: 100%;
    height: clamp(200px, 18vw, 260px);
    overflow: hidden;
    margin-bottom: 1.6rem;
    background: #ffffff;
    border: 1px solid rgba(18, 18, 16, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.i2-sost-col:hover .i2-cert-seal-wrap {
    transform: translateY(-3px);
    border-color: rgba(18, 18, 16, 0.16);
    box-shadow: 0 8px 24px rgba(18, 18, 16, 0.04);
}
.i2-cert-seal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(2.4);
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.i2-sost-col:hover .i2-cert-seal-img {
    transform: scale(2.52);
}

@media (max-width: 960px) {
    .db-shop-brand-hero {
        padding-top: clamp(2.2rem, 4vw, 3rem);
        padding-bottom: clamp(190px, 36vw, 240px);
        margin-top: var(--i2-header-h, 68px);
        margin-bottom: 0;
        padding-left: clamp(2rem, 4.5vw, 4rem);
        padding-right: clamp(2rem, 4.5vw, 4rem);
    }
    .db-shop-brand-hero::before {
        background-position: center bottom 1.2rem;
        background-size: min(380px, 80%) auto;
        opacity: 0.98;
    }
    .db-shop-brand-hero::after {
        background: linear-gradient(180deg, #f4f4f4 0%, #f4f4f4 52%, rgba(244, 244, 244, 0.92) 68%, rgba(244, 244, 244, 0) 100%);
    }
    .db-shop-hero-text {
        max-width: 100%;
    }
}

/* ==========================================================================
   OPTIMIZACIONES EXCLUSIVAS PARA MÓVIL Y TABLET (MAX-WIDTH: 768px)
   Alineación de márgenes (eliminación del serrucho), jerarquía tipográfica y UX
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. MÁRGENES Y ANCHOS UNIFICADOS (Elimina los 56px laterales forzados) */
    .db-shop-brand-hero {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 2rem !important;
        padding-bottom: 200px !important;
        margin-top: var(--i2-header-h, 64px) !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .db-shop-main-wrap .i2-pack-banner,
    .i2-pack-banner {
        padding: 2.5rem 24px !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap .i2-shop-sostenibilidad,
    .i2-shop-sostenibilidad {
        padding: 3.25rem 8px !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap .i2-section-valores,
    .i2-section-valores {
        padding: 3.25rem 8px !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap .i2-shop-horeca,
    .i2-shop-horeca {
        padding: 3.25rem 8px !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap .i2-horeca-box,
    .i2-horeca-box {
        padding: 1.75rem 20px !important;
    }
    .db-shop-main-wrap .i2-faq-section,
    .i2-faq-section {
        padding: 3.25rem 8px !important;
        margin-bottom: 0 !important;
    }
    .db-shop-main-wrap .i2-shop-sostenibilidad + .i2-section-valores,
    .db-shop-main-wrap .i2-section-valores + .i2-shop-horeca,
    .db-shop-main-wrap .i2-shop-horeca + .i2-faq-section {
        padding-top: 0 !important;
    }

    /* 2. JERARQUÍA TIPOGRÁFICA MÓVIL ARMONIOSA */
    .db-shop-eyebrow {
        font-size: 0.66rem !important;
        letter-spacing: 0.12em !important;
        margin-bottom: 0.4rem !important;
    }
    .db-shop-title {
        font-size: clamp(1.55rem, 5.2vw, 1.85rem) !important;
        font-weight: 600 !important;
        line-height: 1.16 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 0.65rem !important;
    }
    .db-shop-subtitle {
        font-size: 0.92rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    .db-shop-section-header {
        margin-bottom: 1.8rem !important;
    }
    .db-shop-catalog-h2 {
        font-size: clamp(1.45rem, 5vw, 1.75rem) !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 0.35rem !important;
    }
    .db-shop-catalog-sub {
        font-size: 0.92rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    /* 3. PACK BANNER EN MÓVIL */
    .i2-pack-title {
        font-size: clamp(1.15rem, 4.2vw, 1.35rem) !important;
        font-weight: 600 !important;
        -webkit-text-stroke: 0.2px #111111 !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0.5rem !important;
    }
    .i2-pack-desc,
    .i2-pack-specs-body {
        font-size: 0.88rem !important;
        line-height: 1.52 !important;
        margin-bottom: 0.85rem !important;
    }
    .i2-pack-pricing-block {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
    }

    /* 4. SOSTENIBILIDAD EN MÓVIL */
    .i2-sost-header h2 {
        font-size: clamp(1.45rem, 5vw, 1.75rem) !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
    }
    .i2-sost-title {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
    }
    .i2-sost-text {
        font-size: 0.92rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    .i2-cert-seal-wrap {
        height: 180px !important;
    }
    .i2-cert-seal-img {
        transform: scale(1.65) !important;
    }

    /* 5. HORECA EN MÓVIL */
    .i2-horeca-title {
        font-size: clamp(1.45rem, 5vw, 1.75rem) !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 0.5rem !important;
    }
    .i2-horeca-desc {
        font-size: 0.92rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    .i2-horeca-contact-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* 6. FAQS EN MÓVIL */
    .i2-faq-header {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1.2rem !important;
        gap: 0.9rem !important;
    }
    .i2-faq-title {
        font-size: clamp(1.45rem, 5vw, 1.75rem) !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 0.45rem !important;
    }
    .i2-faq-subtitle {
        font-size: 0.92rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    .i2-faq-summary {
        padding: 1.15rem 0 !important;
    }
    .i2-faq-q-text {
        font-size: 1.02rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        padding-right: 1rem !important;
    }
    .i2-faq-content,
    .i2-faq-content p {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        padding-bottom: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .db-shop-brand-hero {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 1.75rem !important;
        padding-bottom: 190px !important;
    }
    .db-shop-title {
        font-size: clamp(1.55rem, 5.2vw, 1.85rem) !important;
        line-height: 1.16 !important;
    }
    .db-shop-subtitle {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }
    .i2-shop-grid-2x2 {
        row-gap: 3.25rem !important;
        margin-bottom: 3.25rem !important;
    }
    .i2-product-card {
        gap: 12px !important;
    }
    .i2-prod-img-wrap {
        flex: 0 0 118px !important;
        width: 118px !important;
        height: 118px !important;
        max-width: 118px !important;
    }
    .i2-prod-title {
        font-size: clamp(1.15rem, 4.2vw, 1.35rem) !important;
        font-weight: 600 !important;
        -webkit-text-stroke: 0.2px #111111 !important;
        line-height: 1.22 !important;
        margin-bottom: 0.25rem !important;
    }
    .i2-prod-desc {
        font-size: 0.88rem !important;
        line-height: 1.52 !important;
        margin-bottom: 0.35rem !important;
    }
    .i2-prod-price {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }
    .i2-prod-form {
        margin-top: 0.5rem !important;
    }
    .i2-pill-btn-wrap {
        padding: 0.34rem 0.9rem 0.34rem 0.75rem !important;
        gap: 0.55rem !important;
        max-width: 100% !important;
    }
    .i2-pill-qty-num {
        font-size: 0.82rem !important;
        min-width: 12px !important;
    }
    .i2-pill-submit-btn {
        font-size: 0.76rem !important;
    }
    .i2-prod-price-variants {
        gap: 0.65rem !important;
    }
    .i2-variant-opt-btn .i2-variant-price {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 360px) {
    .i2-prod-img-wrap {
        flex: 0 0 95px !important;
        width: 95px !important;
        height: 95px !important;
        max-width: 95px !important;
    }
    .i2-product-card {
        gap: 10px !important;
    }
    .i2-prod-title {
        font-size: 0.98rem !important;
    }
    .i2-prod-desc {
        font-size: 0.78rem !important;
    }
    .i2-pill-btn-wrap {
        padding: 0.3rem 0.7rem 0.3rem 0.55rem !important;
    }
    .i2-pill-submit-btn {
        font-size: 0.68rem !important;
    }
}