@import url("fonts.css");

/* ============================================================
   Brotasol — full d'estils
   Paleta i tipografies recuperades de la configuració original
   ============================================================ */
:root{
  --navy:#213059;
  --navy-dark:#000438;
  --white:#ffffff;
  --blue:#336593;
  --green:#42A521;
  --green-menu:#38b54a;
  --gold:#DBB600;
  --yellow:#eded00;
  --rule:#213059;
  --maxw:1140px;
  --head-h:86px;
  --f-title:"Amatic SC","Open Sans",cursive,sans-serif;
  --f-body:"Dosis","Open Sans",sans-serif;
  --f-ui:"Open Sans",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy);color:var(--white);
  font-family:var(--f-body);font-size:clamp(1.06rem,.92rem + .6vw,1.5rem);
  font-weight:500;line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover,a:focus-visible{color:var(--gold);text-decoration:underline}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:#0b1330;
  font-family:var(--f-ui);font-size:.9rem;font-weight:600;padding:.6rem 1rem;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* ---------- capçalera ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--navy-dark);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  max-width:1400px;margin-inline:auto;padding:.5rem 1.25rem;
  min-height:var(--head-h);display:flex;align-items:center;gap:1.25rem;
}
.brand{margin-right:auto;display:flex;align-items:center}
.brand img{width:120px}
.nav-toggle,.nav-toggle-label{display:none}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem 1.1rem;margin-left:auto}
.site-nav ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:.15rem 1.05rem;justify-content:flex-end;
}
.site-nav a{
  font-family:var(--f-title);font-weight:700;font-size:clamp(1.45rem,.85rem + .75vw,1.8rem);line-height:1.1;
  color:var(--green-menu);display:block;padding:.2rem 0;text-decoration:none;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--yellow)}
.lang-switch{display:flex;gap:.4rem;align-items:center;font-family:var(--f-ui);font-size:.8rem;font-weight:600}
.lang-switch a{font-family:var(--f-ui);font-size:.8rem;color:var(--green-menu);text-transform:uppercase;letter-spacing:.06em}
.lang-switch [aria-current]{color:var(--yellow);text-decoration:underline}
.lang-sep{color:#4a5a86}

/* ---------- seccions ---------- */
.section{padding:clamp(2.5rem,6vw,4.5rem) 1.25rem}
.section > .wrap{max-width:var(--maxw);margin-inline:auto}
.section--light{background:var(--white);color:var(--blue)}
.section--dark{background:var(--navy);color:var(--white)}
.section--light a{color:var(--green)}
.section--light a:hover{color:var(--gold)}

h1,h2,h3{font-family:var(--f-title);font-weight:600;margin:0 0 .5em;line-height:1.05}
.section-title{
  font-size:clamp(3rem,2rem + 4.4vw,5rem);text-align:center;
  margin:0 0 .6em;letter-spacing:.01em;
}
.section--light .section-title{color:var(--blue)}
.section--dark .section-title{color:var(--white)}
.sub-title{
  font-size:clamp(2rem,1.5rem + 2.2vw,2.8rem);text-align:center;margin:1.6em 0 .6em;
}
.section--light .sub-title{color:var(--blue)}
.section--dark .sub-title{color:var(--white)}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.56rem);text-align:center;font-family:var(--f-body);font-weight:500;margin:0 0 1.5em}
.prose p{margin:0 0 1.1em}
.prose{max-width:62ch;margin-inline:auto}
.prose--wide{max-width:none}

/* ---------- botó ---------- */
.btn{
  display:inline-block;font-family:var(--f-title);font-size:1.9rem;line-height:1;
  padding:.5em 1.1em;border-radius:6px;background:var(--green);color:#fff !important;
  text-decoration:none !important;transition:background .2s;
}
.btn:hover{background:var(--gold);color:#1b1b1b !important}
.center{text-align:center}

/* ---------- carrusel ---------- */
.carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem;
}
.carousel img{scroll-snap-align:center;border-radius:8px;width:100%}

/* ---------- graelles d'imatges ---------- */
.img-row{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:center;margin:1.5rem 0}
.img-row img{margin-inline:auto;border-radius:6px}
.img-stack{display:grid;gap:1.5rem;margin:1.5rem 0;justify-items:center}

/* ---------- productes ---------- */
.products{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:2.5rem}
.product{text-align:center}
.product img{margin-inline:auto;max-height:240px;width:auto}
.product h3{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);margin:.6em 0 .15em;color:var(--white)}
.product .stock{font-family:var(--f-ui);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin:0}
.book{display:grid;gap:2rem;grid-template-columns:minmax(180px,240px) 1fr;align-items:center;margin-top:3rem}
.book h3{font-size:clamp(1.7rem,1.4rem + 1.2vw,2.4rem);color:var(--white);margin:0 0 .4em}
.book ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.book ul a{font-family:var(--f-title);font-size:1.7rem}
@media (max-width:600px){.book{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- acordió punts de venda ---------- */
.shops{max-width:860px;margin:2rem auto 0;display:grid;gap:.5rem}
.shops details{border:1px solid #d7dee9;border-radius:6px;background:#f7f9fc}
.shops summary{
  cursor:pointer;padding:.75rem 1rem;font-family:var(--f-title);
  font-size:1.9rem;line-height:1.2;color:var(--blue);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.shops summary::-webkit-details-marker{display:none}
.shops summary::after{content:"+";font-size:1.6rem;color:var(--green);font-family:var(--f-ui);font-weight:600}
.shops details[open] summary::after{content:"–"}
.shops summary:hover{color:var(--green)}
.shops .shops-body{padding:.25rem 1.25rem 1.25rem;font-size:1rem;font-family:var(--f-ui);line-height:1.6;color:#2c3a52}
.shops .shops-body h2,.shops .shops-body h3{font-family:var(--f-ui);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin:1.6em 0 .5em}
.shops .shops-body p{margin:0 0 1em}

/* ---------- distribuïdors ---------- */
.distributors{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));text-align:center;margin-top:2rem}
.distributors .name{font-family:var(--f-title);font-size:clamp(2.2rem,1.8rem + 1.8vw,3.75rem);margin:0 0 .2em;line-height:1}
.distributors .name a{color:var(--green)}
.distributors .note{font-size:clamp(1rem,.9rem + .35vw,1.25rem);margin:0;line-height:1.35}

/* ---------- vídeos ---------- */
.videos{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:2rem 0}
.video-card{display:block;text-decoration:none !important;color:inherit;background:#16224180;border-radius:8px;overflow:hidden;transition:transform .18s}
.video-card:hover{transform:translateY(-3px)}
.video-thumb{display:block;position:relative;aspect-ratio:16/9;background:#000}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-thumb::after{
  content:"";position:absolute;inset:0;margin:auto;width:64px;height:45px;border-radius:10px;
  background:rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  transition:background-color .18s;
}
.video-card:hover .video-thumb::after{background-color:#cc0000}
.video-card .title{display:block;padding:.7rem .9rem .9rem;font-size:1.15rem;line-height:1.3;color:var(--white)}
.video-card .host{display:block;padding:0 .9rem .8rem;font-family:var(--f-ui);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb0d4}

/* ---------- receptes ---------- */
.recipes{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2rem}
.recipe{background:#16224180;border-radius:8px;padding:1rem;font-size:1.02rem}
.recipe img{border-radius:6px;margin:0 auto .8rem}
.recipe p{margin:0 0 .5em}
.recipe .lang{font-family:var(--f-ui);font-size:.72rem;letter-spacing:.09em;color:#9fb0d4;text-transform:uppercase}
.recipe a{overflow-wrap:anywhere}

/* ---------- enllaços ---------- */
.links-list{max-width:860px;margin-inline:auto}
.links-list p{margin:0 0 .8em}

/* ---------- contacte ---------- */
.contact{text-align:center}
.contact img{width:min(280px,70vw);margin:0 auto 1.5rem}
.contact .data{font-size:clamp(1.15rem,1rem + .7vw,1.7rem);color:var(--blue)}
.contact .data a{color:var(--green)}

/* ---------- peu ---------- */
.site-footer{background:var(--navy-dark);color:#b9c4de;font-family:var(--f-ui);font-size:.85rem;padding:2.5rem 1.25rem}
.site-footer .wrap{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.site-footer a{color:#9fd8a6}
.site-footer a:hover{color:var(--yellow)}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0}

/* ---------- pàgines de text ---------- */
.page-body{background:var(--white);color:#2c3a52}
.page-body .wrap{max-width:820px;margin-inline:auto;padding:clamp(2.5rem,6vw,4rem) 1.25rem}
.page-body h1{font-size:clamp(2.6rem,2rem + 3vw,4rem);color:var(--blue);text-align:center}
.page-body h2{font-family:var(--f-ui);font-size:1.15rem;font-weight:700;color:var(--blue);margin:2em 0 .6em;line-height:1.3}
.page-body{font-family:var(--f-ui);font-size:1rem;line-height:1.7}
.page-body p{margin:0 0 1.1em}
.back-link{display:inline-block;margin-top:2rem;font-family:var(--f-title);font-size:1.8rem}

/* ---------- responsiu ---------- */
@media (max-width:900px){
  :root{--head-h:70px}
  .nav-toggle-label{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;cursor:pointer;padding:9px;margin-left:auto;
  }
  .nav-toggle-label span{display:block;height:3px;background:var(--green-menu);border-radius:2px;transition:.2s}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .header-inner{flex-wrap:wrap;padding:.4rem 1rem}
  .brand img{width:96px}
  .site-nav{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .nav-toggle:checked ~ .site-nav{max-height:80vh;overflow-y:auto}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.5rem 0 1rem}
  .site-nav a{font-size:2rem}
  .lang-switch{padding-top:.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}