:root {
      --miel: #f4b400;
      --miel-oscuro: #6b4f1d;
      --crema: #fff7e6;
    }

    body {
      background-color: var(--crema);
    }

    .bg-miel {
      position: relative;
      background: url("media/images/foto-hero.png") no-repeat center center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .bg-miel::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .bg-miel .container { 
      position: relative; 
      z-index: 1; 
    }

    .btn-miel {
      background-color: var(--miel);
      color: #fff;
    }

    .btn-miel:hover {
      background-color: #CF9A06;
      color: #fff;
    }

    .btn-miel-oscuro {
      background-color: var(--miel-oscuro);
      color: #fff;
    }

    .btn-miel-oscuro:hover {
      background-color: #563d16;
      color: #fff;
    }

    .text-miel {
      color: var(--miel-oscuro);
    }

    .bg-contact {
      background-color: var(--miel);
    }

    .card {
      border: none;
      border-radius: 1rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .card-img-top {
      height: 250px;
      object-fit: cover;
    }

    @media (max-width: 768px) {
      .card-img-top {
        height: 180px;
      }
    }

    footer {
      background-color: var(--miel-oscuro);
      color: white;
    }