:root{
  --clr-primary:#8a6d60; /* marca */
  --clr-secondary:#1D5061; /* accent */
  --clr-light:#f7f7f7;
  --clr-dark:#222;
  --ff-base:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-display:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --radius-lg:20px; --radius-xl:28px;
  --shadow-sm:0 6px 16px rgba(0,0,0,.06);
  --shadow-md:0 10px 30px rgba(0,0,0,.12);
  --maxw:1200px;
}

/* Reset bàsic */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-base);color:var(--clr-dark);line-height:1.6;background:#fff}
img{max-width:100%;display:block}
.container{width:92%;max-width:var(--maxw);margin-inline:auto}

/* Accessibilitat */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:.5rem;border-radius:8px;z-index:10000}

/* Tipografia general */
h1,h2{font-family:var(--ff-display);letter-spacing:.2px}
.section-title{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:600;text-align:center;margin-bottom:2rem;position:relative}
.section-title span{display:inline-block;position:relative}
.section-title span::after{content:"";display:block;width:66px;height:4px;background:var(--clr-primary);margin:.6rem auto 0;border-radius:10px}
.lead{text-align:center;color:#555;max-width:820px;margin:0 auto 2rem}

/* Botons */
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:.9rem 1.5rem;border-radius:999px;transition:transform .25s}
.btn:focus-visible{outline:3px solid #0004;outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--clr-primary);color:#fff}
.btn-outline{border:2px solid var(--clr-primary);color:var(--clr-primary);background:#fff}

/* Navbar */
.navbar{position:fixed;inset-inline:0;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);z-index:1000;border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.logo img{height:58px}
.nav-menu{display:none}
.nav-list{list-style:none;display:flex;gap:1.5rem}
.nav-list a{text-decoration:none;font-weight:600;color:var(--clr-dark);padding:.3rem .2rem;border-radius:8px}
.nav-list a:hover{color:var(--clr-primary)}
.nav-toggle{background:none;border:0;cursor:pointer;padding:.5rem;display:grid;place-items:center}
.hamburger,.hamburger::before,.hamburger::after{width:26px;height:3px;background:var(--clr-dark);border-radius:3px;display:block;position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}



/* Menú mòbil */
.mobile-panel{position:fixed;inset:70px 0 auto 0;background:#fff;box-shadow:var(--shadow-md);transform:translateY(-120%);transition:transform .3s ease;z-index:999}
.mobile-panel.open{transform:translateY(0)}
.mobile-panel ul{list-style:none;padding:1rem}
.mobile-panel li{border-bottom:1px solid #eee}
.mobile-panel a{display:block;padding:1rem 1.2rem;color:var(--clr-dark);text-decoration:none;font-weight:600}

/* HERO (portada del lloc) */
.hero{position:relative;min-height:92vh;background:url('img/hero_1.webp') center/cover no-repeat, url('img/hero_1.png') center/cover no-repeat;display:grid;place-items:center;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(255,255,255,0) 80%);z-index:0;pointer-events:none}
.hero-content{position:relative;color:#fff;padding:8rem 0 4rem;z-index:1}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:600;line-height:1.15;color:#fff}
.hero p{font-size:clamp(1.05rem,2.4vw,1.25rem);margin:.9rem 0 1.4rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Utilitats de secció */
.section{padding:4.5rem 0}
.section.light{background:var(--clr-light)}
.grid{display:grid;gap:1.6rem}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Trust */
.trust{display:grid;grid-auto-flow:column;gap:2rem;align-items:center;justify-content:center;opacity:.9}
.trust img{height:50px;filter:grayscale(1)}

/* Cards genèriques */
.card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card img{width:100%;height:180px;object-fit:cover}
.card-body{padding:1rem 1.1rem 1.3rem}
.card h3{font-size:1.15rem;margin-bottom:.4rem}
.muted{color:#666}

/* ===== Serveis – enllaços i grid de 3 ===== */

/* 1) Grid de serveis en files de 3 (responsive) */
#serveis .services-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){
  #serveis .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #serveis .services-grid{ grid-template-columns: 1fr; }
}

/* 2) Targetes: alçada d’imatge una mica més generosa */
#serveis .card img{
  height: 200px;             /* abans 180px */
  object-fit: cover;
}

/* 3) Estil d’enllaç “de revista” dins de la targeta (sense blau/subratllat clàssic) */
#serveis .card h3 a,
#serveis .card a.card-link{
  text-decoration: none;
  color: var(--clr-dark);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Icona/fletxa subtil al costat del text */
#serveis .card h3 a::after,
#serveis .card a.card-link::after{
  content: "→";
  font-size: 1.05em;
  transform: translateX(0);
  transition: transform .2s ease;
}

/* Hover/focus amb color de marca i subratllat net */
#serveis .card h3 a:hover,
#serveis .card h3 a:focus-visible,
#serveis .card a.card-link:hover,
#serveis .card a.card-link:focus-visible{
  color: var(--clr-primary);
  border-color: currentColor;         /* subratllat net sota el text */
  outline: none;                      /* evitem doble focus; confiem en el border */
}
#serveis .card h3 a:hover::after,
#serveis .card a.card-link:hover::after{
  transform: translateX(4px);
}

/* Accessibilitat: focus visible si naveguem amb teclat sobre la targeta sencera */
#serveis .card:focus-within{
  box-shadow: var(--shadow-md);
  outline: 3px solid #00000022;
  outline-offset: 2px;
}


/* Galeria projectes */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.2rem}
.chip{border:1px solid #ddd;border-radius:999px;padding:.45rem .9rem;font-weight:700;font-size:.95rem;background:#fff;cursor:pointer}
.chip.active{border-color:var(--clr-primary);color:var(--clr-primary);box-shadow:0 0 0 3px rgba(138,109,96,.12)}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(12,1fr)}
.tile{grid-column:span 12;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.tile .caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff;padding:.4rem .6rem;border-radius:10px;font-size:.9rem}
@media(min-width:640px){.tile.sm-6{grid-column:span 6}.tile.sm-4{grid-column:span 4}.tile.tall img{aspect-ratio:3/4}}

/* Abans / Després */
.ba{display:grid;gap:1.2rem;align-items:center}
.ba-wrap{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.ba-wrap img{display:block;width:100%;height:auto}
.ba-after{position:absolute;inset:0;overflow:hidden}
.ba-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 0 round 0)}
.ba-handle{position:absolute;inset:0;pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.ba input[type=range]{width:100%}

/* Procés */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step}
.step{background:#fff;border:1px solid #eee;border-radius:var(--radius-lg);padding:1.1rem;box-shadow:var(--shadow-sm)}
.step h4{font-size:1.05rem;margin:.4rem 0 .3rem}
.step::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;background:var(--clr-secondary);color:#fff;width:32px;height:32px;border-radius:50%;font-weight:700}

/* Testimonis */
.carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px}
.tcard{flex:0 0 320px;scroll-snap-align:start}
.tcard .card-body{min-height:150px}

/* FAQ */
.faq{max-width:900px;margin-inline:auto;}
.faq-item{border:1px solid #eee;border-radius:var(--radius-lg);background:#fff;margin-bottom:.8rem;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;cursor:pointer;font-weight:700;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.1rem}
.faq-item.open .faq-a{max-height:260px;padding:0 1.1rem 1rem}

/* =========================
   Contacte (secció #contacte)
   ========================= */

/* Layout */
#contacte .contact{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  #contacte .contact{ grid-template-columns:1.2fr .8fr; align-items:start; }
}

/* Targetes */
#contacte .contact-card{
  background:#fff;
  border-radius:var(--radius-xl);
  padding:1.2rem 1.2rem 1.4rem;
  box-shadow:var(--shadow-md);
}
#contacte .contact-info{
  background:var(--clr-light);
  border-radius:var(--radius-xl);
  padding:1.2rem;
  box-shadow:var(--shadow-sm);
}

/* Formulari */
#contacte .form{ display:grid; gap:1rem; }
#contacte .form input[type="text"],
#contacte .form input[type="email"],
#contacte .form textarea{
  width:100%;
  padding:.9rem;
  border:1px solid #dcdcdc;
  border-radius:12px;
  font:inherit;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
#contacte .form textarea{ resize:vertical; }
#contacte .form input:focus,
#contacte .form textarea:focus{
  outline:0;
  border-color:var(--clr-secondary);
  box-shadow:0 0 0 4px rgba(29,80,97,.12);
}

/* Enllaços corporatius genèrics (p.ex. dins del consent) */
#contacte a.lnk{
  color:inherit;
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
#contacte a.lnk:hover{
  color:var(--clr-primary, #8a6d60);
  border-color:var(--clr-primary, #8a6d60);
}

/* Consentiment RGPD (checkbox + text a l'esquerra) */
#contacte .form label.consent{
  display:grid !important;              /* anul·la possibles label globals */
  grid-template-columns:auto 1fr;
  align-items:start !important;
  gap:10px;
  margin:12px 0 16px;
  font-size:.95rem;
  color:#555;
}
#contacte .form label.consent input{ margin:3px 0 0 0; }
#contacte .form label.consent span{ display:block; text-align:left; }

/* Botó Enviar */
#contacte .btn.btn-primary{
  width:100%;
  background:#fff;
  color:var(--clr-primary, #8a6d60);
  border:2px solid var(--clr-primary, #8a6d60);
  padding:14px 22px;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  transition:background-color .2s, color .2s, border-color .2s;
}
#contacte .btn.btn-primary:hover{
  background:var(--clr-primary, #8a6d60);
  color:#fff;
  border-color:var(--clr-primary, #8a6d60);
}
#contacte .btn.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

#contacte .form-msg{ margin-top:10px; font-size:.95rem; }

/* Subtítols info (Ubicació, Telèfon, Email, WhatsApp, Horari) */
#contacte .contact-info h3{
  font-size:1.05rem;
  font-weight:700;
  margin-top:1rem;
  margin-bottom:.25rem;
  color:#000;
}

/* Enllaços de la columna de informació: diferenciats en marró */
#contacte .contact-info a.lnk{
  display:inline-block;
  font-size:.95rem;
  font-weight:500;
  color:#8a6d60;                 /* marró corporatiu */
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
#contacte .contact-info a.lnk:hover{
  color:#5c4941;                 /* marró més fosc al hover */
  border-color:#8a6d60;          /* subratllat subtil */
}

/* Separador just abans de la llista d'horari */
#contacte .contact-info h3 + .horari{
  border-top:1px solid #e0e0e0;
  padding-top:1rem;
  margin-top:.5rem;
}

/* Llista d'horari */
#contacte .horari{
  list-style:none;
  padding:0;
  margin:.5rem 0 0;
  font-size:.9rem;
  color:#555;
}
#contacte .horari li{ margin:.25rem 0; }
#contacte .horari strong{ color:#000; }

/* Honeypot ocult */
#contacte .hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }




/* Footer */
.footer{background:#111;color:#fff;padding:1.4rem 0;margin-top:3rem}
.footer .foot{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.footer a{color:#fff;text-decoration:underline}
.social{display:flex;gap:.8rem;align-items:center}
.social img{width:22px;opacity:.9}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Desktop nav */
@media (min-width: 768px){
  .nav-toggle{ display:none !important; }
  .nav-menu{ display:block !important; }
}

/* =========================================================
   CUINES · SHOWROOM (disseny editorial visual)
   ========================================================= */
.kitchens { --k-dark:#111; --k-light:#fff; --k-ink:#222; --k-accent:#8a6d60; }
.kitchens .container { width:92%; max-width:1200px; margin-inline:auto; }

/* HERO de cuines amb text a la meitat dreta */
.k-hero{position:relative;min-height:72vh;overflow:hidden}
.k-hero picture,.k-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Ombres per garantir contrast a la banda dreta (on hi ha el text) */
.k-hero--split-right .k-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
}

.k-hero--split-right .k-hero__content{
  position:relative; z-index:2; color:#fff;
  display:grid; grid-template-columns:1fr 1fr; align-items:end;
  padding:clamp(2.5rem,6vw,5rem) 0 3rem;
}
.k-hero--split-right .k-block{
  grid-column:2;           /* col·loca el text a la meitat dreta */
  text-align:left;
  max-width:640px;
  margin-left:2rem;
}

/* Tipografia hero cuines */
.k-title{
  font-family:var(--ff-display, Georgia, serif);
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  line-height:1.15; font-weight:600; margin:0 0 .4rem;
}
.k-title strong{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:4px; }
.k-sub{ max-width:820px; font-size:clamp(1rem,2.1vw,1.2rem); opacity:.95; margin:.5rem 0 1rem; }
.k-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* Blocs alterns imatge/text (si els fas servir a la secció) */
.k-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:3.2rem 0}
.k-split__media{border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.k-split__media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.k-split__text{padding:0 .6rem}
.k-hl{font-family:var(--ff-display, Georgia, serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;color:var(--k-ink);margin-bottom:.4rem}
.k-copy{font-size:clamp(1rem,2vw,1.15rem);color:#444;margin:.3rem 0 .8rem}
.k-bullets{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.k-bullets li::before{content:"• ";color:var(--k-accent);font-weight:800;margin-right:.2rem}
.k-ctarow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}

/* Banner (hero intermig amb text sobreposat) */
/* .k-banner{position:relative;margin:2.2rem 0;min-height:56vh;overflow:hidden;border-radius:28px} */
.k-banner{position:relative;margin:0;min-height:56vh;overflow:hidden;border-radius:0}
.k-banner picture,.k-banner img{border-radius:0}
.k-banner picture,.k-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-banner__shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))}
.k-banner__content{position:relative;z-index:2;color:#fff;display:grid;place-items:center;text-align:center;padding:3.2rem 1rem}
.k-title--small{font-size:clamp(1.3rem,3vw,2.1rem)}
.k-sub--tight{max-width:720px}

/* Microcopy SEO local discret */
.k-seo{color:#666;text-align:center;margin:1.2rem auto 0;font-size:.95rem}

/* Responsiu secció cuines */
@media (max-width:960px){
  .k-hero--split-right .k-hero__content{grid-template-columns:1fr}
  .k-hero--split-right .k-block{grid-column:1;margin-left:0}
  .k-hero{min-height:64vh}
  .k-split{grid-template-columns:1fr}
  .k-split--reverse .k-split__media{order:1}
  .k-split--reverse .k-split__text{order:2}
}

/* Suau zoom en hover (opc.) */
@media (prefers-reduced-motion:no-preference){
  .k-split__media img{transform:scale(1.02);transition:transform .6s ease}
  .k-split__media:hover img{transform:scale(1.06)}
}

/*EXTRES EN COSNTRUCCIO*/
a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}