/* ==========================================================================
   Home Page: Store Section
   Estructura: Base Global -> Desktop -> Móvil
   ========================================================================== */

/* =========================================
   1. ESTILOS BASE Y GLOBALES
   ========================================= */
.store-section {
    width: 100%;
    background-color: #000000;
    overflow: hidden;
}

.store-layout-wrapper {
    display: flex;
    flex-direction: column; 
    position: relative; 
    width: 100%;
}

/* Columna Izquierda (Negra) */
.store-content-col {
    background-color: #000000;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px;
}

.store-text-inner {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

/* Título y Bolsa */
.store-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500; /* Medium */
    font-size: 88px;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    gap: 20px; 
    line-height: 1;
}

.store-bag-icon {
    width: 88px; 
    height: 88px;
    object-fit: contain;
}

/* Descripción */
.store-desc {
    font-family: 'General Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 50px 0;
    color: #f5f5f5; 
    max-width: 400px;
}

/* Botón Shop */
.btn-shop {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 0 40px;
    height: 64px;
    border: 1px solid currentColor; 
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600; /* SemiBold */
    font-size: 24px;
    color: #ffffff;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: fit-content;
}

.btn-shop:hover {
    background-color: #ffffff;
    color: #000000; 
}

/* Columna Derecha (Imagen) */
.store-image-col {
    width: 100%;
}

.store-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   SELLO GIRATORIO Y LOGO ESTÁTICO
   ========================================= */
.store-rotating-badge {
    position: absolute;
    z-index: 10;
    width: 160px; 
    height: 160px;
    
    /* El truco de magia: Invertirá su color dependiendo del fondo que toque */
    mix-blend-mode: difference; 
}

/* Las letras que giran */
.spin-animation {
    width: 100%;
    height: 100%;
    animation: spin 15s linear infinite; 
    display: block;
}

/* La 'D' estática en el centro exacto */
.static-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Anclaje perfecto al centro */
    width: 45px; /* Ajusta este valor si tu "D" se ve muy grande o pequeña dentro del círculo */
    height: auto;
    z-index: 2; /* Nos aseguramos de que esté por encima del SVG giratorio */
    pointer-events: none; /* Evita que estorbe si hay algún hover */
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* =========================================
   2. DESKTOP VIEW (>= 1024px)
   ========================================= */
@media (min-width: 1024px) {
    .store-layout-wrapper {
        flex-direction: row;
        height: 700px; 
    }

    .store-content-col {
        width: 45%; 
        padding: 0 5%;
        align-items: flex-start;
    }

    .store-text-inner {
        margin: 0; 
    }

    .store-image-col {
        width: 55%; 
    }

    .store-rotating-badge {
        left: 45%; 
        bottom: 15%; 
        transform: translateX(-50%); 
    }
}

/* =========================================
   3. MOBILE VIEW (< 1024px)
   ========================================= */
@media (max-width: 1023px) {
    /* La columna negra ya se apila arriba por defecto, solo ajustamos padding */
    .store-content-col {
        padding: 60px 20px;
    }

    .store-title {
        font-size: 64px; 
    }

    .store-bag-icon {
        width: 64px;
        height: 64px;
    }

    .store-desc {
        font-size: 16px; /* Mantenemos los 16px solicitados */
    }

    /* Ajuste exacto del botón */
    .btn-shop {
        font-size: 20px; 
        width: 117px; /* Ancho fijo solicitado */
        height: 56px; /* Alto fijo solicitado */
        padding: 0; /* Quitamos el padding base para respetar el width fijo */
        justify-content: center; /* Centramos el texto y el SVG dentro del botón */
    }

    /* Imagen inferior */
    .store-image-col {
        height: 402px; /* Alto exacto solicitado */
    }

    /* Posicionamiento milimétrico del logo giratorio */
    .store-rotating-badge {
        top: auto;
        bottom: 402px; /* Lo apoyamos exactamente en la línea donde empieza la imagen */
        right: 20px; /* Margen derecho */
        transform: translateY(50%); /* Lo desplazamos hacia abajo exactamente la mitad de su tamaño */
        width: 140.25px; 
        height: 140.25px;
    }
    
    /* Ajuste proporcional de la 'D' para el nuevo tamaño del badge */
    .static-center-logo {
        width: 38px;
    }
}