/* Renovación visual 2026 inspirada en la fachada real de Wasi Kallpa. */
:root{
  --wk-clay:#d67142;
  --wk-clay-dark:#9a472d;
  --wk-blue:#246db5;
  --wk-blue-light:#5fa2e7;
  --wk-cream:#fff8f2;
  --wk-sand:#f1e7dc;
  --wk-charcoal:#241b18;
  --wk-line:#ead9ce;
  --wk-shadow:0 22px 65px rgba(79,43,29,.15)
}
body{background:var(--wk-cream);color:#342924}
/* Header transparente sobre el banner. Solo adquiere fondo al desplazarse. */
.navbar{
  background:transparent !important;
  box-shadow:none !important;
  border-bottom-color:transparent !important;
}
.navbar:not(.shrink),
.navbar:not(.shrink) .nav-inner,
.navbar:not(.shrink) .nav-links{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.navbar.shrink{
  background:rgba(36,27,24,.92) !important;
  box-shadow:0 10px 35px rgba(41,25,19,.24) !important;
  border-bottom-color:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-links a{font-weight:700;letter-spacing:.01em}.nav-links a:hover{background:rgba(214,113,66,.18)}
.hero .overlay{background:linear-gradient(90deg,rgba(42,24,18,.8),rgba(42,24,18,.22),rgba(28,48,72,.44))}
.hero .panel{background:rgba(48,28,21,.4);border:1px solid rgba(255,255,255,.24);box-shadow:0 25px 80px rgba(0,0,0,.28);backdrop-filter:blur(10px);padding:clamp(24px,4vw,44px);border-radius:24px}
.hero .badge{background:rgba(36,109,181,.28);border:1px solid rgba(95,162,231,.44);color:#fff}
.btn-primary{background:var(--wk-clay)!important;box-shadow:0 14px 30px rgba(154,71,45,.27)!important}.btn-primary:hover{filter:brightness(1.06)}
section{position:relative}.section-title{color:var(--wk-charcoal);letter-spacing:-.025em}.section-sub{line-height:1.75}
.about img,.card,.gallery-card,.map-wrap{border-radius:20px!important;border:1px solid var(--wk-line)!important;box-shadow:0 16px 45px rgba(79,43,29,.09)!important}
.card{background:rgba(255,255,255,.94)}.card:hover{box-shadow:var(--wk-shadow)!important;transform:translateY(-5px)}
.services .icon,#contacto .icon{background:linear-gradient(135deg,var(--wk-blue),var(--wk-blue-light));color:#fff;border-radius:16px}
.gallery-card{overflow:hidden}.gallery-card img{transition:transform .5s ease}.gallery-card:hover img{transform:scale(1.04)}
#contacto{background:linear-gradient(135deg,var(--wk-sand),#f7f1eb)}#contacto .card{max-width:none;margin:0}
.input,textarea{border-color:var(--wk-line)!important;border-radius:13px!important;background:#fff!important}
footer{background:var(--wk-charcoal)!important;color:#f1e7dc!important;border-top:0!important}footer .brand-script,footer .muted,footer a{color:inherit!important}
.whatsapp-fab{box-shadow:0 18px 40px rgba(0,0,0,.28)!important}
@media(max-width:900px){.nav-links{background:linear-gradient(180deg,var(--wk-charcoal),#5b3021)!important}}


/* Ajustes móviles del encabezado y portada - agosto 2026. */
@media (max-width:900px){
  /* El panel móvil debe usar el mismo fondo oscuro del header al hacer scroll. */
  .navbar:not(.shrink) .nav-links,
  .navbar.shrink .nav-links,
  body.menu-open .navbar .nav-links{
    background:rgba(36,27,24,.96) !important;
    background-image:none !important;
    border-left-color:rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  /* Evita que la franja superior permanezca transparente mientras el menú está abierto. */
  body.menu-open .navbar{
    background:rgba(36,27,24,.96) !important;
    box-shadow:0 10px 35px rgba(41,25,19,.24) !important;
    border-bottom-color:rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  /* Logo más visible en teléfonos. */
  .navbar .brand-logo{height:72px !important;width:auto !important;}
  .navbar.shrink .brand-logo{height:64px !important;}

  /* Baja el bloque central del banner en móvil. */
  .hero .content{
    padding:clamp(155px,26vh,220px) 1rem 1rem !important;
  }
  .hero .panel{margin-top:0 !important;}
}

/* Ajuste para teléfonos de poca altura, conservando el texto debajo del encabezado. */
@media (max-width:900px) and (max-height:680px){
  .hero .content{padding-top:145px !important;}
}