:root{
  --red:#BD212C;
  --amber:#FAA916;
  --dark:#282D33;
  --gray:#6D676E;
  --bg:#FBFFFE;

  --max:1100px;
  --radius:18px;
  --shadow: 0 14px 36px rgba(0,0,0,.20);
  --shadowSoft: 0 10px 22px rgba(0,0,0,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: url("../img/web_backgroun4.png") center/cover no-repeat;
  color:var(--dark);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(var(--max), 92vw); margin:0 auto}

/* NAV / HERO */
header.hero{
  position:relative;
  min-height: 92vh;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  transform: scale(1.02);
}

.hero-overlay{
  position:relative;
  z-index:1;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  background: linear-gradient(135deg, rgba(40,45,51,.70), rgba(40,45,51,.25));
}

nav.nav{
  position:sticky;
  top:0;
  z-index:50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(17, 7, 7, 0.5);
  border-bottom: 1px solid #282d331a;
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 1rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  letter-spacing:.2px;
  color:#f3f3f4;
}

.logo-mark{
  width:200px;
  height:110px;
  border-radius:14px;
  box-shadow: 0 12px 24px rgba(189, 33, 43, 0);
  flex:0 0 auto;
  
}

.logo span small{
  display:block;
  font-weight:700;
  color:#f3f3f4;
  margin-top:.1rem;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:1.1rem;
  list-style:none;
  margin:0;
  padding:0;
  font-weight:800;
}

.nav-links a{
  color:#f0a202;
  padding:.35rem .1rem;
  border-bottom:2px solid transparent;
  transition:.18s ease;
}

.nav-links a:hover{
  color:#f3f3f4;
  border-bottom-color:#f3f3f4;
}

.nav-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.85rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(40,45,51,.18);
  background:transparent;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* viejo Edge */
  user-select: none;
  white-space:nowrap;
}

.btn:hover{transform:translateY(-1px); box-shadow:var(--shadowSoft)}
.btn.primary{background:var(--amber); border-color:transparent; color:var(--dark)}


/* HERO CONTENT */
.hero-content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 3.2rem 0 2.8rem;
  color: var(--bg);
}

.hero-card{
  width:min(1220px, 100vw);
  padding: 2.1rem 1.6rem;
  border-radius: var(--radius);
  background: rgba(40,45,51,.40);
  border: 1px solid rgba(251, 255, 254, 0.103);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.42rem .75rem;
  border-radius:999px;
  background: rgba(250,169,22,.14);
  border: 1px solid rgba(250,169,22,.35);
  font-weight:800;
}

.hero-content h2{
  margin: .85rem 0 .2rem;
  font-family: Parisienne, cursive;
  font-size: 3.1rem;
  letter-spacing:.5px;
}

.hero-content h3{
  margin: .15rem 0 .85rem;
  font-size: 1.05rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,255,254,.88);
}

.hero-content p{
  margin:0 auto 1.35rem;
  max-width: 70ch;
  color: rgba(251,255,254,.88);
  font-weight:600;
}

.hero-actions{
  display:flex;
  gap:.8rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* PARALLAX */
.parallax-section{
  position:relative;
  min-height: 420px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background-color:rgba(45, 47, 48, 0.932);
}

.parallax-bg{
  position:absolute;
  inset:-40px 0 -40px 0;
  background:
    linear-gradient(180deg, rgba(40,45,51,.70), rgba(40,45,51,.35)),
    url("../img/parallax.JPG");
  background-size:cover;
  background-position:center;
  transform: translateY(0px);
  will-change: transform;
}

.parallax-content{
  position:relative;
  z-index:2;
  width:min(var(--max), 92vw);
  margin:0 auto;
  color: var(--bg);
  padding: 3rem 0;
}

.parallax-content h2{
  margin:0 0 .65rem;
  font-size: 1.9rem;
}

.parallax-content p{
  margin:0;
  max-width: 80ch;
  color: rgba(251,255,254,.90);
  font-weight:600;
}

/* SECTIONS */
section.section{
  padding: 3.2rem 0;
}

section.gray{
  background: rgba(40,45,51,.03);
  border-top: 1px solid rgba(40,45,51,.08);
  border-bottom: 1px solid rgba(40,45,51,.08);
}

.section h2{
  text-align:center;
  margin:0 0 1.3rem;
  font-size: 1.85rem;
}

.section p.lead{
  text-align:center;
  margin:-.6rem auto 1.8rem;
  max-width: 75ch;
  color: rgba(40,45,51,.75);
  font-weight:650;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.15rem;
  
}

.card{
  border-radius: calc(var(--radius) - 10px);
  overflow:hidden;
  background: rgba(238, 230, 218, 0.952);
  border: 1px solid rgba(40,45,51,.10);
  box-shadow: var(--shadowSoft);
}

.card img{
  height: 290px;
  width: 310px;

  object-fit:fill;
  margin: 20px;
  
}

.card .card-body{padding:1.1rem}
.card h3{margin:.15rem 0 .45rem}
.card p{margin:0; color: rgba(40,45,51,.72); font-weight:600}
.card-cta{margin-top:.9rem}

/*SEDES BOTON */
.mappa-btn{
  margin-top: .9rem;
}


/* PROPOSTA */


/* ===== MENU: LOOK PREMIUM ===== */

.menu-wrapper{
  background: rgba(20, 20, 20, 0.28);  /* elegante (scuro) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 2.6rem 2.4rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

/* titolo sezione */
.proposta-title{
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin: 0 0 1.6rem;
  letter-spacing: .2px;
}

/* due colonne */
.menu-layout.two-col{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 3.2rem;
  align-items: start;
}

/* i due menu più vicini */
.menu-block--second{
  margin-top: 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.14); /* separatore fine */
}

/* header: Menù del giorno / Sede */
.menu-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.menu-head-left{
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  opacity: .92;
}

.menu-head-right{
  font-weight: 600;
  font-size: .95rem;
  opacity: .90;
}

/* colonne Primo/Secondo/Contorno */
.menu-columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}

/* label più elegante */
.menu-label{
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: .75rem;
  opacity: .95;
}

/* lista piatti: elegante, leggibile */
.menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: .42rem;
}

.menu-list li{
  font-size: .98rem;
  line-height: 1.35;
  opacity: .92;
  padding-left: .7rem;
  position: relative;
}

/* pallino piccolo “fine dining” */
.menu-list li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  position:absolute;
  left: 0;
  top: .55rem;
}

/* colonna destra: pizza centrata */
.menu-right{
  display:flex;
  justify-content:center;
  align-items:center;
}


/* blocco pizza */
.pizza-block{
  width: 100%;
  max-width: 340px;
  text-align:center;
}

.pizza-title{
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: .9rem;
  opacity: .92;
}
.pizza-name{
  margin: .15rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: .02em;
  opacity: .92;
}
.pizza-name::after{
  content:"";
  display:block;
  width: 64px;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: .9rem auto 0;
}



.pizza-box{
  width: 100%;
  aspect-ratio: 1 / 1;            /* quadrato perfetto */
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 40px rgba(0,0,0,0.30);
  background: rgba(255,255,255,0.06);
}

.pizza-box img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.pizza-photo{
  width:100%;
  height:100%;
  background: url("../img/ulpio.png") center/cover no-repeat;
  background-color: rgba(255,255,255,0.06);
}



/* SEDI */
.sedi-section{
  padding: 3.4rem 0;
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(250,169,22,.18), transparent 55%),
    linear-gradient(180deg, #0f1114 0%, #0b0d10 100%);
  border-top: 1px solid rgba(251,255,254,.08);
  border-bottom: 1px solid rgba(251,255,254,.08);
}

.sedi-kicker{
  margin:0;
  text-align:center;
  color: rgba(251,255,254,.70);
  font-weight:700;
  letter-spacing:.03em;
}

.sedi-title{
  margin: .35rem 0 1.6rem;
  text-align:center;
  color: var(--amber);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sedi-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.sede-card{
  border-radius: 18px;
  overflow: hidden;          /* recorta la imagen */  
  border: 1px solid rgba(251,255,254,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  display: block;
}

.sede-img{
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.sede-card:hover{
  transform: translateY(-2px);
  border-color: rgba(250,169,22,.45);
  box-shadow: 0 22px 54px rgba(0,0,0,.45);
}

/* Evitar estilos inline: clases para imagen */
.sede-img-jenner{
background-image: url("../img/jenner.png");
}
.sede-img-ulpio{
  background-image:url("../img/ulpio.png");
}

.sede-info{
  padding: 1rem 1rem 1.2rem;
  text-align:center;
}

.sede-city{
  color: var(--amber);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .12em;
}

.sede-address{
  margin-top: .35rem;
  color: rgba(251,255,254,.78);
  font-weight: 650;
}

/* FOOTER */
footer.footer{
  padding: 2.4rem 0;
  background: var(--dark);
  color: var(--bg);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.2rem;
  align-items:start;
}

/* Social buttons (footer) */
.social-buttons{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-bottom: 1rem;
  justify-content: center;
}

.social-buttons a{
  width:64px;
  height:64px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(251,255,254,.10);
  border: 1px solid rgba(251,255,254,.18);
  transition:.18s ease;
}

.social-buttons a:hover{
  transform: translateY(-1px);
  background: rgba(251,255,254,.14);
}

.social-buttons img{
  width:60px;
  height:60px;
  object-fit: contain;
  display:block;
}





footer p{margin:.2rem 0; color: rgba(251,255,254,.88); font-weight:600}
footer small{display:block; margin-top:1rem; color: rgba(251,255,254,.62); font-weight:600}

.spacer{height:.9rem}



/* =========================
   MOBILE OPTIMIZATION
   Pegar al final del CSS
========================= */

/* Evita zoom raro en iOS y mejora legibilidad */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overflow-x: hidden; }


/* ================================
   INDEX – compacto + centrado
================================ */

/* Contenedor principal (más pequeño) */
.home-menu{
  padding: 34px 34px;         /* antes 60px 50px */
  border-radius: 28px;        /* antes 36px */
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: 0 28px 70px rgba(0,0,0,.26); /* más suave */
  overflow: hidden;
}

/* Grid un poco más compacto */
.home-menu-grid{
  margin-top: 18px;           /* antes 40px */
  display: grid;
  grid-template-columns: 1fr 1fr;  /* más balanceado */
  gap: 34px;                  /* antes 50px */
  align-items: center;
}

/* IZQUIERDA: título centrado en su contenedor */
.home-menu-left{
  display:flex;
  flex-direction: column;
  gap: 18px;                  /* antes 35px */
  align-items: center;
  justify-content: center;
  text-align: center;         /*  centra “Menù” y textos */
}

/* Título Menù centrado y más pequeño */
.home-menu-left .proposta-title{
  font-size: 28px;            /* antes 32px */
  margin: 0 0 6px;
  position: relative;
  text-align: center;
}

/* Línea decorativa centrada */
.home-menu-left .proposta-title::after{
  content:"";
  display:block;
  width: 56px;
  height: 4px;
  background: #f1b400;
  margin: 10px auto 0;
  border-radius: 4px;
}


/* Botones más compactos */
.home-menu-btn{
  width: min(440px, 100%);    /* antes 520px */
  padding: 62px 38px;         /* antes 34px 24px */
  border-radius: 16px;        /* antes 18px */
  border: none;
  font-weight: 800;
  font-size: 16px;            /* antes 17px */
  letter-spacing: .5px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.home-menu-btn--primary{
  background: linear-gradient(135deg, #f1b400, #d99c00);
  color: #111;
}
.home-menu-btn--primary:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 55px rgba(0,0,0,.40);
}

.home-menu-btn:not(.home-menu-btn--primary){
  background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
  color: #fff;
}
.home-menu-btn:not(.home-menu-btn--primary):hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 55px rgba(0,0,0,.40);
}

/* DERECHA: tarjeta del mese más pequeña + centrada */
.home-menu-right{
  display:flex;
  justify-content:center;
}

.home-menu-right .pizza-block{
  width: min(420px, 100%);    /* antes 520px */
  padding: 22px;             /* antes 32px */
  border-radius: 24px;       /* antes 28px */
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.68));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.48);
  position: relative;
  overflow: hidden;
  text-align: center;        /*  centra “Specialità…” */
}

.home-menu-right .pizza-block::before{
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width: 340px;
  height: 240px;
  background: radial-gradient(circle, rgba(241,180,0,.32), transparent 70%);
  pointer-events:none;
}

/* Texto del mese centrado y más fino */
.home-menu-right .pizza-title{
  font-size: 12px;
  letter-spacing: 2.6px;
  color: rgba(255,255,255,.78);
}
.home-menu-right .pizza-name{
  margin-top: 10px;
  font-weight: 850;
  font-size: 20px;
}

/* Imagen un poquito más compacta */
.home-menu-right .pizza-photo{
  margin-top: 14px;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0,0,0,.58);
}



@media (max-width: 980px){

/* propuesta  */
   .home-menu{
    padding: 26px 18px;
  }
  .home-menu-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .home-menu-btn{
    width: 100%;
  }

  /* NAV */
  
  /* NAV: más alto + cómodo */
  nav.nav{
    background: rgba(17, 7, 7, 0.5);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .nav-inner{
    flex-direction: column;          /* apila todo */
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 12px 14px;
  }

  /* Logo arriba centrado */
  .logo{
    width: 100%;
    justify-content: center;
    gap: .5rem;
  }

  .logo-mark{
    width: 180px;                   /* logo más grande arriba */
    max-height: 78px;
    height: auto;
    border-radius: 14px;
    object-fit: contain;
  }

  /* Ocultamos texto para que no ocupe */
  .logo span{ display:none; }

  /* Links: se ven bonitos y respirados */
  .nav-links{
    width: 100%;
    display: flex;                  /* asegurar visible */
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem 0.32rem;              /* espacio horizontal y vertical */
    margin: 0;
    padding: 0;
  }

  .nav-links a{
    padding: .45rem .55rem;
    border-radius: 999px;
    border-bottom: none;            /* quitamos la linea del hover móvil */
    background: rgba(255,255,255,.06);
    color: #f0a202;
  }

  .nav-links a:hover{
    background: rgba(255,255,255,.10);
    color: #fff;
  }

  /* Botones: abajo, centrados, sin apuñarse */
  .nav-actions{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
  }



  /* HERO */
  header.hero{ min-height: 78vh; }
  .hero-overlay{ min-height: 78vh; }

  .hero-content{
    padding: 1.6rem 0;
  }

  .hero-card{
    padding: 1.3rem 1rem;
    border-radius: 16px;
  }

  .kicker{
    font-size: .85rem;
    padding: .35rem .6rem;
  }

  .hero-content h2{
    font-size: 2.3rem;
    margin: .7rem 0 .1rem;
  }

  .hero-content h3{
    font-size: .95rem;
    letter-spacing: .14em;
  }

  .hero-content p{
    font-size: .98rem;
    margin-bottom: 1rem;
  }

  .hero-actions{ gap: .6rem; }

  /* CARDS */
  .cards{
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  .card .card-body{
    padding: 1rem;
  }

  /* MENU / PROPOSTA */
  .menu-wrapper{
    padding: 1.4rem 1.1rem;
    border-radius: 18px;
  }

  .menu-layout.two-col{
    grid-template-columns: 1fr;
  }

  .menu-columns{
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .menu-right{
    position: static;
    margin-top: 2rem;
  }

  .menu-list li{
    font-size: 1rem;
  }

  .menu-cta{
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }

  /* SEDI */
  .sedi-section{ padding: 2.4rem 0; }

  .sedi-title{
    font-size: 1.2rem;
    letter-spacing: .10em;
  }

  .sede-address{
    font-size: .95rem;
  }

  /*Targeta de las sedes  */

  .sede-img{
    height: 280px;
    background-position: center;
    background-size: cover;
  }


  .sedi-grid{
    grid-template-columns: 1fr; /* 1 sede por fila */
  }




  /* FOOTER */
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .social-buttons a{
    width:60px;
    height:60px;
    border-radius: 16px;
  }


  /* 1) Evita costuras por redondeo iOS */
  .parallax-section{
    margin-top: -1px;
  }

  /* 2) Dale mucho margen a la imagen de fondo para que nunca destape */
  .parallax-bg{
    inset: -220px 0 -220px 0;   /* antes -40px */
  }

  /* 3) En móvil el scale del video a veces crea una linea/seam */
  .hero-video{
    transform: none;
  }

  /* 4) Si queda micro hueco, que sea negro y no se note */
  header.hero{
    background:#000;
  }
    /* pega la seccion "La nostra storia" al hero */
  #about.parallax-section{
    margin-top: -60px;       /* sube el contenedor */
    padding-top: 40px;       /* compensa para no tapar texto */
  }

  /* que la imagen siempre cubra, aunque se mueva */
  #about .parallax-bg{
    inset: -320px 0 -320px 0;
  }

   .home-menu-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .home-menu-left{
    order: 1;
  }
  .home-menu-right{
    order: 2;
  }
}