:root { --testata: 64px; --gut: clamp(16px, 4vw, 32px); }
/* Pagina Estia del sito di dea.html: l'apertura a dot, poi il piè di pagina. Header e footer sono quelli della home
   (menu.css, footer.css, madein.css). Il fondo dell'apertura è nero come la reference halftone (#000, fuori palette:
   scostamento da registrare, vedi hero-dots/README.md). Le classi hero__* sono quelle che il motore cerca. */
body.est { background: var(--night); color: var(--white); font-family: var(--ens-font-brand); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.est-hero {
  --apertura-fondo: #000;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: clip;
  background: var(--apertura-fondo);
  color: var(--ens-color-neutral-white);
}
.est-hero .hero__stage { position: absolute; inset: 0; contain: strict; background: var(--apertura-fondo); }
.est-hero .hero__dots { position: absolute; inset: 0; display: block; }
.est-hero .hero__suono { /* il crepitio: spento, piccolo, in basso a destra; sparisce quando la fiamma non c'è più */
  position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2;
  margin: 0; padding: 10px 2px; border: 0; background: none; color: var(--ens-color-neutral-white);
  font: 400 11px / 1 var(--ens-font-brand); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; opacity: .7; transition: opacity .6s;
}
.est-hero .hero__suono:hover, .est-hero .hero__suono:focus-visible { opacity: 1; }
.est-hero .hero__suono[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; }
.est-hero.is-finita .hero__suono { opacity: 0; pointer-events: none; }

/* Il disturbo del fondo nero: una grana fine e lieve, sotto i dot (che restano nitidi), che trema piano a scatti come
   quella del vetro della home (dea.html). Bianco neutro a bassa opacità; la grana non si anima con Riduci movimento. */
.est-hero .hero__grana {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: .14;
  animation: est-disturbo .9s steps(1) infinite;
}
@keyframes est-disturbo {
  0% { background-position: 0 0; }
  20% { background-position: -53px 31px; }
  40% { background-position: 37px -71px; }
  60% { background-position: -89px -23px; }
  80% { background-position: 61px 83px; }
}
@media (prefers-reduced-motion: reduce) { .est-hero .hero__grana { animation: none; } }

/* La prima hero vera, dopo l'apertura: a sinistra logo, titolo, sottotitolo; a destra vuoto (per ora). Compare con una dissolvenza semplice
   quando i dot hanno lasciato il quadro. Il logo SVG resta fermo e intero: nessuna animazione sua. */
.est-hero__testo {
  position: absolute; inset: 0; z-index: 1;
  width: min(100%, var(--ens-layout-container-max)); margin-inline: auto;
  padding-block: calc(var(--testata, 4rem) + var(--ens-space-8)) var(--ens-space-8);
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  pointer-events: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.est-hero.is-testo .est-hero__testo { opacity: 1; transform: none; pointer-events: auto; }
.est-hero__testo > * { max-width: min(42%, 38rem); }
.est-hero__logo { display: block; width: clamp(7.5rem, 14vw, 12rem); height: auto; margin: 0; }
.est-hero__titolo {
  margin: var(--ens-space-8) 0 0;
  font: 400 clamp(2.2rem, calc((min(100vw, var(--ens-layout-container-max)) - 48px) * 0.04), 4.4rem) / 1.04 var(--ens-font-brand);
  letter-spacing: -.035em; color: var(--ens-color-neutral-white);
}
.est-hero b { font-weight: 700; } /* Book e Bold sono i soli pesi di Biennale licenziati (manuale cap. 4): la gerarchia si fa mescolandoli */
.est-hero__titolo b { letter-spacing: -.045em; }
.est-hero__sotto b { color: var(--ens-color-neutral-white); }
.est-hero__sotto {
  margin: var(--ens-space-6) 0 0;
  font: 400 clamp(1.05rem, 1.6vw, 1.25rem) / 1.5 var(--ens-font-brand);
  color: var(--ens-color-tint-oxford-blue-20);
}
/* Telefono in verticale e schermi stretti: il blocco scende in basso, largo quanto lo schermo, a sinistra. */
@media (orientation: portrait), (max-width: 759px) {
  .est-hero__testo { justify-content: flex-end; padding-block: calc(var(--testata, 4rem) + var(--ens-space-6)) calc(var(--ens-space-10) + env(safe-area-inset-bottom)); }
  .est-hero__testo > * { max-width: min(100%, 36rem); }
  .est-hero__titolo { font-size: clamp(2rem, 8.6vw, 3.4rem); margin-top: var(--ens-space-6); }
  .est-hero__sotto { font-size: 1rem; }
}
/* Telefono in orizzontale (poca altezza): tutto più compatto. */
@media (orientation: landscape) and (max-height: 520px) {
  .est-hero__testo { padding-block: calc(var(--testata, 4rem) + var(--ens-space-1)) var(--ens-space-2); }
  .est-hero__logo { width: 5.5rem; }
  .est-hero__titolo { font-size: clamp(1.4rem, 5.4vh, 2rem); margin-top: var(--ens-space-3); }
  .est-hero__sotto { font-size: .8rem; line-height: 1.35; margin-top: var(--ens-space-2); }
}
@media (prefers-reduced-motion: reduce) { .est-hero__testo { transition: none; transform: none; } }

/* «Richiedi una demo» nell'header della pagina Estia: prende lo stile della pagina nera, in coerenza con logo e titolo.
   Bianco pieno (neutral.white) con testo night (estia.night); al passaggio scende a platinum. Vale anche nel pannello su telefono.
   Il bottone standard del sito (blu pieno) resta quello delle altre pagine. */
body.est .menu .bottone--estia {
  background: var(--ens-color-neutral-white);
  color: var(--ens-color-estia-night);
  box-shadow: none;
}
@media (hover: hover) { body.est .menu .bottone--estia:hover { background: var(--ens-color-neutral-platinum); } }
body.est .menu .bottone--estia:focus-visible { outline: 2px solid var(--ens-color-neutral-white); outline-offset: 4px; }

.est-hero__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.est-hero__occhiello { font-size: 14px; color: var(--caldo); margin-top: 28px; }