@charset "UTF-8";

@font-face {
    font-family: 'Lexend Deca';
    src: url(../fonts/LexendDeca-VariableFont_wght.woff2);
    font-optical-sizing: auto;
    font-style: normal;
    font-display: swap;
}

:root {
  --ink: #37353E; /* #101828;*/
  --muted: #475467;
  --grigiochiaro: #dddddd;
  --line: #e4e7ec;
  --soft: #f2f4f7;
  /* --accent: #c2410c; */
  --accent: #B3003C;
  --accent-d: #9a3412;
  --focus: #1d4ed8;
  --azzurro: #2A639A;
  --header-h: 64px;
  --container: 1320px; /* 1200px */
  --font-primary: "Lexend Deca", sans-serif;
}

html {font-size: 20px;}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

body {
    font-family: var(--font-primary); font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1.6; color: var(--ink); font-size: 1rem; }

ul, ol { list-style: none;}
img { max-width: 100%; height: auto; }
.radius {border-radius: 10px;}

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; }

.container {width: min(var(--container), 100% - 2rem); margin-inline: auto; }
.site-footer { background: #F5F5F5; background: radial-gradient(circle, rgba(245, 245, 245, 1) 0%, rgba(217, 217, 217, 1) 100%); color: var(--ink); padding-block: 2.5rem;}
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem);}

/* ----LINK---- */
a { text-decoration: none; }
a:link, a:visited, a:hover, a:active {color: var(--muted);}
a.red:link, a.red:visited {color: var(--accent); font-weight: 600;}
a.red:hover, a.red:active {color: var(--accent-d);}
a.black:link, a.black:visited {color: var(--muted); font-weight: 600;}
a.black:hover, a.black:active {color: var(--ink);}
a.btncta:link, a.btncta:visited {border: 1px solid #ccc; padding: 0.5rem 1rem; border-radius: 10px; text-transform: uppercase; font-weight: 600; color: #2A639A; display: inline-block;}
a.btncta:hover, a.btncta:active {background-color: #F7F7F7; color: #245684;}
a.foot:link, a.foot:visited {color: var(--muted); font-size: 0.9rem;}
a.foot:hover, a.foot:active {color: var(--accent);}


a.ico:link {background-color: #ccc;}
a.ico:hover {background-color: #eeeded;}

.social {display: flex; gap: 1rem;}
.social img {background-color: #BFC6C4; border-radius: 10px;}
.social img:hover {background-color: #BFC9D1;}

a.svcl:link, a.svcl:visited {color: #fff;}

/* ---- testi ---- */
h1 {font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 .5em; }
h2 {font-size: clamp(1.6rem, 3.5vw, 2.2rem);  margin: 0 0 1rem;}
h3, .h3 {font-size: clamp(1.3rem, 3vw, 1.5rem);  margin: 0 0 1rem;}
h4, .h4 {font-size: clamp(1.1rem, 2vw, 1.15rem);  margin: 0 0 0.5rem;}

address {font-style: normal;}
.centrato {text-align: center;}
.text-intro { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.text-small {font-size: 0.8rem; color: var(--muted);}
.titolo {font-size: 1.2rem; text-transform: uppercase; color: var(--azzurro); font-weight: 600;}

/* --- margini - padding --- */
.mb1 {margin-bottom: 1rem;}
.mb2 {margin-bottom: 2rem;}
.mt1 {margin-top: 1rem;}
.mt3 {margin-top: 3rem;}



.footer-grid, .sez-2 { display: grid; gap: 2rem; }
.sez-2 {justify-items: center;}

.servizi {display: grid; /*gap: 1rem;*/}
.item {display: grid; justify-items: center;}
.item-serv {padding: 2rem; display: flex; flex-direction: column; justify-content: space-between;} 

.flex-row {display: flex; flex-wrap: wrap; gap: 2rem;}

.menu-f li {display: flex; align-items: center; margin-bottom: 0.5rem;}

/* pulsante */
.btn-fill-left {
    position: relative; display: inline-block; padding: 0.5rem 1rem;color: var(--muted); text-decoration: none; overflow: hidden; z-index: 1; transition: color .4s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; }
    /* inizialmente è solo una barra verticale */
.btn-fill-left::before{
    content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--accent); transition: width .4s ease; z-index: -1; }
    /* hover */
.btn-fill-left:hover {
    color: #fff; }
.btn-fill-left:hover::before {
    width: 100%; }



.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 300; background: #fff;  color: var(--ink);  padding: .7rem 1rem;  font-weight: 600; border: 2px solid var(--ink); }
.skip-link:focus {
  top: 1rem; }

:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px; }
.topbar :focus-visible .site-footer :focus-visible {
  outline-color: #fff;
}

/* ===== Top bar: solo desktop, scorre via con la pagina ===== */
.topbar {
  display: none; color: var(--muted);  font-size: 0.75rem;  border-bottom: 1px solid var(--grigiochiaro); padding: .5rem 0; }

.topbar-inner {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .55rem; }

.topbar-contacts {
    display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

.topbar a {
  text-underline-offset: .2em; }

/* ===== Header sticky: sfondo a tutta larghezza ===== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }

.header-inner {
    display: flex; align-items: center; justify-content: space-between;  min-height: var(--header-h); }

.menu-toggle {
    position: relative; z-index: 120; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; }

.menu-toggle .icon {
    width: 1.8em; height: 1.8em;}

.menu-toggle[aria-expanded="true"] .icon-menu {
  --i: url("../icons/x.svg"); }

.only-mobile {
  display: block; }

/* ===== Mobile: pannello che si apre da destra verso sinistra ===== */
.js .main-nav {
    position: fixed; top: 0; right: 0; z-index: 110; width: min(88vw, 380px); height: 100dvh; padding: 5rem 1.25rem 1.5rem; overflow-y: auto; background: #fff;
    box-shadow: -12px 0 30px rgba(16, 24, 40, .2); transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }

.js .main-nav.is-open {
    transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }

.menu-overlay {
    position: fixed; inset: 0; z-index: 90; background: rgba(16, 24, 40, .55); }

body.menu-open {
  overflow: hidden; }

html:not(.js) .menu-toggle {
    display: none; }

html:not(.js) .site-header {
  position: static; }

html:not(.js) .header-inner {
  flex-wrap: wrap; }

html:not(.js) .main-nav {
  width: 100%; }

.menu > li {
  border-bottom: 1px solid var(--line); }

.menu > li > a, .mega-btn {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: .5rem 0; font: inherit; background: none; border: 0;
    color: inherit; text-decoration: none; cursor: pointer; text-align: left; }

.mega-btn .icon {
  transition: transform .2s; }

.mega-btn[aria-expanded="true"] .icon {
  transform: rotate(180deg); }

.nav-cta {
  display: block; }

.mega {
  display: none; padding: .25rem 0 1rem; }

.has-mega.is-open>.mega, html:not(.js) .mega {
  display: block; }

.mega-grid {
  display: grid; gap: 1rem; }

.mega-media {
  display: none; }

.svc-list li {margin-bottom: 0.5rem;}
.svc {
  display: flex; gap: 1rem; padding: .75rem; border-radius: 12px; text-decoration: none;  background-color: #faf9f9;}

.svc:hover {
    background: var(--soft); }

.svc-ic {
    flex: none; width: 44px; height: 44px; border-radius: 10px; /*background: #ffedd5;*/ color: var(--accent); display: grid; place-items: center; }

.svc-name {
  display: block; }

.svc-desc {
  display: block; font-size: 0.75rem; color: var(--muted); }

.svc--cta { background: var(--accent); color: #fff; }
.svc--cta:hover { background: var(--accent-d); }

.svc--cta .svc-desc {
  color: #fff; }

.svc--cta .svc-ic {
    /*background: rgba(255, 255, 255, .2);*/ color: #fff; }

/* --- menu blog --- */
.mega-title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-weight: 700; }
.mega-title .icon {
  color: var(--accent); }
/* .mega-title a { text-decoration: none; } */
.blog-col li a {
  display: block;  padding: .4rem 0;  color: var(--muted);  text-decoration: none; }
.blog-col li a:hover, .mega-title a:hover {
  color: var(--accent);  text-decoration: underline;}

/* ===== Struttura pagine ===== */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background: #f2f2f2; background: radial-gradient(circle, rgba(242, 242, 242, 1) 0%, rgba(252, 218, 212, 1) 50%, rgba(250, 250, 250, 1) 100%); }
.sfondo {background: #f2f2f2; background: radial-gradient(circle, rgba(242, 242, 242, 1) 0%, rgba(252, 218, 212, 1) 50%, rgba(250, 250, 250, 1) 100%);}


@media (min-width: 768px) and (max-width: 991px) {
  .servizi { grid-template-columns: 1fr }
  .item { grid-template-columns: 1fr 1fr; }
}




/* ===== Desktop ===== */
@media (min-width:1024px) {
    :root { --header-h: 80px; }
    .topbar { display: block;}
    .menu-toggle, .only-mobile, .menu-overlay { display: none; }
    .header-inner { position: relative;}

    /* il pannello si ancora al container */
    .main-nav, .js .main-nav, .js .main-nav.is-open {
        display: flex; position: static; transform: none; visibility: visible; transition: none; flex: 1; align-items: stretch; width: auto; height: var(--header-h); padding: 0;
        overflow: visible; background: none; box-shadow: none; }        
    
    .menu { display: flex; margin-inline: auto; gap: .25rem; }
    .menu > li { display: flex; border: 0; }
    .menu > li > a, .mega-btn {
        width: auto; padding: 0 1rem; gap: .35rem; justify-content: center; border-bottom: 3px solid transparent; font-size: 0.8rem; }

    .menu > li > a:hover, .menu > li > a[aria-current="page"], .mega-btn:hover, .has-mega.is-open>.mega-btn, .has-mega.is-current>.mega-btn {
        border-bottom-color: var(--accent); }
    
    .nav-cta {
        align-self: center; }

    .mega {
        position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 2rem; background: #fff; border: 1px solid var(--line); border-top: 0; 
        border-radius: 0 0 16px 16px; box-shadow: 0 24px 40px rgba(16, 24, 40, .12); }

    .has-mega.is-open>.mega, html:not(.js) .has-mega:hover>.mega, html:not(.js) .has-mega:focus-within>.mega {
        display: block; }

    html:not(.js) .mega { display: none; }

    .mega-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

    .mega-media { display: block; }
    .mega-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 16px; /*background: linear-gradient(135deg, var(--ink), var(--accent));*/ }

    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .sez-2 { grid-template-columns: 1fr 2fr; }
     
    .servizi, .item { grid-template-columns: 1fr 1fr; }
    .item {grid-template-rows: 330px;}

}

@media (prefers-reduced-motion:no-preference) {
  @media (min-width:1024px) {
    .has-mega.is-open>.mega {
      animation: mega-in .18s ease-out;
    }
  }

  @keyframes mega-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}