/* ============================================================
   ALTURA — alturafilm.com
   Marchio Julius Sans One, testi in Archivo.
   Regola non negoziabile: l'oro è SEGNO E FILETTO, mai campitura.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/ibm-plex-mono-400-latin-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font/ibm-plex-mono-500-latin-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font/ibm-plex-mono-500-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-400-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-400-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-500-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-500-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-600-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(font/archivo-600-latin.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;
}

:root{
  --profondo:#08263F;
  --marino:#0E3A5B;
  --mare:#1C6591;
  --oro:#D9B26A;          /* su fondo scuro */
  --oro-scuro:#C08F3C;    /* su fondo chiaro */
  --avorio:#F4F1E8;
  --avorio-fioco:rgba(244,241,232,.66);
  --avorio-tenue:rgba(244,241,232,.16);

  --testo:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.5rem,5vw,6rem);
  --rail:clamp(0px,4vw,5.5rem);
  --misura:36rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--profondo);
  color:var(--avorio);
  font-family:var(--testo);
  font-size:clamp(1rem,.4vw + .92rem,1.0625rem);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--oro);color:var(--profondo)}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
}

/* ------------------------------------------------------------ ricorrenti */

.occhiello{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oro);
  margin:0;
}

/* ------------------------------------------------------------ TESTA + FILM
   Il film non ha niente sopra: né titoli, né tasti, né velature.
   Si vede intero, senza tagli, e si ascolta dai comandi del lettore.
   -------------------------------------------------------------------- */

.testa{
  display:flex;
  justify-content:center;
  padding:clamp(1.75rem,4vw,3rem) var(--gutter) clamp(1.25rem,3vw,2rem);
}
.testa__marchio{width:clamp(9.5rem,19vw,14rem);height:auto}

.film{
  background:#000;
  border-block:1px solid var(--avorio-tenue);
}

/* Rapporto originale, mai ritagliato: il film si deve vedere per intero.
   Su schermi bassi lo limito all'altezza della finestra. */
.film__video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  max-height:calc(100svh - 6rem);
  margin-inline:auto;
  background:#000;
  cursor:pointer;
}

/* --------------------------------------------------------------- INTRO */

.intro{
  padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(3.5rem,8vw,6rem);
  text-align:center;
  background:var(--profondo);
}

.intro__titolo{
  margin:1rem auto 0;
  max-width:22ch;
  font-weight:400;
  font-size:clamp(1.6rem,4.2vw,2.9rem);
  line-height:1.16;
  letter-spacing:-.004em;
  text-wrap:balance;
}

.intro__titolo em{
  display:block;
  font-style:normal;
  font-weight:400;
  color:var(--oro);
  font-size:.52em;
  line-height:1.35;
  letter-spacing:.02em;
  margin-top:.7em;
}

.intro__sommario{
  margin:1.4rem auto 0;
  max-width:var(--misura);
  color:var(--avorio-fioco);
}

.intro__azioni{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.9rem 1.6rem;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}

/* Il tasto dell'audio sta SOTTO il film, non sopra. */
.suono{
  display:inline-flex;align-items:center;gap:.7rem;
  background:transparent;
  border:1px solid var(--oro);
  color:var(--avorio);
  padding:.85rem 1.4rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .25s ease;
}
.suono:hover{background:rgba(217,178,106,.14)}
.suono__durata{color:var(--oro)}
.suono__icona{
  width:15px;height:12px;flex:0 0 auto;
  background:currentColor;
  clip-path:polygon(0 33%,28% 33%,58% 0,58% 100%,28% 67%,0 67%);
}
.suono[aria-pressed="true"] .suono__icona{opacity:.45}

.intro__giu{
  display:inline-flex;align-items:center;gap:.7rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--avorio-tenue);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--avorio);text-decoration:none;
  transition:gap .25s ease,border-color .25s ease;
}
.intro__giu:hover{gap:1.15rem;border-bottom-color:var(--oro)}

@media (max-width:33.99rem){
  .intro__azioni{flex-direction:column;gap:1rem}
  .suono,.intro__giu{width:100%;justify-content:center}
}

/* -------------------------------------------------------------- SERVIZI */

.servizi{
  padding:clamp(4rem,9vw,7.5rem) var(--gutter);
  background:var(--marino);
  border-top:1px solid var(--avorio-tenue);
}

.servizi__griglia{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:44rem){ .servizi__griglia{grid-template-columns:1fr 1fr} }
@media (min-width:70rem){ .servizi__griglia{grid-template-columns:repeat(4,1fr)} }
.servizi__griglia--una{grid-template-columns:1fr !important;max-width:52rem;gap:1.75rem}

.servizio{padding-top:1.1rem;border-top:1px solid var(--oro)}

.servizio__voce{
  margin:0 0 .6rem;
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--avorio);
}

.servizio__nota{margin:0;color:var(--avorio-fioco)}
.servizio__nota a{color:var(--avorio);text-decoration-color:var(--oro);text-underline-offset:3px}

.vincolo{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  padding-left:1.1rem;
  border-left:2px solid var(--oro);
  max-width:34rem;
  color:var(--avorio-fioco);
}

.pagina__titolo{
  margin:1rem 0 0;
  font-weight:400;
  font-size:clamp(1.85rem,3.8vw,2.6rem);
  line-height:1.2;
  letter-spacing:-.004em;
}

/* --------------------------------------------------- CONTATTI + MODULO
   Unico campo chiaro della pagina: qui l'oro passa alla taratura scura. */

.contatti{
  padding:clamp(4rem,9vw,7.5rem) var(--gutter);
  background:var(--avorio);
  color:var(--marino);
}
.contatti .occhiello{color:var(--oro-scuro)}

.contatti__griglia{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
  margin:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem);
}
@media (min-width:48rem){ .contatti__griglia{grid-template-columns:repeat(3,1fr)} }

.voce{padding-top:1.1rem;border-top:1px solid var(--oro-scuro)}
.voce__etichetta{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(14,58,91,.6);margin:0 0 .55rem;
}
.voce__valore{
  margin:0;
  font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.3;
  letter-spacing:-.01em;
}
.voce__valore a{
  text-decoration:none;
  background-image:linear-gradient(var(--oro-scuro),var(--oro-scuro));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .3s ease;
}
.voce__valore a:hover{background-size:100% 1px}
.voce__nota{margin:.5rem 0 0;font-size:.9375rem;color:rgba(14,58,91,.62)}

.modulo{
  background:#fff;
  border:1px solid rgba(192,143,60,.45);
  padding:clamp(1.5rem,3.2vw,2.5rem);
  max-width:46rem;
}

.modulo__titolo{
  margin:0 0 1.5rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro-scuro);
}

.campi{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:34rem){
  .campi{grid-template-columns:1fr 1fr}
  .campo--intero{grid-column:1/-1}
}

.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(14,58,91,.82);
}
.campo label .obb{color:var(--oro-scuro)}

.campo input,.campo select,.campo textarea{
  font-family:var(--testo);
  font-size:1rem;
  color:var(--marino);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(14,58,91,.28);
  padding:.45rem 0 .5rem;
  border-radius:0;
  transition:border-color .2s ease;
}
.campo select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--oro-scuro) 50%),
                   linear-gradient(135deg,var(--oro-scuro) 50%,transparent 50%);
  background-position:right .8rem center,right .45rem center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.8rem;
}
.campo textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom-color:var(--oro-scuro);outline:0}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--oro-scuro);outline-offset:4px;
}

.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consenso{
  display:flex;gap:.7rem;align-items:flex-start;margin-top:1.6rem;
  font-size:.875rem;line-height:1.5;color:rgba(14,58,91,.78);
}
.consenso input{margin:.2rem 0 0;accent-color:var(--marino);width:1rem;height:1rem;flex:0 0 auto}
.consenso a{color:var(--marino);text-decoration-color:var(--oro-scuro);text-underline-offset:3px}

.invia{
  margin-top:1.75rem;width:100%;
  padding:1.05rem 1.5rem;
  background:var(--marino);color:var(--avorio);
  border:1px solid var(--marino);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background-color .25s ease;
}
.invia:hover{background:var(--profondo)}
.invia[disabled]{opacity:.55;cursor:progress}

.modulo__coda{margin:1rem 0 0;font-size:.8125rem;color:rgba(14,58,91,.6)}

.esito{
  margin-top:1.25rem;padding:.9rem 1.1rem;font-size:.9375rem;
  border-left:2px solid var(--oro-scuro);background:rgba(192,143,60,.1);
}
.esito[hidden]{display:none}
.esito--errore{border-left-color:#9B2C2C;background:rgba(155,44,44,.08);color:#7A2222}

.grazie{text-align:left;max-width:34rem}
.grazie__titolo{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;line-height:1.2;margin:0 0 .9rem;
}
.grazie__titolo em{font-style:normal;color:var(--oro-scuro)}

/* ---------------------------------------------------- LETTORE DEL FILM */

.lettore{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(4,24,38,.94);
}
.lettore[hidden]{display:none}
.lettore__cornice{width:min(100%,72rem);aspect-ratio:16/9;border:1px solid var(--avorio-tenue)}
.lettore__cornice iframe,
.lettore__cornice video{width:100%;height:100%;border:0;display:block;background:#000}
.lettore__chiudi{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  background:transparent;border:1px solid var(--avorio-tenue);color:var(--avorio);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem 1rem;cursor:pointer;
}
.lettore__chiudi:hover{border-color:var(--oro)}

/* ------------------------------------------------------------- CORTESIA */

body.cortesia{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(2rem,6vw,4rem) var(--gutter);
  background:
    radial-gradient(120% 80% at 50% 0%, #1C6591 0%, rgba(28,101,145,0) 60%),
    linear-gradient(178deg,#0E3A5B 0%,#08263F 60%,#041826 100%);
}
.cortesia__corpo{max-width:34rem;text-align:center}
.cortesia__marchio{width:clamp(12rem,32vw,20rem);height:auto;margin:0 auto clamp(2rem,5vw,3rem)}
.cortesia .occhiello{margin-bottom:1.5rem}
.cortesia__testo{margin:0 0 2.25rem;color:var(--avorio-fioco);font-size:1.0625rem}
.cortesia__tasto{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.6rem;
  border:1px solid var(--oro);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  transition:gap .25s ease,background-color .25s ease;
}
.cortesia__tasto:hover{gap:1.3rem;background:rgba(217,178,106,.08)}
.cortesia__coda{
  margin:clamp(2.5rem,6vw,3.5rem) 0 0;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--avorio-fioco);
}
.cortesia__coda a{text-decoration:none;border-bottom:1px solid var(--avorio-tenue);padding-bottom:2px}
.cortesia__coda a:hover{border-bottom-color:var(--oro)}

/* ----------------------------------------------------------------- PIEDE */

.piede{
  padding:clamp(2.5rem,5vw,4rem) var(--gutter);
  border-top:1px solid var(--avorio-tenue);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--avorio-fioco);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between;
}
.piede a{text-decoration:none;border-bottom:1px solid var(--avorio-tenue);padding-bottom:2px}
.piede a:hover{border-bottom-color:var(--oro)}
.piede__marchio{width:2.4rem;height:auto;opacity:.8}

/* ------------------------------------------------------------- ingresso */

[data-sale]{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s cubic-bezier(.2,.6,.25,1),transform .9s cubic-bezier(.2,.6,.25,1);
}
[data-sale].e-salito{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-sale]{opacity:1;transform:none}
}