/* Tema — chatbot IT (tema adulto) */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Manrope", system-ui, sans-serif;
  background: #120910;
  color: #f4e7ee;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; line-height: 1.16; }
a { color: #d8a15e; }
b, strong { color: #fff; }

/* Larghezze */
.centro { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.centro-stretto { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* Fasce a tutta larghezza */
.fascia { width: 100%; padding: clamp(48px, 7vw, 88px) 0; background: #120910; }
.fascia-scura { background: #1a0c15; border-block: 1px solid #3d2231; }
.fascia-azione {
  background: radial-gradient(700px 360px at 50% 30%, rgba(225,29,72,.22), transparent 70%), #1a0c15;
  border-top: 1px solid #3d2231;
}

/* Verifica età */
.verifica-eta {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8,4,7,.95);
  display: grid; place-items: center; padding: 22px;
}
.verifica-eta.via { display: none; }
.riquadro {
  background: #1f0f1a; border: 1px solid #4a2a3a;
  border-radius: 12px; padding: clamp(26px, 6vw, 40px);
  max-width: 440px; text-align: center;
}
.bollino {
  display: inline-block; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 18px; color: #fff;
  background: #e11d48; padding: 6px 16px; border-radius: 8px; margin-bottom: 16px;
}
.riquadro h2 { margin-bottom: 10px; }
.riquadro p { color: #bd9fac; margin-bottom: 22px; }
.riquadro-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Nastro */
.nastro {
  background: #e11d48; color: #fff;
  text-align: center; font-weight: 700; font-size: 13px;
  padding: 9px 14px; letter-spacing: .3px;
}

/* Intestazione */
.intestazione {
  padding: clamp(54px, 8vw, 96px) 0; text-align: center;
  background: radial-gradient(900px 480px at 50% -10%, rgba(225,29,72,.22), transparent 65%);
}
.etichetta {
  display: inline-block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.5px; color: #d8a15e;
  border: 1px solid #5a2740; padding: 6px 15px; border-radius: 999px; margin-bottom: 20px;
}
.intestazione h1 { font-size: clamp(27px, 5.4vw, 50px); color: #fff; margin-bottom: 16px; }
.sommario { color: #bd9fac; font-size: clamp(15px, 2vw, 18px); max-width: 60ch; margin: 0 auto 28px; }

/* ===== PRESENTAZIONE DEL TESTO ===== */
.testo h2 {
  font-size: clamp(23px, 3.6vw, 34px); color: #fff;
  margin-bottom: 22px; padding-bottom: 14px; position: relative;
}
.testo h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #e11d48, #d8a15e);
}
.testo-centrato h2 { padding-bottom: 18px; }
.testo-centrato h2::after { left: 50%; transform: translateX(-50%); }
.testo p { color: #ddc8d2; margin-bottom: 16px; font-size: 16px; }
.testo > p:first-of-type { color: #f1e2ea; font-size: 17px; }
.testo-centrato { text-align: center; }
.testo-centrato p { margin-inline: auto; }
.intro-sezione { color: #a78a98; }

.elenco-spunta { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.elenco-spunta li {
  padding: 13px 16px 13px 46px; position: relative;
  background: #1f0f1a; border: 1px solid #3d2231; border-radius: 10px; color: #e2d2db;
}
.elenco-spunta li::before {
  content: "✓"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #d8a15e; color: #2a0a14; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}

/* Vetrina */
.vetrina {
  border: 1px solid #5a2f42; border-left: 4px solid #e11d48;
  border-radius: 12px; background: #1f0f1a; margin: 26px 0; overflow: hidden;
}
.vetrina-tag {
  background: #e11d48; color: #fff; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 13px; padding: 8px 20px;
}
.vetrina-corpo {
  display: flex; align-items: center; gap: 22px;
  padding: clamp(18px, 4vw, 26px); flex-wrap: wrap;
}
.vetrina-testo { flex: 1 1 320px; }
.vetrina-testo h3 { font-size: clamp(18px, 3vw, 24px); margin-bottom: 6px; color: #fff; }
.vetrina-testo p { color: #ddc8d2; }
.pillola {
  display: inline-block; font-size: 11px; font-weight: 700; vertical-align: middle;
  background: #e11d48; color: #fff; padding: 3px 9px; border-radius: 6px;
}

/* Tabella */
.tabella-scroll { overflow-x: auto; border: 1px solid #4a2a3a; border-radius: 12px; }
.confronto { width: 100%; border-collapse: collapse; min-width: 840px; }
.confronto th, .confronto td {
  padding: 14px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid #3d2231;
}
.confronto thead th {
  background: #281320; color: #fff; font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase; font-size: 12px; letter-spacing: .6px;
}
.confronto tbody tr { background: #190e16; }
.confronto tbody tr:nth-child(odd) { background: #1f0f1a; }
.confronto tbody tr:hover { background: #281320; }
.confronto tbody tr.riga-extra { display: none; }
.confronto.tutto tbody tr.riga-extra { display: table-row; }
.zona-altro { text-align: center; margin-top: 16px; }

.nota {
  margin-top: 20px; padding: 16px 20px; color: #ecccd9;
  background: #24121b; border-left: 3px solid #e11d48; border-radius: 8px;
}

/* Voci classifica (piatte) */
.voce { border-top: 1px solid #3d2231; padding: clamp(36px, 6vw, 60px) 0; }
.voce:first-of-type { border-top: 0; }
.voce-dentro { max-width: 720px; margin: 0 auto; }
.posizione {
  display: inline-block; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: 1px;
  background: #2a141f; color: #d8a15e; border: 1px solid #5a2740;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.posizione-bonus { background: #2c1426; color: #e0a9c8; border-color: #4a2640; }
.voce-titolo { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #3d2231; }
.voce-titolo h3 { font-size: clamp(21px, 3.4vw, 28px); color: #fff; }
.voce p { color: #ddc8d2; margin-bottom: 14px; font-size: 16px; }

.funzioni-titolo {
  margin: 24px 0 14px; color: #fff; font-size: 17px;
  display: flex; align-items: center; gap: 10px;
}
.funzioni-titolo::before { content: ""; width: 18px; height: 2px; background: #d8a15e; }
.funzioni { list-style: none; display: grid; gap: 10px; }
.funzioni li {
  padding: 13px 16px 13px 18px; background: #1f0f1a;
  border: 1px solid #3d2231; border-left: 3px solid #d8a15e;
  border-radius: 0 10px 10px 0; color: #e2d2db; font-size: 14.5px;
}

/* ===== AVANTAGGI / SVANTAGGI (schede) ===== */
.pro-contro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.vantaggi, .svantaggi {
  border-radius: 12px; overflow: hidden; border: 1px solid #3d2231; background: #1f0f1a;
}
.vantaggi h4, .svantaggi h4 {
  margin: 0; padding: 12px 18px; font-size: 14px;
  font-family: "Space Grotesk", sans-serif; letter-spacing: .4px;
}
.vantaggi h4 { background: rgba(70,209,138,.14); color: #46d18a; border-bottom: 1px solid rgba(70,209,138,.25); }
.svantaggi h4 { background: rgba(244,113,127,.14); color: #f4717f; border-bottom: 1px solid rgba(244,113,127,.25); }
.vantaggi ul, .svantaggi ul { list-style: none; display: grid; gap: 10px; padding: 16px 18px; }
.vantaggi li, .svantaggi li {
  position: relative; padding-left: 26px; color: #e2d2db; font-size: 14px;
}
.vantaggi li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: #46d18a; font-weight: 700; }
.svantaggi li::before { content: "✕"; position: absolute; left: 0; top: 1px; color: #f4717f; font-weight: 700; }

.poscritto {
  margin-top: 16px; font-size: 13.5px; color: #bd9fac;
  background: #24121b; border-radius: 10px; padding: 14px 18px;
}

/* ===== BOTTONI ===== */
.bottone {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  text-decoration: none; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .6px; text-transform: uppercase;
  padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.bottone::after { content: "→"; font-size: 15px; transition: transform .16s ease; }
.bottone:hover { transform: translateY(-2px); }
.bottone:hover::after { transform: translateX(4px); }
.bottone-grande { font-size: 16px; padding: 17px 36px; }
.bottone-piccolo {
  font-size: 12px; padding: 9px 16px; letter-spacing: .3px;
  text-transform: none; white-space: nowrap;
}
.bottone-piccolo::after { font-size: 13px; }
.bottone-principale {
  background: #e11d48; color: #fff; border-color: #e11d48;
  box-shadow: 0 8px 26px rgba(225,29,72,.4);
}
.bottone-principale:hover { box-shadow: 0 14px 38px rgba(225,29,72,.62); }
.bottone-secondario { background: transparent; color: #d8a15e; border-color: #d8a15e; }
.bottone-secondario:hover { background: #d8a15e; color: #2a0a14; }
.bottone-vuoto {
  background: transparent; color: #bd9fac; border-color: #4a2a3a;
  text-transform: none; letter-spacing: .2px;
}
.bottone-vuoto::after { content: none; }
.bottone-vuoto:hover { color: #fff; border-color: #d8a15e; }
.voce-dentro > .bottone {
  display: inline-flex; width: -moz-fit-content; width: fit-content;
  margin: 10px auto 0;
}

/* Barra fissa */
.barra-fissa {
  position: fixed; left: 22px; bottom: 22px; z-index: 800;
  display: none; align-items: center; gap: 9px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .5px; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: #e11d48; padding: 14px 24px; border-radius: 999px;
  box-shadow: 0 12px 34px rgba(225,29,72,.5);
}
.barra-fissa.attiva { display: inline-flex; }
.barra-fissa b { background: #fff; color: #e11d48; font-size: 12px; padding: 2px 8px; border-radius: 999px; }

/* Piè di pagina */
.pie {
  border-top: 1px solid #3d2231; padding: 32px 0;
  text-align: center; color: #a78a98; font-size: 13px; background: #1a0c15;
}
.pie-tenue { opacity: .55; margin-top: 6px; }

/* Tablet */
@media (max-width: 1000px) {
  .centro { max-width: 880px; }
  .vetrina-corpo .bottone { width: 100%; justify-content: center; }
}

/* Mobile */
@media (max-width: 660px) {
  .pro-contro { grid-template-columns: 1fr; }
  .intestazione .bottone, .fascia-azione .bottone,
  .voce-dentro > .bottone, .vetrina-corpo .bottone {
    width: 100%; justify-content: center;
  }
  .bottone-piccolo { width: auto; }

  .tabella-scroll { border: 0; }
  .confronto { min-width: 0; }
  .confronto thead { display: none; }
  .confronto tbody tr {
    display: block; margin-bottom: 14px;
    border: 1px solid #4a2a3a; border-radius: 10px; overflow: hidden;
  }
  .confronto.tutto tbody tr.riga-extra { display: block; }
  .confronto tbody td {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 11px 15px; border-bottom: 1px solid #3d2231;
  }
  .confronto tbody td:last-child { border-bottom: 0; }
  .confronto tbody td::before {
    content: attr(data-col); font-weight: 700; color: #d8a15e;
    font-family: "Space Grotesk", sans-serif;
  }
  .barra-fissa { left: 14px; right: 14px; bottom: 14px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bottone, .bottone::after { transition: none; }
  .bottone:hover { transform: none; }
}