/* ===========================
   Be You - FIXES & LOGO SETUP
   Correcciones y configuración del logo
   =========================== */

/* FIX 1: Corrección de superposición de imagen en sección Estilo Be You */
.section.accesorios {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.accessories-slider {
  position: relative;
  overflow: visible !important;
  z-index: 2;
}

.slider-btn {
  z-index: 10;
}

.estilo-beyou {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.estilo-visual {
  position: relative;
  z-index: 1;
}

.estilo-image-container {
  position: relative;
  padding: 2rem;
  z-index: 1;
  overflow: hidden;
  contain: layout;
}

.estilo-image {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  max-height: 500px;
}

/* Asegurar que el slider no se desborde */
.accessory-card {
  position: relative;
  z-index: 1;
}

/* ===========================
   INSTRUCCIONES PARA EL LOGO PNG
   =========================== */

/* 
INSTRUCCIONES PARA AGREGAR TU LOGO PNG:

1. NOMBRE DEL ARCHIVO:
   - Nombra tu archivo: "beyou-logo.png"
   
2. UBICACIÓN:
   - Coloca el archivo en la MISMA carpeta donde están index.html, styles.css, etc.
   
3. ESPECIFICACIONES RECOMENDADAS:
   - Dimensiones ideales: 240px de ancho x 80px de alto (proporción 3:1)
   - Resolución: 2x para pantallas retina (480px x 160px guardado como 240x80)
   - Fondo: Transparente (PNG con alpha channel)
   - Color: Preferiblemente en color dorado (#D4A574) o versión que combine con la paleta
   
4. UBICACIONES EN EL SITIO DONDE APARECERÁ:
   - Navegación superior (120px x 40px)
   - Hero principal (200px x 80px)
   - Footer (120px x 40px)
   
5. PARA IMPLEMENTARLO:
   Una vez que tengas el archivo "beyou-logo.png" en la carpeta,
   agrega este código CSS adicional:
*/

/* Logo PNG Implementation */
.nav-logo img,
.hero-logo img,
.footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.nav-logo {
  width: 120px;
  height: 40px;
}

.hero-logo {
  width: 200px;
  height: 80px;
  margin: 0 auto;
}

.footer-logo {
  width: 120px;
  height: 40px;
}

/* Si prefieres usar el logo como background */
.logo-with-bg {
  background-image: url('beyou-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Animación para el logo en hover */
.nav-logo:hover img,
.hero-logo:hover img,
.footer-logo:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(212, 165, 116, 0.3));
}

/* ===========================
   CÓDIGO HTML A REEMPLAZAR
   =========================== */

/* 
PARA IMPLEMENTAR EL LOGO PNG, BUSCA Y REEMPLAZA EN index.html:

1. EN LA NAVEGACIÓN (línea ~47):
   BUSCAR:
   <div class="nav-logo">
       <svg viewBox="0 0 120 40" class="logo-svg">
           <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
                 class="logo-text">Be You</text>
       </svg>
   </div>

   REEMPLAZAR POR:
   <div class="nav-logo">
       <img src="beyou-logo.png" alt="Be You - Boho Chic Store" />
   </div>

2. EN EL HERO (línea ~117):
   BUSCAR:
   <div class="hero-logo fade-in-up">
       <svg viewBox="0 0 200 80" class="hero-logo-svg">
           <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
                 class="hero-logo-text">Be You</text>
       </svg>
   </div>

   REEMPLAZAR POR:
   <div class="hero-logo fade-in-up">
       <img src="beyou-logo.png" alt="Be You - Belleza en la libertad de ser" />
   </div>

3. EN EL FOOTER (línea ~678):
   BUSCAR:
   <div class="footer-logo">
       <svg viewBox="0 0 120 40" class="footer-logo-svg">
           <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
                 class="footer-logo-text">Be You</text>
       </svg>
   </div>

   REEMPLAZAR POR:
   <div class="footer-logo">
       <img src="beyou-logo.png" alt="Be You" />
   </div>

4. EN EL LOADING SCREEN (línea ~29):
   BUSCAR:
   <svg class="loading-logo" viewBox="0 0 200 80" fill="none">
       <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
             class="logo-text-loading">Be You</text>
   </svg>

   REEMPLAZAR POR:
   <div class="loading-logo">
       <img src="beyou-logo.png" alt="Loading..." style="animation: pulse 2s infinite;" />
   </div>
*/

/* FIX ADICIONAL: Mejorar espaciado entre secciones */
.section {
  position: relative;
  z-index: auto;
}

.section.indumentaria {
  z-index: 1;
}

.section.accesorios {
  z-index: 2;
  background: var(--ivory);
  margin-top: -1px; /* Elimina gap visual */
}

.section.estilo-beyou {
  z-index: 1;
  background: var(--rosa-nude);
  padding-top: 6rem; /* Más espacio superior */
}

/* Asegurar que las imágenes no se salgan de sus contenedores */
img {
  max-width: 100%;
  height: auto;
}

/* Fix para el grid del lookbook en desktop */
.lookbook-grid {
  contain: layout;
  overflow: hidden;
}