/* ==========================================================================
   Comprar Calsots — full d'estils
   Paleta: crema de paper d'estrassa, verd de calçot i vermell de romesco.
   ========================================================================== */

:root {
  --crema: #fbf7ef;
  --crema-fosc: #f3ece0;
  --paper: #ffffff;
  --tinta: #23201b;
  --tinta-suau: #6e665a;
  --linia: #e6ddcc;

  --verd: #3f6b2b;
  --verd-clar: #5d8f42;
  --verd-fosc: #2c4c1d;
  --brasa: #c4441f;
  --brasa-clar: #e0762a;
  --or: #e8b44a;

  --radi: 14px;
  --radi-petit: 9px;
  --ombra: 0 1px 2px rgba(35, 32, 27, .05), 0 8px 24px rgba(35, 32, 27, .07);
  --ombra-alta: 0 2px 6px rgba(35, 32, 27, .07), 0 18px 44px rgba(35, 32, 27, .13);

  --amplada: 1180px;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-obert, body.modal-obert { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: .95rem; }

p { margin: 0 0 1em; }

a { color: var(--verd); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--verd-clar);
  outline-offset: 2px;
  border-radius: 4px;
}

.contenidor {
  width: min(var(--amplada), 100% - 2.5rem);
  margin-inline: auto;
}

.seccio { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccio-clara { background: var(--paper); }

.kicker {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brasa);
  margin: 0 0 .8rem;
}

.capcalera-seccio { max-width: 46ch; margin-bottom: 2.5rem; }
.capcalera-seccio.centrada { margin-inline: auto; text-align: center; }
.capcalera-seccio p { color: var(--tinta-suau); margin: 0; }

.seccio-titol-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}
.seccio-titol-fila h2 { margin: 0; }

/* --- Botons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--text);
  font-size: .95rem; font-weight: 600;
  padding: .72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primari { background: var(--verd); color: #fff; }
.btn-primari:hover { background: var(--verd-fosc); }
.btn-primari.fet { background: var(--brasa); }

.btn-brasa { background: var(--brasa); color: #fff; }
.btn-brasa:hover { background: #a5360f; }

.btn-contorn {
  background: transparent; color: var(--tinta); border-color: var(--linia);
}
.btn-contorn:hover { border-color: var(--verd); color: var(--verd); }

.btn-clar { background: #fff; color: var(--verd-fosc); }
.btn-clar:hover { background: var(--crema-fosc); }

.btn-text {
  background: none; color: var(--tinta-suau); padding: .5rem .6rem;
  text-decoration: underline; font-weight: 500;
}
.btn-gran { padding: .95rem 1.9rem; font-size: 1.02rem; }
.btn-bloc { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.enllac-text {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.enllac-text:hover { color: var(--verd); }

/* --- Avís superior + capçalera ------------------------------------------- */

.avis-superior {
  background: var(--verd-fosc); color: #f0ead9;
  font-size: .82rem; text-align: center; padding: .55rem 0;
}

.capcalera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 239, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia);
}

.capcalera-fila {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
}

.logo { display: flex; align-items: center; gap: .55rem; color: var(--verd); }
.logo:hover { text-decoration: none; }
.logo-icona { width: 26px; height: 33px; flex: none; }
.logo-text {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem;
  color: var(--tinta); letter-spacing: -.02em;
}

.nav-principal { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-principal a {
  color: var(--tinta); font-size: .93rem; font-weight: 500;
  padding: .35rem 0; position: relative;
}
.nav-principal a:hover { text-decoration: none; color: var(--verd); }
.nav-principal a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--verd); transform: scaleX(0);
  transition: transform .18s ease;
}
.nav-principal a:hover::after, .nav-principal a.actiu::after { transform: scaleX(1); }

.capcalera-accions { display: flex; align-items: center; gap: .75rem; }

.idioma { display: flex; border: 1px solid var(--linia); border-radius: 999px; overflow: hidden; }
.idioma button {
  background: none; border: 0; cursor: pointer;
  font: 600 .74rem/1 var(--text); letter-spacing: .06em;
  color: var(--tinta-suau); padding: .45rem .6rem;
}
.idioma button.actiu { background: var(--verd); color: #fff; }

.btn-carret {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--tinta); background: var(--crema-fosc);
}
.btn-carret:hover { background: var(--linia); text-decoration: none; }
.bombolla {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--brasa); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--crema);
}
.bombolla.buit { display: none; }

.btn-menu { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.btn-menu span {
  display: block; width: 22px; height: 2px; background: var(--tinta);
  border-radius: 2px; margin: 4px 0; transition: transform .2s ease, opacity .2s ease;
}

/* --- Portada: hero -------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(224, 118, 42, .16), transparent 55%),
    linear-gradient(170deg, #2c4c1d 0%, #3f6b2b 55%, #4a7a31 100%);
  color: #f6f1e4;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.hero-graella {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: 3rem; padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.hero .kicker { color: var(--or); }
.hero h1 { color: #fff; margin-bottom: .55rem; }
.hero p { color: rgba(246, 241, 228, .86); font-size: 1.08rem; max-width: 46ch; }
.hero-botons { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-segell {
  display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 2.6rem;
  border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.5rem;
}
.hero-segell div strong {
  display: block; font-family: var(--display); font-size: 1.5rem; color: var(--or);
}
.hero-segell div span { font-size: .82rem; color: rgba(246, 241, 228, .75); }
.hero-imatge { display: grid; place-items: center; }
.hero-imatge img { width: min(100%, 440px); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .3)); }

/* --- Valors --------------------------------------------------------------- */

.valors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.4rem;
}
.valor {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi); padding: 1.5rem;
}
.valor .icona {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(63, 107, 43, .1); color: var(--verd); margin-bottom: .9rem;
}
.valor h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.valor p { font-size: .9rem; color: var(--tinta-suau); margin: 0; }

/* --- Graella de productes -------------------------------------------------- */

.graella-productes {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.targeta {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.targeta:hover {
  transform: translateY(-3px); box-shadow: var(--ombra-alta); border-color: transparent;
}
.targeta-imatge {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(160deg, var(--crema-fosc), #e9e1d0);
  aspect-ratio: 4 / 3; overflow: hidden;
}
.targeta-imatge img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.targeta:hover .targeta-imatge img { transform: scale(1.045); }
.etiqueta {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(35, 32, 27, .82); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .25rem .6rem; border-radius: 999px;
}
.targeta-cos { padding: 1.15rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.targeta-cos h3 { font-size: 1.04rem; margin-bottom: .3rem; }
.targeta-resum { font-size: .87rem; color: var(--tinta-suau); margin: 0 0 1.1rem; flex: 1; }
.targeta-peu { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.preu { font-family: var(--display); font-size: 1.32rem; font-weight: 600; }
.preu.gran { font-size: 1.9rem; }
.btn-afegir { padding: .55rem 1rem; font-size: .85rem; }

/* --- Passos "com funciona" -------------------------------------------------- */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem; }
.pas { position: relative; padding-top: 2.6rem; }
.pas .num {
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2.1rem; font-weight: 600;
  color: var(--brasa-clar); opacity: .55; line-height: 1;
}
.pas h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.pas p { font-size: .9rem; color: var(--tinta-suau); margin: 0; }

/* --- Consell / taula de racions --------------------------------------------- */

.consell {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  background: var(--verd-fosc); color: #f2ecdd;
  border-radius: calc(var(--radi) + 6px);
  padding: clamp(2rem, 4vw, 3.2rem);
}
.consell h2 { color: #fff; }
.consell p { color: rgba(242, 236, 221, .84); margin: 0; }
.taula-racions { width: 100%; border-collapse: collapse; font-size: .95rem; }
.taula-racions th, .taula-racions td {
  padding: .7rem .5rem; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.taula-racions th {
  font-family: var(--text); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--or);
}
.taula-racions td:first-child { font-weight: 600; }

/* --- Botiga: filtres --------------------------------------------------------- */

.barra-filtres {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--linia);
}
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; }
.filtres button {
  background: var(--paper); border: 1px solid var(--linia); border-radius: 999px;
  padding: .48rem 1.05rem; font: 500 .88rem var(--text); color: var(--tinta);
  cursor: pointer; transition: all .15s ease;
}
.filtres button:hover { border-color: var(--verd); color: var(--verd); }
.filtres button.actiu { background: var(--verd); border-color: var(--verd); color: #fff; }

.ordena { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--tinta-suau); }
select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
  font: inherit; font-size: .93rem; color: var(--tinta);
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi-petit); padding: .55rem .8rem;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--verd-clar); outline-offset: 1px; }

.recompte { font-size: .85rem; color: var(--tinta-suau); margin-bottom: 1.2rem; }
.buit-avis {
  text-align: center; padding: 4rem 1rem; color: var(--tinta-suau);
  border: 1px dashed var(--linia); border-radius: var(--radi);
}

/* --- Pàgines internes -------------------------------------------------------- */

.encapcalat-pagina {
  background: var(--crema-fosc);
  border-bottom: 1px solid var(--linia);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.encapcalat-pagina h1 { margin-bottom: .4rem; }
.encapcalat-pagina p { color: var(--tinta-suau); max-width: 60ch; margin: 0; }

.prosa { max-width: 72ch; }
.prosa h2 { margin-top: 2.4rem; }
.prosa h3 { margin-top: 1.8rem; }
.prosa ul, .prosa ol { padding-left: 1.2rem; }
.prosa li { margin-bottom: .4rem; }

.caixa-avis {
  background: #fff8e8; border: 1px solid #f0dca8;
  border-left: 4px solid var(--or);
  border-radius: var(--radi-petit); padding: 1.2rem 1.4rem; margin: 1.8rem 0;
}
.caixa-avis h3 { margin-top: 0; font-size: 1.05rem; }
.caixa-avis p:last-child { margin-bottom: 0; }

.taula-envios { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.taula-envios th, .taula-envios td {
  padding: .85rem .7rem; text-align: left; border-bottom: 1px solid var(--linia);
}
.taula-envios thead th {
  font: 700 .74rem var(--text); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-suau);
}
.taula-envios tbody tr:hover { background: var(--crema-fosc); }

/* --- FAQ (acordió) ------------------------------------------------------------ */

.acordio { max-width: 76ch; }
.acordio details {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi-petit); margin-bottom: .7rem; overflow: hidden;
}
.acordio details[open] { border-color: var(--verd-clar); }
.acordio summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-weight: 600; font-size: 1rem; position: relative;
}
.acordio summary::-webkit-details-marker { display: none; }
.acordio summary::after {
  content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--verd); line-height: 1;
}
.acordio details[open] summary::after { content: '−'; }
.acordio .resposta { padding: 0 1.2rem 1.2rem; color: var(--tinta-suau); font-size: .95rem; }

/* --- Qui som ------------------------------------------------------------------ */

.quisom-graella { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: start; }
.dades-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.5rem; }
.dada {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi); padding: 1.3rem; text-align: center;
}
.dada strong { display: block; font-family: var(--display); font-size: 2rem; color: var(--verd); }
.dada span { font-size: .82rem; color: var(--tinta-suau); }

/* --- Contacte ------------------------------------------------------------------ */

.contacte-graella { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: start; }
.contacte-blocs { display: grid; gap: 1.2rem; }
.contacte-bloc {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi); padding: 1.2rem 1.3rem;
}
.contacte-bloc h4 {
  font-family: var(--text); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suau); margin-bottom: .35rem;
}
.contacte-bloc p, .contacte-bloc a { margin: 0; font-size: .98rem; }

.formulari { display: grid; gap: 1rem; }
.camp { display: grid; gap: .35rem; }
.camp label { font-size: .84rem; font-weight: 600; }
.camp textarea { min-height: 150px; resize: vertical; }
.camp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nota-form { font-size: .82rem; color: var(--tinta-suau); margin: 0; }

/* --- Carret --------------------------------------------------------------------- */

.carret-graella { display: grid; grid-template-columns: 1.55fr .95fr; gap: 2.5rem; align-items: start; }

.linia-carret {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 1.1rem;
  align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--linia);
}
.linia-carret:first-child { border-top: 1px solid var(--linia); }
.linia-carret .mini {
  width: 92px; height: 76px; border-radius: var(--radi-petit); overflow: hidden;
  background: var(--crema-fosc);
}
.linia-carret .mini img { width: 100%; height: 100%; object-fit: cover; }
.linia-carret h3 { font-size: 1rem; margin: 0 0 .15rem; }
.linia-carret .detall { font-size: .84rem; color: var(--tinta-suau); margin: 0 0 .55rem; }
.linia-carret .accions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.linia-carret .total-linia { font-family: var(--display); font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.treure {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: .82rem; color: var(--tinta-suau); text-decoration: underline;
}
.treure:hover { color: var(--brasa); }

.qt { display: inline-flex; align-items: center; border: 1px solid var(--linia); border-radius: 999px; background: var(--paper); }
.qt button {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--tinta); line-height: 1;
}
.qt button:hover { color: var(--verd); }
.qt input {
  width: 42px; border: 0; background: none; text-align: center;
  font: 600 .95rem var(--text); padding: 0;
  -moz-appearance: textfield;
}
.qt input::-webkit-outer-spin-button, .qt input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.resum {
  background: var(--paper); border: 1px solid var(--linia);
  border-radius: var(--radi); padding: 1.6rem;
  position: sticky; top: 96px;
}
.resum h2 { font-size: 1.25rem; }
.resum-fila { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .95rem; }
.resum-fila.total {
  border-top: 1px solid var(--linia); margin-top: .6rem; padding-top: .9rem;
  font-family: var(--display); font-size: 1.4rem; font-weight: 600;
}
.resum-fila .gratis { color: var(--verd); font-weight: 600; }
.resum label { display: block; font-size: .84rem; font-weight: 600; margin: 1rem 0 .35rem; }
.resum select { width: 100%; }
.barra-gratis { margin: 1rem 0 .3rem; }
.barra-gratis .pista { height: 6px; background: var(--crema-fosc); border-radius: 999px; overflow: hidden; }
.barra-gratis .ple { height: 100%; background: linear-gradient(90deg, var(--verd-clar), var(--verd)); border-radius: 999px; transition: width .3s ease; }
.barra-gratis p { font-size: .8rem; color: var(--tinta-suau); margin: .45rem 0 0; }
.nota-segura { font-size: .78rem; color: var(--tinta-suau); text-align: center; margin: .8rem 0 0; }
.error-pagament {
  background: #fdeceb; border: 1px solid #f3bdb7; color: #8f2418;
  border-radius: var(--radi-petit); padding: .8rem 1rem; font-size: .87rem; margin-top: 1rem;
}

/* --- Resultat de la comanda -------------------------------------------------------- */

.resultat { max-width: 620px; margin-inline: auto; text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.resultat .rodona {
  width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 1.6rem;
  display: grid; place-items: center; background: rgba(63, 107, 43, .12); color: var(--verd);
}
.resultat.ko .rodona { background: rgba(196, 68, 31, .12); color: var(--brasa); }
.resultat .ref {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--crema-fosc); border-radius: var(--radi-petit);
  padding: .5rem .9rem; margin: .5rem 0 2rem; font-size: .9rem;
}
.resultat ol { text-align: left; max-width: 400px; margin: 0 auto 2rem; color: var(--tinta-suau); }
.resultat ol li { margin-bottom: .5rem; }

/* --- Finestra modal ------------------------------------------------------------------ */

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal-fons { position: absolute; inset: 0; background: rgba(35, 32, 27, .55); backdrop-filter: blur(3px); }
.modal-caixa {
  position: relative; background: var(--paper); border-radius: var(--radi);
  box-shadow: var(--ombra-alta); width: min(880px, 100%);
  max-height: 88vh; overflow-y: auto;
}
.modal-tancar {
  position: absolute; top: .6rem; right: .8rem; z-index: 2;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--linia); border-radius: 50%;
  width: 34px; height: 34px; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--tinta);
}
.modal-graella { display: grid; grid-template-columns: .9fr 1.1fr; }
.modal-imatge { background: linear-gradient(160deg, var(--crema-fosc), #e9e1d0); }
.modal-imatge img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.modal-info { padding: 2rem; }
.modal-info h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.modal-resum { color: var(--brasa); font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
.modal-desc { font-size: .95rem; color: var(--tinta-suau); }
.modal-info h4 { margin: 1.4rem 0 .4rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--text); color: var(--tinta-suau); }
.modal-inclou { margin: 0 0 1.4rem; padding-left: 1.1rem; font-size: .92rem; }
.modal-inclou li { margin-bottom: .25rem; }
.modal-compra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linia); padding-top: 1.2rem; }
.modal-compra .btn { margin-left: auto; }

/* --- Avís flotant i galetes ------------------------------------------------------------ */

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 20px);
  background: var(--tinta); color: #fff; padding: .7rem 1.3rem; border-radius: 999px;
  font-size: .9rem; font-weight: 500; z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.galetes {
  position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  max-width: 540px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--linia); border-radius: var(--radi);
  box-shadow: var(--ombra-alta); padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.galetes p { margin: 0; font-size: .87rem; color: var(--tinta-suau); flex: 1 1 240px; }
.galetes-btns { display: flex; align-items: center; gap: .4rem; }

/* --- Peu de pàgina ------------------------------------------------------------------------ */

.peu { background: var(--tinta); color: #cfc7b7; margin-top: 4rem; padding: 3.5rem 0 1.5rem; }
.peu-graella {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem;
}
.peu .logo-text { color: #fff; }
.peu .logo { color: var(--verd-clar); margin-bottom: .8rem; }
.peu-marca p { font-size: .88rem; max-width: 34ch; }
.peu h4 {
  font-family: var(--text); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: .9rem;
}
.peu a, .peu .peu-adreca { display: block; color: #cfc7b7; font-size: .88rem; margin-bottom: .45rem; }
.peu a:hover { color: #fff; }
.peu-insta { display: inline-block !important; text-decoration: underline; }
.peu-baix {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.3rem;
  font-size: .8rem; color: #9c9384;
}

/* --- Animació de revelat -------------------------------------------------------------------- */

.revela { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.revela.vist { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Adaptació a pantalles petites ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .peu-graella { grid-template-columns: 1fr 1fr 1fr; }
  .peu-marca { grid-column: 1 / -1; }
  .quisom-graella, .contacte-graella, .consell { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .hero-graella { grid-template-columns: 1fr; text-align: center; padding-top: 3rem; }
  .hero p { margin-inline: auto; }
  .hero-botons, .hero-segell { justify-content: center; }
  .hero-imatge { order: -1; }
  .hero-imatge img { width: min(72%, 300px); }
  .carret-graella { grid-template-columns: 1fr; }
  .resum { position: static; }
  .modal-graella { grid-template-columns: 1fr; }
  .modal-imatge img { min-height: 200px; max-height: 240px; }
}

@media (max-width: 780px) {
  .btn-menu { display: block; }
  .nav-principal {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
    background: var(--paper); flex-direction: column; gap: 0;
    padding: 5.5rem 1.8rem 2rem; margin: 0;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: var(--ombra-alta); z-index: 45;
  }
  body.menu-obert .nav-principal { transform: none; }
  .nav-principal a { padding: .95rem 0; border-bottom: 1px solid var(--linia); font-size: 1.05rem; }
  .nav-principal a::after { display: none; }
  body.menu-obert .btn-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-obert .btn-menu span:nth-child(2) { opacity: 0; }
  body.menu-obert .btn-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .dades-fila { grid-template-columns: 1fr; }
  .camp-fila { grid-template-columns: 1fr; }
  .peu-graella { grid-template-columns: 1fr 1fr; }
  .linia-carret { grid-template-columns: 68px 1fr; row-gap: .6rem; }
  .linia-carret .mini { width: 68px; height: 60px; }
  .linia-carret .total-linia { grid-column: 2; text-align: right; }
  .barra-filtres { flex-direction: column; align-items: stretch; }
  .modal-info { padding: 1.4rem; }
  .modal-compra .btn { margin-left: 0; width: 100%; }
}

/* --- Blocs de contingut per idioma (pàgina legal) ------------------------------------------- */

.bloc-idioma { display: none; }
.bloc-idioma.actiu { display: block; }

/* --- Carret sense passarel·la de pagament ---------------------------------------------------
   Bloc que substitueix el boto de pagar mentre no hi ha cap metode de
   cobrament configurat (config.pagament.actiu = false a data.js).
   -------------------------------------------------------------------------------------------- */

.bloc-comanda {
  background: var(--crema-fosc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-petit);
  padding: 1.1rem 1.1rem 1.2rem;
  margin-bottom: .5rem;
}
.bloc-comanda h3 {
  font-size: 1rem;
  margin-bottom: .35rem;
}
.bloc-comanda p {
  font-size: .86rem;
  color: var(--tinta-suau);
  margin: 0 0 1rem;
}
.nota-telefon {
  font-size: .82rem !important;
  color: var(--tinta-suau);
  text-align: center;
  margin: .8rem 0 0 !important;
}