/* header.css — shared site header:main nav + mobile hamburger
 Owns:.yb-nav,.yb-hamburger,.yb-mobile-menu,.yb-footer,.yb-whatsapp-fab
 Does NOT own:page-specific hero padding or content layout */

/* ─── MAIN NAV ───────────────────────────────────────────── */
.yb-nav{
 position:sticky;
 top:0;
 left:0;
 right:0;
 z-index:200;
 padding:0 2rem;
 height:48px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 background:rgba(15,15,15,0.95);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 border-bottom:1px solid rgba(245,240,235,0.04);
 transition:all 0.4s cubic-bezier(0.25,0.1,0.25,1);
}

/* Transparent variant — used on hero pages */
.yb-nav.transparent{
 position:fixed;
 background:transparent;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 border-bottom-color:transparent;
}

.yb-nav.transparent.scrolled{
 background:rgba(10,10,10,0.97);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 border-bottom-color:rgba(245,240,235,0.04);
}

.yb-nav.scrolled{
 box-shadow:0 2px 24px rgba(0,0,0,0.4);
}

.yb-nav-logo{
 display:flex;
 align-items:center;
 text-decoration:none;
 flex-shrink:0;
}

.yb-nav-logo img{
 height:28px;
 width:auto;
 display:block;
}

/* Desktop nav links */
.yb-nav-links{
 display:flex;
 align-items:center;
 gap:0.2rem;
}

.yb-nav-links a{
 font-family:'Inter',sans-serif;
 font-size:0.82rem;
 font-weight:500;
 color:rgba(245,240,235,0.65);
 text-decoration:none;
 padding:0.35rem 0.75rem;
 border-radius:6px;
 transition:all 0.2s;
 white-space:nowrap;
 letter-spacing:0.01em;
}

.yb-nav-links a:hover,
.yb-nav-links a.active{
 color:#c9a96e;
 background:rgba(201,169,110,0.06);
}

.yb-nav-cta{
 background:transparent !important;
 color:#c9a96e !important;
 padding:0.42rem 1.2rem !important;
 border:1.5px solid #c9a96e !important;
 border-radius:0 !important;
 font-weight:600 !important;
 font-size:0.78rem !important;
 letter-spacing:0.06em !important;
 text-transform:uppercase !important;
 box-shadow:none;
 margin-left:0.3rem;
 transition:all 0.3s cubic-bezier(0.25,0.1,0.25,1) !important;
}

.yb-nav-cta:hover{
 background:#c9a96e !important;
 color:#0a0a0a !important;
 transform:none !important;
}

/* ─── HAMBURGER BUTTON ───────────────────────────────────── */
.yb-hamburger{
 display:none;
 background:none;
 border:none;
 cursor:pointer;
 padding:0.4rem;
 z-index:210;
 position:relative;
}

.yb-hamburger-bar{
 display:block;
 width:22px;
 height:1.5px;
 background:#f5f0eb;
 border-radius:2px;
 transition:all 0.3s ease;
 margin:5px 0;
}

.yb-hamburger.open .yb-hamburger-bar:nth-child(1){
 transform:rotate(45deg) translate(5px,5px);
}

.yb-hamburger.open .yb-hamburger-bar:nth-child(2){
 opacity:0;
}

.yb-hamburger.open .yb-hamburger-bar:nth-child(3){
 transform:rotate(-45deg) translate(5px,-5px);
}

/* ─── MOBILE MENU ────────────────────────────────────────── */
.yb-mobile-overlay{
 display:none;
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.6);
 z-index:198;
 opacity:0;
 transition:opacity 0.3s;
}

.yb-mobile-overlay.open{
 display:block;
}

.yb-mobile-overlay.visible{
 opacity:1;
}

.yb-mobile-menu{
 position:fixed;
 top:0;
 right:0;
 width:300px;
 max-width:85vw;
 height:100vh;
 background:#0a0a0a;
 z-index:199;
 transform:translateX(100%);
 transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
 display:flex;
 flex-direction:column;
 overflow-y:auto;
 border-left:1px solid rgba(201,169,110,0.08);
}

.yb-mobile-menu.open{
 transform:translateX(0);
}

.yb-mobile-menu-header{
 padding:1.2rem 1.5rem;
 border-bottom:1px solid rgba(245,240,235,0.04);
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.yb-mobile-menu-header img{
 height:30px;
 width:auto;
}

.yb-mobile-close{
 background:none;
 border:none;
 color:rgba(245,240,235,0.4);
 font-size:1.5rem;
 cursor:pointer;
 padding:0.2rem;
 line-height:1;
}

.yb-mobile-nav{
 padding:1rem 0;
 flex:1;
}

.yb-mobile-nav a{
 display:flex;
 align-items:center;
 gap:0.7rem;
 padding:0.85rem 1.5rem;
 font-family:'Inter',sans-serif;
 font-size:0.92rem;
 font-weight:500;
 color:rgba(245,240,235,0.65);
 text-decoration:none;
 transition:all 0.15s;
 border-left:2px solid transparent;
}

.yb-mobile-nav a:hover,
.yb-mobile-nav a.active{
 color:#c9a96e;
 background:rgba(201,169,110,0.04);
 border-left-color:#c9a96e;
}

.yb-mobile-nav-divider{
 border:none;
 border-top:1px solid rgba(245,240,235,0.04);
 margin:0.5rem 1.5rem;
}

.yb-mobile-contact{
 padding:1.2rem 1.5rem;
 border-top:1px solid rgba(245,240,235,0.04);
 display:flex;
 flex-direction:column;
 gap:0.7rem;
}

.yb-mobile-contact a{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:0.82rem;
 font-weight:300;
 color:rgba(245,240,235,0.4);
 text-decoration:none;
}

.yb-mobile-contact a:hover{
 color:#c9a96e;
}

.yb-mobile-whatsapp{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:0.5rem;
 background:#25D366;
 color:#fff !important;
 padding:0.65rem 1.2rem;
 border-radius:0;
 font-size:0.82rem;
 font-weight:600;
 text-decoration:none;
 margin-top:0.3rem;
 transition:opacity 0.2s;
}

.yb-mobile-whatsapp:hover{
 opacity:0.9;
 color:#fff !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px){
 .yb-nav{padding:0 1.2rem;height:48px;}
 .yb-nav-links{display:none;}
 .yb-hamburger{display:block;}
}

/* ─── WHATSAPP FLOATING BUTTON (redesigned luxury) ─────── */
.yb-whatsapp-fab{
 position:fixed;
 bottom:2rem;
 right:2rem;
 z-index:9999;
 display:flex;
 align-items:center;
 gap:0.6rem;
 background:#0a0a0a;
 color:#c9a96e;
 border:1.5px solid rgba(201,169,110,0.3);
 text-decoration:none;
 border-radius:0;
 padding:0.75rem 1.2rem;
 box-shadow:0 4px 24px rgba(0,0,0,0.5);
 font-family:'Inter',sans-serif;
 font-size:0.82rem;
 font-weight:600;
 letter-spacing:0.03em;
 transition:all 0.25s ease;
 white-space:nowrap;
}

@keyframes yb-fab-in{
 from{opacity:0;transform:translateY(20px) scale(0.9);}
 to{opacity:1;transform:translateY(0) scale(1);}
}

/* Subtle bounce every 10s to draw attention without being annoying */
@keyframes yb-fab-pulse{
 0%,85%,100%{transform:translateY(0) scale(1);}
 88%{transform:translateY(-5px) scale(1.04);}
 92%{transform:translateY(0) scale(1);}
 95%{transform:translateY(-3px) scale(1.02);}
 98%{transform:translateY(0) scale(1);}
}

.yb-whatsapp-fab{
 animation:yb-fab-in 0.5s ease-out 1.5s backwards,yb-fab-pulse 10s ease-in-out 4s infinite;
}

.yb-whatsapp-fab:hover{
 background:#c9a96e;
 color:#0a0a0a;
 border-color:#c9a96e;
 transform:translateY(-3px);
 box-shadow:0 8px 32px rgba(201,169,110,0.25);
}

.yb-whatsapp-fab svg{
 width:20px;
 height:20px;
 fill:currentColor;
 flex-shrink:0;
}

@media (max-width:480px){
 .yb-whatsapp-fab{
 bottom:1.2rem;
 right:1.2rem;
 padding:0.7rem;
}
 .yb-fab-label{display:none;}
}

/* ─── SHARED FOOTER (luxury) ─────────────────────────────── */
.yb-footer{
 background:#050505;
 padding:5rem 2rem 2rem;
 border-top:1px solid rgba(245,240,235,0.04);
 font-family:'Inter','Satoshi',sans-serif;
}

.yb-footer-inner{
 max-width:1200px;
 margin:0 auto;
}

.yb-footer-top{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 margin-bottom:3rem;
}

.yb-footer-brand{
 margin-bottom:2rem;
}

.yb-footer-brand img{
 height:40px;
 width:auto;
 filter:brightness(0) invert(0.85);
 margin-bottom:1rem;
 display:block;
 margin-left:auto;
 margin-right:auto;
}

.yb-footer-brand p{
 font-size:0.85rem;
 font-weight:300;
 line-height:1.7;
 color:rgba(245,240,235,0.35);
 max-width:380px;
 margin:0 auto 1.5rem;
}

.yb-footer-socials{
 display:flex;
 justify-content:center;
 gap:0.8rem;
}

.yb-footer-social-link{
 width:36px;
 height:36px;
 border-radius:50%;
 background:transparent;
 border:1px solid rgba(245,240,235,0.08);
 display:flex;
 align-items:center;
 justify-content:center;
 text-decoration:none;
 color:rgba(245,240,235,0.35);
 transition:all 0.2s;
}

.yb-footer-social-link:hover{
 background:rgba(201,169,110,0.08);
 border-color:rgba(201,169,110,0.3);
 color:#c9a96e;
}

.yb-footer-social-link svg{
 width:14px;
 height:14px;
 fill:currentColor;
}

/* Footer columns grid */
.yb-footer-cols{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:2rem;
 max-width:700px;
 margin:0 auto 3rem;
 text-align:left;
}

.yb-footer-col h4{
 font-size:0.65rem;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:0.16em;
 color:#c9a96e;
 opacity:0.5;
 margin-bottom:1.1rem;
}

.yb-footer-col a{
 display:block;
 font-size:0.85rem;
 font-weight:300;
 color:rgba(245,240,235,0.4);
 text-decoration:none;
 margin-bottom:0.6rem;
 transition:color 0.2s;
}

.yb-footer-col a:hover{
 color:#c9a96e;
}

.yb-footer-location{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:0.85rem;
 font-weight:300;
 color:rgba(245,240,235,0.4);
 margin:0.6rem 0 0;
 padding:0;
}

.yb-footer-location svg{
 width:13px;
 height:13px;
 flex-shrink:0;
 color:#c9a96e;
}

.yb-footer-bottom{
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 gap:0.8rem;
 padding-top:2rem;
 border-top:1px solid rgba(245,240,235,0.04);
}

.yb-footer-bottom p{
 font-size:0.72rem;
 font-weight:300;
 color:rgba(245,240,235,0.18);
 letter-spacing:0.04em;
}

.yb-footer-bottom-links{
 display:flex;
 gap:1.5rem;
}

.yb-footer-bottom-links a{
 font-size:0.72rem;
 font-weight:300;
 color:rgba(245,240,235,0.2);
 text-decoration:none;
 transition:color 0.2s;
}

.yb-footer-bottom-links a:hover{
 color:#c9a96e;
}

@media (max-width:768px){
 .yb-footer{padding:3rem 1.2rem 2rem;}
 .yb-footer-cols{
 grid-template-columns:1fr;
 text-align:center;
 gap:1.5rem;
}
 .yb-footer-col h4{margin-bottom:0.8rem;}
}

/* ─── BREADCRUMBS ─────────────────────────────────────────── */
.yb-breadcrumbs{
 padding:0.7rem 2rem;
 background:transparent;
 font-family:'Inter',sans-serif;
 font-size:0.78rem;
 font-weight:300;
 color:rgba(245,240,235,0.35);
 max-width:1400px;
 margin:0 auto;
}

.yb-breadcrumbs ol{
 list-style:none;
 display:flex;
 align-items:center;
 gap:0.4rem;
 flex-wrap:wrap;
 padding:0;
 margin:0;
}

.yb-breadcrumbs li{
 display:flex;
 align-items:center;
 gap:0.4rem;
}

.yb-breadcrumbs li + li::before{
 content:'›';
 color:rgba(245,240,235,0.15);
}

.yb-breadcrumbs a{
 color:rgba(245,240,235,0.35);
 text-decoration:none;
 transition:color 0.2s;
}

.yb-breadcrumbs a:hover{
 color:#c9a96e;
}

.yb-breadcrumbs [aria-current="page"]{
 color:rgba(245,240,235,0.55);
 font-weight:500;
}