/* ════════════════════════════════════════════════════════════
   blocs.css — Les maquetes dels blocs de contingut.
   Cada tipus de bloc té una forma diferent perquè fa una feina
   diferent. Res de paràgrafs apilats amb el fons canviat.
   ════════════════════════════════════════════════════════════ */

.block-tight{padding-block:40px}
@media (min-width:768px){ .block-tight{padding-block:52px} }

/* ── Capçalera de fitxa: titular + "això et sona?" al costat ── */
.band-grid{display:grid;gap:36px}
@media (min-width:1000px){
  .band-grid{grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
}
.band .ganxo{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--mint);
  margin:0 0 18px;max-width:24ch;line-height:1.25}
.band .eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flag{background:var(--mint);color:var(--ink);padding:3px 10px;letter-spacing:.08em}

/* Caixa "això et sona?" dins la capçalera */
.who{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  padding:26px 24px;backdrop-filter:blur(2px)}
.who h2{font-size:.82rem;letter-spacing:.16em;color:var(--mint);margin-bottom:16px}
.who ul{list-style:none;margin:0;padding:0}
.who li{position:relative;padding:9px 0 9px 26px;font-size:.98rem;color:#efedea;
  border-bottom:1px solid rgba(255,255,255,.12)}
.who li::before{content:"";position:absolute;left:0;top:1.15em;width:13px;height:2px;
  background:var(--mint)}
.who li:last-of-type{border-bottom:0}
.who-out{margin:16px 0 0;font-size:.9rem;color:var(--mint)}

/* ── Dades clau en fila ───────────────────────────────────── */
.facts{display:grid;gap:0}
@media (min-width:700px){ .facts{grid-template-columns:repeat(3,1fr)} }
/* Separadors amb vora, no amb un fons i gaps: aixi la reixa no assoma
   pels extrems quan la fila no omple tot l'ample. */
.fact{padding:22px 26px;border-top:1px solid rgba(255,255,255,.18)}
.fact:first-child{border-top:0}
@media (min-width:700px){
  .fact{border-top:0}
  .fact + .fact{border-left:1px solid rgba(255,255,255,.18)}
}
.fact-v{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--mint);margin-bottom:6px}
.fact-k{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.15;color:var(--white);
  font-weight:700;letter-spacing:.01em}

/* ── Cita en manuscrita ───────────────────────────────────── */
.quote{margin:0;max-width:22ch;text-align:left}
@media (min-width:900px){ .quote{max-width:none;text-align:center} }
.quote p{font-size:clamp(1.9rem,5.2vw,3.6rem);line-height:1.2;margin:0 0 18px;
  color:var(--ink)}
@media (min-width:900px){ .quote p{max-width:30ch;margin-inline:auto} }
.quote cite{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;font-style:normal;color:var(--ink);opacity:.6}

/* ── Rajoles: què inclou ──────────────────────────────────── */
.tiles{display:grid;gap:2px;background:var(--rule);margin-top:40px}
@media (min-width:640px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .tiles{grid-template-columns:repeat(3,1fr)} }
.tile{background:var(--white);padding:28px 26px;position:relative}
.bg-beige .tile{background:var(--beige)}
.tile h3{font-size:clamp(1.05rem,1.6vw,1.25rem);margin-bottom:10px;
  padding-top:16px;border-top:2px solid var(--ink);display:inline-block}
.tile p{margin:0;font-size:.98rem;color:#4a4744}
.tile::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--mint-deep);transition:width .5s cubic-bezier(.22,1,.36,1)}
.tile:hover::after{width:100%}

/* ── Preguntes reals ──────────────────────────────────────── */
.faq{margin-top:32px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:2px;
  background:var(--ink);transition:transform .3s ease}
.faq summary::before{content:"";position:absolute;right:14px;top:50%;width:2px;height:14px;
  background:var(--ink);margin-top:-6px;transform-origin:center;
  transition:transform .3s ease,opacity .3s ease}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq summary:hover{color:var(--gray)}
.faq details p{margin:0 0 24px;max-width:62ch;color:#403c3a}
.faq-out{margin-top:28px;font-size:.98rem}

/* ── Passos: hereten .steps de la capa base ───────────────── */
.steps{margin-top:40px}

/* ── Edició destacada ─────────────────────────────────────── */
.edicio{display:inline-block;background:var(--mint);color:var(--ink);
  padding:10px 16px;margin:0 0 8px}
.band .edicio{background:var(--mint);color:var(--ink)}

/* La capçalera de fitxa és fosca però no porta la classe .bg-ink:
   el botó de contorn hi sortia en tinta sobre tinta. */
.band .btn-outline{color:var(--white);border-color:rgba(255,255,255,.55)}
.band .btn-outline::before{background:var(--white)}
.band .btn-outline:hover{color:var(--ink)}

/* Ganxo manuscrit sobre fons clar */
.ganxo-clar{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--gray);
  margin:0 0 20px;max-width:26ch;line-height:1.3}