/* DOLOMITESCONNECT - Reset, typography, layout base */


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--overnav-height) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .035em;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.35;
  letter-spacing: .04em;
  margin: 0 0 .6em;
  color: var(--text-primary);
  font-weight: 900;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3, h4 { font-size: 1.2rem; font-weight: 800; }

p { font-weight: 400; line-height: 1.8; letter-spacing: .035em; color: var(--text-secondary); margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

/* -- Evidenziatore nei TITOLI: la frase chiave è evidenziata sempre, di
      default, marcatore pieno senza bisogno di hover. -- */
h1 .text-highlight, h2 .text-highlight, h3 .text-highlight {
  background-image: linear-gradient(100deg, var(--clay-yellow) 0%, var(--clay-yellow) 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 40%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* -- Evidenziatore nei PARAGRAFI: dinamico, ma per FRASE intera (dal punto
      precedente al punto successivo), non per singola parola. Il raggruppamento
      per frase e l'aggiunta/rimozione di .sentence-hover a tutte le parole
      della frase avviene in text-reveal.js (SplitText crea .reveal-word). -- */
p .reveal-word {
  background-image: linear-gradient(100deg, var(--clay-yellow) 0%, var(--clay-yellow) 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 40%;
  transition: background-size .2s ease;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
p .reveal-word.sentence-hover {
  background-size: 100% 40%;
}

.container, .section-block__inner, .services-grid__inner, .contact-page__inner {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

/* -- Tag icona+testo: sostituisce il vecchio badge "eyebrow" (pillola con
      icona minuscola) con un'icona grande affiancata al testo. -- */
.icon-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--clay-purple);
  margin-bottom: 18px;
}
.icon-tag i { font-size: 1.9rem; line-height: 1; }
.icon-tag--on-color { color: #fff; }

/* -- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: 15px 28px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }

.btn--clay {
  color: #fff;
  box-shadow: 8px 8px 18px var(--shadow-dark-strong), -6px -6px 14px var(--shadow-light);
}

/* -- Sfumatura unica (stessa di .steps-timeline__icon): usata da tutti i
      bottoni "primari" del sito (navbar, hero, pre-hero, CTA, ecc). -- */
.btn--gradient {
  background: linear-gradient(145deg, var(--clay-yellow), var(--clay-purple));
  color: #fff;
  box-shadow: 6px 6px 14px var(--shadow-dark-strong), -5px -5px 12px var(--shadow-light), inset 0 2px 4px rgba(255, 255, 255, .35);
}

/* -- Varianti claymorphism monocromatiche (stessa qualita' di .btn--gradient
      ma un solo colore, con sfumatura chiaro->scuro per il volume) -- */
.btn--yellow {
  background: linear-gradient(145deg, #FFD766 0%, var(--clay-yellow) 55%, #E6A200 100%);
  color: #4A3300;
  box-shadow: 6px 6px 14px var(--shadow-dark-strong), -5px -5px 12px var(--shadow-light), inset 0 2px 4px rgba(255, 255, 255, .5);
}
.btn--purple {
  background: linear-gradient(145deg, #9B72E8 0%, var(--clay-purple) 55%, #52308F 100%);
  color: #fff;
  box-shadow: 6px 6px 14px var(--shadow-dark-strong), -5px -5px 12px var(--shadow-light), inset 0 2px 4px rgba(255, 255, 255, .35);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

/* -- Sezioni generiche --------------------------------------------------- */
.section-block { padding: 90px 0; overflow: hidden; }
.section-block__inner { max-width: 860px; position: relative; z-index: 1; }
/* Solo il testo diretto (titolo/paragrafo) e' centrato: non tocca contenuti
   annidati come griglie di card (es. .zone-grid in zone.php). */
.section-block__inner > h2,
.section-block__inner > p { text-align: center; }
.section-block h2 { margin-bottom: .5em; }

/* -- Reveal on scroll ----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* -- Breakpoints helpers --------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --container-width: 100%; }
}
@media (max-width: 768px) {
  .section-block { padding: 60px 0; }
}