* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #fefefe;
        font-family: "Poppins", sans-serif;
        color: #222;
      }

      /* CONTENEDOR */
      #contenedor {
        max-width: 1200px;
        margin: auto;
        background-color: #433b37;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      }

      /* ENCABEZADO */
      #encabezado {
        background-color: #231f1d;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 40px;
        position: sticky;
        top: 0;
        z-index: 100;
      }

      #logo {
        display: flex;
        align-items: center;
        font-size: 40px;
        letter-spacing: 3px;
        font-weight: 700;
      }

      #logo img {
        width: 70px;
        margin-right: 15px;
        border-radius: 50%;
        border: 3px solid gold;
      }

      /* MENÚ */
      #menu ul {
        display: flex;
        list-style: none;
      }

      #menu li {
        margin: 0 15px;
      }

      #menu a {
        text-decoration: none;
        color: white;
        font-weight: 500;
        transition: 0.3s;
      }

      #menu a:hover {
        color: gold;
      }

      /* BANNER */
      #banner {
        background: url("img/banner.jpg") center/cover no-repeat;
        text-align: center;
        color: white;
        padding: 100px 20px;
        background-color: #3a332e;
      }

      #banner h1 {
        font-size: 2.2em;
        margin-bottom: 10px;
        color: gold;
      }

      #banner p {
        font-size: 1.1em;
      }
      #banner-promociones{
        width: 400px;
        margin: auto;
      }
      .carousel-inner h5{
        color: black;
      }

      /* PRODUCTOS */
      .caja1 {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        width: 180px;
        height: 300px;
        text-align: center;
        padding: 15px;
        transition: all 0.4s ease;
      }

      .caja1:hover {
        transform: translateY(-8px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
      }

      .caja1 img {
        width: 100%;
        height: 140px;
        object-fit: contain;
        margin-bottom: 10px;
      }

      .caja1 p {
        font-size: 0.9em;
      }

      #cajas,
      #cajas2 {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 25px;
        padding: 40px 0;
      }

      .vermas {
        margin-top: 10px;
        border: 2px solid gold;
        border-radius: 8px;
        padding: 6px 12px;
        background: gold;
        color: black;
        font-weight: 600;
        text-decoration: none;
        transition: 0.3s;
        display: inline-block;
      }

      .vermas:hover {
        background: black;
        color: gold;
        border-color: black;
      }

      /* PIE DE PÁGINA */
      #pie {
        background-color: #2c2826;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25px 40px;
        flex-wrap: wrap;
      }

      #logopie img {
        width: 80px;
        border-radius: 50%;
        border: 3px solid gold;
      }

      #ultimotex {
        font-size: 0.9em;
        margin-top: 10px;
        text-align: center;
        width: 100%;
      }

      #redes {
        display: flex;
        gap: 15px;
      }

      #redes img {
        width: 45px;
        height: 45px;
        transition: transform 0.3s;
      }

      #redes img:hover {
        transform: scale(1.1);
      }

      /* RESPONSIVE */
      @media (max-width: 768px) {
        #encabezado {
          flex-direction: column;
        }

        #menu ul {
          flex-direction: column;
          text-align: center;
        }

        #menu li {
          margin: 10px 0;
        }

        #cajas,
        #cajas2 {
          flex-direction: column;
          align-items: center;
        }
      }
      

