:root{
    --black: #14170F;
    --charcoal: #1C2016;
    --white: #FFFFFF;
    --offwhite: #F4F7EF;
    --green: #4CAF3A;
    --green-dark: #2E7D28;
    --lime: #C6E86A;
    --ink: #1C2418;
    --ink-soft: #626B5B;
    --line: rgba(20,23,15,0.1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html{ overflow-x:hidden; }
  body{
    font-family:'Archivo', sans-serif;
    background:var(--white);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    max-width:100vw;
  }
  h1,h2,h3{font-weight:800; letter-spacing:-0.015em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  section{padding:88px 0;}
  @media(max-width:700px){ section{padding:56px 0;} .wrap{padding:0 20px;} }
  em{font-style:normal; color:var(--green);}

  /* faux-photo texture: used everywhere a real photo would sit */
  .photo{ position:relative; overflow:hidden; background:#333; }
  .photo::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 30% 20%, rgba(76,175,58,0.55), transparent 55%),
      radial-gradient(circle at 75% 70%, rgba(20,23,15,0.7), transparent 55%),
      linear-gradient(160deg,#2b2f24,#171a12);
  }
  .photo::after{
    content:''; position:absolute; inset:0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px);
  }
  .photo-label{
    position:relative; z-index:1; height:100%; display:flex; align-items:flex-end;
    padding:14px; font-size:11px; font-weight:600; color:rgba(255,255,255,0.55); letter-spacing:0.02em;
  }

  /* ---- NAV ---- */
  header{ background:var(--black); }
  .navwrap{
    max-width:1180px; margin:0 auto; padding:20px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{font-weight:800; font-size:19px; color:var(--white); display:flex; align-items:center; gap:6px;}
  .logo .dot{width:8px; height:8px; border-radius:50%; background:var(--green);}
  nav ul{list-style:none; display:flex;}
  nav ul li{ margin-left:22px; }
  nav ul li:first-child{ margin-left:0; }
  nav a{font-size:13px; font-weight:600; color:rgba(255,255,255,0.7); white-space:nowrap;}
  nav a:hover{color:#fff;}
  .navcta{
    background:var(--green); color:#fff;
    padding:11px 20px; border-radius:100px; font-size:13.5px; font-weight:700;
  }

  /* Pulsante hamburger: nascosto di default, mostrato solo sotto 860px */
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center;
    width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0;
  }
  .nav-toggle span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; margin-bottom:5px; transition:transform 0.25s ease, opacity 0.25s ease; }
  .nav-toggle span:last-child{ margin-bottom:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Menu a tendina mobile: nascosto di default, mostrato solo quando aperto */
  .mobile-menu{
    display:none; max-height:0; overflow:hidden;
    background:var(--black); transition:max-height 0.3s ease;
  }
  .mobile-menu.open{ max-height:500px; }
  .mobile-menu ul{ list-style:none; padding:8px 32px 24px; display:flex; flex-direction:column; gap:4px; }
  .mobile-menu a{
    display:block; padding:12px 4px; font-size:15px; font-weight:600;
    color:rgba(255,255,255,0.85); border-top:1px solid rgba(255,255,255,0.08);
  }
  .mobile-menu li:first-child a{ border-top:none; }

  @media(max-width:1100px){
    nav ul{display:none;}
    .nav-toggle{display:flex;}
    .mobile-menu{display:block;}
  }

  /* ---- HERO ---- */
  .hero{
    background:var(--black); color:#fff; padding:64px 0 0;
  }
  .hero-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding-bottom:64px;
  }
  @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
  .eyebrow{
    font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--lime); margin-bottom:18px;
  }
  .hero h1{ font-size:clamp(34px,4.6vw,52px); line-height:1.06; margin-bottom:22px; }
  .hero p.lead{ font-size:16.5px; color:rgba(255,255,255,0.65); max-width:420px; margin-bottom:30px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--green); color:#fff; font-weight:700; font-size:14.5px;
    padding:14px 24px; border-radius:100px;
  }
  .btn-outline{ background:transparent; border:1.5px solid rgba(255,255,255,0.25); color:#fff; }
  .btn-outline-dark{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
  .proof{ display:flex; align-items:center; gap:12px; margin-top:34px; }
  .avatars{display:flex;}
  .avatars span{ width:32px; height:32px; border-radius:50%; border:2px solid var(--black); background:var(--green); margin-left:-9px; }
  .avatars span:first-child{margin-left:0;}
  .proof small{ font-size:13px; color:rgba(255,255,255,0.6); }
  .hero-photo{ aspect-ratio:5/4.3; border-radius:20px; }

  /* ---- INSTAGRAM ---- */
  .ig-head{ text-align:center; max-width:520px; margin:0 auto 40px; }
  .ig-head .eyebrow{ color:var(--green-dark); }
  .ig-head h2{ font-size:clamp(24px,3vw,32px); }
  .ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media(max-width:880px){ .ig-grid{grid-template-columns:repeat(2,1fr);} }
  .ig-card{ aspect-ratio:1; border-radius:14px; position:relative; transition:transform 0.35s ease; }
  .ig-card:hover{ transform:scale(1.06); z-index:2; }
  .ig-card .caption{
    position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:14px;
  }
  .ig-top{ display:flex; justify-content:space-between; color:rgba(255,255,255,0.7); font-size:16px; }
  .ig-text{ color:#fff; font-weight:700; font-size:14.5px; line-height:1.25; }
  .ig-stats{ display:flex; gap:14px; margin-top:16px; font-size:12.5px; color:var(--ink-soft); }
  .ig-cta{ text-align:center; margin-top:32px; }
  .ig-cta .btn{ background:var(--green); }

  /* ---- ICON STRIP ---- */
  .strip{ background:var(--black); color:#fff; }
  .strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
  @media(max-width:760px){ .strip-grid{grid-template-columns:1fr 1fr;} }
  .strip-item{ text-align:center; }
  .strip-icon{
    width:44px; height:44px; margin:0 auto 14px; border-radius:12px;
    background:rgba(76,175,58,0.15); display:flex; align-items:center; justify-content:center;
    color:var(--green); font-size:19px; font-weight:800;
  }
  .strip-item strong{ display:block; font-size:15px; margin-bottom:6px; }
  .strip-item span{ font-size:12.5px; color:rgba(255,255,255,0.55); }

  /* ---- SECTION HEAD ---- */
  .section-head{ max-width:560px; margin-bottom:44px; }
  .section-head .eyebrow{ color:var(--green-dark); }
  .section-head h2{ font-size:clamp(26px,3.2vw,34px); line-height:1.15; }
  .section-head p{ color:var(--ink-soft); font-size:15.5px; margin-top:12px; }
  .section-cta{ margin-top:28px; }

  /* ---- RECIPES ---- */
  .recipe-layout{ display:grid; grid-template-columns:220px 1fr; gap:40px; }
  @media(max-width:820px){ .recipe-layout{grid-template-columns:1fr;} }
  .cat-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
  .cat-list li{
    font-size:14px; font-weight:600; padding:11px 16px; border-radius:10px; color:var(--ink-soft);
    display:flex; align-items:center; gap:10px; cursor:pointer; transition:background 0.2s ease, color 0.2s ease;
  }
  .cat-list li:hover{ background:var(--offwhite); }
  .cat-list li.active{ background:var(--offwhite); color:var(--ink); }
  .cat-list li .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }
  .recipe-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media(max-width:880px){ .recipe-grid{grid-template-columns:repeat(2,1fr);} }
  .recipe-card{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); }
  .recipe-img{ aspect-ratio:1; position:relative; }
  .recipe-badge{
    position:absolute; top:10px; left:10px; z-index:1;
    background:rgba(255,255,255,0.92); color:var(--ink);
    font-size:11px; font-weight:700; padding:5px 10px; border-radius:100px;
    display:flex; align-items:center; gap:5px;
  }
  .recipe-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}
  .recipe-body{ padding:14px 16px 16px; }
  .recipe-title{ font-weight:700; font-size:14.5px; }
  .recipe-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

  /* ---- TRANSFORMATIONS ---- */
  .story-grid{
    display:flex; align-items:flex-start; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; margin-bottom:-14px; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .story-grid::-webkit-scrollbar{ height:6px; }
  .story-grid::-webkit-scrollbar-track{ background:transparent; }
  .story-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
  .story-photo{
    flex:0 0 auto; width:230px; aspect-ratio:3/4; border-radius:16px;
    position:relative; scroll-snap-align:start; transition:transform 0.35s ease;
  }
  .story-photo:hover{ transform:scale(1.06); z-index:2; }
  @media(max-width:600px){
    .story-photo{ width:64vw; }
  }
  @media(min-width:601px) and (max-width:900px){
    .story-photo{ width:190px; }
  }
  .kg-badge{
    position:absolute; bottom:12px; left:12px; z-index:1;
    background:var(--green); color:#fff; font-weight:800; font-size:15px;
    padding:7px 13px; border-radius:100px;
  }
  .kg-sub{
    position:absolute; bottom:12px; right:12px; z-index:1;
    background:rgba(0,0,0,0.5); color:#fff; font-size:11px; font-weight:600;
    padding:6px 10px; border-radius:100px;
  }

  /* ---- ABOUT ---- */
  .about{ background:var(--black); color:#fff; border-radius:0; }
  .about-inner{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
  @media(max-width:880px){ .about-inner{grid-template-columns:1fr;} }
  .about-photo{ aspect-ratio:4/5; border-radius:18px; }
  .about .eyebrow{ color:var(--lime); }
  .about h2{ font-size:clamp(26px,3.2vw,34px); margin-bottom:16px; }
  .about p{ color:rgba(255,255,255,0.65); font-size:15.5px; margin-bottom:24px; }
  .check-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .check-list li{ display:flex; gap:10px; font-size:14.5px; color:rgba(255,255,255,0.85); }
  .check-dot{
    flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--green);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff;
  }

  /* ---- JOURNEY ---- */
  .journey{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
  @media(max-width:900px){ .journey{grid-template-columns:1fr 1fr;} }
  .journey-num{
    width:38px; height:38px; border-radius:50%; background:var(--offwhite);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px; margin-bottom:14px; color:var(--green-dark);
  }
  .journey-step strong{ display:block; font-size:14.5px; margin-bottom:4px; }
  .journey-step span{ font-size:13px; color:var(--ink-soft); }

  /* ---- CTA / CONTACT ---- */
  .cta-block{ background:var(--black); color:#fff; }
  .cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  @media(max-width:880px){ .cta-inner{grid-template-columns:1fr;} }
  .cta-inner h2{ font-size:clamp(26px,3vw,32px); margin-bottom:14px; }
  .cta-inner p{ color:rgba(255,255,255,0.6); font-size:15px; margin-bottom:26px; max-width:400px; }
  .form-card{ background:#fff; color:var(--ink); border-radius:18px; padding:28px; }
  .form-card h3{ font-size:17px; margin-bottom:18px; }
  .form-field{ margin-bottom:14px; }
  .form-field input, .form-field textarea{
    width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
    font-family:inherit; font-size:14px; background:var(--offwhite);
  }
  .form-field textarea{ resize:none; height:80px; }
  .form-card .btn{ width:100%; justify-content:center; margin-top:4px; }

  footer{ background:var(--black); color:rgba(255,255,255,0.5); padding:44px 0; }
  .footwrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footwrap .logo{ font-size:16px; }
  footer p{ font-size:13px; }

/* ---- BEAUTY (palette dedicata, ispirata ai prodotti sponsorizzati) ---- */
:root{
  --beauty-teal: #0E6D89;
  --beauty-gold: #E2C081;
  --beauty-plum: #72506B;
  --beauty-lavender: #E6D4E4;
}
.tag-beauty-idratazione{ background:var(--beauty-teal); color:#fff; }
.tag-beauty-brightness{ background:var(--beauty-gold); color:#3d2f13; }
.tag-beauty-antiage{ background:var(--beauty-plum); color:#fff; }

/* ---- BEAUTY SECTION LAYOUT ---- */
.beauty-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .beauty-grid{grid-template-columns:1fr;} }
.beauty-card{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.beauty-swatch{ height:110px; display:flex; align-items:flex-end; padding:14px; }
.beauty-swatch span{ font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px; }
.beauty-body{ padding:16px 18px 20px; }
.beauty-title{ font-weight:700; font-size:15.5px; margin-bottom:6px; }
.beauty-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* ---- REAL PHOTO OVERRIDE (disattiva l'overlay texture sui placeholder) ---- */
.photo.has-real-photo::before,
.photo.has-real-photo::after{ content:none; display:none; }

/* ---- RECIPE CARDS: clickable + hover zoom ---- */
.recipe-card{ cursor:pointer; transition:box-shadow 0.25s ease, transform 0.25s ease; }
.recipe-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,0.10); transform:translateY(-2px); }
.recipe-card:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.recipe-img{ overflow:hidden; }
.recipe-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.recipe-card:hover .recipe-img img{ transform:scale(1.08); }

/* ---- RECIPE MODAL ---- */
.recipe-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,12,10,0.6);
  z-index:1000; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px);
}
.recipe-modal-overlay.open{ display:flex; }
.recipe-modal{
  background:#fff; border-radius:20px; max-width:640px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative;
  animation:recipeModalIn 0.25s ease;
}
@keyframes recipeModalIn{
  from{ opacity:0; transform:translateY(12px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.recipe-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.55); color:#fff; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.recipe-modal-close:hover{ background:rgba(0,0,0,0.75); }
.recipe-modal-img{ width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:20px 20px 0 0; }
.recipe-modal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.recipe-modal-body{ padding:24px 26px 30px; }
.recipe-modal-body h3{ font-size:22px; font-weight:800; margin:12px 0 4px; }
.recipe-modal-body h4{ font-size:14.5px; font-weight:700; margin:22px 0 10px; }
.recipe-modal-note{ color:var(--ink-soft); font-size:14px; margin:0; }
.recipe-modal-macros{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px;
}
.recipe-macro{
  background:var(--offwhite); border-radius:12px; padding:10px 6px; text-align:center;
}
.recipe-macro .val{ font-size:16px; font-weight:800; color:var(--ink); display:block; }
.recipe-macro .lbl{ font-size:11px; color:var(--ink-soft); }
.recipe-modal-list{ margin:0; padding-left:20px; font-size:14.5px; color:var(--ink); line-height:1.7; }
.recipe-modal-steps{ padding-left:22px; }
.recipe-modal-steps li{ margin-bottom:6px; }
.recipe-modal-disclaimer{ font-size:12px; color:var(--ink-soft); margin-top:22px; border-top:1px solid var(--line); padding-top:14px; }
@media(max-width:600px){
  .recipe-modal-macros{ grid-template-columns:repeat(2,1fr); }
  .recipe-modal-body{ padding:20px 18px 26px; }
}

/* ---- RECIPE PLACEHOLDER (senza foto reale ancora) ---- */
.recipe-placeholder-icon{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; opacity:0.9;
}
.recipe-modal-placeholder-icon{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:56px; opacity:0.9;
}

/* ---- SERVIZI GRATUITI ---- */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:880px){ .service-grid{grid-template-columns:1fr;} }
.service-grid-2col{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }
@media(max-width:700px){ .service-grid-2col{grid-template-columns:1fr;} }
.service-card{
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.service-icon{
  height:64px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
}
.service-body{ padding:20px 22px 24px; }
.service-title{ font-weight:800; font-size:17px; margin-bottom:6px; }
.service-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
.service-meta-list{ list-style:none; padding:0; margin:0 0 18px; }
.service-meta-list li{
  font-size:12.5px; color:var(--ink-soft); padding-left:16px; position:relative; margin-bottom:6px; line-height:1.4;
}
.service-meta-list li::before{
  content:"•"; position:absolute; left:0; color:var(--green); font-weight:800;
}
.service-contacts{ display:flex; gap:10px; }
.service-contacts a{
  flex:1; text-align:center; font-size:12.5px; font-weight:700;
  border:1px solid var(--line); border-radius:100px; padding:9px 10px;
  color:var(--ink); transition:background 0.2s ease;
}
.service-contacts a:hover{ background:var(--offwhite); }

/* ---- MIGLIORAMENTI PELLE ---- */
.skin-card{
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line);
}
.skin-card-img{ width:100%; aspect-ratio:4/3; overflow:hidden; }
.skin-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.skin-card-body{ padding:18px 20px 22px; }

/* ---- BEAUTY VIDEO ---- */
.beauty-video-wrap{
  max-width:min(280px, 75vw); margin:0 auto 40px; text-align:center;
}
.beauty-video{
  width:100%; aspect-ratio:9/16; border-radius:18px;
  background:#000; display:block; box-shadow:0 12px 32px rgba(0,0,0,0.14);
}
.beauty-video-caption{
  font-size:13px; color:var(--ink-soft); margin-top:12px;
}

/* ---- IG PROFILE CARDS ---- */
.ig-profiles{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:32px;
}
.ig-profile-card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:8px 20px 8px 8px; min-width:240px;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.ig-profile-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,0.08); transform:translateY(-2px); }
.ig-profile-photo{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  object-position:top center; flex-shrink:0;
}
.ig-profile-info{ flex:1; }
.ig-profile-name{ font-weight:800; font-size:14.5px; color:var(--ink); }
.ig-profile-handle{ font-size:12.5px; color:var(--ink-soft); }
.ig-profile-follow{ font-size:12.5px; font-weight:700; color:var(--green-dark); white-space:nowrap; }
@media(max-width:480px){
  .ig-profile-card{ min-width:0; width:100%; max-width:300px; }
}