/* Conti in Bolla – sito contiinbolla.it
   Caratteri ospitati qui (licenza OFL): nessuna richiesta a servizi esterni, quindi niente banner cookie. */
@font-face { font-family: "Barlow Condensed"; src: url(fonts/BarlowCondensed-ExtraBold.ttf) format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/BarlowCondensed-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/BarlowCondensed-SemiBoldItalic.ttf) format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --cantiere: #1F3864;      /* blu del marchio, bande e titoli */
  --ambra: #F2B705;         /* corpo della livella, azioni principali */
  --ambra-scura: #9A6A00;   /* ambra leggibile su fondo chiaro */
  --vetro: #CDEFD0;         /* fiala della livella */
  --fondo: #EEF1F5;
  --superficie: #FFFFFF;
  --testo: #16223A;
  --muto: #52607A;
  --bordo: #D3D9E3;
  --su-banda: #FFFFFF;
  --su-banda-muto: #C3CDE0;
  --ok: #1E7B34;
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-testo: "Barlow", "Segoe UI", Arial, sans-serif;
  --raggio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cantiere: #1A2B4D; --ambra-scura: #F2B705; --vetro: #A9DDB0;
    --fondo: #0E1626; --superficie: #17223A; --testo: #E7ECF4; --muto: #A9B4C8; --bordo: #2A3754;
    --su-banda-muto: #B5C1D8; --ok: #7FD192; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cantiere: #1A2B4D; --ambra-scura: #F2B705; --vetro: #A9DDB0;
  --fondo: #0E1626; --superficie: #17223A; --testo: #E7ECF4; --muto: #A9B4C8; --bordo: #2A3754;
  --su-banda-muto: #B5C1D8; --ok: #7FD192; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--font-testo); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; height: auto; }
.contenitore { max-width: 1120px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.55rem; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
.etichetta { font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ambra-scura); }
.numeri { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 3px; border-radius: 4px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 10; background: var(--ambra); color: #1F2A44; padding: .5rem 1rem; border-radius: 6px; }

/* Bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn-ambra { background: var(--ambra); color: #1F2A44; box-shadow: 0 3px 0 #B97F00; }
.btn-ambra:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #B97F00; }
.btn-ambra:active { transform: translateY(2px); box-shadow: 0 1px 0 #B97F00; }
.btn-linea { border-color: var(--su-banda-muto); color: var(--su-banda); }
.btn-linea:hover { border-color: var(--su-banda); }
.btn-chiaro { border-color: var(--bordo); color: var(--testo); background: var(--superficie); }
.btn-chiaro:hover { border-color: var(--testo); }
.btn[aria-disabled="true"] { opacity: .6; cursor: default; box-shadow: none; transform: none; }

/* Banda blu, testata */
.banda { background: var(--cantiere); color: var(--su-banda); }
.testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.testata .logo { display: block; }
.testata .logo svg { height: 40px; width: auto; display: block; }
.menu { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.menu a { text-decoration: none; color: var(--su-banda-muto); }
.menu a:hover { color: var(--su-banda); }
.menu a.forte { color: var(--ambra); font-weight: 800; }

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; padding-block: 2.5rem 4rem; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); font-weight: 800; color: var(--su-banda); margin-block: .6rem 1.2rem; }
.hero h1 em { font-style: italic; font-weight: 600; color: var(--ambra); }
.hero .etichetta { color: var(--ambra); }
.hero p.lead { color: var(--su-banda-muto); font-size: 1.15rem; max-width: 34em; }
.azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.fatti { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: var(--su-banda-muto); font-size: .95rem; }
.fatti li::before { content: "✓"; color: var(--ambra); font-weight: 700; margin-right: .4rem; }

/* La livella: la bolla scivola al centro quando la pagina si carica */
.livella { width: 100%; max-width: 440px; justify-self: center; margin: 0; }
.livella svg { width: 100%; height: auto; display: block; overflow: visible; }
.bolla { animation: in-bolla 1.6s cubic-bezier(.3, 1.6, .5, 1) .3s both; transform-box: fill-box; transform-origin: center; }
@keyframes in-bolla { from { transform: translateX(-42px); } to { transform: translateX(0); } }
.livella figcaption { text-align: center; font-size: .9rem; color: var(--su-banda-muto); margin-top: .8rem; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .bolla { animation: none; } .btn { transition: none; } html { scroll-behavior: auto; } }

/* Metro da carpentiere come divisore */
.metro { height: 22px; background:
  repeating-linear-gradient(90deg, var(--ambra-scura) 0 2px, transparent 2px 50px) bottom / 100% 18px no-repeat,
  repeating-linear-gradient(90deg, var(--ambra-scura) 0 1px, transparent 1px 10px) bottom / 100% 9px no-repeat;
  opacity: .55; border-bottom: 2px solid var(--ambra-scura); }

section { padding-block: 4.5rem; scroll-margin-top: 1rem; }
.intro { display: grid; gap: .8rem; max-width: 46rem; margin-bottom: 2.5rem; }
.intro p { color: var(--muto); }

/* Problemi */
.problemi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.problema { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.4rem 1.5rem; display: grid; gap: .4rem; align-content: start; }
.problema .cifra { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ambra-scura); font-variant-numeric: tabular-nums; }
.problema h3 { font-size: 1.35rem; }
.problema p { color: var(--muto); font-size: .98rem; }

/* Registri */
.prodotti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.prodotto { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.2rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem; }
.prodotto .copertina { display: block; border-radius: 4px; box-shadow: 0 14px 30px -18px rgba(16, 28, 56, .6); aspect-ratio: 640 / 905; object-fit: cover; width: 100%; }
.prodotto .stato { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; justify-self: start; }
.stato.disponibile { background: #E2EFDA; color: #1E5A2A; }
.stato.arrivo { background: #FFF2CC; color: #6A4A00; }
.prodotto h3 { font-size: 1.45rem; }
.prodotto p { color: var(--muto); font-size: .95rem; }
.prodotto .dettagli { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .9rem; color: var(--muto); }
.prodotto .prezzo { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--testo); }
.prodotto .btn { width: 100%; }

/* Vetrina di un singolo prodotto */
.vetrina { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem; align-items: center; }
.vetrina .copertina { width: 100%; max-width: 380px; justify-self: center; border-radius: 4px; box-shadow: 0 24px 40px -22px rgba(16, 28, 56, .7); }
.vetrina .testo { display: grid; gap: 1rem; }
.vetrina ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.vetrina li::marker { color: var(--ambra-scura); }
.acquisto { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .4rem; }
.acquisto .prezzo { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }

/* Manuale */
.manuale { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 3rem; align-items: start; }
.manuale .copertina { border-radius: 4px; box-shadow: 0 24px 40px -22px rgba(16, 28, 56, .7); width: 100%; max-width: 360px; justify-self: center; }
.manuale .testo { display: grid; gap: 1rem; }
.capitoli { columns: 2; column-gap: 2rem; padding-left: 1.2rem; margin: 0; color: var(--muto); font-size: .97rem; }
.capitoli li { break-inside: avoid; margin-bottom: .3rem; }
.capitoli li::marker { color: var(--ambra-scura); font-weight: 600; }
.riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-left: 4px solid var(--ambra); border-radius: var(--raggio); padding: 1rem 1.2rem; color: var(--muto); font-size: .95rem; }
.riquadro strong { color: var(--testo); }

/* Esempio IVA */
.esempio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.conto { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow-x: auto; }
.conto table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.conto th, .conto td { padding: .7rem 1.1rem; text-align: left; border-bottom: 1px solid var(--bordo); }
.conto th { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; background: var(--cantiere); color: var(--su-banda); }
.conto td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conto tr.tot td { font-weight: 600; border-bottom: none; }
.conto tr.tot td.v { color: var(--ambra-scura); font-size: 1.1rem; }
.nota { font-size: .85rem; color: var(--muto); }

/* Lista d'attesa */
.lista { background: var(--cantiere); color: var(--su-banda); border-radius: 14px; padding: 2.2rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem; align-items: center; }
.lista h2 { color: var(--su-banda); }
.lista p { color: var(--su-banda-muto); }
.lista .etichetta { color: var(--ambra); }
.lista ul { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--su-banda-muto); display: grid; gap: .3rem; }
.lista form { display: grid; gap: .7rem; }
.lista label { font-weight: 600; font-size: .95rem; }
.lista input[type="email"], .lista select { width: 100%; padding: .85rem 1rem; border-radius: 8px; border: 2px solid var(--su-banda-muto); background: #fff; color: #16223A; font: inherit; }
.lista .consenso { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; font-weight: 400; color: var(--su-banda-muto); }
.lista .consenso input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.lista .consenso a { color: var(--su-banda); }
.lista .trappola { position: absolute; left: -9999px; }
.esito { font-size: .95rem; color: var(--ambra); min-height: 1.4em; }

/* Chi c'è dietro */
.chi { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; max-width: 46rem; }
.chi p { color: var(--muto); }

/* FAQ */
.faq { display: grid; gap: .7rem; max-width: 50rem; }
.faq details { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.3rem; }
.faq summary { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; cursor: pointer; }
.faq details p { color: var(--muto); margin-top: .6rem; }

/* Pagine di testo (privacy, grazie, 404) */
.documento { max-width: 46rem; padding-block: 3rem 4rem; }
.documento h1 { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 1rem; }
.documento h2 { font-size: 1.6rem; margin: 2rem 0 .6rem; }
.documento p, .documento li { color: var(--muto); }
.documento p + p { margin-top: .8rem; }
.documento ul { padding-left: 1.2rem; display: grid; gap: .3rem; }
.documento strong { color: var(--testo); }

footer { padding-block: 2.5rem 3rem; font-size: .88rem; color: var(--su-banda-muto); }
footer .righe { display: grid; gap: .6rem; }
footer .logo svg { height: 30px; width: auto; display: block; }
footer a { color: var(--su-banda); }

@media (max-width: 900px) {
  .prodotti { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
}
@media (max-width: 860px) {
  .hero, .esempio, .lista, .manuale, .vetrina { grid-template-columns: minmax(0, 1fr); }
  .vetrina { gap: 2rem; }
  .vetrina .copertina { max-width: 300px; }
  .hero { gap: 2rem; padding-block: 1.5rem 3rem; }
  .problemi { grid-template-columns: minmax(0, 1fr); }
  .capitoli { columns: 1; }
  section { padding-block: 3.2rem; }
  .lista { padding: 1.5rem; }
  .menu { gap: 1rem; font-size: 1.05rem; }
  .menu .facoltativa { display: none; }
}
@media (max-width: 420px) {
  .testata .logo svg { height: 32px; }
}