@font-face{font-family:"Armata";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/armata-latin.woff2") format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/barlow-semi-condensed-latin-400.woff2") format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/barlow-semi-condensed-latin-700.woff2") format("woff2");}
:root {
  /* === Colori (nomi semantici) === */
  --color-fg:        rgb(36, 36, 36);    /* testo principale            (1685x) */
  --color-bg:        rgb(255, 255, 255); /* sfondo pagina               (830x)  */
  --color-accent:    #646830;   /* rosso brand / CTA           (90x)   */
  --color-bg-alt:    rgb(247, 248, 251); /* grigio chiaro alternato     (88x)   */
  --color-dark:      rgb(30, 30, 33);    /* barre scure / footer        (47x)   */
  --color-overlay:   rgba(0, 0, 0, 0.4); /* velo sopra le immagini      (2x)    */

  /* derivati utili */
  --color-accent-dark: #525527;
  --color-fg-muted:    rgba(36, 36, 36, 0.72);
  --color-on-dark:     rgba(255, 255, 255, 0.86);
  --color-on-dark-mut: rgba(255, 255, 255, 0.6);
  --color-border:      rgba(36, 36, 36, 0.12);

  /* === Tipografia === */
  --font-base: "Armata", Arial, Helvetica, sans-serif;
  --font-head: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --text-body: 16px;
  --weight-normal: 400;
  --weight-bold: 700;
  --tracking-body: -0.6px;
  --tracking-head: 0.5px;

  /* scala tipografica (ricostruita dai computed styles) */
  --text-h1: clamp(2rem, 4.2vw, 3.1rem);
  --text-h2: clamp(1.5rem, 2.6vw, 2.05rem);
  --text-h3: 1.45rem;
  --text-h4: 1.2rem;
  --leading: 1.7;

  /* === Spaziature === */
  --space-section: 64px;   /* padding verticale di sezione */
  --space-gutter:  80px;   /* margine laterale del contenitore (margin 0 80px) */
  --container:     1180px; /* larghezza massima del contenuto */
  --gap:           28px;

  /* === Forme === */
  --radius: 5px;
  --radius-lg: 10px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* =========================================================================
   Elettrodomestici Ok — clone deterministico
   Design system ricostruito dai computed styles della cattura.
   ========================================================================= */
/* font originali del sito (Google Fonts): Armata per il body,
   Barlow Semi Condensed 400/700 per i titoli */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-body);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading);
  color: var(--color-fg);
  background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em; line-height: 1.2;
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-head);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-accent);
  color: #fff;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 24px;
}
.brand { color: #fff; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.brand:hover { text-decoration: none; opacity: .9; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav > a, .nav__item > a {
  color: #fff; text-transform: uppercase; font-size: .82rem; letter-spacing: .06em;
  white-space: nowrap; padding: 8px 0;
}
.nav > a:hover, .nav__item > a:hover { text-decoration: none; opacity: .82; }
.nav__item { position: relative; }
.nav__item > a::after { content: "▾"; margin-left: 6px; font-size: .7em; }
.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; min-width: 230px; padding: 8px 0; border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transition: .15s; list-style: none; margin: 6px 0 0;
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; }
.nav__menu a {
  display: block; padding: 9px 18px; color: var(--color-fg);
  text-transform: none; letter-spacing: 0; font-size: .9rem;
}
.nav__menu a:hover { background: var(--color-bg-alt); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--color-dark); color: #fff; }
.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  max-width: var(--container); margin-inline: auto;
}
.hero__panel { padding: 60px 40px 60px 24px; display: flex; flex-direction: column; justify-content: center; }
.hero__panel h1 { font-size: var(--text-h1); text-transform: uppercase; letter-spacing: 1px; }
.hero__sub { color: var(--color-on-dark); max-width: 46ch; }
.hero__media { background-size: cover; background-position: center; min-height: 340px; }
.hero__rating {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); padding: 8px 14px; border-radius: var(--radius); width: max-content;
}
.hero__rating img { height: 22px; }
.hero__rating .stars { color: #ffb400; letter-spacing: 2px; }
.hero__rating small { color: var(--color-on-dark); text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; }

/* ---------- Call bar ---------- */
.callbar { background: var(--color-dark); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.callbar__inner {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 30px;
  padding-block: 22px;
}
.callbar__label { text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; color: var(--color-on-dark); max-width: 28ch; }
.callbar__num { display: flex; flex-direction: column; color: #fff; line-height: 1.25; }
.callbar__num span { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-mut); }
.callbar__num strong { font-size: 1.6rem; font-weight: 400; letter-spacing: .02em; }
.callbar__num:hover { text-decoration: none; color: #fff; }
.callbar__icon { width: 30px; height: 30px; opacity: .85; }

/* ---------- Sezioni generiche ---------- */
.section { padding-block: var(--space-section); }
.section--white { background: var(--color-bg); }
.section--alt   { background: var(--color-bg-alt); }
.section--dark  { background: var(--color-dark); color: #fff; }
.section--accent{ background: var(--color-accent); color: #fff; }
.section h2 { font-size: var(--text-h2); text-transform: uppercase; }
.section--accent h2, .section--accent h3, .section--accent h4 { color: #fff; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.lead h2, .lead h3, .lead h4 { text-transform: uppercase; }
.lead p { color: var(--color-fg-muted); }
.section--accent .lead p, .section--dark .lead p { color: var(--color-on-dark); }

/* feature image + testo */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature__media img { width: 100%; border-radius: var(--radius); }
.feature--accent { color: #fff; }
.feature--accent h2 { color: #fff; }
.feature--accent p { color: var(--color-on-dark); }
.feature--accent a { color: #fff; text-decoration: underline; }

/* card row (3 colonne con divisori) */
.cards { display: grid; gap: 0; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card { padding: 14px 40px; text-align: center; }
.cards--3 .card + .card, .cards--2 .card + .card { border-left: 1px solid var(--color-border); }
.section--accent .cards--3 .card + .card,
.section--accent .cards--2 .card + .card { border-left-color: rgba(255,255,255,.25); }
.card h3, .card h4 { text-transform: uppercase; }
.card--icon h4 { color: var(--color-accent); }
.card__icon { width: auto; height: 74px; object-fit: contain; margin: 0 auto 18px; }
.card p { color: var(--color-fg-muted); }
.section--accent .card p { color: rgba(255,255,255,.9); }
.section--accent .card h3, .section--accent .card h4 { color: #fff; }

/* due colonne testo con divisore */
.textcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.textcols > div { padding: 0 40px; }
.textcols > div + div { border-left: 1px solid var(--color-border); }
.textcols h4, .textcols h5 { font-size: var(--text-h4); text-transform: uppercase; }
.textcols p { color: var(--color-fg-muted); }

/* griglia marchi */
.brands h2 { text-align: center; color: #fff; margin-bottom: 36px; }
.brand-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.brand-grid a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 54px; padding: 8px; color: #fff; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: .05em; font-size: .82rem;
}
.brand-grid a:hover { background: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }

/* CTA finale a due box */
.cta2 { display: grid; grid-template-columns: 1fr 1fr; }
.cta2 > div { padding: 56px 48px; }
.cta2 > div:first-child { background: var(--color-accent); }
.cta2 > div:last-child  { background: var(--color-accent-dark); }
.cta2 h2 { color: #fff; font-size: 1.5rem; }
.cta2 p { color: rgba(255,255,255,.9); }

/* articolo legale */
.article { max-width: 920px; }
.article h2 { font-size: 1.3rem; margin-top: 1.6em; }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--color-fg-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: var(--color-on-dark); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-block: 56px; }
.footer-cols h3 { color: #fff; text-transform: uppercase; font-size: .95rem; }
.footer-cols a { color: var(--color-on-dark); }
.footer-cols a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px; font-size: .8rem; color: var(--color-on-dark-mut); text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid, .cols-2, .feature, .textcols, .cta2 { grid-template-columns: 1fr; }
  .hero__media { min-height: 240px; order: -1; }
  .cards--3, .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .cards .card + .card, .textcols > div + div { border-left: 0; border-top: 1px solid var(--color-border); }
  .callbar__inner { grid-template-columns: 1fr; gap: 16px; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--color-accent); padding: 12px 24px; gap: 6px; }
  .nav.open { display: flex; }
  .nav__menu { position: static; transform: none; box-shadow: none; opacity: 1; visibility: visible; display: none; background: rgba(0,0,0,.15); }
  .nav__item:hover .nav__menu { display: block; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .cards--3, .brand-grid, .footer-cols { grid-template-columns: 1fr; }
}

/* CTA e-mail nel footer (nessun indirizzo esplicito) */
.footer-mail { display: inline-flex; align-items: center; gap: 8px; }
.ico-mail { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Pulsante WhatsApp flottante */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.wa-fab svg { width: 32px; height: 32px; fill: #fff; }
@media (max-width: 560px) {
  .wa-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .wa-fab svg { width: 28px; height: 28px; }
}