:root {
  /* #187078 con 95% de opacidad (F2 hex ≈ 0.95) */
  --reviews-accent: rgba(24, 112, 120, 0.95);
  /* alternativa: #187078F2 */
}

/* Reviews section */
#reviews-section {
  background-color: #fff;
}

.reviews-inner {
  color: #052;
}

/* green used for status & borders */
/* .reviews-accent { color: #16a34a; border-color: #16a34a; } */
.reviews-status {
  color: #16a34a;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.reviews-based {
  color: #16a34a;
  margin: 0;
}

.trip-advisor-logo {
  display: block;
  /* asegura que el elemento ocupe su propia línea */
  width: auto;
  max-height: 500px;
  /* aumenta según lo necesites (ej: 140px para más grande) */
  margin: 0 auto 1rem;
  /* centra y añade separación debajo */
}

/* opcional: reduce el gap entre el logo y el título si hace falta */
.reviews-status {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* controla el espacio entre EXCELLENT y el logo */
}

/* apply review accent color and tighten spacing under the logo */
.reviews-inner {
  color: #052;
  /* si quieres scopear la variable solo a esta sección, puedes poner la declaración aquí en vez de :root */
  /* --reviews-accent: rgba(24,112,120,0.95); */
}

/* TripAdvisor logo: less gap below and reasonable size */
.trip-advisor-logo {
  display: block;
  width: auto;
  max-height: 30px;
  margin: 0 auto 0.25rem;
  /* menos espacio bajo el logo */
}

/* Title and subsequent elements use the accent color and have reduced spacing */
.reviews-status {
  color: var(--reviews-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 52px;
  /* tamaño solicitado */
  line-height: 1;
  /* compactar la altura de línea */
  margin-top: 0;
  margin-bottom: 0.25rem;
  /* menos espacio debajo */
}

/* ajustar subtítulo si hace falta */
.reviews-based {
  color: var(--reviews-accent);
  margin: 0 0 0.5rem 0;
  font-size: 16px;
}

/* stars container */
#reviews-rating svg {
  color: var(--reviews-accent);
  margin-right: 6px;
  vertical-align: middle;
}

/* read full review link (uses same thin arrow SVG) */
.review-read {
  display: inline-flex;
  align-items: center;
  color: var(--reviews-accent);
  /* use accent color */
  font-weight: 600;
  text-decoration: none;
}

.review-read svg {
  margin-left: 0.5rem;
}

/* CTA button */
.btn-write-review {
  background-color: var(--reviews-accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-write-review:hover {
  background-color: #fff;
  color: var(--reviews-accent);
  border: 1px solid var(--reviews-accent);
}

/* responsive: ensure three columns on lg, two on md, one on sm */
@media (min-width: 992px) {
  #reviews-list .col-lg-4 {
    display: block;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
  #reviews-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .reviews-inner {
    padding: 0 1rem !important;
  }

  .reviews-status {
    font-size: 32px !important;
    letter-spacing: 0.22em;
    margin-bottom: 0.5rem !important;
  }

  .reviews-based {
    font-size: 14px;
    margin-bottom: 0.75rem !important;
  }

  .trip-advisor-logo {
    margin-bottom: 0.5rem !important;
  }

  #reviews-rating {
    margin-bottom: 1.5rem !important;
  }

  #reviews-rating svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }

  #reviews-list {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  #reviews-list>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
  }

  .btn-write-review {
    padding: 0.65rem 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    width: 100%;
    max-width: 280px;
  }
}