/* =========================
   VARIABLES
   ========================= */
:root{
  --color-gold:  #b79a54;
  --footer-bg:   rgba(26,26,26,0.98); /* mateix fons que el menú principal */
  --gold:  #b79a54;
  --nav-h: 76px;
  --color-black: #111;
  --color-white: #fff;
}

/* =========================
   BASE
   ========================= */
body{
  background-color:#fff;
  color:#121212;
  margin:0; padding:0;
  overflow-x:hidden; width:100%;
  font-family:'Public Sans', sans-serif;

  /* Compensa el navbar fixe (ajusta si canvies l’alçada) */
  padding-top:var(--nav-h, 76px);
}

/* Helper: seccions pantalla completa */
.section-100vh{ min-height:100vh; display:grid; align-items:center; }

/* =========================
   NAVBAR
   ========================= */
.navbar{
  position:fixed; top:0; left:0; right:0;
  background-color:rgba(26,26,26,0.98);
  box-shadow:0 2px 5px rgba(0,0,0,0.5);
  z-index:100; width:100%;
  backdrop-filter:blur(6px);
}

/* Efecte neó mòbil (barra corta que es mou) */
.navbar::after{
  content:""; position:absolute; bottom:0; left:-40%;
  width:45%; height:2px;
  background:linear-gradient(90deg,transparent, rgba(183,154,84,.6), rgba(183,154,84,.95), rgba(183,154,84,.6), transparent);
  animation:neon-move 5s ease-in-out infinite alternate;
}
@keyframes neon-move{
  0%{ left:-40%; } 100%{ left:100%; }
}

/* Alçada estable */
.navbar .container{ min-height:72px; }

/* Links */
.nav-item .nav-link{
  color:#fff; font-weight:800; letter-spacing:.2px;
  text-decoration:none;
  padding:.6rem .75rem; border-radius:10px;
  transition: color .15s ease, background .15s ease, text-decoration-color .15s ease, text-underline-offset .15s ease;
}
.nav-item .nav-link:hover{
  text-decoration:underline;
  text-decoration-color:var(--color-gold);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  background:rgba(255,255,255,.03);
}
/* Actiu */
.nav-item .nav-link.active,
.nav-item .nav-link[aria-current="page"]{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(183,154,84,.18) inset, 0 0 14px rgba(183,154,84,.25);
  text-decoration:underline;
  text-decoration-color:var(--color-gold);
  text-underline-offset:3px;
}

/* Logo (aplica també al <img> del brand) */
.logo,
.navbar .navbar-brand img{
  width:150px; height:60px; object-fit:contain;
  transition: width .3s ease, height .3s ease, filter .2s ease;
  filter: drop-shadow(0 0 8px rgba(183,154,84,.25));
  margin-left: 30px;
}
.logo:hover,
.navbar .navbar-brand img:hover{ filter: drop-shadow(0 0 10px rgba(183,154,84,.4)); }

/* Xarxes a la barra */
.iconos-redes{
  color:#fff; font-size:1.05rem; opacity:.9;
  transition: color .3s ease, opacity .3s ease, transform .2s ease;
}
.iconos-redes:hover{ color:var(--color-gold); opacity:1; transform:translateY(-1px); }

/* Toggler (hamburguesa) */
.navbar-toggler{
  border-color:rgba(183,154,84,.5);
  border-radius:10px; padding:.4rem .55rem;
}
.navbar-toggler:focus{ box-shadow:0 0 0 .15rem rgba(183,154,84,.35); }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(183,154,84,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ombra més marcada amb scroll */
.navbar.scrolled{ box-shadow:0 8px 28px rgba(0,0,0,.45); }

/* Focus accessible */
.nav-item .nav-link:focus-visible{
  outline:2px solid var(--color-gold); outline-offset:2px; border-radius:8px;
}

.navbar-aside .nav-phone{
  color:#fff; text-decoration:none;
  padding:.35rem .6rem; border-radius:10px; border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.navbar-aside .nav-phone i{ font-size:1.05rem; color:var(--color-gold); }
.navbar-aside .nav-phone:hover{
  background:rgba(255,255,255,.05);
  border-color: rgba(183,154,84,.35);
  transform: translateY(-1px);
}
.navbar-aside .nav-social{
  color:#fff; font-size:1.05rem; opacity:.95;
  padding:.25rem; border-radius:10px;
  transition: color .2s ease, opacity .2s ease, transform .15s ease, background .2s ease;
}
.navbar-aside .nav-social:hover{
  color:var(--color-gold); opacity:1; transform:translateY(-1px);
  background: rgba(255,255,255,.05);
}

/* peu del menú dins el collapse (mòbil/tablet) */
.navbar-mobile-footer{
  border-top:1px solid rgba(183,154,84,.35);
  text-align:center;
}
.navbar-mobile-footer .nav-phone{
  color:#fff; text-decoration:none;
  padding:.45rem .8rem; border-radius:12px;
  display:inline-flex; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  transition:background .2s ease, transform .15s ease, border-color .2s ease;
}
.navbar-mobile-footer .nav-phone i{ color:var(--color-gold); }
.navbar-mobile-footer .nav-phone:hover{
  background:rgba(255,255,255,.07);
  border-color: rgba(183,154,84,.35);
  transform: translateY(-1px);
}
.navbar-mobile-footer .mobile-socials a{
  display:inline-grid; place-items:center;
  width:40px; height:40px; margin:0 .15rem;
  color:#fff; border-radius:10px;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.navbar-mobile-footer .mobile-socials a:hover{
  color:var(--color-gold); background:rgba(255,255,255,.06);
}


/* Responsiu */
@media (max-width:1200px){
  .logo, .navbar .navbar-brand img{ width:260px; height:52px; margin-left: -30px;}
}
@media (max-width:768px){
  .logo, .navbar .navbar-brand img{ width:200px; height:40px; }
  .navbar::after{ left:-10%; width:120%; }
}

/* =========================
   EFECTES D’ENTRADA (helpers)
   ========================= */
@keyframes subtle-neon-glow{
  from{ text-shadow:0 0 5px rgba(236,198,0,.3), 0 0 10px rgba(236,198,0,.3); }
  to  { text-shadow:0 0 8px rgba(236,198,0,.5), 0 0 12px rgba(236,198,0,.4); }
}
.appear{ opacity:0; transform:translateY(20px); transition:opacity .8s ease-out, transform .8s ease-out; }
.appear.active{ opacity:1; transform:none; }
.appear-bottom{ opacity:0; transform:translateY(50px); transition:opacity .8s ease-out, transform .8s ease-out; }
.appear-bottom.active{ opacity:1; transform:none; }
.appear-top{ opacity:0; transform:translateY(-50px); transition:opacity .8s ease-out, transform .8s ease-out; }
.appear-top.active{ opacity:1; transform:none; }
.appear-left{ opacity:0; transform:translateX(-50px); transition:opacity 1s ease-out, transform 1s ease-out; }
.appear-left.active{ opacity:1; transform:none; }
.appear-right{ opacity:0; transform:translateX(50px); transition:opacity 1s ease-out, transform 1s ease-out; }
.appear-right.active{ opacity:1; transform:none; }

/* =========================
   FOOTER (classes pròpies)
   ========================= */
/* ===== Footer 4 columnes ===== */
.footer4{
  background: rgba(26,26,26,0.98);
  color:#e9ecef;
  border-top:1px solid rgba(255,255,255,.08);
  padding-block: 36px 18px;
  position: relative;
  overflow: hidden;
}

/* Marca + text */
.footer4__brand{ color:#f8f9fa; text-decoration:none; }
.footer4__logo{ filter: drop-shadow(0 0 8px rgba(183,154,84,.22)); }
.footer4__text{ color:#cfd3d9; margin-bottom:.75rem; }

/* Títols de columna */
.footer4__title{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  margin-bottom:.6rem;
  position:relative;
}
.footer4__title::after{
  content:"";
  display:block;
  width:84px; height:2px;
  margin-top:.35rem;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-gold) 0%, rgba(183,154,84,.2) 85%, transparent 100%);
  box-shadow:0 4px 16px rgba(183,154,84,.28);
}

/* Enllaços de llistes */
.footer4__links a{
  color:#f1f3f5; text-decoration:none; display:inline-block;
  padding:.25rem 0; opacity:.95; font-weight:600;
  transition: color .2s ease, opacity .15s ease, transform .15s ease;
}
.footer4__links a:hover{ color:var(--color-gold); opacity:1; transform:translateX(2px); }

/* Botó/CTA petit */
.footer4__cta{
  display: inline-block;
  color: var(--color-white);
  background: var(--color-gold) !important;
  border: 1px solid rgba(183, 154, 84, 0.95);
  border-radius: 12px; padding:.45rem .65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px rgba(183, 154, 84, 0.12),
    0 12px 28px rgba(183, 154, 84, 0.28);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.footer4__cta:hover{
  transform: translateY(-1px);
  color: var(--color-white);
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 2px rgba(183, 154, 84, 0.16),
    0 16px 36px rgba(183, 154, 84, 0.34);
}
.footer4__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0)
  );
  transition: left 0.4s ease;
  opacity: 0.75;
  pointer-events: none;
}

.footer4__cta:hover::after {
  left: 110%;
}

/* Socials + contactes */
.footer4__socials{ display:flex; gap:.6rem; margin:.35rem 0 .25rem; }
.footer4__socials a{
  color:#f8f9fa; font-size:1.2rem; opacity:.95;
  transition: color .2s ease, opacity .15s ease, transform .15s ease;
}
.footer4__socials a:hover{ color:var(--color-gold); opacity:1; transform:translateY(-1px); }

.footer4__contacts a{
  color:#f8f9fa; text-decoration:none; display:flex; align-items:center; gap:.5rem;
  padding:.2rem 0; font-weight:700; opacity:.95;
  transition: color .2s ease, opacity .15s ease, transform .15s ease;
}
.footer4__contacts a:hover{ color:var(--color-gold); opacity:1; transform:translateX(2px); }
.footer4__contacts i{ color:var(--color-gold); font-size:1rem; }

/* Divider i bottom bar */
.footer4__divider{
  border:0; height:1px; margin: 18px 0 12px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.footer4__bottom a{ color:#f8f9fa; text-decoration:none; border-bottom:1px dashed rgba(183,154,84,.6); }
.footer4__bottom a:hover{ color:var(--color-gold); border-bottom-color:var(--color-gold); }

/* Responsive */
@media (max-width: 991.98px){
  .footer4{ padding-block: 28px 16px; }
}
@media (max-width: 575.98px){
  .footer4__bottom{ justify-content:center; text-align:center; }
}



/* Botons*/
/* --- Botons --- */
.button-cta {
  display: inline-block;
  color: var(--color-white);
  background: var(--color-gold) !important;
  border: 1px solid rgba(183, 154, 84, 0.95);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px rgba(183, 154, 84, 0.12),
    0 12px 28px rgba(183, 154, 84, 0.28);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.button-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 2px rgba(183, 154, 84, 0.16),
    0 16px 36px rgba(183, 154, 84, 0.34);
}

.button-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0)
  );
  transition: left 0.4s ease;
  opacity: 0.75;
  pointer-events: none;
}

.button-cta:hover::after {
  left: 110%;
}

/* ===== Cookie Banner (cantonada inferior esquerra) ===== */
.cookie-banner{
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  width: min(92vw, 360px);
  background: rgba(26,26,26,0.98);
  color: #f1f3f5;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  padding: 18px 16px 14px;
}

/* imatge/emoji que sobresurt */
.cookie-banner__img,
.cookie-banner__emoji{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -16px; /* sobresurt una mica per damunt */
  width: 48px; height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  display: grid; place-items: center;
}
.cookie-banner__emoji{ font-size: 28px; }

/* separació interior perquè no tapi el títol */
.cookie-banner__content{ padding-top: 20px; }

.cookie-banner__title{
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
}

.cookie-banner__text{
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.4;
  color: #dfe3e8;
}
.cookie-banner__link{
  color: var(--color-gold, #b79a54);
  text-decoration: underline;
}
.cookie-banner__link:hover{ text-decoration: none; }

.cookie-banner__actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Botons coherents amb la teva paleta */
.cookie-banner .btn-warning{
  background: var(--color-gold, #b79a54);
  border-color: rgba(183,154,84,.95);
  color:#111;
}
.cookie-banner .btn-warning:hover{
  filter: brightness(1.05);
}
.cookie-banner .btn-outline-light{
  border-color: rgba(255,255,255,.6);
  color:#f8f9fa;
}
.cookie-banner .btn-outline-light:hover{
  background: rgba(255,255,255,.12);
}

/* Accessibilitat i reducció de moviment */
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition: none !important; }
}

/* Responsiu (mòbil: una mica més ampla i centrada si cal) */
@media (max-width: 420px){
  .cookie-banner{ left: 10px; right: 10px; width: auto; }
}

/* ===== Botons flotants (FAB) ===== */
.fab-wrap{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1030; /* cookie banner és 9999 a l'esquerra */
  display: grid;
  gap: 10px;
}
.btn-fab{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(183,154,84,.9);
  background: rgba(26,26,26,.88);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .2s ease;
  opacity: 1;
}
.btn-fab[hidden]{ opacity: 0; pointer-events: none; }
.btn-fab:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn-fab i{ font-size: 1.1rem; color: var(--color-gold); }

.btn-fab--primary{
  background: var(--color-gold);
  color: var(--color-black);
  border-color: rgba(183,154,84,1);
  box-shadow: 0 12px 28px rgba(183,154,84,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-fab--primary i{ color: var(--color-black); }

/* ===== Offcanvas xat ===== */
.ai-chat{ width: min(420px, 92vw); background: rgba(26,26,26,.98); color: #edf1f5; }
.ai-chat .offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.08); }
.ai-chat .offcanvas-title i{ color: var(--color-gold); }

.ai-chat__messages{
  flex: 1 1 auto;
  overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  /* padding: top  right                        bottom  left  */
  padding: 8px calc(14px + env(safe-area-inset-right, 0px))
              88px calc(14px + env(safe-area-inset-left, 0px));
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges; /* evita que el scroll tapi contingut */
}
.msg{ max-width: 86%; }
.msg__bubble{
  padding: .55rem .7rem; border-radius: 12px; line-height: 1.25;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.msg__meta{
  font-size: .75rem; opacity: .75; color: #cfd3d9;
}

/* Bot: a l'esquerra */
.msg--bot .msg__bubble{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.msg--bot .msg__meta{
  text-align: left;
  margin-top: 6px;
}

/* Usuari: a la dreta */
.msg--user{
  margin-left: auto; text-align: right;
}
.msg--user .msg__bubble{
  background: var(--color-gold);
  color: var(--color-black);
  border: 1px solid rgba(183,154,84,1);
}
.msg--user .msg__meta{
  text-align: right;
  color: rgba(251, 251, 251, 0.7);
  margin-top: 6px;
}


.ai-chat__form{
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.ai-chat__form .form-control{
  background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14);
}
.ai-chat__form .form-control::placeholder{ color:#cbd3da; }
.btn-gold{
  background: var(--color-gold); color: var(--color-black); border-color: rgba(183,154,84,.95);
  font-weight: 800; border-radius: 10px;
}
.btn-gold:hover{ filter: brightness(1.05); border-color: rgba(183,154,84,.95);}

/* Mòbil: puja una mica per no trepitjar sistemes gest */
@media (max-width: 480px){
  .fab-wrap{ right: 12px; bottom: 12px; gap: 8px; }
  .btn-fab{ width: 44px; height: 44px; }
}

/* Respecta preferències de moviment */
@media (prefers-reduced-motion: reduce){
  .btn-fab, .btn-gold{ transition: none !important; }
}