/* ================================================================
   CENTRO RECREATIVO COLOAL — TEMA VISUAL V2
   Conserva DinePro: estructura, fuentes, carrusel, AOS y Bootstrap.
   Mejora contraste, jerarquía visual y paleta de Coloal.
   ================================================================ */

:root {
  --coloal-forest: #1B3A2F;
  --coloal-green: #556B2F;
  --coloal-earth: #4A3B2A;
  --coloal-gold: #D4A94F;
  --coloal-deep-water: #0B456B;
  --coloal-water: #4D93B7;
  --coloal-sand: #C9B89C;
  --coloal-cream: #F5F3EA;
  --coloal-ink: #2B2418;
  --coloal-white: #FFFFFF;
}

/* ---------- Base ---------- */
body {
  color: var(--coloal-ink);
  background: var(--coloal-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--coloal-forest);
}

a:hover {
  color: var(--coloal-green);
}

.text-primary {
  color: var(--coloal-forest) !important;
}

.text-dark-muted,
.head1 p {
  color: var(--coloal-earth) !important;
}

.bg-light {
  background-color: var(--coloal-cream) !important;
}

.font-heading,
.page-title,
.head1 h2 {
  color: var(--coloal-forest);
  letter-spacing: -0.02em;
}

/* ---------- Navbar ---------- */
.custom-navbar {
  padding-top: 14px;
  padding-bottom: 14px;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

.custom-navbar .nav-link {
  font-family: "DM Sans", sans-serif;
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .02em;
  position: relative;
  transition: color .25s ease, opacity .25s ease;
}

/* Mientras el menú está sobre la fotografía */
.custom-navbar:not(.navbar-scrolled) {
  background: linear-gradient(
    180deg,
    rgba(13, 34, 27, .58) 0%,
    rgba(13, 34, 27, .26) 55%,
    rgba(13, 34, 27, 0) 100%
  );
}

.custom-navbar:not(.navbar-scrolled) .nav-link {
  color: var(--coloal-white) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .62);
}

.custom-navbar:not(.navbar-scrolled) .nav-link:hover,
.custom-navbar:not(.navbar-scrolled) .nav-link.active {
  color: #FFF4D6 !important;
}

.custom-navbar:not(.navbar-scrolled) .nav-logo {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}

/* Después de hacer scroll */
.custom-navbar.navbar-scrolled {
  padding-top: 9px;
  padding-bottom: 9px;
  background: rgba(245, 243, 234, .96) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 58, 47, .10);
  box-shadow: 0 7px 28px rgba(27, 58, 47, .10) !important;
}

.custom-navbar.navbar-scrolled .nav-link {
  color: var(--coloal-ink) !important;
  text-shadow: none;
}

.custom-navbar.navbar-scrolled .nav-link:hover,
.custom-navbar.navbar-scrolled .nav-link.active {
  color: var(--coloal-forest) !important;
}

@media (min-width: 992px) {
  .custom-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 1px;
    height: 2px;
    background: var(--coloal-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }

  .custom-navbar .nav-link:hover::after,
  .custom-navbar .nav-link.active::after {
    transform: scaleX(1);
  }
}

@media (max-width: 991px) {
  .custom-navbar .navbar-collapse {
    background: rgba(245, 243, 234, .98) !important;
    border: 1px solid rgba(27, 58, 47, .10);
    box-shadow: 0 18px 45px rgba(27, 58, 47, .18);
  }

  .custom-navbar .navbar-collapse .nav-link {
    color: var(--coloal-ink) !important;
    text-shadow: none !important;
  }
}

/* ---------- Hero / carrusel principal ---------- */
/*
   El HTML conserva theme-light para no tocar la estructura original.
   Aquí reemplazamos el overlay claro por uno oscuro y natural para
   que las fotografías mantengan fuerza y el texto tenga contraste.
*/
.hero-section.theme-light .hero-content-area {
  background:
    linear-gradient(180deg, rgba(8, 28, 22, .18) 0%, rgba(8, 28, 22, .30) 34%, rgba(6, 20, 16, .62) 100%);
}

.hero-section .hero-content-area .hero-caption {
  max-width: 920px;
  padding: 2.25rem;
}

.hero-section.theme-light .hero-caption h1 {
  color: var(--coloal-white) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .60),
    0 8px 26px rgba(0, 0, 0, .48);
}

.hero-section.theme-light .hero-caption p {
  color: rgba(255, 255, 255, .96) !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  line-height: 1.65;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .65),
    0 5px 18px rgba(0, 0, 0, .38);
}

/* ---------- Botones ---------- */
.btn-primary {
  background-color: var(--coloal-forest) !important;
  border-color: var(--coloal-forest) !important;
  color: var(--coloal-white) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(10, 37, 29, .24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-shine:hover {
  background-color: var(--coloal-green) !important;
  border-color: var(--coloal-green) !important;
  color: var(--coloal-white) !important;
  box-shadow: 0 10px 26px rgba(10, 37, 29, .30) !important;
}

.btn-outline-primary {
  color: var(--coloal-forest) !important;
  border-color: var(--coloal-forest) !important;
}

.btn-outline-primary:hover {
  color: var(--coloal-white) !important;
  background-color: var(--coloal-forest) !important;
  border-color: var(--coloal-forest) !important;
}

.btn-shine::after {
  background: rgba(255, 255, 255, .30) !important;
}

/* ---------- Carrusel ---------- */
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon,
.hero-section.carousel .carousel-control-prev-icon,
.hero-section.carousel .carousel-control-next-icon {
  background-color: rgba(27, 58, 47, .92) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.carousel-indicators [data-bs-target] {
  background-color: var(--coloal-cream);
  opacity: .65;
}

.carousel-indicators .active {
  background-color: var(--coloal-gold);
  opacity: 1;
}

/* ---------- Secciones del Home ---------- */
.home-about {
  background: var(--coloal-cream);
}

.home-about h2,
.head1 h2 {
  color: var(--coloal-forest) !important;
  font-weight: 700;
}

.home-about h4 {
  color: var(--coloal-earth);
  line-height: 1.45;
}

.home-about p,
.head1 p {
  line-height: 1.75;
}

.img-collage-wrap img {
  border-color: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 42px rgba(27, 58, 47, .17) !important;
}

.card-blog,
.card-team,
.card-testimonial {
  background: var(--coloal-cream) !important;
  border: 1px solid rgba(27, 58, 47, .08) !important;
  box-shadow: 0 10px 28px rgba(27, 58, 47, .07);
}

.card-blog h5,
.card-team h5,
.card-testimonial h5 {
  color: var(--coloal-forest);
  font-weight: 700;
}

.card-blog .card-text,
.card-team .card-text,
.card-testimonial .card-text {
  color: var(--coloal-earth) !important;
}

.menu-item-one {
  border-bottom-color: rgba(74, 59, 42, .28) !important;
}

.menu-item-one .title-wrap h5 {
  color: var(--coloal-forest) !important;
  font-weight: 700 !important;
}

.menu-item-one .title-wrap .price {
  color: var(--coloal-deep-water) !important;
  font-weight: 700;
}

/* ---------- Formulario de reservación ---------- */
.book-a-table-split .booking-form-wrap {
  background:
    linear-gradient(135deg, var(--coloal-forest) 0%, #244D3E 56%, var(--coloal-deep-water) 135%) !important;
}

.book-a-table-split .booking-form-wrap h2 {
  color: var(--coloal-white) !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .22);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--coloal-green) !important;
  box-shadow: 0 0 0 .25rem rgba(85, 107, 47, .15) !important;
}

/* ---------- Footer ---------- */
.footer-one,
footer,
.footer-dark {
  background-color: var(--coloal-forest) !important;
}

.footer-one h5 {
  color: var(--coloal-cream) !important;
}

.footer-one ul li a,
.footer-one .text-white-50 {
  color: rgba(255, 255, 255, .70) !important;
}

.footer-one a:hover,
footer a:hover {
  color: var(--coloal-gold) !important;
}

/* ---------- Utilidades ---------- */
.text-water {
  color: var(--coloal-water) !important;
}

.bg-water {
  background-color: var(--coloal-water) !important;
}

.badge.bg-primary,
.bg-primary {
  background-color: var(--coloal-forest) !important;
}

.border-primary {
  border-color: var(--coloal-forest) !important;
}

::selection {
  background: var(--coloal-gold);
  color: var(--coloal-ink);
}