/* TaTech · COMPONENTI comuni delle pagine (tpl/componenti.mjs). Una pagina aggiunge stili propri SOLO in p-<slug>.css.
   Indice: sezioni · apertura interna · briciole · testo+foto · schede · spunte · passi · faq · prezzi · chip · nota · scopri
           · gruppi di servizi / numeri / modi · negozio · fascia contatti */

/* ---------- sezioni ---------- */
.sez{padding:clamp(72px,9vw,128px) 0}
.sez--bianco{background:var(--bianco)}
.sez--sabbia{background:var(--sabbia)}
.sez--notte{background:var(--notte);color:var(--nebbia)}
.sez--notte .h2,.sez--notte h3{color:#fff}
.sez--notte .sotto{color:var(--nebbia)}
.sez--carta + .sez--carta,.sez--bianco + .sez--bianco,.sez--sabbia + .sez--sabbia{padding-top:0}
.ap-int:not(:has(.ap-punti)) + .sez--carta{padding-top:clamp(8px,2vw,24px)}
.wrap-stretta{max-width:960px}
.sez-testa{margin-bottom:clamp(36px,4.5vw,60px)}
.sez-centro{text-align:center}.sez-centro .et{justify-content:center}.sez-centro .h2,.sez-centro .sotto{margin-left:auto;margin-right:auto}
.prosa{max-width:40em}
.prosa p{font-size:clamp(18px,1.35vw,20px)}
.prosa p+p{margin-top:16px}
.rivela{border-radius:var(--r-foto);overflow:hidden}
.rivela .foto{height:100%}

/* ---------- apertura di pagina interna ---------- */
.ap-int{padding-top:var(--testata);background:var(--carta)}
.ap-int-in{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(48px,7vh,88px)}
.ap-int--foto .ap-int-in{grid-template-columns:7fr 5fr}
.ap-int-h1{font-weight:800;font-size:clamp(40px,5.2vw,76px);line-height:1;letter-spacing:-.035em;max-width:15ch;margin:0 0 24px}
.ap-int-h1 em{font-style:normal;color:var(--rosso)}
.ap-int-p{font-size:clamp(18px,1.45vw,21px);max-width:38em;color:var(--grafite)}
.ap-int-az{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ap-int-riga{margin-top:18px;font:400 14px/1.5 var(--f-mono);color:var(--ferro)}
.ap-int-riga a{text-decoration:none;border-bottom:1px solid var(--linea)}
.ap-int-riga a:hover{color:var(--rosso);border-color:var(--rosso)}
.ap-int-foto{margin:0}
.ap-int-img{border-radius:var(--r-foto);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--ombra)}
.ap-int-img .foto{height:100%}
.ap-int-foto figcaption{margin-top:12px;font:400 13px/1.4 var(--f-mono);color:var(--ferro)}
.ap-punti{background:var(--bianco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ap-punti ul{display:flex;flex-wrap:wrap;gap:8px 36px;padding-top:16px;padding-bottom:16px}
.ap-punti li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.ap-punti .spunta{width:20px;height:20px;color:var(--rosso)}
@media (max-width:1023px){.ap-int--foto .ap-int-in{grid-template-columns:1fr}.ap-int-img{aspect-ratio:16/10}}
@media (max-width:520px){.ap-int-az .btn{width:100%}}

/* ---------- briciole ---------- */
.briciole{margin-bottom:22px}
.briciole ol{display:flex;flex-wrap:wrap;gap:4px 0;font:400 13px/1.4 var(--f-mono);color:var(--ferro)}
.briciole li+li::before{content:"/";margin:0 10px;color:#8E8B84}
.briciole a{text-decoration:none;border-bottom:1px solid transparent}
.briciole a:hover{color:var(--rosso);border-color:var(--rosso)}
.briciole [aria-current]{color:var(--grafite)}

/* ---------- testo + foto ---------- */
.tf{display:grid;grid-template-columns:6fr 5fr;gap:clamp(36px,6vw,96px);align-items:center}
.tf--inv{grid-template-columns:5fr 6fr}
.tf--inv .tf-foto{order:-1}
.tf .sez-testa{margin-bottom:22px}
.tf-corpo p{font-size:clamp(18px,1.35vw,20px);max-width:36em}
.tf-corpo p+p{margin-top:16px}
.tf-corpo .spunte,.tf-corpo + *{margin-top:26px}
.tf-foto{margin:0}
.tf-foto figcaption{margin-top:12px;font:400 13px/1.4 var(--f-mono);color:var(--ferro)}
.tf + .tf{margin-top:clamp(64px,8vw,120px)}
@media (max-width:1023px){.tf,.tf--inv{grid-template-columns:1fr}.tf--inv .tf-foto{order:0}}

/* ---------- schede ---------- */
.schede{display:grid;grid-template-columns:repeat(var(--col,3),minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.scheda{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r)}
.schede--piena .scheda{background:var(--bianco);box-shadow:0 1px 0 var(--linea),0 0 0 1px var(--linea) inset}
.sez--bianco .schede--piena .scheda{background:var(--carta)}
.schede--bordo .scheda{border:1px solid var(--linea);background:transparent}
.schede--notte .scheda{background:var(--notte-2);color:var(--nebbia)}
.schede--notte .sc-t{color:#fff}
.sc-n{font:500 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--rosso)}
.schede--notte .sc-n{color:var(--brace)}
.sc-t{font-size:clamp(21px,1.7vw,25px);letter-spacing:-.02em}
.sc-p{color:var(--ferro);font-size:17px}
.schede--notte .sc-p{color:var(--nebbia)}
.sc-punti{display:grid;gap:8px;margin-top:6px}
.sc-punti li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}
.sc-punti .spunta{width:18px;height:18px;flex:none;margin-top:3px;color:var(--rosso)}
.schede--notte .sc-punti .spunta{color:var(--brace)}
.sc-nota{margin-top:auto;padding-top:12px;font:400 14px/1.45 var(--f-mono);color:var(--ferro)}
.sc-link{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--rosso-scuro);text-decoration:none}
.sc-link .fr{width:20px;height:12px;transition:transform .25s}
.sc-link:hover .fr{transform:translateX(5px)}
.schede--notte .sc-link{color:var(--brace)}
@media (max-width:1023px){.schede{grid-template-columns:repeat(min(var(--col,3),2),minmax(0,1fr))}}
@media (max-width:640px){.schede{grid-template-columns:1fr}}

/* ---------- elenco con spunte ---------- */
.spunte{display:grid;grid-template-columns:repeat(var(--col,1),minmax(0,1fr));gap:16px clamp(20px,3vw,40px)}
.spunte li{display:flex;gap:12px;align-items:flex-start}
.spunte .spunta{width:24px;height:24px;flex:none;margin-top:2px;color:var(--rosso)}
.spunte h3{font-size:20px;margin-bottom:4px}
.spunte p{color:var(--ferro);font-size:17px}
.spunte--scuro .spunta{color:var(--brace)}.spunte--scuro p{color:var(--nebbia)}.spunte--scuro h3{color:#fff}
@media (max-width:760px){.spunte{grid-template-columns:1fr}}

/* ---------- passi numerati con la traccia ---------- */
.passi{--gap:clamp(20px,3vw,48px);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--gap)}
.passi li{position:relative;padding-top:58px}
.ps-nodo{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--rosso);color:#fff;font:700 16px/1 var(--f-tit);box-shadow:0 0 0 6px var(--carta);z-index:1}
.sez--bianco .ps-nodo{box-shadow:0 0 0 6px var(--bianco)}.sez--sabbia .ps-nodo{box-shadow:0 0 0 6px var(--sabbia)}.sez--notte .ps-nodo{box-shadow:0 0 0 6px var(--notte)}
.passi li:not(:last-child)::before{content:"";position:absolute;left:19px;top:18px;height:2.5px;width:calc(100% + var(--gap));background:linear-gradient(var(--rosso),var(--rosso)) 0 0/calc(var(--k,1)*100%) 100% no-repeat,var(--linea)}
.passi h3{font-size:clamp(20px,1.6vw,23px);margin-bottom:8px}
.passi p{color:var(--ferro);font-size:17px}
.sez--notte .passi p{color:var(--nebbia)}
.ps-nota{margin-top:10px;font:400 13px/1.4 var(--f-mono)!important;color:var(--rosso-scuro)!important;text-transform:uppercase;letter-spacing:.06em}
.sez--notte .ps-nota{color:var(--brace)!important}
@media (max-width:860px){.passi{grid-template-columns:1fr;--gap:36px}}
@media (max-width:860px){.passi li,.passi--v li{padding:0 0 0 58px}.passi li:not(:last-child)::before{left:18px;top:19px;width:2.5px;height:calc(100% + var(--gap));background:linear-gradient(var(--rosso),var(--rosso)) 0 0/100% calc(var(--k,1)*100%) no-repeat,var(--linea)}}
.passi--v{grid-template-columns:1fr;--gap:36px}
.passi--v li{padding:0 0 0 58px}
.passi--v li:not(:last-child)::before{left:18px;top:19px;width:2.5px;height:calc(100% + var(--gap));background:linear-gradient(var(--rosso),var(--rosso)) 0 0/100% calc(var(--k,1)*100%) no-repeat,var(--linea)}

/* ---------- domande frequenti ---------- */
.faq{border-top:1px solid var(--linea);max-width:900px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:700 clamp(19px,1.5vw,22px)/1.3 var(--f-tit)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:18px;height:18px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--rosso);transition:transform .25s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover{color:var(--rosso-scuro)}
.faq-r{padding:0 0 24px;max-width:46em;color:var(--ferro)}
.sez--notte .faq,.sez--notte .faq details{border-color:var(--notte-2)}.sez--notte .faq summary{color:#fff}.sez--notte .faq-r{color:var(--nebbia)}

/* ---------- prezzi ---------- */
.piani{display:grid;grid-template-columns:repeat(var(--col,3),minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.piano{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--bianco);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);box-shadow:0 0 0 1px var(--linea) inset}
.piano--top{box-shadow:0 0 0 2px var(--rosso) inset}
.pn-badge{position:absolute;top:-12px;left:24px;background:var(--rosso);color:#fff;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.piano h3{font-size:22px}
.pn-prezzo{display:flex;align-items:baseline;gap:8px}
.pn-prezzo b{font:800 clamp(40px,4vw,54px)/1 var(--f-tit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pn-prezzo span{color:var(--ferro);font-size:16px}
.pn-nota{font:400 13px/1.4 var(--f-mono);color:var(--ferro)}
.piano .btn{margin-top:auto}
.tabella-w{margin-top:clamp(40px,5vw,64px)}
.tab-t{font-size:22px;margin-bottom:14px}
.tabella-scorri{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:0 0 0 1px var(--linea) inset;background:var(--bianco)}
.tabella{border-collapse:collapse;width:100%;min-width:520px;font-size:17px}
.tabella th,.tabella td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--linea)}
.tabella thead th{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ferro);background:var(--sabbia)}
.tabella tbody th{font-weight:700}
.tabella td:last-child{font-family:var(--f-tit);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabella tbody tr:last-child th,.tabella tbody tr:last-child td{border-bottom:0}
.tab-nota{margin-top:14px;font:400 14px/1.5 var(--f-mono);color:var(--ferro)}
@media (max-width:1023px){.piani{grid-template-columns:1fr;max-width:520px}}

/* ---------- chip (marche, tecnologie) ---------- */
.chip-t{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ferro);margin:6px 0 8px}
.chip{display:flex;flex-wrap:wrap;gap:8px}
.chip li{padding:6px 12px;border-radius:999px;background:var(--sabbia);font-size:15px;line-height:1.3}
.sez--sabbia .chip li{background:var(--bianco)}
.schede--notte .chip li,.sez--notte .chip li{background:var(--notte);color:var(--nebbia)}

/* ---------- nota ---------- */
.nota{border-left:3px solid var(--rosso);background:var(--bianco);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;max-width:52em}
.nota--rosa{background:var(--rosa)}
.nota-t{font:700 18px/1.3 var(--f-tit);margin-bottom:6px}
.nota p:not(.nota-t){color:var(--ferro);font-size:17px}
.nota--rosa p:not(.nota-t){color:var(--rosso-scuro)}

/* ---------- «scopri di più» ---------- */
.scopri{margin-top:clamp(28px,3vw,40px)}
.scopri a{display:inline-flex;align-items:center;gap:12px;font:700 18px/1.2 var(--f-tit);color:var(--rosso-scuro);text-decoration:none;padding:6px 0;border-bottom:2px solid currentColor}
.scopri .fr{width:22px;height:12px;transition:transform .25s}
.scopri a:hover .fr{transform:translateX(5px)}
.contatti .scopri a,.sez--notte .scopri a{color:var(--brace)}

/* ---------- gruppi di servizi, numeri, modi (sezione .servizi della home e pagina Servizi) ---------- */
.servizi{background:var(--sabbia);padding:clamp(80px,11vw,150px) 0}
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(40px,5vw,64px) 0;padding:28px 0;border-top:1px solid #D9D6CF;border-bottom:1px solid #D9D6CF}
.numeri b{display:block;white-space:nowrap;font:800 clamp(30px,3.3vw,48px)/1 var(--f-tit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.numeri span{display:block;margin-top:8px;color:var(--ferro);font-size:16px}
.gruppi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.gruppo h3{font-size:22px}
.gr-s{color:var(--ferro);font-size:16px;margin:8px 0 14px;min-height:3em}
.gruppo li{border-top:1px solid #D9D6CF}
.gruppo a{display:block;padding:14px 0;text-decoration:none}
.vc-n{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 20px/1.2 var(--f-tit)}
.vc-n .fr{width:20px;height:12px;flex:none;color:var(--rosso);transition:transform .25s}
.vc-d{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:var(--ferro)}
.gruppo a:hover .vc-n{color:var(--rosso-scuro)}
.gruppo a:hover .fr{transform:translateX(5px)}
.modi{margin-top:clamp(48px,6vw,72px);background:var(--bianco);border-radius:var(--r);padding:28px clamp(20px,3vw,36px);display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:start}
.modi h3{font-size:22px;max-width:9em}
.modi ul{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.modi li{font-size:16px;color:var(--ferro);line-height:1.5}
.modi b{display:block;color:var(--grafite);font:700 18px/1.2 var(--f-tit);margin-bottom:6px}
@media (max-width:1023px){.gruppi{grid-template-columns:1fr 1fr}.numeri{grid-template-columns:1fr 1fr}.modi{grid-template-columns:1fr}.modi ul{grid-template-columns:1fr}.gr-s{min-height:0}}
@media (max-width:620px){.gruppi{grid-template-columns:1fr}}

/* ---------- negozio ---------- */
.negozio{padding:clamp(80px,11vw,150px) 0}
.negozio-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,72px);align-items:center}
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;aspect-ratio:4/3.3}
.mosaico figure{margin:0;border-radius:var(--r);overflow:hidden}
.mosaico .foto{height:100%}
.m1{grid-column:1/4;grid-row:1/3}.m2{grid-column:4;grid-row:1}.m3{grid-column:4;grid-row:2}.m4{grid-column:1/3;grid-row:3}.m5{grid-column:3/5;grid-row:3}
.ng-dati>p{margin-top:14px;color:var(--ferro)}
.ng-ind{display:flex;gap:10px;align-items:flex-start;color:var(--grafite)!important;font-weight:700;margin-top:22px!important}
.ng-ind .ico{color:var(--rosso);margin-top:3px}
.orari{border-collapse:collapse;margin-top:22px;width:100%;max-width:440px}
.orari th,.orari td{text-align:left;padding:10px 0;border-top:1px solid var(--linea);font-size:17px}
.orari th{font-weight:500;color:var(--ferro);padding-right:16px}
.orari td{font-family:var(--f-tit);font-weight:700;font-variant-numeric:tabular-nums}
.ng-zone{font:400 14px/1.6 var(--f-mono);color:var(--ferro)}
.ng-az{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mappa{margin-top:32px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--sabbia)}
.mappa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:1023px){.negozio-in{grid-template-columns:1fr}.mappa{aspect-ratio:4/3}}
@media (max-width:620px){.mosaico{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto}.mosaico figure{aspect-ratio:4/3}.m1{grid-column:1/3;grid-row:auto;aspect-ratio:16/10!important}.m2,.m3,.m4,.m5{grid-column:auto;grid-row:auto}}

/* ---------- fascia contatti (fondo Notte) ---------- */
.contatti{background:var(--notte);color:var(--nebbia);padding:clamp(80px,11vw,150px) 0 clamp(56px,7vw,96px)}
.contatti .h2{color:#fff}
.contatti .sotto{color:var(--nebbia)}
.canali{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,4vw,56px)}
.canali a{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--notte-2);border-radius:var(--r);padding:26px 24px;text-decoration:none;color:var(--nebbia);border:1px solid transparent;transition:border-color .2s,transform .2s}
.canali a:hover{border-color:var(--brace);transform:translateY(-2px)}
.canali .ico{width:28px;height:28px;color:var(--brace);margin-bottom:10px}
.cn-t{font:500 13px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cenere)}
.canali b{font:700 clamp(22px,2vw,28px)/1.15 var(--f-tit);color:#fff;letter-spacing:-.01em;overflow-wrap:anywhere}
.cn-d{font-size:16px;color:var(--cenere)}
.altri{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:28px;font-size:16px;color:var(--cenere)}
.altri a{color:#fff;font-weight:700;margin-right:6px}
.altri a:hover{color:var(--brace)}
.ct-risp{margin-top:18px;font:400 14px/1.4 var(--f-mono);color:var(--cenere)}
@media (max-width:860px){.canali{grid-template-columns:1fr}}