/* =========================================================
   Tosco Piemontesa — styles.css
   CSS puro, zero dipendenze.
   Palette, geometrie e tipografia allineate 1:1 al sito live
   (valori estratti da et-deferred.css / divi-dynamic.css del live).
   ========================================================= */

/* ---------- Font self-hosted (Inter variabile, subset latin, ~48KB) ---------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2');
}

/* ---------- Reset minimale ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;padding:0;margin:0}

/* ---------- Token ---------- */
:root{
  /* il colore del testo e dei titoli e' sempre #58595b, come nel live */
  --ink:#58595b; --ink-700:#58595b; --ink-400:#7e7f81; --ink-300:#a4a5a7;
  --ink-200:#c8c9ca; --ink-100:#e6e6e7;
  --terra:#b2674d; --terra-600:#955240;
  --panel-warm:#d2c9c8; --panel-teal:#cbd8da; --panel-sage:#c3cdb4; --panel-sand:#d3c4ac;
  --block-yellow:#decc8d; --block-paleteal:#afc7c7; --block-olive:#bcc097; --block-terra:#c7ad9d;
  --footer-bg:#efefef;
  /* Geometria del live: riga 80% / max 1080px, footer max 1200px */
  /* footer allineato alla stessa griglia di header e contenuti */
  --row:1080px; --row-footer:1080px;
  --gutter:5.5%;          /* gutter Divi fra le due colonne della banda */
  --col:47.25%;           /* larghezza colonna 1_2 con gutter */
  --btn-bg:#efefef;
  --wide:1080px; --page:1080px;
  --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-sans);
  font-size:14px; line-height:1.7; color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.1}
::selection{background:var(--terra);color:#fff}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--ink-700);color:#fff;padding:8px 16px;border-radius:4px}

/* ---------- Layout (riga Divi: width 80%, max 1080px) ---------- */
.container{width:80%;max-width:var(--row);margin:0 auto;padding:0}
.container-page{width:80%;max-width:var(--page);margin:0 auto;padding:0}
@media(max-width:767px){.container,.container-page{width:90%}}
.section{padding:64px 0}
@media(min-width:1024px){.section{padding:80px 0}}
/* ritmo verticale della home, ricalcato sul live */
.sec-otros{padding:60px 0 80px}
.sec-benefits{padding:60px 0}
.sec-real{padding:0 0 60px}
@media(min-width:1024px){
  .sec-otros{padding:60px 0 80px}
  .sec-benefits{padding:60px 0}
  .sec-real{padding:0 0 60px}
}
/* offset per àncore sotto l'header sticky */
[id]{scroll-margin-top:90px}
.section-title{text-align:center;color:var(--ink);font-weight:700;font-size:28px;line-height:1.2;margin-bottom:40px}
@media(max-width:767px){.section-title{font-size:22px}}

/* ---------- Bottoni ----------
   Stile globale del live:
   background #efefef · testo #58595b · radius 10px · bold 13px · no maiuscolo
   hover: background #58595b · testo #efefef
   ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease}
.btn-panel,
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;
  font-size:13px;font-weight:700;line-height:1.7;
  text-transform:none;letter-spacing:0;
  color:var(--ink);background:var(--btn-bg);
  border:0;border-radius:10px;
  transition:all .3s ease;
}
.btn-panel:hover,
.btn-pill:hover{background:var(--ink);color:var(--btn-bg)}

/* variante chiara su hero (font 12px come il live) */
.btn-pill-solid{font-size:12px}
/* variante bordata su fondo chiaro: bianco + bordo 1px */
.btn-pill-light,
.btn-pill-dark{background:#fff;color:var(--ink);border:1px solid var(--ink);max-width:100%}
.btn-pill-light:hover,
.btn-pill-dark:hover{background:var(--ink);color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--ink-100);z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
@media(min-width:1024px){.site-header .bar{padding:16px 0}}
.logo img{height:40px;width:auto}
@media(min-width:1024px){.logo img{height:48px}}
.main-nav{display:none;gap:36px;align-items:center}
@media(min-width:1024px){.main-nav{display:flex}}
.main-nav a{font-size:15px;text-transform:uppercase;letter-spacing:0;font-weight:500;color:var(--ink);transition:color .2s}
.main-nav a:hover{color:var(--terra)}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px}
@media(min-width:1024px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink-700);transition:transform .3s,opacity .3s}
.nav-toggle span+span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;background:rgba(210,201,200,.22);border-top:1px solid var(--ink-100)}
.mobile-nav.open{display:block}
/* voci principali */
.mobile-nav a.lvl1{display:block;padding:14px 0;font-size:15px;text-transform:uppercase;letter-spacing:0;font-weight:600;color:var(--ink);border-bottom:1px solid rgba(88,89,91,.14)}
/* prodotti: miniatura a sinistra, testo in tondo */
.mobile-nav a.sub{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(88,89,91,.10);
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);
}
.mobile-nav a.sub img{width:52px;height:52px;object-fit:cover;border-radius:6px;flex:0 0 auto;display:block}
/* azione principale e social in fondo */
.mobile-extra{padding:22px 0 26px}
.mobile-nav a.mobile-cta{
  display:block;text-align:center;
  padding:13px 20px;border-radius:10px;
  background:transparent;border:1px solid rgba(88,89,91,.45);border-bottom:1px solid rgba(88,89,91,.45);
  color:var(--ink);
  font-size:13px;font-weight:600;text-transform:none;letter-spacing:.01em;
}
.mobile-nav a.mobile-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mobile-social{display:flex;justify-content:center;gap:14px;margin-top:18px}
.mobile-nav .mobile-social a{
  width:40px;height:40px;padding:0;border-bottom:0;border-radius:999px;
  background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;
}
.mobile-nav .mobile-social a:hover{background:var(--terra)}
.mobile-nav a.lvl1:last-of-type{border-bottom:0}

/* ---------- Hero ---------- */
.hero{position:relative;height:560px;overflow:hidden;background:var(--ink-700)}
@media(min-width:1024px){.hero{height:640px}}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;color:#fff}
.hero-eyebrow{display:block;font-size:45px;font-weight:700;line-height:1.5;margin-bottom:0}
.hero-title{display:block;font-size:32px;font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:1.5}
@media(max-width:767px){.hero-eyebrow{font-size:33.6px;line-height:1.2}.hero-title{font-size:28px;line-height:1.3}}
.hero-content .btn-pill{margin-top:32px}
.hero-dots{position:absolute;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;z-index:10}
.hero-count{display:inline-flex;align-items:baseline;gap:5px;margin-left:16px;font-size:11px;letter-spacing:.18em;color:#fff;font-variant-numeric:tabular-nums;user-select:none}
.hero-count b{font-weight:700}
.hero-count .sep{opacity:.5;font-weight:400}
.hero-count .tot{opacity:.6;font-weight:400}
.hero-dot{width:32px;height:4px;background:rgba(255,255,255,.4);transition:background .2s}
.hero-dot.active,.hero-dot:hover{background:rgba(255,255,255,.95)}

/* ---------- Intro (sezione live: padding 70px, riga 70%) ---------- */
.intro{padding:70px 0}
@media(max-width:980px){.intro{padding:70px 0 40px}}
@media(max-width:767px){.intro{padding:50px 0 0}}
.intro .container{max-width:calc(var(--row) * .875)}
.intro-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;text-align:center}
@media(min-width:1024px){.intro-grid{grid-template-columns:140px 1fr 140px;gap:24px}}
.intro h2{font-size:28px;line-height:1.2;font-weight:700;color:var(--ink)}
@media(max-width:767px){.intro h2{font-size:18px;line-height:1.1}}
.intro p{margin-top:6px;color:var(--ink);margin-left:auto;margin-right:auto;font-size:13px;line-height:1.7}
.intro .brand-left,.intro .brand-right{display:none}
/* i due marchi hanno proporzioni diverse: vanno dimensionati separatamente,
   il Cobola e' circa il 60% della larghezza del Tosco, come nel live */
.intro .brand img{width:100%;height:auto}
.intro .brand-left img{max-width:150px}
.intro .brand-right img{max-width:92px}
.intro-logos-mobile{display:flex;justify-content:center;gap:40px;margin-top:8px}
.intro-logos-mobile img{width:auto}
.intro-logos-mobile img:first-child{height:48px}
.intro-logos-mobile img:last-child{height:34px}
@media(min-width:1024px){
  .intro .brand-left{display:flex;justify-content:flex-start}
  .intro .brand-right{display:flex;justify-content:flex-end}
  .intro-logos-mobile{display:none}
}

/* ---------- Bande prodotto ----------
   Live: riga con background colorato, 2 colonne 1_2 con gutter 5.5%.
   L'immagine occupa la colonna esterna (47.25%) e ha il raggio 60px
   sull'angolo BASSO esterno. Fra le bande: margin-bottom 10px.
   ------------------------------------------------------------ */
.products{padding:0}
.product-band{display:flex;flex-direction:column;align-items:stretch;margin-bottom:10px}
.product-band:last-child{margin-bottom:0}
@media(min-width:1024px){
  .product-band{flex-direction:row}
  .product-band.reverse{flex-direction:row-reverse}
  .product-band .text{width:calc(var(--col) + var(--gutter));padding:45px var(--gutter) 45px 50px}
  .product-band.reverse .text{padding:45px 50px 45px var(--gutter)}
  .product-band .media{width:var(--col);aspect-ratio:auto}
}
.product-band .text{padding:45px 30px;display:flex;align-items:flex-start}
.product-band .text-inner{width:100%}
.product-band .media{position:relative;aspect-ratio:16/10;overflow:hidden}
.product-band .media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px){
  /* foto a destra -> lato interno = sinistra */
  .product-band:not(.reverse) .media img{left:30px;width:calc(100% - 30px);border-radius:0 0 0 60px}
  /* foto a sinistra -> lato interno = destra */
  .product-band.reverse .media img{left:auto;right:30px;width:calc(100% - 30px);border-radius:0 0 60px 0}
}
.product-band h2{color:#fff;text-transform:uppercase;font-weight:700;font-size:38px;line-height:1.1;margin-bottom:10px}
.product-band p{margin-top:0;margin-bottom:30px;color:var(--ink);font-size:18px;font-weight:300;line-height:1.5}
@media(max-width:767px){
  .product-band h2{font-size:32px}
  .product-band p{font-size:16px}
}
.bg-warm{background:var(--panel-warm)}
.bg-teal{background:var(--panel-teal)}
.bg-sage{background:var(--panel-sage)}
.bg-sand{background:var(--panel-sand)}

/* ---------- Altri prodotti (2 card) ----------
   Live: due colonne 1_2 con gutter 5.5%, contenuto indentato 5%,
   padding-bottom colonna 30px, immagine con raggio 60px sull'angolo
   basso INTERNO (le due card si "guardano").
   ------------------------------------------------------------ */
.more-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){
  .more-grid{grid-template-columns:var(--col) var(--col);justify-content:space-between;gap:0}
}
.more-card{display:flex;flex-direction:column;height:100%;padding-bottom:30px}
.more-card .media{position:relative;aspect-ratio:5/4;overflow:hidden}
.more-card .media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px){
  .more-card:first-child .media img{left:auto;right:5%;width:95%;border-radius:0 0 60px 0}
  .more-card:last-child .media img{left:5%;width:95%;border-radius:0 0 0 60px}
}
.more-card .text{padding:30px 5% 0;flex:1}
.more-card h3{color:#fff;text-transform:uppercase;font-weight:700;font-size:38px;line-height:1.1;margin-bottom:10px}
.more-card p{margin-top:0;margin-bottom:30px;color:var(--ink);font-size:18px;font-weight:300;line-height:1.5;max-width:90%}
@media(max-width:767px){
  .more-card h3{font-size:32px}
  .more-card p{font-size:16px;max-width:100%}
}

/* ---------- Banda immagine full ---------- */
.image-band{overflow:hidden;background:#464646}
.image-band img,.image-band video{display:block;width:100%;height:320px;object-fit:cover}
@media(min-width:1024px){.image-band img,.image-band video{height:650px}}

/* ---------- Divisore con logo ---------- */
.logo-divider{display:flex;align-items:center;gap:24px;margin-bottom:48px}
@media(min-width:1024px){.logo-divider{gap:40px}}
.logo-divider .line{height:1px;background:var(--ink-200);flex:1}
.logo-divider .mark{display:flex;flex-direction:column;align-items:center}
.logo-divider .mark img{width:135px;height:auto}
.logo-divider .mark .n,.logo-divider .mark .s{display:none}

/* ---------- Benefici ----------
   Live: colonne con radius 35px, padding 30px,
   icona in background in basso a destra (155–170px), titolo 34px.
   ------------------------------------------------------------ */
.benefits-grid{display:grid;grid-template-columns:1fr;gap:24px;margin:0 auto}
@media(min-width:768px){.benefits-grid{grid-template-columns:var(--col) var(--col);justify-content:space-between;gap:30px var(--gutter)}}
.benefit{position:relative;overflow:hidden;border-radius:35px;padding:30px;min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.benefit h3{color:#fff;font-weight:700;font-size:34px;line-height:1.1;margin-bottom:35px;max-width:none}
@media(max-width:767px){.benefit h3{font-size:28px;line-height:1;margin-bottom:25px}}
.benefit .btn-panel{position:relative;z-index:2;font-size:12px;background:transparent;border:2px solid #fff;color:#fff}
.benefit .btn-panel:hover{background:#fff;color:var(--bk)}
.benefit .icon{position:absolute;right:10px;bottom:15px;width:160px;max-width:45%;opacity:.95;pointer-events:none}
.b-yellow{background:var(--block-yellow);--bk:var(--block-yellow)}
.b-paleteal{background:var(--block-paleteal);--bk:var(--block-paleteal)}
.b-olive{background:var(--block-olive);--bk:var(--block-olive)}
.b-terra{background:var(--block-terra);--bk:var(--block-terra)}

/* ---------- Realizaciones ---------- */
.real-head{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;margin-bottom:40px}
@media(min-width:1024px){.real-head{grid-template-columns:auto 1fr auto;gap:40px}}
.real-head h2{font-size:28px;line-height:1.2;color:var(--ink)}
.real-head p{color:var(--ink);font-size:14px;font-weight:300;line-height:1.5;text-wrap:balance}
@media(min-width:1024px){.real-head p{text-align:center;max-width:34rem;margin:0 auto}}
.real-wrap{position:relative}
.real-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
@media(min-width:768px){.real-track{grid-auto-columns:50%}}
.real-track::-webkit-scrollbar{display:none}
.real-card{scroll-snap-align:start}
.real-card .media{overflow:hidden;position:relative;aspect-ratio:3/2}
.real-card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.real-card:hover .media img{transform:scale(1.05)}
.real-card p{margin-top:12px;font-size:14px;color:var(--ink)}
.real-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 4px 12px rgba(0,0,0,.12);display:none;align-items:center;justify-content:center;color:var(--ink-700);transition:all .2s;z-index:10}
@media(min-width:768px){.real-btn{display:inline-flex}}
.real-btn:hover{background:var(--terra);color:#fff}
.real-btn.prev{left:8px}
.real-btn.next{right:8px}
/* contatore dei caroselli: stessa grafica del contatore dell'hero */
.slider-count{
  display:flex;align-items:baseline;justify-content:center;gap:5px;
  margin-top:20px;font-size:11px;letter-spacing:.18em;
  color:var(--ink-400);font-variant-numeric:tabular-nums;user-select:none;
}
.slider-count b{font-weight:700;color:var(--ink)}
.slider-count .sep{opacity:.55}
.slider-count .tot{opacity:.7}

/* ---------- Información / contatti ----------
   Live: sezione padding 90px, overlay rgba(18,94,16,.24) (verde),
   riga full-bleed padding 50px 3%.
   ------------------------------------------------------------ */
.informacion{position:relative;padding:90px 0;overflow:hidden;isolation:isolate}
.informacion .bg{position:absolute;inset:0;z-index:-2}
.informacion .bg img{width:100%;height:100%;object-fit:cover}
.informacion::before{content:"";position:absolute;inset:0;background:rgba(18,94,16,.24);z-index:-1}
.informacion .container-page{width:80%;max-width:var(--row);padding:0}
@media(max-width:980px){.informacion{padding:60px 0}}
@media(max-width:767px){.informacion .container-page{width:90%}}
.informacion .grid{display:grid;grid-template-columns:1fr;gap:48px;color:#fff}
@media(min-width:1024px){.informacion .grid{grid-template-columns:1fr 1fr;gap:64px}}
.info-item{display:flex;gap:16px;margin-bottom:32px}
.info-item .ic{width:40px;height:40px;flex-shrink:0}
.info-item h3{font-size:24px;font-weight:800;color:var(--footer-bg);margin-bottom:4px;line-height:1.3}
.info-item p{color:#fff;font-size:15px;font-weight:300;line-height:1.8}
.info-item p.big{font-size:28px;font-weight:300;line-height:1.4}
@media(max-width:767px){.info-item h3{font-size:20px}.info-item p.big{font-size:24px}}
.info-item a:hover{color:#fff;text-decoration:underline}
.contact-form{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.contact-form{grid-template-columns:1fr 1fr}}
.contact-form .full{grid-column:1/-1}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea{
  padding:16px;background:#eee;color:var(--ink);font-size:14px;
  border:2px solid rgba(255,255,255,.4);border-radius:10px;width:100%;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#999}
.contact-form textarea{resize:none}
.contact-form .radios{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
.contact-form .radios label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.contact-form label.check{display:flex;gap:12px;font-size:13px;color:rgba(255,255,255,.95);cursor:pointer;line-height:1.4}
.contact-form label.check input{margin-top:3px}
.contact-form .submit-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.contact-form #form-status{font-size:13px}
.contact-form .btn-pill{padding:20px 40px}
.contact-form input[type=radio],.contact-form input[type=checkbox]{accent-color:var(--terra)}

/* ---------- Footer (live: fondo #efefef, riga max 1200px) ---------- */
.site-footer{background:var(--footer-bg);color:var(--ink);padding:64px 0 32px}
.site-footer .container{max-width:var(--row-footer)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(5,1fr);gap:32px}}
.footer-grid .brand{grid-column:span 2}
@media(min-width:1024px){.footer-grid .brand{grid-column:span 1}}
.site-footer p,.site-footer a,.site-footer li{font-size:13px;line-height:1.5}
.site-footer h3{font-size:15px;color:var(--ink);font-weight:700;margin-bottom:12px}
.site-footer h4{font-size:14px;color:var(--ink);font-weight:700;margin-top:16px;margin-bottom:4px}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--terra)}
.footer-logo{height:64px;width:auto}
.footer-cobola{height:44px;width:auto;margin-top:36px}
.footer-links li{margin-bottom:4px}
.footer-links .arrow{color:var(--ink);margin-right:4px}
.footer-tmc{width:100%;max-width:200px;height:auto;background:var(--ink);padding:10px}
.footer-bottom{margin-top:48px;padding-top:24px;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;font-size:12px;color:var(--ink)}
.social{display:flex;gap:16px}
.social a{width:42px;height:42px;background:var(--ink);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.social a:hover{background:var(--terra);color:#fff}
.footer-legal{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.footer-bottom .copy{text-align:center}

/* =========================================================
   MEGAMENU — pannello a tutta larghezza con le foto prodotto.
   Si apre al passaggio del mouse e da tastiera (focus-within).
   ========================================================= */
/* la voce occupa tutta l'altezza della barra: senza questo, scendendo
   verso il pannello il puntatore attraversa una zona morta e il menu si chiude */
.main-nav{align-items:stretch}
.main-nav .nav-item{position:static;display:flex;align-items:center;align-self:stretch}
.main-nav .nav-item > .nav-link{display:inline-flex;align-items:center;height:100%}
.main-nav .nav-link{display:inline-flex;align-items:center}
.has-mega > .nav-link::after{
  content:"";display:inline-block;margin-left:7px;
  width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s ease;
}
.has-mega:hover > .nav-link::after,
.has-mega:focus-within > .nav-link::after{transform:translateY(1px) rotate(225deg)}
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;
  border-top:1px solid var(--ink-100);
  box-shadow:0 18px 44px rgba(20,20,20,.10);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  z-index:120;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s;
}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 0 38px}
.mega-card{display:block}
.mega-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-100)}
.mega-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.mega-card:hover .mega-media img{transform:scale(1.05)}
.mega-name{
  display:block;margin-top:13px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink);transition:color .2s;
}
.mega-card:hover .mega-name{color:var(--terra)}
@media(max-width:1023px){.mega{display:none}}
/* voci prodotto nel menu mobile */

/* firma dell'agenzia nel footer */
.footer-bottom .copy a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.footer-bottom .copy a:hover{color:var(--terra);border-bottom-color:currentColor}

/* lo scorrimento morbido va disattivato con il movimento ridotto */
@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================
   FOOTER — revisione di allineamenti e spazi
   Prima: 5 colonne identiche da 190px, troppo strette per i
   testi lunghi, con la colonna del marchio molto più carica
   delle altre e i titoli di secondo livello sfalsati.
   ========================================================= */
@media(min-width:1024px){
  /* la colonna del marchio è più larga, quelle di soli link più strette */
  .footer-grid{grid-template-columns:1.45fr 1.15fr 1.15fr 1.1fr .95fr;gap:40px}
}
/* i titoli di secondo livello dentro una colonna hanno tutti lo stesso stacco */
.site-footer h3 + ul + h3,
.site-footer h3 + p + h4,
.site-footer h4{margin-top:26px}
.site-footer h3[style]{margin-top:26px!important}
/* la targa del premio non deve dominare la colonna */
.footer-tmc{max-width:150px;padding:8px}
/* riga finale: su schermo largo sta su un rigo solo */
.footer-bottom{margin-top:52px;padding-top:26px;border-top:1px solid rgba(88,89,91,.16)}
@media(min-width:768px){
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:24px}
  .footer-bottom .copy{text-align:left;order:1;margin-right:auto}
  .footer-bottom .social{order:2}
  .footer-bottom .footer-legal{order:3}
}

/* =========================================================
   Riga di separazione fra sezioni, senza il marchio ripetuto
   ========================================================= */
.section-rule{height:1px;background:var(--ink-200);margin-bottom:48px}

/* =========================================================
   Intestazione: si fa più bassa e discreta dopo lo scorrimento,
   così il marchio non compete con quello del footer
   ========================================================= */
.site-header .bar{transition:padding .28s ease}
.logo img{transition:height .28s ease}
@media(min-width:1024px){
  .site-header.is-compact .bar{padding:9px 0}
  .site-header.is-compact .logo img{height:36px}
}
.site-header.is-compact{box-shadow:0 1px 10px rgba(20,20,20,.08)}
@media(prefers-reduced-motion: reduce){
  .site-header .bar,.logo img{transition:none}
}

/* --- Footer: il blocco Cobola scende in fondo alla colonna,
       allineandosi alla base di quella accanto --- */
@media(min-width:1024px){
  /* align-items:flex-start, altrimenti il logo viene stirato a tutta colonna
     e il disegno dentro l'SVG si centra da solo */
  .footer-grid .brand{display:flex;flex-direction:column;align-items:flex-start}
  .footer-grid .brand .brand-cobola{margin-top:auto;margin-bottom:46px;padding-top:24px}
  .footer-grid .brand .footer-cobola{margin-top:0}
}

/* ponte invisibile fra la voce e il pannello, così il passaggio del mouse non si interrompe */
.has-mega::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;display:none}
.has-mega:hover::after,.has-mega.is-open::after{display:block}

/* =========================================================
   Correzioni mobile (17/09/2026, dopo la verifica su iPhone/Android)
   ========================================================= */
/* Rete di sicurezza contro lo scorrimento laterale: "clip" non crea un
   contenitore di scroll, quindi la testata sticky continua a funzionare. */
html,body{overflow-x:clip}
/* I figli della griglia del form non possono allargarla oltre la colonna. */
.contact-form > *{min-width:0}
@media(max-width:767px){
  /* 16px evita lo zoom automatico di iOS al tocco del campo; appearance:none
     toglie bordi e ombre di sistema di Safari. */
  .contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea{
    font-size:16px;-webkit-appearance:none;appearance:none;
  }
  .contact-form .radios{gap:12px 24px}
  .contact-form input[type=radio],.contact-form input[type=checkbox]{width:18px;height:18px;flex:0 0 auto}
  /* Messaggio di stato sopra al bottone, bottone a tutta larghezza. */
  .contact-form .submit-row{flex-direction:column;align-items:stretch;gap:12px}
  .contact-form #form-status:empty{display:none}
  .contact-form .submit-row .btn-pill{width:100%;text-align:center;padding:18px 24px}
}

/* =========================================================
   Correzioni mobile, seconda serie (17/09/2026, segnalazioni di Marco)
   ========================================================= */
@media(max-width:767px){
  /* home: aria fra i loghi e la prima scheda prodotto */
  .intro-logos-mobile{margin:16px 0 28px}
  /* home, schede "Protección": l'icona non passa più sotto al titolo */
  .benefit h3{max-width:64%;position:relative;z-index:2}
  .benefit .icon{width:120px;max-width:32%;right:14px;bottom:14px;opacity:.9}
  /* home, slider Realizaciones: frecce anche da telefono e nome del progetto più grande */
  .real-btn{display:inline-flex;width:40px;height:40px}
  .real-btn.prev{left:6px}
  .real-btn.next{right:6px}
  .real-card p{font-size:18px;font-weight:600;color:var(--ink-700)}
  /* footer: logo Tosco centrato in alto, blocco Cobola in fondo dopo le colonne */
  .footer-grid .brand{display:contents}
  .footer-grid .footer-logo{grid-column:1/-1;justify-self:center;height:72px}
  .footer-grid .brand-cobola{grid-column:1/-1;order:99;padding-top:28px;border-top:1px solid var(--ink-100)}
  .footer-grid .footer-cobola{margin-top:0}
}

/* Sezione contatti (home e Contacto): la colonna della griglia non può allargarsi oltre il contenitore.
   Con "1fr" il minimo era il contenuto più largo, cioè l'indirizzo email a 24 px (parola unica, 367 px con
   icona): sotto i 412 px il form, nella stessa colonna, sbordava a destra. */
.informacion .grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.informacion .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.info-item > *{min-width:0}
@media(max-width:767px){
  .info-item p.big{font-size:clamp(17px,5.6vw,24px);overflow-wrap:anywhere}
}

/* Footer da telefono: area di tocco dei link almeno 24px (audit Lighthouse "target-size") */
@media(max-width:767px){
  .footer-links a{display:inline-block;padding:5px 0}
  .footer-links li{margin-bottom:0}
}