:root{
  --ambar-900:#0f2a22;
  --ambar-800:#15382f;
  --ambar-700:#1c4a3e;
  --gold-500:#f2c14e;
  --gold-600:#e7b53e;
  --cream:#fbfaf6;
  --ink:#0f172a;
  --muted:#6b7280;
  --card: rgba(255,255,255,.92);
  --stroke: rgba(15,23,42,.10);
  --shadow: 0 18px 42px rgba(2,6,23,.18);
  --r18: 18px;
  --r24: 24px;
}

html, body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(242,193,78,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(28,74,62,.22), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
}

h1,h2,h3,.brand-text{
  font-family: Fraunces, Georgia, serif;
}

.nav-ambar{
  background: linear-gradient(90deg, var(--ambar-900), var(--ambar-800));
  box-shadow: 0 10px 24px rgba(2,6,23,.22);
}

.brand-mark{
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  background: rgba(242,193,78,.16);
  border: 1px solid rgba(242,193,78,.35);
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  color: var(--gold-500);
}

.brand-text{ font-weight: 700; letter-spacing: .2px; }

.hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--r24);
  background: linear-gradient(135deg, var(--ambar-900), #0b1b16);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}

.hero:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(242,193,78,.22), transparent 60%),
    radial-gradient(700px 400px at 90% 35%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}

.hero-inner{ position: relative; padding: 28px; }
@media (min-width: 992px){
  .hero-inner{ padding: 44px; }
}

.hero-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-size: .92rem;
}

.hero-title{
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

.hero-sub{
  color: rgba(255,255,255,.80);
  max-width: 52ch;
}

.btn-gold{
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  border: 0;
  color: #1b1b1b;
  font-weight: 700;
  border-radius: 14px;
  padding: 10px 14px;
}
.btn-gold:hover{ filter: brightness(.98); }

.btn-soft{
  background: rgba(15,42,34,.06);
  border: 1px solid rgba(15,42,34,.10);
  color: var(--ambar-900);
  border-radius: 14px;
  padding: 9px 12px;
}
.btn-soft:hover{ background: rgba(15,42,34,.09); }

.card-ambar{
  border-radius: var(--r18);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: 0 14px 28px rgba(2,6,23,.10);
  overflow: hidden;
}

.unit-cover{
  height: 220px;
  background: #e5e7eb;
  position: relative;
}
.unit-cover img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.unit-badge{
  position: absolute;
  left: 14px; top: 14px;
  background: rgba(15,42,34,.92);
  color: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .85rem;
  border: 1px solid rgba(242,193,78,.35);
}

.price-pill{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(242,193,78,.22);
  border: 1px solid rgba(242,193,78,.35);
  font-weight: 700;
  color: #1b1b1b;
}

.section-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.kicker{
  color: var(--muted);
  font-size: .95rem;
}

.gallery-thumb{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}
.gallery-thumb img{
  width:100%; height: 140px;
  object-fit: cover;
  display:block;
}

.panel{
  border-radius: var(--r18);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
}

.footer-ambar{
  background: linear-gradient(90deg, #0b1b16, var(--ambar-900));
  color: #fff;
}
.footer-title{ font-family: Fraunces, Georgia, serif; font-weight: 700; }
.footer-muted{ color: rgba(255,255,255,.72); }

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #25d366;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 18px 36px rgba(0,0,0,.25);
  z-index: 9999;
  text-decoration: none;
}
.wa-float:hover{ filter: brightness(.98); color:#fff; }

.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(15,23,42,.12);
  padding: 10px 12px;
}
.table{
  --bs-table-bg: transparent;
}

.badge-status{
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 700;
}

/* Botón "Mis reservas" en la navbar: blanco y legible */
.nav-ambar .btn.btn-soft{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Hover más marcado */
.nav-ambar .btn.btn-soft:hover{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.38) !important;
  color: #fff !important;
}

/* Iconos dentro del botón */
.nav-ambar .btn.btn-soft i{
  color: #fff !important;
}

/* Si en móvil se ve apagado, refuerza el foco */
.nav-ambar .btn.btn-soft:focus,
.nav-ambar .btn.btn-soft:active{
  box-shadow: 0 0 0 .25rem rgba(242,193,78,.25) !important;
}

/* Pills dentro del HERO: que se vean blancas y con contraste */
.hero .price-pill{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #fff !important;
}

/* El texto "muted" dentro de las pills (ej: / noche) */
.hero .price-pill .text-muted{
  color: rgba(255,255,255,.78) !important;
}

/* Iconos dentro de las pills (Wi-Fi, A/C, etc.) */
.hero .price-pill i{
  color: #fff !important;
}

/* Navbar links: más blancos y legibles */
.nav-ambar .nav-link{
  color: rgba(255,255,255,.90) !important;
  font-weight: 600;
}

/* Hover/active con más vida */
.nav-ambar .nav-link:hover,
.nav-ambar .nav-link:focus{
  color: #fff !important;
}

.nav-ambar .nav-link.active{
  color: #fff !important;
}

/* Opcional: subrayado dorado suave al pasar */
.nav-ambar .nav-link{
  position: relative;
}
.nav-ambar .nav-link::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: .15rem;
  width: 0;
  height: 2px;
  background: rgba(242,193,78,.9);
  border-radius: 999px;
  transition: width .18s ease;
}
.nav-ambar .nav-link:hover::after{
  width: 100%;
}

/* Botón "Contacto" (btn-soft) dentro del HERO: blanco y con contraste */
.hero .btn.btn-soft{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Hover más visible */
.hero .btn.btn-soft:hover{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
}

/* Icono del telefonito */
.hero .btn.btn-soft i{
  color: #fff !important;
}

/* Focus bonito */
.hero .btn.btn-soft:focus{
  box-shadow: 0 0 0 .25rem rgba(242,193,78,.25) !important;
}
/* Footer: botones "Unidades / Video / Contacto" con buen contraste */
.footer-ambar .btn.btn-soft{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Hover más visible */
.footer-ambar .btn.btn-soft:hover{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
}

/* Iconos (si algún botón tiene icono) */
.footer-ambar .btn.btn-soft i{
  color: #fff !important;
}

/* Focus bonito */
.footer-ambar .btn.btn-soft:focus{
  box-shadow: 0 0 0 .25rem rgba(242,193,78,.25) !important;
}