/* Estilos Generales */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('assets/images/novedades_pattern.png'); /* Fondo de la sección */
    background-size: cover; /* Que cubra toda la pantalla */
    background-attachment: fixed; /* Fijo al hacer scroll */
    background-position: center; /* Centrado */
    color: #fff; /* Texto en blanco para mejor contraste */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Oscurece el fondo un poco */
    z-index: -1;
}

/* Estilos para el encabezado */
header {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos del título y subtítulo dentro del encabezado */
.header-content {
    text-align: center;
    margin-top: 0px; /* Subir un poco el texto del encabezado */
}

.header-content h1 {
    font-family: 'Georgia', serif;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #ff7af4;
    text-shadow: 2px 2px 6px rgb(255, 255, 255);
    margin-bottom: 0.2rem;
    letter-spacing: 3px;
    text-shadow: 
    -1.5px -1.5px 0 #8400ff,  
     1.5px -1.5px 0 #8400ff,  
    -1.5px  1.5px 0 #8400ff,  
     1.5px  1.5px 0 #8400ff; /* Borde blanco alrededor del texto */
    display: inline-block;
    margin-top: 0rem;      /* añade un poco de espacio encima */
    margin-bottom: -0.5rem;  /* “sube” el h1 medio rem */

}


.header-content p {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 
    -0.5px -0.5px 0 #ff00dd,  
     0.5px -0.5px 0 #ff00dd,  
    -0.5px  0.5px 0 #ff00dd,  
     0.5px  0.5px 0 #ff00dd;;
    margin-top: 0rem;
    margin-bottom: 10px;
}

/* Posicionamiento del botón "Inicio" entre el subtítulo y la barra de búsqueda */
.home-container {
    margin-top: 10px;
}

.home-container .footer-link {
    display: inline-block;  /* Agregado para que el elemento se comporte como bloque */
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 20px;
    border: 2.5px solid #f39c12;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.home-container .footer-link:hover {
    color: #f39c12;
    background-color: rgb(255, 255, 255);
}


/* Ajustar los estilos de la barra de búsqueda y el carrito para que no interfieran */
.search-container, .cart-button {
    margin-top: 10px;
}

/* Estilos para el contenedor de productos */
.productos {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.productos-container {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Pie de Página */
.footer {
    text-align: center;
    padding: 1rem 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-top: auto;
    transition: background-color 0.3s ease;
}

.footer:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #f39c12;
}
/* ========================================
   Media Query para dispositivos móviles
   ======================================== */
/* Regla general para móviles */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;  /* Forzar scroll en lugar de fixed */
        background-size: cover !important;            /* Cubrir la pantalla */
        background-position: center center !important;/* Centrar la imagen */
    }
}

/* Regla específica para móviles en orientación portrait (vertical) */
@media (max-width: 768px) and (orientation: portrait) {
    body {
        /* Ajustamos la posición para que se enfoque más en la parte superior */
        background-position: center top !important;
    }
}


@media (max-width: 768px) {
    /* Ajuste para la barra de búsqueda */
    .search-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 95vw;           /* Ocupa el 95% del ancho del viewport */
      max-width: 95vw;
      margin: 0 auto;        /* Centrado horizontal */
      padding: 5px;
      box-sizing: border-box;
    }
  
    /* El campo de búsqueda ocupa la mayor parte */
    .search-container .search-input {
      flex: 1;
      font-size: 0.9rem;
      padding: 5px;
      box-sizing: border-box;
    }
  
    /* El botón (la lupa) se ajusta en tamaño */
    .search-container .search-button {
      font-size: 0.9rem;
      padding: 5px 10px;
      box-sizing: border-box;
    }
  }
  
  @media (max-width: 768px) {
    /* Encabezado: fondo al 100%, contenido (header-content) al 95% centrado y con tamaños de fuente ajustados */
    header {
      width: 100%;
    }
    header .header-content {
      width: 95%;
      margin: 0 auto;
    }
    header .header-content h1 {
      font-size: 2.5rem;      /* Ajusta el tamaño del título; cámbialo según tu gusto */
    }
    header .header-content p {
      font-size: 0.9rem;    /* Ajusta el tamaño del subtítulo; cámbialo según tu gusto */
    }
  
  }


  /*------------------------------------------------------------------------------------------------
ESTILOS PARA LOS BOTONES FLOTANTES (COPIAR ESTE FRAGMENTO EN LOS DEMÁS CSS)
------------------------------------------------------------------------------------------------*/

.brand-name {
    position: absolute !important;   /* lo saca del flujo visual */
    width: 1px !important;           /* tamaño mínimo */
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;         /* elimina márgenes */
    overflow: hidden !important;     /* oculta cualquier contenido sobrante */
    clip: rect(1px, 1px, 1px, 1px) !important; /* recorta todo el elemento */
    white-space: nowrap !important;  /* evita saltos de línea */
    border: 0 !important;
  }
  
  /* Estilo base para el logo en escritorio */
  .brand-logo {
    width: 240px;      /* ajusta este valor al tamaño “ideal” en desktop */
    height: auto;      /* mantiene la proporción original */
  }
  
  /* Si quieres forzar un máximo de altura */
  .brand-logo {
    max-height: 120px;  /* para que no sea excesivamente alto */
  }
  
  
  
  
  
  /* Aseguramos que el header permita posicionar hijos de forma absoluta */
  header {
    position: relative;
  }
  
  /* Contenedor para los botones en el header
     En esta versión no se extiende de extremo a extremo; se posiciona solo según su contenido */
  .header-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    /* Al no definir left ni right para estirar, el contenedor se ajustará al ancho de sus botones.
       Ajusta el 'gap' para modificar la separación entre ellos */
    gap: 100px;           
    align-items: center;
    z-index: 100;
  }
  
  /* Estilos comunes para ambos botones (Login y Carrito) */
  .cart-button,
  .login-button {
    background-color: #000000;
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    /* Se usa inline-flex para que el botón tenga el mismo tamaño que su contenido,
       pero se pueden forzar dimensiones mínimas si lo deseas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    min-width: 120px;
    min-height: 40px;
    border: 2px solid white !important;
  
  }
  
  .login-button {
    position: fixed !important;      /* 🔒 Lo fija en pantalla */
    top: 20px !important;            /* 🧭 Distancia desde arriba */
    right: 30px ;         /* ⬅️ Distancia desde la derecha (ajusta si hace falta separarlo del carrito) */
    z-index: 999 !important;         /* 🥇 Por encima de todo */
  }
  
  
  /* Si deseas ajustar la separación de forma individual (por ejemplo, mover el botón de Login más a la derecha) */
  /* Puedes usar un margen derecho o izquierdo. Ejemplo: */
  .header-buttons .login-button {
         margin-right: 130px; /*-- Esto empuja el botón del Carrito aún más a la derecha.*/
     } 
  
     .header-buttons .login-button {
      margin-top: 10px;
    }
    
  
  /* Íconos: mismo margen y tamaño */
  .cart-button i,
  .login-button i {
    margin-right: 8px;
    font-size: 20px;
  }
  
  /* Efecto hover para ambos botones */
  .cart-button:hover,
  .login-button:hover {
    background-color: #e67e22;
    transform: scale(1.1);
  }
  
  /* ============================= */
  /* Botón Regístrate en el header */
  /* ============================= */
  .cart-button,
  .register-button {
    background-color: #000000;
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    /* Se usa inline-flex para que el botón tenga el mismo tamaño que su contenido,
       pero se pueden forzar dimensiones mínimas si lo deseas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    min-width: 120px;
    min-height: 40px;
    border: 2px solid white !important;
  
  }
  
  .register-button {
    position: fixed !important;      /* 🔒 Lo fija en pantalla */
    top: 20px !important;            /* 🧭 Distancia desde arriba */
    right: 165px ;         /* ⬅️ Distancia desde la derecha (ajusta si hace falta separarlo del carrito) */
    z-index: 999 !important;         /* 🥇 Por encima de todo */
  }
  
  .header-buttons .register-button {
    margin-right: 130px; /*-- Esto empuja el botón del Carrito aún más a la derecha.*/
  } 
  
  .header-buttons .register-button {
  margin-top: 10px;
  }
  
  /* Íconos: mismo margen y tamaño */
  .cart-button i,
  .register-button i {
    margin-right: 8px;
    font-size: 20px;
  }
  
  /* Efecto hover para ambos botones */
  .cart-button:hover,
  .register-button:hover {
    background-color: #e67e22;
    transform: scale(1.1);
  }
  
  
  /* ========================================
     Media Query para dispositivos móviles
     ======================================== */
  
  
  /* Responsive: ajustes para dispositivos móviles */
  @media (max-width: 768px) {
    .header-buttons {
      position: absolute !important;
      top: 20px !important;
      left: 20px !important;
      right: auto;
      width: auto;
      padding: 0;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
    }
  
    
  
    .login-button {
      position: fixed !important;   /* Fijo en pantalla */
      top: 5px !important;         /* Distancia desde arriba */
      left: 20px !important;        /* Pegado a la izquierda */
      right: auto !important;       /* Anulamos right por si está definido */
      z-index: 999 !important;      /* Por encima de todo */
      max-width: 45%;               /* ✅ Para que no desborde la pantalla */
      padding: 8px 12px;            /* ✅ Más compacto en móvil */
      font-size: 14px;              /* ✅ Texto más pequeño */
    }
    
  
  
    .login-button,
    .cart-button {
      top: 5px !important;
      font-size: 14px !important;         /* Reduce el tamaño del texto dentro del botón */
      padding: 0px 12px !important;       /* Reduce el espacio interno (vertical y horizontal) del botón */
      border-radius: 30px !important;     /* Mantiene los bordes redondeados pero más pequeños */
      min-width: auto !important;         /* Permite que el ancho se adapte al contenido (quita forzados previos) */
      height: auto !important;            /* Permite que la altura se ajuste automáticamente al contenido */
    }
  
    .login-button i,
    .cart-button i {
      font-size: 16px !important;         /* Reduce el tamaño del icono dentro del botón */
      margin-right: 6px !important;       /* Ajusta el espacio entre icono y texto para que siga viéndose limpio */
    }
  
    .register-button {
      position: fixed !important;   /* Fijo en pantalla */
      top: 10px !important;         /* Distancia desde arriba */
      left: 20px !important;        /* Pegado a la izquierda */
      right: auto !important;       /* Anulamos right por si está definido */
      z-index: 999 !important;      /* Por encima de todo */
      max-width: 45%;               /* ✅ Para que no desborde la pantalla */
      padding: 5px 8px;            /* ✅ Más compacto en móvil */
      font-size: 14px;              /* ✅ Texto más pequeño */
      
    }
    .header-buttons .register-button {
      /* mueve más abajo aumentando el valor */
      top: 5px !important;
      margin-left:110px !important;   /* reduce o aumenta este valor según necesites */
    
  
    }
  
    .login-button i,
    .register-button i {
      font-size: 16px !important;         /* Reduce el tamaño del icono dentro del botón */
      margin-right: 6px !important;       /* Ajusta el espacio entre icono y texto para que siga viéndose limpio */
    }
    
    
    }
  
      
    
    /* Responsive: reducimos el logo en móvil */
  @media (max-width: 768px) {
    .brand-logo {
      width: 200px;     /* más pequeño en móviles */
      max-height: 100px;
      
      
    }
    .header-brand {
      margin-top: 50px;   /* baja todo el logo + texto 20px */
    }
  }
  
  /* Si el logo está demasiado pegado, añade un margen */
  .header-brand .brand-logo {
    margin-right: 8px; /* separación entre logo y texto (aunque el texto esté oculto) */
  }
    
  
  
  
  
  
  
  
  
  /* ========================================
     Media Query para dispositivos móviles
     ======================================== */
  /* General para móviles (max-width: 768px) */
  @media (max-width: 768px) {
    body {
      background-attachment: scroll !important;  /* Forzar scroll en lugar de fixed */
      background-size: cover !important;
      background-position: center center !important;
    }
    header {
      width: 100%;
    }
    .header-content {
      width: 95%;
      margin: 0 auto;
    }
    /* Ajustamos la fórmula en pantallas medianas */
    .header-content h1 {
      /* Mínimo 1.8rem, óptimo calc(100vw / 9), máximo 4rem */
      font-size: clamp(1.8rem, calc(100vw / 9), 4rem);
    }
    .header-content p {
      font-size: 0.9rem;
    }
    /* Ajuste para la barra de búsqueda */
    .search-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 95vw;
      max-width: 95vw;
      margin: 0 auto;
      padding: 5px;
      box-sizing: border-box;
    }
    .search-container .search-input {
      flex: 1;
      font-size: 0.9rem;
      padding: 5px;
      box-sizing: border-box;
    }
    .search-container .search-button {
      font-size: 0.9rem;
      padding: 5px 10px;
      box-sizing: border-box;
    }
  }
  
  /* Media Query para pantallas muy pequeñas (hasta 350px) */
  @media (max-width: 350px) {
    .header-content h1 {
      /* Mínimo 1.6rem, óptimo calc(100vw / 9), máximo 4rem */
      font-size: clamp(1.6rem, calc(100vw / 9), 4rem) !important;
      padding: 0 10px;
      text-align: center;
    }
    .header-content p {
      font-size: 0.9rem !important;
      text-align: center;
      margin: 0 10px;
    }
  }