@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Montserrat:wght@400;500;600;700&family=Caveat:wght@700&family=Permanent+Marker&display=swap');
:root{--paper:#f7e6c5;--ink:#17130f;--red:#a90f14;--green:#354316;--line:rgba(40,28,18,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Montserrat',sans-serif;background-image:none}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
.topbar{position:sticky;top:0;z-index:20;min-height:88px;padding:12px 4vw;display:flex;align-items:center;justify-content:space-between;gap:25px;background:rgba(247,230,197,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand img{width:92px;border-radius:50%}nav{display:flex;gap:26px}.actions{display:flex;align-items:center;gap:10px}nav a,.actions button,.btn{font-family:'Fjalla One',sans-serif;text-transform:uppercase}.actions button{border:0;background:transparent;cursor:pointer;opacity:.55}.actions button.active{opacity:1;color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:14px 22px;border:2px solid transparent}.green{background:var(--green);color:#fff}.red{background:var(--red);color:#fff}.outline{border-color:var(--ink)}
.hero{min-height:760px;display:grid;grid-template-columns:48% 52%;gap:25px;align-items:center;padding:70px 5vw 80px}.hero h1,h2,h3{font-family:'Fjalla One',sans-serif;line-height:1.02;margin:0}.hero h1{font-size:clamp(48px,6vw,92px);text-transform:uppercase}.hero h1 strong,h2 strong{color:var(--red);font-weight:400}.lead{font-size:21px;line-height:1.65}.red-note{font-family:'Caveat';font-size:33px;color:var(--red)}.buttons{display:flex;gap:18px;flex-wrap:wrap}.hero-img{position:relative}.hero-img img{width:100%;height:680px;object-fit:cover;border-radius:0 0 0 80px}.hero-img div{position:absolute;left:-42px;bottom:120px;width:190px;padding:25px 18px;background:#efd8a9;transform:rotate(-7deg);box-shadow:0 10px 25px #0003;font-family:'Permanent Marker';font-size:30px;text-align:center}
.mini{font-family:'Permanent Marker';text-transform:uppercase}.about,.pasta,.menu-preview,.instagram,.contact{display:grid;grid-template-columns:1fr 1fr}.about>img{height:100%;width:100%;object-fit:cover}.box,.about .copy{padding:80px 7vw}.copy p,.offers p,.contact p{font-size:18px;line-height:1.65}h2{font-size:clamp(40px,4vw,62px);text-transform:uppercase}.icons{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px;text-align:center}.icons span{font-family:'Permanent Marker';font-size:15px;text-transform:uppercase}
.offers{padding:80px 4vw 95px}.center{text-align:center}.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}.offer-grid article{border:2px solid var(--line);background:#fff3d480;display:grid;grid-template-columns:43% 57%;min-height:260px;overflow:hidden}.offer-grid img{height:100%;width:100%;object-fit:cover}.offer-grid article div{padding:26px}.offer-grid h3{font-size:34px;text-transform:uppercase}.offer-grid h3:after{content:'';display:block;width:60px;height:4px;background:var(--red);margin:12px 0}.offer-grid b{display:inline-flex;align-items:center;justify-content:center;width:82px;height:82px;border-radius:50%;background:var(--red);color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:30px;width:92px;height:92px;letter-spacing:0;transform:none;box-shadow:0 0 0 3px #fff inset}.insta{font-family:'Permanent Marker';color:var(--red);font-size:19px}
.pasta{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pasta-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:320px 320px;gap:12px;padding:20px}.pasta-gallery img{height:100%;width:100%;object-fit:cover;border-radius:12px}.pasta-gallery img:first-child{grid-row:span 2}
.menu-preview{gap:44px;padding:95px 5vw}.dish-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.dish-cards article{background:#fff3d480;border:2px solid var(--line);padding:14px;text-align:center}.dish-cards img{height:230px;width:100%;object-fit:cover}.dish-cards h3{font-size:26px;margin-top:16px}
.instagram{align-items:center;gap:52px;padding:70px 6vw;background:#ead2a4}.instagram>img{height:380px;width:100%;object-fit:cover;border-radius:50%;border:10px solid #f8e7c4}
.contact{gap:60px;padding:85px 6vw;background:#f9e9c8;border-top:3px solid var(--red)}.contact-info{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-info p{border-left:2px solid var(--line);padding-left:20px}
footer{padding:50px 5vw;display:flex;align-items:center;justify-content:space-between;gap:30px;background:#ead2a4;border-top:1px solid var(--line)}footer img{width:95px;border-radius:50%}.thanks{font-family:'Caveat';font-size:36px;color:var(--red)}
@media(max-width:980px){nav{display:none}.topbar{position:relative}.actions{flex-direction:column;align-items:flex-end}.hero,.about,.offer-grid,.pasta,.menu-preview,.instagram,.contact{grid-template-columns:1fr}.hero{padding-top:40px;min-height:auto}.hero-img img{height:430px;border-radius:24px}.hero-img div{left:20px;bottom:20px;width:150px;font-size:24px}.about>img{height:360px}.offer-grid article{grid-template-columns:1fr}.offer-grid img{height:230px}.pasta-gallery,.dish-cards,.contact-info{grid-template-columns:1fr}.pasta-gallery{grid-template-rows:auto}.pasta-gallery img,.pasta-gallery img:first-child{height:320px;grid-row:auto}footer{flex-direction:column;text-align:center}}

body{
letter-spacing:0.2px;
}

.copy p,.offers p,.contact p,.lead{
font-weight:500;
}

h1,h2,h3{
letter-spacing:1px;
}

nav a{
font-size:20px;
}

.offer-grid h3{
line-height:1.1;
}

.btn{
font-size:18px;
letter-spacing:1px;
}

.mini{
font-size:18px;
letter-spacing:1.5px;
}


h1,h2,h3,.mini,nav a,.btn{
text-transform: uppercase;
}

h1{
line-height:0.95;
}

.hero h1 strong{
color:#556b2f;
}


/* FIX: sfondo pulito senza pallini */
body{
  background-image:none !important;
  background-color:#f7e6c5;
}

/* FIX: logo header più ordinato */
.brand{
  display:flex;
  align-items:center;
  min-width:150px;
}
.brand img{
  width:78px !important;
  height:78px !important;
  object-fit:contain;
  border-radius:0 !important;
  background:transparent !important;
}

/* FIX: pulsanti prenota nelle offerte */
.offer-book{
  margin-top:14px;
  padding:10px 16px;
  font-size:16px;
  min-width:120px;
}

.offer-grid article div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.offer-grid article div .price,
.offer-grid article div b{
  margin-top:6px;
}

@media(max-width:980px){
  .brand img{
    width:64px !important;
    height:64px !important;
  }
  .brand{
    min-width:auto;
  }
}


/* FIX logo header: senza sfondo bianco */
.brand img{
  content:url('assets/logo-header-transparent.png');
  width:112px !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:transparent !important;
  mix-blend-mode:multiply;
}

/* Nosotros sotto offerte con più testo e più aria */
.about{
  border-top:1px solid rgba(40,28,18,.14);
  border-bottom:1px solid rgba(40,28,18,.14);
}

.about .copy p{
  max-width:760px;
}

.about .copy p + p{
  margin-top:16px;
}

.offers{
  padding-bottom:110px;
}

@media(max-width:980px){
  .brand img{
    width:88px !important;
  }
}


/* HERO nuovo titolo */
.hero h1 em{
  display:block;
  font-style:normal;
  color:#2f4716;
  font-size:.82em;
  margin-top:8px;
}

/* Footer logo senza sfondo bianco */
footer .brand img,
.footer-brand img,
footer img{
  background:transparent !important;
  border-radius:0 !important;
  object-fit:contain;
  mix-blend-mode:multiply;
}


.hero h1 em{
display:block;
font-style:normal;
font-size:.28em;
line-height:1.1;
margin-top:10px;
color:#2f4716;
font-weight:700;
}


/* Pulsanti menu PDF */
.menu-lang-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.menu-pdf{
  padding:12px 18px;
  font-size:16px;
  background:rgba(255,255,255,.18);
}

/* Mostra ES + EN in spagnolo, IT + EN in italiano, solo EN in inglese */
html[lang="es"] .menu-it{display:none;}
html[lang="it"] .menu-es{display:none;}
html[lang="en"] .menu-es,
html[lang="en"] .menu-it{display:none;}

@media(max-width:980px){
  .menu-lang-buttons{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================
   FIX MOBILE HEADER
   CTA WhatsApp sempre fuori dal menu
   ========================= */

@media (max-width: 768px){

  .topbar{
    display:grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo spacer langs"
      "cta cta cta";
    align-items:center;
    gap:12px;
    padding:14px 22px 18px !important;
    min-height:auto !important;
  }

  .brand{
    grid-area:logo;
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    min-width:0 !important;
  }

  .brand img{
    width:82px !important;
    max-width:82px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .topbar nav{
    display:none !important;
  }

  .actions{
    display:contents !important;
  }

  .actions .langs,
  .langs{
    grid-area:langs;
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    justify-content:flex-end;
    gap:10px !important;
  }

  .langs button,
  .actions button{
    font-size:15px !important;
    padding:0 !important;
    line-height:1 !important;
  }

  .nav-cta,
  .topbar .whatsapp{
    grid-area:cta;
    width:100% !important;
    max-width:100% !important;
    justify-self:center;
    text-align:center;
    padding:18px 20px !important;
    font-size:24px !important;
    line-height:1.1 !important;
    border-radius:8px !important;
  }

  .hero{
    padding-top:48px !important;
  }
}

@media (max-width: 420px){
  .brand img{
    width:72px !important;
    max-width:72px !important;
  }

  .nav-cta,
  .topbar .whatsapp{
    font-size:21px !important;
    padding:16px 14px !important;
  }

  .langs button,
  .actions button{
    font-size:14px !important;
  }
}


/* FIX menu: esistono solo PDF spagnolo e italiano */
.menu-en{
  display:none !important;
}

html[lang="es"] .menu-es,
html[lang="es"] .menu-it,
html[lang="en"] .menu-es,
html[lang="en"] .menu-it,
html[lang="it"] .menu-es,
html[lang="it"] .menu-it{
  display:inline-flex !important;
}


/* =========================
   MOBILE HEADER CLEAN FIX
   Logo sx + lingue dx + CTA sotto
   ========================= */
@media (max-width: 768px){

  .topbar{
    position:relative !important;
    display:grid !important;
    grid-template-columns: 92px 1fr !important;
    grid-template-areas:
      "logo langs"
      "cta cta" !important;
    align-items:center !important;
    gap:14px 18px !important;
    padding:18px 28px 22px !important;
    min-height:0 !important;
    height:auto !important;
  }

  .topbar .brand{
    grid-area:logo !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:auto !important;
  }

  .topbar .brand img{
    display:block !important;
    width:82px !important;
    max-width:82px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .topbar nav{
    display:none !important;
  }

  .topbar .actions{
    display:contents !important;
  }

  .topbar .actions button{
    display:inline-flex !important;
    position:static !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    height:auto !important;
    font-size:18px !important;
    line-height:1 !important;
    color:#425a25 !important;
  }

  .topbar .actions button.active{
    color:#a90f14 !important;
  }

  .topbar .actions button[data-lang="es"]{
    grid-area:langs !important;
    justify-self:end !important;
    transform:translateX(-92px);
  }

  .topbar .actions button[data-lang="en"]{
    grid-area:langs !important;
    justify-self:end !important;
    transform:translateX(-46px);
  }

  .topbar .actions button[data-lang="it"]{
    grid-area:langs !important;
    justify-self:end !important;
  }

  .topbar .actions .whatsapp,
  .topbar .whatsapp.nav-cta,
  .topbar .nav-cta{
    grid-area:cta !important;
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
    text-align:center !important;
    padding:18px 16px !important;
    font-size:24px !important;
    line-height:1.1 !important;
    border-radius:8px !important;
    margin:0 !important;
  }

  .hero{
    padding-top:60px !important;
  }
}

@media (max-width: 430px){
  .topbar{
    grid-template-columns: 82px 1fr !important;
    padding:16px 20px 20px !important;
  }

  .topbar .brand{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
  }

  .topbar .brand img{
    width:72px !important;
    max-width:72px !important;
  }

  .topbar .actions button{
    font-size:17px !important;
  }

  .topbar .actions button[data-lang="es"]{
    transform:translateX(-82px);
  }

  .topbar .actions button[data-lang="en"]{
    transform:translateX(-41px);
  }

  .topbar .actions .whatsapp,
  .topbar .whatsapp.nav-cta,
  .topbar .nav-cta{
    font-size:21px !important;
    padding:17px 14px !important;
  }
}


/* Hero title accent */
.hero h1 strong,
.hero h1 .accent,
[data-i18n="hero_title_2"]{
    color:#b32025 !important;
}


.hero h1 strong{color:#b11b1f!important;}

@media (max-width: 768px){
.topbar{
display:grid;
grid-template-columns:1fr;
justify-items:center;
gap:12px;
padding:16px;
}
.brand img{
width:110px;
}
nav{
display:none;
}
.actions{
width:100%;
display:flex;
flex-direction:column;
gap:12px;
}
.actions .whatsapp{
width:100%;
max-width:420px;
}
.actions button{
font-size:20px;
padding:4px 10px;
}
}

/* Contact data readability */
.contact-info p{
  line-height:1.7;
}

/* Voto Google e link nei contatti */
.google-rating{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-size:17px;font-weight:600}
.google-rating b{color:var(--red);font-size:20px}
.contact-info .link{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Orari su una riga per giorno, foto Instagram rotonda */
html,body{overflow-x:hidden}
.contact-info{grid-template-columns:auto 1fr}
.contact-info span[data-i18n="hours"]{white-space:nowrap}
.instagram>img{width:min(380px,100%);height:auto;aspect-ratio:1/1;justify-self:center}
@media(max-width:980px){.contact-info{grid-template-columns:1fr}}
@media(max-width:360px){.contact-info span[data-i18n="hours"]{white-space:normal}}