body {
    font-family: 'Poppins', sans-serif;
    background-color: #f7f7f7;
}

.navbar-brand {
    letter-spacing: 0.05em;
}

#map {
    width: 100%;
    height: 70vh;
    border-radius: 15px;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

/* Tooltip Leaflet un poco más grande */
.leaflet-tooltip {
    font-size: 0.85rem;
}

/* Tabla de servicios */
.table-servicios th {
    background-color: #f5f5f5;
}

/* Asegurar que los íconos de Bootstrap sí se vean */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Flechas oscuras con fondo semitransparente */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* pone la flecha en blanco */
    background-color: rgba(0, 0, 0, 0.4); /* fondo obscuro */
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* Ocultar completamente los textos “Siguiente” y “Anterior” si llegan a mostrarse */
.carousel-control-prev .visually-hidden,
.carousel-control-next .visually-hidden {
    display: none !important;
}

.ribbon-premium {
  --d: 0.8em;  /* profundidad del doblez */

  position: absolute;
  top: 12px;
  left: 0;

  width: 100%;        /* 🔥 El ribbon ahora ocupa todo el ancho del card */
  padding: 4px 0;
  text-align: center;

  background-color: #ffc107;
  color: #333;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.6;

  /* la colita del ribbon se mantiene, pero ahora solo dentro del card */
  clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--d)),
      calc(100% - var(--d)) 100%,
      0 100%
  );

  z-index: 5;
}

/* Aumenta el ancho máximo del modal en pantallas grandes */
@media (min-width: 1200px) {
    .modal-salon-ancho {
        max-width: 1300px; /* Cámbialo si quieres aún más */
    }
}

/* Opcional, para pantallas MUY grandes */
@media (min-width: 1600px) {
    .modal-salon-ancho {
        max-width: 1500px;
    }
}