/* =====================================================================
   Due Torri Servizi — pagine servizio (disinfestazione, volatili, pulizie)
   Si carica DOPO css/v5.css e ne riusa token, header, prima/dopo, FAQ, CTA e footer.
   Niente 3D: hero tipografico su blu notte, il resto statico.
   ===================================================================== */

/* header sempre pieno: niente hero 3D sotto */
.pg-srv .hdr { background: rgba(15, 42, 74, .97); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.pg-srv .nav a[aria-current="page"]::after { transform: scaleX(1); background: #A9CDE6; }

/* ---------- Hero servizio ---------- */
.srv-hero { position: relative; padding: calc(var(--hdr-h) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 110px); color: #fff;
  background-image: url("../img/gen/tx-inchiostro.webp"), radial-gradient(120% 80% at 20% 0%, #163A63 0%, var(--notte) 62%);
  background-size: 520px, auto; background-blend-mode: soft-light, normal; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(28px, 4vw, 56px); font: 500 .74rem/1.3 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.crumbs a { text-decoration: none; border-bottom: 1px solid rgba(169, 205, 230, .5); }
.crumbs a:hover { color: #fff; border-color: #fff; }
.crumbs span[aria-hidden] { color: #A9CDE6; }
.srv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: end; }
.srv-hero h1 { font: 400 clamp(3.4rem, 9vw, 9.4rem)/.88 var(--anton); text-transform: uppercase; letter-spacing: -.015em; }
.srv-hero h1 span { display: block; }
.srv-hero h1 em { display: block; margin-top: .12em; font: italic 350 .44em/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 100; text-transform: none; letter-spacing: -.03em; color: #A9CDE6; }
.srv-hero .lead { max-width: 46ch; margin-top: 28px; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.srv-hero .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.srv-hero .tel-big { display: inline-flex; align-items: baseline; gap: 10px; font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--anton); letter-spacing: .01em; text-decoration: none; }
.srv-hero .tel-big span { font: 600 .74rem/1 var(--cond); letter-spacing: .2em; color: #A9CDE6; }
.srv-hero .tel-big:hover { color: #A9CDE6; }

/* scheda rapida a destra */
.scheda { border-top: 3px solid #A9CDE6; }
.scheda div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.scheda dt { font-size: .76rem; color: #A9CDE6; padding-top: 3px; }
.scheda dd { margin: 0; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .9); }

/* ---------- Sezioni chiare ---------- */
.srv-sec { padding: clamp(64px, 8vw, 128px) 0; background: #fff; }
.srv-sec.alt { background: var(--intonaco); }
.srv-sec .eyebrow { color: var(--navy); }
.srv-sec .t-big { font-size: clamp(2.8rem, 6.2vw, 6.4rem); color: var(--navy); }
.srv-sec .t-big em { color: var(--blu); }
.srv-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 84px); }
.srv-intro p { max-width: 46ch; font-size: 1.12rem; line-height: 1.65; }
.srv-intro p em { font: italic 400 1.15em/1.4 var(--serif); color: var(--blu); }

/* metodo: quattro passi numerati */
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); counter-reset: p; list-style: none; padding: 0; }
.passi li { padding-top: 18px; border-top: 2px solid var(--navy); }
.passi .n { display: block; font: 400 clamp(4rem, 6vw, 6rem)/.8 var(--anton); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--blu); margin-bottom: 18px; }
.passi h3 { font: 400 1.7rem/1 var(--anton); text-transform: uppercase; color: var(--navy); }
.passi p { margin-top: 12px; color: var(--ink-60); line-height: 1.6; }

/* cosa trattiamo / sistemi: schede */
.voci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(15, 42, 74, .18); border: 1px solid rgba(15, 42, 74, .18); }
.voci > div { padding: clamp(22px, 2.6vw, 34px); background: #fff; }
.srv-sec.alt .voci > div { background: var(--intonaco); }
.voci h3 { font: 400 1.55rem/1 var(--anton); text-transform: uppercase; color: var(--navy); }
.voci h3 small { display: block; margin-top: 8px; font: 600 .74rem/1 var(--cond); letter-spacing: .14em; color: var(--blu); }
.voci p { margin-top: 12px; line-height: 1.6; color: var(--ink-60); }
.voci .verde h3 small { color: #3F7A57; }

/* tavola illustrata accanto al testo */
.srv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); align-items: center; }
.srv-split .tavola { width: 100%; max-width: 560px; margin: 0; justify-self: center; }
.srv-split .tavola::before { background: rgba(58, 124, 165, .55); }
.srv-split p + p { margin-top: 16px; }
.srv-split .body p { max-width: 50ch; font-size: 1.08rem; line-height: 1.65; }
.srv-split .chips { color: var(--navy); }

/* blocco HACCP su blu notte */
.haccp { background: var(--navy); color: #fff; background-image: url("../img/gen/tx-inchiostro.webp"); background-size: 520px; background-blend-mode: soft-light; }
.haccp .eyebrow { color: rgba(255, 255, 255, .8); }
.haccp .t-big { color: #fff; }
.haccp .t-big em { color: #A9CDE6; }
.haccp .srv-intro p { color: rgba(255, 255, 255, .86); }
.haccp .passi li { border-top-color: #A9CDE6; }
.haccp .passi .n { -webkit-text-stroke-color: #A9CDE6; }
.haccp .passi h3 { color: #fff; }
.haccp .passi p { color: rgba(255, 255, 255, .78); }

/* prima/dopo: ereditato da v5.css (.archi .ba .pair .ph) */
.srv-sec .archi.due { grid-template-columns: 1fr 1fr; }
.srv-nota { margin-top: 28px; color: var(--ink-60); font-size: .95rem; }

/* altri servizi */
.altri { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.altri a { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; min-height: 160px; padding: clamp(22px, 2.6vw, 34px); border-radius: 4px; background: var(--navy); color: #fff; text-decoration: none; transition: background var(--t-state); }
.altri a:hover { background: var(--cotto-d); }
.altri b { display: block; font: 400 clamp(2rem, 3.4vw, 3.2rem)/.95 var(--anton); text-transform: uppercase; }
.altri small { display: block; margin-top: 10px; font-size: 1rem; color: rgba(255, 255, 255, .78); }
.altri .arr { font-size: 1.6rem; color: #A9CDE6; }

/* FAQ senza schede */
.pg-srv .faq-panel { border-top: 3px solid var(--navy); }
.pg-srv .faq-sub { margin: 34px 0 6px; color: var(--blu); }

/* CTA: il bordo sul blu */
.pg-srv .cta { padding-top: clamp(56px, 7vw, 100px); }
.pg-srv .cta-grid { border-top-color: rgba(255, 255, 255, .3); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .passi { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .voci { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .srv-hero-grid, .srv-intro, .srv-split { grid-template-columns: 1fr; }
  .srv-split .tavola { justify-self: start; }
}
@media (max-width: 720px) {
  .srv-hero h1 { font-size: clamp(2.7rem, 13.4vw, 4.6rem); }
  .srv-hero .btn { width: 100%; }
  .scheda div { grid-template-columns: 1fr; gap: 4px; }
  .passi, .voci, .altri, .srv-sec .archi.due { grid-template-columns: 1fr; }
  .pg-srv .mbar { transform: none; }
  .pg-srv .foot { padding-bottom: 62px; }
}
.pg-srv .faq-sub.first { margin-top: 0; }
.pg-srv .cta-top .stamp { color: #A9CDE6; }

/* pulizie: rampa alta a sinistra, garage e cotto impilati a destra */
.srv-sec .archi.pul { grid-template-columns: .8fr 1.2fr; }
.srv-sec .archi.pul .ba:nth-child(1) { grid-row: span 2; }
.srv-sec .archi.pul .ba:nth-child(2) { grid-column: auto; order: 0; }
.srv-split .body .t-big { margin-bottom: 24px; }
@media (max-width: 720px) {
  .srv-sec .archi.pul { grid-template-columns: 1fr; }
  .srv-sec .archi.pul .ba:nth-child(1) { grid-row: auto; }
}
.srv-split.solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.voci .ico { display: block; width: 44px; height: 44px; margin-bottom: 18px; color: var(--blu); }
.voci .verde .ico { color: #3F7A57; }
/* informativa privacy */
.privacy h2 { margin: 36px 0 10px; font: 400 1.5rem/1.1 var(--anton); text-transform: uppercase; color: var(--navy); }
.privacy p { margin: 0 0 14px; max-width: 70ch; line-height: 1.7; color: var(--ink); }
.privacy a { color: var(--blu); }

/* zone servite: "Non è in elenco?" occupa tutta la riga, qualunque sia il numero dei gruppi */
#zone .voci > div:last-child { grid-column: 1 / -1; }

/* documenti e lavora con noi: due riquadri, due colonne (niente cella vuota) */
@media (min-width: 721px) { #documenti .voci, #lavora .voci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* area clienti */
.area-login { display: grid; gap: 8px; max-width: 420px; margin-top: 24px; }
.area-login label { font: 600 .8rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-top: 10px; }
.area-login input { padding: 14px 12px; border: 1.5px solid rgba(15, 42, 74, .35); border-radius: 4px; font: 500 1.05rem/1.3 var(--sans); background: #fff; color: var(--ink); }
.area-login input:focus { outline: 2px solid var(--blu); outline-offset: 1px; }
.area-login .btn { margin-top: 14px; justify-self: start; }
.area-err { color: #B71F1F; font-weight: 600; }
.area-nota { font-size: .9rem; color: var(--ink-60); margin-top: 10px; }
.area-pan { margin-top: 24px; }
.area-pan:focus, .area-pan h2:focus { outline: none; }
.area-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.area-head .btn-line { color: var(--navy); border-color: rgba(15, 42, 74, .4); }
.area-head .btn-line:hover { background: var(--navy); color: #fff; }
.area-blocco { border-top: 1px solid rgba(15, 42, 74, .2); padding: 22px 0; }
.area-blocco h3 { font: 400 1.4rem/1 var(--anton); text-transform: uppercase; color: var(--navy); margin-bottom: 14px; }
.area-servizi { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.area-servizi li { padding: 8px 14px; border-radius: 999px; background: #EAF4EC; color: #1E6B34; font-weight: 600; }
.area-sugg { display: inline-block; margin: 0 10px 10px 0; padding: 10px 16px; border: 1.5px solid var(--blu); border-radius: 999px; color: var(--blu); font-weight: 600; text-decoration: none; }
.area-sugg:hover { background: var(--blu); color: #fff; }
.area-doc { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.area-doc a { font-weight: 600; color: var(--navy); }
.area-doc small { color: var(--ink-60); }
.area-vuoto { color: var(--ink-60); }
.area-login[hidden], .area-pan[hidden] { display: none; }
.area-blocco label { display: block; font-weight: 600; margin-bottom: 8px; }
.area-blocco select { width: 100%; max-width: 480px; padding: 12px 14px; border: 1.5px solid rgba(15, 42, 74, .4); border-radius: 8px; font: inherit; color: var(--navy); background: #fff; }
.area-sugg { margin-top: 14px; }
.area-popup { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: min(340px, calc(100vw - 32px)); padding: 18px 44px 18px 18px; border-radius: 12px; background: #fff; color: var(--navy); box-shadow: 0 10px 34px rgba(15, 42, 74, .28); border: 1px solid rgba(15, 42, 74, .15); display: grid; gap: 6px; }
.area-popup p { font-weight: 700; margin: 0; }
.area-popup small { color: var(--ink-60); }
.area-popup .btn { margin-top: 10px; justify-self: start; }
.area-popup-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--navy); cursor: pointer; }