/* ItaliaCampeggi – grafica approvata (tavole "Home · desktop" e "Home · mobile") */
:root {
    --verde-scuro: #153A2B;   /* testi, pulsanti, footer */
    --verde-hero: #1E4A36;
    --verde-chiaro: #F0F5EE;  /* fondi chiari */
    --verde-link: #2F7A4C;
    --giallo: #F5B82E;        /* accento */
    --bianco: #fff;
    --grigio: #5b6b62;
    --bordo: #d9e4d6;
    --raggio: 14px;
    --ombra: 0 6px 24px rgba(21, 58, 43, .10);
    --font-titoli: "Bricolage Grotesque", system-ui, sans-serif;
    --font-testo: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-testo); font-size: 16px; line-height: 1.55; color: var(--verde-scuro); background: var(--bianco); }
h1, h2, h3 { font-family: var(--font-titoli); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
a { color: var(--verde-link); }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenitore { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.stretto { max-width: 760px; }

/* ---------- testata ---------- */
.testata { background: var(--bianco); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 20; }
.testata__riga { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.logo { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600; color: var(--verde-scuro); text-decoration: none; white-space: nowrap; }
.logo b { font-weight: 800; }
/* Il marchio (la tenda del sito vecchio, Pages/Shared/_Marchio.cshtml) accanto al nome: alto
   quanto le maiuscole più un filo, allineato al centro della riga. */
.logo { display: inline-flex; align-items: center; gap: .45em; }
.logo .marchio { width: 1.5em; height: 1.5em; flex: none; }
/* Nel piè di pagina il fondo è lo stesso verde del marchio: un bordino chiaro lo fa leggere. */
.logo--chiaro .marchio__fondo { stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.logo--chiaro { color: var(--bianco); }
.testata__menu { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--verde-scuro); cursor: pointer; }
.menu { display: flex; align-items: center; gap: 24px; }
.menu > a { color: var(--verde-scuro); text-decoration: none; font-weight: 600; }
.menu > a:hover { color: var(--verde-link); }
.lingue { display: flex; gap: 4px; }
.lingue a { font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--grigio); padding: 4px 6px; border-radius: 6px; }
.lingue a.attiva { background: var(--verde-scuro); color: var(--bianco); }

@media (max-width: 860px) {
    .testata__menu { display: block; }
    .menu { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--bianco); flex-direction: column; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--bordo); gap: 14px; }
    .menu.aperto { display: flex; }
}

/* ---------- hero e ricerca ---------- */
/* La foto in apertura (colline toscane al tramonto, crediti in /crediti-foto/). Il velo verde è
   leggero in alto, dove dietro il titolo c'è il cielo, e più scuro in basso, dove passa sotto il
   riquadro di ricerca: con il velo pieno di prima la foto non si vedeva più. L'ombra sul testo
   tiene leggibile il bianco anche sulle parti chiare. */
.hero { background: var(--verde-hero) url("/img/hero.webp") center 45% / cover no-repeat; color: var(--bianco); padding: 72px 0 56px; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,58,43,.15) 0%, rgba(21,58,43,.3) 45%, rgba(21,58,43,.6) 100%); }
.hero h1, .hero__sotto { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 18px rgba(0,0,0,.35); }
/* Sul telefono una versione verticale, ritagliata apposta: quella larga, ridotta a una striscia
   stretta, mostrerebbe solo un pezzo di cielo. */
@media (max-width: 700px) { .hero { background-image: url("/img/hero-mobile.webp"); background-position: center 30%; } }
.hero .contenitore { position: relative; }
.hero__sotto { font-size: 1.15rem; max-width: 640px; margin: 0 0 28px; opacity: .92; }

.ricerca { background: var(--bianco); color: var(--verde-scuro); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px; }
.ricerca__schede { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ricerca__schede input { position: absolute; opacity: 0; }
.ricerca__schede span { display: inline-block; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; background: var(--verde-chiaro); }
.ricerca__schede input:checked + span { background: var(--verde-scuro); color: var(--bianco); }
.ricerca__schede input:focus-visible + span { outline: 2px solid var(--giallo); }
.ricerca__campi { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: end; }
@media (max-width: 860px) { .ricerca__campi { grid-template-columns: 1fr; } }
/* Filtri sotto la ricerca: pillole che aprono un menu di caselle (come portaliregionali) */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; position: relative; }
.filtro { position: relative; }
.filtro__tasto { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--bordo); border-radius: 999px; background: var(--bianco); color: var(--verde-scuro); font-weight: 600; font-size: .95rem; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; list-style: none; }
.filtro__tasto::-webkit-details-marker { display: none; }
.filtro__tasto::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.filtro[open] .filtro__tasto::after { transform: translateY(2px) rotate(225deg); }
.filtro__tasto:hover { border-color: var(--verde-scuro); }
.filtro__tasto:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.filtro[open] > .filtro__tasto, .filtro--attivo > .filtro__tasto { border-color: var(--verde-scuro); background: var(--verde-chiaro); }
.filtro__conta { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--verde-scuro); color: var(--bianco); font-size: .75rem; font-weight: 700; text-align: center; }
.filtro__conta[hidden] { display: none; }
.filtro__menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 230px; max-height: 340px; overflow-y: auto; padding: 8px 14px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 14px 34px rgb(0 0 0 / .14); }
.filtro__menu--largo { min-width: 280px; }
.filtro__voce { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .95rem; font-weight: 400; color: var(--verde-scuro); white-space: nowrap; cursor: pointer; }
.filtro__voce input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--verde-scuro); }
.filtro__voce:has(input:checked) { font-weight: 600; }
@media (max-width: 600px) {
    .filtro { position: static; }
    .filtro__menu { left: 0; right: 0; min-width: 0; }
    .filtro__voce { white-space: normal; }
}
#risultati[aria-busy="true"] { opacity: .45; pointer-events: none; transition: opacity .15s; }

.campo { display: flex; flex-direction: column; gap: 4px; position: relative; font-size: .85rem; font-weight: 600; }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 1rem; font-weight: 400; padding: 11px 12px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--bianco); color: var(--verde-scuro); width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--verde-link); border-color: transparent; }
.suggerimenti { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--bianco); border-radius: 10px; box-shadow: var(--ombra); }
.suggerimenti a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--verde-scuro); font-weight: 400; }
.suggerimenti a:hover, .suggerimenti a:focus { background: var(--verde-chiaro); }
.suggerimenti small { color: var(--grigio); }

.pulsante { display: inline-block; font: inherit; font-weight: 700; padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer; background: var(--verde-scuro); color: var(--bianco); text-decoration: none; text-align: center; }
.pulsante--giallo { background: var(--giallo); color: var(--verde-scuro); }
.pulsante--contorno { background: transparent; border: 2px solid var(--verde-scuro); color: var(--verde-scuro); }
.pulsante:hover { filter: brightness(1.07); }

/* ---------- sezioni ---------- */
.sezione { padding: 56px 16px; }
.sezione--chiara { background: var(--verde-chiaro); padding-left: 0; padding-right: 0; }
.sezione__titolo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
/* ---------- Elenco / Mappa (pagine regione e ricerca), come su camping-italy.net ---------- */
.vista-barra { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.vista-toggle { display: inline-flex; border: 1px solid var(--bordo); border-radius: 999px; padding: 3px; background: var(--bianco); }
.vista-toggle button { font: inherit; font-weight: 600; font-size: .95rem; border: 0; background: none; color: var(--verde-scuro); padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.vista-toggle button.attiva { background: var(--verde-scuro); color: var(--bianco); }
.vista-toggle button:focus-visible { outline: 2px solid var(--giallo); outline-offset: 2px; }
.vista-nota { color: var(--grigio); }
.elenco-mappa { height: 70vh; min-height: 420px; border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--bordo); position: relative; z-index: 0; background: var(--verde-chiaro); }
.elenco-mappa--carica::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bordo); border-top-color: var(--verde-scuro); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.elenco-mappa__errore { padding: 24px; color: var(--grigio); }
.elenco-mappa .leaflet-popup-content { margin: 12px 14px; font-family: inherit; }
.elenco-mappa .pin strong { color: var(--verde-scuro); font-size: .98rem; }
.elenco-mappa .pin-loc { color: var(--grigio); font-size: .82rem; margin-top: 2px; }
.elenco-mappa .pin-link { display: inline-block; margin-top: 8px; background: var(--verde-scuro); color: var(--bianco) !important; font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 8px; text-decoration: none; }
.elenco-mappa .pin-link:hover { background: var(--verde-link); }
@media (max-width: 700px) { .elenco-mappa { height: 65vh; min-height: 360px; } }

/* Il pulsante in fondo a una sezione ("Tutte le offerte"): centrato sotto le schede. */
.sezione__azioni { display: flex; justify-content: center; margin-top: 28px; }
/* Pulsante con la freccia che si sposta al passaggio: dice "porta altrove" senza bisogno di icone. */
.pulsante--freccia { display: inline-flex; align-items: center; gap: .5em; transition: background-color .15s, color .15s; }
.pulsante--freccia span { transition: transform .15s; }
.pulsante--freccia:hover span, .pulsante--freccia:focus-visible span { transform: translateX(4px); }
.pulsante--contorno.pulsante--freccia { padding: 12px 28px; border-radius: 999px; }
.pulsante--contorno:hover, .pulsante--contorno:focus-visible { background: var(--verde-scuro); color: var(--bianco); }
@media (prefers-reduced-motion: reduce) { .pulsante--freccia, .pulsante--freccia span { transition: none; } }

.punti { background: var(--verde-scuro); color: var(--bianco); }
.punti__lista { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 22px; margin: 0 auto; }
.punti__lista li { display: flex; flex-direction: column; }
.punti__lista span { opacity: .8; font-size: .92rem; }
@media (max-width: 860px) { .punti__lista { grid-template-columns: 1fr 1fr; } }

.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 12px; margin-bottom: 24px; }
.mosaico__voce { position: relative; border-radius: var(--raggio); overflow: hidden; background: var(--verde-hero) var(--foto) center / cover; color: var(--bianco); text-decoration: none; display: flex; align-items: flex-end; padding: 14px; font-family: var(--font-titoli); font-size: 1.3rem; font-weight: 700; }
.mosaico__voce::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(21,58,43,.8)); }
.mosaico__voce span { position: relative; }
.mosaico__voce:first-child { grid-row: span 2; }
@media (max-width: 860px) { .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; } .mosaico__voce:first-child { grid-row: auto; } }

.elenco-aree { list-style: none; padding: 0; margin: 0; columns: 4 180px; }
.elenco-aree li { padding: 4px 0; }
.elenco-aree a, .estero a { font-weight: 600; text-decoration: none; }
.estero { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); display: flex; flex-wrap: wrap; gap: 8px 18px; }

.griglia-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--bianco); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); }
.card--evidenza { outline: 3px solid var(--giallo); }
.card__link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.card__foto { position: relative; aspect-ratio: 3 / 2; background: var(--verde-chiaro); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; }
.etichetta, .prezzo { position: absolute; top: 10px; left: 10px; background: var(--giallo); color: var(--verde-scuro); font-weight: 700; font-size: .8rem; padding: 4px 10px; border-radius: 999px; }
.prezzo { left: auto; right: 10px; top: auto; bottom: 10px; font-size: .95rem; }
.card__corpo { padding: 14px 16px 18px; }
/* L'etichetta dell'offerta ("Last minute", "Prenota prima"): viene da Camping.it per le
   strutture collegate, dal campo Tipo per quelle scritte nel gestionale. */
.card__etichetta { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px;
                   background: var(--giallo); color: var(--verde-scuro); font-size: .78rem;
                   font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.card__tipo { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--verde-link); font-weight: 700; margin: 0 0 4px; }
.stelle { color: var(--giallo); letter-spacing: 1px; }
.card__nome { margin: 0 0 4px; }
.card__luogo, .card__date { margin: 0; color: var(--grigio); font-size: .92rem; }
.card__promo { margin: 8px 0 0; font-size: .92rem; }

.doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .doppio { grid-template-columns: 1fr; } }
.riquadro { border-radius: var(--raggio); padding: 28px; background: var(--verde-chiaro); }
.riquadro--verde { background: var(--verde-scuro); color: var(--bianco); }

.vacanze { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.vacanze__voce { min-height: 150px; border-radius: var(--raggio); background: var(--verde-hero) var(--foto, none) center / cover; color: var(--bianco); text-decoration: none; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.vacanze__voce::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(21,58,43,.85)); }
.vacanze__voce > * { position: relative; }
.vacanze__voce span { font-size: .85rem; opacity: .9; }

.newsletter { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px 16px; align-items: center; background: var(--verde-chiaro); border-radius: var(--raggio); padding: 28px; }
.newsletter input[type=email] { font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--bordo); }
.newsletter .spunta, .newsletter__esito { grid-column: 1 / -1; margin: 0; }
/* L'esito dell'iscrizione: chi ha appena premuto "Iscriviti" deve vederlo senza cercarlo,
   perché la cosa importante ("ti abbiamo scritto, apri il link") succede fuori dal sito. */
.newsletter__esito { font-size: 1.05rem; font-weight: 600; line-height: 1.45; padding: 16px 18px;
                     border-radius: 10px; background: var(--bianco); box-shadow: var(--ombra);
                     border: 1px solid; border-left-width: 6px;
                     display: flex; gap: 12px; align-items: flex-start; }
/* Il segno davanti sta in un cerchio pieno: si vede prima delle parole. */
.newsletter__esito::before { flex: none; width: 24px; height: 24px; border-radius: 50%; color: var(--bianco);
                             font-size: .95rem; font-weight: 800; line-height: 24px; text-align: center; }
.newsletter__esito--ok { border-color: var(--verde-link); color: #14432B; }
.newsletter__esito--ok::before { content: "✓"; background: var(--verde-link); }
.newsletter__esito--ko { border-color: #C0392B; color: #7A241B; }
.newsletter__esito--ko::before { content: "!"; background: #C0392B; }
/* Il riquadro prende il fuoco da solo per farsi leggere dagli screen reader: il contorno si
   mostra solo a chi sta davvero navigando da tastiera, se no sembra un secondo bordo. */
.newsletter__esito:focus { outline: none; }
.newsletter__esito:focus-visible { outline: 2px solid var(--verde-scuro); outline-offset: 3px; }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; } }

/* ---------- offerte nella scheda ---------- */
/* Aperte, non card: qui l'offerta si legge per intero e da qui si chiedono informazioni. */
.offerte { display: grid; gap: 12px; margin: 16px 0 28px; }
.offerta { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.offerta[open] { box-shadow: var(--ombra); }
.offerta__testata { display: flex; gap: 16px; align-items: center; justify-content: space-between;
                    padding: 14px 18px; cursor: pointer; list-style: none; }
.offerta__testata::-webkit-details-marker { display: none; }
.offerta__testata::after { content: "▾"; color: var(--verde-link); font-size: 1.1rem; flex: none; transition: transform .15s; }
.offerta[open] .offerta__testata::after { transform: rotate(180deg); }
.offerta__testata:hover { background: var(--verde-chiaro); }
.offerta__intestazione { display: grid; gap: 2px; min-width: 0; }
.offerta__titolo { font-family: var(--font-titoli); font-weight: 700; font-size: 1.1rem; }
.offerta__sottotitolo { color: var(--grigio); font-size: .92rem; }
.offerta__prezzo { font-weight: 700; color: var(--verde-link); white-space: nowrap; }
/* In colonna sul telefono, foto a sinistra e testo a destra dove c'è spazio: in colonna su uno
   schermo largo l'immagine si prende mezza pagina e il pulsante finisce sotto la piega.
   Si parte dal telefono, così le due colonne si aggiungono e non c'è niente da disfare. */
.offerta__corpo { padding: 16px 18px 18px; border-top: 1px solid var(--bordo); }
.offerta__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 14px; }
.offerta__corpo > p, .offerta__corpo > .offerta__testo { margin: 0 0 12px; }
.offerta__date { color: var(--grigio); font-size: .95rem; }
.offerta__corpo > .pulsante { margin-top: 4px; }
/* Il testo che arriva da Camping.it è HTML scritto dal cliente, già ripulito: qui gli si dà la
   spaziatura della pagina, perché dentro può esserci di tutto (capoversi, elenchi, o niente). */
.offerta__testo > :first-child { margin-top: 0; }
.offerta__testo > :last-child { margin-bottom: 0; }
.offerta__testo p { margin: 0 0 10px; }
.offerta__testo ul, .offerta__testo ol { margin: 0 0 10px; padding-left: 20px; }

@media (min-width: 701px) {
    .offerta__corpo { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
                      gap: 0 20px; align-items: start; }
    .offerta__corpo > .offerta__foto { grid-row: 1 / span 20; grid-column: 1; margin-bottom: 0; }
    .offerta__corpo > p, .offerta__corpo > .offerta__testo,
    .offerta__corpo > .pulsante { grid-column: 2; }
    .offerta__corpo > .pulsante { justify-self: start; }
    /* Senza immagine il testo si prende tutta la riga. */
    .offerta__corpo--senza-foto { grid-template-columns: minmax(0, 1fr); }
    .offerta__corpo--senza-foto > p, .offerta__corpo--senza-foto > .offerta__testo,
    .offerta__corpo--senza-foto > .pulsante { grid-column: 1; }
}
/* La riga che dice a quale offerta si riferisce la richiesta, sopra al modulo. */
/* Il riquadro del modulo è già verde chiaro: l'etichetta deve staccarsi da quello, se no si
   legge come una riga di testo qualsiasi e non come "stai scrivendo a proposito di questa cosa". */
.modulo__offerta { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
                   margin: 0; padding: 14px 18px; border-radius: 10px; background: #FFF6E0;
                   border: 1px solid #F0D089; border-left: 6px solid var(--giallo);
                   box-shadow: 0 2px 8px rgba(21, 58, 43, .08); }
.modulo__offerta__testo { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.modulo__offerta__testo > span:first-child { color: #6B5310; font-size: .9rem; text-transform: uppercase;
                                             letter-spacing: .04em; font-weight: 700; flex-basis: 100%; }
.modulo__offerta__testo b { font-family: var(--font-titoli); font-size: 1.15rem; }
.modulo__offerta__testo small { color: #6B5310; }
/* La × che toglie il riferimento: un bersaglio da dito, non un carattere solo. */
.modulo__offerta__togli { flex: none; width: 32px; height: 32px; line-height: 30px; text-align: center;
                          border-radius: 50%; text-decoration: none; font-size: 1.25rem; font-weight: 700;
                          color: var(--verde-scuro); background: var(--bianco); border: 1px solid #E2CB92; }
.modulo__offerta__togli:hover, .modulo__offerta__togli:focus { background: var(--verde-scuro); color: var(--bianco); }

/* ---------- pagine interne ---------- */
.testata-pagina { background: var(--verde-chiaro); padding: 32px 0; }
.briciole { font-size: .9rem; margin-bottom: 10px; color: var(--grigio); }
.briciole a { text-decoration: none; }

/* Crediti fotografici: una riga per foto, miniatura e dati. */
.crediti { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.crediti__voce { display: flex; gap: 14px; align-items: flex-start; font-size: .95rem; }
.crediti__voce img { flex: none; width: 96px; height: 60px; object-fit: cover; border-radius: 8px; }
.crediti__voce small { color: var(--grigio); }
.crediti__voce div { min-width: 0; overflow-wrap: anywhere; }
.vuoto { font-size: 1.1rem; }
.altre { text-align: center; margin-top: 28px; }

/* ---------- galleria della scheda ----------
   Uno scatto grande e la striscia delle miniature sotto. Lo scorrimento a scatti è del CSS
   (scroll-snap): senza JavaScript si scorre col dito e le miniature sono ancore, quindi la
   galleria funziona lo stesso. Frecce, contatore e schermo intero li accende lo script. */
.galleria { padding-top: 20px; padding-bottom: 4px; }
.galleria__vetrina { position: relative; }
.galleria__palco { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 8px;
                   overflow-x: auto; overscroll-behavior-x: contain;
                   scroll-snap-type: x mandatory; border-radius: var(--raggio);
                   scrollbar-width: none; -ms-overflow-style: none; }
.galleria__palco::-webkit-scrollbar { display: none; }
.galleria__palco:focus-visible { outline: 3px solid var(--verde-link); outline-offset: 3px; }
.galleria__scatto { margin: 0; scroll-snap-align: center; }
.galleria__scatto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
                        border-radius: var(--raggio); background: var(--verde-chiaro); }
/* Quando lo script è acceso, sullo scatto si clicca per ingrandire. */
.galleria--viva .galleria__scatto img { cursor: zoom-in; }

.galleria__freccia { position: absolute; top: 50%; transform: translateY(-50%);
                     width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bordo);
                     background: rgba(255, 255, 255, .92); color: var(--verde-scuro);
                     font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--ombra);
                     display: grid; place-items: center; padding: 0 0 3px; }
.galleria__freccia:hover { background: var(--bianco); }
.galleria__freccia[disabled] { opacity: .35; cursor: default; }
.galleria__freccia--prec { left: 10px; }
.galleria__freccia--succ { right: 10px; }
.galleria__contatore { position: absolute; right: 12px; bottom: 12px; margin: 0;
                       background: rgba(21, 58, 43, .72); color: var(--bianco);
                       font-size: .85rem; padding: 3px 10px; border-radius: 999px; }

/* Le miniature non si stringono per starci tutte (con 10 foto su un telefono diventavano
   francobolli da 30px): tengono la loro misura e la striscia scorre di lato, col dito o da sé
   sulla foto in vista (site.js). Il padding lascia spazio al contorno di quella attiva. */
.galleria__miniature { list-style: none; display: flex; gap: 8px; margin: 8px 0 0; padding: 4px;
                       overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.galleria__miniature li { flex: none; scroll-snap-align: start; }
.galleria__miniature a { display: block; border-radius: 8px; overflow: hidden;
                         outline: 2px solid transparent; outline-offset: 2px; }
.galleria__miniature img { width: 88px; aspect-ratio: 3 / 2; object-fit: cover;
                           background: var(--verde-chiaro); opacity: .65; transition: opacity .15s; }
.galleria__miniature a:hover img, .galleria__miniature a:focus-visible img { opacity: 1; }
.galleria__miniature .attiva { outline-color: var(--verde-scuro); }
.galleria__miniature .attiva img { opacity: 1; }

/* La lente: lo scatto a schermo intero. È un <dialog>, quindi Esc chiude da solo. */
.lente { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
         background: rgba(10, 22, 17, .96); color: var(--bianco); }
.lente::backdrop { background: rgba(10, 22, 17, .96); }
.lente__figura { margin: 0; height: 100%; display: grid; place-items: center; padding: 56px 12px; }
.lente__figura img { max-width: 100%; max-height: 100%; width: auto; height: auto;
                     object-fit: contain; border-radius: 8px; }
.lente__chiudi, .lente__freccia { position: absolute; background: rgba(255, 255, 255, .14);
                                  color: var(--bianco); border: 0; border-radius: 50%;
                                  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
                                  cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.lente__chiudi:hover, .lente__freccia:hover { background: rgba(255, 255, 255, .28); }
.lente__chiudi { top: 12px; right: 12px; font-size: 1.3rem; padding: 0; }
.lente__freccia--prec { left: 12px; top: 50%; transform: translateY(-50%); }
.lente__freccia--succ { right: 12px; top: 50%; transform: translateY(-50%); }
.lente__contatore { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
                    margin: 0; font-size: .9rem; opacity: .85; }

@media (min-width: 701px) {
    /* Su schermo largo una foto sola a tutta pagina sarebbe enorme: se ne vede una e mezza,
       così si capisce al volo che ce ne sono altre. */
    .galleria__palco { grid-auto-columns: 68%; }
    .galleria__miniature img { width: 116px; }
    /* Su uno schermo alto una foto 3:2 larga 800px arriverebbe a mangiarsi tutta la pagina:
       si taglia in altezza, così sotto resta sempre un pezzo di scheda a dire che si continua. */
    .galleria__scatto img { max-height: 58vh; }
}
@media (prefers-reduced-motion: no-preference) {
    .galleria__palco { scroll-behavior: smooth; }
}
.scheda__griglia { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding-top: 28px; padding-bottom: 56px; }
@media (max-width: 860px) { .scheda__griglia { grid-template-columns: 1fr; } }
.scheda__testo h2 { font-size: 1.3rem; margin-top: 1.6em; }
.scheda__promo { font-size: 1.15rem; font-weight: 600; }
.scheda__contatti { align-self: start; position: sticky; top: 84px; }
.contatti { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.etichette { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etichette li { background: var(--verde-chiaro); border-radius: 999px; padding: 5px 12px; font-size: .9rem; }
/* I periodi di apertura sono date, non tag da scorrere: incolonnati e con le cifre allineate. */
/* "Dove si trova", sopra la mappa nel riquadro dei contatti. */
.scheda__dove { margin: 22px 0 8px; font-size: 1.05rem; }

.etichette--date { flex-direction: column; align-items: flex-start; gap: 6px; }
.etichette--date li { font-variant-numeric: tabular-nums; font-weight: 600; }
.nota { color: var(--grigio); font-size: .9rem; margin: 10px 0 0; }

.modulo { display: grid; gap: 14px; }
.modulo__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
/* Il quadratino sta in alto, non al centro: quando il testo va su due righe, centrato finisce
   in mezzo al nulla e non si capisce più a che cosa si riferisce. */
.spunta { display: flex; gap: 8px; align-items: flex-start; }
.spunta input[type=checkbox] { margin-top: .25em; flex: none; }
/* L'abbonamento e la ricevuta dell'iscrizione. */
.listino { margin: 0; line-height: 1.6; }
.riquadro--esito { padding: 20px 22px; }
.riquadro--esito h2 { margin-top: 0; }
.errore, .validation-summary-errors { color: #b3261e; font-size: .88rem; font-weight: 600; }

/* ---------- footer ---------- */
.piede { background: var(--verde-scuro); color: rgba(255,255,255,.85); padding-top: 48px; }
.piede h2 { font-size: 1rem; color: var(--bianco); margin-top: 1em; }
.piede a { color: rgba(255,255,255,.85); text-decoration: none; }
.piede a:hover { color: var(--giallo); }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { padding: 2px 0; }
.piede__griglia { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 32px; }
.piede__aree { columns: 2; }
.piede__fondo { border-top: 1px solid rgba(255,255,255,.15); margin-top: 32px; padding-top: 16px; padding-bottom: 24px; font-size: .85rem; }
@media (max-width: 860px) { .piede__griglia { grid-template-columns: 1fr; } }

/* ====================================================================== */
/* Modulo cumulativo: elenco dei destinatari e calendario del soggiorno.   */
/* Ripresi dai portali regionali (Y:\portaliregionali), con i colori di    */
/* questo sito: sono la stessa cosa e devono comportarsi allo stesso modo. */
/* ====================================================================== */
.modulo__etichetta { display: block; font-weight: 600; margin-top: 8px; }
.modulo__nota { color: var(--grigio); font-size: .9rem; margin: 6px 0 0; }
.modulo__conteggio { margin: 8px 0 0; font-size: .9rem; color: var(--grigio); }
.modulo__conteggio strong { color: var(--verde-scuro); font-size: 1.1rem; }
.destinatari__elenco {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
}
.destinatario { min-width: 0; }
.destinatario__scelta {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.destinatario__voce {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nome segno" "dove segno";
    align-items: center;
    gap: 0 10px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--bianco);
    cursor: pointer;
    min-width: 0;
}
.destinatario__nome {
    grid-area: nome;
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.destinatario__dove { grid-area: dove; font-size: 0.7812rem; color: var(--grigio); }
.destinatario__segno {
    grid-area: segno;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--verde-link) 12%, var(--bianco));
    position: relative;
}
/* La crocetta: due barre incrociate, disegnate e non scaricate. */
.destinatario__segno::before,
.destinatario__segno::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px; height: 2px;
    margin: -1px 0 0 -5px;
    background: var(--verde-link);
    border-radius: 1px;
}
.destinatario__segno::before { transform: rotate(45deg); }
.destinatario__segno::after { transform: rotate(-45deg); }
/* Tolta: la riga resta in pagina, sbiadita, con il segno che diventa un piu. Sparire del
   tutto sarebbe peggio, perche non si potrebbe piu rimetterla. */
.destinatario:has(.destinatario__scelta:not(:checked)) .destinatario__voce {
    background: transparent;
    border-style: dashed;
}
.destinatario:has(.destinatario__scelta:not(:checked)) .destinatario__nome,
.destinatario:has(.destinatario__scelta:not(:checked)) .destinatario__dove {
    opacity: .45;
    text-decoration: line-through;
}
.destinatario:has(.destinatario__scelta:not(:checked)) .destinatario__segno::before {
    transform: rotate(90deg);
}
.destinatario:has(.destinatario__scelta:not(:checked)) .destinatario__segno::after {
    transform: rotate(0deg);
}
.destinatario__scelta:focus-visible + .destinatario__voce {
    outline: 3px solid var(--verde-link);
    outline-offset: 2px;
}

/* Testo lungo (informativa privacy): misura di lettura e respiro fra i capoversi. */
.testo h2 { margin-top: 1.8em; }
.testo p { max-width: 70ch; }
.sfumato { color: var(--grigio); font-size: .9rem; }

/* Un elemento con hidden deve sparire anche quando la sua regola dice display:flex o grid:
   senza questa riga il calendario non riuscirebbe a nascondere i due campi data. */
[hidden] { display: none !important; }

/* Le età dei bambini: caselle piccole in fila, una per bambino. */
.eta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.eta__campo { display: block; }
.eta__campo input { width: 72px; }

/* Il modulo su due colonne: a sinistra il viaggio, a destra chi scrive. Serve quando il modulo
   sta in una pagina larga — la scheda della struttura — dove una colonna sola sarebbe una
   striscia stretta in mezzo al vuoto. Sotto gli 860px torna una colonna. */
.modulo--due { grid-template-columns: 1fr 1fr; gap: 18px 32px; align-items: start; }
.modulo--due > .modulo__larga { grid-column: 1 / -1; }
.modulo__colonna { display: grid; gap: 14px; align-content: start; }
.modulo__dove { display: grid; gap: 12px; }
/* Il menu della destinazione non si allarga per tutta la pagina: è una scelta fra venti voci
   brevi, e un campo lungo un metro non si legge meglio. */
.modulo__dove > .campo select { max-width: 420px; }
@media (max-width: 860px) {
    .modulo--due { grid-template-columns: 1fr; }
}

/* Come si paga, nel modulo di iscrizione. Sta dentro il riquadro dell'abbonamento perche' e' una
   delle cose che uno vuole sapere prima di mettersi a compilare, non dopo. */
.pagamento { margin: 16px 0 0; padding: 14px 16px; background: var(--verde-chiaro); border-radius: 10px; }
.pagamento__titolo { margin: 0 0 8px; font-weight: 700; color: var(--verde-scuro); }
.pagamento__modi { margin: 0; padding-left: 18px; }
.pagamento__modi li + li { margin-top: 6px; }
.pagamento .nota { margin: 10px 0 0; }
.esito__paga { margin: 18px 0 6px; }

/* Il modulo di iscrizione con i dati di prova dentro: si vede che lo e'. */
.avviso-prova { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #fdf0cf; color: #6b4a00; }

/* Iscrizione fermata: sembra già un cliente di Camping.it. Giallo e non rosso: non è un errore,
   è una domanda a cui rispondere prima di pagare. */
.avviso-camping { margin: 0 0 22px; padding: 16px 18px; border-radius: 10px; background: #fdf0cf; color: #5c4000; border-left: 6px solid #f5b82e; }
.avviso-camping h2 { margin: 0 0 8px; font-size: 1.15rem; }
.avviso-camping p { margin: 0 0 10px; }
.avviso-camping .spunta { margin: 4px 0 0; font-weight: 600; }
.avviso-prova code { font-size: .9em; }