#main-wrapper {
  z-index: 999 !important;
}

.navigation-type-2 {
  z-index: 999 !important;
}

.titulo {
  position: relative;
  background: #000;
}

.titulo img {
    opacity: 0.8;
}

.titulo h2 {
  font-family: var(--secondary-font);
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 1px var(--text-shadow-medium);
  position: relative;
  font-weight: 700;
  z-index: 111;
  margin-bottom: 30px;
  font-size: 56px;
  line-height: 1.5 !important;
  font-family: var(--primary-font) !important;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.fotorama-slider .fotorama__nav-wrap { display:none; }

.fotorama-slider .fotorama__html {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Igualar altura de los cards en la fila */
.services-cards-section .row {
  display: flex;
  flex-wrap: wrap;
}

/* Hacer que las columnas ocupen el mismo alto */
.services-cards-section .row > [class^="col-"] {
  display: flex;
  flex-direction: column;
}

/* Hacer que el card ocupe todo el alto de la columna */
.card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
}

/* El área de imagen conserva su tamaño natural */
.img-wrapper {
  flex-shrink: 0;
}

/* El área de texto ocupa el resto del espacio */
.card-service-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Cambiado de flex-end a flex-start */
}

/* Opcional: Si hay cards con .card-equal de pruebas anteriores, puedes dejarlo así: */
.card-equal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card-service-body p{
  font-size: 12px !important;
}
.card-service-body h6{
  font-size: 20px !important;
}
.menu-item a{
  font-size: 15px !important;
}

.menu-item.nuevo a{
  background-color: #f0f0f0 !important;
  color:#f58634 !important;
  border-radius: 8px !important;
  border-bottom: 4px solid #cccac8;
  font-size: 16px !important;
}
.menu-item.nuevo a:hover{
  color:#ffffff !important;

  border-bottom: 4px solid #c0611e;
  background-color: #f58634 !important;
}

.slider-img{
  background-size: contain; 
  background-repeat: no-repeat; 
  background-position: center; 
  background-color:#000; 
  width: 100%;  
  height: 100%;  
  box-sizing: border-box;
}


.slider-title {
  position: absolute; 
  bottom:0px; 
  width: 100%; 
  text-align: center; 
  color: #fff; 
  background-color: #000; 
  padding:2px;
}


.btn-bottom{
  width: 100%;
  margin-bottom: 1rem;
  font-size: 12px !important;
}

.button-default-color-2{
  font-size: 12px !important;
}



.gold-animated-btn {
  position: relative;
  z-index: 1;
  color: #fff !important;
  background: linear-gradient(90deg, #854f12 0%, #b47f1c 30%, #e6c068 60%, #b4771c 80%, #854f12 100%);
  background-size: 200% 100%;
  border: none;
  box-shadow: 0 2px 8px rgba(180, 119, 28, 0.25);
  transition: color 0.2s;
  overflow: hidden;
}

.gold-animated-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  opacity: 0;
  animation: goldShineReflect 4s cubic-bezier(.7,0,.3,1) infinite;
}

.gold-animated-btn:hover, .gold-animated-btn:focus {
  color: #fff !important;
  filter: brightness(1.1);
  text-shadow: 0 0 8px #fff8dc;
}

@keyframes goldShineReflect {
  0% {
    left: -60%;
    opacity: 0;
  }
  60% {
    left: -60%;
    opacity: 0;
  }
  65% {
    left: 20%;
    opacity: 1;
  }
  70% {
    left: 120%;
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}