/* =========================================================
   GALENE - Proposta C "Pagina unica", seconda versione
   Azzardo elegante: verde petrolio profondo (il mare in
   ombra), avorio, un filo di acquamarina come il riflesso
   dell'acqua calma. Nessun testo sopra le foto: le immagini
   stanno accanto o sotto a campi di colore pieni.
   Bodoni Moda per i titoli, Jost (il logotipo) per il testo.
   ========================================================= */
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/assets/fonts/jost-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --petrolio: #0F3431;        /* fondo principale */
  --petrolio-scuro: #0A2422;  /* piede e dettagli */
  --avorio: #F2EDE4;          /* fondo chiaro e testo su petrolio */
  --acqua: #9FCFC6;           /* accento: onda, bottoni, focus */
  --inchiostro: #10201E;      /* testo su avorio */
  --salvia: #4F625E;          /* testo secondario su avorio, 6:1 */
  --avorio-tenue: rgba(242, 237, 228, .78); /* testo secondario su petrolio, 9:1 */
  --filo-chiaro: rgba(242, 237, 228, .2);
  --filo-scuro: #D5CDBF;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --larghezza: 1200px;
  --margine: clamp(1.25rem, 4vw, 2.5rem);
  --testata: 4.5rem;

  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--testata); -webkit-text-size-adjust: 100%; background: var(--petrolio); }
body { background: var(--avorio); color: var(--inchiostro); font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 3px; }
.sezione--avorio :focus-visible, .pagina-testo :focus-visible { outline-color: var(--petrolio); }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--acqua); color: var(--petrolio); padding: .6rem 1rem; text-decoration: none; }
.salta:focus { top: 1rem; }

.colonna { width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.01em; }

/* ---------- Testata: sempre piena, leggibile su qualsiasi foto ---------- */
.testata { position: sticky; top: 0; z-index: 40; background: var(--petrolio); color: var(--avorio); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--filo-chiaro); }
.testata__barra { height: var(--testata); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-inline: var(--margine); }
.marchio { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marchio svg { width: 2rem; height: 2rem; color: var(--acqua); }
.marchio span { font-size: .95rem; font-weight: 400; text-transform: uppercase; letter-spacing: .42em; margin-right: -.42em; }
.menu { list-style: none; display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.menu a { text-decoration: none; font-size: .95rem; font-weight: 400; padding-block: .5rem; background: linear-gradient(var(--acqua), var(--acqua)) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
.menu a:hover { background-size: 100% 1px; }
@media (max-width: 599px) { .menu li:not(:last-child) { display: none; } }

/* ---------- Media: video con foto di riserva ---------- */
.video { position: relative; overflow: hidden; background: var(--petrolio-scuro) url('/assets/img/c-apertura.webp') center / cover no-repeat; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.video.pronto video { opacity: 1; }
.pausa { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.25rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(15,52,49,.55); color: var(--avorio); border: 1px solid rgba(242,237,228,.6); transition: background-color .2s ease; }
.pausa:hover { background: var(--petrolio); }
.pausa svg { width: .8rem; height: .9rem; fill: currentColor; }
.pausa .i-play, .video.fermo .pausa .i-pausa { display: none; }
.video.fermo .pausa .i-play { display: block; }

/* ---------- Apertura divisa ---------- */
.apertura { display: grid; background: var(--petrolio); color: var(--avorio); }
.apertura__media { min-height: 62svh; order: -1; }
.apertura__testo { padding: clamp(2.5rem, 7vw, 4rem) var(--margine) calc(5.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: center; }
.apertura h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em; max-width: 13ch; }
.onda { width: 9rem; height: 16px; margin: 1.8rem 0 1.4rem; }
.onda path { fill: none; stroke: var(--acqua); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.apertura p { max-width: 30rem; color: var(--avorio-tenue); font-size: clamp(1rem, 1.3vw, 1.12rem); }
.apertura .bottone { margin-top: 2.2rem; align-self: flex-start; }

/* ---------- Bottoni ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .85rem 1.9rem; font: 400 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid var(--acqua); background: var(--acqua); color: var(--petrolio); transition: background-color .25s ease, color .25s ease; }
.bottone:hover { background: transparent; color: var(--acqua); }

/* ---------- Sezioni ---------- */
.sezione { padding-block: clamp(5rem, 11vw, 8rem); }
.sezione--avorio { background: var(--avorio); color: var(--inchiostro); }
.sezione--petrolio { background: var(--petrolio); color: var(--avorio); }

.chi { display: grid; gap: 2rem; }
.chi h2 { max-width: 20ch; font-size: clamp(2rem, 4.6vw, 3.5rem); }
.chi__testo { display: grid; gap: 1rem; max-width: 36rem; color: var(--salvia); }

.servizi { list-style: none; display: grid; gap: 0 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.servizi li { padding-block: 1.8rem; border-top: 1px solid var(--filo-chiaro); }
.servizi h3 { font-size: 1.45rem; line-height: 1.2; }
.servizi p { color: var(--avorio-tenue); margin-top: .5rem; }

.luoghi { list-style: none; display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.luoghi__foto { aspect-ratio: 4 / 5; background-size: cover; background-position: center; background-color: var(--filo-scuro); }
.luoghi__foto--capitali { background-image: url('/assets/img/dove-capitali.webp'); }
.luoghi__foto--mare { background-image: url('/assets/img/dove-mare.webp'); }
.luoghi__foto--montagna { background-image: url('/assets/img/dove-montagna.webp'); }
.luoghi h3 { font-size: 1.45rem; line-height: 1.2; margin-top: 1.3rem; }
.luoghi p { color: var(--salvia); margin-top: .45rem; }

/* Fascia: la frase sta su un riquadro pieno che si sovrappone alla foto */
.fascia { background: var(--avorio); padding-bottom: clamp(3rem, 7vw, 5rem); }
.fascia__foto { height: 70svh; min-height: 22rem; background: var(--filo-scuro) url('/assets/img/c-fascia.webp') center 45% / cover no-repeat; }
.fascia__frase { position: relative; margin-top: -7rem; background: var(--petrolio); color: var(--avorio); padding: clamp(1.75rem, 4vw, 3rem); max-width: 34rem; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.18; }
.fascia__frase::before { content: ''; display: block; width: 3rem; height: 1px; background: var(--acqua); margin-bottom: 1.25rem; }

/* ---------- Contatti ---------- */
.contatti { display: grid; gap: 3rem; }
.contatti__intro p { color: var(--avorio-tenue); margin-top: 1.1rem; max-width: 24rem; }
.contatti__mail { display: inline-block; margin-top: 1.5rem; font-family: var(--serif); font-size: 1.25rem; text-decoration: none; color: var(--acqua); border-bottom: 1px solid rgba(159,207,198,.45); }
.contatti__mail:hover { border-color: var(--acqua); }
.modulo { display: grid; gap: 1.4rem; }
.modulo__riga { display: grid; gap: 1.4rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: .92rem; font-weight: 400; }
.campo input, .campo textarea { font: 300 1rem/1.5 var(--sans); color: var(--avorio); background: transparent; border: 0; border-bottom: 1px solid rgba(242,237,228,.45); border-radius: 0; padding: .6rem 0; width: 100%; }
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--acqua); padding-bottom: calc(.6rem - 1px); }
.consenso { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: var(--avorio-tenue); }
.consenso input { width: 1.1rem; height: 1.1rem; margin-top: .22rem; accent-color: var(--acqua); flex: none; }
.modulo__esito { min-height: 1.5em; font-size: .95rem; color: var(--acqua); }

/* ---------- Piede ---------- */
.piede { background: var(--petrolio-scuro); color: var(--avorio-tenue); padding-block: 2rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); font-size: .9rem; }
.piede__riga { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.piede ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--acqua); }

/* ---------- Pulsante musica ---------- */
.musica { position: fixed; z-index: 45; left: var(--margine); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; font: 400 .88rem/1 var(--sans); cursor: pointer; background: var(--acqua); color: var(--petrolio); border: 1px solid var(--acqua); box-shadow: 0 4px 18px rgba(10,36,34,.25); }
.musica__barre { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.musica__barre i { width: 2px; height: 3px; background: currentColor; }
.musica[aria-pressed="true"] .musica__barre i { animation: barra 1s ease-in-out infinite alternate; }
.musica[aria-pressed="true"] .musica__barre i:nth-child(2) { animation-delay: -.4s; }
.musica[aria-pressed="true"] .musica__barre i:nth-child(3) { animation-delay: -.7s; }
@keyframes barra { from { height: 3px; } to { height: 12px; } }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .apertura { grid-template-columns: 5fr 6fr; min-height: calc(100svh - var(--testata)); }
  .apertura__media { order: 0; min-height: 0; }
  .apertura__testo { padding: 4rem clamp(2.5rem, 5vw, 5rem) 6rem max(var(--margine), calc((100vw - var(--larghezza)) / 2)); }
  .chi { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: end; }
  .servizi { grid-template-columns: repeat(3, 1fr); }
  .luoghi { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .fascia__frase { margin-top: -10rem; }
  .contatti { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .modulo__riga { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .musica { bottom: 1.75rem; }
  .piede { padding-bottom: 2rem; }
  .piede__riga { padding-left: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .musica[aria-pressed="true"] .musica__barre i { animation: none; height: 9px; }
}

/* ---------- Pagina privacy ---------- */
.pagina-testo { background: var(--avorio); }
.legale { padding-top: 4rem; }
.legale .colonna { max-width: 46rem; }
.legale h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 1.5rem; }
.legale h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.legale p { color: var(--salvia); margin-top: .8rem; }
.legale p a { color: var(--petrolio); }
.legale__data { font-size: .9rem; margin-top: 2.5rem !important; }
.pagina-testo .piede { padding-bottom: 2rem; }
.pagina-testo .piede__riga { padding-left: 0; }
.pagina-testo .testata__barra { width: min(100%, calc(var(--larghezza) + 2 * var(--margine))); margin-inline: auto; }