/* ====================================
MYTONE BIOTEC MONTEROTONDO
ELISA SFRAMELI BEAUTY STUDIO
==================================== */

:root{
  --pink:#d97aa6;
  --pink-light:#f0e1e8;
  --ottanio:#0f7c82;
  --ottanio-dark:#0b666b;
  --ottanio-light:#eaf7f7;
  --dark:#2b2b2b;
  --text:#555555;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;color:var(--dark);background:#fff;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none}
.container{width:90%;max-width:1200px;margin:auto}
section{padding:100px 0;scroll-margin-top:100px}

header{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 15px rgba(0,0,0,.05);
  transition:background .35s ease, box-shadow .35s ease
}
header.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 25px rgba(0,0,0,.08)
}
.header-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0
}
.logo img{
  width:auto;
  height:110px;
  max-width:none;
  display:block;
  transition:transform .35s ease
}
header.scrolled .logo img{transform:scale(.85)}

nav ul{list-style:none;display:flex;align-items:center;gap:20px}
nav ul li{list-style:none}
nav a{color:var(--dark);font-weight:500;transition:.3s;position:relative}
nav a:hover{color:var(--ottanio)}
nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--pink);
  transition:.3s
}
nav a:hover::after{width:100%}
.menu-toggle{display:none;font-size:34px;cursor:pointer;color:var(--dark);appearance:none;-webkit-appearance:none;background:transparent;border:none;padding:0;margin:0;font:inherit;line-height:1}

.btn-primary{
  position:relative;
  overflow:hidden;
  background:var(--ottanio);
  color:#fff;
  padding:15px 30px;
  border-radius:50px;
  display:inline-block;
  font-weight:600;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease
}
.btn-primary::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-25deg);
  transition:left .8s ease
}
.btn-primary:hover{
  background:var(--ottanio-dark);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,124,130,.22)
}
.btn-primary:hover::before{left:150%}
.btn-secondary{
  border:2px solid var(--pink);
  color:var(--pink);
  padding:15px 30px;
  border-radius:50px;
  display:inline-block;
  font-weight:500;
  transition:.3s
}
.btn-secondary:hover{
  background:var(--pink);
  color:#fff;
  transform:translateY(-2px)
}
.btn-whatsapp{
  background:var(--pink);
  color:#fff;
  padding:15px 30px;
  border-radius:50px;
  display:inline-block;
  font-weight:600;
  transition:.3s
}
.btn-whatsapp:hover{transform:translateY(-2px)}

.mytone-hero{
  min-height:calc(100svh - 140px);
  padding:50px 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.15) 28%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 60%),
    url("../images/mytone-hero.webp?v=ae5c886ff575");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center
}
.mytone-hero-content{
  max-width:700px;
  margin-left:5%;
  transform:translateY(-35px)
}
.hero-subtitle{
  color:var(--ottanio);
  letter-spacing:4px;
  font-weight:600;
  margin-bottom:20px
}
.mytone-hero-title{
  display:flex;
  flex-direction:column;
  margin-bottom:25px;
  text-transform:none
}
.mytone-title-top{
  font-family:'Cormorant Garamond',serif;
  font-size:5.5rem;
  line-height:1;
  color:var(--dark);
  font-weight:400;
  text-transform:none
}
.mytone-title-bottom{
  font-family:'Allura',cursive;
  font-size:6.8rem;
  color:var(--pink);
  line-height:.7;
  margin-top:-10px;
  font-weight:400;
  font-style:normal;
  text-transform:none
}
.mytone-location{
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;
  font-weight:500;
  color:var(--ottanio);
  letter-spacing:.5px;
  margin:10px 0 22px;
  line-height:1.2
}
.mytone-hero-description{
  font-size:1.1rem;
  color:var(--text);
  margin-bottom:35px;
  max-width:600px
}
.desktop-description{display:block}
.tablet-description{display:none}
.tablet-landscape-description{display:none}
.mobile-description{display:none}
.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
.rating{
  margin-top:30px;
  color:var(--ottanio);
  font-weight:600
}

.hero-subtitle,
.mytone-hero-title,
.mytone-location,
.mytone-hero-description,
.hero-buttons,
.rating{
  opacity:0;
  transform:translateY(20px);
  animation:heroFade .8s ease forwards
}
.hero-subtitle{animation-delay:.2s}
.mytone-hero-title{animation-delay:.45s}
.mytone-location{animation-delay:.7s}
.mytone-hero-description{animation-delay:.9s}
.hero-buttons{animation-delay:1.15s}
.rating{animation-delay:1.35s}
@keyframes heroFade{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.section-title{text-align:center;margin-bottom:50px}
.section-title h2{
  font-family:'Cormorant Garamond',serif;
  font-size:3.35rem;
  line-height:1.15;
  color:var(--dark)
}
.section-tag{
  display:block;
  text-align:center;
  color:var(--ottanio);
  font-weight:600;
  letter-spacing:4px;
  margin-bottom:15px
}
.section-tag-left{text-align:left}
.section-intro{
  text-align:center;
  max-width:820px;
  margin:0 auto 60px;
  color:var(--text)
}

.intro-section,.results-section,.who-section,.consultation-section,.before-after-section,.faq-section{background:#fff}
.fit4-section{background:linear-gradient(135deg,#fff,var(--ottanio-light) 52%,#fff)}
.zones-section{background:#fff}
.areas-section{background:linear-gradient(135deg,#fffafc 0%,#fff 48%,var(--ottanio-light) 100%)}
.intro-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:30px;
  align-items:start
}
.intro-content p{margin-bottom:20px;color:var(--text);font-size:1.08rem}
.intro-note{display:grid;gap:18px}
.note-card{
  background:#fff;
  border:1px solid rgba(217,122,166,.12);
  border-radius:24px;
  padding:28px 26px;
  box-shadow:var(--shadow)
}
.note-label{
  display:block;
  color:var(--pink);
  font-size:.82rem;
  letter-spacing:3px;
  font-weight:600;
  margin-bottom:10px
}
.note-card strong{
  display:block;
  color:var(--ottanio);
  font-size:1.25rem;
  margin-bottom:8px
}
.note-card p{color:var(--text)}
.fit4-layout{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:28px;
  align-items:start
}
.fit4-layout > *{
  min-width:0
}
.fit4-visual{
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fdfdfd;
  min-height:340px
}
.fit4-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  object-position:center center
}
.fit4-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-content:start
}
.fit4-cards .benefit-card{
  padding:28px;
  height:100%
}
.fit4-cards .benefit-card h3{
  margin-bottom:12px
}
.fit4-cards .benefit-card p{
  font-size:.98rem
}

.result-wrapper,.natural-result-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:30px;
  align-items:center
}
.result-content p{color:var(--text);margin-bottom:20px;font-size:1.08rem}
.result-stats{display:grid;grid-template-columns:1fr;gap:18px}
.stat-card{
  background:#fff;
  padding:35px;
  border-radius:24px;
  border:1px solid rgba(217,122,166,.12);
  box-shadow:0 8px 25px rgba(0,0,0,.06);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.stat-card:hover{
  transform:translateY(-10px);
  border-color:rgba(15,124,130,.25);
  box-shadow:0 20px 45px rgba(15,124,130,.15)
}
.stat-card span{
  display:block;
  color:var(--ottanio);
  font-family:'Cormorant Garamond',serif;
  font-size:3rem;
  line-height:1;
  margin-bottom:10px
}
.stat-card p{font-size:1rem}
.natural-highlight{
  margin-top:30px;
  padding:25px 28px;
  border-left:5px solid var(--pink);
  background:rgba(255,255,255,.80);
  border-radius:0 18px 18px 0;
  color:var(--ottanio-dark);
  font-family:'Cormorant Garamond',serif;
  font-size:1.45rem;
  line-height:1.4
}

.when-section{
  position:relative;
  overflow:hidden
}
.when-section::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(15,124,130,.055);
  right:-170px;
  top:-170px;
  pointer-events:none
}
.when-section .container{position:relative;z-index:1}

.areas-layout{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:32px;
  align-items:stretch
}
.areas-visual{
  position:relative;
  top:auto;
  border-radius:28px;
  overflow:hidden;
  background:#dcd4cb;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:100%
}
.areas-visual::after{
  content:none;
  display:none
}
.areas-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}

.areas-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}
.areas-cards .zone-card{height:100%}

.zones-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.zone-card{
  background:#fff;
  padding:30px 26px 28px;
  border-radius:24px;
  border:1px solid rgba(217,122,166,.12);
  box-shadow:0 8px 25px rgba(0,0,0,.06);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.zone-card:hover{
  transform:translateY(-10px);
  border-color:rgba(15,124,130,.25);
  box-shadow:0 20px 45px rgba(15,124,130,.15)
}
.zone-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),#e79aba);
  color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:18px;
  box-shadow:0 12px 26px rgba(217,122,166,.18)
}
.zone-card h3,.stat-card h3,.note-card strong{
  color:var(--ottanio)
}
.zone-card h3{font-size:1.25rem;margin-bottom:15px}
.zone-card p,.result-content p,.intro-content p,.note-card p,.stat-card p{color:var(--text)}

.natural-result-image{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow)
}
.natural-result-image::after{
  content:none;
  display:none
}
.natural-result-image img{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:inherit;
  box-shadow:none
}
.intro-image img,.natural-result-image img{
  width:100%;
  max-width:100%;
  min-width:0;
  display:block;
  height:auto
}

/* Foto: solo angoli arrotondati e ombra leggera, senza cornici decorative */
.fit4-visual,
.areas-visual,
.natural-result-image,
.comparison-image{
  border:none;
  outline:none;
  box-shadow:var(--shadow)
}
.intro-content,.natural-result-content{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word
}
.natural-result-content h2{
  font-family:'Cormorant Garamond',serif;
  font-size:3.35rem;
  line-height:1.15;
  margin-bottom:30px
}

.process{
  background:var(--pink-light)
}
.process-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  margin-top:20px;
  padding-top:20px
}
.process-timeline::before{
  content:"";
  position:absolute;
  top:62px;
  left:10%;
  right:10%;
  height:2px;
  background:linear-gradient(90deg, rgba(217,122,166,.15), rgba(15,124,130,.30), rgba(217,122,166,.15))
}
.process-step{
  position:relative;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,124,130,.08);
  border-radius:26px;
  padding:34px 28px 30px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(2px);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease
}
.process-step:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 55px rgba(15,124,130,.14);
  border-color:rgba(15,124,130,.18)
}
.process-step-marker{
  width:76px;
  height:76px;
  border-radius:50%;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pink),#e79aba);
  color:#fff;
  box-shadow:0 12px 26px rgba(217,122,166,.22);
  position:relative;
  z-index:1;
  font-family:'Cormorant Garamond',serif;
  font-size:1.7rem;
  letter-spacing:.5px
}
.process-step-content{text-align:left}
.process-step-content h3{
  color:var(--ottanio);
  margin:0 0 14px;
  font-size:1.35rem
}
.process-step-content p{
  color:var(--text);
  font-size:1.05rem;
  line-height:1.75
}

.before-after-section{background:#fff}
.before-after-grid{max-width:1000px;margin:auto}
.before-after-card{
  background:#fff;
  padding:20px;
  border-radius:28px;
  box-shadow:var(--shadow)
}
.comparison-container{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px;
  width:100%
}
.comparison-image{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  aspect-ratio:3 / 4;
  min-width:0
}
.comparison-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transform-origin:center center;
  transition:transform .5s ease;
  will-change:transform;
  transform:scale(1)
}
.comparison-image:hover img{transform:scale(1.04)}
.image-label{
  position:absolute;
  left:15px;
  bottom:15px;
  padding:7px 16px;
  background:rgba(15,124,130,.88);
  color:#fff;
  border-radius:50px;
  font-size:.8rem;
  font-weight:600;
  backdrop-filter:blur(5px);
  z-index:5
}

.faq-section{background:var(--ottanio-light)}
.faq-wrapper{max-width:850px;margin:auto}
details{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:14px;
  margin-bottom:15px;
  padding:20px 24px;
  box-shadow:var(--shadow)
}
summary{
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--dark)
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";
  color:var(--ottanio);
  font-size:1.5rem;
  transition:transform .3s ease
}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--text);padding-top:18px}

.mytone-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--ottanio),#145f63);
  color:#fff;
  text-align:center
}
.mytone-cta::before{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  top:-220px;
  left:-120px
}
.mytone-cta::after{
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  border-radius:50%;
  background:rgba(217,122,166,.15);
  right:-170px;
  bottom:-230px
}
.mytone-cta-content{
  position:relative;
  z-index:2;
  max-width:850px
}
.cta-small-title{
  display:block;
  letter-spacing:3px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:20px;
  color:#fff;
  opacity:.85
}
.mytone-cta h2{
  font-family:'Cormorant Garamond',serif;
  font-size:3.5rem;
  line-height:1.15;
  margin-bottom:25px
}
.mytone-cta p{
  max-width:750px;
  margin:0 auto 35px;
  font-size:1.1rem
}
.mytone-cta .btn-primary{background:var(--pink)}
.mytone-cta .btn-primary:hover{background:#c96795}

footer{
  background:#103d40;
  color:#fff;
  text-align:center;
  padding:60px 20px
}
.footer-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px
}
.footer-logo{
  height:60px;
  width:auto;
  object-fit:contain
}
.footer-info p{
  line-height:1.6;
  opacity:.95;
  font-size:.95rem;
  margin-bottom:4px
}
.footer-info .copyright{
  margin-top:15px;
  font-size:.85rem;
  opacity:.7
}
.footer-legal{
  margin-top:10px;
  font-size:.9rem
}
.footer-legal a{
  color:#fff;
  opacity:.8;
  transition:opacity .3s
}
.footer-legal a:hover{
  opacity:1;
  text-decoration:underline
}
.footer-legal .separator{
  margin:0 10px;
  opacity:.4
}

.floating-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#006d6f;
  color:#fff;
  padding:16px 24px;
  border-radius:50px;
  font-weight:600;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  z-index:99999;
  transition:.3s
}
.floating-whatsapp:hover{transform:translateY(-3px)}

.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  box-shadow:0 -5px 25px rgba(0,0,0,.15);
  z-index:999999;
  transform:translateY(100%);
  transition:transform .5s ease-in-out;
  display:flex;
  justify-content:center
}
.cookie-banner.show{transform:translateY(0)}
.cookie-content{
  width:90%;
  max-width:1200px;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.cookie-content p{
  margin:0;
  font-size:.95rem;
  color:var(--text);
  flex:1;
  min-width:280px;
  line-height:1.5
}
.cookie-content a{
  color:var(--ottanio);
  font-weight:600;
  text-decoration:underline
}
.cookie-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap
}
.cookie-buttons button{
  cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  padding:12px 24px;
  border-radius:50px
}
.cookie-btn-reject{
  color:#9f4568;
  border-color:#9f4568;
  background:#fff
}

.fade-section{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease
}
.fade-section.show{
  opacity:1;
  transform:translateY(0)
}
.benefit-card,.process-step,.zone-card,.before-after-card{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .6s ease, transform .6s ease, box-shadow .35s ease
}
.benefit-card.show,.process-step.show,.zone-card.show,.before-after-card.show{
  opacity:1;
  transform:translateY(0)
}

@media (min-width:769px) and (max-width:1366px){
  .container{
    width:90% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important
  }
  .menu-toggle{
    display:block !important;
    font-size:34px;
    cursor:pointer
  }
  .btn-whatsapp{display:none !important}
  .header-container{
    width:90% !important;
    margin:auto !important;
    flex-wrap:wrap
  }
  nav{width:100%}
  nav ul{
    display:none;
    flex-direction:column;
    width:100%;
    text-align:center;
    gap:18px;
    padding:25px 0;
    background:#fff
  }
  nav ul.active{display:flex !important}
  .logo img{height:75px}
  .mytone-hero{min-height:85vh}
  .mytone-hero-content{
    margin-left:0;
    max-width:400px;
    transform:translateY(-20px)
  }
  .hero-subtitle{
    font-size:.95rem;
    letter-spacing:2.5px;
    line-height:1.4;
    margin-bottom:18px
  }
  .mytone-title-top{
    font-size:4rem;
    line-height:1
  }
  .mytone-title-bottom{
    font-size:5.2rem;
    line-height:.9;
    margin-top:-6px
  }
  .mytone-location{
    font-size:1.45rem;
    margin:12px 0 20px
  }
  .mytone-hero-description{
    font-size:1.02rem;
    line-height:1.6;
    margin-bottom:28px;
    color:#333
  }
  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    width:100%
  }
  .hero-buttons .btn-primary,.hero-buttons .btn-secondary{
    width:100%;
    text-align:center;
    padding:15px 28px
  }
  .hero-buttons .btn-secondary{
    background:rgba(255,255,255,.85);
    color:#d97aa6;
    font-weight:600
  }
  .rating{
    margin-top:24px;
    font-size:.9rem
  }
  section{padding:80px 0}
  .section-title h2,.mytone-cta h2,.natural-result-content h2{font-size:2.8rem}
  .intro-wrapper,.result-wrapper,.natural-result-wrapper{
    grid-template-columns:1fr;
    gap:35px
  }
  .fit4-layout{grid-template-columns:1fr;gap:24px}
  .fit4-visual{max-width:820px;margin:0 auto;min-height:300px}
  .fit4-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .zones-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas-layout{grid-template-columns:1fr;gap:28px}
  .areas-visual{position:relative;top:auto;max-width:760px;margin:0 auto;height:auto;min-height:0}
  .areas-visual img{height:auto;max-height:none;object-fit:contain}
  .areas-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-timeline{grid-template-columns:1fr}
  .process-timeline::before{display:none}
  .floating-whatsapp{
    right:15px;
    bottom:15px;
    padding:14px 20px
  }
}

@media (max-width:768px){
  .container{
    width:90% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important
  }
  .menu-toggle{
    display:block !important;
    font-size:34px;
    cursor:pointer
  }
  .btn-whatsapp{display:none !important}
  .header-container{
    width:90% !important;
    margin:auto !important;
    flex-wrap:wrap
  }
  nav{width:100%}
  nav ul{
    display:none;
    flex-direction:column;
    width:100%;
    text-align:center;
    gap:18px;
    padding:25px 0;
    background:#fff
  }
  nav ul.active{display:flex !important}
  .logo img{height:75px}
  .desktop-description{display:none}
  .mobile-description{display:block}
  .mytone-hero{min-height:85vh}
  .mytone-hero-content{
    max-width:310px;
    margin-left:0;
    transform:translateY(-25px)
  }
  .hero-subtitle{
    font-size:.82rem;
    letter-spacing:2px;
    line-height:1.4;
    max-width:200px;
    margin-bottom:15px
  }
  .mytone-title-top{
    font-size:3.1rem;
    line-height:1
  }
  .mytone-title-bottom{
    font-size:4.1rem;
    margin-top:-5px;
    line-height:.9
  }
  .mytone-location{
    font-size:1.2rem;
    margin-bottom:20px
  }
  .mytone-hero-description{
    font-size:.92rem;
    line-height:1.5;
    margin-bottom:25px;
    color:#333
  }
  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    width:100%
  }
  .hero-buttons .btn-primary,.hero-buttons .btn-secondary{
    width:100%;
    text-align:center;
    padding:13px 25px
  }
  .hero-buttons .btn-secondary{
    background:rgba(255,255,255,.85);
    color:#b84a7e;
    font-weight:600
  }
  .rating{
    margin-top:20px;
    font-size:.8rem
  }
  section{padding:75px 0}
  .section-title{margin-bottom:35px}
  .section-title h2,.mytone-cta h2,.natural-result-content h2{font-size:2.5rem}
  .section-tag{font-size:.82rem;letter-spacing:3px}
  .section-tag-left{text-align:center}
  .section-intro{margin-bottom:45px}
  .intro-wrapper,.result-wrapper,.natural-result-wrapper{grid-template-columns:1fr;gap:30px}
  .intro-note{gap:14px}
  .note-card,.benefit-card,.zone-card,.before-after-card,.stat-card{padding:28px}
  .benefits-grid{grid-template-columns:1fr;gap:20px}
  .zones-grid{grid-template-columns:1fr;gap:18px}
  .process-timeline{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    gap:22px;
    margin-top:20px;
    padding-top:0;
    overflow:visible
  }
  .fit4-layout{grid-template-columns:1fr;gap:22px}
  .fit4-visual{min-height:250px;max-width:none}
  .fit4-cards{grid-template-columns:1fr;gap:18px}
  .areas-layout{grid-template-columns:1fr;gap:24px}
  .areas-visual{position:relative;top:auto;max-width:none;height:auto;min-height:0}
  .areas-visual img{height:auto;max-height:none;object-fit:contain}
  .areas-cards{grid-template-columns:1fr;gap:18px}
  .process-timeline::before{
    content:"";
    position:absolute;
    top:30px;
    bottom:30px;
    left:31px;
    right:auto;
    width:2px;
    height:auto;
    background:linear-gradient(180deg, rgba(217,122,166,.25), rgba(15,124,130,.45), rgba(217,122,166,.25))
  }
  .process-step{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:20px;
    align-items:start;
    padding:24px 20px 24px 0;
    border-radius:22px;
    overflow:hidden
  }
  .process-step-marker{
    width:62px;
    height:62px;
    margin:0;
    font-size:1.4rem;
    flex-shrink:0
  }
  .process-step-content{
    min-width:0;
    max-width:100%;
    padding-top:4px
  }
  .process-step-content h3{
    font-size:1.3rem;
    line-height:1.2;
    margin:0 0 10px;
    overflow-wrap:break-word
  }
  .process-step-content p{
    width:100%;
    max-width:100%;
    font-size:.96rem;
    line-height:1.65;
    overflow-wrap:break-word;
    word-break:normal
  }
  .before-after-grid{
    width:100%;
    max-width:100%
  }
  .before-after-card{
    width:100%;
    max-width:100%;
    padding:10px;
    border-radius:22px
  }
  .comparison-container{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%
  }
  .comparison-image{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:16px
  }
  .comparison-image img{
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    display:block
  }
  .comparison-image img:not(.foto-dopo){transform:none}
  .comparison-image img.foto-dopo{transform:none}
  .comparison-image:hover img:not(.foto-dopo),
  .comparison-image:hover img.foto-dopo{transform:none}
  .image-label{
    left:10px;
    bottom:10px;
    padding:5px 12px;
    font-size:.7rem
  }
  details{padding:18px 20px}
  summary{font-size:.95rem}
  .mytone-cta p{font-size:1rem}
  .floating-whatsapp{
    right:15px;
    bottom:15px;
    padding:14px 20px
  }
  .cookie-content{
    flex-direction:column;
    text-align:center;
    padding:20px 15px
  }
  .cookie-buttons{
    justify-content:center;
    width:100%;
    flex-direction:column;
    gap:10px
  }
  .cookie-buttons button{
    width:100%;
    text-align:center
  }
}

@media (max-width:480px){
  .mytone-hero-content{max-width:250px}
  .mytone-title-top{font-size:2.6rem}
  .mytone-title-bottom{font-size:3.4rem}
  .section-title h2,.mytone-cta h2,.natural-result-content h2{font-size:2.2rem}
  .hero-buttons a,.btn-primary,.btn-secondary{width:100%;text-align:center}
}

@media (max-width: 768px) {
  .hero-buttons > a,
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    line-height: 1.2;
    white-space: nowrap !important;
    flex: 0 0 auto;
  }
}

/* ==================================================
   ALLINEAMENTO HERO MOBILE
   L'header usa il comportamento standard delle altre pagine del sito.
   ================================================== */

@media (max-width:768px){
  .mytone-hero{
    justify-content:flex-start !important;
  }

  .mytone-hero .container.mytone-hero-content{
    width:90% !important;
    max-width:310px !important;
    margin-left:5% !important;
    margin-right:auto !important;
    text-align:left !important;
    align-items:flex-start !important;
  }

  .mytone-hero-content > *,
  .hero-subtitle,
  .mytone-hero-title,
  .mytone-location,
  .mytone-hero-description,
  .hero-buttons,
  .rating{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  .hero-buttons{
    align-items:flex-start !important;
  }

  .rating a.rating-link{
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

@media (max-width:480px){
  .mytone-hero .container.mytone-hero-content{
    max-width:250px !important;
  }
}


/* === MYTONE HERO RESPONSIVE ASSETS 2026-08-10 ===
   I tre file vengono selezionati in automatico quando presenti in assets/images. */
@media (min-width:769px) and (max-width:1180px){
  .mytone-hero{
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.15) 28%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 60%),
      url("../images/mytone-hero-tablet.webp?v=711cb68b7235");
  }
}

@media (max-width:768px){
  .mytone-hero{
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.15) 28%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 60%),
      url("../images/mytone-hero-mobile.webp?v=7b549f0588dc");
    background-position:55% center;
  }
}

/* === MYTONE HERO DESKTOP POSITION 2026-08-15 ===
   Sposta l'immagine desktop verso sinistra senza modificare tablet/mobile. */
@media (min-width:1181px){
  .mytone-hero{
    background-position:80% center;
  }
}

/* === MYTONE HERO TABLET DEFINITIVO 2026-08-21 ===
   Blocco unico: allineamento a sinistra, 6 righe in portrait e 4 in landscape. */
@media (min-width:769px) and (max-width:1366px){
  .mytone-hero{justify-content:flex-start;}
  .mytone-hero .container.mytone-hero-content{
    width:90% !important;
    max-width:400px !important;
    margin-left:5% !important;
    margin-right:auto !important;
  }
  .mytone-hero-description .desktop-description{display:none;}
  .mytone-hero-description .tablet-description{display:block;}
  .mytone-hero-description .tablet-description > span{display:block;white-space:nowrap;}
}

@media (min-width:769px) and (max-width:1366px) and (orientation:landscape){
  .mytone-hero-description .tablet-description{display:none;}
  .mytone-hero-description .tablet-landscape-description{display:block;}
  .mytone-hero-description .tablet-landscape-description > span{display:block;white-space:nowrap;}
}