@font-face {
    font-family: 'Ubuntu';
    src: url('../font/Ubuntu/Ubuntu.otf'); /* IE9 Compat Modes */ 
    src: url('../font/Ubuntu/Ubuntu.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/Ubuntu/Ubuntu.woff') format('woff'), /* Pretty Modern Browsers */
         url('../font/Ubuntu/Ubuntu.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-display: swap;     
  }
  *, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
  :root {   
    --main-color: #191d25;
    --sec-color: #91412f;  
     --hover-bckgr: background .3s ease-out;
    --hover-color: color .3s ease-out;
 }

   body {
      position:relative;
      margin: 0;        
      font-size: 16px;     
      letter-spacing:1px;    
      background-color: white;
      color:var(--cl-txt);
      width:100%; 
      min-height:100vh;   
      font-family: 'Ubuntu', sans-serif; 
      overflow-x: hidden;       
  }
  
  html {scroll-behavior: smooth; scroll-padding-top: 120px; max-width:100%; overflow-x: hidden; }
  section {outline:none;}
  img { max-width: 100%; }  

 /* row e col */
.wrap-flex {display:flex; }
.wrap-column {display:flex; flex-direction:column;}
.wrap-flex-centrato {display:flex; align-items:center;justify-content: center;}
.wrap-col-centrato {display:flex; flex-direction:column;align-items:center;justify-content: center;}
.space-btw {justify-content: space-between;}
.align-start {align-items:flex-start;}
.align-center {align-items:center;}
.center-self {align-self:center !important;}
.justify-c {justify-content: center;}
.width100 {width:100%;}
.wrap {flex-wrap: wrap;}
.justify-r {justify-content: flex-end;}
.uppercase {text-transform: uppercase;}
.mt50 {margin-top:50px;}
.mt20 {margin-top:20px;}
.mb20 {margin-bottom:20px;}
.gap10 {gap:10px;}
.txt-r {color:var(--sec-color);}
.txt-c {text-align:center;}
.txt-r-hightlight {text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }

.button {        
    color:white;
    background:var(--sec-color);    
    font-size:16px;  
    text-decoration:none;    
    overflow: hidden;
    margin-top:0;          
    padding:0.8em 2em;    
    border:none;
    text-align:center;
    text-transform:uppercase;    
    cursor: pointer;
    transition: transform 0.5s ease;
    border-radius:50px;
    text-align:center;
    width:auto;   
}

.button a {color:white; text-decoration:none;}
.button:hover {transform: scale(1.1);}
.btn-cta {
    display: inline-block;
    color:white;
    background:var(--sec-color); 
    text-align:center; 
    cursor: pointer;
    text-decoration:none;  
    animation: pulse 2s ease-in-out infinite; 
    padding:1em 2em; 
    font-size:18px; 
    font-weight: 600; 
    border-radius:50px;
    text-align:center;
    width:auto;  
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-cta a {color:white; text-decoration:none;}
.btn-cta:hover{background:var(--sec-color);color:#fff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}
.btn-cta-w {background:white; color:var(--sec-color); transition: transform 0.5s ease;}
.btn-cta-w:hover {transform: scale(1.1);}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
#topbar {background:white; padding:10px 20px; position:fixed; top:0; left: 0; display:flex; width:100%; z-index:999; height:80px; box-shadow:0 4px 6px -1px rgb(0 0 0 / .2),0 2px 4px -1px rgb(0 0 0 / .2);}
.topbar-inside {width:80%; margin:0 auto;}
.logo {width:80px;}
.container-gen {margin:0 auto; width:60%;}
.hero {
  position: relative; 
  isolation:isolate;
  background-image:
  linear-gradient(90deg,
rgba(18,18,18,.72) 0%,
rgba(18,18,18,.60) 24%,
rgba(18,18,18,.42) 42%,
rgba(18,18,18,.26) 58%,
rgba(18,18,18,.12) 72%,
rgba(18,18,18,0) 86%),
  url('../img/delivery/pane-a-domicilio-hero.webp');
  background-color: #e4d1be;
  background-position: bottom -40px left;
  background-size:contain;
  -webkit-background-size:contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-repeat: no-repeat;
  height: 100dvh;
  display:flex;    
  width:100%;        
  align-items: center;
  justify-content: flex-start;         
  padding: 5em 3em;
}

.hero_txt { text-align:left; width:min(640px, 52%);color:white; position:relative; z-index:1; margin:0;}
.hero_txt h1 {font-size: clamp(28px, 5vw, 56px); line-height:1.2; margin-bottom:10px;}
.hero_txt h2 {font-weight:400; margin:0 auto; line-height:1.6; margin-top:0; max-width: 65ch; font-size: clamp(15px, 1.6vw, 18px); color:white; }
.box-obliquo {
  display: inline-block;
  background-color: #8b3b2f; 
  color: #fff;
  padding: 5px 10px;  
  transform: rotate(5deg); 
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2); 
  margin-bottom:20px;
}

.box-obliquo span {display: inline-block;transform: rotate(-3deg); }
.strenght {
  background: rgba(25,29,37,.28);   
  color:#fff;  
  border:1px solid rgba(255,255,255,.65);
  padding:9px 14px;
  border-radius:50px;
  font-size:14px;
  font-weight:400;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(25,29,37,.18);
  line-height:1;
  white-space:nowrap;
}
@media (min-width:2410px) {.hero {background-size:cover; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover;}}
@media (max-width:1350px) {
    .hero {
        justify-content: center;
        background-image:
        linear-gradient(180deg, rgba(18,18,18,.56) 0%, rgba(18,18,18,.56) 100%),
      linear-gradient(to left, rgba(18,18,18,.18) 0%, rgba(18,18,18,.10) 10%, rgba(18,18,18,0) 22%),
        url('../img/delivery/pane-a-domicilio-hero.webp');
    }
    .hero_txt {width:100%; }
    .hero_txt h2 {max-width:90ch; margin:0;}
}
@media (max-height: 1020px) {.hero {height: 100svh; background-size:cover; background-position: center bottom 90%;}}
@media (max-height: 700px) and (orientation:landscape) {.hero {height: 100svh; background-size:cover; background-position: center bottom -40px;}}
@media (max-width:800px) and (orientation:portrait) {.hero {background-position:center,left, 95% 100%;; background-size:auto, auto, 150% auto;} .button-topbar {font-size:14px;}}

.section-gen {padding:5em 3em; color:var(--main-color);}
.section-gen__container {margin:0 auto; width:60%;}
.section-gen h2 {font-size:40px; margin-bottom:100px;}
.section-gen p {font-size:18px; line-height:1.6;}
.bkgr-change {background:#e4d1be;}
.height50 {min-height:50dvh;}
.height100 {height:100%;}
.section-title {position:relative; padding-bottom:15px; margin-top:0;}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: var(--sec-color);
    border-radius: 2px;
}
 .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1350px;
    margin: 0 auto;
    margin-top:100px;    
}
        
.benefit-card {
    background: white;
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
        
.benefit-card:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0,0,0,0.15);}        
.benefit-icon {font-size: 3.5em;margin-bottom: 20px;display: block;}        
.benefit-card h3 { color: var(--sec-color); margin-bottom: 15px; font-size: 1.3em;}
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}
.step {text-align: center;position: relative;}
.step-number {
    width: 70px;
    height: 70px;
    background: var(--sec-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    margin: 0 auto 25px;
    box-shadow: 0 5px 15px rgba(139, 90, 70, 0.3);
}
.step h3 {color: var(--sec-color);margin-bottom: 15px;font-size: 1.4em;}
@media (max-width:1070px) {.steps {grid-template-columns:1fr;}}

.prodotti-grid {display:grid;grid-template-columns:repeat(3, 1fr); gap:30px; margin-top:50px;}

.prodotti-box {background:#fff;border-radius:22px;border:1px solid #eef0f2;box-shadow:0 16px 30px rgba(0,0,0,.05);padding:20px; height:100%;overflow:hidden; display:flex; flex-direction:column;}
.prodotti-box__head {position:relative; overflow: hidden; }
.prodotti-box__head img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.prodotti-box__head::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent);}
.wrap-card {padding-inline:16px; flex:1 1 auto;}
.prodotti-box__title h3 {font-weight:600;  margin-block:10px; }
.prodotti-box__descr {color:#6b7280; margin:6px 0;font-size:14px; }
.prodotti-box__cta { margin-top:auto;}
.prodotti-box__cta a {font-weight:600; color:var(--sec-color); text-decoration:none; transition: transform 0.3s ease;display: inline-block;}
.prodotti-box__cta a:hover {transform: translateX(10px);}
@media (max-width:1090px) {.prodotti-grid {grid-template-columns:repeat(2, 1fr);}}
@media (max-width:700px) {.prodotti-grid {grid-template-columns:minmax(300px, 400px); justify-content: center;}}
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.pricing-card {
    background: #fff3e6;
    border: 3px solid #cebcaa;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
}
.pricing-card-best {border-color: var(--sec-color); transform: scale(1.05);}
.pricing-card h3 {color: var(--main-color);font-size: 1.5em;margin-bottom: 20px;}
.price {font-size: 2.5em;color: var(--sec-color);font-weight: bold;margin-bottom: 10px;}
.price-note {color: #6b7280;font-size: 0.9em;margin-bottom: 20px;}
.loyalty-banner {
    background: #fff3e6;
    border: 2px dashed var(--sec-color);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    margin: 0 auto;
    margin-top:100px;
    max-width: 800px;
}
.loyalty-banner strong {color: var(--sec-color);font-size: 1.1em;}
.bkgr-r {background:var(--sec-color); color:white;}
.section-cta h2 {margin-bottom:50px;}
.section-cta {position: relative;overflow: hidden;}
.section-cta::before {
    content: '🍞';
    position: absolute;
    font-size: 350px;
    opacity: 0.1;
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotate(-15deg);
    animation: floatLeft 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.section-cta::after {
    content: '🥖';
    position: absolute;
    font-size: 350px;
    opacity: 0.1;
    top: 50%;
    right: 0px;
    transform: translateY(-50%) rotate(15deg);
    animation: floatRight 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@media (max-width:1300px) { .section-cta::before, .section-cta::after {font-size:280px;}}
@media (max-width:900px) { .section-cta::before, .section-cta::after {font-size:210px;} .section-cta::before {top:20%;}.section-cta::after{top:80%;}}

/* Assicura che il contenuto sia sopra le immagini */
.section-cta .section-gen__container {position: relative;z-index: 2;}

@keyframes floatLeft {
    0%, 100% { 
        transform: translateY(-50%) rotate(-15deg) translateX(0); 
    }
    50% { 
        transform: translateY(-55%) rotate(-20deg) translateX(10px); 
    }
}

@keyframes floatRight {
    0%, 100% { 
        transform: translateY(-50%) rotate(15deg) translateX(0); 
    }
    50% { 
        transform: translateY(-55%) rotate(20deg) translateX(-10px); 
    }
}

.review-container {display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; width:100%;align-items: stretch; padding:0; }
@media (max-width: 1100px) {.review-container { grid-template-columns: minmax(300px, 1fr); justify-content: center;}}


.review-item {text-align:center;padding: clamp(14px, 1.8vw, 22px);height:100%;min-width:0;  display:flex; }
.shadow-effect{
    background:#fff;
    padding:20px;
    border-radius:5px;
    border:1px solid #ECECEC;
    box-shadow:0 19px 38px rgb(0 0 0 / .1),0 15px 12px rgb(0 0 0 / .02);
    width:auto;
}
.review-header{ display:flex; flex-wrap:nowrap; position:relative;}
.review-img{ margin:0 15px 0 0!important;}
.round-avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:600;
}
.bluette{background:#0061a0;}
.salmon{ background:#ea6a6b;}
.green{background:#40973d;}
.review-profile-details{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    margin:0!important;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.review-stars-wrap{display:block;white-space:nowrap;margin-bottom:15px; margin-top:15px;text-align:left;}
.fa-star,.fa-star-half-stroke{color:#ffcd3c;}

.review-txt{text-align:left;font-size:14px;line-height:1.6;}
footer {border-top:1px solid #eef0f2;}
.foot{font-size:14px;color:#6b7280;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 0;}
.link-footer {color:#6b7280;}
.link-footer:hover {color:var(--sec-color);}


@media (max-width:1750px) {.container-gen, .section-gen__container {margin:0 auto; width:80%; }}
@media (max-width:1270px) {
    .container-gen, .section-gen__container {margin:0 auto; width:90%;}
    .section-gen, .hero {padding:5em 1.5em;}
    .section-gen h2 {font-size:30px;}
}