/* Oceano — landing cene aziendali. Mobile first. Nessuna risorsa di terzi.
   Blu notte e oro. Caratteri in locale (licenza OFL, vedi assets/fonts/LEGGIMI.txt):
   titoli in Cormorant Garamond (serif elegante), testo in Karla. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/karla-latin.woff2") format("woff2"); }

:root {
  --notte: #06182B;
  --notte-2: #0B2237;
  --oro: #C39A5B;
  --oro-chiaro: #E0C18C;
  --oro-scuro: #7A5620;      /* oro leggibile su fondo crema (5,8:1) */
  --crema: #F4F0E8;
  --testo: #F2EDE4;
  --testo-tenue: #B9C6D2;
  --inchiostro: #06182B;
  --inchiostro-tenue: #3C4F60;
  --bordo-campo: #4A5A69;
  --errore: #B3261E;
  --titoli: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --corpo: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 6rem; } /* la barra fissa in basso non copre il punto a cui si salta */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--notte); color: var(--testo); font-family: var(--corpo); font-size: 1.0625rem; line-height: 1.6; }
img, svg { max-width: 100%; display: block; }
a { color: var(--oro-chiaro); }
h1, h2, h3 { font-family: var(--titoli); font-weight: 500; line-height: 1.08; letter-spacing: 0; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 10.5vw, 4.3rem); color: #F7F3EC; }
h2 { font-size: clamp(2rem, 7vw, 2.9rem); color: #F7F3EC; }
h3 { font-size: 1.5rem; font-weight: 500; }
p { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--oro-chiaro); outline-offset: 3px; }
.chiaro :focus-visible, .chiaro a:focus-visible { outline-color: var(--inchiostro); }

.salta { position: absolute; left: -999px; top: 0; background: var(--oro); color: #05131F; padding: .75rem 1rem; z-index: 50; }
.salta:focus { left: 0; }

.contenitore { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Barra in alto ── */
.testata { padding: 1.1rem 0; border-bottom: 1px solid rgba(195, 154, 91, .25); }
.marchio { font-family: var(--titoli); font-weight: 500; letter-spacing: .45em; text-transform: uppercase; color: var(--oro); font-size: 1.2rem; text-decoration: none; }

/* ── Blocchi ── */
.blocco { padding: 3.25rem 0; }
.chiaro { background: var(--crema); color: var(--inchiostro); }
.chiaro h2, .chiaro h3 { color: var(--inchiostro); }
.chiaro a { color: var(--oro-scuro); }
.chiaro + .chiaro { border-top: 1px solid rgba(6, 24, 43, .15); }
/* Resta una sola frase sopra il titolo, nell'apertura: dice di che cosa parla la pagina. */
.etichetta { font-size: 1.0625rem; font-weight: 500; letter-spacing: .02em; color: var(--oro-chiaro); margin: 0 0 1rem; }

/* ── Hero ── */
/* La foto apre la pagina: su telefono a tutta larghezza con il titolo che poggia sulla parte scura,
   su schermi larghi affiancata al testo (nessun ingrandimento oltre la misura del file). */
.hero { padding: 0; position: relative; }
.hero-foto { margin: 0; position: relative; aspect-ratio: 4 / 5; max-height: 34rem; overflow: hidden; background: var(--notte-2); }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 24, 43, .30) 0%, rgba(6, 24, 43, 0) 25%, rgba(6, 24, 43, .55) 60%, var(--notte) 100%); }
.hero-testo { position: relative; margin-top: -9.5rem; padding-bottom: 3rem; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-items: stretch; align-content: start; max-width: 80rem; margin: 0 auto; }
  .hero-foto { order: 2; aspect-ratio: auto; max-height: none; min-height: min(44rem, calc(100vh - 4rem)); }
  .hero-foto::after { background: linear-gradient(to right, var(--notte) 0%, rgba(6, 24, 43, .6) 18%, rgba(6, 24, 43, 0) 50%), linear-gradient(to left, var(--notte) 0%, rgba(6, 24, 43, 0) 7%); }
  .hero-testo { order: 1; margin: 0; align-self: center; padding: 3.5rem 2rem 3.5rem 2.5rem; max-width: none; }
}
.hero .sotto { font-size: 1.2rem; color: var(--testo-tenue); max-width: 34rem; margin-bottom: 1.75rem; }
.micro { font-size: .9375rem; color: var(--testo-tenue); margin: .9rem 0 0; }
.fiducia { font-size: .9375rem; color: var(--oro-chiaro); margin: 1.6rem 0 0; letter-spacing: .02em; }

/* ── Bottoni ── */
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.75rem; background: var(--oro); color: #05131F; font: 500 1.0625rem var(--corpo); letter-spacing: .03em; text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; }
.bottone:hover { background: var(--oro-chiaro); }
.chiaro .bottone { color: #05131F; }
.bottone.largo { width: 100%; }

/* ── Foto segnaposto: si sostituiscono con <picture> quando arrivano le foto ── */
.foto { margin: 2rem 0 0; }
.foto-ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--testo-tenue); font-size: .9375rem;
  background: linear-gradient(135deg, #0B2237, #10304D); border: 1px dashed rgba(195, 154, 91, .55); }
.foto-ph::before { content: ""; display: block; padding-top: 56.25%; width: 0; }
.foto-ph.verticale::before { padding-top: 133.333%; } /* 3:4, come le foto scattate in verticale col telefono */
.foto.verticale { max-width: 26rem; margin-inline: auto; } /* su schermi larghi resta una colonna, non occupa tutta la pagina */
/* Su schermi larghi testo e foto stanno affiancati (locale e menù). */
@media (min-width: 900px) {
  .due-colonne { max-width: 68rem; display: grid; grid-template-columns: minmax(0, 1fr) 26rem; column-gap: 4.5rem; align-items: start; }
  .due-colonne > .foto { margin: 0; max-width: none; }
}
.foto-ph span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.foto img { width: 100%; height: auto; }
.foto figcaption { font-size: .875rem; color: var(--testo-tenue); margin-top: .5rem; }

/* ── Elenchi ── */
.dotazioni { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.dotazioni li { position: relative; padding-left: 1.5rem; }
.dotazioni li::before { content: ""; position: absolute; left: 0; top: .72em; width: .65rem; height: 1px; background: var(--oro); }

/* ── Menù: tre livelli ── */
/* I tre livelli stanno sempre affiancati, anche su telefono. */
.livelli { list-style: none; margin: 1.5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.livello { border: 1px solid rgba(6, 24, 43, .25); background: #FBF8F2; padding: .85rem .5rem 1rem; text-align: center; display: flex; flex-direction: column; }
.livello .nome { font-weight: 500; font-size: .9375rem; line-height: 1.25; color: var(--oro-scuro); margin: 0 0 .6rem; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.livello .prezzo { font-family: var(--titoli); font-weight: 500; font-size: 2.1rem; line-height: 1; color: var(--inchiostro); margin: 0; font-variant-numeric: lining-nums; }
.livello .prezzo .da { display: block; font-size: .8125rem; font-weight: 400; color: var(--inchiostro-tenue); margin-bottom: .25rem; }
.livello .persona { font-size: .8125rem; color: var(--inchiostro-tenue); margin: .3rem 0 .7rem; }
.livello .nota { font-size: .8125rem; line-height: 1.4; color: var(--inchiostro); margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.chiaro .piccolo { color: var(--inchiostro-tenue); font-size: .9375rem; }

/* ── Domande frequenti ── */
.domande details { border-top: 1px solid rgba(6, 24, 43, .22); }
.domande details:last-of-type { border-bottom: 1px solid rgba(6, 24, 43, .22); }
.domande summary { list-style: none; cursor: pointer; padding: 1rem 2.25rem 1rem 0; position: relative; min-height: 3rem; font-weight: 500; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-size: 1.5rem; line-height: 1; color: var(--oro-scuro); }
.domande details[open] summary::after { content: "–"; }
.domande details p { padding: 0 0 1rem; margin: 0; color: var(--inchiostro-tenue); }

/* ── Modulo ── */
.modulo { margin-top: 2rem; }
fieldset { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
legend { font-family: var(--titoli); font-size: 1.65rem; font-weight: 500; padding: 0; margin: 0 0 .75rem; color: var(--inchiostro); }
.aiuto { font-size: .9375rem; color: var(--inchiostro-tenue); margin: 0 0 1rem; }
label { display: block; font-weight: 500; margin: 0 0 .35rem; }
.facolt { font-weight: 400; color: var(--inchiostro-tenue); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%; min-height: 3rem; padding: .65rem .8rem; font: 400 1.0625rem var(--corpo); color: var(--inchiostro);
  background: #fff; border: 1.5px solid var(--bordo-campo); border-radius: 2px; appearance: none; -webkit-appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.3rem, calc(100% - .9rem) 1.3rem; background-size: .4rem .4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
textarea { min-height: 6rem; resize: vertical; }
.campo { margin: 0 0 1.1rem; }
.coppia { display: grid; gap: 1.1rem; }
.errore { color: var(--errore); font-size: .9375rem; margin: .35rem 0 0; }
.errore::before { content: "Errore: "; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--errore); border-width: 2px; }
.riepilogo { border: 2px solid var(--errore); background: #FFF; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.riepilogo h3 { color: var(--errore); font-size: 1.1rem; font-weight: 500; margin-bottom: .5rem; }
.riepilogo ul { margin: 0; padding-left: 1.2rem; }
.riepilogo a { color: var(--errore); display: inline-block; padding: .6rem 0; line-height: 1.3; }

.scheda-tipo { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid var(--bordo-campo); background: #fff; margin: 0 0 .75rem; font-weight: 400; cursor: pointer; }
.scheda-tipo input { margin: .3rem 0 0; width: 1.35rem; height: 1.35rem; accent-color: var(--inchiostro); flex: none; }
.scheda-tipo strong { display: block; font-weight: 500; }
.scheda-tipo small { display: block; color: var(--inchiostro-tenue); font-size: .9375rem; }
.scheda-tipo:has(input:checked) { border-color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }

.scelta { border-left: 3px solid var(--oro); padding: .1rem 0 .1rem 1rem; margin: 0 0 1.4rem; }
.scelta-titolo { font-weight: 500; margin: 0 0 .6rem; }
.giorno-testo, .aiuto-campo { font-size: .9375rem; color: var(--inchiostro-tenue); margin: .3rem 0 0; }
.giorno-testo { min-height: 1.4em; }
.giorno-testo::first-letter { text-transform: uppercase; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.informativa { font-size: .875rem; color: var(--inchiostro-tenue); margin: 1rem 0 0; }
.esito { border: 2px solid var(--inchiostro); background: #fff; padding: 1.5rem 1.25rem; margin-top: 2rem; }
.esito h3 { font-size: 2rem; font-weight: 500; }
.esito ul { padding-left: 1.2rem; margin: 0 0 1rem; }
[hidden] { display: none !important; }

/* ── Finestra con il modulo: si apre solo con il bottone ── */
.finestra { padding: 0; border: 0; background: var(--crema); color: var(--inchiostro); width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
.finestra::backdrop { background: rgba(3, 12, 22, .78); }
.finestra a { color: var(--oro-scuro); }
.finestra :focus-visible { outline-color: var(--inchiostro); }
.finestra .bottone { color: #05131F; }
.finestra .modulo { margin-top: 0; }
.finestra-corpo { display: flex; flex-direction: column; height: 100%; max-height: 100%; }
.finestra-testata { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; background: var(--crema); border-bottom: 1px solid rgba(6, 24, 43, .18); }
.finestra-testata h2 { margin: 0; font-size: 1.7rem; color: var(--inchiostro); }
.chiudi { flex: none; min-height: 3rem; min-width: 3rem; padding: 0 1rem; background: transparent; border: 1.5px solid var(--inchiostro); color: var(--inchiostro); font: 500 1rem var(--corpo); border-radius: 2px; cursor: pointer; }
.finestra-contenuto { flex: 1 1 auto; overflow-y: auto; padding: 1.5rem 1.25rem 2rem; -webkit-overflow-scrolling: touch; }
.finestra[open]:not(:modal) { position: static; width: auto; height: auto; max-height: none; margin: 2rem auto; max-width: 42rem; }
/* Con la finestra aperta la pagina sotto non scorre: il blocco dipende solo dallo stato della finestra, quindi non può restare incastrato. */
html:has(.finestra:modal) { overflow: hidden; }
html:has(.finestra:modal) .barra-cta { display: none; }

/* ── Barra fissa su telefono ── */
.barra-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--notte); border-top: 1px solid rgba(195, 154, 91, .45); }
.barra-cta .bottone { width: 100%; max-width: 40rem; margin: 0 auto; display: flex; }
@media (min-width: 720px) { .barra-cta { display: none !important; } }

/* ── Piè di pagina ── */
.piede { padding: 2.5rem 0 3rem; font-size: .9375rem; color: var(--testo-tenue); border-top: 1px solid rgba(195, 154, 91, .25); }
.piede p { margin: 0 0 .6rem; }
.piede .oro { color: var(--oro-chiaro); }

/* ── Pagine semplici (privacy, grazie, 404, errore) ── */
.pagina-semplice { background: var(--crema); color: var(--inchiostro); }
.pagina-semplice .contenitore { padding-top: 3rem; padding-bottom: 4rem; }
.pagina-semplice h1 { color: var(--inchiostro); font-size: clamp(1.8rem, 6vw, 2.4rem); }
.pagina-semplice h2 { color: var(--inchiostro); font-size: 1.35rem; margin-top: 2rem; }
.pagina-semplice a { color: var(--oro-scuro); }
.pagina-semplice a.bottone { color: #05131F; }
.pagina-semplice :focus-visible { outline-color: var(--inchiostro); }

@media (min-width: 720px) {
  body { font-size: 1.125rem; }
  .blocco { padding: 4.5rem 0; }
  .coppia { grid-template-columns: 1fr 1fr; }
  .livelli { gap: 1rem; }
  .livello { padding: 1.4rem 1rem 1.5rem; }
  .livello .nome { font-size: 1.0625rem; }
  .livello .prezzo { font-size: 3.2rem; }
  .livello .prezzo .da, .livello .persona, .livello .nota { font-size: 1rem; }
  .finestra:modal { width: min(42rem, 94vw); height: auto; max-height: 92vh; margin: auto; }
  .finestra:modal .finestra-corpo { max-height: 92vh; }
  .finestra-contenuto { padding: 1.75rem 2rem 2.25rem; }
}

/* ── Profondità: sfondi alternati, anello del logo, un solo momento di movimento ── */
html { color-scheme: dark; }
.finestra, .chiaro, .pagina-semplice { color-scheme: light; }
#date { background: var(--notte-2); }
#date { border-block: 1px solid rgba(195, 154, 91, .18); }
/* L'anello con il punto, come l'insegna "O." del locale: discreto, dietro la richiesta. */
#richiesta { background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='190' cy='200' r='150' fill='none' stroke='%237A5620' stroke-opacity='.15' stroke-width='22'/%3E%3Ccircle cx='345' cy='345' r='22' fill='%237A5620' fill-opacity='.15'/%3E%3C/svg%3E") no-repeat right -7rem bottom -8rem / 24rem; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  /* Un solo momento, all'apertura: la foto si assesta e il testo sale una riga dopo l'altra. */
  @keyframes foto-apre { from { transform: scale(1.06); } to { transform: scale(1); } }
  @keyframes testo-sale { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero-foto img { transform-origin: 50% 40%; animation: foto-apre 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-testo > * { animation: testo-sale .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-testo > :nth-child(2) { animation-delay: .1s; }
  .hero-testo > :nth-child(3) { animation-delay: .2s; }
  .hero-testo > :nth-child(4) { animation-delay: .3s; }
  .hero-testo > :nth-child(5) { animation-delay: .4s; }
  .hero-testo > :nth-child(6) { animation-delay: .5s; }
  /* Risposte a un gesto: il bottone e la finestra. */
  .bottone { transition: background-color .2s ease, transform .15s ease; }
  .chiudi { transition: background-color .2s ease, color .2s ease; }
  .finestra[open] { animation: finestra-apre .22s ease-out; }
  @keyframes finestra-apre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ── Dettagli di tocco e di passaggio ── */
a, button, summary, label, select, input { touch-action: manipulation; }
body { -webkit-tap-highlight-color: rgba(195, 154, 91, .25); }
.finestra-contenuto { overscroll-behavior: contain; }
a:not(.bottone):hover { color: #fff; }
.chiaro a:not(.bottone):hover, .finestra a:not(.bottone):hover { color: var(--inchiostro); }
.bottone:active { transform: translateY(1px); }
.chiudi:hover { background: var(--inchiostro); color: var(--crema); }
.domande summary:hover { color: var(--oro-scuro); }
.scheda-tipo:hover { border-color: var(--inchiostro); }

/* ── Carosello di foto (fermo, con le frecce, infinito) + video ── */
.serate { padding: 0 0 3.25rem; }
.nastro-quadro { position: relative; }
.nastro { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; }
.nastro.attivo { scrollbar-width: none; }
.nastro.attivo::-webkit-scrollbar { display: none; }
.nastro:focus-visible { outline-offset: -3px; }
.nastro-pista { display: flex; gap: .75rem; width: max-content; margin: 0; padding: 0; list-style: none; }
.nastro-pista li { flex: 0 0 auto; width: 13rem; aspect-ratio: 3 / 4; background: var(--notte-2); scroll-snap-align: center; }
.nastro-pista img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) { .nastro-pista li { width: 17rem; } }
.freccia { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: -1.5rem; padding: 0; border: 1.5px solid var(--oro); border-radius: 50%; background: rgba(6, 24, 43, .8); color: var(--oro-chiaro); cursor: pointer; }
.freccia::before { content: ""; width: .7rem; height: .7rem; border: solid currentColor; border-width: 0 2px 2px 0; }
.freccia-prec { left: .75rem; }
.freccia-prec::before { transform: translateX(2px) rotate(135deg); }
.freccia-succ { right: .75rem; }
.freccia-succ::before { transform: translateX(-2px) rotate(-45deg); }
.freccia:hover { background: var(--oro); color: #05131F; }
.freccia:active { transform: scale(.96); }
.video { margin: 1.5rem auto 0; max-width: 18rem; }
.video video { width: 100%; height: auto; display: block; background: var(--notte-2); }
.video-ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--testo-tenue); font-size: .9375rem; aspect-ratio: 9 / 16; background: linear-gradient(135deg, #0B2237, #10304D); border: 1px dashed rgba(195, 154, 91, .55); }
.video-ph::before { content: ""; position: absolute; left: 50%; top: 42%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border: 1.5px solid var(--oro); border-radius: 50%; }
.video-ph::after { content: ""; position: absolute; left: 50%; top: 42%; margin: -.6rem 0 0 -.3rem; border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent var(--oro); }
.video-ph span { position: absolute; left: 0; right: 0; top: 56%; padding: 0 1rem; }

/* ── Oceano in numeri ── */
.contenitore.largo { max-width: 68rem; }
.numeri { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.numeri li { padding: 1.75rem 0; text-align: center; }
.numeri li + li { border-top: 1px solid rgba(6, 24, 43, .18); }
.numeri p { margin: 0; }
.numeri .pre { font-size: 1rem; font-weight: 500; color: var(--oro-scuro); }
.numeri .cifra { font-family: var(--titoli); font-weight: 500; font-size: clamp(3.6rem, 16vw, 5.4rem); line-height: 1; color: var(--inchiostro); font-variant-numeric: lining-nums; }
.numeri .unita { font-size: .45em; font-weight: 500; }
.numeri .dida { margin-top: .6rem; font-size: 1.0625rem; color: var(--inchiostro-tenue); text-wrap: balance; }
@media (min-width: 720px) {
  .numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeri li { padding: 1rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-start; }
  .numeri li + li { border-top: 0; border-left: 1px solid rgba(6, 24, 43, .18); }
}