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

/* ============= RENDERING TESTI ============= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============= VARIABILI ============= */
:root{
  --brand-bg: #DFDACF;
  --ink: #262626;
  --btn-bg: #3B2F2F;
  --btn-bg-hover: #5a4545;

  /* per allineare verticalmente il bottone al centro del logo */
  --logo-h-desktop: 180px;     /* altezza logo desktop */
  --logo-h-tablet: 110px;      /* altezza logo <=900px */
  --btn-h: 42px;               /* altezza bottone */
}

/* ============= BASE ============= */
body { font-family: 'Libre Franklin', sans-serif; background: #fff; color: var(--ink); overflow-x: hidden; }

/* ============= HERO ============= */
.hero { position: relative; height: 100vh; overflow: hidden; }

/* logo */
.logo { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 10; }
.logo img { height: var(--logo-h-desktop); }

/* bottone: a destra, centrato verticalmente col logo (desktop) */
.btn-whatsapp{
  position: absolute;
  right: 40px;
  top: calc(30px + (var(--logo-h-desktop) - var(--btn-h)) / 2);
  height: var(--btn-h);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px;
  background: var(--btn-bg); color: #fff; text-decoration: none;
  font-weight: 200; z-index: 10;
  transition: background .3s ease, transform .2s ease;
}
.btn-whatsapp:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }

/* media hero */
.hero-media img, .hero-media video{ width:100%; height:100vh; object-fit:cover; display:block; opacity: 80%;}
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.1); z-index:1; }

/* ============= ABOUT ============= */
.about { background: var(--brand-bg); padding: 100px 0; }
.about .container{ width:90%; max-width:1200px; margin:0 auto; display:flex; gap:60px; flex-wrap:wrap; }
.about-text{ flex:1; min-width:320px; max-width:600px; }
.about-text h1{ font-family:'Bodoni Moda', serif; font-size:40px; font-style:italic; font-weight:300; margin-bottom:20px; letter-spacing:1px; }
.about-text p{ font-size:16px; font-weight:200; line-height:1.7; margin-bottom:16px; }
.about-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; flex:1; max-width:450px; }
.about-gallery img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.about-gallery img:hover{ transform:scale(1.03); opacity:.9; }

/* ============= SERVIZI ============= */
.servizi{ background: var(--brand-bg); color: var(--ink); padding: 0; position: relative; }
.servizi-inner{ width:90%; max-width:1200px; margin:0 auto; position:relative; }
h2{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-family:'Bodoni Moda', serif; font-size:64px; font-style:italic; font-weight:300; letter-spacing:1px;
  pointer-events:none; z-index:3; opacity:.95;
}
.servizi-grid{ display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:40px; align-items:start; padding-top:25px; }
.servizio-card{ background:#E9E6DD; border-radius:6px; overflow:hidden; transition:transform .3s ease; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.servizio-card img{ width:100%; height:260px; object-fit:cover; display:block; }
.servizio-card p{ font-size:16px; font-weight:500; text-transform:uppercase; letter-spacing:1px; padding:15px; text-align:center; }
.card-1{ transform:translateY(12px); }
.card-2{ transform:translateY(-12px); }
.servizio-card:hover{ transform:translateY(-6px); }

/* ============= MARQUEE ============= */
.marquee-wrap{ margin-top:80px; }
.marquee{ position:relative; width:100%; overflow:hidden; background: var(--brand-bg); }
.marquee-track{ display:flex; width:max-content; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.marquee span{
  font-family:'Libre Franklin', sans-serif; font-weight:100; font-variation-settings:"wght" 100;
  font-size:36px; letter-spacing:3px; text-transform:uppercase; padding:22px 0; white-space:nowrap;
}
@keyframes scroll-left { 0%{ transform: translate3d(0,0,0);} 100%{ transform: translate3d(-50%,0,0);} }
@keyframes scroll-right{ 0%{ transform: translate3d(-50%,0,0);} 100%{ transform: translate3d(0,0,0);} }
.marquee-a .marquee-track{ animation: scroll-left 28s linear infinite; }
.marquee-b .marquee-track{ animation: scroll-right 28s linear infinite; }

/* ============= GALLERIA ============= */
.galleria { background-color:#FAF8F5; padding:100px 0; }
.container-gallery{ column-count:4; column-gap:20px; width:90%; max-width:1400px; margin:0 auto; }
.gallery-item{ break-inside: avoid; margin-bottom:20px; overflow:hidden; transition: transform .3s ease, opacity .3s ease; }
.gallery-item img{ width:100%; display:block; object-fit:cover; transition: transform .4s ease, opacity .4s ease; }
.gallery-item:hover img{ transform:scale(1.04); opacity:.9; }

/* ============= CTA ============= */
.cta{ background: var(--brand-bg); text-align:center; padding:100px 16px 70px; color: var(--ink); }
.cta-line{ width:65%; max-width:640px; margin:0 auto; border:0; border-top:1px solid rgba(0,0,0,.28); }
.cta-line--top{ width:65%; margin-left:0; margin-bottom:60px; }
.cta-line--bottom{ width:65%; margin-right:0; margin-top:60px; }
.cta-lead{ font-family:'Libre Franklin', sans-serif; font-weight:200; text-transform:uppercase; letter-spacing:.18em; font-size:20px; margin:0 0 32px; color: var(--ink); }
.cta-btn{
  display:inline-block; min-width:min(795px, 90vw); line-height:1;
  padding:18px 48px; border-radius:2px; text-decoration:none;
  background: var(--btn-bg); color:#FAF8F5;
  font-family:'Bodoni Moda', serif; font-weight:300; font-style:italic; text-transform:uppercase; letter-spacing:.08em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cta-btn:hover{ background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }

/* ============= FOOTER ============= */
footer.footer{ background: var(--brand-bg); padding:30px 16px 42px; color: var(--ink); }
.footer .foot-grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:24px; }
.foot-social{ display:flex; align-items:center; gap:18px; }
.foot-social a{ display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; transition: transform .2s ease, opacity .2s ease; }
.foot-social a:hover{ transform: translateY(-2px) scale(1.03); opacity:.95; }
.foot-sep{ width:10px; height:10px; border-radius:50%; background: var(--btn-bg); }
.foot-center{ text-align:center; font-family:'Libre Franklin', sans-serif; font-size:12px; line-height:1.6; opacity:.95; }
.foot-center a{ color: var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
.foot-center a:hover{ border-bottom-color: var(--ink); }
.foot-right{ text-align:right; font-family:'Libre Franklin', sans-serif; font-size:12px; }
.foot-right a{ color: var(--ink); opacity:.9; margin-left:18px; text-decoration:none; transition: opacity .2s ease, border-color .2s ease; border-bottom:1px solid transparent; }
.foot-right a:hover{ opacity:1; border-bottom-color: var(--ink); }
.credit{ margin-left:18px; }

/* ============= RESPONSIVE ============= */

/* Galleria */
@media (max-width:1200px){ .container-gallery{ column-count:3; } }
@media (max-width:800px){ .container-gallery{ column-count:2; } }
@media (max-width:500px){ .container-gallery{ column-count:1; } }

/* Titoli/marquee */
@media (max-width:1024px){
  .servizi-title{ font-size:64px; }
  .marquee span{ font-size:30px; letter-spacing:3px; }
}

/* Tablet e giù: logo a sinistra, bottone piccolo a destra */
@media (max-width:900px){
  /* About layout */
  .about .container{ flex-direction:column; text-align:center; align-items:center; }
  .about-text h2{ font-size:48px; }

  /* HERO: sposta logo a sinistra e riduci dimensioni */
  .logo{ left: 16px; transform: none; }                  /* logo a sinistra */
  .logo img{ height: var(--logo-h-tablet); }             /* logo più piccolo */

  .btn-whatsapp{
    right: 16px;
    top: calc(20px + (var(--logo-h-tablet) - var(--btn-h)) / 2);  /* centrato sul logo ridotto */
    height: var(--btn-h);
    padding: 0 14px;
    font-size: 14px;
  }

  /* Servizi colonna singola e titolo non sovrapposto */
  .servizi-grid{ grid-template-columns:1fr; gap:28px; }
  .card-1, .card-2{ transform:none; }
  .servizi-title{ position:static; transform:none; text-align:center; margin-bottom:26px; top:auto; }
}

/* Mobile */
@media (max-width:600px){
  .about-text h2, .servizi-title{ font-size:40px; }
  .about{ padding:70px 0; }
  .marquee span{ font-size:24px; letter-spacing:2px; padding:18px 0; }

  .cta{ padding:60px 16px; }
  .cta-btn{ display:block; width:100%; max-width:460px; margin-inline:auto; height:64px; line-height:64px; padding:0 24px; }

    .footer .foot-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }

  .foot-social {
    justify-content: center;
  }

  .foot-sep {
    display: none;
  }

  .foot-right {
    text-align: center;
  }

  .foot-right a,
  .credit {
    margin-left: 0;
    display: inline-block;
    margin: 4px 8px 0;
  }
}