/* ==========================================================================
   t·node — foglio di stile unico del sito (home, pagine prodotto, pagine legali)
   Struttura pensata per il CMS: ogni sezione è un blocco riusabile.
   Il sito ha un solo aspetto (chiaro, parchment): niente tema scuro, per scelta.
   ========================================================================== */

@font-face{font-family:"Chillax";src:url("font/chillax-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  /* Colori di base */
  --ink:#26292c;         /* graphite: testi, fasce scure */
  --paper:#f2f0eb;       /* parchment: sfondo */
  --red:#ff4040;         /* corallo rosso, il colore ufficiale di t·node (#FF4040) */
  --rule:#cfcec5;        /* linee sottili */
  --dim:#5d6468;         /* testi secondari su chiaro */
  --dim-scuro:#c4c7c3;   /* testi secondari su graphite */
  --bianco:#fff;
  /* Colori prodotto */
  --akea:#44d4d4; --akea-scuro:#1c2c8c; --akea-lavanda:#7478ec;  /* dal simbolo di akea */
  --dima:#8cb61c;
  --dilly:#ff6f61;       /* dilly, Pantone Living Coral 16-1546 */
  /* Colore d'accento della pagina: rosso su t·node, corallo su dilly */
  --c:var(--red);
  /* Caratteri */
  --display:"Chillax","Avenir Next","Segoe UI",system-ui,sans-serif;
  --text:"Lora",Georgia,"Times New Roman",serif;
  /* Due soli caratteri (decisione del 14/10/2026): Chillax per i titoli grandi,
     nomi dei prodotti e prezzi; Lora per tutto il resto, compresi menu, pulsanti
     ed etichette. */
  --ui:var(--text);
  /* Chillax il meno possibile (decisione del 14/10/2026): solo nei nomi dei
     prodotti, che fanno da marchio. Titoli e frasi grandi in Lora. */
  --titoli:var(--text);
  /* Le schermate dell'app usano il carattere di sistema del telefono, come l'app vera. */
  --app:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Margini laterali */
  --gutter:24px;
  color-scheme:light;
}
body.dilly{--c:var(--dilly);--fondo:var(--dilly)}
body.akea{--c:var(--akea-scuro);--fondo:var(--akea)}
body.dima{--c:var(--dima);--fondo:var(--dima)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--text);font-size:18px;line-height:1.65;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
h1,h2,h3{font-family:var(--titoli);font-weight:600;text-wrap:balance}
/* I nomi dei prodotti restano in Chillax: sono marchi */
.prodotto h3{font-family:var(--display)}
p{margin:0}

/* --- Impaginazione ------------------------------------------------------- */
.wrap{max-width:1120px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.band{padding-block:clamp(64px,10vw,128px)}
.band.linea{border-top:1px solid var(--rule)}
.band.scura{background:var(--ink);color:var(--bianco)}
.band.corallo{background:var(--fondo,var(--dilly));color:var(--ink)}
.band.prima{padding-top:clamp(32px,6vw,72px)}

/* --- Il punto nei nomi -----------------------------------------------------
   t·node: punto in mezzo (.d). Prodotti (dilly, dima): il punto colorato è il
   puntino della "i" (decisione del 14/10/2026). Si scrive con la ı senza punto:
   d<span class="ip">ı<b></b></span>lly */
.ip{position:relative;display:inline-block}
.ip b{position:absolute;left:50%;top:.06em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--c)}
/* Regola .jp: era per la j di maja, nome poi diventato aimed e poi akea; oggi non usata. Sulla j il puntino del font non è centrato: la j curva a sinistra in basso.
   Misurato in Chillax 600: centro al 53,8% della larghezza. */
.jp b{left:53.8%;top:.068em}
.nome-prodotto{font-family:var(--display);font-weight:600;letter-spacing:-.025em}
.marca-testo{display:flex;flex-direction:column;gap:2px}
.marca-testo .nome-prodotto{font-size:36px;line-height:1}
.marca-testo .payoff{font-family:var(--text);font-style:italic;font-weight:400;font-size:17px;color:var(--dim)}

/* --- Testata e menu ------------------------------------------------------ */
.testata{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.testata .logo img{display:block;height:44px;width:auto}
.menu{display:flex;align-items:center;gap:28px;font-family:var(--ui);font-weight:600;font-size:16px}
.menu a{text-decoration:none;color:var(--dim);white-space:nowrap}
.menu a:hover{color:var(--ink)}
.menu a.btn{color:var(--paper)}
/* Selettore lingua IT · EN · ES nella testata (18/10/2026): il server lo inserisce prima del pulsante Menu. */
.lingue{display:flex;align-items:center;gap:2px;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.04em;order:3;margin-left:4px}
.lingue a,.lingue span{padding:6px 7px;border-radius:999px;text-decoration:none;color:var(--dim)}
.lingue a:hover{color:var(--ink)}
.lingue span{color:var(--ink);background:var(--rule)}
.testata .menu{order:2;margin-left:auto}
.apri-menu{display:none;align-items:center;gap:10px;border:0;background:none;padding:10px 0 10px 10px;font:600 16px var(--ui);color:var(--ink);cursor:pointer}
.apri-menu i{position:relative;display:block;width:22px;height:2px;background:currentColor}
.apri-menu i::before,.apri-menu i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .2s}
.apri-menu i::before{top:-7px}.apri-menu i::after{top:7px}
.apri-menu[aria-expanded="true"] i{background:transparent}
.apri-menu[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.apri-menu[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .testata .logo img{height:34px}
  .apri-menu{display:flex;order:4}
  .lingue{order:3;margin-left:auto;margin-right:4px}
  .menu{display:none;position:absolute;z-index:20;top:100%;left:max(var(--gutter),env(safe-area-inset-left,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1.5px solid var(--ink);border-radius:20px;padding:8px 20px 20px;box-shadow:0 20px 40px rgba(38,41,44,.14)}
  .menu.aperto{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-size:18px}
  .menu a.btn{margin-top:16px;border-bottom:0;text-align:center;padding:14px 28px}
}

/* --- Titoli e testi ------------------------------------------------------ */
h1{font-size:clamp(36px,5.4vw,78px);line-height:.98;letter-spacing:-.04em;margin:0 0 36px}
h2{font-size:clamp(32px,5vw,64px);line-height:1.04;letter-spacing:-.03em;margin:0 0 28px;max-width:20ch}
.lead{font-size:clamp(19px,2vw,23px);color:var(--dim);max-width:42ch}
.intro{max-width:56ch;color:var(--dim);font-size:19px;margin-top:20px}
.scura .intro{color:var(--dim-scuro)}

/* Occhiello: testo graphite con il punto colorato davanti.
   Il testo corallo piccolo su parchment non si leggeva (contrasto 2,4:1). */
.occhiello{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:600;font-size:16px;color:var(--ink);margin:0 0 16px}
.occhiello::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.scura .occhiello{color:#a9aca8}
/* Carte dentro una fascia grafite: bordo e testi chiari */
.scura .carta{border-color:#4a5156}
.scura .carta h3{color:var(--bianco)}
.scura .carta p{color:var(--dim-scuro)}
.scura .carta .muted{color:#9aa0a4}
.scura .connette2{color:var(--dim-scuro)}
.scura .esp2 .sotto{color:var(--bianco)}
.corallo .occhiello::before{background:var(--ink)}

/* --- Pulsanti ------------------------------------------------------------ */
.btn{display:inline-block;border:0;cursor:pointer;background:var(--ink);color:var(--paper);padding:14px 28px;border-radius:999px;text-decoration:none;font-family:var(--ui);font-weight:600;font-size:18px;line-height:1.3;transition:background .2s,color .2s}
.btn:hover{background:var(--c);color:var(--bianco)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.mini{padding:9px 20px;font-size:15px}
.scura .btn{background:var(--paper);color:var(--ink)}
.scura .btn:hover{background:var(--c);color:var(--bianco)}
.corallo .btn:hover{background:var(--paper);color:var(--ink)}
.corallo .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.pulsanti{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* --- Carte con bordo sottile -------------------------------------------- */
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.carta{border:1.5px solid var(--ink);border-radius:22px;padding:28px 26px;min-width:0}
.carta h3{font-size:clamp(21px,2.1vw,27px);line-height:1.12;letter-spacing:-.02em;margin:0 0 12px}
.carta p{margin:0 0 10px;font-size:17px}
.carta .muted{color:var(--dim)}
.carta .n{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:.04em;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.carta .n::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.carta.evid{background:var(--dilly);border-color:var(--dilly)}

/* --- Piede --------------------------------------------------------------- */
.piede{background:var(--paper);color:var(--dim);font-size:15px;padding-block:28px 40px}
.piede .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px}
.piede img{height:28px;width:auto;display:block}
.piede .seg{font-style:italic}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.hero .lead{margin-top:0}
/* Il titolo della home prende tutta la larghezza: due righe lunghe, una per frase.
   Sotto, testo e pulsante a sinistra, mano e palline a destra. */
.hero h1{grid-column:1/-1;margin:0;font-size:clamp(36px,6.2vw,74px)}
.hero{row-gap:clamp(32px,4vw,48px)}
.cerchi{width:100%;max-width:620px;justify-self:end}
.cerchi{position:relative}
.cerchi svg{position:relative;z-index:1;width:100%;height:auto;display:block}
/* La mano tiene il punto rosso: dita e pollice davanti al punto. Il braccio
   esce dal bordo destro dello schermo (la sezione taglia ciò che sborda). */
/* La pallina rossa ora e' dentro l'immagine della mano (disegnata da Ascanio).
   Misurata: diametro 30,00% della larghezza immagine, centro al 21,88% x 56,00%.
   La larghezza della mano e' calcolata perche la pallina venga grande esattamente
   come i cerchi della griglia (23% di .cerchi), e la posizione perche cada a
   3,52 diametri dal bordo sinistro della griglia e 1,39 dall'alto. */
.cerchi svg{z-index:1}
.cerchi .mano{position:absolute;z-index:2;left:64.2%;top:15.2%;width:76.7%;max-width:none;height:auto;pointer-events:none}
.band.con-mano{overflow:hidden}

.scelte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:36px 0 56px}
.scelta{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:150px;padding:20px;border:1.5px solid var(--ink);border-radius:20px;text-decoration:none;transition:background .2s,color .2s}
.scelta:hover{background:var(--ink);color:var(--paper)}
.scelta span{font-family:var(--ui);font-weight:600;font-size:20px;line-height:1.2}
.scelta>b{display:block;font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.025em}


.prodotto{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:20px 40px;padding-block:40px;border-top:1px solid var(--rule);align-items:start;scroll-margin-top:16px}
.prodotto:first-of-type{border-top:0;padding-top:12px}
.prodotto .ic{display:block;width:64px;height:64px;margin-bottom:14px}
.prodotto .tag{font-size:15px;color:var(--dim);margin:0 0 4px}
.prodotto h3{margin:0 0 8px;font-size:clamp(34px,4vw,52px);letter-spacing:-.025em;line-height:1}
/* Una riga sola accanto al prodotto: in vetrina si sceglie, non si legge. */
.prodotto .descr{align-self:center}
.prodotto .motto{font-family:var(--titoli);font-weight:400;font-size:clamp(19px,1.7vw,22px);line-height:1.35;letter-spacing:-.01em;margin:0;max-width:30ch}
.prodotto .descr .passo{margin-top:14px}
/* Su telefono: prima nome e icona, sotto descrizione e «Scopri». */
@media (max-width:640px){.prodotto{row-gap:10px}.prodotto .motto{max-width:none}}
.prodotto .passo{margin-top:20px}
/* Icona e nome del prodotto portano alla sua pagina, come «Scopri». */
.al-prodotto{display:inline-block;color:inherit;text-decoration:none;transition:transform .2s}
.al-prodotto img{display:block}
.al-prodotto:hover{transform:translateY(-2px)}
.al-prodotto:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.prodotto dl{margin:0}
.prodotto dt{font-size:14px;color:var(--dim);margin:0 0 2px;font-family:var(--ui);font-weight:600}
.prodotto dd{margin:0 0 16px}
.prodotto .forte{font-family:var(--titoli);font-weight:600;font-size:22px;line-height:1.25}
.vai{font-family:var(--ui);font-weight:600;text-decoration-color:var(--c);text-underline-offset:.25em}

.sistema{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.sistema .apertura{font-family:var(--titoli);font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em;max-width:22ch;color:var(--bianco)}
.principi{list-style:none;margin:0;padding:0}
.principi li{--fs:clamp(26px,3.2vw,40px);position:relative;padding:0 0 30px 40px}
.principi li::before{content:"";position:absolute;left:0;top:calc(var(--fs)*.55 - 8px);z-index:1;width:16px;height:16px;border-radius:50%;background:var(--bianco)}
.principi li:not(:last-child)::after{content:"";position:absolute;left:7px;top:calc(var(--fs)*.55);height:100%;width:2px;background:rgba(255,255,255,.3)}
.principi h3{font-size:var(--fs);margin:0 0 6px;letter-spacing:-.02em;line-height:1.1;color:var(--bianco)}
.principi p{color:var(--dim-scuro);max-width:38ch}

.valore-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.valore-grid h2{margin:0 0 26px;max-width:22ch;font-size:clamp(30px,3.7vw,50px);line-height:1.08}
.valore-grid p{margin:0 0 16px;max-width:46ch}
.valore-grid .muted{color:var(--dim)}
.donna{position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:end}
.donna .pt{position:absolute;left:10.5%;top:16.7%;width:79%;aspect-ratio:1;border-radius:50%;background:var(--red)}
.donna img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.chiusura-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px clamp(32px,6vw,80px);align-items:end}
.chiusura-grid h2{font-size:clamp(38px,5.6vw,84px);line-height:1;letter-spacing:-.035em;margin:0;max-width:none}
.chiusura-grid .intro{max-width:46ch;margin:0}
.band.scura.chiusura{padding-bottom:clamp(40px,6vw,72px)}
.marchio{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(56px,8vw,96px);padding-top:28px;border-top:1px solid #3a4146}
.marchio img{display:block;height:auto;width:min(190px,55%)}
.slogan{font-family:var(--titoli);font-weight:600;font-size:clamp(18px,1.9vw,24px);line-height:1.2;letter-spacing:-.01em;text-align:right}

@media (max-width:1000px){.scelte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .hero,.sistema,.valore-grid,.chiusura-grid{grid-template-columns:1fr}
  /* Su telefono il gruppo deve restare largo abbastanza perche il braccio
     esca dallo schermo invece di finire tagliato a mezz'aria. */
  .cerchi{justify-self:start;max-width:min(520px,84%)}
  .donna{justify-self:start;max-width:380px;margin-bottom:68px}  /* colore e grafite non si toccano */
  .slogan{text-align:left}
}
@media (max-width:640px){.scelte,.prodotto{grid-template-columns:1fr}}

/* ==========================================================================
   PAGINA DILLY
   ========================================================================== */
.marca-prodotto{display:flex;align-items:center;gap:14px;font-family:var(--ui);font-weight:600;font-size:17px;line-height:1.4;margin:0 0 22px}
.marca-prodotto img{width:44px;height:44px;display:block;flex:none;border-radius:10px}

.pick-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.pick-hero h1{font-size:clamp(34px,4.3vw,60px);line-height:1;letter-spacing:-.035em;margin:0 0 26px;max-width:17ch}
.pick-hero .lead{max-width:42ch}
.fiducia{margin-top:20px;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--dim)}

.telefono-wrap{position:relative;justify-self:end;width:100%;max-width:300px}
/* La ragazza appoggiata al telefono come a un muro: schiena sul bordo sinistro,
   piedi alla base del telefono. */
.appoggiata{position:absolute;bottom:0;right:calc(100% - 2px);height:86%;width:auto;max-width:none;pointer-events:none;z-index:0;transform:translateX(6%)}
/* translateX(6%): il piede alzato poggia sul telefono; un po' di schiena e capelli finisce dietro. */
.telefono-wrap::after{content:"";position:absolute;left:-52%;right:4%;bottom:-14px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(38,41,44,.22),rgba(38,41,44,0));z-index:-1}
.telefono{position:relative;z-index:2;background:var(--ink);border-radius:46px;padding:12px;aspect-ratio:9/18.4;box-shadow:0 18px 40px rgba(38,41,44,.14)}
/* Lo schermo dell'app: la stessa schermata del vecchio sito t·pick (16/10/2026),
   con il corallo al posto del viola. */
.schermo-tel{background:var(--bianco);border-radius:36px;height:100%;padding:40px 16px 14px;overflow:hidden;display:flex;flex-direction:column;gap:10px;font-family:var(--app)}
.app-testata{display:flex;justify-content:space-between;align-items:flex-start}
.app-testata span{display:block;font-size:13px;color:var(--dim)}
.app-testata strong{font-size:20px;font-weight:700;color:var(--ink)}
.app-icone{display:flex;gap:6px}
.app-icone span{width:28px;height:28px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink)}
.app-attivita{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--ink)}
.app-attivita small{font-size:12px;font-weight:500;color:#b83e33}
.app-coupon{background:var(--dilly);color:var(--ink);border-radius:16px;padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px}
.app-coupon small{font-size:12px}
.app-coupon strong{font-size:17px;line-height:1.2}
.app-coupon span{align-self:flex-start;background:var(--bianco);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;margin-top:4px}
.app-barra{margin-top:auto;display:flex;justify-content:space-around;border-top:1px solid var(--rule);padding-top:10px;font-size:12px;color:var(--dim)}
.app-barra span:first-child{color:var(--ink);font-weight:600}

.esp2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.esp2 h2{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.08;max-width:15ch}
.esp2 .sotto{font-family:var(--titoli);font-weight:700;font-size:22px;margin:0 0 4px}
.esp2 .intro:first-child{margin-top:0}

/* Fascia del portatile.
   La foto e lo schermo stanno nello stesso contenitore (.fl-tela), così lo
   schermo resta allineato anche quando il testo va sopra, sul telefono. */
.foto-larga{position:relative;border-top:1px solid var(--rule);overflow:hidden}
.fl-tela{position:relative;line-height:0}
.fl-tela>img{width:100%;height:auto;display:block}
/* Lo schermo nella foto è leggermente inclinato all'indietro: la cornice è più
   stretta in alto che in basso (694 contro 708 px su 1700). La stessa
   prospettiva si dà alla dashboard con una rotazione 3D; --p è la distanza
   di vista, proporzionale alla larghezza della foto (16/10/2026). */
.fl-sc{position:absolute;left:42.70%;top:17.20%;width:39.83%;height:51.67%;overflow:hidden;border-radius:3px;background:#17191b;--p:106vw;transform:perspective(var(--p)) rotateX(5deg);transform-origin:50% 50%}
.fl-sc svg{width:100%;height:100%;display:block}
.fl-sc img.portale-reale{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
/* La colonna del sito e' .wrap: max-width 1120 + gutter. Il testo della fascia
   deve partire da li', non da una percentuale a caso. */
.fl-testo{position:absolute;left:max(var(--gutter),calc(50% - 560px + var(--gutter)));top:50%;transform:translateY(-50%);width:min(36%,460px)}
/* Titolo su due righe (18/10/2026): una frase per riga, interlinea più aperta. */
.fl-testo h2{font-size:clamp(28px,3vw,40px);line-height:1.12;margin:0 0 18px;max-width:none}
/* Sugli schermi larghi (18/10/2026) il portatile cresce con la foto, quindi il testo si aggancia alla foto
   invece che alla colonna del sito: il bordo destro del testo sta al 39%, poco prima dello schermo (42,7%). */
@media (min-width:1600px){.fl-testo{left:auto;right:61%;width:auto;max-width:460px}}
.fl-testo p{margin:0 0 10px;font-size:clamp(15px,1.4vw,18px);max-width:34ch}
.fl-testo .did{color:var(--dim);font-size:14px}
.fl-testo .occhiello::before{background:var(--ink)}

.carta .prezzo{font-family:var(--titoli);font-weight:600;font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-.03em;margin:6px 0 14px!important}
.prezzo small{font-size:18px;color:var(--dim);letter-spacing:0}
/* Sotto il prezzo, in piccolo, come viene fatturato (18/10/2026). Il prezzo senza titolo sopra prende il posto del titolo. */
.carta .fatturazione{margin:-8px 0 16px;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.carta .prezzo:first-child,.carta .badge+.prezzo{margin-top:2px!important}
.carta.evid2{background:var(--bianco);border-color:var(--dilly);box-shadow:inset 0 0 0 1px var(--dilly)}
/* Il badge sta sulla linea del bordo, non nel flusso: altrimenti spinge giu'
   il titolo e i tre prezzi non sono piu' allineati fra loro. */
.carta.evid2{position:relative}
/* I bottoni dei prezzi ancorati al fondo della card, non appesi al testo. */
#prezzi .carta{display:flex;flex-direction:column}
.carta .badge{position:absolute;top:0;right:22px;transform:translateY(-50%);background:var(--dilly);color:var(--ink);font-family:var(--ui);font-weight:600;font-size:13px;border-radius:999px;padding:4px 14px;margin:0!important;white-space:nowrap}
.lista{list-style:none;margin:6px 0 4px;padding:0}
.lista li{padding:8px 0 8px 24px;position:relative;font-size:16px;border-top:1px solid var(--rule)}
.lista li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:10px;border-radius:50%;background:var(--dilly)}
.cta-p{margin:22px 0 0!important}
#prezzi .carta .cta-p{margin-top:auto!important;margin-bottom:0!important}
.faq-t{font-size:28px;margin:72px 0 0;letter-spacing:-.02em}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:20px;align-items:start}
.faq details{border-top:1px solid var(--rule);min-width:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;font-family:var(--ui);font-weight:600;font-size:19px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--ui);font-size:24px;line-height:1;color:var(--dim);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--dim);font-size:17px;max-width:46ch}

.priv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.priv2 h2{margin:0;max-width:14ch}
.priv-t p{margin:0 0 20px;max-width:46ch}

.chiusura-c h2{font-size:clamp(38px,5.4vw,78px);line-height:1;letter-spacing:-.035em;max-width:14ch;margin:0}
.intro-c{max-width:46ch;margin-top:24px;font-size:19px}

@media (max-width:900px){
  .pick-hero,.esp2,.tre,.priv2,.faq{grid-template-columns:1fr}
  .telefono-wrap{max-width:300px;justify-self:end;margin-top:8px;zoom:.74}
  /* Fascia del portatile: testo sopra, foto sotto, inquadrata sul portatile */
  .fl-testo{position:static;transform:none;width:auto;padding:40px max(var(--gutter),env(safe-area-inset-right,0px)) 24px max(var(--gutter),env(safe-area-inset-left,0px))}
  .fl-testo h2{font-size:32px}
  .fl-tela{width:170%;margin-left:-58.8%}
  .fl-sc{--p:180vw}
}
@media (max-width:860px){.menu .btn.mini{display:block}}

/* --- Icona di un'app (dilly): quadrato arrotondato, non cerchio --------- */
.app-ic{display:block;border-radius:22.5%;box-shadow:0 6px 16px rgba(38,41,44,.16)}
.marca-prodotto .app-ic{width:60px;height:60px;border-radius:22.5%}
.marca-prodotto .simbolo{width:60px;height:60px;display:block;flex:none}
/* Apertura di akea e di dima: la fotografia scontornata, senza riquadro. */
@media (min-width:901px){body.akea .pick-hero,body.dima .pick-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.monitor-grande,.scena-grande{justify-self:end;width:100%;max-width:640px}
.monitor-grande img,.scena-grande img{width:100%;height:auto;display:block}
@media (max-width:900px){.monitor-grande,.scena-grande{justify-self:start;max-width:330px;margin-top:6px;margin-bottom:60px}}
.prodotto .app-ic{width:64px;height:64px;margin-bottom:14px}

/* --- "dilly mette in relazione": prima l'attività, poi le persone ------- */
.relazione h2{max-width:24ch}
.reti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1.5px solid var(--ink)}
.rete{padding:26px clamp(24px,4vw,56px) 0 0;min-width:0}
.rete+.rete{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px)}
.rete .chi{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:600;font-size:16px;color:var(--dim);margin:0 0 12px}
.rete .chi::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dilly)}
.rete .frase{font-family:var(--titoli);font-weight:600;font-size:clamp(24px,2.8vw,34px);line-height:1.2;max-width:20ch}
.rete.persone .chi::before{background:var(--dim)}
@media (max-width:760px){.reti{grid-template-columns:1fr}.rete{padding-right:0}.rete+.rete{border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:26px}}

/* --- Frase di chiusura di una sezione ------------------------------------ */
.connette{font-family:var(--titoli);font-weight:600;font-size:clamp(22px,2.8vw,34px);line-height:1.15;margin-top:clamp(56px,7vw,88px);max-width:30ch}
.connette2{font-size:19px;color:var(--dim);margin-top:16px;max-width:48ch}

/* --- Casi di dima: righe numerate, non carte ----------------------------- */
.casi{list-style:none;counter-reset:caso;margin:44px 0 0;padding:0}
.casi li{counter-increment:caso;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);gap:12px 32px;align-items:baseline;padding-block:30px;border-top:1px solid var(--rule)}
.casi li:last-child{border-bottom:1px solid var(--rule)}
.casi li::before{content:counter(caso,decimal-leading-zero);font-family:var(--ui);font-weight:600;font-size:17px;color:var(--c)}
.casi h3{margin:0;font-size:clamp(23px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;max-width:16ch}
.casi p{margin:0;color:var(--dim);max-width:44ch}
@media (max-width:760px){.casi li{grid-template-columns:40px minmax(0,1fr);gap:8px 16px}.casi li p{grid-column:2}}

/* --- Pagina contatti ------------------------------------------------------ */
.contatti{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;margin-top:40px}
.modulo{padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;min-width:0}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-family:var(--ui);font-weight:600;font-size:15px}
.campo label small{font-weight:500;color:var(--dim)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--bianco);border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;width:100%}
.campo textarea{min-height:140px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--ink)}
.consenso{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.consenso input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.modulo .invia{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.esito{font-family:var(--ui);font-size:15px;color:var(--dim)}
.contatti-lato{background:var(--ink);color:var(--bianco);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.contatti-lato img{height:92px;width:auto;display:block;align-self:flex-start}
.contatti-lato p{font-family:var(--titoli);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;max-width:16ch}
@media (max-width:860px){.contatti{grid-template-columns:1fr}.contatti-lato{order:-1}.contatti-lato img{height:56px}}
@media (max-width:560px){.modulo{grid-template-columns:1fr}}

/* --- Pagine legali: una sola colonna di testo, larga da leggere ---------- */
.legale{max-width:70ch}
.legale h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:48px 0 12px;max-width:none}
.legale h2:first-of-type{margin-top:36px}
.legale p{margin:0 0 16px}
.legale a{color:inherit;text-decoration-color:var(--c);text-underline-offset:.2em}
.legale .aggiornato{font-family:var(--ui);font-size:15px;color:var(--dim);margin:14px 0 0}
.legale .recapito{margin:0 0 4px}
.titolo-legale{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0}

/* --- Link nel piede ------------------------------------------------------- */
.piede nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--ui);font-size:15px}
.piede nav a{text-decoration:none}
.piede nav a:hover{text-decoration:underline}
.piede .wrap{align-items:flex-start}
.piede .righe-piede{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
@media (max-width:640px){.piede .righe-piede{align-items:flex-start;text-align:left}}

/* Titoli in Lora: spaziatura meno stretta di quella pensata per Chillax */
h2,h3,.sistema .apertura,.carta .prezzo,.rete .frase,.connette,.prodotto .motto,.contatti-lato p,.slogan{letter-spacing:-.012em!important}
/* I titoli d'apertura (h1) restano in Chillax */
h1{font-family:var(--display)!important;letter-spacing:-.035em!important;line-height:1!important}
.prodotto h3,.nome-prodotto{letter-spacing:-.025em!important}

@media (max-width:560px){:root{--gutter:16px}body{font-size:17px}.carta.grande{padding:26px 20px}.carta{padding:24px 22px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ==========================================================================
   PAGINA AKEA (rifatta il 17/10/2026)
   ========================================================================== */
/* Tre punti sotto l'apertura */
.fatti{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.fatti li{padding:20px 20px 0 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.fatti li+li{padding-left:20px;border-left:1px solid var(--rule)}
.fatti b{font-family:var(--titoli);font-weight:600;font-size:clamp(19px,1.8vw,23px);line-height:1.2}
.fatti span{color:var(--dim);font-size:16px;line-height:1.4}
@media (max-width:560px){
  .fatti{grid-template-columns:1fr}
  .fatti li,.fatti li+li{padding:16px 0 0;border-left:0;margin-top:0}
  .fatti li+li{border-top:1px solid var(--rule);margin-top:16px}
}

/* Blocchi funzione: titolo a sinistra, testo e punti a destra */
.blocco{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,88px);align-items:start}
.blocco-testo h3{font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;max-width:16ch}
.blocco.solo h3{margin:0}
.blocco-testo>p{color:var(--dim);font-size:19px;max-width:44ch}
.punti{list-style:none;margin:24px 0 0;padding:0;max-width:46ch}
.punti li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--rule);font-size:17px;line-height:1.45}
.punti li:last-child{border-bottom:1px solid var(--rule)}
.punti li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:50%;background:var(--akea)}
@media (max-width:900px){.blocco{grid-template-columns:1fr;gap:20px}}

/* Fascia scura della diagnostica */
.diag-apertura{font-family:var(--titoli);font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.012em;max-width:28ch;color:var(--bianco)}
.diag-testi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px;margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid #3a4146}
.diag-testi p{color:var(--dim-scuro);font-size:19px;max-width:46ch}
@media (max-width:900px){.diag-testi{grid-template-columns:1fr}}

/* Blocco con foto: la foto occupa tutta l'altezza ed esce dal bordo sinistro,
   taglio netto sopra e sotto sulle linee della sezione; il testo sta nella colonna del sito. */
.foto-blocco{border-top:1px solid var(--rule);overflow:hidden}
.foto-blocco-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px)}
.foto-blocco .blocco-testo{padding-block:clamp(56px,7vw,96px);padding-right:max(var(--gutter),calc(50vw - 560px + var(--gutter)))}
.foto-blocco .foto-medico{order:-1;align-self:stretch;position:relative;min-height:520px}
.foto-blocco .foto-medico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 40%;display:block}
@media (max-width:900px){
  .foto-blocco-grid{grid-template-columns:1fr;gap:0}
  .foto-blocco .blocco-testo{padding:56px var(--gutter) 32px}
  .foto-blocco .foto-medico{order:0;min-height:0}
  .foto-blocco .foto-medico img{position:static;height:auto}
}

/* Tecnologia */
.tecno{list-style:none;margin:0;padding:0}
.tecno li{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-top:1px solid var(--rule)}
.tecno li:last-child{border-bottom:1px solid var(--rule)}
.tecno b{font-family:var(--titoli);font-weight:600;font-size:21px}
.tecno span{color:var(--dim);font-size:17px}
#domande h2{margin-bottom:12px}

/* --- Telefono e iPad (16/10/2026): bersagli da almeno 44px dove si tocca -- */
@media (pointer:coarse){
  .piede nav{gap:0 18px}
  .piede nav a{display:inline-block;padding:10px 0}
  .piede .wrap>a{display:inline-block;padding:8px 8px 8px 0}
  .menu a:not(.btn){padding-block:10px}
  .consenso input{width:24px;height:24px;margin-top:0}
  .consenso{align-items:center}
}

/* --- Modulo contatti collegato al backend (16/10/2026) --------------------- */
.campo-trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modulo .g-recaptcha{grid-column:1/-1}