/* ══════════════════════════════════════════════════════════════
   AURALINK — pagine di approfondimento
   Si carica dopo stile.css e ne usa i token, i componenti e il tema
   AURA. Aggiunge solo quello che le due pagine principali non hanno:
   la copertina breve con le briciole, l'articolo con l'indice a
   fibra, la misura rame/fibra, la tabella dei piani, i rimandi fra
   le pagine e la mappa nel piede.
   ══════════════════════════════════════════════════════════════ */

/* ══ COPERTINA BREVE ═════════════════════════════════════════
   La stessa copertina, più bassa: qui si arriva da una ricerca e il
   testo deve cominciare presto. */
#apertura.breve{padding:150px 0 3.8rem}
#apertura.breve h1{font-size:clamp(2.1rem,5vw,3.6rem);max-width:22ch}
#apertura.breve p.sotto{margin-bottom:2.1rem}
#apertura.breve .orbo{margin-bottom:1.4rem}

.briciole{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.2rem .55rem;list-style:none;margin:0 0 1.3rem;font-size:.8rem;color:var(--tx3)}
.briciole li{display:flex;align-items:center;gap:.55rem}
.briciole li+li::before{content:'';width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--ciano),var(--viola))}
.briciole a{color:var(--tx2);transition:color .2s var(--e)}
.briciole a:hover{color:var(--tx)}
.briciole [aria-current]{color:var(--tx2)}

/* ══ IL PASSAGGIO DAL BUIO AL CHIARO ═════════════════════════
   La stessa sfumatura corta di «Chi siamo», su una classe invece che
   su un id, così ogni pagina la usa dove le serve. */
.sez.passaggio{padding-top:4.6rem}
.sez.passaggio::before{content:'';position:absolute;left:0;right:0;top:0;height:56px;
  pointer-events:none;
  background:linear-gradient(180deg,var(--scuro) 0%,#141A30 22%,#4A5578 48%,
    #A3B0C8 74%,#DCE4EE 90%,var(--chiaro) 100%)}
.tema-aura .sez.passaggio::before{background:linear-gradient(180deg,#1C1814 0%,#2E2721 22%,
    #6E6254 48%,#B8AD9C 74%,#E6DED1 90%,var(--chiaro) 100%)}
.sez.tenue{background:var(--chiaro2)}

/* ══ L'ARTICOLO ══════════════════════════════════════════════
   A sinistra l'indice, a destra il testo. L'indice è una fibra: la
   luce scende mentre si legge (pagine.js imposta --p) e ogni nodo si
   accende quando il suo capitolo arriva in alto. */
.articolo{display:grid;grid-template-columns:220px minmax(0,1fr);gap:4.2rem;
  max-width:1060px;margin:0 auto;align-items:start}

.indice{position:sticky;top:112px;--p:0}
.indice-t{font-size:.8rem;font-weight:600;color:var(--in3);margin:0 0 1rem 30px}
.indice ol{position:relative;list-style:none;display:grid;gap:.95rem}
.indice ol::before,.indice ol::after{content:'';position:absolute;left:6px;top:9px;
  bottom:9px;width:3px;border-radius:3px;background:rgba(11,24,34,.09)}
.tema-aura .indice ol::before,.tema-aura .indice ol::after{background:rgba(44,62,80,.10)}
.indice ol::after{bottom:auto;height:calc(var(--p) * (100% - 18px));
  transition:height .6s var(--e);
  background:linear-gradient(180deg,var(--teal),var(--ciano) 30%,var(--blu) 60%,var(--viola));
  box-shadow:0 0 12px rgba(95,200,220,.35)}
.tema-aura .indice ol::after{background:linear-gradient(180deg,#9C7F4A,#B8985F 40%,#B07D62 80%,#7F8D6B);
  box-shadow:0 0 12px rgba(184,152,95,.35)}
.indice a{position:relative;z-index:1;display:grid;grid-template-columns:15px 1fr;gap:15px;
  align-items:start;font-size:.84rem;line-height:1.4;color:var(--in2);
  transition:color .3s var(--e)}
.indice a:hover{color:var(--in)}
.indice a:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.nodo{width:15px;height:15px;margin-top:.02em;border-radius:50%;background:var(--chiaro);
  border:2px solid rgba(11,24,34,.18);
  transition:border-color .45s var(--e),box-shadow .45s var(--e)}
.indice .acceso{color:var(--in)}
.indice .acceso .nodo{border-color:var(--teal);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ciano) 18%,transparent)}
.tema-aura .indice .acceso .nodo{border-color:#9C7F4A;
  box-shadow:0 0 0 5px rgba(184,152,95,.18)}

/* il testo: una colonna da leggere, non da guardare */
.testo{max-width:68ch;color:var(--in2);font-size:1.02rem;line-height:1.78}
.testo h2{margin-top:3.4rem}
.testo>h2:first-child,.testo .art-n+h2{margin-top:0}
.testo .art-n{margin-top:3.4rem}
.testo>.art-n:first-child{margin-top:0}
.testo h2{font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.15;color:var(--in);
  margin-bottom:1.1rem;text-wrap:balance}
.testo h3{font-size:1.14rem;color:var(--in);margin:2rem 0 .55rem;letter-spacing:-.014em}
.testo p+p{margin-top:1rem}
.testo strong{color:var(--in);font-weight:600}
.testo a:not(.bt){color:#3B67B8;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.testo a:not(.bt):hover{color:#5A5FC0}
.tema-aura .testo a:not(.bt){color:#8A6E3C}
.tema-aura .testo a:not(.bt):hover{color:#B07D62}
.testo ul{list-style:none;display:grid;gap:.6rem;margin:1.2rem 0}
.testo li{position:relative;padding-left:1.6rem}
.testo li::before{content:'';position:absolute;left:0;top:.42em;width:13px;height:13px;
  border-radius:50%;background:conic-gradient(var(--ciano),var(--viola),var(--ciano));
  box-shadow:inset 0 0 0 3.4px var(--chiaro)}
.tema-aura .testo li::before{background:conic-gradient(#B8985F,#CBB892,#B07D62,#B8985F)}

/* ══ LA MISURA: RAME CONTRO FIBRA ════════════════════════════
   Due tratte in scala reale: il rame si ferma a 90 metri, la fibra
   arriva a 950. La lunghezza è il dato, non una decorazione. */
.misura{margin:2rem 0 .4rem;padding:1.5rem 1.6rem 1.3rem;border-radius:20px;
  border:1px solid var(--filoc);background:var(--chiaro2)}
.misura-riga{display:grid;grid-template-columns:4.6rem 1fr;align-items:center;gap:1rem}
.misura-riga+.misura-riga{margin-top:1.1rem}
.misura-nome{font-size:.86rem;font-weight:600;color:var(--in)}
.misura-tratta{position:relative;height:24px}
.misura-tratta i{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;
  width:var(--l)}
.misura-tratta b{position:absolute;top:50%;transform:translate(10px,-50%);left:var(--l);
  font-size:.84rem;font-weight:600;color:var(--in);white-space:nowrap}
.misura-tratta.t-rame i{background:#B87333}
.misura-tratta.t-rame i::after{content:'';position:absolute;right:-1px;top:-5px;width:2px;
  height:14px;border-radius:2px;background:#B87333}
.misura-tratta.t-fibra i{background:linear-gradient(90deg,var(--teal),var(--ciano) 30%,
  var(--blu) 62%,var(--viola));box-shadow:0 0 12px rgba(95,200,220,.35);overflow:hidden}
.misura-tratta.t-fibra i::after{content:'';position:absolute;top:0;bottom:0;width:90px;left:-90px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:bagliore 3.6s var(--e) infinite}
.misura-tratta.t-fibra b{left:auto;right:0;transform:translateY(-140%)}
.misura figcaption{margin-top:1rem;font-size:.82rem;line-height:1.55;color:var(--in3)}

/* ══ AURA · LA TABELLA DEI PIANI ═════════════════════════════
   Le stesse voci delle tre schede, messe in fila: si legge per riga
   cosa aggiunge ogni piano. Su schermo stretto scorre dentro il suo
   riquadro, mai la pagina. */
.tabella-piani{margin-top:2.4rem;overflow-x:auto;border:1px solid var(--filoc);
  border-radius:20px;background:#fff}
.tabella-piani table{width:100%;min-width:620px;border-collapse:collapse;font-size:.88rem}
.tabella-piani caption{text-align:left;padding:1.1rem 1.4rem .2rem;font-size:.82rem;color:var(--in3)}
.tabella-piani th,.tabella-piani td{padding:.85rem 1.1rem;text-align:center;
  border-bottom:1px solid var(--filoc);vertical-align:middle}
.tabella-piani tbody tr:last-child th,.tabella-piani tbody tr:last-child td{border-bottom:0}
.tabella-piani thead th{font-size:1rem;font-weight:600;color:var(--in);padding-top:1.2rem}
.tabella-piani thead th small{display:block;font-size:.76rem;font-weight:500;color:var(--in3);
  margin-top:.15rem}
.tabella-piani tbody th{text-align:left;font-weight:500;color:var(--in2);line-height:1.45}
.tabella-piani .in-evidenza{background:rgba(184,152,95,.07)}
.tabella-piani thead .in-evidenza{box-shadow:inset 0 3px 0 #B8985F}
.tabella-piani .si,.tabella-piani .no{display:inline-block;width:16px;height:16px;
  border-radius:50%;vertical-align:middle}
.tabella-piani .si{background:conic-gradient(#B8985F,#CBB892,#B07D62,#B8985F);
  box-shadow:inset 0 0 0 4px #fff}
.tabella-piani .in-evidenza .si{box-shadow:inset 0 0 0 4px #FBF8F2}
.tabella-piani .no{border:2px dashed rgba(44,62,80,.22)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ══ AURA · IL CONFRONTO, NEI COLORI DI AURA ═════════════════
   I componenti .confronto/.colonna/.voce sono in stile.css; qui
   prendono il tema caldo e i due segni (anello aperto, anello chiuso). */
.confronto.due{gap:1.4rem;margin-top:2.4rem}
.tema-aura .colonna.si .voce{border-color:rgba(184,152,95,.32);
  box-shadow:0 3px 14px rgba(44,62,80,.05)}
.tema-aura .colonna.si .eti-col{color:#9C7F4A}
.tema-aura .voce{color:var(--in2)}
.segno circle{fill:none;stroke-width:2}
.colonna:not(.si) .segno circle{stroke:#B4ADA2;stroke-dasharray:30 8}
.colonna.si .segno circle{stroke:#B8985F}
.colonna.si .segno .punto{fill:#B07D62;stroke:none}
.eti-col{font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:600}

/* ══ TRE QUADRI ══════════════════════════════════════════════
   Le schede scure della rete, in fila da tre. */
.quadri.tre{grid-template-columns:repeat(3,1fr)}

/* ══ I RIMANDI FRA LE PAGINE ═════════════════════════════════
   Le schede chiare di «Come funziona», qui intere cliccabili: ogni
   pagina porta alle pagine vicine. */
a.fatto{color:inherit}
a.fatto:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.tema-aura a.fatto:focus-visible{outline-color:#B8985F}
.rimandi .fatto p{margin-bottom:.2rem}

/* ══ IL PIEDE ════════════════════════════════════════════════
   Quattro colonne su tutta la larghezza: chi siamo in una riga, le
   pagine di Auralink, le pagine di AURA, i contatti. Sotto, separata
   da un filo, la riga della società con privacy e cookie. */
.piede{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.4rem 3rem}
.piede-marchio img{height:38px;width:auto}
.piede-marchio p{margin-top:1.1rem;max-width:32ch;font-size:.88rem;line-height:1.65;color:#93A3B2}
.piede-t{font-size:.86rem;font-weight:600;color:#DCE6EC;margin-bottom:.9rem}
.piede-col ul{list-style:none;display:grid;gap:.55rem}
.piede-col li{font-size:.86rem;line-height:1.5}
.piede-col li.acceso-p{display:flex;margin-top:.35rem}
.piede-base{display:flex;justify-content:space-between;align-items:center;gap:.8rem 2rem;
  flex-wrap:wrap;margin-top:3.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);
  font-size:.8rem;color:#7F8FA0}
.tema-aura .piede-marchio p{color:#B9AE9E}
.tema-aura .piede-t{color:#F1E8D8}
.tema-aura .piede-base{border-top-color:rgba(246,240,230,.1);color:#A89A8C}

/* ══ SCHERMI STRETTI ═════════════════════════════════════════ */
@media (max-width:1060px){
  .quadri.tre{grid-template-columns:1fr 1fr}
  .articolo{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .indice{position:static;max-width:68ch;padding:1.2rem 1.3rem;border:1px solid var(--filoc);
    border-radius:18px;background:var(--chiaro2)}
  .indice-t{margin-left:30px}
}
@media (max-width:760px){
  #apertura.breve{padding:120px 0 3.2rem}
  .quadri.tre{grid-template-columns:1fr}
  .testo{font-size:.98rem}
  .misura{padding:1.2rem 1.1rem 1.1rem}
  .misura-riga{grid-template-columns:1fr;gap:.35rem}
}

/* Il piede: la discesa dal chiaro al buio è lunga e
   fissa (--discesa), e tutto il contenuto comincia dopo, sul buio
   pieno. In percentuale la sfumatura si allungava con il piede e le
   voci finivano a metà del gradiente. */
footer:has(.piede){--discesa:340px;padding-top:calc(var(--discesa) + 3.2rem);
  background:linear-gradient(180deg,var(--chiaro2) 0,#EAF0F5 calc(var(--discesa) * .08),
    #D2DDE7 calc(var(--discesa) * .17),#A9B8CA calc(var(--discesa) * .29),
    #7C8AA6 calc(var(--discesa) * .41),#515F83 calc(var(--discesa) * .53),
    #2E3A5C calc(var(--discesa) * .67),#1A2140 calc(var(--discesa) * .80),
    #0F1428 calc(var(--discesa) * .91),#0B1220 var(--discesa))}
.tema-aura footer:has(.piede){
  background:linear-gradient(180deg,#F7F4EE 0,#EFE9DF calc(var(--discesa) * .08),
    #DCD2C2 calc(var(--discesa) * .17),#BCAF9C calc(var(--discesa) * .29),
    #958775 calc(var(--discesa) * .41),#6C5F51 calc(var(--discesa) * .53),
    #4A4038 calc(var(--discesa) * .67),#2B2620 calc(var(--discesa) * .80),
    #211C17 calc(var(--discesa) * .91),#1C1814 var(--discesa))}
/* l'alone che respira resta sul buio, sotto la discesa */
footer:has(.piede)::before{top:calc(var(--discesa) - 40px);height:auto;bottom:-10%}
@media (max-width:760px){footer:has(.piede){--discesa:240px}}

/* la foto dentro l'articolo: il plastico a filo, la didascalia sotto */
.testo figure.foto{margin:1.8rem 0 .4rem}
.testo figure.foto picture,.testo figure.foto img{display:block;width:100%;height:auto;
  border-radius:18px}
.testo figure.foto img{aspect-ratio:16/9;object-fit:cover;background:var(--scuro2)}
.testo figure.foto figcaption{margin-top:.75rem;font-size:.82rem;line-height:1.55;color:var(--in3)}

/* «Wi-Fi» non si spezza a fine riga nei titoli */
.nb{white-space:nowrap}

/* la tabella su telefono: le tre colonne dei piani restano in vista,
   strette, e la colonna delle voci prende il resto */
@media (max-width:760px){
  .tabella-piani table{min-width:0;font-size:.8rem}
  .tabella-piani caption{padding:1rem .9rem .1rem}
  .tabella-piani th,.tabella-piani td{padding:.7rem .35rem}
  .tabella-piani tbody th{padding-left:.9rem}
  .tabella-piani thead th{font-size:.78rem;line-height:1.25}
  .tabella-piani thead th small{display:none}
  .tabella-piani tbody td,.tabella-piani thead th{width:4rem}
}

/* ══ I RIMANDI DALLE PAGINE PRINCIPALI ═══════════════════════
   In fondo a una sezione della landing o della pagina AURA, i
   pulsanti verso la pagina che approfondisce quella sezione. */
.approfondisci{margin-top:2.4rem}
.approfondisci .bt span{font-size:1em}
@media (max-width:1060px){
  .piede{grid-template-columns:repeat(3,minmax(0,1fr))}
  .piede-marchio{grid-column:1 / -1}
}
@media (max-width:640px){
  .piede{grid-template-columns:1fr 1fr;gap:2rem 1.6rem}
  .piede-col:last-child{grid-column:1 / -1}
  .piede-base{flex-direction:column;align-items:flex-start}
}

/* ══ LE PAGINE LEGALI ════════════════════════════════════════
   Privacy e cookie usano lo stesso articolo con l'indice a fibra.
   Il numero dell'articolo resta sopra il titolo perché le pagine si
   citano fra loro («articoli 2 e 4»). */
.aggiornato{position:relative;z-index:2;margin-top:-.6rem;margin-bottom:2rem;font-size:.82rem;
  color:var(--tx3)}
.art-n{font-size:.8rem;font-weight:600;color:var(--in3);margin-bottom:.35rem}
/* on legal pages the article number sits above the heading: keep it in view */
.testo .art-n+h2{scroll-margin-top:2.2rem}

/* la tabella dei trattamenti */
.tabella-dati{margin:1.4rem 0;overflow-x:auto;border:1px solid var(--filoc);border-radius:18px;
  background:#fff}
.tabella-dati table{width:100%;min-width:560px;border-collapse:collapse;font-size:.88rem;line-height:1.6}
.tabella-dati th,.tabella-dati td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--filoc)}
.tabella-dati tr:last-child td{border-bottom:0}
.tabella-dati thead th{font-size:.8rem;font-weight:600;color:var(--in3);background:var(--chiaro2)}
.tabella-dati td{color:var(--in2)}
.tabella-dati td strong{display:block;color:var(--in)}

/* un passaggio da tenere in evidenza (il reclamo al Garante) */
.riquadro{margin:1.6rem 0 .4rem;padding:1.2rem 1.4rem;border-radius:16px;background:var(--chiaro2);
  border:1px solid var(--filoc);border-left:3px solid var(--teal)}
.riquadro{font-size:.95rem}

/* la verifica dei cookie: quattro passi e l'esito */
.verifica{margin:1.6rem 0 .4rem;padding:1.4rem 1.5rem;border-radius:18px;background:var(--chiaro2);
  border:1px solid var(--filoc)}
.verifica h3{margin-top:0}
.verifica ol{margin:.9rem 0 0 1.2rem;display:grid;gap:.6rem}
.verifica ol li{padding-left:.3rem}
.verifica ol li::marker{color:var(--teal);font-weight:600}
.verifica .nota{color:var(--in3)}
.esito{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:12px;background:#fff;
  border:1px solid rgba(46,147,168,.28);font-size:.95rem}
kbd{font:600 .8em var(--mono);padding:.08rem .4rem;border-radius:5px;background:#fff;
  border:1px solid var(--filoc);border-bottom-width:2px;color:var(--in);white-space:nowrap}

/* le due famiglie di cookie */
.famiglie{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.famiglia{padding:1.2rem 1.3rem 1rem;border-radius:16px;border:1px solid var(--filoc);background:#fff;
  display:flex;flex-direction:column}
.famiglia h3{margin:0 0 .5rem;font-size:1.02rem}
.famiglia p{font-size:.9rem;line-height:1.65}
.famiglia .stato-c{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--filoc);
  font-size:.84rem;color:var(--in3)}
.famiglia .stato-c strong{color:var(--teal)}
@media (max-width:760px){.famiglie{grid-template-columns:1fr}}
/* i passi della verifica sono una sequenza vera: numeri, non anelli */
.testo .verifica ol li{display:list-item}
.testo .verifica ol li::before{content:none}

/* ══ LA LINGUA ═══════════════════════════════════════════════
   IT / EN nella barra, fra il menu e il pulsante. Porta alla stessa
   pagina nell'altra lingua. Su telefono resta fuori dal menu a
   tendina: chi non legge l'italiano deve trovarla senza aprirlo. */
.lingua{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);flex:0 0 auto}
.lingua a,.lingua span{font-size:.72rem;font-weight:700;letter-spacing:.06em;line-height:1;
  padding:.38rem .55rem;border-radius:999px;color:#9FB0BE;transition:background .2s var(--e),color .2s var(--e)}
.lingua a:hover{color:#fff;background:rgba(255,255,255,.08)}
.lingua a:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.lingua [aria-current]{color:#0B1220;background:#E8EEF2}
.tema-aura .lingua{border-color:rgba(246,240,230,.16)}
.tema-aura .lingua a{color:#CFC8BC}
.tema-aura .lingua [aria-current]{color:#1C1814;background:#F6F0E6}
@media (max-width:980px){
  .barra .in{gap:.6rem}
  /* the menu rules of stile.css hide every nav in the bar: this one stays */
  .barra nav.lingua{display:inline-flex;position:static;flex-direction:row;gap:2px;padding:3px;
    background:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:none}
  .barra nav.lingua a,.barra nav.lingua span{padding:.38rem .55rem;font-size:.72rem}
  .lingua{order:1;margin-left:auto}
  #menu{order:2;margin-left:0}
  .barra .bt{order:3;margin-left:0}
}
/* the bar items never wrap; captions give way first */
.barra nav a{white-space:nowrap}
@media (max-width:1120px){.marchio-aura small{display:none}}
/* the menu button never gives way; on the narrowest screens the contact
   button takes its short label (i18n ctaBreve) */
#menu{flex:0 0 auto}
.cta-breve{display:none}
@media (max-width:440px){
  .barra .in{gap:.45rem;padding-left:.9rem}
  .barra .bt{padding:.55rem .95rem}
  .cta-lungo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cta-breve{display:inline}
}

/* the Auralink bar: entries left next to the logo, the door to AURA right
   next to the language switch. The AURA bar keeps its centred menu, and
   below 980px both fold into the menu button. */
@media (min-width:981px){
  body:not(.tema-aura) .barra nav:not(.lingua){flex:1 1 auto;margin-left:.6rem}
  body:not(.tema-aura) .barra nav a.verso-aura{margin-left:auto}
}