/* ============ DESIGN TOKENS — palette chiara, calda, naturale ============ */
    :root {
      --crema:         #faf5ec;   /* sfondo dominante, lino chiarissimo */
      --avorio:        #f3ead9;   /* avorio caldo, sezioni alternate */
      --sabbia:        #e8dcc4;   /* sabbia, accenti */
      --argilla:       #d6c0a3;   /* argilla, hover/dettagli */
      --salvia:        #c2cbb0;   /* verde salvia chiaro */
      --salvia-soft:   #d9deca;   /* salvia ancora più tenue */
      --oliva:         #7d8a5f;   /* verde oliva, accenti naturali */
      --foglia:        #4f5e3d;   /* verde foglia, titoli (non nero) */
      --terra:         #b07a4f;   /* terracotta dolce */
      --terra-soft:    #d1a17b;   /* terracotta chiara */
      --pesco:         #e9b89c;   /* rosa pesco */
      --albicocca:     #f0c9a8;   /* albicocca, sfondi caldissimi */
      --inchiostro:    #3a3528;   /* marrone scuro caldo, mai nero */
      --grigio:        #8a8275;   /* grigio caldo, testi secondari */

      --serif:  'Cormorant Garamond', Georgia, serif;
      --sans:   'Inter', system-ui, -apple-system, sans-serif;

      --max-w:  1180px;
      --gutter: clamp(1.25rem, 4vw, 3rem);
      --radius: 14px;
      --radius-lg: 28px;
    }

    /* ============ RESET ============ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 17px;
      line-height: 1.65;
      color: var(--inchiostro);
      background: var(--crema);
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.18; color: var(--foglia); letter-spacing: -0.005em; }

    /* ============ TEXTURE NATURALE (rumore tenue) ============ */
    body::before {
      content: ""; position: fixed; inset: 0;
      pointer-events: none; z-index: 1;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.6  0 0 0 0 0.4  0 0 0 0.04 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
      opacity: 0.6;
      mix-blend-mode: multiply;
    }

    /* ============ HEADER ============ */
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(250, 245, 236, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(125, 138, 95, 0.12);
    }
    .nav-wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0.35rem var(--gutter);
      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    }
    .brand {
      display: block;
      line-height: 0;
      margin: -1.5rem 0;
    }
    .brand img {
      height: 130px;
      width: auto;
      display: block;
    }
    /* Logo più grande nella pagina Gaya Bimbi */
    .brand-bimbi {
      margin: -2.5rem 0;
    }
    .brand-bimbi img {
      height: 180px;
    }
    @media (max-width: 900px) {
      .brand img { height: 78px; }
      .brand-bimbi img { height: 108px; }
    }
    @media (max-width: 540px) {
      .brand img { height: 64px; }
      .brand-bimbi img { height: 86px; }
    }
    .nav-links {
      display: flex; gap: 1.75rem; align-items: center;
      list-style: none;
      font-size: 0.9rem;
    }
    /* Laptop stretto e tablet orizzontale: stringi gap e font per fare spazio a voci lunghe come "Ecologia del Ben·Essere" */
    @media (min-width: 901px) and (max-width: 1180px) {
      .nav-links { gap: 1.1rem; font-size: 0.82rem; }
      .nav-wrap { gap: 1.25rem; padding-left: 1rem; padding-right: 1rem; }
    }
    .nav-links a {
      color: var(--inchiostro);
      opacity: 0.75;
      transition: opacity 0.2s, color 0.2s;
    }
    .nav-links a:hover { opacity: 1; color: var(--terra); }
    .lang-switch {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      color: var(--grigio);
      padding-left: 1.5rem;
      border-left: 1px solid rgba(125, 138, 95, 0.2);
    }
    .lang-switch .active { color: var(--foglia); font-weight: 500; opacity: 1; }
    .menu-toggle { display: none; }

    /* ============ HERO — luminoso, mattino dorato sull'oliveto ============ */
    .hero {
      position: relative;
      min-height: 90vh;
      display: flex; align-items: center;
      padding: 5rem var(--gutter) 6rem;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 75% 30%, rgba(240, 201, 168, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(194, 203, 176, 0.8) 0%, transparent 60%),
        linear-gradient(180deg, #f7ecd3 0%, #f3e6cd 50%, #ecd9b8 100%);
    }
    /* sole/luce calda in alto a destra */
    .hero::before {
      content: ""; position: absolute; top: -10%; right: -5%;
      width: 60%; height: 80%;
      background: radial-gradient(circle, rgba(255, 230, 180, 0.6) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-svg {
      position: absolute; bottom: 0; left: 0;
      width: 100%; height: 60%;
      pointer-events: none;
    }
    .hero-content {
      position: relative; z-index: 3;
      max-width: 720px;
    }
    .hero-eyebrow {
      font-size: 0.78rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--terra);
      margin-bottom: 1.75rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }
    .hero-eyebrow::before {
      content: ""; width: 28px; height: 1px; background: var(--terra);
    }
    .hero h1 {
      font-size: clamp(2.6rem, 6.2vw, 5rem);
      color: var(--foglia);
      font-weight: 500;
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
    }
    .hero h1 em {
      font-style: italic;
      color: var(--terra);
      font-weight: 400;
    }
    .hero-sub {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1.2rem, 2.1vw, 1.5rem);
      color: var(--oliva);
      max-width: 600px;
      margin-bottom: 2.75rem;
      line-height: 1.5;
      font-weight: 400;
    }
    .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn {
      display: inline-block;
      padding: 1rem 2rem;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      border-radius: 999px;
      transition: all 0.25s ease;
    }
    .btn-primary {
      background: var(--terra);
      color: var(--crema);
    }
    .btn-primary:hover {
      background: var(--foglia);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(176, 122, 79, 0.25);
    }
    .btn-secondary {
      background: rgba(250, 245, 236, 0.6);
      color: var(--foglia);
      border: 1px solid rgba(79, 94, 61, 0.25);
    }
    .btn-secondary:hover {
      background: var(--crema);
      border-color: var(--foglia);
    }
    .image-todo {
      position: absolute; bottom: 1rem; right: 1rem; z-index: 4;
      font-size: 0.68rem; color: var(--grigio);
      background: rgba(250, 245, 236, 0.85); padding: 0.4rem 0.7rem;
      border-radius: 999px;
      letter-spacing: 0.05em;
      font-weight: 400;
    }

    /* ============ SEZIONI GENERALI ============ */
    section { padding: 7rem var(--gutter); position: relative; z-index: 2; }
    .container { max-width: var(--max-w); margin: 0 auto; }
    .section-eyebrow {
      font-size: 0.74rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--terra);
      margin-bottom: 1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }
    .section-eyebrow::before {
      content: ""; width: 28px; height: 1px; background: var(--terra);
    }
    .section-title {
      font-size: clamp(2rem, 4.2vw, 3.2rem);
      margin-bottom: 1.25rem;
      max-width: 760px;
      color: var(--foglia);
    }
    .section-intro {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.3rem;
      color: var(--oliva);
      max-width: 700px;
      margin-bottom: 4rem;
      line-height: 1.5;
    }

    /* ============ TRE PRINCIPI ============ */
    .principi {
      background: var(--avorio);
    }
    .principi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
      margin-top: 2.5rem;
    }
    .principio {
      padding-top: 2.5rem;
      position: relative;
    }
    .principio::before {
      content: ""; position: absolute; top: 0; left: 0;
      width: 48px; height: 4px;
      background: var(--terra-soft);
      border-radius: 999px;
    }
    .principio h3 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }
    .principio p {
      color: var(--inchiostro);
      opacity: 0.78;
      font-size: 0.98rem;
    }

    /* ============ SEI PROGRAMMI ============ */
    .programmi {
      background: var(--crema);
    }
    .programmi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
      margin-top: 1rem;
    }
    .programma-card {
      display: block;
      background: var(--avorio);
      border: 1px solid rgba(125, 138, 95, 0.12);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .programma-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(176, 122, 79, 0.15);
    }
    .programma-img {
      aspect-ratio: 4 / 3;
      background:
        linear-gradient(135deg, var(--salvia-soft), var(--albicocca));
      position: relative;
      overflow: hidden;
    }
    .programma-img svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
    .programma-img::after {
      content: attr(data-label);
      position: absolute; bottom: 0.6rem; right: 0.6rem;
      font-size: 0.65rem; letter-spacing: 0.08em;
      color: var(--inchiostro); opacity: 0.55;
      background: rgba(250,245,236,0.7); padding: 0.25rem 0.55rem;
      border-radius: 999px;
    }
    .programma-body { padding: 1.75rem; }
    .programma-tag {
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--terra);
      margin-bottom: 0.5rem;
    }
    .programma-title {
      font-family: var(--serif);
      font-size: 1.45rem;
      color: var(--foglia);
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }
    .programma-desc {
      font-size: 0.92rem;
      color: var(--inchiostro);
      opacity: 0.78;
      margin-bottom: 1rem;
    }
    .programma-cta {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--terra);
      letter-spacing: 0.04em;
    }

    /* ============ CASE DELLE ERBE — sfondo chiaro caldo ============ */
    .case {
      background: linear-gradient(180deg, var(--avorio) 0%, var(--sabbia) 100%);
    }
    .case-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.25rem;
      margin-top: 2.5rem;
    }
    .casa-card {
      text-align: center;
      padding: 1.5rem 0.5rem;
      border-radius: var(--radius);
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .casa-card:hover {
      background: rgba(250, 245, 236, 0.6);
      transform: translateY(-3px);
    }
    .casa-symbol {
      width: 84px; height: 84px;
      margin: 0 auto 1rem;
      background: var(--crema);
      border: 1px solid rgba(125, 138, 95, 0.2);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.25s ease;
    }
    .casa-card:hover .casa-symbol { border-color: var(--terra); }
    .casa-symbol svg { width: 56%; height: 56%; }
    .casa-name {
      font-family: var(--serif);
      font-size: 1.25rem;
      color: var(--foglia);
      margin-bottom: 0.2rem;
    }
    .casa-archetype {
      font-size: 0.78rem;
      color: var(--terra);
      letter-spacing: 0.05em;
      font-style: italic;
    }
    .case-cta {
      text-align: center;
      margin-top: 3.5rem;
    }

    /* ============ NIDI — palafitte, gemella delle Case ============ */
    .nidi {
      background: var(--crema);
    }
    .nidi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
    }
    .nido-card {
      text-align: center;
      padding: 1.75rem 0.75rem;
      border-radius: var(--radius);
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .nido-card:hover {
      background: var(--avorio);
      transform: translateY(-3px);
    }
    .nido-symbol {
      width: 96px; height: 96px;
      margin: 0 auto 1rem;
      background: var(--salvia-soft);
      border: 1px solid rgba(125, 138, 95, 0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .nido-card:hover .nido-symbol {
      border-color: var(--terra);
      background: var(--albicocca);
    }
    .nido-symbol svg { width: 60%; height: 60%; }
    .nido-name {
      font-family: var(--serif);
      font-size: 1.3rem;
      color: var(--foglia);
      margin-bottom: 0.2rem;
    }
    .nido-archetype {
      font-size: 0.78rem;
      color: var(--terra);
      letter-spacing: 0.05em;
      font-style: italic;
    }
    .nidi-cta {
      text-align: center;
      margin-top: 3rem;
    }
    .placeholder-tag {
      display: inline-block;
      margin-top: 1.5rem;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--grigio);
      background: var(--avorio);
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
    }

    /* ============ TINY / CASA TONDA — singola, asimmetrica ============ */
    .tiny {
      background: linear-gradient(180deg, var(--avorio) 0%, var(--sabbia) 100%);
    }
    .tiny-wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .tiny-illustration {
      aspect-ratio: 1 / 1;
      max-width: 460px;
      margin: 0 auto;
      background:
        radial-gradient(circle at 50% 70%, var(--albicocca) 0%, transparent 70%),
        var(--crema);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 20px 60px rgba(176, 122, 79, 0.12);
    }
    .tiny-illustration svg { width: 70%; height: 70%; }
    /* Quando .tiny-illustration contiene una scroll-gallery (foto reali invece di SVG) */
    .tiny-illustration:has(.scroll-gallery) {
      aspect-ratio: auto;
      max-width: 100%;
      background: none;
      border-radius: 0;
    }
    .tiny-illustration .scroll-gallery {
      margin: 0;
      padding: 0.5rem 0 1rem;
      max-width: none;
    }
    .tiny-illustration .scroll-gallery-portrait .sg-slide {
      width: clamp(220px, 90%, 360px);
    }
    .tiny-text { padding: 1rem 0; }
    .tiny-text h2 {
      font-size: clamp(2rem, 4vw, 2.8rem);
      margin-bottom: 1.25rem;
    }
    .tiny-text > p {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.2rem;
      color: var(--oliva);
      line-height: 1.5;
      margin-bottom: 2rem;
    }
    .tiny-features {
      list-style: none;
      margin-bottom: 2rem;
    }
    .tiny-features li {
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(125, 138, 95, 0.15);
      display: flex; gap: 0.75rem; align-items: center;
      font-size: 0.95rem;
      color: var(--inchiostro);
    }
    .tiny-features li::before {
      content: "→";
      color: var(--terra);
      font-family: var(--serif);
      font-size: 1.1rem;
    }
    .tiny-meta {
      display: flex;
      gap: 1.5rem;
      font-size: 0.85rem;
      color: var(--grigio);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
    .tiny-meta span strong {
      display: block;
      color: var(--terra);
      font-family: var(--serif);
      font-size: 1.6rem;
      font-style: italic;
      letter-spacing: -0.01em;
      text-transform: none;
      margin-bottom: -2px;
    }

    /* ============ NUMERI — caldo, terra/oro ============ */
    .numeri {
      background: var(--avorio);
      padding: 5rem var(--gutter);
      border-top: 1px solid rgba(125, 138, 95, 0.1);
      border-bottom: 1px solid rgba(125, 138, 95, 0.1);
    }
    .numeri-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 920px;
      margin: 0 auto;
      gap: 2rem;
      align-items: end;
    }
    .numero { text-align: center; }
    .numero-cifra {
      font-family: var(--serif);
      font-size: clamp(3.5rem, 7.5vw, 5.8rem);
      color: var(--terra);
      font-weight: 500;
      line-height: 1;
      margin-bottom: 0.6rem;
      font-style: italic;
    }
    .numero-sub {
      font-size: 0.95rem;
      color: var(--foglia);
      max-width: 220px;
      margin: 0 auto;
      line-height: 1.4;
      opacity: 0.85;
    }

    /* ============ EVENTI ============ */
    .eventi { background: var(--crema); }
    .eventi-list {
      display: grid;
      gap: 0;
      margin-top: 2rem;
    }
    .evento {
      display: grid;
      grid-template-columns: 130px 1fr auto;
      gap: 2rem;
      align-items: center;
      padding: 2rem 0.5rem;
      border-top: 1px solid rgba(125, 138, 95, 0.18);
      transition: padding-left 0.25s ease, background 0.25s ease;
      border-radius: 8px;
    }
    .evento:hover {
      padding-left: 1.25rem;
      background: var(--avorio);
    }
    .evento:last-child { border-bottom: 1px solid rgba(125, 138, 95, 0.18); }
    .evento-data {
      font-family: var(--serif);
      color: var(--terra);
    }
    .evento-data .giorno {
      font-size: 2.8rem;
      font-weight: 500;
      line-height: 1;
      display: block;
      font-style: italic;
    }
    .evento-data .mese {
      font-size: 0.82rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--oliva);
      margin-top: 0.4rem;
      display: block;
      font-style: normal;
    }
    .evento-titolo {
      font-family: var(--serif);
      font-size: 1.45rem;
      color: var(--foglia);
      margin-bottom: 0.3rem;
    }
    .evento-meta {
      font-size: 0.88rem;
      color: var(--inchiostro);
      opacity: 0.65;
    }
    .evento-cta {
      font-size: 0.85rem;
      color: var(--terra);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    /* ============ VOLONTARI — strisciata sotto Eventi ============ */
    .volontari {
      background: linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
      padding: 5.5rem var(--gutter);
    }
    .volontari-wrap {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }
    .volontari h2 {
      margin-left: auto;
      margin-right: auto;
    }
    .volontari > .volontari-wrap > p {
      font-family: var(--serif);
      font-style: italic;
      color: var(--oliva);
      font-size: 1.2rem;
      max-width: 640px;
      margin: 0 auto 2.5rem;
      line-height: 1.5;
    }
    .portali-row {
      display: flex;
      justify-content: center;
      gap: 1.25rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
    }
    .portale-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.85rem 1.5rem;
      background: var(--crema);
      border: 1px solid rgba(125, 138, 95, 0.25);
      border-radius: 999px;
      font-size: 0.92rem;
      color: var(--foglia);
      font-weight: 500;
      transition: border-color 0.2s, transform 0.2s;
    }
    .portale-badge:hover {
      border-color: var(--terra);
      transform: translateY(-2px);
    }
    .portale-badge .pittogramma {
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--terra);
    }
    .portale-badge .pittogramma svg { width: 100%; height: 100%; }

    /* ============ NEWSLETTER ============ */
    .newsletter {
      background:
        radial-gradient(ellipse at 50% 0%, var(--albicocca) 0%, transparent 70%),
        var(--avorio);
      text-align: center;
    }
    .newsletter-box {
      max-width: 560px;
      margin: 0 auto;
    }
    .newsletter h2 { margin: 0 auto 1.25rem; }
    .newsletter > .newsletter-box > p {
      font-family: var(--serif);
      font-style: italic;
      color: var(--oliva);
      font-size: 1.2rem;
      margin-bottom: 2.5rem;
    }
    .newsletter-form {
      display: flex; gap: 0.5rem; flex-wrap: wrap;
      justify-content: center;
    }
    .newsletter-form input {
      flex: 1;
      min-width: 220px;
      padding: 0.95rem 1.2rem;
      border: 1px solid rgba(79, 94, 61, 0.25);
      background: var(--crema);
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--inchiostro);
      border-radius: 999px;
    }
    .newsletter-form input:focus {
      outline: none;
      border-color: var(--terra);
      background: white;
    }
    .newsletter-form button {
      padding: 0.95rem 1.75rem;
      background: var(--foglia);
      color: var(--crema);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      border-radius: 999px;
      transition: background 0.2s;
    }
    .newsletter-form button:hover { background: var(--inchiostro); }
    .newsletter-privacy {
      font-size: 0.78rem;
      color: var(--grigio);
      margin-top: 1.25rem;
      font-style: normal !important;
      font-family: var(--sans) !important;
    }

    /* ============ FOOTER — verde foglia profondo ma non nero ============ */
    footer {
      background: var(--foglia);
      color: rgba(250, 245, 236, 0.78);
      padding: 5rem var(--gutter) 2rem;
      position: relative; z-index: 2;
    }
    .footer-grid {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
    }
    .footer-col h4 {
      font-family: var(--sans);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--pesco);
      margin-bottom: 1.25rem;
    }
    .footer-col p, .footer-col a {
      font-size: 0.88rem;
      color: rgba(250, 245, 236, 0.72);
      line-height: 1.8;
      display: block;
    }
    .footer-col a:hover { color: var(--pesco); }
    .footer-brand .brand-mark {
      font-family: var(--serif);
      font-size: 1.7rem;
      color: var(--crema);
      line-height: 1;
    }
    .footer-brand .brand-mark small {
      display: block;
      font-family: var(--sans);
      font-size: 0.65rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--pesco);
      margin-top: 6px;
    }
    .footer-brand-tag {
      font-family: var(--serif);
      font-style: italic;
      color: rgba(250, 245, 236, 0.6);
      font-size: 0.98rem;
      max-width: 300px;
      margin-top: 1.25rem;
    }
    .footer-bottom {
      max-width: var(--max-w);
      margin: 0 auto;
      padding-top: 2rem;
      border-top: 1px solid rgba(250, 245, 236, 0.15);
      display: flex; flex-wrap: wrap; gap: 1rem;
      justify-content: space-between;
      font-size: 0.78rem;
      color: rgba(250, 245, 236, 0.5);
    }
    .footer-bottom .legal {
      max-width: 760px;
      line-height: 1.7;
    }
    .footer-bottom strong { color: rgba(250, 245, 236, 0.8); font-weight: 500; }
    .cinque-mille {
      background: rgba(233, 184, 156, 0.12);
      border-left: 3px solid var(--pesco);
      padding: 0.85rem 1rem;
      font-size: 0.82rem;
      margin-top: 1.25rem;
      border-radius: 0 8px 8px 0;
    }
    .cinque-mille strong {
      display: block;
      color: var(--pesco);
      letter-spacing: 0.08em;
      font-size: 0.7rem;
      text-transform: uppercase;
      margin-bottom: 0.25rem;
      font-weight: 500;
    }
    .cinque-mille code {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.95rem;
      color: var(--crema);
      letter-spacing: 0.04em;
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 900px) {
      .site-header { position: sticky; top: 0; z-index: 100; }
      .nav-wrap { position: relative; padding-top: 0.3rem; padding-bottom: 0.3rem; }
      .nav-links { display: none; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--avorio);
        padding: 1rem 1.25rem 1.25rem;
        gap: 0.4rem;
        border-top: 1px solid rgba(125, 138, 95, 0.18);
        box-shadow: 0 8px 24px rgba(58, 53, 40, 0.12);
        z-index: 100;
        font-size: 1rem;
      }
      .nav-links.open li {
        width: 100%;
        padding: 0.6rem 0;
        border-bottom: 1px dashed rgba(125, 138, 95, 0.18);
      }
      .nav-links.open li:last-child { border-bottom: none; }
      .nav-links.open a {
        display: block;
        opacity: 1;
        padding: 0.2rem 0;
      }
      .nav-links.open .lang-switch {
        text-align: center;
        padding-top: 1rem;
        font-size: 0.85rem;
        color: var(--grigio);
        letter-spacing: 0.1em;
      }
      .menu-toggle {
        display: block;
        font-size: 1.8rem;
        color: var(--foglia);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.3rem 0.5rem;
        line-height: 1;
      }
      .menu-toggle.active { color: var(--terra); }
      .hero { min-height: 78vh; padding-top: 4rem; }
      .principi-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .programmi-grid { grid-template-columns: 1fr 1fr; }
      .case-grid { grid-template-columns: repeat(3, 1fr); }
      .nidi-grid { grid-template-columns: repeat(2, 1fr); }
      .numeri-grid { gap: 1rem; }
      .evento { grid-template-columns: 90px 1fr; }
      .evento-cta { grid-column: 2; padding-top: 0.5rem; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    }
    @media (max-width: 540px) {
      .programmi-grid { grid-template-columns: 1fr; }
      .case-grid { grid-template-columns: repeat(2, 1fr); }
      .nidi-grid { grid-template-columns: repeat(2, 1fr); }
      .tiny-wrap { grid-template-columns: 1fr; gap: 2rem; }
      .footer-grid { grid-template-columns: 1fr; }
      section { padding: 4.5rem var(--gutter); }
    }

/* ===========================================================
   ============ STILI SPECIFICI PER PAGINE INTERNE =============
   =========================================================== */

/* ============ PAGE HERO — versione più piccola dell'hero home ============ */
.page-hero {
  position: relative;
  padding: 6rem var(--gutter) 4rem;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(240, 201, 168, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  text-align: center;
  overflow: hidden;
}
@media (max-width: 900px) {
  .page-hero { padding: 4rem var(--gutter) 3rem; }
}
@media (max-width: 540px) {
  .page-hero { padding: 3rem var(--gutter) 2.5rem; }
  .page-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(58, 53, 40, 0.45) 0%,
    rgba(58, 53, 40, 0.70) 100%);
  pointer-events: none;
}
.page-hero-wrap {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.2rem);
  margin-bottom: 1.25rem;
  font-weight: 500;
  color: #faf5ec !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.page-hero .section-eyebrow {
  color: #fbd9a5 !important;
}
.page-hero .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: #faf5ec !important;
  line-height: 1.5;
  max-width: 700px;
  margin: 0 auto;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ============ COME FUNZIONA — strisciata 4 punti ============ */
.come-funziona {
  background: var(--avorio);
  padding: 4.5rem var(--gutter);
}
.cf-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.cf-item {
  text-align: left;
  padding-top: 1.5rem;
  border-top: 2px solid var(--terra-soft);
}
.cf-item .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.5rem;
}
.cf-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.cf-item p {
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.78;
  line-height: 1.55;
}

/* ============ PROGRAMMI INDICE — card più ricche della home ============ */
.programmi-indice {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.pi-list {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.pi-card {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(176, 122, 79, 0.12);
}
.pi-img {
  background: linear-gradient(135deg, var(--salvia-soft), var(--albicocca));
  position: relative;
  min-height: 280px;
}
.pi-img::after {
  content: attr(data-label);
  position: absolute; bottom: 0.7rem; right: 0.7rem;
  font-size: 0.65rem; letter-spacing: 0.08em;
  color: var(--inchiostro); opacity: 0.55;
  background: rgba(250, 245, 236, 0.75);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.pi-body {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pi-tag {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
}
.pi-title {
  font-family: var(--serif);
  font-size: 1.85rem;
  color: var(--foglia);
  line-height: 1.15;
  margin-bottom: 0.3rem;
}
.pi-subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
}
.pi-desc {
  color: var(--inchiostro);
  opacity: 0.82;
  font-size: 0.97rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.pi-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: var(--grigio);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.pi-meta span {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.pi-meta strong {
  color: var(--terra);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
}
.pi-cta {
  align-self: flex-start;
  font-size: 0.88rem;
  color: var(--terra);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--terra);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.pi-card:hover .pi-cta {
  color: var(--foglia);
  border-color: var(--foglia);
}

/* alterna l'orientamento delle card (img a destra/sinistra) */
.pi-card:nth-child(even) {
  grid-template-columns: 1.5fr 1.1fr;
}
.pi-card:nth-child(even) .pi-img { order: 2; }
.pi-card:nth-child(even) .pi-body { order: 1; }

/* ============ GRUPPI / B2B — sezione su misura ============ */
.gruppi {
  background: linear-gradient(180deg, var(--avorio) 0%, var(--sabbia) 100%);
  padding: 5.5rem var(--gutter);
}
.gruppi-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.gruppi h2 { margin: 0 auto 1.25rem; }
.gruppi > .gruppi-wrap > p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1.18rem;
  max-width: 680px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}
.gruppi-targets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.target-pill {
  padding: 0.55rem 1.1rem;
  background: var(--crema);
  border: 1px solid rgba(125, 138, 95, 0.25);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--foglia);
}

/* ============ COME PRENOTARE — 4 step ============ */
.prenotare {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.prenotare-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2.5rem 1.5rem 1.5rem;
  background: var(--avorio);
  border-radius: var(--radius);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1rem; left: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--terra);
}
.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  margin-top: 0.5rem;
}
.step p {
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.78;
  line-height: 1.55;
}

/* ============ RESPONSIVE per pagine interne ============ */
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: repeat(2, 1fr); }
  .pi-card { grid-template-columns: 1fr; }
  .pi-card:nth-child(even) { grid-template-columns: 1fr; }
  .pi-card:nth-child(even) .pi-img { order: 0; }
  .pi-card:nth-child(even) .pi-body { order: 0; }
  .pi-img { min-height: 200px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .cf-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}


/* ===========================================================
   ============ STILI SPECIFICI GAYA BIMBI =============
   ============ Sub-brand: tono più caldo, fiabesco ===========
   =========================================================== */

body.gaya-bimbi {
  --terra:        #d27a3c;   /* arancio zucca, accento dominante */
  --terra-soft:   #e89c64;
  --pesco:        #f5cba0;
  --albicocca:    #fadcb6;
  /* il resto delle variabili (verdi, crema, foglia) resta uguale */
}

/* HERO BIMBI — sfondo ancora più caldo, archi morbidi */
.bimbi-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  padding: 6rem var(--gutter) 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(245, 203, 160, 0.85) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(194, 203, 176, 0.7) 0%, transparent 65%),
    linear-gradient(180deg, #faecd2 0%, #f3dab2 100%);
}
.bimbi-hero::before {
  content: ""; position: absolute; top: -8%; right: -6%;
  width: 55%; height: 75%;
  background: radial-gradient(circle, rgba(255, 230, 180, 0.55) 0%, transparent 65%);
  pointer-events: none;
}
.bimbi-hero-svg {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 55%;
  pointer-events: none;
}
.bimbi-hero-content {
  position: relative; z-index: 3;
  max-width: 740px;
}
.bimbi-eyebrow {
  display: inline-block;
  background: var(--terra);
  color: var(--crema);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
  font-weight: 500;
}
.bimbi-hero h1 {
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  color: var(--foglia);
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.bimbi-hero h1 em {
  font-style: italic;
  color: var(--terra);
}
.bimbi-hero .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  color: var(--oliva);
  max-width: 600px;
  line-height: 1.5;
  margin-bottom: 2.5rem;
}

/* MANIFESTO — sezione intro con pull quote */
.manifesto {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.manifesto-wrap {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.manifesto h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1.5rem;
}
.manifesto p {
  font-size: 1.08rem;
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.manifesto .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--terra);
  line-height: 1.45;
  padding: 1.5rem 0;
  margin: 2rem 0;
  border-top: 1px solid rgba(125, 138, 95, 0.2);
  border-bottom: 1px solid rgba(125, 138, 95, 0.2);
}
.manifesto .pull cite {
  display: block;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--grigio);
  margin-top: 0.75rem;
  letter-spacing: 0.05em;
  font-family: var(--sans);
}

/* RUMI — sezione personaggio */
.rumi {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.rumi-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.rumi-illu {
  aspect-ratio: 1 / 1;
  max-width: 400px;
  margin: 0 auto;
  background: radial-gradient(circle at 50% 60%, var(--albicocca) 0%, transparent 70%), var(--crema);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(210, 122, 60, 0.12);
}
.rumi-illu svg { width: 70%; height: 70%; }
.rumi-illu img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.rumi-text h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}
.rumi-text .sottotitolo {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}
.rumi-text p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.parco-elenco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 1.25rem 0;
}
.parco-elenco span {
  font-size: 0.86rem;
  color: var(--foglia);
  background: rgba(125, 138, 95, 0.10);
  border: 1px solid rgba(125, 138, 95, 0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: var(--sans);
  letter-spacing: 0.01em;
}

/* QUATTRO ELEMENTI */
.elementi {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.elementi-grid {
  max-width: var(--max-w);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.elemento-card {
  background: var(--avorio);
  padding: 2rem 1.25rem;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid rgba(125, 138, 95, 0.12);
  transition: transform 0.25s ease;
}
.elemento-card:hover { transform: translateY(-4px); }
.elemento-symbol {
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
  background: var(--crema);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.elemento-symbol svg { width: 60%; height: 60%; }
.elemento-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--foglia);
  margin-bottom: 0.25rem;
}
.elemento-animale {
  font-size: 0.82rem;
  color: var(--terra);
  font-style: italic;
  margin-bottom: 1rem;
}
.elemento-laboratori {
  font-size: 0.85rem;
  color: var(--inchiostro);
  opacity: 0.75;
  line-height: 1.5;
}

/* REGOLE DEL PARCO */
.regole {
  background: var(--terra);
  color: var(--crema);
  padding: 5rem var(--gutter);
  text-align: center;
}
.regole h2 {
  color: var(--crema);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 2rem;
}
.regole-list {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.regola {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.regola p {
  margin: 0;
}
.regola-icona {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(250, 245, 236, 0.13);
  border: 1px solid rgba(250, 245, 236, 0.28);
  color: var(--pesco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.regola-icona svg {
  width: 60%;
  height: 60%;
}
.regola:hover .regola-icona {
  transform: scale(1.08) rotate(-3deg);
  background: rgba(250, 245, 236, 0.2);
}

/* PER CHI / QUANDO / QUANTO — info pratiche in 3 colonne */
.info-pratiche {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.ip-grid {
  max-width: 980px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.ip-block {
  background: var(--avorio);
  padding: 1.4rem 1.25rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--terra);
}
.ip-block h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  color: var(--foglia);
}
.ip-block p, .ip-block li {
  font-size: 0.88rem;
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}
.ip-block ul { list-style: none; padding-left: 0; }
.ip-block li {
  position: relative;
  padding-left: 1.8em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 Q3 4 13 3 Q13 13 3 13 Z' fill='%23b85c2c'/%3E%3Cpath d='M3 13 L13 3' stroke='%23faf5ec' stroke-width='0.7' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0.55em;
  background-size: 0.9em 0.9em;
}
.ip-block li::before { display: none; }

/* TARIFFE — tabella */
.tariffe {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.tariffe-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.tariffe-table {
  margin-top: 2.5rem;
  background: var(--crema);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(125, 138, 95, 0.18);
}
.tariffe-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(125, 138, 95, 0.12);
  align-items: center;
  font-size: 0.95rem;
}
.tariffe-row:last-child { border-bottom: none; }
.tariffe-row.header {
  background: var(--foglia);
  color: var(--crema);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tariffe-row .price {
  text-align: center;
  color: var(--terra);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
}
.tariffe-row.header .price {
  color: var(--crema);
  font-family: inherit;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.tariffe-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1rem;
}

/* LIBRO RUMI — card promozionale */
.libro {
  background: linear-gradient(180deg, var(--crema) 0%, var(--albicocca) 100%);
  padding: 6rem var(--gutter);
}
.libro-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}
.libro-cover {
  background: var(--avorio);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 25px 60px rgba(210, 122, 60, 0.18);
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.libro-cover-inner {
  border: 2px solid var(--terra);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  width: 100%;
}
.libro-cover-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--foglia);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.libro-cover-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.libro-cover-author {
  font-size: 0.78rem;
  color: var(--grigio);
  letter-spacing: 0.08em;
}
.libro-doppia-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: center;
}
.libro-doppia-cover .libro-cover {
  padding: 2rem 1.25rem;
  aspect-ratio: 3 / 4;
}
.libro-doppia-cover .libro-cover-inner {
  padding: 1.25rem 0.85rem;
}
.libro-doppia-cover .libro-cover-title {
  font-size: 1.2rem;
}
.libro-doppia-cover .libro-cover-sub {
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.libro-doppia-cover .libro-cover-author {
  font-size: 0.66rem;
}
.libro-cover-foto {
  padding: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(58, 53, 40, 0.28);
}
.libro-cover-foto img,
.libro-cover-foto picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
}
.libro-cover-foto picture { display: block; }

.libro-cover-quaderno {
  background: #ece6d4;
  transform: rotate(2.5deg);
  box-shadow: 0 25px 60px rgba(125, 138, 95, 0.22);
}
.libro-cover-quaderno .libro-cover-inner {
  border-color: var(--foglia);
}
.libro-cover-quaderno .libro-cover-title { color: var(--foglia); }
.libro-cover-quaderno .libro-cover-sub { color: var(--oliva); }
.libro-doppia-cover .libro-cover:first-child {
  transform: rotate(-2deg);
}
.libro-text h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.libro-text > .sottotitolo {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}
.libro-text p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* CONTATTI VALENTINA — block dedicato */
.contatti-bimbi {
  background: var(--terra);
  color: var(--crema);
  padding: 5rem var(--gutter);
  text-align: center;
}
.contatti-bimbi h2 {
  color: var(--crema);
  margin-bottom: 1rem;
}
.contatti-bimbi > p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  margin-bottom: 2rem;
}
.contatti-bimbi-row {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.contatti-bimbi-row a {
  color: var(--crema);
  font-size: 1.08rem;
  border-bottom: 1px solid rgba(250, 245, 236, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.contatti-bimbi-row a:hover { border-color: var(--crema); }
.contatti-bimbi .ref {
  font-size: 0.85rem;
  opacity: 0.85;
  letter-spacing: 0.05em;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .rumi-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .elementi-grid { grid-template-columns: repeat(2, 1fr); }
  .regole-list { grid-template-columns: repeat(2, 1fr); }
  .ip-grid { grid-template-columns: 1fr; }
  .tariffe-row { grid-template-columns: 2fr 1fr 1fr; font-size: 0.85rem; padding: 0.85rem 1rem; }
  .libro-wrap { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
  .elementi-grid { grid-template-columns: 1fr; }
  .regole-list { grid-template-columns: 1fr; }
}


/* ===========================================================
   ============ STILI SPECIFICI PAGINA DIMORE =============
   =========================================================== */

/* OVERVIEW — mappa visiva delle 11 dimore */
.dimore-overview {
  background: var(--avorio);
  padding: 5rem var(--gutter);
}
.do-wrap {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.do-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0.6rem;
  max-width: 760px;
  margin: 2.5rem auto 0;
}
.do-cell {
  aspect-ratio: 1 / 1;
  background: var(--crema);
  border: 1px solid rgba(125, 138, 95, 0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
  cursor: default;
}
.do-cell:hover { border-color: var(--terra); transform: translateY(-2px); }
.do-cell::after {
  content: attr(data-name);
  position: absolute;
  bottom: -1.6rem;
  font-size: 0.65rem;
  color: var(--grigio);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.do-cell.is-tana { border-color: rgba(125, 138, 95, 0.4); }
.do-cell.is-nido { border-color: rgba(176, 122, 79, 0.4); }
.do-cell.is-seme { border-color: var(--terra); border-width: 2px; }
.do-cell svg { width: 50%; height: 50%; }
.do-legend {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  margin-top: 4rem;
  font-size: 0.85rem;
  color: var(--inchiostro);
  opacity: 0.78;
}
.do-legend span {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.do-legend .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid;
  display: inline-block;
}

/* SEZIONE TANE — schede botaniche piene */
.tane-section {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.tane-grid {
  max-width: var(--max-w);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.tana-detail {
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.12);
  border-radius: var(--radius);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tana-head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-bottom: 1px solid rgba(125, 138, 95, 0.18);
  padding-bottom: 1.25rem;
  margin-bottom: 0.5rem;
}
.tana-icon {
  width: 64px; height: 64px;
  flex-shrink: 0;
  background: var(--crema);
  border: 1px solid rgba(125, 138, 95, 0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tana-icon svg { width: 60%; height: 60%; }
.tana-head-text { flex: 1; }
.tana-name {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--foglia);
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.tana-scientific {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 0.92rem;
}
.tana-archetype {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-top: 0.5rem;
}
.tana-section-block h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.4rem;
}
.tana-section-block p {
  color: var(--inchiostro);
  opacity: 0.85;
  font-size: 0.94rem;
  line-height: 1.6;
}
.tana-prova {
  background: var(--crema);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--terra);
  border-radius: 0 6px 6px 0;
  margin-top: 0.5rem;
}
.tana-prova p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--foglia);
  font-size: 0.95rem;
}
.tana-meta {
  display: flex; gap: 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(125, 138, 95, 0.25);
}

/* DIMORA LIST — lista nomi+archetipi nella sezione split, sotto al testo */
.dimora-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  margin: 1.5rem 0 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--avorio);
  border-radius: var(--radius);
  border-left: 3px solid var(--terra);
}
.dl-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.dl-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--foglia);
  font-weight: 500;
}
.dl-arch {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--terra);
  text-transform: lowercase;
  font-style: italic;
}
@media (max-width: 600px) {
  .dimora-list { grid-template-columns: 1fr; }
}

/* SCROLL GALLERY — slideshow CSS-only orizzontale, swipe/drag su tutti i dispositivi */
.scroll-gallery {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
  padding: 1.25rem 0 1.75rem;
  margin: 2rem auto 0;
  max-width: var(--max-w);
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 138, 95, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}
.scroll-gallery::-webkit-scrollbar {
  height: 6px;
}
.scroll-gallery::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-gallery::-webkit-scrollbar-thumb {
  background: rgba(125, 138, 95, 0.4);
  border-radius: 3px;
}
.sg-slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
  width: clamp(280px, 65vw, 560px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 18px 38px rgba(58, 53, 40, 0.16);
  background: var(--avorio);
}
.sg-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.sg-slide:hover img { transform: scale(1.02); }

/* Variante portrait (per gli interni del Seme) */
.scroll-gallery-portrait .sg-slide {
  aspect-ratio: 3 / 4;
  width: clamp(220px, 50vw, 380px);
}

/* SEZIONE NIDI — più asciutte (poco materiale scritto) */
.nidi-section {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.nidi-detail-grid {
  max-width: var(--max-w);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.nido-detail {
  background: var(--crema);
  border: 1px solid rgba(125, 138, 95, 0.12);
  border-radius: var(--radius);
  padding: 2rem;
}
.nido-detail .tana-head { border-color: rgba(176, 122, 79, 0.25); }
.nido-detail .tana-archetype { color: var(--oliva); }
.nido-detail .tana-section-block h4 { color: var(--oliva); }

/* SEZIONE SEME — riusa lo stile tiny della home, qui solo titoletto sezione */
.seme-section { background: var(--crema); }

/* ALTRE OPZIONI */
.altre {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.altre-grid {
  max-width: 720px;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.altra {
  background: var(--crema);
  border-radius: var(--radius);
  border-top: 3px solid var(--oliva);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.altra-foto {
  margin: -3px -1px 1.25rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--avorio);
}
.altra-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.altra:hover .altra-foto img { transform: scale(1.04); }
.altra h3,
.altra p {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.altra h3 { margin-top: 0; }
.altra > p:last-child { padding-bottom: 1.75rem; }
.altra h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.altra .sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.altra p {
  color: var(--inchiostro);
  opacity: 0.85;
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.altra .uso {
  font-size: 0.78rem;
  color: var(--grigio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px dashed rgba(125, 138, 95, 0.25);
  padding-top: 0.75rem;
}

/* PATTO DI ACCOGLIENZA */
.patto {
  background: var(--foglia);
  color: var(--crema);
  padding: 5rem var(--gutter);
  text-align: center;
}
.patto h2 {
  color: var(--crema);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1.5rem;
}
.patto .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  max-width: 720px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
  color: var(--crema);
}
.patto .scheda {
  display: flex; justify-content: center; gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: rgba(250, 245, 236, 0.85);
}
.patto .scheda strong {
  display: block;
  color: var(--pesco);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 0.55rem;
  font-size: 1.15rem;
  line-height: 1.3;
}
.patto .scheda > div {
  flex: 0 1 220px;
  line-height: 1.55;
}

/* RESPONSIVE pagina dimore */
@media (max-width: 900px) {
  .do-grid { grid-template-columns: repeat(6, 1fr); gap: 0.8rem; }
  .do-cell::after { display: none; }
  .tane-grid { grid-template-columns: 1fr; }
  .nidi-detail-grid { grid-template-columns: 1fr; }
  .altre-grid { grid-template-columns: 1fr; }
}


/* ===========================================================
   ============ STILI SPECIFICI PAGINA OLIO EVO =============
   =========================================================== */

/* HERO OLIO — dorato, oliva */
.olio-hero {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center;
  padding: 6rem var(--gutter) 4rem;
  overflow: hidden;
  background: var(--crema);
}
.olio-hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.olio-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.olio-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(58, 53, 40, 0.45) 0%,
    rgba(58, 53, 40, 0.70) 100%);
  pointer-events: none;
}
.olio-hero::before {
  content: ""; position: absolute; top: -10%; left: -5%;
  width: 50%; height: 70%;
  background: radial-gradient(circle, rgba(255, 230, 165, 0.6) 0%, transparent 65%);
  pointer-events: none;
}
.olio-hero-svg {
  position: absolute; right: 0; top: 0;
  height: 100%; width: 50%;
  pointer-events: none;
  opacity: 0.85;
}
.olio-hero-content {
  position: relative; z-index: 3;
  max-width: 720px;
}
.olio-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  color: #faf5ec;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.olio-hero h1 em {
  font-style: italic;
  color: #fbd9a5;
}
.olio-hero .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  color: #faf5ec;
  max-width: 580px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 2.5rem;
}

/* IL NUMERO 0,1 — sezione enorme con cifra in primo piano */
.numero-zero-uno {
  background: var(--crema);
  padding: 7rem var(--gutter);
  text-align: center;
}
.nzo-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.nzo-cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  color: var(--terra);
  line-height: 0.9;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.05em;
}
.nzo-label {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 2.5rem;
}
.nzo-explain {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--foglia);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.nzo-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(125, 138, 95, 0.18);
}
.nzo-compare .row strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--foglia);
  margin-bottom: 0.3rem;
}
.nzo-compare .row span {
  font-size: 0.78rem;
  color: var(--grigio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nzo-compare .row.gaya strong { color: var(--terra); }

/* I NUMERI PRODUTTIVI — strisciata con 4 dati */
.numeri-prod {
  background: var(--avorio);
  padding: 5rem var(--gutter);
}
.np-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.np-item {
  padding-top: 2rem;
  border-top: 2px solid var(--terra-soft);
}
.np-cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.8rem;
  color: var(--terra);
  line-height: 1;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.np-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 0.6rem;
}
.np-desc {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* COME SI FA — timeline 5 step verticale */
.come-si-fa {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.csf-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.csf-list {
  list-style: none;
  margin-top: 3rem;
  position: relative;
}
.csf-list::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--terra-soft);
}
.csf-list li {
  position: relative;
  padding-left: 70px;
  padding-bottom: 2rem;
}
.csf-list li:last-child { padding-bottom: 0; }
.csf-list li::before {
  content: counter(csf-step, decimal-leading-zero);
  counter-increment: csf-step;
  position: absolute;
  left: 0;
  top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--crema);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.csf-list { counter-reset: csf-step; }
.csf-list h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  margin-top: 0.4rem;
}
.csf-list p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.6;
}

/* STORIA OLIVETO */
.storia-olio {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.so-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.so-wrap h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.5rem; }
.so-wrap p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}
.so-wrap .stacco {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 1.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(125, 138, 95, 0.2);
  border-bottom: 1px solid rgba(125, 138, 95, 0.2);
  margin: 2rem 0;
  text-align: center;
  line-height: 1.5;
}

/* LE BOTTIGLIE — griglia formati */
.bottiglie {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.b-grid {
  max-width: var(--max-w);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.bottiglia {
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.15);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
}
.bottiglia:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(176, 122, 79, 0.12);
}
.bottiglia-illu {
  height: 140px;
  margin: 0 auto 1.25rem;
  display: flex; align-items: end; justify-content: center;
}
.bottiglia-illu svg { height: 100%; width: auto; }
.bottiglia-formato {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--foglia);
  margin-bottom: 0.25rem;
}
.bottiglia-tipo {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 1.25rem;
}
.bottiglia-prezzo {
  font-family: var(--serif);
  color: var(--terra);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 500;
}
.bottiglia-prezzo .um {
  font-size: 0.78rem;
  color: var(--grigio);
  font-style: normal;
  letter-spacing: 0.05em;
  font-family: var(--sans);
  margin-left: 0.3rem;
}

/* ORDINA */
.ordina {
  background: linear-gradient(180deg, var(--avorio) 0%, var(--sabbia) 100%);
  padding: 6rem var(--gutter);
  text-align: center;
}
.ordina-wrap {
  max-width: 660px;
  margin: 0 auto;
}
.ordina h2 { margin: 0 auto 1.25rem; }
.ordina > .ordina-wrap > p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}
.ordina-channels {
  display: flex; gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* CERTIFICAZIONI */
.cert {
  background: var(--crema);
  padding: 4.5rem var(--gutter);
  text-align: center;
}
.cert-row {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.2);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--foglia);
  font-weight: 500;
}
.cert-badge .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--crema);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .nzo-compare { grid-template-columns: 1fr; gap: 1.25rem; }
  .nzo-compare .row { padding: 1rem; background: var(--avorio); border-radius: 8px; }
  .np-grid { grid-template-columns: repeat(2, 1fr); }
  .b-grid { grid-template-columns: repeat(2, 1fr); }
  .olio-hero-svg { width: 100%; opacity: 0.3; }
}
@media (max-width: 540px) {
  .np-grid { grid-template-columns: 1fr; }
  .b-grid { grid-template-columns: 1fr; }
}


/* ===========================================================
   ============ STILI SPECIFICI PAGINA IL LUOGO =============
   =========================================================== */

/* CONTESTO GEOGRAFICO — strisciata con dati territoriali */
.contesto-geo {
  background: var(--avorio);
  padding: 5rem var(--gutter);
}
.cg-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
}
.cg-text h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.25rem; }
.cg-text p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.cg-data {
  background: var(--crema);
  padding: 2rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--terra);
}
/* Quando .cg-data contiene una scroll-gallery (foto al posto della lista dati) */
.cg-data:has(.scroll-gallery) {
  background: transparent;
  padding: 0;
  border-top: none;
  border-radius: 0;
}
.cg-gallery {
  margin: 0;
  padding: 0;
  max-width: none;
}
.cg-gallery .sg-slide {
  width: 92%;
  aspect-ratio: 4 / 3;
}
.cg-gallery {
  scrollbar-color: rgba(125, 138, 95, 0.6) rgba(125, 138, 95, 0.12);
}
.cg-gallery::-webkit-scrollbar { height: 8px; }
.cg-gallery::-webkit-scrollbar-track { background: rgba(125, 138, 95, 0.12); border-radius: 4px; }
.cg-gallery::-webkit-scrollbar-thumb { background: rgba(125, 138, 95, 0.6); border-radius: 4px; }
.cg-gallery-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
  opacity: 0.85;
}
.cg-gallery-hint .freccia {
  display: inline-block;
  animation: nudge 1.6s ease-in-out infinite;
}
.cg-gallery-hint .freccia.dx {
  animation-direction: alternate-reverse;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.cg-data li {
  list-style: none;
  padding: 0.75rem 0;
  border-bottom: 1px dashed rgba(125, 138, 95, 0.25);
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.95rem;
}
.cg-data li:last-child { border-bottom: none; }
.cg-data li .label { color: var(--grigio); letter-spacing: 0.04em; }
.cg-data li .value {
  font-family: var(--serif);
  color: var(--terra);
  font-style: italic;
  font-weight: 500;
}

/* STORIA TIMELINE */
.storia-luogo {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.timeline {
  max-width: 760px;
  margin: 3rem auto 0;
  position: relative;
  padding-left: 60px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--terra-soft);
}
.tl-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 2rem;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -47px;
  top: 8px;
  width: 16px; height: 16px;
  background: var(--terra);
  border-radius: 50%;
  border: 4px solid var(--crema);
  box-shadow: 0 0 0 2px var(--terra);
}
.tl-anno {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--terra);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.tl-titolo {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--foglia);
  margin-bottom: 0.4rem;
}
.tl-desc {
  color: var(--inchiostro);
  opacity: 0.78;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* L'INCENDIO E IL MEMORIALE */
.incendio {
  background: linear-gradient(180deg, var(--avorio) 0%, var(--sabbia) 100%);
  padding: 7rem var(--gutter);
}
.inc-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.inc-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3rem 0;
  text-align: center;
}
.inc-num {
  padding: 1.5rem 0;
  border-top: 2px solid var(--terra-soft);
}
.inc-num .cifra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--terra);
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1;
}
.inc-num .label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
}
.inc-wrap p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.inc-wrap .citazione {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--foglia);
  text-align: center;
  padding: 2rem 0;
  margin: 2rem 0;
  border-top: 1px solid rgba(125, 138, 95, 0.3);
  border-bottom: 1px solid rgba(125, 138, 95, 0.3);
  line-height: 1.5;
}

/* I TRE SENTIERI — trilogia simbolica */
.trilogia {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.tri-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.sentiero-card {
  background: var(--avorio);
  border-radius: var(--radius);
  border-top: 3px solid var(--terra);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sentiero-foto {
  margin: -3px -1px 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--crema);
}
.sentiero-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.sentiero-card:hover .sentiero-foto img { transform: scale(1.04); }
.sentiero-card .arch,
.sentiero-card .nome,
.sentiero-card .tema,
.sentiero-card .tappe,
.sentiero-card .meta {
  padding-left: 2rem;
  padding-right: 2rem;
}
.sentiero-card .arch { padding-top: 1.75rem; }
.sentiero-card .meta { padding-bottom: 2rem; }
.sentiero-card .arch {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
}
.sentiero-card .nome {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--foglia);
  margin-bottom: 0.4rem;
  line-height: 1.15;
}
.sentiero-card .tema {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.sentiero-card .tappe {
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.82;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.sentiero-card .tappe strong {
  color: var(--foglia);
  font-weight: 500;
}
.sentiero-card .meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--grigio);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 1px dashed rgba(125, 138, 95, 0.3);
}

/* MAPPA DI GAYA — concettuale */
.mappa-luogo {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.mappa-canvas {
  max-width: 980px;
  margin: 3rem auto 0;
  background: var(--crema);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(125, 138, 95, 0.1);
  border: 1px solid rgba(125, 138, 95, 0.15);
}
.mappa-canvas svg { width: 100%; height: auto; display: block; }
.mappa-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 980px;
  margin: 2rem auto 0;
  font-size: 0.82rem;
  color: var(--inchiostro);
  opacity: 0.78;
}
.mappa-legend .voce {
  display: flex; align-items: center; gap: 0.5rem;
}
.mappa-legend .marker {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* CHI SIAMO */
.chi-siamo {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.cs-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.persona {
  background: var(--avorio);
  padding: 2.5rem 2rem;
  border-radius: var(--radius);
  text-align: center;
}
.persona .ritratto {
  width: 110px; height: 110px;
  margin: 0 auto 1.5rem;
  background: var(--crema);
  border: 1px solid rgba(125, 138, 95, 0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.persona .ritratto svg { width: 80%; height: 80%; }
.persona .ritratto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona h3 {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}
.persona .ruolo {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.persona p {
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.78;
  line-height: 1.6;
}

/* RADICI ANTICHE — sezione basiliani */
.radici {
  background: linear-gradient(180deg, var(--avorio) 0%, var(--crema) 100%);
  padding: 6rem var(--gutter);
}
.rad-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.rad-wrap h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.5rem; }
.rad-wrap p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.rad-luoghi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.rad-luogo {
  padding: 1.25rem 1.5rem;
  background: var(--crema);
  border-left: 3px solid var(--oliva);
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
}
.rad-luogo strong {
  display: block;
  font-family: var(--serif);
  color: var(--foglia);
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.rad-luogo span {
  color: var(--grigio);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.rad-fonte {
  font-size: 0.8rem;
  color: var(--grigio);
  font-style: italic;
  margin-top: 1.5rem;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cg-grid { grid-template-columns: 1fr; gap: 2rem; }
  .inc-numbers { grid-template-columns: 1fr; gap: 1rem; }
  .tri-grid { grid-template-columns: 1fr; }
  .mappa-legend { grid-template-columns: repeat(2, 1fr); }
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .rad-luoghi { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cs-grid { grid-template-columns: 1fr; }
}


/* ============ HANNO PARLATO DI NOI — sezione press ============ */
.press {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.press-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.press-card {
  background: var(--crema);
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--terra);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
}
.press-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(176, 122, 79, 0.12);
}
.press-fonte {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.press-titolo {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--foglia);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  flex-grow: 1;
}
.press-data {
  font-size: 0.78rem;
  color: var(--grigio);
  letter-spacing: 0.05em;
  font-style: italic;
  margin-bottom: 1rem;
}
.press-cta {
  font-size: 0.82rem;
  color: var(--terra);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-top: 1px dashed rgba(125, 138, 95, 0.3);
  padding-top: 0.75rem;
}
.press-card.placeholder {
  opacity: 0.7;
  border-left-color: var(--grigio);
}
.press-card.placeholder .press-cta {
  color: var(--grigio);
  font-style: italic;
}
.press-extra {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--grigio);
}
.press-extra a {
  color: var(--oliva);
  border-bottom: 1px solid rgba(125, 138, 95, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.press-extra a:hover { color: var(--terra); border-color: var(--terra); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .press-grid { grid-template-columns: 1fr; }
}


/* ===========================================================
   ============ CSS PAGINE VOLONTARIATO/EVENTI/CONTATTI/FAQ ===
   =========================================================== */

/* ATTIVITÀ — card volontariato */
.activities {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.act-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.act-card {
  background: var(--avorio);
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--terra);
}
.act-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.act-card p {
  color: var(--inchiostro);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* CONDIZIONI — strisciata 4 dati */
.condizioni {
  background: var(--avorio);
  padding: 5rem var(--gutter);
}
.cond-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.cond-item {
  padding-top: 1.5rem;
  border-top: 2px solid var(--terra-soft);
}
.cond-item .cifra {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 2rem;
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.cond-item .label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 0.6rem;
}
.cond-item .desc {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ARRIVARE — info pratiche viaggio */
.arrivare {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.arr-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.arr-wrap > p, .arr-wrap p {
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.7;
  font-size: 1.02rem;
  margin-bottom: 1.25rem;
}
.bus-orari {
  background: var(--avorio);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--oliva);
  margin: 1.5rem 0;
}
.bus-orari h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--foglia);
  margin-bottom: 0.6rem;
}
.bus-orari ul {
  list-style: none;
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.85;
}
.bus-orari ul li { padding: 0.25rem 0; }
.bus-orari ul li strong {
  color: var(--terra);
  font-style: italic;
  font-family: var(--serif);
}

/* PORTALI — versione large della strisciata home */
.portali-large {
  background: var(--avorio);
  padding: 5rem var(--gutter);
  text-align: center;
}
.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 880px;
  margin: 2.5rem auto 0;
}
.pl-card {
  background: var(--crema);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(125, 138, 95, 0.18);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, border-color 0.25s;
}
.pl-card:hover {
  transform: translateY(-3px);
  border-color: var(--terra);
}
.pl-card .nome {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--foglia);
  margin-bottom: 0.4rem;
}
.pl-card .desc {
  font-size: 0.88rem;
  color: var(--grigio);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.pl-card .cta {
  font-size: 0.85rem;
  color: var(--terra);
  font-weight: 500;
}

/* ============ EVENTI page ============ */
.eventi-hero {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(245, 203, 160, 0.6) 0%, transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  padding: 6rem var(--gutter) 4rem;
}
.gaya-fest {
  background: var(--terra);
  color: var(--crema);
  padding: 7rem var(--gutter);
}
.gf-wrap {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.gf-wrap span.section-eyebrow { color: var(--pesco); }
.gf-wrap span.section-eyebrow::before { background: var(--pesco); }
.gf-wrap h2 {
  color: var(--crema);
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}
.gf-wrap > p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(250, 245, 236, 0.88);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
}
.gf-numbers {
  display: flex; justify-content: center; gap: 3rem;
  flex-wrap: wrap;
  margin: 3rem 0;
}
.gf-num strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--pesco);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.gf-num span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.7);
}
.btn-light {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--crema);
  color: var(--terra);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 999px;
  transition: background 0.2s;
}
.btn-light:hover { background: var(--pesco); color: var(--foglia); }

.calendario {
  background: var(--crema);
  padding: 6rem var(--gutter);
}

/* ============ CONTATTI page ============ */
.contatti-hero {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(194, 203, 176, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  padding: 6rem var(--gutter) 4rem;
}
.contact-options {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.co-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.co-card {
  background: var(--avorio);
  padding: 2.5rem 2rem;
  border-radius: var(--radius);
  border-top: 4px solid var(--terra);
  display: flex;
  flex-direction: column;
}
.co-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.co-card .sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
.co-card p {
  color: var(--inchiostro);
  opacity: 0.82;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.co-card .actions {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.co-card .actions a {
  font-size: 0.92rem;
  color: var(--terra);
  font-weight: 500;
  border-bottom: 1px solid rgba(176, 122, 79, 0.4);
  padding-bottom: 2px;
}
.co-card .actions a:hover { color: var(--foglia); border-color: var(--foglia); }

.coordinate {
  background: var(--avorio);
  padding: 6rem var(--gutter);
}
.coord-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.coord-block { background: var(--crema); padding: 2rem; border-radius: var(--radius); }
.coord-block h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.coord-block p, .coord-block a {
  display: block;
  color: var(--inchiostro);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.7;
}
.coord-block a { color: var(--terra); }
.coord-block a:hover { color: var(--foglia); }
.mappa-google {
  background: var(--crema);
  border-radius: var(--radius);
  height: 360px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--grigio);
  border: 1px dashed rgba(125, 138, 95, 0.4);
}

/* ============ FAQ page ============ */
.faq-hero {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(240, 201, 168, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  padding: 6rem var(--gutter) 4rem;
}
.faq-section {
  background: var(--crema);
  padding: 6rem var(--gutter);
}
.faq-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.faq-categoria {
  margin-bottom: 3.5rem;
}
.faq-categoria h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--foglia);
  margin-bottom: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--terra-soft);
}
.faq-categoria-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  display: block;
  margin-bottom: 0.4rem;
}
.faq-item {
  border-bottom: 1px solid rgba(125, 138, 95, 0.2);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--foglia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--terra);
  font-family: var(--sans);
  font-size: 1.3rem;
  transition: transform 0.25s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--terra); }
.faq-item p {
  padding: 0 0 1.25rem 0;
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.65;
  font-size: 0.97rem;
}

/* RESPONSIVE per le 4 nuove pagine */
@media (max-width: 900px) {
  .act-grid { grid-template-columns: 1fr; }
  .cond-grid { grid-template-columns: repeat(2, 1fr); }
  .pl-grid { grid-template-columns: 1fr; }
  .co-grid { grid-template-columns: 1fr; }
  .coord-grid { grid-template-columns: 1fr; }
  .gf-numbers { gap: 1.5rem; }
}
@media (max-width: 540px) {
  .cond-grid { grid-template-columns: 1fr; }
}


/* ============ SCOUT — sezione dedicata ============ */
.scout {
  background: var(--foglia);
  color: var(--crema);
  padding: 6rem var(--gutter);
}
.scout-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.scout-text h2 {
  color: var(--crema);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}
.scout-text .lead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--pesco);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.scout-text p {
  color: rgba(250, 245, 236, 0.85);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.scout-text strong { color: var(--crema); font-weight: 500; }
.scout-tariffe {
  background: rgba(250, 245, 236, 0.06);
  border: 1px solid rgba(250, 245, 236, 0.15);
  border-radius: var(--radius);
  padding: 2rem;
}
.scout-tariffe h3 {
  color: var(--pesco);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.scout-tariffe ul {
  list-style: none;
}
.scout-tariffe li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(250, 245, 236, 0.18);
  font-size: 0.93rem;
  color: rgba(250, 245, 236, 0.85);
}
.scout-tariffe li:last-child { border-bottom: none; }
.scout-tariffe li .price {
  font-family: var(--serif);
  font-style: italic;
  color: var(--pesco);
  font-weight: 500;
  font-size: 1.05rem;
  white-space: nowrap;
}
.scout-extra {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(250, 245, 236, 0.7);
  font-style: italic;
  font-family: var(--serif);
  line-height: 1.6;
}
.scout-cta {
  margin-top: 1.5rem;
}
.btn-scout {
  display: inline-block;
  padding: 0.95rem 1.75rem;
  background: var(--pesco);
  color: var(--foglia);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 999px;
  transition: background 0.2s;
}
.btn-scout:hover { background: var(--crema); }

@media (max-width: 900px) {
  .scout-wrap { grid-template-columns: 1fr; gap: 2rem; }
}


/* ===========================================================
   ============ RIPOSIZIONAMENTO 10 MAG 2026 ===================
   ============ HOME — quattro vie + nuova hero magnetica ======
   =========================================================== */

/* HERO MAGNETICA — pieno schermo, immagine grande, claim asciutto */
.magnetic-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 5rem var(--gutter);
  overflow: hidden;
  background: var(--crema);
}
@media (max-width: 900px) {
  .magnetic-hero { min-height: 80vh; padding: 4rem var(--gutter) 3rem; }
}
@media (max-width: 540px) {
  .magnetic-hero { min-height: 70vh; padding: 3rem var(--gutter) 2.5rem; }
}
html, body { overflow-x: clip; max-width: 100vw; }
.mh-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.mh-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.mh-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(250, 245, 236, 0.92) 0%, rgba(250, 245, 236, 0.78) 38%, rgba(250, 245, 236, 0.35) 65%, rgba(250, 245, 236, 0.05) 100%),
    linear-gradient(180deg, rgba(58, 53, 40, 0.05) 0%, rgba(58, 53, 40, 0.18) 100%);
  pointer-events: none;
}
.mh-content {
  position: relative; z-index: 3;
  max-width: 880px;
}
.mh-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 2.25rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-weight: 500;
}
.mh-eyebrow::before {
  content: ""; width: 36px; height: 1px; background: var(--terra);
}
.mh-h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--foglia);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.mh-h1 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 400;
}
.mh-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  color: var(--oliva);
  line-height: 1.4;
  max-width: 640px;
  margin-bottom: 3rem;
}
/* Hero su mobile: overlay più forte e testi chiari per leggibilità */
@media (max-width: 900px) {
  .mh-overlay {
    background:
      linear-gradient(180deg, rgba(58, 53, 40, 0.25) 0%, rgba(58, 53, 40, 0.55) 100%);
  }
  .mh-eyebrow { color: #faf5ec; }
  .mh-eyebrow::before { background: rgba(250, 245, 236, 0.7); }
  .mh-h1 { color: #faf5ec; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
  .mh-h1 em { color: #fbd9a5; }
  .mh-sub { color: #faf5ec; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
}

/* QUATTRO VIE — 4 card grandi, magnetiche */
.quattro-vie {
  background: var(--crema);
  padding: 7rem var(--gutter);
}
.qv-intro {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}
.qv-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.via-card {
  display: flex;
  flex-direction: column;
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-decoration: none;
  color: inherit;
}
.via-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(176, 122, 79, 0.15);
}
.via-img {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--avorio);
}
.via-img-bimbi { background: linear-gradient(135deg, #f5cba0, #e89c64); }
.via-img-ohs { background: linear-gradient(135deg, #c2cbb0, #7d8a5f); }
.via-img-olio { background: linear-gradient(135deg, #f7e8c5, #d6c0a3); }
.via-img-eventi { background: linear-gradient(135deg, #e9b89c, #b07a4f); }
.via-img-abitare { background: linear-gradient(135deg, #c2cbb0, #7d8a5f); }
.via-img svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
.via-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}
.via-card:hover .via-img img {
  transform: scale(1.04);
}
.via-img::after {
  content: attr(data-label);
  position: absolute; bottom: 1rem; right: 1.25rem;
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: rgba(58, 53, 40, 0.55);
  background: rgba(250, 245, 236, 0.8);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.via-body {
  padding: 2.25rem 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.via-tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.5rem;
}
.via-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--foglia);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.via-desc {
  color: var(--inchiostro);
  opacity: 0.78;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.via-cta {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--terra);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--terra);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.via-card:hover .via-cta { color: var(--foglia); border-color: var(--foglia); }

/* IL LUOGO IN BREVE */
/* OSPITA IL TUO RITIRO — pagina Eventi */
.ospita-ritiro {
  background: linear-gradient(180deg, var(--avorio) 0%, var(--crema) 100%);
  padding: 6rem var(--gutter) 5rem;
}
.or-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.or-wrap h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--foglia);
  line-height: 1.15;
  margin: 0.8rem 0 1.2rem;
  letter-spacing: -0.015em;
}
.or-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--oliva);
  max-width: 720px;
  margin: 0 auto 3rem;
  line-height: 1.55;
}
.or-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2rem auto 2.5rem;
}
.or-card {
  background: var(--crema);
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem;
  text-align: center;
  border: 1px solid rgba(125, 138, 95, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.or-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(58, 53, 40, 0.10);
}
.or-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  color: var(--terra);
}
.or-icon svg { width: 100%; height: 100%; }
.or-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--foglia);
  margin-bottom: 0.5rem;
}
.or-card p {
  font-size: 0.88rem;
  color: var(--inchiostro);
  opacity: 0.85;
  line-height: 1.55;
}
.or-note {
  max-width: 820px;
  margin: 2rem auto 2.5rem;
  text-align: left;
  background: var(--crema);
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--terra);
}
.or-note p {
  color: var(--inchiostro);
  opacity: 0.88;
  font-size: 0.95rem;
  line-height: 1.6;
}
.or-note p + p {
  margin-top: 0.6rem;
}
.or-note strong {
  color: var(--foglia);
  font-weight: 500;
}
.or-cta {
  margin-top: 0.5rem;
}
.or-disclaimer {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--grigio);
  font-style: italic;
  font-family: var(--serif);
}
@media (max-width: 900px) {
  .or-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .or-grid { grid-template-columns: 1fr; }
}

/* PRESS — sezione home: 6 riconoscimenti con loghi */
.press-home {
  background: var(--crema);
  padding: 6rem var(--gutter) 5rem;
}
.ph-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--foglia);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 1rem 0 1rem;
}
.ph-intro {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 580px;
  margin: 0 auto;
}
.ph-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ph-card {
  background: var(--avorio);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid rgba(125, 138, 95, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.ph-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(58, 53, 40, 0.10);
  border-color: var(--terra);
}
.ph-logo {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(125, 138, 95, 0.25);
}
.ph-logo svg {
  height: 50px;
  width: auto;
  max-width: 100%;
}
.ph-logo-foto {
  position: relative;
  gap: 0.75rem;
}
.ph-logo-foto img {
  height: 50px; width: 50px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.ph-logo-badge {
  display: inline-flex;
  align-items: center;
}
.ph-logo-badge svg {
  height: 22px;
  width: auto;
}
.ph-fonte {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
}
.ph-titolo {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--foglia);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 0.1rem;
}
.ph-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--oliva);
}
.ph-data {
  font-size: 0.8rem;
  color: var(--grigio);
  margin-top: auto;
  padding-top: 0.5rem;
}
.ph-cta {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--terra);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  font-weight: 500;
  transition: color 0.3s ease;
}
.ph-card:hover .ph-cta { color: var(--foglia); }

.ph-extra {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding: 1.75rem 2rem;
  background: var(--avorio);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.4rem;
}
.ph-extra-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grigio);
  font-weight: 500;
}
.ph-extra a {
  color: var(--foglia);
  text-decoration: none;
  border-bottom: 1px dotted var(--oliva);
  padding-bottom: 0.05em;
  transition: color 0.2s ease;
}
.ph-extra a:hover { color: var(--terra); }
.ph-extra-premio {
  color: var(--terra);
  font-style: italic;
  font-family: var(--serif);
  font-size: 0.95rem;
  width: 100%;
  padding-top: 0.85rem;
  margin-top: 0.5rem;
  border-top: 1px dashed rgba(125, 138, 95, 0.3);
}

@media (max-width: 900px) {
  .ph-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ph-grid { grid-template-columns: 1fr; }
}

.eventi-galleria {
  background: var(--avorio);
  padding: 5rem var(--gutter);
}
.eg-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.eg-tile {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 12px 30px rgba(58, 53, 40, 0.10);
}
.eg-tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.eg-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.85rem 1rem;
  background: linear-gradient(0deg, rgba(58,53,40,0.78) 0%, rgba(58,53,40,0) 100%);
  color: var(--crema);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  text-align: left;
}
.eg-tile:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .eg-grid { grid-template-columns: repeat(2, 1fr); }
}

.incendio-foto {
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: var(--avorio);
}
.incendio-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  display: block;
}

.vol-banda {
  position: relative;
  min-height: 50vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin: 4rem 0;
}
.vol-banda img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.vol-banda-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(58,53,40,0.65) 0%, rgba(58,53,40,0.45) 100%);
}
.vol-banda-text {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  padding: 0 var(--gutter);
}
.vol-banda-text p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--crema);
  line-height: 1.45;
}

.luogo-breve {
  background: var(--avorio);
  padding: 7rem var(--gutter);
  position: relative;
  overflow: hidden;
}
.luogo-breve-bg {
  position: absolute; inset: 0; z-index: 0;
}
.luogo-breve-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.luogo-breve-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(245, 239, 225, 0.92) 0%,
    rgba(245, 239, 225, 0.85) 100%);
  pointer-events: none;
}
.lb-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.lb-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--foglia);
  line-height: 1.18;
  margin: 1rem 0 1.5rem;
  letter-spacing: -0.015em;
}
.lb-pivot {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.5;
  max-width: 660px;
  margin: 0 auto 2.5rem;
}
.lb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.lb-stat {
  text-align: center;
}
.lb-stat .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--terra);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.4rem;
  display: block;
}
.lb-stat .lab {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grigio);
}

/* ============ ONE HEALTH SYSTEM page ============ */
.ohs-banda {
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: var(--avorio);
}
@media (max-width: 900px) {
  .ohs-banda { height: 320px; }
}
.ohs-banda img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.ohs-hero {
  position: relative;
  padding: 4rem var(--gutter) 4rem;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(194, 203, 176, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  text-align: center;
}
.ohs-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: var(--foglia);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.ohs-hero h1 em { font-style: italic; color: var(--terra); }
.ohs-lead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oliva);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  max-width: 720px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}
.ohs-meta {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grigio);
  background: rgba(125, 138, 95, 0.1);
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
}

/* IL FRAMEWORK — pull quote enorme */
.ohs-framework {
  background: var(--foglia);
  color: var(--crema);
  padding: 8rem var(--gutter);
  text-align: center;
}
.ohs-framework .q {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  color: var(--crema);
  line-height: 1.35;
  max-width: 880px;
  margin: 0 auto 2rem;
  letter-spacing: -0.01em;
}
.ohs-framework .q strong { color: var(--pesco); font-style: normal; font-weight: 400; }
.ohs-framework cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.55);
}

/* OTTO PRATICHE */
.ohs-pratiche {
  background: var(--crema);
  padding: 7rem var(--gutter);
}
.pratiche-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.pratica {
  background: var(--avorio);
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--terra);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pratica .icon {
  width: 36px; height: 36px;
  margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--terra);
}
.pratica h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--foglia);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.pratica p {
  font-size: 0.88rem;
  color: var(--inchiostro);
  opacity: 0.8;
  line-height: 1.55;
}

/* FACILITATORI */
.ohs-facilitatori {
  background: var(--avorio);
  padding: 7rem var(--gutter);
}
.fac-grid {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.facilitatore {
  background: var(--crema);
  padding: 2.25rem;
  border-radius: var(--radius);
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.facilitatore .ritr {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--avorio);
  border: 1px solid rgba(125, 138, 95, 0.2);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.facilitatore .ritr svg { width: 70%; height: 70%; }
.facilitatore .ritr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facilitatore h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--foglia);
  margin-bottom: 0.25rem;
}
.facilitatore .ruolo {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.facilitatore p {
  font-size: 0.92rem;
  color: var(--inchiostro);
  opacity: 0.8;
  line-height: 1.55;
}

/* COME PARTECIPARE */
.ohs-come {
  background: linear-gradient(180deg, var(--crema) 0%, var(--avorio) 100%);
  padding: 7rem var(--gutter);
  text-align: center;
}
.ohs-come h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  color: var(--foglia);
  margin: 1rem 0 1.5rem;
}
.ohs-come .desc {
  color: var(--inchiostro);
  opacity: 0.82;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

/* RESPONSIVE riposizionamento */
@media (max-width: 900px) {
  .qv-grid { grid-template-columns: 1fr; }
  .lb-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .pratiche-grid { grid-template-columns: repeat(2, 1fr); }
  .fac-grid { grid-template-columns: 1fr; }
  .facilitatore { flex-direction: column; text-align: center; }
}
@media (max-width: 540px) {
  .pratiche-grid { grid-template-columns: 1fr; }
  .lb-stats { grid-template-columns: 1fr; }
}


/* ============ STRISCIATA OLIO KALANÈ — sezione dedicata in home ============ */
.olio-strip {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(255, 220, 150, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #f7e8c5 0%, #ecd9b8 100%);
  padding: 7rem var(--gutter);
}
.olio-strip-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}
.olio-strip-illu {
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(176, 122, 79, 0.22);
}
.olio-strip-illu svg { width: 100%; height: 100%; }
.olio-strip-illu picture, .olio-strip-illu img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.olio-strip-text { padding: 1rem 0; }
.olio-strip-text .badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--terra);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.olio-strip-text h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  color: var(--foglia);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.olio-strip-text h2 em { font-style: italic; color: var(--terra); }
.olio-strip-text .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--oliva);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.olio-strip-text .specs {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.olio-strip-text .specs span {
  font-size: 0.85rem;
  color: var(--inchiostro);
  opacity: 0.78;
  padding: 0.4rem 0.9rem;
  background: rgba(250, 245, 236, 0.6);
  border-radius: 999px;
  border: 1px solid rgba(125, 138, 95, 0.2);
}

@media (max-width: 900px) {
  .olio-strip-wrap { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .olio-strip-text .specs { justify-content: center; }
}


/* ============ STRISCIATA ABITARE GAYA — formato weekend, ponte verso le Dimore ============ */
.abitare-strip {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(125, 138, 95, 0.22) 0%, transparent 60%),
    linear-gradient(135deg, #ece6d4 0%, #d8d4bf 100%);
  padding: 7rem var(--gutter);
}
.abitare-strip-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: center;
}
.abitare-strip-illu {
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.abitare-strip-illu svg { width: 100%; height: 100%; }
.abitare-strip-illu {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(125, 138, 95, 0.25);
}
.abitare-strip-illu img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.abitare-strip-text { padding: 1rem 0; }
.abitare-strip-text .badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--foglia);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.abitare-strip-text h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  color: var(--foglia);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.abitare-strip-text h2 em { font-style: italic; color: var(--terra); }
.abitare-strip-text .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  color: var(--oliva);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.abitare-strip-text .specs {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.abitare-strip-text .specs span {
  font-size: 0.85rem;
  color: var(--inchiostro);
  opacity: 0.78;
  padding: 0.4rem 0.9rem;
  background: rgba(250, 245, 236, 0.7);
  border-radius: 999px;
  border: 1px solid rgba(125, 138, 95, 0.2);
}

@media (max-width: 900px) {
  .abitare-strip-wrap { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .abitare-strip-text .specs { justify-content: center; }
  .abitare-strip-wrap .abitare-strip-illu { order: 2; }
  .abitare-strip-wrap .abitare-strip-text { order: 1; }
}