/* La Tana dell'Ermellino — il tema (05/11/2026). Si carica dopo sito.css (il motore di Al Duomo e del Chistè) e lo riveste.

   Identita' del loro sito tanadellermellino.it, tenuta (errore n. 23), coi valori letti dal loro CSS il 05/11/2026:
   - inverno: crema #FAF6F0, sabbia #EDE4D6, marrone #2C1810, notte #1A120B, testo #1A0E08 / #3D2518, oro #C4903A / #D4A44C;
   - estate (maggio-settembre, o col pulsante sole/neve): #F4F7F2, #DDE5D8, verde scuro #1B3421, #0F1F14, verde #7BA05B;
   - Instrument Serif per i titoli (la seconda parte in corsivo, nel colore dell'accento), Raleway per i testi, Caveat per le
     frasi scritte a mano («un rifugio genuino»). Tutti e tre SIL OFL, copiati sul nostro server (dal loro tema).
   L'oro del loro sito sul crema fa 2,6:1: va bene nei fondi scuri; sul chiaro i corsivi dei titoli usano un oro piu' scuro
   (3,7:1, testo grande) e le scritte piccole un bronzo (5,3:1). Le regole hanno il prefisso [data-tema="tana"]: cosi'
   vincono su quelle di base anche dentro le media query. Niente occhielli, niente emoji (regola dell'11/10/2026). */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-latin-ext-290e6267.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-latin-5eb09b5a.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-italic-latin-ext-d0014821.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-italic-latin-5a51946d.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-var-cyrillic-ext-36920a27.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-var-cyrillic-ac99ad1c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-var-latin-ext-2d603982.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-var-latin-b1bef1f0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-italic-var-cyrillic-bad8fd12.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-italic-var-latin-ext-263c505d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Raleway-italic-var-latin-8c08eb8b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/Caveat-var-cyrillic-6276a2f5.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/Caveat-var-latin-ext-f626b95c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/Caveat-var-latin-891951df.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================== i colori delle due stagioni */
:root[data-tema="tana"] {
  color-scheme: light;
  --crema: #faf6f0;
  --sabbia: #ede4d6;
  --sabbia-2: #e4d9ca;
  --scuro: #2c1810;            /* la barra, il menu del telefono */
  --notte: #1a120b;            /* il piede */
  --inchiostro: #1a0e08;       /* i titoli */
  --corpo: #3d2518;            /* i testi */
  --tenue: #6b5540;
  --accento: #c4903a;          /* l'oro del loro sito: sui fondi scuri */
  --accento-chiaro: #d4a44c;
  --accento-titoli: #a9742b;   /* i corsivi dei titoli sul chiaro (3,7:1, testo grande) */
  --accento-testo: #8a5e1f;    /* le scritte piccole d'accento sul chiaro (5,3:1) */
  --velo: rgba(44, 24, 16, .5);
  --velo-forte: rgba(26, 18, 11, .65);
  --vetro-scuro: rgba(44, 24, 16, .9);
  --filo-scuro: rgba(44, 24, 16, .18);
  --filo-chiaro: rgba(44, 24, 16, .08);

  --fondo: var(--crema);
  --grigio: var(--sabbia);
  --carta: #fffdf9;
  --tessera: #fffdf9;
  --testo: var(--corpo);
  --testo-2: var(--tenue);
  --testo-3: #85705c;
  --filo: var(--filo-scuro);
  --filo-tenue: var(--filo-chiaro);
  --vetro: var(--vetro-scuro);
  --oro: var(--scuro);           /* le regole di base che usano l'oro (pulsanti pieni) diventano marrone */
  --oro-testo: var(--accento-testo);
  --su-oro: var(--crema);
  --oro-su: #3d2518;
  --verde: #2f7a3b;
  --rosso-errore: #b3261e;
  --nero: var(--notte);
  --ombra: 0 1px 2px rgba(44, 24, 16, .05), 0 14px 34px rgba(44, 24, 16, .08);
  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --titoli: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --serif: var(--titoli);
  --a-mano: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --r-grande: 12px;
  --r-medio: 10px;
  --r-piccolo: 8px;
  --r-media: 8px;
  --barra: 64px;
  --largo: 1200px;
  --testata-fissa: 64px;
  --barra-basso: 0px;
  --larghezza-colonna: 1200px;
  --tenue-orizz: var(--tenue);
}
:root[data-tema="tana"][data-stagione="estate"] {
  --crema: #f4f7f2;
  --sabbia: #dde5d8;
  --sabbia-2: #d2dbcc;
  --scuro: #1b3421;
  --notte: #0f1f14;
  --inchiostro: #0d1f12;
  --corpo: #2a4430;
  --tenue: #4d7053;
  --accento: #7ba05b;
  --accento-chiaro: #8fb46e;
  --accento-titoli: #5e8540;
  --accento-testo: #4a6b32;
  --velo: rgba(27, 52, 33, .45);
  --velo-forte: rgba(15, 31, 20, .6);
  --vetro-scuro: rgba(27, 52, 33, .9);
  --filo-scuro: rgba(27, 52, 33, .18);
  --filo-chiaro: rgba(27, 52, 33, .08);
  --carta: #fbfdfa;
  --tessera: #fbfdfa;
  --testo-3: #5f7d64;
  --oro-su: #2a4430;
  --ombra: 0 1px 2px rgba(27, 52, 33, .05), 0 14px 34px rgba(27, 52, 33, .08);
}
/* il cambio di stagione col pulsante: i colori sfumano, come sul loro sito */
html.cambio-stagione, html.cambio-stagione * { transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease !important; }

/* una foto per stagione: si vede solo quella della stagione in corso (e col caricamento pigro si scarica solo quella) */
[data-stagione="inverno"] .solo-estate, [data-stagione="estate"] .solo-inverno { display: none !important; }
.solo-inverno, .solo-estate { display: contents; }

[data-tema="tana"] body { font-family: var(--font); font-size: 17px; line-height: 1.65; letter-spacing: 0; background: var(--fondo); color: var(--testo);
  font-variant-numeric: lining-nums; }
[data-tema="tana"] h1, [data-tema="tana"] h2, [data-tema="tana"] h3, [data-tema="tana"] h4 { letter-spacing: 0; }
[data-tema="tana"] ::selection { background: rgba(196, 144, 58, .28); }
[data-tema="tana"] :focus-visible { outline: 2px solid var(--accento-titoli); outline-offset: 3px; }
[data-tema="tana"] .stato.chiuso { color: var(--rosso-errore); }
[data-tema="tana"] .stato.aperto { color: var(--verde); }

/* ---------------------------------------------------------------- titoli e testi */
[data-tema="tana"] .titolo-pagina, [data-tema="tana"] .titolo-sezione, [data-tema="tana"] .titolo-medio, .t-titolo {
  font-family: var(--titoli); font-weight: 400; color: var(--inchiostro); text-wrap: balance;
}
[data-tema="tana"] .titolo-pagina { font-size: clamp(50px, 7.2vw, 96px); line-height: 1.04; letter-spacing: -.01em; }
[data-tema="tana"] .titolo-sezione { font-size: clamp(42px, 5.4vw, 72px); line-height: 1.06; }
.t-titolo { font-size: clamp(46px, 6vw, 84px); line-height: 1.06; letter-spacing: -.012em; }
.t-titolo.centro { text-align: center; }
/* le parole lunghe di altre lingue («Забронируйте», «Reservierungen») non devono allargare la pagina sui telefoni piccoli */
.t-titolo, [data-tema="tana"] .titolo-pagina, .t-eroe-titolo, .t-fascia-titolo { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 400px) {
  :root:lang(ru) .t-titolo, :root:lang(uk) .t-titolo, :root:lang(ru) .titolo-pagina, :root:lang(uk) .titolo-pagina { font-size: 39px; }
}
/* «Nel cuore / del bosco»: la seconda parte va a capo, in corsivo, nel colore dell'accento */
.tit-accento { display: block; font-style: italic; color: var(--accento-titoli); }
.tit-accento.in-linea { display: inline; }
.tit-dritto { display: inline; }
[data-tema="tana"] .punto { display: none; }
.t-testo { margin-top: 26px; font-size: 17px; line-height: 1.75; color: var(--corpo); max-width: 34em; }
.t-testo p + p { margin-top: 1em; }
.t-testo strong { color: var(--inchiostro); font-weight: 600; }
/* le frasi scritte a mano (Caveat), come sul loro sito */
.a-mano { font-family: var(--a-mano); font-weight: 500; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.25; color: var(--accento-titoli); letter-spacing: 0; }
.t-firma { margin-top: 28px; }
[data-tema="tana"] .sotto { font-size: clamp(18px, 1.8vw, 20px); line-height: 1.6; font-weight: 400; color: var(--corpo); }
[data-tema="tana"] .sotto strong { color: var(--inchiostro); font-weight: 600; }

/* ---------------------------------------------------------------- pulsanti */
[data-tema="tana"] .pillola {
  min-height: 50px; padding: 13px 28px; border-radius: 999px; background: var(--scuro); color: var(--crema);
  font: 600 15px/1.2 var(--font); letter-spacing: .02em; text-transform: none; box-shadow: none;
}
[data-tema="tana"] .pillola svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-tema="tana"] .pillola.wa svg { fill: currentColor; stroke: none; }
@media (hover: hover) { [data-tema="tana"] .pillola:hover { background: var(--oro-su); } }
[data-tema="tana"] .pillola.chiara { background: transparent; color: var(--scuro); box-shadow: inset 0 0 0 1.5px var(--scuro); }
@media (hover: hover) { [data-tema="tana"] .pillola.chiara:hover { background: var(--scuro); color: var(--crema); } }
[data-tema="tana"] .pillola.filo-scuro { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
@media (hover: hover) { [data-tema="tana"] .pillola.filo-scuro:hover { background: var(--inchiostro); color: var(--crema); } }
[data-tema="tana"] .pillola.vuota { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
@media (hover: hover) { [data-tema="tana"] .pillola.vuota:hover { background: rgba(255, 255, 255, .14); } }
[data-tema="tana"] .pillola.filo { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 1px rgba(250, 246, 240, .45); }
@media (hover: hover) { [data-tema="tana"] .pillola.filo:hover { background: rgba(250, 246, 240, .1); } }
[data-tema="tana"] .pillola.filo.wa { color: #25d366; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .65); }
[data-tema="tana"] .scopri { color: var(--accento-testo); font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
[data-tema="tana"] .pillola[disabled] { opacity: .55; }
.spezza { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- la barra: scura e di vetro, come la loro */
[data-tema="tana"] .barra::before {
  background: var(--vetro-scuro); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: none; transition: background-color .35s var(--uscita);
}
[data-tema="tana"] .barra-dentro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
[data-tema="tana"] .apri-menu { grid-column: 1; grid-row: 1; justify-self: start; width: 48px; height: 48px; margin: 0 0 0 -12px; }
[data-tema="tana"] .apri-menu span { width: 24px; height: 12px; }
[data-tema="tana"] .apri-menu span::before, [data-tema="tana"] .apri-menu span::after { height: 1.5px; background: var(--crema); }
[data-tema="tana"] .apri-menu span::after { top: 10px; }
[data-tema="tana"] .apri-menu[aria-expanded="true"] span::before, [data-tema="tana"] .apri-menu[aria-expanded="true"] span::after { top: 5px; }
[data-tema="tana"] .marchio-barra { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; }
[data-tema="tana"] .marchio-barra img { height: 38px; width: auto; }
[data-tema="tana"] .nav-larga { display: none; }
[data-tema="tana"] .barra-strumenti { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 6px; }
[data-tema="tana"] .barra .scelta-lingua { display: none; }
[data-tema="tana"] .barra-azione {
  display: inline-flex; grid-column: 4; grid-row: 1; justify-self: end; min-height: 38px; padding: 8px 18px;
  background: var(--crema); color: var(--scuro); font-size: 14px; letter-spacing: .02em;
}
@media (hover: hover) { [data-tema="tana"] .barra-azione:hover { background: #fff; } }
@media (min-width: 1180px) {
  [data-tema="tana"] .barra-dentro { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 24px; }
  [data-tema="tana"] .apri-menu { display: none !important; }
  [data-tema="tana"] .marchio-barra { grid-column: 1; }
  [data-tema="tana"] .nav-larga { display: block; grid-column: 2; justify-self: center; }
  [data-tema="tana"] .voci { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
  [data-tema="tana"] .voci a { font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(250, 246, 240, .82); white-space: nowrap; }
  [data-tema="tana"] .voci a:hover, [data-tema="tana"] .voci a[aria-current="page"] { color: #fff; }
  [data-tema="tana"] .barra .scelta-lingua { display: block; }
}
/* sopra la copertina della home: barra trasparente con un velo in alto */
[data-tema="tana"].sopra-eroe:not(.menu-aperto) .barra::before { background: linear-gradient(rgba(10, 6, 4, .5), rgba(10, 6, 4, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="tana"].sopra-eroe:not(.menu-aperto) .barra-azione { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }

/* il pulsante delle stagioni: una pista con il sole e la neve e un pomello che scorre */
.stagione { display: inline-grid; place-items: center; width: 52px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--crema); }
.stagione-pista { position: relative; display: block; width: 44px; height: 24px; border-radius: 999px; background: rgba(250, 246, 240, .16); box-shadow: inset 0 0 0 1px rgba(250, 246, 240, .3); }
.stagione-pomello { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--crema); transition: transform .35s var(--uscita), background-color .35s; }
/* 06/11/2026, Simone: «dove c'è il simbolo della neve hai invertito le foto estive con le foto invernali». Prima si vedeva il
   simbolo della stagione a cui si passa (d'estate la neve): ora il simbolo e' quello della stagione che si sta guardando,
   dentro il pomello: d'inverno la neve a sinistra, d'estate il sole a destra. Il nome del pulsante resta l'azione
   («Passa all'estate»), per chi usa il lettore dello schermo. */
.stagione svg { position: absolute; top: 5px; z-index: 1; width: 14px; height: 14px; fill: none; stroke: var(--scuro); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s ease; }
.stagione-neve { left: 5px; opacity: 1; }
.stagione-sole { right: 5px; opacity: 0; }
.stagione[aria-pressed="true"] .stagione-pomello { transform: translateX(20px); background: var(--accento-chiaro); }
.stagione[aria-pressed="true"] .stagione-neve { opacity: 0; }
.stagione[aria-pressed="true"] .stagione-sole { opacity: 1; }
.stagione:focus-visible { outline: 2px solid var(--crema); outline-offset: 2px; border-radius: 999px; }
.stagione[hidden] { display: none; }

/* il menu del telefono: un foglio scuro, voci grandi con le grazie */
[data-tema="tana"] .menu-tel { background: var(--scuro); color: var(--crema); padding-top: clamp(20px, 6vh, 56px); }
[data-tema="tana"] .menu-tel li + li { border-top-color: rgba(250, 246, 240, .14); }
[data-tema="tana"] .menu-tel a.voce-tel { min-height: clamp(58px, 8.6vh, 76px); font: 400 clamp(32px, 9vw, 44px)/1.1 var(--titoli); letter-spacing: 0; color: var(--crema); }
[data-tema="tana"] .menu-tel a.voce-tel::after { color: rgba(250, 246, 240, .45); font-family: var(--font); }
[data-tema="tana"] .menu-tel a[aria-current="page"] { font-style: italic; color: var(--accento-chiaro); }
[data-tema="tana"] .menu-tel .menu-chiama { color: var(--crema); font-size: 17px; }
[data-tema="tana"].menu-aperto .barra::before { background: var(--scuro); }
[data-tema="tana"] .striscia { background: var(--scuro); color: var(--crema); }
[data-tema="tana"] body.pag-home .striscia { padding-top: calc(var(--barra) + 10px); }

/* ---------------------------------------------------------------- i video */
.video { position: relative; display: block; overflow: hidden; background: #141210; }
.video > picture, .video > span > picture, .video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video picture img, .video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video video { opacity: 0; transition: opacity .6s var(--uscita); }
.video video.va { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .video video { display: none; } }

/* ---------------------------------------------------------------- la copertina della home */
[data-tema="tana"] body.pag-home { padding-top: 0; }
.t-eroe {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden;
  display: grid; place-items: center; color: #fff; background: var(--notte); isolation: isolate; text-align: center;
}
.t-eroe-sfondo { position: absolute; inset: 0; z-index: -2; }
.t-eroe-sfondo .video { position: absolute; inset: 0; }
/* 06/11/2026, Simone: «perché la versione nostra è come se avesse un filtro verde?». Il velo sopra il video era del colore
   della stagione (verde d'estate, marrone d'inverno). Il loro sito usa un nero neutro, uguale tutto l'anno: 35% sulla
   copertina (Hero-obY-AWx-.css, #00000059) e 65% sulla fascia (Banner-BTdXiiVT.css, #000000a6). Ora e' lo stesso. */
.t-eroe::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(0, 0, 0, .35); }
.t-eroe-testo { width: min(1000px, 100% - 2 * var(--margine)); padding-top: var(--barra); }
.t-eroe-titolo {
  font: 400 clamp(60px, 10vw, 128px)/1.02 var(--titoli); letter-spacing: -.015em; color: #fff;
  text-wrap: balance; text-shadow: 0 2px 34px rgba(0, 0, 0, .35);
}
.t-eroe-sotto { margin-top: clamp(12px, 2vh, 20px); color: #fff; font-size: clamp(26px, 2.8vw, 34px); text-shadow: 0 1px 16px rgba(0, 0, 0, .4); }
.t-eroe-zona { margin-top: 10px; font: 500 12.5px/1.4 var(--font); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.t-eroe .azioni { justify-content: center; gap: 12px 14px; margin-top: clamp(26px, 4vh, 40px); }
[data-tema="tana"] .t-eroe .pillola:not(.vuota) { background: var(--crema); color: var(--scuro); }
@media (hover: hover) { [data-tema="tana"] .t-eroe .pillola:not(.vuota):hover { background: #fff; } }
.t-pausa { left: max(16px, env(safe-area-inset-left)); right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 3; }
.pausa-video svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pausa-video .icona-play { fill: currentColor; stroke: none; }
.pausa-video[hidden] { display: none; }
.eroe-giu { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2; width: 40px; height: 22px; margin-left: -20px; color: #fff; opacity: .75; }
.eroe-giu svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eroe-giu:hover { opacity: 1; }
@media (max-width: 734px) { .eroe-giu { display: none; } }

/* ---------------------------------------------------------------- la striscia che scorre */
.t-striscia { overflow: hidden; background: var(--crema); border-block: 1px solid var(--filo-tenue); padding: 15px 0; }
.t-striscia-pista { display: flex; width: max-content; animation: striscia 46s linear infinite; }
.t-striscia-voci { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.t-striscia-voci li { display: flex; align-items: center; white-space: nowrap; font: italic 400 19px/1.2 var(--titoli); color: var(--corpo); }
.t-striscia-voci li::after { content: ''; width: 5px; height: 5px; margin: 0 clamp(26px, 3vw, 40px); border-radius: 50%; background: var(--accento); flex: none; }
.t-striscia:hover .t-striscia-pista { animation-play-state: paused; }
@keyframes striscia { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .t-striscia-pista { animation-name: striscia-rtl; }
@keyframes striscia-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .t-striscia-pista { animation: none; width: auto; justify-content: center; }
  .t-striscia-voci { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .t-striscia-voci[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------- le sezioni della home */
.t-sezione { padding-block: clamp(84px, 11vw, 150px); background: var(--crema); }
.t-sezione + .t-sezione { padding-top: clamp(40px, 6vw, 90px); }
.t-due { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .t-due { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.t-media { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--sabbia); margin: 0; }
.t-media > .video, .t-media > picture, .t-media > span > picture { position: absolute; inset: 0; }
.t-media picture, .t-media img { display: block; width: 100%; height: 100%; }
.t-media img { object-fit: cover; }
.t-media-alta { aspect-ratio: 4 / 5; }
.t-media-larga { aspect-ratio: 4 / 3; }

/* la storia */
.t-storia .t-media-alta { max-width: 560px; justify-self: end; width: 100%; }
@media (max-width: 899px) { .t-storia .t-media-alta { justify-self: stretch; max-width: none; aspect-ratio: 4 / 4.4; } }

/* la cucina: lo scorrimento laterale coi video dei piatti */
.t-cucina { background: var(--crema); }
.t-cucina-testa { max-width: 640px; }
.t-cucina-testa .t-testo { margin-top: 18px; color: var(--tenue); }
.t-cucina-piede { margin-top: clamp(22px, 3vw, 34px); }
.t-cucina .orizz-voce { width: min(27vw, calc(48svh * .8)); }
.t-cucina .orizz-foto { aspect-ratio: 4 / 5; border-radius: var(--r-media); background: var(--sabbia); position: relative; }
.t-cucina .orizz-foto .video { position: absolute; inset: 0; }
.t-cucina .orizz-testo { padding-top: 18px; }
.t-cucina .orizz-testo h3 { font: 400 clamp(25px, 2.1vw, 29px)/1.15 var(--titoli); color: var(--inchiostro); }
.t-cucina .orizz-testo h3 a { color: inherit; }
.t-cucina .orizz-quante { margin: 4px 0 8px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--accento-testo); }
.t-cucina .orizz-testo p:not(.orizz-quante) { font-size: 15px; line-height: 1.6; color: var(--tenue); }
@media (max-width: 700px) { .t-cucina .orizz-voce { width: min(74vw, calc(40svh * .8)); } }
/* il motore dello scorrimento laterale (Motori siti web/03-GENERATORI-PAGINE/scorrimento-laterale, versione del 31/10/2026) */
.orizz{padding:clamp(4rem,9vw,7rem) 0}
.orizz-testa{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.orizz-testa h2{margin:0}
.orizz-stato{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;padding-bottom:.5rem}
.orizz-conta{font:400 1.05rem/1 var(--titoli);color:var(--tenue);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.04em}
.orizz-conta b{font-weight:400;color:var(--accento-testo);font-size:1.7rem}
.orizz-barra{display:block;width:clamp(6rem,14vw,11rem);height:1px;background:var(--filo);overflow:hidden}
.orizz-barra i{display:block;height:100%;background:var(--accento);transform-origin:left;transform:scaleX(.1)}
.orizz-binario{display:flex;gap:clamp(1.2rem,2.4vw,2.2rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--margine),calc((100% - var(--larghezza-colonna))/2))}
.orizz-binario::-webkit-scrollbar{display:none}
.orizz-binario{scroll-padding-inline:max(var(--margine),calc((100% - var(--larghezza-colonna))/2))}
.orizz-voce{flex:none;scroll-snap-align:start;display:flex;flex-direction:column}
.orizz-foto{display:block;overflow:hidden}
.orizz-testo{max-width:40rem}
.orizz-testo h3{margin:0 0 .25rem}
.orizz-attivo{padding:0}
.orizz-attivo .orizz-palco{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--testata-fissa) + 1rem)}
.orizz-attivo .orizz-binario{overflow:visible;scroll-snap-type:none;will-change:transform}
@media (max-width:700px){
  .orizz-testo p:not(.orizz-quante){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .t-cucina-testa .t-testo{display:none}
  .orizz-stato{display:none}
}
@media (max-height:700px) and (max-width:700px){ .t-cucina .orizz-voce{width:min(64vw,calc(36svh * .8))} }

/* la fascia «Dove il bosco incontra la tavola»: un video a mezza altezza */
.t-fascia { position: relative; display: grid; place-items: center; min-height: clamp(380px, 62vh, 620px); overflow: hidden; isolation: isolate; text-align: center; color: #fff; background: var(--notte); }
.t-fascia-sfondo { position: absolute; inset: 0; z-index: -2; }
.t-fascia-sfondo .video { position: absolute; inset: 0; }
.t-fascia::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .65); }
.t-fascia-testo { padding-block: 60px; }
.t-fascia-titolo { font: italic 400 clamp(38px, 5.6vw, 76px)/1.08 var(--titoli); color: #fff; text-wrap: balance; max-width: 16em; margin: 0 auto; }
.t-fascia .a-mano { margin-top: 14px; color: #fff; }

/* il bosco: divertimento per tutti */
.t-bosco { background: var(--sabbia); }
.t-bosco + .t-arrivo { padding-top: clamp(84px, 11vw, 150px); }
.t-bosco-griglia { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .t-bosco-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.t-bosco-grande { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .t-bosco-grande { position: sticky; top: calc(var(--barra) + 28px); } }
@media (max-width: 899px) { .t-bosco-grande { aspect-ratio: 4 / 4.2; } }
.t-bosco-testo .t-testo { margin-top: 22px; }
.t-bosco-coppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 32px; }
.t-servizi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin: 36px 0 34px; padding: 0; list-style: none; }
.t-servizi li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.t-servizio-icona { width: 28px; height: 28px; fill: none; stroke: var(--accento-testo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-servizi h3 { font: 600 16px/1.3 var(--font); color: var(--inchiostro); }
.t-servizi p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--tenue); }
@media (max-width: 420px) { .t-servizi { grid-template-columns: minmax(0, 1fr); } }

/* come raggiungerci */
.t-arrivo { background: var(--crema); }
.t-arrivo-griglia { align-items: start; }
.t-nota { margin-top: 26px; padding: 16px 20px; border-left: 2px solid var(--accento); background: var(--sabbia); border-radius: 0 var(--r-piccolo) var(--r-piccolo) 0;
  font-style: italic; color: var(--corpo); line-height: 1.6; max-width: 34em; }
[dir="rtl"] .t-nota { border-left: 0; border-right: 2px solid var(--accento); border-radius: var(--r-piccolo) 0 0 var(--r-piccolo); }
.t-numeri { display: flex; flex-wrap: wrap; gap: 18px 56px; margin: 34px 0 0; }
.t-numeri div { display: grid; gap: 2px; }
.t-numeri dt { font: 400 clamp(44px, 4.6vw, 58px)/1 var(--titoli); color: var(--inchiostro); }
.t-numeri dd { margin: 0; font-size: 15px; color: var(--tenue); }
.t-indirizzo { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--filo); display: grid; gap: 10px; }
.t-indirizzo strong { color: var(--inchiostro); font-weight: 600; }
/* gli orari uguali tutti i giorni: una riga sola (8:30 – 22:00, sotto «Aperti tutti i giorni») */
.orario-unico { display: grid; gap: 2px; }
.orario-unico strong { font: 400 26px/1.2 var(--titoli); color: var(--inchiostro); font-variant-numeric: lining-nums; }
.orario-unico span { color: var(--tenue); }
.t-orari-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.t-orari-riga .orario-unico { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.t-orari-riga .orario-unico strong { font: 400 24px/1.2 var(--titoli); color: var(--inchiostro); }
.t-indirizzo .azioni { margin-top: 10px; gap: 14px 24px; }
.t-arrivo-foto { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .t-arrivo-foto { aspect-ratio: 4 / 3; } }
.t-mappa { position: relative; display: block; margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-media); background: var(--sabbia); box-shadow: inset 0 0 0 1px var(--filo); }
.t-mappa picture, .t-mappa img { display: block; width: 100%; height: 100%; }
.t-mappa img { object-fit: cover; transition: transform 1.2s var(--uscita); }
@media (hover: hover) { .t-mappa:hover img { transform: scale(1.02); } }
@media (max-width: 734px) { .t-mappa { aspect-ratio: 4 / 3.6; } }
.t-pin { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 40px; transform: translate(-50%, -100%); }
.t-pin svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(30, 14, 6, .35)); }
.t-pin path { fill: var(--scuro); }
.t-pin circle { fill: var(--accento-chiaro); }
.t-pin b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: var(--scuro); color: var(--crema);
  font: 600 12.5px/1 var(--font); white-space: nowrap; box-shadow: 0 6px 16px rgba(30, 14, 6, .25); }
/* il locale sta in alto nella mappa: sul telefono l'etichetta sopra il segnaposto usciva dal riquadro, va sotto */
.t-pin.etichetta-sotto b { bottom: auto; top: calc(100% + 6px); }
.t-pin-paese { width: 14px; height: 14px; transform: translate(-50%, -50%); }
.t-pin-paese i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 3px var(--scuro); }
.t-pin-paese b { bottom: calc(100% + 8px); background: var(--crema); color: var(--scuro); box-shadow: 0 0 0 1px var(--filo), 0 6px 16px rgba(30, 14, 6, .15); }
.t-mappa-apri { position: absolute; right: 14px; bottom: 14px; padding: 10px 16px; border-radius: 999px; background: var(--carta); color: var(--scuro); font: 600 13.5px/1 var(--font); box-shadow: 0 6px 18px rgba(30, 14, 6, .18); }
.t-mappa-apri::after { content: ' \203A'; }
.t-mappa-crediti { margin-top: 8px; font-size: 12.5px; color: var(--testo-3); text-align: right; }
.t-mappa-crediti a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* il menu: i due PDF del loro sito e la pagina */
.t-menu { background: var(--sabbia); }
.t-menu-griglia { align-items: start; }
.t-schede-menu { display: grid; gap: 14px; }
.t-scheda-menu { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px clamp(20px, 2.6vw, 30px); border-radius: var(--r-medio);
  background: var(--carta); color: var(--corpo); box-shadow: 0 1px 0 var(--filo-tenue); transition: transform .3s var(--uscita), box-shadow .3s; }
@media (hover: hover) { .t-scheda-menu:hover { transform: translateY(-2px); box-shadow: var(--ombra); } }
.t-scheda-menu > span:first-child { display: grid; gap: 4px; min-width: 0; }
.t-scheda-menu strong { font: 400 clamp(26px, 2.4vw, 30px)/1.15 var(--titoli); color: var(--inchiostro); }
.t-scheda-menu strong + span { font-size: 15px; color: var(--tenue); }
.t-scheda-azione { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--accento);
  color: var(--accento-testo); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.t-scheda-azione svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-scheda-pagina { background: var(--scuro); color: var(--crema); }
.t-scheda-pagina strong { color: var(--crema); }
.t-scheda-pagina strong + span { color: rgba(250, 246, 240, .78); }
.t-scheda-pagina .t-scheda-azione { color: var(--crema); box-shadow: inset 0 0 0 1px rgba(250, 246, 240, .5); }
@media (max-width: 480px) { .t-scheda-menu { flex-direction: column; align-items: flex-start; } }

/* prima di venire (domande) */
.t-domande { background: var(--crema); }
.t-domande .domande { margin-top: clamp(30px, 4vw, 48px); }
[data-tema="tana"] .domanda { border-bottom-color: var(--filo); }
[data-tema="tana"] .domanda summary { font: 400 clamp(23px, 2.3vw, 28px)/1.25 var(--titoli); color: var(--inchiostro); }
[data-tema="tana"] .domanda .risposta { color: var(--corpo); }

/* promozioni del pannello: sotto la copertina */
.t-promo { padding-block: clamp(40px, 5vw, 64px) 0; background: var(--crema); }
[data-tema="tana"] .promo { background: var(--carta); border: 1px solid var(--filo-tenue); }
.t-promo-titolo { margin-bottom: 8px; font: 400 clamp(28px, 3vw, 38px)/1.15 var(--titoli); color: var(--inchiostro); }

/* ---------------------------------------------------------------- le pagine interne */
[data-tema="tana"] .pagina-testa { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(36px, 5vw, 60px); }
[data-tema="tana"] .sezione.grigia { background: var(--sabbia); }
[data-tema="tana"] .scheda { background: var(--carta); border-radius: var(--r-grande); box-shadow: 0 1px 0 var(--filo-tenue); }
[data-tema="tana"] .scheda h3 { font: 400 29px/1.15 var(--titoli); color: var(--inchiostro); }
[data-tema="tana"] .voce-contatto a { color: var(--accento-testo); }
[data-tema="tana"] .voce-contatto .etichetta { font-size: 14px; }
[data-tema="tana"] .prosa h2 { font-family: var(--titoli); font-weight: 400; font-size: clamp(28px, 3vw, 34px); color: var(--inchiostro); }
[data-tema="tana"] .prosa a:not(.pillola):not(.scopri) { color: var(--accento-testo); }

/* ---------------------------------------------------------------- il menu */
[data-tema="tana"] .sezioni-menu { background: var(--vetro-scuro); border-bottom: 0; }
[data-tema="tana"] .sezioni-menu a { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 246, 240, .8); }
[data-tema="tana"] .sezioni-menu a.attiva { background: var(--crema); color: var(--scuro); }
[data-tema="tana"] .cerca input { background: var(--carta); box-shadow: inset 0 0 0 1px var(--filo); border-radius: 999px; }
[data-tema="tana"] .strumenti.senza-filtri { grid-template-columns: minmax(0, 560px); }
[data-tema="tana"] .menu-sezione > header { border-bottom: 1px solid var(--filo); padding-bottom: 12px; }
[data-tema="tana"] .menu-sezione h2 { font: 400 clamp(40px, 4.6vw, 58px)/1.05 var(--titoli); color: var(--inchiostro); }
[data-tema="tana"] .menu-sezione .traduzioni { font-family: var(--titoli); font-style: italic; font-size: 19px; color: var(--accento-titoli); }
[data-tema="tana"] .gruppo-menu { font: italic 400 clamp(26px, 2.6vw, 32px)/1.2 var(--titoli); color: var(--accento-titoli); margin: 30px 0 4px; }
[data-tema="tana"] .voce { gap: 4px; padding: 17px 0 15px; border-bottom-color: var(--filo-tenue); }
[data-tema="tana"] .voce .riga { align-items: baseline; gap: 0; }
[data-tema="tana"] .voce .nome { font: 600 17px/1.35 var(--font); color: var(--inchiostro); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
[data-tema="tana"] .voce .puntini { flex: 1 1 24px; min-width: 24px; margin: 0 10px; border-bottom: 1.5px dotted var(--filo); transform: translateY(-5px); }
[data-tema="tana"] .voce .prezzo { margin-left: 0; padding-left: 0; font: 500 16.5px/1.3 var(--font); color: var(--accento-testo); white-space: nowrap; }
[data-tema="tana"] .voce .desc { font-size: 15.5px; line-height: 1.55; color: var(--tenue); max-width: 40em; }
[data-tema="tana"] .voce .desc-lingua { font-family: var(--titoli); font-style: italic; font-size: 16.5px; color: var(--testo-3); }
[data-tema="tana"] .segno { background: var(--sabbia); color: var(--corpo); }
@media (min-width: 900px) { [data-tema="tana"] .voci-menu { column-gap: 64px; } }
[data-tema="tana"] .note-menu { font-size: 15px; color: var(--tenue); }
.scopri.scarica::after { content: none; }
/* le miniature accanto ai piatti: si toccano e si ingrandiscono */
[data-tema="tana"] .voce.con-foto { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.voce-testo { display: grid; gap: 4px; min-width: 0; }
.voce-foto { display: block; width: 88px; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-piccolo); overflow: hidden; background: var(--sabbia); cursor: zoom-in; }
.voce-foto picture, .voce-foto img { display: block; width: 100%; height: 100%; }
.voce-foto img { object-fit: cover; transition: transform .5s var(--uscita); }
@media (hover: hover) { .voce-foto:hover img { transform: scale(1.06); } }
@media (max-width: 599px) { [data-tema="tana"] .voce.con-foto { grid-template-columns: 72px minmax(0, 1fr); column-gap: 13px; } .voce-foto { width: 72px; } }

/* la prenotazione */
[data-tema="tana"] .prenota-motore.tavoli {
  --tv-accento: var(--scuro);
  --tv-su-accento: var(--crema);
  --tv-ok: var(--verde);
  --tv-errore: var(--rosso-errore);
  max-width: none; background: var(--carta); box-shadow: var(--ombra); border-radius: var(--r-grande); padding: clamp(20px, 3.6vw, 44px);
}
[data-tema="tana"] .prenota-foto { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media); background: var(--sabbia); }
[data-tema="tana"] .prenota-foto picture, [data-tema="tana"] .prenota-foto img { display: block; width: 100%; height: 100%; }
[data-tema="tana"] .prenota-foto img { object-fit: cover; }
[data-tema="tana"] .passi-modulo span { white-space: normal; min-width: 0; line-height: 1.25; }
@media (max-width: 420px) {
  [data-tema="tana"] .passi-modulo { gap: 4px; }
  [data-tema="tana"] .passi-modulo span { padding: 8px 3px; font-size: 12px; letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; }
}

/* ---------------------------------------------------------------- la prenotazione nel piede e il piede, scuri */
.invito-piede { background: var(--notte); color: var(--crema); text-align: center; padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px); }
.invito-piede .t-titolo { color: var(--crema); }
.invito-piede .tit-accento { color: var(--accento-chiaro); }
.invito-piede .a-mano { margin-top: 12px; color: var(--accento-chiaro); }
.invito-piede .azioni { margin-top: clamp(28px, 4vw, 44px); gap: 12px; }
[data-tema="tana"] .invito-piede .pillola:not(.filo) { background: var(--crema); color: var(--scuro); }
@media (hover: hover) { [data-tema="tana"] .invito-piede .pillola:not(.filo):hover { background: #fff; } }
[data-tema="tana"] .piede { background: var(--notte); color: rgba(250, 246, 240, .72); font-size: 14px; line-height: 1.6; padding-top: 0; border-top: 1px solid rgba(250, 246, 240, .08); }
[data-tema="tana"] .piede-colonne { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: clamp(44px, 6vw, 72px) 34px; border-color: rgba(250, 246, 240, .1); }
@media (min-width: 735px) { [data-tema="tana"] .piede-colonne { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.piede-marchio-colonna { display: grid; gap: 14px; align-content: start; }
[data-tema="tana"] .piede-marchio img { width: 190px; height: auto; }
[data-tema="tana"] .piede-colonne h2 { margin-bottom: 12px; color: var(--crema); font: 400 23px/1.2 var(--titoli); letter-spacing: 0; }
[data-tema="tana"] .piede-colonne ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
[data-tema="tana"] .piede a, [data-tema="tana"] .piede-colonne a, [data-tema="tana"] .copy-bar a { color: var(--crema); }
[data-tema="tana"] .piede a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.orario-grande { font: 400 30px/1.15 var(--titoli); color: var(--accento-chiaro); }
[data-tema="tana"] .orari-piede { gap: 2px; }
[data-tema="tana"] .orari-piede .oggi { color: var(--crema); }
[data-tema="tana"] .piede .stato.aperto { color: #9fdcaa; }
[data-tema="tana"] .piede .stato.chiuso { color: #ffb3a8; }
.etichette { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin-top: 14px !important; }
.etichette li { padding: 3px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(250, 246, 240, .35); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--crema); }
[data-tema="tana"] .dati-societari { border-color: rgba(250, 246, 240, .1); font-size: 13px; color: rgba(250, 246, 240, .6); }
[data-tema="tana"] .copy-bar { font-size: 13px; }
[data-tema="tana"] .social a { background: rgba(250, 246, 240, .1); color: var(--crema); }
[data-tema="tana"] .social a:hover { background: rgba(250, 246, 240, .2); }
[data-tema="tana"] .credit { color: var(--crema) !important; }
[data-tema="tana"] .menu-tel .social { justify-content: center; margin-top: 20px; }

/* ---------------------------------------------------------------- l'apertura: il marchio sul crema */
[data-tema="tana"] #ap { background: radial-gradient(120% 90% at 50% 45%, #fdfaf4 0%, var(--crema) 55%, var(--sabbia) 100%); overflow: hidden; }
[data-tema="tana"] .ap-palco { width: min(80vw, 600px); }
[data-tema="tana"] .ap-salta { color: rgba(44, 24, 16, .5); }
[data-tema="tana"] .ap-firma { color: var(--scuro); }

/* ======================================================= LE 13 LINGUE (come il Chistè e il Sücar Brüsc) ===========
   Dal computer una tendina (un <details>, si apre anche senza JavaScript); dal telefono l'elenco intero nel menu.
   Cinese, giapponese, ebraico e arabo con i caratteri del sistema: Instrument Serif ha solo l'alfabeto latino (anche il
   russo e l'ucraino prendono un carattere con le grazie del sistema per i titoli). Ebraico e arabo da destra a sinistra. */
.scelta-lingua { position: relative; }
.scelta-lingua > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 6px;
  font: 600 12.5px/1 var(--font); letter-spacing: .12em; color: var(--crema); }
.scelta-lingua > summary::-webkit-details-marker { display: none; }
.scelta-lingua > summary svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--uscita); }
.scelta-lingua[open] > summary svg { transform: rotate(180deg); }
.scelta-lingua > summary:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 4px; }
.scelta-lingua ul { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70; min-width: 190px; max-height: calc(100vh - 90px);
  overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; background: var(--carta); border: 1px solid var(--filo); border-radius: 10px; box-shadow: var(--ombra); }
.scelta-lingua a { display: block; padding: 9px 18px; font: 500 14.5px/1.3 var(--font); letter-spacing: 0; color: var(--inchiostro); text-decoration: none; text-align: left; }
[dir="rtl"] .scelta-lingua a { text-align: right; }
.scelta-lingua a:hover { background: var(--sabbia); color: var(--accento-testo); }
.scelta-lingua a[aria-current="true"] { color: var(--accento-testo); font-weight: 700; }
[data-tema="tana"] .menu-tel .lingue-tel { display: block; margin-top: 22px; }
[data-tema="tana"] .menu-tel .elenco-lingue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
[data-tema="tana"] .menu-tel .elenco-lingue li + li { border-top: 0; }
[data-tema="tana"] .menu-tel .elenco-lingue a { display: block; padding: 10px 4px; text-align: center; font: 500 14.5px/1.25 var(--font); color: rgba(250, 246, 240, .82); text-decoration: none; }
[data-tema="tana"] .menu-tel .elenco-lingue a[aria-current="true"] { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

:root[data-tema="tana"]:lang(ru), [data-tema="tana"] :lang(ru), :root[data-tema="tana"]:lang(uk), [data-tema="tana"] :lang(uk) {
  --titoli: 'Instrument Serif', 'Georgia', 'Times New Roman', 'PT Serif', serif; }
:root[data-tema="tana"]:lang(zh), [data-tema="tana"] :lang(zh) { --titoli: 'Instrument Serif', 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'Source Han Serif SC', serif;
  --font: 'Raleway', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --a-mano: 'Caveat', 'Kaiti SC', 'STKaiti', 'KaiTi', serif; }
:root[data-tema="tana"]:lang(ja), [data-tema="tana"] :lang(ja) { --titoli: 'Instrument Serif', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif;
  --font: 'Raleway', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; --a-mano: 'Caveat', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
:root[data-tema="tana"]:lang(he), [data-tema="tana"] :lang(he) { --titoli: 'Instrument Serif', 'Times New Roman', 'Noto Serif Hebrew', 'David', serif;
  --font: 'Raleway', 'Arial Hebrew', 'Noto Sans Hebrew', 'Segoe UI', Arial, sans-serif; --a-mano: 'Caveat', 'Times New Roman', 'Noto Serif Hebrew', serif; }
:root[data-tema="tana"]:lang(ar), [data-tema="tana"] :lang(ar) { --titoli: 'Instrument Serif', 'Geeza Pro', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --font: 'Raleway', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --a-mano: 'Caveat', 'Geeza Pro', 'Noto Naskh Arabic', serif; }
:lang(zh) *, :lang(ja) *, :lang(he) *, :lang(ar) * { letter-spacing: 0 !important; text-transform: none !important; }
/* righe che non si toccano (errore n. 55): l'arabo e l'ebraico sono più alti, i titoli hanno l'interlinea stretta */
:root:lang(ar) h1, :root:lang(ar) h2, :root:lang(ar) h3, :root:lang(ar) .t-titolo, :root:lang(ar) .t-eroe-titolo, :root:lang(ar) .voce .nome { line-height: 1.6; }
:root:lang(he) h1, :root:lang(he) h2, :root:lang(he) h3, :root:lang(he) .t-titolo, :root:lang(he) .t-eroe-titolo, :root:lang(he) .voce .nome { line-height: 1.4; }
:root:lang(zh) h1, :root:lang(zh) h2, :root:lang(zh) h3, :root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) h3,
:root:lang(zh) .voce .nome, :root:lang(ja) .voce .nome { line-height: 1.35; }
:root:lang(ru) .t-titolo, :root:lang(uk) .t-titolo, :root:lang(ru) .titolo-pagina, :root:lang(uk) .titolo-pagina { line-height: 1.12; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .t-titolo { word-break: auto-phrase; overflow-wrap: anywhere; }
/* da destra a sinistra: numeri, telefoni e prezzi restano da sinistra a destra; il binario dei piatti gira come nelle altre lingue */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] summary { unicode-bidi: plaintext; }
[dir="rtl"] a[href^="tel:"], [dir="rtl"] .prezzo, [dir="rtl"] .dati-societari, [dir="rtl"] .orario-unico strong, [dir="rtl"] .orario-grande, [dir="rtl"] .t-numeri dt { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .orizz-binario { direction: ltr; }
[dir="rtl"] .orizz-voce { direction: rtl; text-align: right; }
[dir="rtl"] .pallino-wa { right: auto; left: max(16px, env(safe-area-inset-left)); }
[dir="rtl"] .t-pausa { left: auto; right: max(16px, env(safe-area-inset-right)); }

/* sul telefono «Prenota» non deve toccare il marchio, in nessuna lingua (errore del Chistè del 29/10/2026) */
@media (max-width: 480px) {
  [data-tema="tana"] .marchio-barra img { height: 34px; }
  [data-tema="tana"] .barra-azione { padding: 8px 14px; font-size: 13.5px; }
  [data-tema="tana"] .barra.prenota-lunga .barra-azione { letter-spacing: 0; font-size: 13px; }
}
@media (max-width: 359px) {
  [data-tema="tana"] .barra-dentro { gap: 4px; }
  [data-tema="tana"] .stagione { width: 46px; }
}

@media print {
  .eroe-giu, .t-pausa, .t-striscia, .video video { display: none !important; }
  .t-eroe { height: auto; min-height: 0; color: #000; }
}