/* Pagine di servizio RareKeepers: uscite, vendi, come lavoriamo, spedizioni, domande, contatti.
   Si carica dopo casa.css e sale.css e ne riusa i pezzi (capo della sala, sale chiare, passi, promesse); qui solo quello che manca. */

.vendi h2 em { color: var(--verde); }
.capo-azione { grid-column: 1; }
.vendi + .servizio, .vendi + .vetrina { padding-top: var(--stacco); }
.btn-piccolo { min-height: 44px; padding: 0 22px; }
.link-chiaro { margin-top: 24px; color: var(--verde); }
.servizio-link { margin-top: 32px; }

/* ---------- calendario delle uscite: una riga per uscita ---------- */
.calendario { display: grid; gap: 12px; }
.riga-uscita {
  display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) 150px 130px auto; align-items: center; gap: 12px 32px;
  padding: 22px 28px; border-radius: var(--r); background: var(--velluto); transition: background var(--veloce);
}
.riga-uscita:hover { background: var(--velluto-2); }
.riga-uscita .quando { flex-direction: column; gap: 4px; align-items: start; }
.riga-uscita .mese { font-size: var(--t-small); }
.riga-uscita h3 { font-family: 'Testo', system-ui, sans-serif; font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.riga-uscita .cosa p { margin-top: 4px; color: var(--tenue); }
.riga-uscita .prezzo { text-align: right; }
.riga-uscita .prezzo .tenue { font: 400 var(--t-small)/1.4 'Testo', system-ui, sans-serif; }

/* ---------- iscrizione ---------- */
.allestimento { padding-top: 0; }
.allestimento-marchio { height: clamp(56px, 6vw, 88px); width: auto; margin-bottom: 12px; opacity: .92; }
.lettera { display: grid; justify-items: center; gap: 20px; text-align: center; max-width: 760px; margin: 0 auto; padding: var(--stacco) var(--gutter); }
.lettera h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.lettera .sopra { max-width: 30em; }
.iscrizione { width: 100%; margin-top: 16px; display: grid; gap: 10px; justify-items: start; text-align: left; }
.iscrizione label, .campo label { font-size: var(--t-small); font-weight: 600; color: var(--crema); }
.campo-riga { display: flex; gap: 10px; width: 100%; }
.campo-riga input { flex: 1; min-width: 0; }

/* Campi: pieni e con il bordo del bottone secondario, così si vedono anche sul velluto */
input:not([type="file"]), select, textarea {
  width: 100%; min-height: 52px; padding: 12px 18px; border: 0; border-radius: 14px; font: inherit; color: var(--crema);
  background: rgba(243, 237, 225, .06); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .38); /* taste-skill-ignore: il contorno del campo, non un'ombra */
  transition: box-shadow var(--veloce), background var(--veloce);
}
input::placeholder, textarea::placeholder { color: #8E9C95; }
input:not([type="file"]):hover, select:hover, textarea:hover { background: rgba(243, 237, 225, .09); }
input:not([type="file"]):focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--oro); /* taste-skill-ignore: il fuoco del campo */ }
select { appearance: none; padding-right: 48px; cursor: pointer; }
.tendina { position: relative; display: block; }
.tendina::after { content: ''; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--crema); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
select option { color: var(--inchiostro); }
textarea { resize: vertical; min-height: 140px; }
input[type="file"] { font-size: var(--t-small); color: var(--tenue); }
input[type="file"]::file-selector-button { margin-right: 14px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--velluto-2); color: var(--crema); font: 600 var(--t-small)/1 'Testo', system-ui, sans-serif; cursor: pointer; }

/* Errori: il campo si accende di rosso e la frase sotto dice cosa sistemare */
.errore-testo { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-small); font-weight: 600; color: var(--errore); }
.errore-testo::before { content: '!'; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--errore); color: var(--notte); font-size: 12px; font-weight: 800; }
.campo.sbagliato label, .campo.sbagliato .nome-campo { color: var(--errore); }
.campo.sbagliato .trascina { color: var(--crema); }
.campo.sbagliato input, .campo.sbagliato select, .campo.sbagliato textarea, .campo.sbagliato .trascina, .campo.sbagliato .scelta-btn { box-shadow: inset 0 0 0 2px var(--errore); background: rgba(255, 138, 128, .08); /* taste-skill-ignore: il bordo rosso del campo sbagliato */ }
.modulo-sala .errore-riassunto { color: var(--errore); font-size: var(--t-small); font-weight: 600; }

/* Le foto: un riquadro dove trascinarle, o da toccare per sceglierle; il campo vero lo copre tutto, invisibile */
.nome-campo { font-size: var(--t-small); font-weight: 600; color: var(--crema); }
.trascina { position: relative; display: grid; justify-items: center; gap: 8px; padding: 32px 20px; border-radius: 14px; text-align: center; color: var(--crema); cursor: pointer;
  background: rgba(243, 237, 225, .04); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .38); /* taste-skill-ignore: il contorno del riquadro, non un'ombra */
  transition: box-shadow var(--veloce), background var(--veloce); }
.trascina input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.trascina .icona { width: 28px; height: 28px; color: var(--oro-corsivo); stroke-width: 1.5; }
.trascina .sottolineato { color: var(--oro-corsivo); text-decoration: underline; text-underline-offset: 3px; }
.trascina:hover, .trascina.sopra-qui { background: rgba(243, 237, 225, .09); }
.trascina.sopra-qui, .trascina:focus-within { box-shadow: inset 0 0 0 2px var(--oro); /* taste-skill-ignore: il fuoco del riquadro */ }

/* La tendina della casa al posto di quella di sistema: il select resta sotto, invisibile, per l'invio e i controlli */
.tendina.finta select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.tendina.finta::after { z-index: 1; transition: transform var(--veloce) var(--molla); }
.tendina.finta:has([aria-expanded="true"])::after { transform: translateY(4px) rotate(225deg); }
.scelta-btn { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 8px 48px 8px 18px; border: 0; border-radius: 14px; font: inherit; color: var(--crema); text-align: left; cursor: pointer;
  background: rgba(243, 237, 225, .06); box-shadow: inset 0 0 0 1.5px rgba(243, 237, 225, .38); /* taste-skill-ignore: il contorno del campo, non un'ombra */
  transition: box-shadow var(--veloce), background var(--veloce); }
.scelta-btn:hover { background: rgba(243, 237, 225, .09); }
.scelta-btn:focus-visible, .scelta-btn[aria-expanded="true"] { outline: none; box-shadow: inset 0 0 0 2px var(--oro); /* taste-skill-ignore: il fuoco del campo */ }
.scelta-btn .segnaposto { color: #8E9C95; }
.scelta-btn .targa { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--carta); }
.scelta-btn .targa img { width: auto; height: 24px; }
.scelta-lista:focus { outline: none; }
.scelta-lista { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; list-style: none;
  background: var(--carta); color: var(--inchiostro); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); /* taste-skill-ignore: la tendina sta sopra al modulo */
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity var(--veloce), transform 260ms var(--molla), visibility 0s var(--veloce); }
.scelta-lista.aperta { opacity: 1; visibility: visible; transform: none; transition: opacity var(--veloce), transform 260ms var(--molla); }
.scelta-lista li { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px 36px; border-radius: 12px; font-weight: 600; text-align: center; cursor: pointer; background: var(--carta-2); transition: background var(--veloce), box-shadow var(--veloce); }
.scelta-lista li img { width: auto; height: auto; max-width: 70%; max-height: 44px; }
.scelta-lista li.attiva { background: #DDD3BF; }
.scelta-lista li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scelta-lista li[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--verde); /* taste-skill-ignore: il contorno della voce scelta */ }
.scelta-lista li[aria-selected="true"]::after { content: ''; position: absolute; right: 16px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border: solid var(--verde); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.scelta-lista li:active { transform: scale(.98); }

/* ---------- capitoli: un elenco a caratteri grandi, l'icona a sinistra ---------- */
.capitoli { margin-top: 0; gap: clamp(36px, 4vw, 56px); }
.capitoli h3 { font: 380 var(--t-terzo)/1.15 'Titoli', Georgia, serif; }
.capitoli p { margin-top: 10px; font-size: var(--t-lead); line-height: 1.55; }
.capitoli-sala { align-items: start; padding-top: 0; }
.capitoli-testa { position: sticky; top: 104px; }
.capitoli-testa h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.capitoli-testa .sopra { margin-top: 20px; }
.invito > .icona, .principale-testa > .icona { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--velluto-2); color: var(--oro-corsivo); stroke-width: 1.5; }

/* ---------- vendi: il modulo ---------- */
.modulo-sala {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--stacco);
}
.modulo-testo { position: sticky; top: 104px; }
.modulo-testo h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; }
.modulo-testo .sopra { margin-top: 20px; }
/* La prenotazione: una sala a sé dopo la condizione chiara, le regole come tre tappe collegate da un filo */
.prenota { padding-top: var(--stacco); }
.regole-prenota { display: grid; margin-top: clamp(32px, 4vw, 48px); counter-reset: regola; }
.regole-prenota li { position: relative; display: grid; gap: 4px; padding: 0 0 28px 64px; counter-increment: regola; }
.regole-prenota li:last-child { padding-bottom: 0; }
.regole-prenota li::before { content: counter(regola); position: absolute; left: 0; top: -6px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--velluto-2); color: var(--oro-corsivo); font: 400 1.125rem/1 'Titoli', Georgia, serif; }
.regole-prenota li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 42px; bottom: 2px; width: 1px; background: rgba(243, 237, 225, .18); }
.regole-prenota h3 { font: 600 1.1875rem/1.3 'Testo', system-ui, sans-serif; color: var(--testa); }
.regole-prenota p { color: var(--tenue); max-width: 30em; }
.modulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: clamp(24px, 3vw, 48px); border-radius: var(--r); background: var(--velluto); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo-largo { grid-column: 1 / -1; }
.aiuto, .nota { color: var(--tenue); }
.nota a { color: var(--oro-corsivo); text-decoration: underline; text-underline-offset: 3px; }
.conferma { display: grid; gap: 16px; }
.modulo .btn { justify-self: start; min-width: min(100%, 280px); cursor: pointer; border: 0; }

/* Tre carte a ventaglio: quello che ci manderai */
.ventaglio { position: relative; height: clamp(220px, 22vw, 320px); margin-top: clamp(40px, 5vw, 72px); }
.ventaglio .carta { box-shadow: none; position: absolute; left: 50%; bottom: 0; width: clamp(120px, 11vw, 170px); transform-origin: 50% 110%; transition: transform 700ms var(--molla); }
.ventaglio .carta:nth-child(1) { transform: translateX(-120%) rotate(-12deg); }
.ventaglio .carta:nth-child(2) { transform: translateX(-50%) translateY(-6%); z-index: 1; }
.ventaglio .carta:nth-child(3) { transform: translateX(20%) rotate(12deg); }
.modulo-sala:hover .ventaglio .carta:nth-child(1) { transform: translateX(-132%) rotate(-16deg); }
.modulo-sala:hover .ventaglio .carta:nth-child(3) { transform: translateX(32%) rotate(16deg); }

/* ---------- come lavoriamo e spedizioni: la foto ferma, i capitoli scorrono ---------- */
.lavoro { align-items: start; padding-top: 0; }
.lavoro .servizio-figura { position: sticky; top: 104px; }
.societa-dati { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; margin-top: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--velluto); }

/* ---------- spedizioni ---------- */
.fatti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--velluto); }
.fatti div { display: grid; gap: 10px; }
.fatti dt { font-size: var(--t-small); color: var(--tenue); }
.fatti dd { font: 400 1.5rem/1.2 'Titoli', Georgia, serif; color: var(--testa); }
.fatti dd mark.dd { font: 500 1rem/1.5 'Testo', system-ui, sans-serif; }
.invito { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 32px; padding: clamp(28px, 3.5vw, 56px); border-radius: var(--r); background: var(--velluto); }
.invito h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; }
.invito .sopra { margin-top: 10px; }

/* ---------- domande frequenti ---------- */
.domande-sala { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.domande { display: grid; gap: 12px; }
.domande details { border-radius: var(--r); background: var(--velluto); transition: background var(--veloce); }
.domande details:hover, .domande details[open] { background: var(--velluto-2); }
.domande summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 20px 28px; cursor: pointer; list-style: none; font-size: 1.1875rem; font-weight: 600; color: var(--testa); }
.domande summary::-webkit-details-marker { display: none; }
.domande details p { padding: 0 28px 26px; max-width: 46em; color: var(--crema); }
.domande details a { color: var(--oro-corsivo); text-decoration: underline; text-underline-offset: 3px; }
.piu { position: relative; flex: none; width: 18px; height: 18px; transition: transform 400ms var(--molla); }
.piu::before, .piu::after { content: ''; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 2px; background: var(--oro-corsivo); }
.piu::after { transform: rotate(90deg); transition: transform 400ms var(--molla); }
details[open] .piu::after { transform: rotate(0); }
.chiedi { position: sticky; top: 104px; display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 3vw, 44px); border-radius: var(--r); background: var(--carta); color: var(--inchiostro); }
.chiedi h2 { font-size: var(--t-terzo); color: var(--inchiostro); }
.chiedi p { color: var(--inchiostro-tenue); }
.chiedi .btn { margin-top: 8px; background: var(--inchiostro); color: var(--carta); }
.chiedi .btn:hover { background: #1D3A31; }

/* ---------- contatti: l'email in primo piano, su carta ---------- */
.contatti-sala { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.principale { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: end; padding: clamp(28px, 5vw, 72px); border-radius: var(--r); background: var(--carta); color: var(--inchiostro); }
.principale-testa { display: grid; gap: 14px; justify-items: start; }
.principale-testa > .icona { background: var(--carta-2); color: var(--verde); }
.principale h2 { margin-top: 8px; font-size: var(--t-head); line-height: 1.02; letter-spacing: -.02em; color: var(--inchiostro); }
.principale p { color: var(--inchiostro-tenue); font-size: var(--t-lead); }
.principale .indirizzo { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1.2 'Titoli', Georgia, serif; color: var(--inchiostro); }
.orari { display: grid; gap: 6px; padding-left: clamp(32px, 5vw, 80px); border-left: 1px solid rgba(11, 31, 26, .14); }
.orari dt { margin-bottom: 8px; font-size: var(--t-small); color: var(--inchiostro-tenue); }
.orari dd { font-size: var(--t-lead); font-weight: 600; }
.orari .ore { font: 400 var(--t-head)/1 'Titoli', Georgia, serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.principale mark.dd { background: #FFE38A; }

/* ---------- tablet ---------- */
@media (max-width: 1068px) {
  .riga-uscita { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 24px; }
  .riga-uscita .quando { grid-row: span 3; }
  .riga-uscita .mancano { grid-column: 2; }
  .riga-uscita .prezzo { grid-column: 3; grid-row: 1; }
  .riga-uscita .btn { grid-column: 3; grid-row: 2 / span 2; }
  .modulo-sala, .domande-sala, .lavoro, .capitoli-sala, .contatti-sala { grid-template-columns: minmax(0, 1fr); }
  .modulo-testo, .chiedi, .lavoro .servizio-figura, .capitoli-testa { position: static; }
  .lavoro .servizio-figura { aspect-ratio: 4 / 3; }
  .fatti, .societa-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principale { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .orari { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(11, 31, 26, .14); }
  .ventaglio { height: 240px; margin-top: 32px; }
}

/* ---------- telefono ---------- */
@media (max-width: 734px) {
  .riga-uscita { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 6px 18px; }
  .riga-uscita .quando { grid-row: span 4; }
  .riga-uscita .mancano, .riga-uscita .prezzo, .riga-uscita .btn { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; }
  .riga-uscita .btn { margin-top: 8px; }
  .riga-uscita .giorno { font-size: 2.5rem; }
  .riga-uscita .mese { max-width: 5em; }
  .campo-riga { flex-direction: column; }
  .modulo { grid-template-columns: minmax(0, 1fr); }
  .modulo .btn { justify-self: stretch; }
  .scelta-lista li { min-height: 64px; padding: 10px 14px; }
  .scelta-lista li img { max-height: 36px; max-width: 100%; }
  .scelta-lista li[aria-selected="true"]::after { display: none; }
  .fatti dd { font-size: 1.25rem; }
  .invito { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .domande summary { padding: 18px 20px; font-size: 1.0625rem; }
  .domande details p { padding: 0 20px 22px; }
  .ventaglio { height: 200px; }
  .ventaglio .carta { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .ventaglio .carta, .piu, .piu::after { transition-duration: 1ms; }
  .scelta-lista, .scelta-lista.aperta { transform: none; }
}
.modulo .spunta a { color: var(--oro-corsivo); text-decoration: underline; text-underline-offset: 3px; }
.modulo .campo-spunta .errore-testo { color: var(--errore); }
.modulo .campo-spunta .errore-testo::before { background: var(--errore); }
.modulo .campo-spunta.sbagliato .spunta { background: rgba(255, 138, 128, .08); box-shadow: inset 0 0 0 2px var(--errore); /* taste-skill-ignore: il bordo rosso della spunta obbligatoria, sul fondo scuro */ }