/* ==========================================================================
   ESTRIA — Base: reset, layout, tipografia responsive
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 19.5px;
  letter-spacing: 0.03em;
  color: var(--black);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Layout ------------------------------------------------------------------ */

.container {
  padding-inline: 30px;
}

/* Sezioni: sfondi ricorrenti */
.section--black {
  background: var(--black);
  color: var(--grigio-3);
}

.section--gray {
  background: var(--grigio-2);
  color: var(--black);
}

/* Icona colorabile via mask (gli SVG esportati sono neri) */
.icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.icon--dx { --icon: url("../assets/icons/icon-dx.svg"); }
.icon--sx { --icon: url("../assets/icons/icon-sx.svg"); }
.icon--up { --icon: url("../assets/icons/icon-up.svg"); }
.icon--down { --icon: url("../assets/icons/icon-down.svg"); }
.icon--go { --icon: url("../assets/icons/icon-go.svg"); }
.icon--plus { --icon: url("../assets/icons/icon-plus.svg"); }
.icon--minus { --icon: url("../assets/icons/icon-minus.svg"); }
.icon--close { --icon: url("../assets/icons/icon-close.svg"); }
.icon--menu { --icon: url("../assets/icons/icon-menu.svg"); }
.icon--tempo { --icon: url("../assets/icons/icon-tempo.svg"); }
.icon--doc { --icon: url("../assets/icons/icon-doc.svg"); }
.icon--benefit { --icon: url("../assets/icons/icon-benefit.svg"); }
.icon--tool { --icon: url("../assets/icons/icon-tool.svg"); }
.icon--tool-2 { --icon: url("../assets/icons/icon-tool-2.svg"); }
.icon--web { --icon: url("../assets/icons/icon-web.svg"); }
.icon--video { --icon: url("../assets/icons/icon-video.svg"); }
.icon--case { --icon: url("../assets/icons/icon-case.svg"); }
.icon--espandi { --icon: url("../assets/icons/icon-espandi.svg"); }
.icon--search { --icon: url("../assets/icons/icon-search.svg"); }
.icon--cuore { --icon: url("../assets/icons/icon-cuore.svg"); }
.icon--infinito { --icon: url("../assets/icons/icon-infinito.svg"); }
.icon--errore { --icon: url("../assets/icons/icon-errore.svg"); }
.icon--inventario { --icon: url("../assets/icons/icon-inventario.svg"); }
.icon--appuntamento { --icon: url("../assets/icons/icon-appuntamento.svg"); }
.icon--cash { --icon: url("../assets/icons/icon-cash.svg"); }

/* Tipografia responsive ----------------------------------------------------
   Condizione "mobile" del sito, ripetuta identica in tutti i CSS (grep-abile):
   larghezza ≤1024 (tablet in portrait, finestre strette) OPPURE input primario
   touch fino a 1400 (iPad/Surface in landscape: 1180–1368px). I laptop, anche
   touch-screen, dichiarano hover+pointer fine e restano desktop.
   Debug 07/2026-6: prima era max-width: 767px e i tablet vedevano il desktop. */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .container {
    padding-inline: 15px;
  }

  .t-1 {
    font-size: 56px;
    line-height: 62px;
  }

  .t-2 {
    font-size: 40px;
    line-height: 44px;
  }

  .t-3 {
    font-size: 28px;
    line-height: 32px;
  }
}