/* xl - DESKTOP STYLES */ 
/* ── NAV (Estat general per a pàgines internes) ── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 60px;
    background: rgba(245,237,224,0.95); /* Fons sòlid crema */
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cream-dark);
    box-shadow: 0 2px 20px rgba(92,61,30,.12);
    transition: all .4s ease;
}

/* EXCEPCIÓ: Transparència només a la Home sense scroll */
body.home nav:not(.scrolled) {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

/* Estat quan es fa scroll (Home o Internes) */
nav.scrolled {
    background: rgba(245,237,224,0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cream-dark);
    box-shadow: 0 2px 20px rgba(92,61,30,.12);
}

/* ── LOGO ── */
.nav-logo {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--brown); /* Color fosc per defecte */
    text-decoration: none;
    letter-spacing: .5px;
    transition: color .4s ease;
}
.nav-logo span { font-style: normal; }

/* Logo blanc només a la Home sense scroll */
body.home nav:not(.scrolled) .nav-logo { color: #fff; }

/* Gestió d'imatges del logo */
.logo-white { display: none; }
.logo-color { display: block; }

body.home nav:not(.scrolled) .logo-white { display: block; }
body.home nav:not(.scrolled) .logo-color { display: none; }

/* ── LINKS ── */
.nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
}
.nav-links a {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mid); /* Color fosc per defecte */
    text-decoration: none;
    position: relative;
    transition: color .4s ease;
}

/* Links blancs només a la Home sense scroll */
body.home nav:not(.scrolled) .nav-links a { color: #fff; }

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: var(--orange);
    transition: width .3s;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { width: 100%; }

/* ── BURGER ── */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 101;
}
.burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--brown); /* Burger fosc per defecte */
    border-radius: 2px;
    transition: all .3s;
}

/* Burger blanc només a la Home sense scroll */
body.home nav:not(.scrolled) .burger span { background: #fff; }

.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU (Es manté igual, fons fosc sempre) ── */
.mobile-menu-inner{
	height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.mobile-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--brown);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}
.mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}
.mobile-close {
    position: absolute;
    top: 24px; right: 30px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    transition: color .2s;
}
.mobile-menu ul {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 50px;
}
.mobile-menu ul li a {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.mobile-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
	padding-top:25px;
	border-top:solid 1px #cdcdcd50;
}
.mobile-socials a {
    color: rgba(255,255,255,.6);
    font-size: 1.6rem;
    text-decoration: none;
}

/* md - TABLET PORTRAIT STYLES */ 
@media (max-width: 991px) {
  nav { padding: 18px 24px; }
      .nav-links { display: none; }
      .burger { display: flex; }
}

/* sm - SMARTPHONE LANDSCAPE STYLES */ 
@media (max-width: 767px) {
  nav { padding: 18px 24px; }
      .nav-links { display: none; }
      .burger { display: flex; }
}