/* ==========================================================================
   Eatalico Business — replica fedele di https://eatalico.business/
   Breakpoint originali (GoDaddy Website Builder, tema "layout13"):
   <768 mobile · 768–1023 tablet · 1024–1279 laptop · 1280–1535 desktop · ≥1536 wide
   ========================================================================== */

/* ---------- Font (self-hosted, stessi file Google Fonts usati dall'originale) ---------- */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/open-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/open-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Design token ---------- */
:root{
  --font-body:"Open Sans",arial,sans-serif;
  --font-heading:"Playfair Display",Georgia,serif;

  --c-heading:#1b1b1b;      /* rgb(27,27,27) */
  --c-text:#5e5e5e;         /* rgb(94,94,94) */
  --c-dark:#161616;         /* rgb(22,22,22) sezioni scure e pulsanti */
  --c-black:#000;
  --c-white:#fff;
  --c-btn-text:#dbdbdb;     /* rgb(219,219,219) */
  --c-promo-text:#f7f7f7;
  --c-hr:#e2e2e2;
  --c-hr-dark:#2a2a2a;
  --c-muted:#a9a9a9;        /* copyright */
  --c-link-hover:#c6c6c6;

  /* Scala tipografica (mobile) */
  --fs-base:16px;
  --fs-tagline:40px;
  --fs-hero-text:22px;
  --fs-h2:32px;
  --fs-h4:28px;
  --fs-card-text:19px;
  --fs-btn:14px;
  --fs-btn-small:12px;
  --fs-details:14px;
  --fs-cookie-title:22px;

  --container:100%;
  --gutter:24px;
  --section-py:40px;
}
@media (min-width:768px){
  :root{--fs-tagline:48px;--fs-h2:38px;--fs-h4:30px;--section-py:56px}
}
@media (min-width:1024px){
  :root{--container:984px}
}
@media (min-width:1280px){
  :root{--container:1160px;--fs-tagline:62px;--fs-h2:44px;--fs-h4:32px}
}
@media (min-width:1536px){
  :root{--container:1280px;--fs-base:18px;--fs-tagline:64px;--fs-hero-text:24px;--fs-h2:48px;--fs-h4:36px;--fs-card-text:21px;--fs-btn:16px;--fs-btn-small:14px;--fs-details:16px;--fs-cookie-title:24px}
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--c-white);color:var(--c-text);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;color:var(--c-heading);letter-spacing:normal;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid #4d90fe;outline-offset:2px}

.skip-link{position:absolute;left:8px;top:-60px;z-index:20000;padding:8px 16px;background:var(--c-dark);color:var(--c-white);text-decoration:none;border-radius:4px;transition:top .2s}
.skip-link:focus{top:8px}

.container{width:var(--container);max-width:100%;margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-py) 0}
.section--dark{background:var(--c-dark)}

/* ---------- Pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:8px 32px;border:0;border-radius:4px;
  font-family:var(--font-body);font-size:var(--fs-btn);font-weight:700;line-height:1.25;
  letter-spacing:.071em;text-transform:uppercase;text-align:center;text-decoration:none;
  cursor:pointer;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:transparent;
}
.btn--primary{background:var(--c-dark);color:var(--c-btn-text)}
.btn--primary:hover{background:var(--c-black)}
.btn--light{background:var(--c-white);color:var(--c-black)}
.btn--light:hover{background:var(--c-white)}
.btn--small{min-height:40px;padding:4px 16px;font-size:var(--fs-btn-small)}

/* ---------- Titoli di sezione con filetto ---------- */
.section-heading{font-size:var(--fs-h2);line-height:1.2;text-align:center;margin-bottom:40px}
.section-heading > span{display:block}
.section-heading__hr{width:50px;height:0;margin:24px auto 0;border:0;border-bottom:2px solid var(--c-hr)}
.section-heading--dark{color:var(--c-white);line-height:1.4}
.section-heading--dark .section-heading__hr{border-bottom-color:var(--c-hr-dark)}

/* ==========================================================================
   Barra promo
   ========================================================================== */
.promo-banner{display:block;min-height:32px;padding:4px 16px;background:var(--c-dark);text-decoration:none;color:var(--c-black)}
.promo-banner__text{color:var(--c-promo-text);font-size:var(--fs-base);line-height:1.5;text-align:center}
@media (min-width:1024px){
  .promo-banner{transition:filter .6s}
  .promo-banner:hover{filter:invert(.2)}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero__grid{display:flex;flex-direction:column}
.hero__media{order:-1}
.hero__img{width:100%;height:auto;margin:40px 0 0}
.hero__content{padding-top:24px;padding-bottom:48px;text-align:center}
.hero__title{font-size:var(--fs-tagline);line-height:1.2;color:var(--c-heading)}
.hero__text{margin-top:8px;font-size:var(--fs-hero-text);line-height:1.5;color:var(--c-heading)}
.hero__cta{margin-top:32px}
.hero__cta .btn{width:100%}
@media (max-width:1023px){
  .hero__content{padding-left:24px;padding-right:24px}
}
@media (min-width:768px){
  .hero__cta .btn{width:auto}
}
@media (min-width:1024px){
  .hero__grid{flex-direction:row;align-items:center}
  .hero__media{order:0;flex:0 0 58.3333%;max-width:58.3333%}
  .hero__img{margin:40px 0}
  .hero__content{flex:0 0 41.6667%;max-width:41.6667%;padding:0 24px;text-align:left}
  .hero__cta{margin-bottom:24px}
}

/* ==========================================================================
   A chi si rivolge (split 50/50 con immagine a destra)
   ========================================================================== */
.split{display:flex;flex-direction:column}
.split__media{
  height:300px;
  background:url(../img/chi-si-rivolge.jpg) 49.5652% 26.087%/cover no-repeat;
}
.split__body{padding:var(--section-py) 0}
.split__inner{padding:0 var(--gutter)}
.section-heading--split{margin-bottom:40px}
.feature + .feature{margin-top:40px}
.feature__title{font-size:var(--fs-h4);line-height:1.2;margin-bottom:24px}
.feature__text{font-size:var(--fs-base);line-height:1.5;color:var(--c-text)}
@media (min-width:768px){
  .split__media{height:448px}
}
@media (min-width:1024px){
  .split{flex-direction:row-reverse;align-items:stretch}
  .split__media{flex:0 0 50%;height:auto}
  .split__body{flex:0 0 50%}
  .split__inner{max-width:70%;margin:0 auto}
  .section-heading--split{text-align:left}
  .section-heading--split .section-heading__hr{margin-left:0}
}

/* ==========================================================================
   Come unirsi alla piattaforma (card con immagine di sfondo)
   ========================================================================== */
.join__grid{display:flex;flex-direction:column}
.overlay-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px 40px;text-align:center;color:var(--c-white);
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;
}
.overlay-card--produttore{background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),url(../img/card-produttore.jpg)}
.overlay-card--buyer{background-image:url(../img/card-buyer.jpg)}
.overlay-card__title{font-size:var(--fs-h2);line-height:1.2;color:var(--c-white)}
.overlay-card__text{margin-top:24px;font-size:var(--fs-card-text);line-height:1.25;color:var(--c-white)}
.overlay-card .btn{margin-top:24px}
@media (min-width:768px){
  .join .container{padding:0}
  .join .section-heading{padding:0 var(--gutter)}
  /* Come l'originale: titoli e testi delle due card hanno la stessa altezza
     e sono allineati in alto, così i pulsanti restano sulla stessa linea. */
  .join__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .overlay-card{
    display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:24px;
    justify-items:center;align-content:start;min-width:0;
  }
  .overlay-card__text,.overlay-card .btn{margin-top:0}
  .overlay-card__title,.overlay-card .btn{align-self:start}
}
@media (min-width:1024px){
  .join .container{padding:0 var(--gutter)}
  .join .section-heading{padding:0}
  .join__grid{margin:0 calc(-1 * var(--gutter))}
  .overlay-card{margin-right:1px}
  .overlay-card:last-child{margin-right:0}
}
@media (min-width:1024px) and (max-width:1279px){
  .overlay-card{padding-left:32px;padding-right:32px}
}

/* ==========================================================================
   Vincitore Misura TecnoNidi (loghi)
   ========================================================================== */
.award__title{font-size:var(--fs-h2);line-height:1.2;text-align:center;margin-bottom:40px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 48px}
.logos{padding-bottom:24px}
.logos img{height:48px;width:auto;max-width:224px}
@media (min-width:768px){
  .logos{flex-wrap:nowrap;justify-content:space-between;gap:24px;padding-bottom:0}
}
@media (min-width:1024px){
  .logos img{height:100px;max-width:100%}
}

/* ==========================================================================
   Keep in Touch (social)
   ========================================================================== */
.social .section-heading{margin-bottom:40px}
.social__links{display:flex;justify-content:center;flex-wrap:wrap}
.social__link{display:inline-flex;align-items:center;height:48px;color:var(--c-white);transition:color .3s}
.social__link:hover{color:var(--c-link-hover)}
.social__link svg{width:40px;height:40px;margin:0 8px}
@media (min-width:768px){
  .social__link svg{margin:0 16px}
}
@media (min-width:1024px){
  .social__link{height:56px}
  .social__link svg{width:48px;height:48px;margin:0 24px}
}

/* ==========================================================================
   Banner "Powered by Eatalico.it"
   ========================================================================== */
.banner{
  padding:var(--section-py) 0;
  background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),url(../img/banner.jpg) 50% 50%/cover no-repeat;
}
.banner__card{display:flex;flex-direction:column;align-items:center;padding:24px;text-align:center}
.banner__title{font-size:var(--fs-h2);line-height:1.125;color:var(--c-white)}
.banner__block--cta{margin-top:24px}
@media (min-width:1024px){
  .banner__card{flex-direction:row;text-align:left}
  .banner__block{flex:1 1 auto;display:flex;align-items:center}
  .banner__block--heading{justify-content:flex-end;padding-right:8px}
  .banner__block--cta{justify-content:flex-start;padding-left:8px;margin-top:0}
}

/* ==========================================================================
   Copyright
   ========================================================================== */
.copyright{background:var(--c-dark);padding:40px 0}
.copyright__text{font-size:var(--fs-details);line-height:1.5;color:var(--c-muted);text-align:center}
.copyright__text a{color:var(--c-white);text-decoration:none;transition:color .3s}
.copyright__text a:hover{color:var(--c-link-hover)}
@media (min-width:768px){
  .copyright{padding:32px 0}
}

/* ==========================================================================
   Banner cookie (scorre dal basso, come l'originale)
   ========================================================================== */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:-500px;z-index:10000;
  max-height:500px;overflow-y:auto;padding:24px;
  background:var(--c-white);box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform 1s ease-in;
}
.cookie-banner[hidden]{display:none}
.cookie-banner.is-visible{transform:translateY(-500px)}
.cookie-banner__title{font-family:var(--font-body);font-size:var(--fs-cookie-title);line-height:1.25;color:var(--c-heading);padding-bottom:8px}
.cookie-banner__text{font-size:var(--fs-base);line-height:1.5;color:var(--c-text)}
.cookie-banner__actions{display:flex;gap:24px;margin-top:24px}
.cookie-banner__actions .btn{flex:1 1 0}
@media (min-width:768px){
  .cookie-banner{left:auto;width:400px;margin:24px;border-radius:7px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ---------- Pagina 404 ---------- */
.notfound{text-align:center;padding-top:80px;padding-bottom:80px}
.notfound__text{margin-bottom:32px}