/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  color: #fff;
  background-image: url("https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjR4Nmg3eTZycXB2aGIzeHd1MmhwYzB6Zm05N2d6eHkxem1zdWVhOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/RnncZRp8EPR61wgdWr/giphy.gif");
  background-size: cover;        /* Hace que la imagen cubra toda la pantalla */
  background-repeat: no-repeat;  /* Evita que se repita */
  background-position: center;   /* Centra la imagen */
  background-attachment: fixed;  /* La deja fija al hacer scroll */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* la caja esa del centro */
.container {
    max-width: 1000px;
    margin: 120px auto 0 auto;  
    padding: 20px;  
}

/* cabezera */
  header {
    position: fixed;              
    top: 0;
    left: 0;
    width: 100%;                  
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    z-index: 1000;                
}

  .header-left {
    display: flex;
    align-items: center;
    gap: 50px;
}

  .title-bubble {
    padding: 10px 30px;
    font-size: 28px;
    font-weight: bold;
    text-align: center
    
}

  .search-bar {
    position: relative;
}

  .search-bar input {
    padding: 8px 45px 8px 10px;
}

  .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* imagenes */
  .logo-img {
    width: 120px;
    height: auto;
    display: block;
}

  .producto-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

/* resultados de busqueda */
  .search-results {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: #f9f9f9;
    display: none;
    z-index: 10;
}

  .search-results table {
    width: 100%;
    border-collapse: collapse;
}

  .seach-results td {
    padding: 8px;
    cursor: pointer;
}

  .seach-results td:hover {
    background-color: #e0e0e0;
}

/* iconos de la derecha */
  .header-right .icon {
    margin-left: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* secciones */
  section {
    margin-bottom: 40px;
}

  section h2 {
    margin-bottom: 15px;
    font-size: 24px;
}

/* cubos de productos */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

  .product-card {
    height: 180px;
    border: 2px dashed #000;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    color: #555;
}