/* =====================================================================
   ARCHETIPO «EDITORIALE» — Toscana Reputation Studio (dal 19/09/2026)
   Linguaggio ricavato da palacelidosuites.com (tecniche, non codice):
   sans sottilissimo + didone, foto che sbordano, lettere-contorno,
   parallasse a tre piani, sfondo che cambia per sezione.
   Va con ../css/movimento.css (token e componenti di movimento).

   I token qui sotto sono DEL CLIENTE: si campionano da logo e foto
   (DIVIETI §5) e ogni coppia testo/fondo si misura (≥ 4,5:1).
   PROVA Da Beppino: bordeaux del marchio #9B2242, toni delle colline
   di Volterra (paglia), pietra della sala, rosa del bordeaux.
   ===================================================================== */

:root {
  /* font: due ruoli, scelti per cliente col metodo di DIVIETI §3 */
  --f-sottile: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;   /* titoli 200, testo 400 */
  --f-didone: "GFS Didot", "Didot", "Bodoni 72", Georgia, serif;          /* occhielli, nomi, lettere */

  /* colori */
  --inchiostro: #221418;        /* titoli */
  --inchiostro-corpo: #3A2A2F;  /* testo corrente */
  --inchiostro-tenue: #5C484E;  /* occhielli, note — ≥ 4,5:1 su tutti i fondi di sezione */
  --accento: #9B2242;           /* marchio */
  --accento-scuro: #5C1226;
  --notte: #2A0A14;             /* pie' di pagina */
  --su-notte: #F4E7EA;
  --su-notte-tenue: #D2B7BF;
  --linea: rgba(34, 20, 24, .16);
  --linea-forte: rgba(34, 20, 24, .38);
  --carta-scheda: rgba(255, 255, 255, .75);

  /* movimento: colori dei componenti */
  --mv-inchiostro: var(--inchiostro);
  --mv-accento: #B8778A;        /* contorno delle lettere: il bordeaux schiarito */
  --mv-barra: rgba(92, 18, 38, .35);
  --mv-linea: var(--linea);           /* colore delle linee che si disegnano */

  /* misure */
  --bordo: clamp(20px, 6vw, 110px);   /* margine laterale */
  --sborda: 78px;                      /* quanto la foto esce dal bordo */
  --testata-h: 84px;
  --stacco: clamp(4rem, 12vh, 9rem);   /* l'unico spazio fra due sezioni: sotto, mai sopra (misure Lido 19/09) */
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo, #ECE7E4);
  transition: background-color 1s var(--ease-out-cubic); /* T1: la sfumatura sta qui, mai su --sfondo in html */
  color: var(--inchiostro-corpo);
  font: 400 1.0625rem/1.68 var(--f-sottile);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em { font-style: normal; }
h1, h2, h3, h4 { font-weight: inherit; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
section[id], .prenota { scroll-margin-top: calc(var(--testata-h) + 12px); }
/* Ordine di pittura fra sezioni (dal 19/09 sera): una foto che la parallasse spinge dentro la
   sezione precedente resta SOTTO quella sezione; i testi non vengono mai coperti. Senza padding
   sopra le sezioni (T3) è questo che tiene pulito il confine. */
main > section { position: relative; isolation: isolate; }
main > section:nth-child(1) { z-index: 24; } main > section:nth-child(2) { z-index: 23; } main > section:nth-child(3) { z-index: 22; }
main > section:nth-child(4) { z-index: 21; } main > section:nth-child(5) { z-index: 20; } main > section:nth-child(6) { z-index: 19; }
main > section:nth-child(7) { z-index: 18; } main > section:nth-child(8) { z-index: 17; } main > section:nth-child(9) { z-index: 16; }
main > section:nth-child(10) { z-index: 15; } main > section:nth-child(11) { z-index: 14; } main > section:nth-child(12) { z-index: 13; }

.wrap { width: min(100% - 2 * var(--bordo), 84rem); margin-inline: auto; }
.wrap--stretto { max-width: 62rem; }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: .7rem 1rem; background: var(--inchiostro); color: #fff; text-decoration: none;
}
.salta:focus { top: 12px; }

/* ------------------------------------------------------------ bottoni */
.bott {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .95em 2.2em;
  font: 500 .72rem/1 var(--f-sottile); letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  background: transparent;
}
.bott--contorno { color: var(--inchiostro); border-color: var(--inchiostro); --mv-riempi: var(--inchiostro); --mv-riempi-testo: #fff; }
.bott--scuro { color: #fff; background: var(--inchiostro); border-color: var(--inchiostro); --mv-riempi: var(--accento); --mv-riempi-testo: #fff; }
.bott--chiaro { color: var(--inchiostro); background: #F6F1EC; border-color: #F6F1EC; --mv-riempi: var(--accento); --mv-riempi-testo: #fff; }
.bott--chiaro:hover, .bott--chiaro:focus-visible { border-color: var(--accento); }
.bott--chiaro-contorno { color: #fff; border-color: rgba(255, 255, 255, .85); --mv-riempi: #fff; --mv-riempi-testo: var(--inchiostro); }

/* ------------------------------------------------------------ testata */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--testata-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(12px, 3vw, 40px);
  color: #fff;
  transition: background-color .6s var(--ease-out-cubic), box-shadow .6s var(--ease-out-cubic), color .4s var(--ease-out-cubic), height .5s var(--ease-out-expo);
}
.testata--piena {
  --testata-h: 70px;
  background: color-mix(in srgb, var(--sfondo, #ECE7E4) 94%, transparent);
  color: var(--inchiostro);
  box-shadow: 0 14px 34px -24px rgba(34, 20, 24, .5);
}
html.menu-aperto .testata { color: var(--inchiostro); background: transparent; box-shadow: none; }
.testata__sx { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); }
.testata__dx { justify-self: end; }
.testata .bott--contorno { color: inherit; border-color: currentColor; --mv-riempi: currentColor; }
.testata:not(.testata--piena) .bott--contorno { --mv-riempi: #fff; --mv-riempi-testo: var(--inchiostro); }
html.menu-aperto .testata .bott--contorno { --mv-riempi: var(--inchiostro); --mv-riempi-testo: #fff; }

.marchio { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; text-align: center; }
.marchio b { color: inherit; font: 300 1.3rem/1 var(--f-sottile); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.marchio span { font: 400 .6rem/1 var(--f-didone); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }

.lingue { display: flex; gap: 2px; }
.lingua-b {
  min-width: 34px; min-height: 34px; padding: 0 4px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 500 .66rem/1 var(--f-sottile); letter-spacing: .16em; opacity: .72;
}
.lingua-b[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lingua-b:hover { opacity: 1; }

/* ------------------------------------------------ menù a tutto schermo */
.pannello {
  position: fixed; inset: 0; z-index: 55;
  display: grid; grid-template-rows: 1fr auto; gap: 2rem;
  padding: calc(var(--testata-h) + 4vh) clamp(56px, 10vw, 180px) 32px;
  background: #F3EDE4; color: var(--inchiostro);
  overflow-y: auto;
}
.pannello[hidden] { display: none; }
.pannello__etichetta {
  position: absolute; left: clamp(4px, 2.4vw, 36px); top: 50%; margin: 0;
  transform: translate(-30%, -50%) rotate(-90deg);
  font: 400 .72rem/1 var(--f-didone); letter-spacing: .6em; text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
.pannello__nav { align-self: center; }
.pannello__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.9rem, 2.4vh, 1.7rem); }
.pannello__nav a { display: inline-flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; }
.voce__titolo {
  font: 200 clamp(1.9rem, 4.4vw, 3.7rem)/1 var(--f-sottile); letter-spacing: .03em; text-transform: uppercase;
  transition: color .4s var(--ease-out-cubic), transform .7s var(--ease-out-expo);
}
.pannello__nav a:hover .voce__titolo, .pannello__nav a:focus-visible .voce__titolo { color: var(--accento); transform: translateX(12px); }
.voce__sotto { font: 400 .7rem/1.4 var(--f-didone); letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.pannello__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-size: .88rem; }
.pannello__piede p { margin: 0; }
.lingue--pannello .lingua-b { color: var(--inchiostro); }

/* ---------------------------------------------------------------- hero */
.eroe {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  display: grid; place-items: center; text-align: center;
  color: #fff; background: #1d0b11; overflow: hidden;
}
.eroe__media { position: absolute; inset: 0; }
.eroe__foto { position: absolute; inset: 0; margin: 0; opacity: 0; }
.eroe__foto:first-child, .eroe__foto.is-attiva { opacity: 1; }
.eroe__foto picture, .eroe__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Ken Burns continuo e dissolvenza incrociata: senza un livello proprio la foto a tutto
   schermo veniva ridipinta a ogni frame (21/09/2026). Sono tre foto: il costo in memoria è poco. */
.mv-attiva .eroe__foto { will-change: opacity; }
.mv-attiva .eroe__foto img { will-change: transform; }
.eroe__foto:first-child img { object-position: 50% 62%; }
.eroe__velo { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(24, 8, 14, .5) 0%, rgba(24, 8, 14, .46) 45%, rgba(24, 8, 14, .62) 100%); }
.eroe__testo { position: relative; z-index: 4; padding: 0 20px; }
.eroe__titolo { margin: 0; font: 200 clamp(2.6rem, 8.2vw, 7.6rem)/1.02 var(--f-sottile); letter-spacing: .06em; text-transform: uppercase; }
.eroe__riga { display: block; }
.eroe__sotto { margin: 1.6rem auto 2.6rem; max-width: 92vw; font: 400 clamp(.7rem, 1vw, .86rem)/1.7 var(--f-didone); letter-spacing: .3em; text-transform: uppercase; }
.eroe__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.eroe__scorri {
  position: absolute; left: 50%; bottom: 26px; z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: #fff; text-decoration: none; font: 400 .6rem/1 var(--f-didone); letter-spacing: .34em; text-transform: uppercase;
}
.eroe__scorri i { position: relative; width: 1px; height: 52px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.eroe__scorri i::after { content: ""; position: absolute; inset: -100% 0 auto; height: 100%; background: #fff; animation: scorri 2.4s var(--ease-in-out-forte) infinite; }
@keyframes scorri { to { top: 100%; } }

/* ------------------------------------------------ titoli a gerarchia invertita */
.occhiello { margin: 0 0 2rem; font: 400 .76rem/1.6 var(--f-didone); letter-spacing: .3em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.titolo { display: flex; flex-direction: column; gap: 1.3rem; margin: 0; }
.titolo__occhiello { display: block; max-width: 34ch; font: 400 clamp(.74rem, .85vw, .86rem)/1.75 var(--f-didone); letter-spacing: .24em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.titolo__occhiello em { color: var(--accento); }
.titolo__grande { display: block; font: 200 clamp(2.9rem, 7.2vw, 7.4rem)/.96 var(--f-sottile); letter-spacing: .015em; text-transform: uppercase; color: var(--inchiostro); }
.titolo__grande--lungo { font-size: clamp(2.4rem, 5.2vw, 5.2rem); }
.titolo__grande em { color: var(--accento); }
.titolo--centro { align-items: center; text-align: center; }
.sommario { max-width: 56ch; margin: 1.8rem 0 0; }
.sommario--centro { margin-inline: auto; text-align: center; }
b, strong { font-weight: 500; color: var(--inchiostro); }

/* ------------------------------------------------------------ la casa
   Dal 19/09 sera: testo a sinistra, foto dell'allevamento a destra che sborda
   (la sezione non è più una pagina di solo testo); le tre date sono nelle tappe. */
.manifesto { padding: 0 0 var(--stacco); overflow-x: clip; }
.manifesto__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(42% + var(--sborda)); gap: clamp(2.5rem, 5vw, 6rem); align-items: center; padding-left: var(--bordo); }
.manifesto__colonna { position: relative; z-index: 6; max-width: 40rem; padding-top: clamp(2.5rem, 6vh, 4rem); }
.manifesto__foto { position: relative; margin: 0 calc(-1 * var(--sborda)) 0 0; height: min(58vh, 520px); }
.manifesto__foto img { object-position: 28% 50%; } /* la foto è molto larga: nel ritaglio deve restare Angelo, a sinistra */
.manifesto__foto figcaption {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; max-width: 70%;
  padding: .5rem .85rem; background: rgba(255, 255, 255, .86);
  font: 400 .64rem/1.5 var(--f-didone); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro);
}
.manifesto__testo { margin: 0; max-width: 24ch; font: 300 clamp(1.55rem, 3.1vw, 2.7rem)/1.3 var(--f-sottile); color: var(--inchiostro); }
.manifesto__testo em { font-family: var(--f-didone); color: var(--accento); }
.manifesto__lede { max-width: 52ch; margin: 2.2rem 0 0; }
.prove { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .7rem 2.4rem; margin: 2.6rem 0 0; padding: 0; font: 400 .7rem/1.5 var(--f-didone); letter-spacing: .22em; text-transform: uppercase; color: var(--inchiostro-tenue); }

/* ------------------------------------------------ sezioni immagine + testo */
.it { position: relative; padding: 0 0 var(--stacco); overflow-x: clip; }
.it__griglia { position: relative; display: grid; grid-template-columns: calc(58% + var(--sborda)) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5.5vw, 7rem); padding-right: var(--bordo); }
.it--dx .it__griglia { grid-template-columns: minmax(0, 1fr) calc(58% + var(--sborda)); padding: 0 0 0 var(--bordo); }
.it__foto { position: relative; margin: 0 0 0 calc(-1 * var(--sborda)); height: min(80vh, 780px); grid-row: 1; grid-column: 1; }
.it--dx .it__foto { margin: 0 calc(-1 * var(--sborda)) 0 0; grid-column: 2; }
.it--dx .it__testo { grid-column: 1; grid-row: 1; }
.it__foto--media { height: min(72vh, 660px); }
.it__foto figcaption {
  position: absolute; z-index: 2; left: calc(var(--sborda) + 16px); bottom: 16px; max-width: 70%;
  padding: .5rem .85rem; background: rgba(255, 255, 255, .86);
  font: 400 .64rem/1.5 var(--f-didone); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro);
}
.it--dx .it__foto figcaption { left: 16px; }
.it__testo { position: relative; z-index: 6; max-width: 36rem; }
.it__testo > p { margin: 1.3rem 0 0; }
.it__anno { margin-top: 2.2rem !important; }
.it__anno b { font: 200 2.2rem/1 var(--f-sottile); letter-spacing: .04em; }
.seppia img { filter: sepia(.32) contrast(.96) brightness(1.02); }

/* lettere-contorno: 25vw dal bordo, al 40 % della scena, sopra la foto */
.it .lettera { top: 52%; left: 25vw; }
.it--dx .lettera { left: auto; right: 25vw; }

/* la storia: tappe */
.tappe { list-style: none; max-width: 84rem; margin: clamp(3rem, 7vh, 5rem) auto 0; padding: 0 var(--bordo); }
.tappa { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) minmax(12rem, 19rem); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: 2.4rem 0; }
.tappa__anno { margin: 0; font: 200 clamp(2.8rem, 5vw, 4.6rem)/1 var(--f-sottile); letter-spacing: .02em; color: var(--inchiostro); }
.tappa__testo { margin: 0; max-width: 42ch; }
.tappa__foto { margin: 0; }
.tappa__cornice { aspect-ratio: 4 / 3; }
.tappa__foto figcaption { margin-top: .6rem; font: 400 .62rem/1.5 var(--f-didone); letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-tenue); }

/* la tavola */
.voci { display: grid; gap: 0; margin-top: 2.6rem; }
.voce { padding: 1.3rem 0 1.4rem; }
.voce h3 { margin: 0 0 .5rem; font: 400 .92rem/1.35 var(--f-didone); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro); }
.voce p { margin: 0; }
.voce .voce__sopra { margin-bottom: .45rem; font: 400 .66rem/1.4 var(--f-didone); letter-spacing: .2em; text-transform: uppercase; color: var(--accento); }
.voce .sottolinea { display: inline-block; margin-top: .9rem; font: 500 .7rem/1 var(--f-sottile); letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro); }
.coppia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; padding: 0 var(--bordo); margin-top: clamp(2.5rem, 6vh, 4rem); }
.coppia figure { margin: 0; overflow: hidden; }
.coppia img { width: 100%; height: 100%; object-fit: cover; }
.coppia__a { grid-column: 2 / span 4; aspect-ratio: 4 / 5; }
.coppia__b { grid-column: 8 / span 4; aspect-ratio: 1; margin-top: 5rem; }

/* la famiglia: foto più stretta, quattro persone in colonna */
.famiglia .it__griglia { grid-template-columns: calc(46% + var(--sborda)) minmax(0, 1fr); }
.famiglia .it__testo { max-width: 40rem; }
.persone { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; margin-top: 2.8rem; }
.persona { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.persona__foto { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona__foto--lettera { display: grid; place-items: center; background: #EAD3D8; }
.persona__foto--lettera span { font: 400 2.6rem/1 var(--f-didone); color: var(--accento); }
.persona h3 { margin: 0; font: 300 1.2rem/1.2 var(--f-sottile); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro); }
.persona__ruolo { margin: .4rem 0 .6rem; font: 400 .64rem/1.4 var(--f-didone); letter-spacing: .18em; text-transform: uppercase; color: var(--accento); }
.persona p:last-child { margin: 0; font-size: .92rem; line-height: 1.6; }

/* la cantina */
.cantina__ritaglio { position: absolute; z-index: 3; margin: 0; left: 43%; bottom: -9%; width: clamp(180px, 19vw, 300px); aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(34, 20, 24, .6); }

.vini { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.vini li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); transform: scaleX(var(--mv-l, 1)); transform-origin: left center; }
.vini li { padding: .85rem 0; font: 400 .74rem/1.4 var(--f-didone); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro); }

/* ------------------------------------------------------------ vetrina */
.podere { padding: 0 0 var(--stacco); overflow-x: clip; }
.vetrina { position: relative; margin-top: clamp(2rem, 5vh, 3.5rem); padding: 0 var(--bordo); outline-offset: 6px; }
.vetrina__diapositive { display: grid; gap: 4rem; touch-action: pan-y; }
.vetrina--attiva .vetrina__diapositive { gap: 0; }
.vetrina--attiva .vetrina__diapo { grid-area: 1 / 1; visibility: hidden; }
.vetrina--attiva .vetrina__diapo.is-attiva { visibility: visible; }
.vetrina__diapo { position: relative; }
.vetrina__foto { position: relative; margin: 0 0 0 auto; width: 64%; height: min(84vh, 760px); overflow: hidden; }
.vetrina__lastra { position: absolute; inset: 0; overflow: hidden; background: #d9d4cf; }
.vetrina__lastra picture, .vetrina__lastra img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vetrina__scheda {
  position: absolute; z-index: 3; left: 0; top: 50%; translate: 0 -50%;
  width: min(42%, 31rem); padding: clamp(1.8rem, 3vw, 3.2rem);
  background: var(--carta-scheda);
}
.vetrina__num { margin: 0; font: 200 .9rem/1 var(--f-sottile); letter-spacing: .34em; color: var(--inchiostro-tenue); }
.vetrina__nome { margin: .8rem 0 1.5rem; font: 400 clamp(1.3rem, 2vw, 1.85rem)/1.2 var(--f-didone); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); }
.vetrina__dati { --linee: 1; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.5rem; }
.vetrina__dati::before, .vetrina__dati::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--linea-forte); transform: scaleX(var(--linee)); transform-origin: left center; }
.vetrina__dati::before { top: 0; }
.vetrina__dati::after { bottom: 0; }
.vetrina__dati div { position: relative; padding: .95rem 1rem .95rem 0; }
.vetrina__dati div + div { padding-left: 1.1rem; }
.vetrina__dati div + div::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--linea-forte); transform: scaleY(var(--linee)); }
.vetrina__dati dt { font: 400 .62rem/1.3 var(--f-didone); letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.vetrina__dati dd { margin: .4rem 0 0; font-size: .92rem; line-height: 1.4; color: var(--inchiostro); }
.vetrina__testo { margin: 0 0 1.7rem; font-size: .98rem; }
.vetrina__comandi { display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem; margin-top: 1.4rem; }
.vetrina:not(.vetrina--attiva) .vetrina__comandi { display: none; }
.vetrina__freccia { display: grid; place-items: center; min-width: 56px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--inchiostro); cursor: pointer; transition: transform .6s var(--ease-out-expo); }
.vetrina__freccia[data-dir="-1"]:hover { transform: translateX(-6px); }
.vetrina__freccia[data-dir="1"]:hover { transform: translateX(6px); }
.vetrina__contatore { display: flex; align-items: center; gap: .7rem; margin: 0; font: 200 1.35rem/1 var(--f-sottile); color: var(--inchiostro); }
.vetrina__contatore i { display: block; width: 1px; height: 1.7rem; background: currentColor; transform: rotate(26deg); }
.vetrina__pausa { font: 500 .66rem/1 var(--f-sottile); letter-spacing: .2em; text-transform: uppercase; background: none; border: 1px solid var(--linea-forte); padding: .6rem .9rem; cursor: pointer; }

/* ------------------------------------------------ menù + recensioni: una fascia sola (dal 19/09 sera) */
.fascia { padding: 0 0 var(--stacco); }
.fascia__int { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-top: clamp(2.5rem, 6vh, 4rem); }
.fascia__titolo { margin: 0 0 1.2rem; font: 200 clamp(2rem, 3.4vw, 3rem)/1.05 var(--f-sottile); text-transform: uppercase; color: var(--inchiostro); }
.fascia__menu p { margin: 0 0 1.3rem; }
.fascia__recensioni { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--linea); }
.fascia__recensioni::before { display: none; }
.fascia__recensioni .occhiello { margin-bottom: 1.2rem; }
.recensioni__nota { margin: 0; max-width: 22ch; font: 200 clamp(1.5rem, 2.5vw, 2.2rem)/1.2 var(--f-sottile); color: var(--inchiostro); }
.recensioni__vie { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.8rem 0 0; }
.menu-lingue { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font: 400 .72rem/1.4 var(--f-didone); letter-spacing: .18em; text-transform: uppercase; }
.menu-lingue a { color: var(--inchiostro); }

/* ------------------------------------------------------------ contatti */
.contatti { padding: 0 0 var(--stacco); }
/* dal 19/09 sera: recapiti in riga sopra, mappa e #prenota affiancati sotto */
.contatti__griglia { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "recapiti recapiti" "mappa prenota"; gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); margin-top: 2.6rem; align-items: stretch; }
.recapiti { grid-area: recapiti; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
.recapiti > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: 1.25rem 0; align-content: start; }
.recapiti > .recapiti__vie { grid-column: 1 / -1; }
.recapiti dt { padding-top: .3rem; font: 400 .66rem/1.4 var(--f-didone); letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.recapiti dd { margin: 0; color: var(--inchiostro); }
.recapiti address { font-style: normal; }
.recapiti small { color: var(--inchiostro-tenue); font-size: .86rem; }
.recapiti > .recapiti__vie { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 1.7rem; }
.mappa { grid-area: mappa; position: relative; margin: 0; min-height: 440px; background: color-mix(in srgb, var(--sfondo, #F4EFEA) 88%, #000 5%); overflow: hidden; transition: background-color .6s var(--ease-out-cubic); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.6) sepia(.12) contrast(1.02); opacity: 0; transition: opacity 1.2s var(--ease-out-cubic); }
.mappa iframe.is-carica { opacity: 1; }
/* mappa a richiesta (C4): finché non si chiede, il riquadro porta indirizzo e bottone; l'iframe di Google entra al clic */
.mappa__int { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 1.4rem; margin: 0; padding: 1.5rem; text-align: center; transition: opacity .5s var(--ease-out-cubic); }
.mappa__dove { font: 300 clamp(1.2rem, 1.8vw, 1.5rem)/1.35 var(--f-sottile); letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); }
.mappa.is-aperta .mappa__int { opacity: 0; pointer-events: none; }

.prenota { grid-area: prenota; margin-top: 0; padding: clamp(1.8rem, 4vw, 3.6rem); background: rgba(255, 255, 255, .62); }
.prenota-titolo { margin: 0 0 2.2rem; font: 200 clamp(2rem, 3.6vw, 3.2rem)/1.05 var(--f-sottile); text-transform: uppercase; color: var(--inchiostro); }
.prenota-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; }
.prenota-campi label { display: grid; gap: .5rem; font: 400 .66rem/1.3 var(--f-didone); letter-spacing: .18em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.prenota-campi input, .prenota-campi textarea {
  width: 100%; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--linea-forte); border-radius: 0;
  background: transparent; color: var(--inchiostro); font: 400 1rem/1.4 var(--f-sottile); letter-spacing: 0; text-transform: none;
  transition: border-color .4s var(--ease-out-cubic), box-shadow .4s var(--ease-out-cubic);
}
.prenota-campi input:focus, .prenota-campi textarea:focus { outline: none; border-bottom-color: var(--accento); box-shadow: 0 1px 0 var(--accento); }
.prenota-note { grid-column: 1 / -1; }
.prenota-form button[type="submit"] { margin-top: 2.2rem; }
.prenota-form [hidden] { display: none !important; }
.prenota-nota { margin: 1rem 0 0; font-size: .88rem; color: var(--inchiostro-tenue); }
.prenota-esito { margin: 0; font: 300 1.3rem/1.4 var(--f-sottile); color: var(--inchiostro); }
.prenota-vie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

/* ---------------------------------------------------------------- FAQ
   Il blocco fra i marcatori lo scrive scripts/faq.py (modulo faq.css).
   Le regole DOPO il blocco lo adattano al linguaggio editoriale. */
/* faq-css:inizio */
/* MODULO «faq» — le domande che i clienti fanno al telefono, con la risposta del titolare.
   Generato in pagina da scripts/faq.py fra i marcatori «faq-css» (in assets/css/main.css o nello
   <style> del sito a file unico): non si ritocca lì, si corregge qui e si rilancia lo script.
   Parla la lingua --m-* di _contratto.css, con le stesse ricadute sui tre motori scritte
   in linea: funziona anche dove il contratto non è stato incollato. In un motore con nomi
   propri (Da Beppino: --amaranto, --bianco-caldo) si assegnano i --m-* su .m-faq, prima dei
   marcatori. Le classi riv/reveal e data-cascata sono quelle dei motori: il modulo le porta,
   e dove non esistono non fanno niente. */

.m-faq {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--m-carta-2, var(--carta-tenue, var(--carta-viva, var(--brand-100, #F7F5F2))));
  color: var(--m-testo, var(--testo, var(--inchiostro-corpo, var(--inchiostro, #3A3A3A))));
}
.m-faq__int {
  width: min(100% - 2 * clamp(20px, 5vw, 48px), var(--m-larghezza, var(--larg, 74rem)));
  margin-inline: auto;
}
.m-faq__occhiello {
  margin: 0 0 .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-primario, var(--primario, var(--brand-700, #2C5240)));
}
.m-faq__titolo {
  margin: 0;
  max-width: 22ch;
  font-family: var(--m-font-titolo, var(--font-display, inherit));
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  color: var(--m-titolo, var(--primario-notte, var(--inchiostro, var(--brand-900, #1B242C))));
}
.m-faq__titolo em {
  font-style: italic;
  color: var(--m-primario, var(--primario, var(--brand-700, #2C5240)));
}
.m-faq__lista {
  max-width: 46rem;
  margin: 2.6rem 0 0;
  display: grid;
  gap: .8rem;
}
.m-faq__voce {
  margin: 0;
  border: 1px solid var(--m-linea, var(--linea, var(--brand-200, #E4DFDA)));
  border-radius: var(--m-raggio, var(--raggio, var(--r-img, var(--r-md, 14px))));
  background: var(--m-carta, var(--carta, var(--brand-050, #FFFFFF)));
  overflow: hidden;
}
.m-faq__voce summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--m-titolo, var(--primario-notte, var(--inchiostro, var(--brand-900, #1B242C))));
}
.m-faq__voce summary::-webkit-details-marker { display: none; }
.m-faq__voce summary:focus-visible {
  outline: 2px solid var(--m-primario, var(--primario, var(--brand-700, #2C5240)));
  outline-offset: -2px;
}
.m-faq__segno {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--m-linea, var(--linea, var(--brand-200, #E4DFDA)));
  color: var(--m-primario, var(--primario, var(--brand-700, #2C5240)));
  font-weight: 500;
  transition: transform .3s var(--m-uscita, var(--uscita, cubic-bezier(.22, 1, .36, 1))), background-color .3s ease;
}
.m-faq__voce[open] .m-faq__segno {
  transform: rotate(45deg);
  background: var(--m-carta-2, var(--carta-tenue, var(--carta-viva, var(--brand-100, #F7F5F2))));
}
.m-faq__risposta {
  margin: 0;
  padding: 0 1.3rem 1.2rem;
  max-width: 40rem;
  line-height: 1.55;
  color: var(--m-testo-2, var(--testo-2, var(--inchiostro-tenue, #5F5F5F)));
}

@media (prefers-reduced-motion: reduce) {
  .m-faq__segno { transition: none; }
}
/* faq-css:fine */
.m-faq { padding: 0 0 var(--stacco); background: transparent; color: var(--inchiostro-corpo); }
.m-faq__int { width: min(100% - 2 * var(--bordo), 84rem); }
.m-faq__occhiello { font: 400 .76rem/1.6 var(--f-didone); letter-spacing: .3em; color: var(--inchiostro-tenue); }
.m-faq__titolo { max-width: none; font: 200 clamp(2.4rem, 5vw, 4.6rem)/1 var(--f-sottile); text-transform: uppercase; color: var(--inchiostro); }
.m-faq__titolo em { font-style: normal; color: var(--accento); }
.m-faq__lista { max-width: 52rem; gap: 0; border-bottom: 1px solid var(--linea); }
.m-faq__voce { position: relative; border: 0; border-radius: 0; background: transparent; }
.m-faq__voce::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea); transform: scaleX(var(--mv-l, 1)); transform-origin: left center; }
html.mv-attesa .m-faq__voce::before { transform: scaleX(0); }
.m-faq__voce summary { padding: 1.35rem 0; font: 300 1.14rem/1.4 var(--f-sottile); color: var(--inchiostro); }
.m-faq__segno { border: 0; width: 28px; height: 28px; font: 200 1.7rem/1 var(--f-sottile); color: var(--accento); }
.m-faq__voce[open] .m-faq__segno { background: transparent; }
.m-faq__risposta { padding: 0 2.4rem 1.5rem 0; color: var(--inchiostro-corpo); }

/* ------------------------------------------------------ pie' di pagina */
.pie { position: relative; overflow: hidden; background: var(--notte); color: var(--su-notte); }
.pie__int { padding: clamp(3rem, 7vh, 5rem) 0 2rem; }
.pie__nome { margin: 0 0 3.2rem; font: 200 clamp(3rem, 11vw, 10rem)/.9 var(--f-sottile); letter-spacing: .03em; text-transform: uppercase; }
.pie__griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.pie__motto { margin: 0; max-width: 36ch; color: var(--su-notte-tenue); }
.pie h4 { margin: 0 0 1rem; font: 400 .66rem/1.4 var(--f-didone); letter-spacing: .26em; text-transform: uppercase; color: var(--su-notte-tenue); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie__basso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .84rem; color: var(--su-notte-tenue); }
.pie__basso p { margin: 0; }

/* ------------------------------------------------ bottone flottante */
.chiama {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #fff; color: var(--accento);
  box-shadow: 0 0 0 6px rgba(155, 34, 66, .14), 0 14px 30px -12px rgba(34, 20, 24, .55);
  transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo);
}
.chiama:hover, .chiama:focus-visible { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(155, 34, 66, .12), 0 18px 34px -12px rgba(34, 20, 24, .55); }
html.menu-aperto .chiama { opacity: 0; pointer-events: none; }

/* ------------------------------------------------ desktop largo: aria */
/* ------------------------------------------------ tablet e telefono */
@media (max-width: 1023px) {
  :root { --sborda: 0px; }
  .it__griglia, .it--dx .it__griglia, .famiglia .it__griglia { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; padding: 0; }
  .it__foto, .it--dx .it__foto { grid-column: 1; grid-row: 1; width: 88%; height: min(64vh, 560px); margin: 0; }
  .it--dx .it__foto { margin-left: auto; }
  .it__testo, .it--dx .it__testo { grid-column: 1; grid-row: 2; max-width: none; padding: 0 var(--bordo); }
  .it .lettera, .it--dx .lettera { top: 34%; left: auto; right: 2vw; }
  .cantina__ritaglio { left: auto; right: var(--bordo); bottom: auto; top: calc(min(64vh, 560px) - 90px); width: 38vw; }
  .tappa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .tappa__foto { grid-column: 1 / -1; max-width: 26rem; }
  .vetrina__foto { width: 100%; height: min(62vh, 520px); }
  .vetrina__scheda { position: relative; top: auto; translate: none; width: auto; margin: -3rem 14px 0; }
  .vetrina__comandi { justify-content: center; }
  .manifesto__griglia { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding: 0; }
  .manifesto__foto { grid-row: 1; width: 88%; height: min(44vh, 360px); margin: 0 0 0 auto; }
  .manifesto__colonna { grid-row: 2; max-width: none; padding: 0 var(--bordo); }
  .fascia__int { grid-template-columns: minmax(0, 1fr); }
  .fascia__recensioni { padding-left: 0; padding-top: 2rem; border-left: 0; }
  .fascia__recensioni::before { display: block; }
  .contatti__griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "recapiti" "mappa" "prenota"; }
  .recapiti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prenota-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .testata .lingue { display: none; }
  .marchio b { font-size: 1rem; letter-spacing: .26em; padding-left: .26em; }
  .marchio span { font-size: .52rem; }
}

@media (max-width: 768px) {
  :root { --testata-h: 66px; }
  .testata--piena { --testata-h: 60px; }
  body { font-size: 1rem; }
  .testata__dx .bott { padding: .8em 1.1em; letter-spacing: .14em; min-height: 40px; }
  .pannello { padding-left: 48px; padding-right: 24px; }
  .recapiti { grid-template-columns: minmax(0, 1fr); }
  .tappa { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .persone { grid-template-columns: minmax(0, 1fr); }
  .coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .coppia__a, .coppia__b { grid-column: auto; }
  .coppia__b { margin-top: 3rem; }
  .prenota-campi { grid-template-columns: minmax(0, 1fr); }
  .recapiti > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .pie__griglia { grid-template-columns: minmax(0, 1fr); }
  .chiama { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .mappa { min-height: 320px; }
}

@media (max-width: 380px) {
  .testata__dx .bott { padding: .8em .8em; letter-spacing: .1em; }
  .marchio span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eroe__scorri i::after { animation: none; top: 0; }
  .testata, .voce__titolo, .vetrina__freccia, .chiama { transition: none; }
}

/* === foto.py · segnaposto sfocato → foto nitida · inizio === */
/* Il segnaposto sfocato di 24 px vive nella variabile --sfocatura del <picture>
   ed e' incorporato: nessuna seconda richiesta di rete. Riempie il riquadro
   mentre la foto vera scende, poi la foto ci si dissolve sopra.

   Il <picture> si mette in mezzo fra il riquadro e l'<img>, quindi deve essere
   TRASPARENTE alla misura: width/height al 100% gli fanno prendere il box che
   il motore aveva dato all'immagine (le .foto hanno aspect-ratio, l'hero e'
   in posizione assoluta). Senza queste due righe, dentro un riquadro con
   aspect-ratio l'immagine perde l'altezza e il ritaglio salta.

   L'opacita' a zero si applica SOLO alle immagini che il JS ha trovato ancora
   in arrivo (.in-arrivo): senza JS, o per le foto gia' scese, non si nasconde
   niente. Una regola che nasconde un'immagine e si affida al JS per rimostrarla
   e' un sito bianco quando il JS non parte. */
picture[data-sfocatura] {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--sfocatura);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
picture[data-sfocatura] > img.in-arrivo { opacity: 0; }
picture[data-sfocatura] > img.is-carica { opacity: 1; transition: opacity .45s ease; }

/* Quando la foto e' arrivata il segnaposto si spegne: se un domani l'immagine
   diventasse trasparente, sotto non deve restare una macchia sfocata. */
picture[data-sfocatura]:has(> img.is-carica) { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  picture[data-sfocatura] > img.is-carica { transition: none; }
}
/* === foto.py · fine === */