/* =========================================================
   CERILLI GROUP — Pagina temporanea
   Palette: bordeaux #991915 + bianco + nero #1d1d1b
   Tipografia: Fraunces (display) + Inter Tight (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root{
  --rosso:#991915;
  --rosso-scuro:#7a140f;
  --nero:#1d1d1b;
  --bianco:#ffffff;
  --crema:#f7f3ee;
  --grigio:#6b6b6b;
  --grigio-chiaro:#e5e1dc;
  --display:'Fraunces', Georgia, serif;
  --sans:'Inter Tight','Helvetica Neue', Arial, sans-serif;
}

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

html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  color:var(--nero);
  background:var(--bianco);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

img,svg{display:block;max-width:100%}

/* =========================================================
   LAYOUT PAGINA TEMPORANEA — immagine ancorata in alto a destra,
   contenuto in flusso normale a sinistra
   ========================================================= */

.page{
  min-height: calc(100vh + 100px);
  position:relative;
  background:var(--bianco);
  overflow:hidden;
}

/* contenuto: prende tutto, ma con padding-right grande per non
   finire sotto l'immagine ancorata */
.content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: calc(100vh + 100px);
  padding: 48px 64px 56px;
  padding-right: clamp(64px, 8vw, 120px);
  position:relative;
  z-index:2;
}

/* la zona "middle" non deve andare sotto l'immagine */
.brand,
.middle{
  max-width: 720px;
}

/* HEADER LOGO + CLAIM */
.brand{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:520px;
}

.brand .logo{
  width:clamp(220px, 28vw, 320px);
  height:auto;
}

.brand .claim{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height:1.35;
  color:var(--rosso);
  letter-spacing:0.2px;
  max-width:480px;
  padding-left:4px;
  border-left:2px solid var(--rosso);
  padding-left:14px;
}

/* CENTRO: titolone "sito in costruzione" + contatti */
.middle{
  margin-top: clamp(40px, 8vh, 90px);
  margin-bottom: 40px;
  max-width:640px;
}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--rosso);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:14px;
}

.eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  background:var(--rosso);
  display:inline-block;
}

.headline{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--nero);
  margin-bottom:24px;
}

.headline em{
  font-style:italic;
  font-weight:400;
  color:var(--rosso);
}

.intro{
  font-size: clamp(16px, 1.15vw, 18px);
  color:var(--grigio);
  max-width:520px;
  margin-bottom:48px;
  line-height:1.6;
}

/* CONTATTI */
.contacts{
  display:grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 28px 40px;
  max-width:580px;
}

.contact-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-block .label{
  font-size:11px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--grigio);
}

.contact-block .value{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height:1.3;
  color:var(--nero);
  transition:color .25s ease;
}

.contact-block a.value:hover{
  color:var(--rosso);
}

.contact-block .value + .value{
  margin-top:2px;
}

/* =========================================================
   FOOTER-LINE — full-width, sotto l'immagine.
   Linea nera attraversa tutta la pagina, sigillo 50 al centro viewport.
   ========================================================= */
.footer-line{
  position:relative;
  z-index: 5;                  /* sopra l'immagine (.visual ha z-index:1) */
  margin-top: -10px;           /* alzata di 25px (era 15px) per stare più vicina all'immagine */
  /* aria extra sotto la linea: padding-bottom +50px (era 32 → 82) */
  padding: 22px 64px 82px;
  border-top: 1px solid var(--nero);
  display:flex;
  align-items:center;          /* meta centrata in Y nello spazio sotto la linea */
  width:100%;
  box-sizing:border-box;
  /* altezza minima della zona: ~150px così il sigillo absolute ha spazio di centratura */
  min-height: 150px;
}

.footer-line .meta{
  font-size:12px;
  letter-spacing:0.5px;
  color:var(--grigio);
  /* +50px verso il basso così la meta si allinea in Y al centro del sigillo 50 */
  margin-top: 50px;
}

.footer-line .meta strong{
  color:var(--nero);
  font-weight:600;
}

/* sigillo 50: centrato esattamente in X e Y nello spazio tra linea e footer rosso */
.seal-50{
  position:absolute;
  left: 50%;
  top: 50%;                    /* centro verticale della .footer-line */
  transform: translate(-50%, -50%);
  width: 92px;
  height:auto;
  transition: transform .4s ease;
  z-index: 5;
}

.seal-50:hover{
  transform: translate(-50%, -50%) rotate(-6deg) scale(1.05);
}

/* =========================================================
   IMMAGINE: intera (no crop), ancorata in alto a destra,
   alta come la viewport per coprire lo schermo all'apertura
   ========================================================= */
.visual{
  position:absolute;
  top:0;
  right:0;
  /* 100vh + 100px: leggermente più alta di una viewport, scende un po' sotto il fold */
  height: calc(100vh + 100px);
  aspect-ratio: 1101 / 1564;
  width: auto;
  z-index:1;
  pointer-events:none;
}

.visual img{
  width:100%;
  height:100%;
  display:block;
  /* contain = mostra l'immagine intera, non la taglia */
  object-fit: contain;
  object-position: top right;
}

/* =========================================================
   FOOTER ROSSO — dimensioni originali con scritte alzate di 75px
   ========================================================= */
.site-footer{
  background:var(--rosso);
  color:var(--bianco);
  /* originale era padding: 44px 64px. Aggiungo 75px di zona vuota sotto */
  padding: 44px 64px 119px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative;
}

.site-footer .footer-logo{
  width: clamp(180px, 18vw, 220px);
  height:auto;
}

.site-footer .footer-info{
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  font-size:13px;
  letter-spacing:0.3px;
  /* offset verso il basso: 14px per centrare visivamente sul logo + 20px richiesti = 34px */
  padding-top: 34px;
}

.site-footer .footer-info .sep{
  width:1px;
  height:18px;
  background: rgba(255,255,255,0.3);
}

.site-footer a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background: var(--nero);
  color: var(--bianco);
  padding: 22px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  z-index:9999;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
}

.cookie-banner.visible{
  transform: translateY(0);
}

.cookie-banner .cookie-text{
  flex:1;
  min-width:280px;
  font-size:13.5px;
  line-height:1.55;
  color: rgba(255,255,255,0.85);
}

.cookie-banner .cookie-text strong{
  color:var(--bianco);
  font-weight:600;
}

.cookie-banner .cookie-text a{
  color: var(--bianco);
  text-decoration: underline;
  text-underline-offset:2px;
}

.cookie-banner .cookie-actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}

.btn{
  display:inline-block;
  padding: 12px 22px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition: all .25s ease;
  background:transparent;
  color:inherit;
}

.btn-primary{
  background:var(--rosso);
  color:var(--bianco);
  border-color:var(--rosso);
}
.btn-primary:hover{
  background:var(--rosso-scuro);
  border-color:var(--rosso-scuro);
}

.btn-ghost{
  background:transparent;
  color:var(--bianco);
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost:hover{
  border-color:var(--bianco);
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   SCROLL REVEAL — entrata morbida, delay scalati con calma
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1),
              transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}
.reveal.d1{transition-delay: .3s}
.reveal.d2{transition-delay: .8s}
.reveal.d3{transition-delay: 1.4s}
.reveal.d4{transition-delay: 2.0s}
.reveal.d5{transition-delay: 2.6s}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .cookie-banner{transition:none}
}

/* =========================================================
   PAGINA COOKIE POLICY
   ========================================================= */
.policy-page{
  max-width:880px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.policy-page .back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--rosso);
  font-weight:600;
  margin-bottom:32px;
  transition: gap .25s ease;
}
.policy-page .back:hover{ gap:12px; }

.policy-page h1{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(36px, 5vw, 60px);
  line-height:1;
  letter-spacing:-0.015em;
  margin-bottom:8px;
}
.policy-page h1 em{font-style:italic;color:var(--rosso);font-weight:400}

.policy-page .lead{
  font-size:16px;
  color:var(--grigio);
  margin-bottom:48px;
  padding-bottom:24px;
  border-bottom:1px solid var(--grigio-chiaro);
}

.policy-page h2{
  font-family:var(--display);
  font-weight:500;
  font-size: 26px;
  margin-top: 40px;
  margin-bottom: 14px;
  color:var(--nero);
}

.policy-page h3{
  font-family:var(--sans);
  font-weight:600;
  font-size: 16px;
  letter-spacing:0.5px;
  margin-top:24px;
  margin-bottom:8px;
  color:var(--nero);
}

.policy-page p{
  font-size: 15.5px;
  line-height:1.7;
  color:#3a3a3a;
  margin-bottom:14px;
}

.policy-page ul{
  list-style:none;
  padding-left:0;
  margin-bottom:18px;
}
.policy-page ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
  font-size:15.5px;
  line-height:1.7;
  color:#3a3a3a;
}
.policy-page ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:10px;
  height:1px;
  background:var(--rosso);
}

.policy-page table{
  width:100%;
  border-collapse:collapse;
  margin: 16px 0 24px;
  font-size:14px;
}
.policy-page table th,
.policy-page table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--grigio-chiaro);
  vertical-align:top;
}
.policy-page table th{
  font-weight:600;
  color:var(--nero);
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  border-bottom:2px solid var(--nero);
}

.policy-page a{
  color:var(--rosso);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* header semplice cookie page */
.policy-header{
  padding: 28px 32px;
  border-bottom: 1px solid var(--grigio-chiaro);
}
.policy-header .logo{
  width: 200px;
  height:auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .content{
    padding: 36px 36px 44px;
    padding-right: 36px;
    min-height: calc(100vh + 100px);
  }
  /* immagine sempre alta come la viewport + 100px */
  .visual{
    height: calc(100vh + 100px);
    aspect-ratio: 1101 / 1564;
    width: auto;
  }
  /* limito i blocchi per non finire sotto l'immagine.
     Larghezza immagine ≈ (100vh + 100px) * 0.704 */
  .brand,
  .middle{
    max-width: calc(100vw - 70vh - 72px - 70px);
  }
  .footer-line{
    padding: 22px 36px 32px;
  }
}

@media (max-width: 720px){
  /* Su mobile l'immagine va in cima orizzontale, contenuto sotto in pieno */
  .page{
    display:flex;
    flex-direction:column;
  }
  .visual{
    position:relative;
    width:100%;
    height: 36vh;
    min-height: 280px;
    max-height: 380px;
    aspect-ratio: auto;  /* override: riempi la striscia in cima */
    order:-1;
  }
  .visual img{
    object-fit: cover;  /* mobile: crop ok, devo riempire la striscia */
    object-position: center 25%;
  }
  .content{
    padding: 28px 24px 36px;
    padding-right:24px;
    min-height:auto;
  }
  .brand,
  .middle,
  .footer-line{
    max-width:100%;
  }
  .brand .logo{
    width:200px;
  }
  .brand .claim{
    font-size:16px;
  }
  .middle{
    margin-top: 36px;
    margin-bottom:32px;
  }
  .headline{
    font-size: clamp(40px, 12vw, 60px);
  }
  .contacts{
    grid-template-columns: 1fr;
    gap:22px;
  }
  .page{
    min-height:auto;
  }
  .footer-line{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-top:32px;
    padding: 22px 24px 28px;
  }
  /* su mobile il sigillo torna inline, non absolute */
  .seal-50{
    position:static;
    transform:none;
    width:78px;
    padding:0;
    background:transparent;
  }
  .seal-50:hover{
    transform: rotate(-6deg) scale(1.05);
  }
  .site-footer{
    padding: 32px 24px 107px;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:20px;
  }
  .site-footer .footer-logo{
    width:200px;
  }
  .site-footer .footer-info{
    padding-top:0;
  }
  .site-footer .footer-info{
    gap:18px;
    font-size:12.5px;
  }
  .cookie-banner{
    padding: 18px 20px 20px;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .cookie-banner .cookie-actions{
    width:100%;
  }
  .cookie-banner .btn{
    flex:1;
    text-align:center;
    padding: 12px 14px;
  }
  .policy-page{
    padding: 40px 22px 64px;
  }
  .policy-header{
    padding:22px 22px;
  }
}