/* =========================
   RESET Y VARIABLES BASE
========================= */
:root {
  font-size : 100%;
  font-family : system-ui, sans-serif;
  scroll-behavior : smooth;
}

/* =========================
   RESET GENERAL Y ELEMENTOS BASE
========================= */
 * { -ms-overflow-style: none;  scrollbar-width: none;  } 
 *::-webkit-scrollbar { display: none; }
* , *::before , *::after {
  margin : 0;
  padding : 0;
  border : 0;
  box-sizing : border-box;
  vertical-align : baseline;
}
*::before , *::after {
  display : block;
}
img , picture , video , iframe , figure , canvas {
  max-width : 100%;
  display : block;
  width : 100%;
  height : initial;
  object-fit : cover;
  object-position : center center;
}
a {
  display : block;
  text-decoration : none;
  color : inherit;
  font :  inherit;
}
p a {
  display : inline;
}
li , menu, summary {
  list-style-type : none;
}
ol {
  counter-reset : revert;
}
h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , strong , blockquote , i , b , u , em , pre , code , mark , del {
  font :  inherit;
  line-height :  1em;
  text-decoration :  none;
  color : inherit;
  overflow-wrap : break-word;
  text-wrap : pretty;
}

mark {
  background-color : transparent;
}
blockquote::before , blockquote::after , q::before , q::after {
  content : none;
}
form , input , textarea , select , button , label {
  font :  inherit;
  hyphens : auto;
  background-color : transparent;
  color : inherit;
  display : block;
  appearance : none;
}
fieldset {
  border : none;
}
::placeholder {
  color : unset;
}
button , label {
  cursor : pointer;
}
table , tr , td , th , tbody , thead , tfoot {
  border-collapse : collapse;
  border-spacing : 0;
  font : inherit;
}
svg {
  width : 100%;
  height : initial;
  display : block;
  fill : currentColor;
}

/* =========================
   BODY Y TIPOGRAFÍA
========================= */
body {
  min-height : 100vh;
  line-height : 1.5em;
  color : inherit;
  hyphens : auto;
  font-smooth : always;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
     font-family: "Montserrat", sans-serif;
       font-optical-sizing: auto;
}


/* =======================================================
 * header.css
 * Interacciones:
 *   - Header fijo en la parte superior
 *   - Menú hamburguesa responsive
 *   - Panel del carrito con animación y hover
 * Datos:
 *   - Contenedores principales: Header, Header-nav, Header-menu, Header-cart
 *   - Elementos interactivos: links del menú, botones del carrito, menú hamburguesa
 *   - Estados visuales: hover, transform, transition, visibility, scale
 * Estructura:
 *   - HEADER PRINCIPAL:
 *       * Contenedor flex con justify-content: space-between
 *       * Colores y tipografía definidos
 *   - MENÚ HAMBURGUESA:
 *       * Oculto en desktop
 *       * Visible y clickeable en mobile
 *   - NAVEGACIÓN PRINCIPAL:
 *       * Lista horizontal en desktop, vertical en mobile
 *       * Hover sobre links con desplazamiento y cambio de color
 *       * Botón "back" para cerrar menú en mobile
 *   - CARRITO HEADER Y PANEL:
 *       * Botón del carrito con animación de ruedas al hover
 *       * Panel flotante con productos, inicialmente oculto
 *       * Clases para mostrar/ocultar panel: .visible
 *   - ELEMENTOS DEL PANEL DEL CARRITO:
 *       * Contenedor de cada item con imagen, info, título, cantidad, precio y botón eliminar
 *       * Flex y gap para orden visual
 *       * Hover y transiciones para botones
 *   - ANIMACIONES:
 *       * Keyframes bounce para las ruedas del carrito
 *       * Retraso en animación para efecto escalonado
 *   - RESPONSIVE HEADER (<=540px):
 *       * Menú vertical a pantalla completa
 *       * Transform: scaleY(0) oculto y scaleY(1) visible
 *       * Ajuste de fuentes y tamaños de elementos
 * Funciones / CSS especiales:
 *   - Flex y grid para layout
 *   - Transiciones y transform para hover y animaciones
 *   - Media queries para diseño responsivo
 * =======================================================
 */

/* =========================
   HEADER PRINCIPAL
========================= */
.Header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  background-color: transparent;
  top: 0;
  z-index: 8;
  transition: transform .4s ease;
  color: #fcbd1b;
  font-weight: 600;

}

/* =========================
   MENÚ HAMBURGUESA HEADER
========================= */
.Header-menu {
  width: 4rem;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  background-color: black;

}



/* =========================
   NAVEGACIÓN PRINCIPAL HEADER
========================= */
.Header-nav{
  display: flex;
  margin: auto;
    background-color: black;
}

.Header-ul {
  display: flex;
  flex-flow: row nowrap;
  gap: 5rem;
}

.Header-li {
  font-size: 1.4rem;
  transition: all .4s ease;
}

.Header-li:hover {
  transform: translateX(2px);
  color: black;
  background-color: rgb(255, 255, 255);
}

.Header-back{
  display: none;
}

/* =========================
   CARRITO HEADER Y PANEL
========================= */
.Header-cart {
  width: 4rem;
  padding: 0.5rem;
  margin: 0 1rem 0 0;
  position: relative;
}

.Shop-cart {
  background-color:#ee3b37;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
  position: fixed;
  right: 0;
  top: 0;
  padding: 1rem;
  display: flex;
  flex-flow: column nowrap;
  visibility: hidden;
}
.Shop-cart.visible{
  visibility: visible;
}

/* =========================
   PANEL DEL CARRITO Y ELEMENTOS
========================= */
.Cart-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1rem 0;
}
.Cart-close--svg{
  width: 2rem;
}

.Cart-span {
  font-size: 1.6rem;
}

.Header-cart--button {
  border: 2px solid #fcbd1b;
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 0.5rem;
  transition: background-color .4s ease;
}

.Header-cart--button:hover {
  background-color: #fcbd1b;
  color: #ee3b37;
}

/* =========================
   ANIMACIONES DEL CARRITO
========================= */
.Header-cart:hover .Cart-svg--wheel1,
.Header-cart:hover .Cart-svg--wheel2 {
  animation: bounce .6s ease forwards;
}

.Header-cart:hover .Cart-svg--wheel2 {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* =========================
   RESPONSIVE HEADER (<= 540px)
========================= */
@media(max-width: 540px){
  .Header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    top: 0;
    padding: 1rem 0;
    position: fixed;
    animation-delay: 4.1s;
    transition: transform .4s ease;

  }

  .Header-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 2rem;
    margin: 0;
    background-color: #000000;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transform: scaleY(0);
    transform-origin: top left;
    transition: all .6s ease;
  }
  .Header-menu {
    width: 4rem;
    margin: 0 0 0 1rem;
    padding: 0.5rem;
    transition: all .3s ease;
    transform-origin: top left;
    visibility:visible;
    pointer-events:all;
    color: #fcbd1b;
   
  }

  .Header-ul {
    text-align: left;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
  }

  .Header-li {
    font-size: 3rem;
    transition: all .4s ease;
  }

  .Header-li:hover {
    font-weight: 600;
    transform: translateX(10px);
    background-color: rgb(255, 255, 255);
  }

  .Header-back{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: .5rem;
    color: #fcbd1b;
    position: absolute;
    bottom: 0;
    padding: 2rem;
    width: 100%;
  }

  .Header-arrow{
    width: 2rem;
  }

  .Header-nav.open {
    transform: scaleY(1);
  }
}

/* =========================
   PANEL DEL CARRITO (RESPONSIVE)
========================= */
.Cart-header-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid #fcbd1b ;
}

.Cart-header-img {
  width: 3rem;
}

.Cart-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.Cart-header-title {
  font-size: .9rem;
  font-weight: 600;
}

.Cart-header-quantity {
  font-size: .8rem;
  color: black;
}

.Cart-header-price {
  font-weight: 600;
  font-size: .9rem;
}

.Cart-header-remove {
  border: none;
  color: black;
  font-size: 1rem;
  cursor: pointer;
  padding: .3rem;
}