/* WPVeloce — landing pubblica di wpveloce.it. Si appoggia ai token e ai componenti di app.css.
   Reference: brokerpilot.net riportata su bianco (research/brokerpilot/RILIEVO.md). Niente occhielli sopra i titoli,
   tutti i pulsanti larghi uguale (--wp-btn-w), desktop e telefono. */

.sito { font-size: 17px; overflow-x: clip; }
.sito .btn:not(.btn--icona) { width: var(--wp-btn-w); min-width: 0; min-height: 52px; font-size: 16px; }
.sito h1 { font-size: clamp(42px, 5.8vw, 82px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin-bottom: .32em; }
.sito h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.03em; margin-bottom: .4em; }
.sito h3 { font-size: 20px; }
.sito-contenitore { width: min(1200px, 100%); margin: 0 auto; padding: 0 24px; }
.sito-stretto { width: min(820px, 100%); }
.salta { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--wp-ink); color: #fff; }
.salta:focus { top: 12px; color: #fff; }
.nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- testata */
.sito-testa { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.sito-testa.e-scesa, .sito-testa--fissa { border-bottom-color: var(--wp-line); box-shadow: 0 8px 24px -20px rgba(6, 28, 32, .4); }
.sito-testa__dentro { width: min(1200px, 100%); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.sito-marchio { padding: 0; }
.sito-nav { display: flex; gap: 28px; margin-left: auto; }
.sito-nav a { color: var(--wp-ink-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.sito-nav a:hover { color: var(--wp-ink); }
.sito-testa__accesso { margin-left: 8px; }
.sito-testa--fissa .sito-testa__accesso { margin-left: auto; }
.sito-menu { display: none; margin-left: auto; position: relative; }
.sito-menu summary { list-style: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--wp-line-2); cursor: pointer; }
.sito-menu summary::-webkit-details-marker { display: none; }
.sito-menu__pannello { position: absolute; right: 0; top: 56px; width: min(300px, calc(100vw - 32px)); padding: 12px; border-radius: var(--wp-r-l); background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-ombra-alta); display: grid; gap: 4px; }
.sito-menu__pannello a:not(.btn) { padding: 12px 14px; border-radius: 12px; color: var(--wp-ink); text-decoration: none; font-weight: 600; }
.sito-menu__pannello a:not(.btn):hover { background: var(--wp-surface); }
.sito-menu__pannello .btn { margin-top: 8px; justify-self: center; }

/* ---------------------------------------------------------------- eroe */
.eroe { position: relative; padding: clamp(56px, 9vw, 112px) 0 0; text-align: center; isolation: isolate; }
.eroe::before { content: ""; position: absolute; inset: 0 0 auto; height: 1100px; z-index: -1; background:
  radial-gradient(38% 30% at 18% 18%, rgba(91, 75, 255, .13), transparent 70%),
  radial-gradient(34% 28% at 84% 12%, rgba(44, 47, 217, .10), transparent 70%),
  radial-gradient(46% 30% at 50% 86%, rgba(217, 249, 64, .42), transparent 70%); }
.eroe::after { content: ""; position: absolute; inset: 0 0 auto; height: 1000px; z-index: -1; background-image: linear-gradient(var(--wp-line) 1px, transparent 1px), linear-gradient(90deg, var(--wp-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(60% 55% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000, transparent 75%); opacity: .5; }
.eroe__testo { max-width: 1140px; }
.eroe__sotto { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--wp-ink-2); max-width: 720px; margin: 0 auto 32px; }
.eroe__nota { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--wp-ink-3); font-size: 15px; }
.sito-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sito-azioni--modulo { justify-content: flex-start; margin-top: 8px; }
.eroe__scena { text-align: left; position: relative; width: min(1040px, calc(100% - 48px)); margin: clamp(48px, 7vw, 88px) auto 0; padding-bottom: 70px; perspective: 1600px; }
.eroe__scena .sim { width: 100%; }
.eroe__scena .sim__portatile { transform-origin: 50% 100%; transform: rotateX(var(--inclina, 14deg)) scale(var(--scala, .94)); transition: transform .12s linear; }
.eroe__scena .sim__schermo { min-height: 520px; grid-template-columns: 190px 1fr; }
.eroe__scena .sim__kpi b { font-size: 30px; }
.eroe__scena .sim__kpi small { font-size: 12px; }
.eroe__scena .sim__grafico { height: 140px; }
.eroe__scena .sim__riga { font-size: 13px; padding: 8px 10px; }
.eroe__scena .sim__telefono { width: 230px; right: -24px; bottom: 10px; }
.eroe__scena .sim__base { margin: 0 -56px; height: 20px; }

/* ---------------------------------------------------------------- sezioni */
.sito-sezione { padding: clamp(72px, 10vw, 128px) 0; }
.sito-sezione--chiara { background: var(--wp-surface); }
.sito-sezione--scura { background: var(--wp-ink); color: #DCE6E4; position: relative; overflow: hidden; }
.sito-sezione--scura::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(217, 249, 64, .22), transparent); pointer-events: none; }
.sito-sezione--scura h2 { color: #fff; }
.sito-titolo { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.sito-titolo p { font-size: 19px; color: var(--wp-ink-2); margin: 0; }
.sito-sezione--scura .sito-titolo p { color: #A9BCB8; }
.sito-titolo--sinistra { text-align: left; margin: 0 0 32px; }
.sito-paragrafo { font-size: 19px; color: var(--wp-ink-2); line-height: 1.55; }

/* passi */
.tappe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tappa { position: relative; padding: 32px 28px 30px; border-radius: var(--wp-r-l); background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-ombra); }
.tappa__numero { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 22px; font: 800 24px/1 var(--wp-titoli); background: var(--wp-ink); color: var(--wp-lime); }
.tappa:nth-child(2) .tappa__numero { background: var(--wp-lime); color: var(--wp-lime-ink); }
.tappa p { color: var(--wp-ink-2); margin: 0; }

/* racconto: voci a sinistra, telefono a destra */
.racconto { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 6vw, 96px); align-items: center; }
.racconto__voci { display: grid; gap: 10px; }
.racconto__voce { display: grid; gap: 6px; text-align: left; padding: 20px 22px; border-radius: var(--wp-r-l); border: 1px solid transparent; background: transparent; font: inherit; color: var(--wp-ink-3); cursor: pointer; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; position: relative; }
.racconto__voce strong { font: 700 21px/1.2 var(--wp-titoli); letter-spacing: -.02em; color: var(--wp-ink-3); transition: color .25s; }
.racconto__voce span { font-size: 16px; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--wp-anim), opacity .25s; }
.racconto__voce[aria-selected="true"] { background: #fff; border-color: var(--wp-line); box-shadow: var(--wp-ombra); color: var(--wp-ink-2); }
.racconto__voce[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--wp-lime); }
.racconto__voce[aria-selected="true"] strong { color: var(--wp-ink); }
.racconto__voce[aria-selected="true"] span { max-height: 140px; opacity: 1; }
.racconto__voce:hover strong { color: var(--wp-ink); }
.racconto__telefono { margin: 0; display: grid; justify-items: center; gap: 14px; }
.racconto__telefono figcaption, .stili__nota { font-size: 14px; color: var(--wp-ink-3); }
.telefono-cornice { width: 100%; max-width: 360px; aspect-ratio: 9 / 18.4; border-radius: 52px; padding: 12px; background: var(--wp-ink); box-shadow: var(--wp-ombra-alta), inset 0 0 0 2px #2A4146; position: relative; overflow: hidden; }
.telefono-cornice::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 999px; background: #000; z-index: 2; }
.telefono-cornice img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 40px; background: #fff; transition: opacity .3s; }
.telefono-cornice img.cambia { opacity: 0; }
.telefono-cornice--piccola { max-width: 250px; border-radius: 40px; padding: 9px; }
.telefono-cornice--piccola::before { top: 16px; width: 64px; height: 18px; }
.telefono-cornice--piccola img { border-radius: 31px; }

/* sei stili: striscia che scorre di lato */
.stili { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(24px, calc((100vw - 1152px) / 2)) 28px; scrollbar-width: thin; }
.stili:focus-visible { outline-offset: -4px; }
.stile { flex: 0 0 250px; margin: 0; scroll-snap-align: center; display: grid; gap: 16px; }
.stile figcaption { display: grid; gap: 2px; }
.stile figcaption strong { font: 700 18px/1.2 var(--wp-titoli); }
.stile figcaption span { font-size: 15px; color: var(--wp-ink-3); }
.stile:nth-child(even) { transform: translateY(32px); }
.stili__nota { margin-top: 28px; }

/* card a ventaglio */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.elenco-spunte { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.elenco-spunte li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.elenco-spunte .ico { margin-top: 3px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--wp-lime); color: var(--wp-lime-ink); }
.elenco-spunte code { background: #fff; border: 1px solid var(--wp-line); border-radius: 8px; padding: 2px 8px; }
.ventaglio { position: relative; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; justify-self: center; }
.ventaglio img { position: absolute; width: 72%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(6, 28, 32, .45), 0 2px 6px rgba(6, 28, 32, .08); transition: transform .6s var(--wp-anim); }
.ventaglio img:nth-child(1) { left: 0; top: 8%; transform: rotate(-9deg); }
.ventaglio img:nth-child(2) { right: 0; top: 0; transform: rotate(7deg); }
.ventaglio img:nth-child(3) { left: 14%; top: 24%; transform: rotate(-1deg); }
.ventaglio:hover img:nth-child(1) { transform: rotate(-14deg) translate(-16px, 8px); }
.ventaglio:hover img:nth-child(2) { transform: rotate(12deg) translate(16px, -6px); }
.ventaglio:hover img:nth-child(3) { transform: rotate(0deg) translateY(-10px); }

/* funzioni dell'area esercente */
.funzioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.funzione { padding: 28px; border-radius: var(--wp-r-l); border: 1px solid var(--wp-line); background: #fff; transition: transform .25s var(--wp-anim), box-shadow .25s; }
.funzione:hover { transform: translateY(-4px); box-shadow: var(--wp-ombra-alta); }
.funzione > .ico { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--wp-lime-soft); color: var(--wp-lime-ink); margin-bottom: 18px; }
.funzione p { color: var(--wp-ink-2); margin: 0; font-size: 16px; }

/* impegni sui dati */
.impegni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.impegni li { padding: 28px 24px; border-radius: var(--wp-r-l); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); display: grid; gap: 10px; align-content: start; }
.impegni strong { font: 700 20px/1.2 var(--wp-titoli); color: var(--wp-lime); letter-spacing: -.01em; }
.impegni span { font-size: 16px; line-height: 1.5; }

/* domande */
.domande { display: grid; gap: 12px; }
.domande details { border: 1px solid var(--wp-line); border-radius: var(--wp-r-l); background: #fff; transition: box-shadow .2s; }
.domande details[open] { box-shadow: var(--wp-ombra); }
.domande summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 26px; font: 700 18px/1.3 var(--wp-titoli); letter-spacing: -.01em; position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--wp-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5300' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .25s var(--wp-anim); }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { padding: 0 26px 24px; margin: 0; color: var(--wp-ink-2); }

/* modulo contatti */
.due-colonne--modulo { align-items: start; }
.modulo-sito { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-ombra-alta); }
.modulo-sito .campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modulo-sito .campo:last-child { grid-column: 1 / -1; }
.modulo-sito__aiuto { margin: -6px 0 16px; }
.modulo-sito .spunta { margin: 4px 0 8px; font-size: 15px; }
.modulo-sito .spunta span { font-size: 15px; }
.spunta--errore { border-color: var(--wp-err); }
.modulo-sito .avviso { margin-bottom: 18px; }
.modulo-sito__grazie { text-align: center; padding: 32px 8px; }
.modulo-sito__icona { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wp-lime); color: var(--wp-lime-ink); margin-bottom: 18px; }
.modulo-sito__icona .ico { width: 30px; height: 30px; }

/* piede */
.sito-piede { border-top: 1px solid var(--wp-line); padding: 40px 0 48px; }
.sito-piede__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.sito-piede .marchio { padding: 0; }
.sito-piede nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.sito-piede nav a { color: var(--wp-ink-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.sito-piede nav a:hover { color: var(--wp-ink); text-decoration: underline; }
.sito-piede p { width: 100%; margin: 0; font-size: 14px; color: var(--wp-ink-3); }

/* informativa */
.documento { padding-top: 48px; padding-bottom: 72px; }
.documento h1 { font-size: clamp(32px, 4vw, 44px); }

/* ---------------------------------------------------------------- entrate */
@media (prefers-reduced-motion: no-preference) {
  .js [data-entra] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--wp-anim), transform .7s var(--wp-anim); transition-delay: var(--ritardo, 0s); }
  .js .stile[data-entra]:nth-child(even) { transform: translateY(60px); }
  .js [data-entra].dentro { opacity: 1; transform: none; }
  .js .stile[data-entra].dentro:nth-child(even) { transform: translateY(32px); }
  .eroe__testo h1 .evidenzia { background-size: 0% 100%; background-repeat: no-repeat; background-image: linear-gradient(transparent 62%, var(--wp-lime) 62%, var(--wp-lime) 92%, transparent 92%); background-color: transparent; animation: sottolinea 1s .5s var(--wp-anim) forwards; }
}
.eroe__testo h1 .evidenzia { background-size: 100% 100%; }
@keyframes sottolinea { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .eroe__scena .sim__portatile { transform: none; } }

/* ---------------------------------------------------------------- larghezze */
@media (max-width: 1000px) {
  .sito-nav, .sito-testa:not(.sito-testa--fissa) .sito-testa__accesso { display: none; }
  .sito-menu { display: block; }
  .tappe, .funzioni { grid-template-columns: 1fr 1fr; }
  .impegni { grid-template-columns: 1fr 1fr; }
  .racconto, .due-colonne { grid-template-columns: 1fr; }
  .racconto__telefono { order: -1; }
  .racconto__telefono .telefono-cornice { max-width: 300px; }
  .eroe__scena .sim__telefono { width: 180px; right: -8px; }
}
@media (max-width: 640px) {
  .sito { font-size: 16px; }
  .sito-contenitore, .sito-testa__dentro { padding-left: 16px; padding-right: 16px; }
  .sito h1 { font-size: clamp(38px, 11vw, 48px); }
  .sito h2 { font-size: clamp(28px, 8vw, 34px); }
  .tappe, .funzioni, .impegni { grid-template-columns: 1fr; }
  .eroe__scena { width: calc(100% - 32px); padding-bottom: 48px; }
  .ventaglio { width: 86%; }
  .eroe__scena .sim__schermo { min-height: 0; grid-template-columns: 1fr; }
  .eroe__scena .sim__kpi b { font-size: 22px; }
  .eroe__scena .sim__grafico { height: 90px; }
  .eroe__scena .sim__telefono { width: 160px; right: -4px; bottom: 0; }
  .eroe__scena .sim__base { margin: 0 -12px; }
  .modulo-sito .campi { grid-template-columns: 1fr; }
  .stile { flex-basis: 220px; }
  .stili { padding-left: 16px; padding-right: 16px; gap: 20px; }
  .sito-piede nav { margin-left: 0; }
  .sito-titolo p, .sito-paragrafo { font-size: 17px; }
  .domande summary { font-size: 17px; padding: 18px 56px 18px 20px; }
  .domande details p { padding: 0 20px 20px; }
}