/*
  Robin Food Firenze - foglio di stile del sito
  Struttura: variabili colore, layout generale, poi una sezione per ciascun
  blocco della pagina (header, hero, "come lavoriamo", pilastri, footer...).
*/
:root {
  --bg: #ffffff;         /* sfondo pagina */
  --surface: #f2f2f0;    /* sfondo delle fasce alternate (header, footer, box) */
  --text: #1a1a1a;       /* testo principale */
  --text-muted: #55534f; /* testo secondario (sottotitoli, paragrafi lunghi) */
  --rosso: #dc2626;      /* rosso ufficiale del brand: unica fonte per tutto il sito */
  --rosso-testo: #b91c1c; /* rosso più scuro solo per testo piccolo su fondo grigio: #dc2626 su #f2f2f0 ha contrasto 4.3:1, sotto il minimo WCAG di 4.5:1 */
  --verde: #016836;      /* verde del logo (corpo del pettirosso): accento secondario per dare colore allo sfondo */
  --bianco: #ffffff;     /* bianco puro, usato per card/bottoni sopra --surface */
  --nero: #161616;       /* nero pieno: solo per il badge "Marchio Etico" (logo bianco) */

  /* Dimensioni del logo e del suo contenitore (quarto di cerchio in alto a
     sinistra). Il contenitore è sempre quadrato: --logo-box è il suo lato.
     Questi valori base valgono sotto i 576px; crescono sui breakpoint più in
     basso nel file. Il logo "iniziale" è 48px. */
  --logo-h: 48px;    /* altezza del logo */
  --logo-box: 100px; /* lato del contenitore quadrato */

  /* Dimensioni del mini-menu, stessa logica del logo: crescono sugli stessi
     breakpoint e con le stesse percentuali (+30/50/75/100/150%), così il
     menu resta sempre in proporzione col logo a cui è agganciato. */
  --nav-font: 1.1rem;
  --nav-pad-y: 0.52rem;
  --nav-pad-x: 1.3rem;
  --nav-container-pad: 0.46rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.band {
  /* stesso pattern della hero ma a colori invertiti: verde poi rosso;
     sfondo bianco come la hero, non più grigio */
  background: linear-gradient(135deg, rgba(1,104,54,0.06), rgba(220,38,38,0.06)), var(--bg);
  padding: 2rem 0;
}

/* ---------- Macchie di colore decorative ----------
   Cerchi sfocati rosso/verde (i due colori del logo) dietro hero e "come
   lavoriamo", per uno sfondo più vivo senza uscire dalla palette del brand.
   Puramente decorativi: generati via ::before/::after, quindi invisibili a
   screen reader e non serve markup dedicato. */
/* La hero è anche .wrap (larga max 1100px): se tagliasse le macchie
   (overflow hidden) si vedrebbe un rettangolo dai bordi netti. Le lascia
   sbordare e lo scroll orizzontale lo impedisce main (overflow-x: clip). */
.band { position: relative; overflow: hidden; }
.hero { position: relative; }
main { overflow-x: clip; }
.hero::before, .hero::after,
.band::before, .band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
/* hero: rosso a sinistra, verde a destra */
.hero::before { width: 420px; height: 420px; background: var(--rosso); opacity: 0.10; top: -200px; left: -160px; }
.hero::after  { width: 380px; height: 380px; background: var(--verde); opacity: 0.10; top: -120px; right: -180px; }
/* "come lavoriamo": stesso pattern, colori invertiti: verde a sinistra, rosso a destra */
.band::before { width: 420px; height: 420px; background: var(--verde); opacity: 0.10; top: -200px; left: -160px; }
.band::after  { width: 380px; height: 380px; background: var(--rosso); opacity: 0.10; top: -120px; right: -180px; }
.hero > *, .band .wrap { position: relative; z-index: 1; }

/* ---------- Header ----------
   Leggero: la barra in sé è trasparente (serve solo a posizionare il logo).
   Lo sfondo sfocato è un quarto di cerchio ancorato all'angolo in alto a
   sinistra dello schermo: i due lati diritti combaciano col bordo alto e col
   bordo sinistro, mentre l'unico angolo arrotondato (in basso a destra) forma
   l'arco rosso, accento del brand.
   Il contenitore è un quadrato (--logo-box di lato) e cresce sui breakpoint;
   il logo, ancorato in alto a sinistra dentro il quadrato, cresce con esso. */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0; /* flush all'angolo sinistro dello schermo */
  background: transparent;
  pointer-events: none; /* la barra invisibile non deve intercettare i click sulla pagina */
}
/* Tondo rosso sfumato dietro al logo, solo in home (vedi isHome nel
   Layout): un richiamo cromatico leggero a "sei qui", alternativa a uno
   sfondo pieno sul logo stesso (che ne ridurrebbe la leggibilità). Più
   grande del box del logo e centrato su di esso, così si vede solo
   l'alone sfumato intorno, non un disco pieno dietro i colori del logo. */
header .logo-glow {
  position: absolute;
  z-index: 0; /* sotto sia al logo (2) che al menu (1) */
  top: calc(var(--logo-box) * -1);
  left: calc(var(--logo-box) * -1);
  width: calc(var(--logo-box) * 2.5);
  height: calc(var(--logo-box) * 2.5);
  background: radial-gradient(circle, rgba(255, 0, 0, 0.4), rgba(255, 100, 100, 0) 50%);
  pointer-events: none;
}
header a.logo {
  pointer-events: auto; /* ...ma il logo resta cliccabile */
  position: relative;
  z-index: 2; /* sopra al menu: nasconde il pezzo di menu che ci scivola sotto */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: var(--logo-box);
  height: var(--logo-box); /* contenitore quadrato */
  padding: calc(var(--logo-h) * 0.24);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--rosso);
  border-top: none;   /* lato superiore a filo col bordo schermo */
  border-left: none;  /* lato sinistro a filo col bordo schermo */
  border-radius: 0 0 999px 0; /* solo l'angolo in basso a destra è arrotondato -> quarto di cerchio */
  box-shadow: 3px 4px 12px rgba(0,0,0,0.10);
}
header a.logo img { height: var(--logo-h); width: auto; display: block; }

/* Mini-menu: un'unica pill "di vetro" (stesso stile del logo). Il suo
   angolo in alto a sinistra è deliberatamente nascosto sotto il logo (che
   ha z-index più alto, sopra): per questo top:0 e un left minore della
   larghezza del box del logo, così bordo superiore e bordo sinistro della
   pill spariscono dietro il logo invece di restare visibili accanto ad
   esso. Niente "Home" esplicito: lo fa già il logo. */
header nav.site-nav {
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  top: -0.3rem;
  left: calc(var(--logo-box) - 0.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nav-container-pad);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--rosso);
  border-radius: 20px;
  padding: var(--nav-container-pad);
  box-shadow: 3px 4px 12px rgba(0,0,0,0.10);
}
header nav.site-nav a {
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--nav-font);
  color: var(--text);
  white-space: nowrap;
}
header nav.site-nav a:hover { background: rgba(220,38,38,0.08); }
header nav.site-nav a[aria-current="page"] { background: var(--rosso); color: var(--bianco); }

/* Crescita del logo/contenitore ai breakpoint (rispetto al logo iniziale 48px):
   +30% / +50% / +75% / +100% / +150%. Il lato del quadrato resta ~2,05x il
   logo, così il logo (ancorato in alto a sinistra) rientra sempre nel quarto
   di cerchio. */
/* Il menu cresce sugli stessi breakpoint del logo ma con percentuali più
   basse (+15/25/35/50/75% invece di +30/50/75/100/150%): sugli schermi
   grandi il logo può crescere di più senza risultare invadente, il menu no
   (è testo, non un elemento decorativo). */
@media (min-width: 576px)  { :root { --logo-h: 62px;  --logo-box: 128px; --nav-font: 1.27rem;  --nav-pad-y: 0.6rem;  --nav-pad-x: 1.5rem;  --nav-container-pad: 0.53rem; } } /* smartphone grandi: logo +30%, menu +15% */
@media (min-width: 768px)  { :root { --logo-h: 72px;  --logo-box: 148px; --nav-font: 1.38rem;  --nav-pad-y: 0.65rem; --nav-pad-x: 1.63rem; --nav-container-pad: 0.58rem; } } /* tablet: logo +50%, menu +25% */
@media (min-width: 992px)  { :root { --logo-h: 84px;  --logo-box: 172px; --nav-font: 1.49rem;  --nav-pad-y: 0.7rem;  --nav-pad-x: 1.76rem; --nav-container-pad: 0.62rem; } } /* laptop: logo +75%, menu +35% */
@media (min-width: 1200px) { :root { --logo-h: 96px;  --logo-box: 198px; --nav-font: 1.65rem;  --nav-pad-y: 0.78rem; --nav-pad-x: 1.95rem; --nav-container-pad: 0.69rem; } } /* desktop: logo +100%, menu +50% */
@media (min-width: 1400px) { :root { --logo-h: 120px; --logo-box: 248px; --nav-font: 1.93rem;  --nav-pad-y: 0.91rem; --nav-pad-x: 2.28rem; --nav-container-pad: 0.81rem; } } /* schermi grandi: logo +150%, menu +75% */

/* ---------- Hero ---------- */
/* Il contenuto parte sotto l'ingombro del quarto di cerchio, così non gli
   finisce sotto (l'header è fisso e "galleggia" sopra la pagina). */
main { padding-top: calc(var(--logo-box) + 0.5rem); }
/* padding-block e non padding: quello laterale di .wrap deve restare,
   altrimenti su telefono il testo tocca i bordi dello schermo */
.hero { padding-block: 1.5rem 0.5rem; text-align: center; }
.hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 1.5rem;
}
.hero h1 .rosso { color: var(--rosso); }
.hero h1 span + .rosso { display: block; } /* a capo solo in home (due span); "Dicono di noi" resta su una riga */
.hero .intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
/* Stessa distanza che c'è già fra il bottone e i chevron qui sotto (1.75rem,
   il margine di .chevron-row che "vince" sul margin-bottom di .cta-wrap per
   via del margin-collapsing): così il bottone resta centrato a metà fra
   testo e divisore invece di stare incollato al testo. */
.hero .cta-wrap { margin-top: 1.75rem; }

.chevron-row {
  position: relative;
  height: 30px;
  margin: 1.75rem 0;
  background-image: url("../images/icone/freccia-chevron-divisore.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 26px;
  /* leggera deriva orizzontale continua: un tocco di movimento nel divisore.
     109.6px = larghezza di una singola mattonella del pattern a 26px di
     altezza, così il loop è impercettibile (non si vede il "salto"). */
  animation: chevronDrift 9s linear infinite;
}
@keyframes chevronDrift {
  from { background-position: 0 center; }
  to   { background-position: 109.6px center; }
}
@media (prefers-reduced-motion: reduce) {
  .chevron-row { animation: none; }
}
/* ---------- Come funziona ---------- */
.section-title {
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  margin: 0.5rem 0 1.5rem;
}
.section-title .rosso { color: var(--rosso); }
.section-intro {
  text-align: center;
  max-width: 640px;
  margin: -0.5rem auto 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq-section { max-width: 780px; margin-bottom: 3rem; }
.faq {
  background: var(--surface);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  padding: 0;
}
.faq[open] { border-color: var(--rosso); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1rem 1.25rem;
  list-style-position: inside;
}
.faq summary::marker { color: var(--rosso); }
.faq p {
  margin: 0;
  padding: 0 1.25rem 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.faq p a { color: var(--rosso); text-decoration: underline; }
.diagram { display: flex; justify-content: center; margin: 0 auto; }
.diagram img { width: min(92vw, 340px); height: auto; }
.claim {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1rem 0 1.5rem;
}
.cta-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.cta {
  display: inline-block;
  background: var(--rosso);
  color: var(--bianco);
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem;
  padding: 0.9rem 2.2rem;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(220,38,38,0.3);
  transition: box-shadow .2s ease, transform .2s ease;
}
.cta:hover { box-shadow: 0 6px 18px rgba(220,38,38,0.45); transform: translateY(-1px); }
.cta.secondary {
  background: transparent;
  color: var(--rosso);
  border: 3px solid var(--rosso);
  box-shadow: none;
}

/* ---------- Audience ---------- */
.audience {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 780px;
  margin: 0 auto 1rem;
}
.audience li {
  list-style: none;
  border: 2px solid var(--rosso);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  margin: 1rem 0 3rem;
}
@media (min-width: 860px) {
  .pillars { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.pillar { display: grid; justify-items: center; }
.pillar-icon {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--bianco);
  border: 8px solid var(--rosso);
  padding: 1.75rem;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.pillar-icon img { width: 100%; height: 100%; display: block; }
.pillar-card {
  margin-top: -2.5rem;
  width: 100%;
  background: var(--bianco);
  border: 4px solid var(--rosso);
  border-radius: 10px;
  padding: 0 0.75rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.pillar-card h3 {
  color: var(--rosso);
  font-weight: 800;
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  border-bottom: 4px solid var(--rosso);
}
.pillar-card p {
  color: var(--nero);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 1rem 0;
  margin: 0;
}
.pillar-card p span { display: block; margin-bottom: 0.5rem; }
.pillar-card b {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--rosso);
}

/* ---------- Ecopony highlight ----------
   Accento verde (l'altro colore del logo) invece del rosso usato altrove:
   distingue a colpo d'occhio "l'altra cooperativa" pur restando nel brand. */
.ecopony-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.75rem;
  max-width: 900px;
  margin: 1rem auto 0;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(1,104,54,0.07), rgba(220,38,38,0.04)), var(--surface);
  border: 3px solid var(--verde);
  border-radius: 18px;
  text-align: center;
}
@media (min-width: 700px) {
  .ecopony-card { grid-template-columns: auto 1fr; text-align: left; }
}
.ecopony-logo {
  width: 120px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bianco);
  padding: 0.6rem;
}
.ecopony-logo img { width: 100%; height: auto; display: block; }
.ecopony-text h2 {
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
  color: var(--verde);
}
.ecopony-text p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Footer ---------- */
footer {
  background: var(--surface);
  border: 4px solid var(--rosso);
  border-radius: 18px 18px 0 0;
  padding: 3rem 1.25rem 2rem;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-col-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.footer-col-social .full { grid-column: 1 / -1; }
.footer-logo { width: 90px; margin: 0 auto; }
.footer-logo img { width: 100%; height: auto; display: block; }
.social-link p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.social-icon { width: 3.2rem; margin: 0 auto; }
.social-icon.round { border-radius: 999px; overflow: hidden; }
.social-icon img { width: 100%; height: auto; display: block; }

.footer-col-network { text-align: center; }
/* font-size 1.2rem invece di 1.1: sotto quella soglia il rosso bold su sfondo
   chiaro scende a un contrasto 4.31:1, appena sotto il minimo WCAG AA (4.5:1
   per testo normale); a 1.2rem rientra nella soglia "testo grande" (min 3:1),
   ampiamente rispettata, senza dover cambiare il rosso del brand. */
.network-label { color: var(--rosso); font-weight: 700; font-size: 1.2rem; margin-bottom: 1.5rem; }
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; justify-items: center; }
.partner { display: grid; justify-items: center; gap: 0.5rem; }
.partner-badge {
  width: 4.5rem; height: 4.5rem;
  border-radius: 16px;
  background: var(--bianco);
  border: 1px solid rgba(0,0,0,0.08);
  display: grid; place-items: center;
  padding: 0.6rem;
  overflow: hidden;
}
.partner-badge img { width: 100%; height: 100%; display: block; }
.partner-badge.dark { background: var(--nero); border: 2px solid #333; }
.partner span { font-size: 0.85rem; }

.footer-col-info { text-align: center; display: grid; gap: 0.5rem; align-content: start; }
.footer-col-info span, .footer-col-info a { font-size: 0.95rem; font-style: italic; }
/* font-size 1.2rem come .network-label: sotto quella soglia il rosso bold
   su sfondo chiaro scende sotto il minimo di contrasto WCAG AA per testo
   normale (4.31:1 contro 4.5:1 richiesto); a 1.2rem rientra nella soglia
   "testo grande" (min 3:1), ampiamente rispettata. */
.press-footer-link {
  font-style: normal !important;
  font-weight: 700;
  /* !important: ".footer-col-info a" è più specifico di questa singola
     classe e vincerebbe altrimenti sul font-size, riportando il contrasto
     sotto la soglia WCAG (vedi commento sopra su 1.2rem). */
  font-size: 1.2rem !important;
  color: var(--rosso) !important;
  margin-top: 0.5rem;
}
.back-to-top-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }
.back-to-top {
  width: 5rem; height: 5rem;
  border-radius: 999px;
  background: var(--rosso);
  border: 4px solid var(--bianco);
  display: grid; place-items: center;
  cursor: pointer;
}
.back-to-top .chevron-icon { width: 60%; transform: rotate(-90deg); }
.back-to-top .chevron-icon img { width: 100%; height: auto; display: block; }

/* ---------- Comparsa in scroll ----------
   Fade + slide-up quando una sezione entra nello schermo, attivato dal
   piccolo script IntersectionObserver in fondo a index.astro. Se JS non
   parte (raro, ma il <noscript> nell'head lo forza comunque) l'elemento
   resta visibile: niente contenuto nascosto per chi non ha JS. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.pillars .pillar:nth-child(2) { transition-delay: .12s; }
.pillars .pillar:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Pagina "Dicono di noi" ---------- */

/* Riconoscimento in evidenza: stesso linguaggio visivo della card Ecopony
   (bordo spesso, angoli arrotondati) ma in rosso, non verde: qui non è
   "l'altra cooperativa", è un attestato pubblico del brand stesso. */
.recognition-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 1rem auto 0;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(220,38,38,0.05), rgba(1,104,54,0.03)), var(--bg);
  border: 3px solid var(--rosso);
  border-radius: 18px;
  text-align: center;
}
@media (min-width: 700px) {
  .recognition-card { grid-template-columns: auto 1fr; text-align: left; }
}
.recognition-card .partner-badge { width: 96px; height: 96px; margin: 0 auto; }
.recognition-card h2 { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--rosso); }
.recognition-card p { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.6; }
.recognition-card p:last-child { margin-bottom: 0; }

/* Selezione delle citazioni: una card per fonte, non un muro di testo. */
.press-list { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.press-item {
  background: var(--surface);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.press-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.press-item-meta .testata { color: var(--rosso); font-weight: 700; }
.press-item h3 { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.4; }
.press-item p { margin: 0 0 0.75rem; color: var(--text-muted); line-height: 1.6; }
.press-item a.press-link { color: var(--rosso); font-weight: 700; text-decoration: underline; }
.format-tag {
  display: inline-block;
  border: 1px solid var(--rosso);
  color: var(--rosso);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.6rem;
  text-transform: uppercase;
}

/* Blocco canzone: distinto dalle citazioni di stampa, non è un articolo. */
.song-block {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1.75rem;
  border-left: 4px solid var(--verde);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
}
.song-block h2 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--verde); }
.song-block p { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.6; }
.song-block a.press-link { color: var(--verde); font-weight: 700; text-decoration: underline; }

/* Archivio: elenco compatto, richiudibile come le FAQ (stesso <details>). */
.archive-list { list-style: none; margin: 0; padding: 1rem 1.25rem 1.1rem; display: grid; gap: 0.7rem; }
.archive-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.5;
}
.archive-list .testata { color: var(--rosso); font-weight: 700; white-space: nowrap; }
.archive-list .data { color: var(--text-muted); white-space: nowrap; }
.archive-list a { text-decoration: underline; }

/* Area stampa: box semplice con i contatti per i giornalisti. */
.press-contact {
  max-width: 700px;
  margin: 1.5rem auto 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  text-align: center;
}
.press-contact h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.press-contact p { margin: 0; color: var(--text-muted); }
.press-contact a { color: var(--rosso); font-weight: 700; text-decoration: underline; }

/* Striscia "hanno scritto di noi" in home page: fascia sottile fra la FAQ
   e il footer, rimanda alla pagina /dicono-di-noi. */
.press-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding: 1.1rem 1.5rem;
  margin: 0 0 2rem;
  background: var(--surface);
  border-radius: 999px;
  text-align: center;
}
.press-strip-label { color: var(--text-muted); font-size: 0.85rem; }
.press-strip-names { font-weight: 700; font-size: 0.92rem; }
/* font-size 1.2rem: stesso motivo di .press-footer-link, vedi commento lì. */
.press-strip-link { color: var(--rosso); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
@media (max-width: 640px) {
  .press-strip { border-radius: 18px; flex-direction: column; gap: 0.4rem; }
}

/* ---------- Ritocchi della revisione finale ---------- */
.ecopony-card, .recognition-card { margin-bottom: 2.5rem; }
.recognition-card a.press-link { color: var(--rosso-testo); font-weight: 700; text-decoration: underline; }
.press-contact { margin-bottom: 2rem; }
.press-contact a { white-space: nowrap; }
.footer-col-social { align-content: start; }
/* testo rosso piccolo su fondo grigio: tonalità più scura (vedi --rosso-testo) */
.press-item-meta .testata, .press-item a.press-link, .archive-list .testata,
.press-contact a, .faq p a { color: var(--rosso-testo); }
.format-tag { color: var(--rosso-testo); border-color: var(--rosso-testo); }