/* Virdemlux — pagine statiche (chi siamo, contatti, faq) */

.rail-b:hover{background:var(--verde-azione);border-color:var(--verde-azione);color:#fff}

.catc-p{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tint-2)}

/* =====================================================================
   PAGINE ISTITUZIONALI (chi siamo, contatti, faq)
   ===================================================================== */

/* --- blocchi testo + immagine --- */
.blk{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:52px 0}

.blk + .blk{border-top:1px solid var(--line)}

.blk-rev .txt{order:2}

.blk-rev .pic{order:1}

.blk .pic{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#F5F6F4}

.blk .pic img{width:100%;height:100%;object-fit:cover}

.blk h2{font-size:clamp(20px,1.8vw,25px);letter-spacing:-.028em;margin-bottom:12px}

.blk p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.7;margin-bottom:14px}

.blk p:last-child{margin-bottom:0}

.blk strong{color:var(--text);font-weight:600}

.blk .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted);margin-bottom:10px}

/* --- numeri --- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 0;
 border-top:1px solid var(--line)}

.nums div{border-left:2px solid var(--line-2);padding-left:16px}

.nums b{display:block;font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.035em;
 line-height:1}

.nums span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}

/* --- contatti --- */
.contact{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:start;
 padding:36px 0 44px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

.field{margin-bottom:16px}

.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}

.field .req{color:var(--red)}

.field input,.field textarea,.field select{width:100%;min-height:46px;border:1px solid var(--line-2);
 border-radius:8px;padding:12px 13px;background:#fff;font-size:14.5px;color:var(--ink)}

.field textarea{min-height:130px;resize:vertical;line-height:1.55}

.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);
 outline:2px solid var(--focus);outline-offset:1px}

.field .hint{font-size:12px;color:var(--muted);margin:6px 0 0}

.err{color:var(--red);font-size:12.5px;margin:6px 0 0;display:none}

[aria-invalid=true]{border-color:var(--red)!important}

[aria-invalid=true] ~ .err{display:block}

.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);
 margin-bottom:18px;line-height:1.5}

.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:#2F6414}

.status{font-size:14px;font-weight:500;margin:14px 0 0}

.info{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}

.info-tel{display:flex;align-items:center;gap:14px;padding:22px;border-bottom:1px solid var(--line);
 text-decoration:none;color:var(--ink)}

.info-tel i{width:46px;height:46px;border-radius:50%;background:#F5F6F4;color:var(--ink);
 display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}

.info-tel b{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2}

.info-tel span{font-size:12.5px;color:var(--muted)}

.info-tel:hover{text-decoration:none}

.info-tel:hover b{color:var(--verde-testo)}

.info-row{display:flex;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);
 font-size:14px}

.info-row:last-child{border-bottom:0}

.info-row i{color:var(--muted);font-size:19px;flex:none;margin-top:2px}

.info-row b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);margin-bottom:3px}

.info-row span{color:var(--text)}

.info-row a{color:var(--verde-testo)}

.map{border:0;width:100%;height:380px;display:block;border-radius:var(--r);
 border:1px solid var(--line)}

/* --- faq --- */
.faq{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;
 padding:34px 0 56px}

.faq-nav{position:sticky;top:180px}

.faq-nav h2{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted);margin-bottom:12px}

.faq-nav a{display:block;padding:9px 0;font-size:14px;color:var(--text);text-decoration:none;
 border-bottom:1px solid var(--line)}

.faq-nav a:hover{color:var(--ink);text-decoration:none;padding-left:4px}

.faq-g{margin-bottom:38px}

.faq-g > h2{font-size:19px;letter-spacing:-.025em;margin-bottom:14px;padding-bottom:10px;
 border-bottom:1px solid var(--line)}

.qa{border-bottom:1px solid var(--line)}

.qa summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;font-size:15px;
 font-weight:500;color:var(--ink);position:relative;line-height:1.45}

.qa summary::-webkit-details-marker{display:none}

.qa summary:hover{color:var(--verde-testo)}

.qa .a{padding:0 40px 18px 0}

.qa .a p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.7;margin:0 0 12px}

.qa .a p:last-child{margin-bottom:0}

.qa .a strong{color:var(--text);font-weight:600}

.qa .a ul{margin:0 0 12px;padding-left:18px;list-style:disc;color:var(--muted);font-size:14.5px;
 font-weight:300}

.qa .a li{margin-bottom:6px}

/* --- box aiuto in fondo --- */
.help{border:1px solid var(--line);border-radius:var(--r);background:#F7F8F6;padding:26px 30px;
 display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:56px}

.help b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.02em}

.help span{display:block;font-size:14px;color:var(--muted);margin-top:3px}

.help .btn{margin-left:auto}

@media (max-width:980px){
  .blk{grid-template-columns:1fr;gap:24px;padding:36px 0}
  .blk-rev .txt{order:1}.blk-rev .pic{order:2}
  .contact{grid-template-columns:1fr;gap:26px}
  .faq{grid-template-columns:1fr;gap:26px}
  .faq-nav{position:static;display:flex;gap:8px;flex-wrap:wrap}
  .faq-nav h2{flex-basis:100%;margin-bottom:4px}
  .faq-nav a{border:1px solid var(--line-2);border-radius:var(--pill);padding:8px 15px;
   font-size:13.5px}
  .nums{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
  .two{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr}
  .help .btn{margin-left:0}
}

/* ---------------------------------------------------------------
   PAGINA VIDEO
   Le miniature di YouTube sono 16:9: la griglia le rispetta invece
   di ritagliarle in verticale come i riquadri del mockup, che erano
   pensati per riprese verticali.
   --------------------------------------------------------------- */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

@media (max-width:1000px){ .vid-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .vid-grid{grid-template-columns:1fr} }

/* Il player che sostituisce la miniatura al clic. */
.vid-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vid.is-playing img,
.vid.is-playing .vid-play,
.vid.is-playing .vid-cap{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------
   SERVIZI
   Quattro riquadri, stessa forma delle schede del resto del sito.
   Le misure dei testi seguono la scala del sito: 15px il corpo,
   non i 16px del body.
   --------------------------------------------------------------- */
.srv-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  padding:30px 0 6px;
}

.srv{
  border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 24px;background:#fff;
  transition:box-shadow .25s,border-color .25s;
}
.srv:hover{box-shadow:var(--sh);border-color:var(--line-2)}

.srv-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--tint);color:var(--verde-azione);margin-bottom:14px;
}
.srv-i i.ti{font-size:23px}

.srv h2{font-size:17.5px;letter-spacing:-.02em;margin:0 0 8px}
.srv p{margin:0;font-size:15px;font-weight:300;line-height:1.7;color:var(--muted)}

.srv-tail{margin-top:22px}
.srv-tail h2{font-size:17.5px;margin:0 0 10px}

@media (max-width:760px){
  .srv-grid{grid-template-columns:1fr}
}