/* ==========================================================
   Metodo Benson – bensonacademy.it
   Foglio di stile unico (ex styles.css + discount.css + stili policy)
   Font ospitati in locale: nessuna richiesta a terze parti.
   ========================================================== */

@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/noto-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/noto-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/noto-serif-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/noto-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/noto-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dancing-script-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/dancing-script-latin-700-normal.woff2') format('woff2'); }

:root {
  --blu: #264688;
  --bordeaux: #661222;
  --claret: #80172E;
  --arancio-testo: #B04A0E;   /* arancio scurito: contrasto AA su fondo chiaro */
  --grad-nav: linear-gradient(135deg, #D7DFEBcc, #76331Fcc, #94673Ecc, #677689cc, #32232Bcc);
  --header-h: 112px;
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { font-family: 'Noto Serif', serif; background: #f9f9f9; color: #222; overflow-x: hidden; }
button { font-family: inherit; }
h1, h2, h3 { font-family: 'Dancing Script', cursive; }
ul, ol { list-style: none; }
img { width: 100%; height: auto; display: block; border-radius: 0.5rem; }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: #fff; color: var(--bordeaux); padding: .6rem 1rem; border-radius: .5rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }

/* ---------- HR animata ---------- */
.custom-hr {
  border: none; height: 2px; margin: 0; padding: 0; width: 100%;
  background: linear-gradient(to right, transparent, #264688, #80172E, #CEBDC2, #E0D4D8, #BA9C9E, #E46F2Ccc, transparent);
  background-size: 200% 100%;
  opacity: 0.8;
  animation: glowMove 3s linear infinite;
}
@keyframes glowMove { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

/* ---------- Hero video ---------- */
.hero-video { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.hero-video video, .hero-poster, .hero-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; border-radius: 0; }
.hero-video video { z-index: 1; background: transparent; }
/* quando il video parte, il poster sotto non deve vedersi nelle bande laterali */
.hero-video.is-playing .hero-poster { visibility: hidden; }
.hero-video.is-playing video { background: #000; }
.hero-toggle {
  position: absolute; z-index: 2; right: 1rem; bottom: 1rem; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: .75; transition: opacity .3s;
}
.hero-toggle:hover, .hero-toggle:focus-visible { opacity: 1; }
.hero-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.hero-toggle .i-play { display: none; }
.hero-toggle[aria-pressed="true"] .i-play { display: inline; }
.hero-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- Navbar desktop (>= 768px) ---------- */
.navbar { display: none; }
.hamburger, .mobile-menu { display: none; }

.social-icon { width: 1.2rem; height: 1.2rem; fill: currentColor; display: block; }

@media (min-width: 768px) {
  .navbar {
    position: fixed; top: 0; left: 0; width: 100%; padding: 1rem 2rem;
    display: flex; justify-content: space-between; align-items: center; z-index: 10;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    background: var(--grad-nav); color: #fff;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
  }
  .navbar.visible, .navbar:focus-within { opacity: 1; pointer-events: auto; }
  .nav-left, .nav-center, .nav-right { display: flex; align-items: center; gap: 1.5rem; }
  .nav-center { flex: 1; justify-content: center; flex-wrap: wrap; }
  .nav-left img { height: 80px; width: auto; }
  .navbar a { color: #fff; text-decoration: none; font-weight: 500; font-size: clamp(0.75rem, 2vw, 1rem); transition: opacity 0.3s ease; }
  .navbar a:hover { opacity: 0.7; }
  .navbar a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-left img { height: 60px; }
  .nav-center a { font-size: 0.75rem; padding: 0 0.3rem; }
  .nav-left, .nav-center, .nav-right { gap: 0.5rem; }
  .navbar { padding: .75rem 1rem; }
  :root { --header-h: 90px; }
}
@media (min-width: 1440px) {
  .nav-right { gap: 2rem; }
  .nav-right .social-icon { width: 1.4rem; height: 1.4rem; }
}
/* telefoni in orizzontale con larghezza >= 768: barra più bassa */
@media (min-width: 768px) and (max-height: 500px) {
  .navbar { padding: .4rem 1rem; }
  .nav-left img { height: 44px; }
  :root { --header-h: 64px; }
}

/* ---------- Hamburger + menu mobile (< 768px) ---------- */
@media (max-width: 767px) {
  :root { --header-h: 16px; }
  .hamburger {
    position: fixed; top: 1rem; right: 1rem; z-index: 1000;
    width: 30px; height: 24px; padding: 0; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .hamburger.visible, .hamburger:focus-visible, .hamburger.active { opacity: 1; pointer-events: auto; }
  .hamburger::before { content: ""; position: absolute; inset: -10px; } /* area tocco 50x44 */
  .hamburger span { height: 3px; width: 100%; background: var(--claret); border-radius: 2px; transition: all 0.3s ease; }
  .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 20;
    background: var(--grad-nav); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center;
    overflow-y: auto; padding: 2rem 1rem;
    transform: translateY(-100%); visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
  }
  .mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 0.4s ease, visibility 0s; }
  .logo-hmg { height: 130px; width: auto; }
  .mobile-menu ul { padding: 0; text-align: left; }
  .mobile-menu li { margin: 1rem 0; }
  .mobile-menu a { color: #fff; font-size: 1.2rem; text-decoration: none; font-family: 'Noto Sans', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
}
/* menu mobile con telefono in orizzontale: logo piccolo, voci su due colonne */
@media (max-width: 767px) and (max-height: 500px) {
  .mobile-menu { justify-content: flex-start; padding-top: 1rem; }
  .logo-hmg { height: 60px; }
  .mobile-menu ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .mobile-menu li { margin: .45rem 0; }
  .mobile-menu a { font-size: 1.05rem; }
}

/* ---------- Sezioni home ---------- */
.benson-section { padding: 4rem 1rem; display: flex; justify-content: center; background-color: #f9f9f9; }
.with-image { position: relative; overflow: hidden; }
.bg-image { position: absolute; top: 0; left: 0; width: 120%; max-width: none; height: auto; opacity: 0.3; z-index: 0; pointer-events: none; border-radius: 0; }

.benson-container {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; flex-direction: row;
  max-width: 1200px; width: 100%;
  background-color: whitesmoke;
  box-shadow: 0 0 25px rgba(103, 118, 137, 0.7);
  border-radius: 1rem; overflow: hidden;
}
/* Animazione di entrata: parte solo quando l'elemento sta per entrare nello schermo.
   Stato di base = visibile (niente contenuto "trasparente" per Lighthouse / senza JS);
   l'animazione parte da opacity 0.01 e non da 0, altrimenti PageSpeed segnala NO_LCP. */
@keyframes fadeUp { from { opacity: 0.01; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.benson-container.visible, .benson-timeline-section.visible, .acquista-section.visible, .lezione-section.visible { animation: fadeUp 0.8s ease both; }

.benson-text, .benson-image { flex: 1 1 500px; padding: 2rem; position: relative; z-index: 1; }
.benson-text { order: 1; }
.benson-image { order: 2; flex: 1 1 300px; max-width: 100%; border-radius: 0.5rem; }
.benson-text h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--blu); }
h2, h3 { font-size: 2rem; margin-bottom: 1rem; color: var(--blu); }
.benson-text p { font-size: 1.1rem; line-height: 1.6; color: #333; }
h1.metodo-red, h2.metodo-red { color: var(--bordeaux); }
h2.struttura-orange { color: var(--arancio-testo); }

.benson-image img { width: 100%; height: auto; border-radius: 0.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benson-image img:hover { transform: scale(1.02); box-shadow: 0 16px 32px rgba(38, 70, 136, 0.35); }
.bottom-img { margin-bottom: 40px; }
.shadow-bordeaux { box-shadow: 0 0 32px rgba(128, 23, 46, 0.4); }
.shadow-blue { box-shadow: 0 0 32px rgba(38, 70, 136, 0.4); }
.shadow-orange { box-shadow: 0 0 32px rgba(228, 111, 44, 0.4); }

@media (max-width: 1024px) {
  .benson-container { flex-direction: column; }
  .benson-image { padding: 0 2rem; }
}
@media (min-width: 600px) {
  .benson-image { display: flex; justify-content: center; align-items: center; }
  .benson-image img { max-width: 300px; }
}
@media (min-width: 1024px) {
  .benson-image { margin-right: 0; padding-right: 0; }
}
@media (min-width: 1280px) {
  .bottom-img { margin-top: 30px; }
}

/* ---------- Pulsanti ---------- */
.benson-button {
  margin-top: 2rem; margin-bottom: 2rem; padding: 0.8rem 1.5rem;
  font-size: 1rem; color: #fff; border: none; border-radius: 0.5rem; cursor: pointer;
  transition: all 0.3s ease; position: relative; display: inline-block; text-align: center; text-decoration: none;
}
.button-red { background: linear-gradient(to bottom, #80172E, #661222); box-shadow: 0 6px 12px rgba(128, 23, 46, 0.4); }
.button-blue { background: linear-gradient(to bottom, #4a6db3, #3a5799, #264688); box-shadow: 0 6px 12px rgba(38, 70, 136, 0.4); }
/* arancio scurito per contrasto AA del testo bianco */
.button-orange { background: linear-gradient(to bottom, #B8501A, #AD4A12, #9E430F); box-shadow: 0 6px 12px rgba(228, 111, 44, 0.4); }
.benson-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(128, 23, 46, 0.6); }
.benson-button:active { transform: translateY(1px); box-shadow: 0 4px 8px rgba(128, 23, 46, 0.3); }
@media (min-width: 600px) and (max-width: 1024px) {
  .benson-button { max-width: 250px; display: block; margin-left: auto; margin-right: auto; margin-top: 50px; }
}
@media (min-width: 1280px) {
  .button-orange, .button-red { padding: 1.2rem 2.5rem; }
}

/* ---------- Contatti ---------- */
.contatti-h2, .contatti-p, .contatti-cta, .contatti-email { text-align: center; }
.contatti-email { font-size: .95rem !important; color: #444 !important; }
#contatti .benson-text { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Programma (timeline) ---------- */
.benson-timeline-section {
  background-color: #f9f9f9; padding: calc(var(--header-h) + 2rem) 1rem 4rem; text-align: center;
}
.benson-timeline-title { font-size: 2rem; color: var(--blu); margin-bottom: 3rem; font-family: 'Noto Sans', sans-serif; }
.benson-timeline { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0; }
.timeline-step { background-color: #fff; border-radius: 1rem; box-shadow: 0 0 20px rgba(38, 70, 136, 0.2); padding: 2rem; max-width: 250px; flex: 1 1 200px; transition: transform 0.3s ease; }
.timeline-step:hover { transform: translateY(-5px); box-shadow: 0 0 25px rgba(38, 70, 136, 0.3); }
.step-circle { width: 50px; height: 50px; margin: 0 auto 1rem; background-color: var(--claret); color: #fff; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.timeline-step h2 { font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--blu); }
.timeline-step p { font-size: 1rem; color: #333; line-height: 1.5; }
@media (max-width: 1024px) { .benson-timeline .timeline-step { flex: 1 1 calc(50% - 1rem); } }
@media (max-width: 768px) { .benson-timeline { flex-direction: column; align-items: center; } .timeline-step { width: 100%; } }
@media (min-width: 769px) { .benson-timeline-section { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } }

/* ---------- Acquista ---------- */
.acquista-section {
  padding: 4rem 1rem; max-width: 900px; width: 100%; margin: 0 auto; background: #f9f9f9; border-radius: 1rem;
  box-shadow: 0 0 25px rgba(103, 118, 137, 0.2);
}
body.show-nav .benson-section:first-child { padding-top: calc(var(--header-h) + 2rem); }
.acquista-section h1 { font-size: 2.2rem; color: var(--blu); text-align: center; margin-bottom: 2rem; }
.acquista-steps { padding: 0; font-size: 1.1rem; color: #333; }
.acquista-steps li { margin-bottom: 1.5rem; line-height: 1.6; }
.acquista-steps ul { margin-top: .5rem; }
.acquista-steps ul li { margin-bottom: .2rem; }
.acquista-section a { color: var(--bordeaux); }
.price-tag { font-size: 1.3rem; font-weight: bold; margin-top: 2rem; color: var(--claret); text-align: center; }
.acquista-privacy { margin-top: 1.5rem; text-align: center; font-size: .95rem; color: #444; }
/* Versione scontata (sezione commentata in acquista.html) */
.acquista-section.discounted { background-color: #fff7f7; border: 2px solid #C62828; padding: 20px; max-width: 600px; margin: 2rem auto; font-family: 'Noto Sans', sans-serif; color: #333; position: relative; }
.acquista-section.discounted h1 { color: #C62828; font-weight: 700; margin-bottom: 1rem; font-family: 'Dancing Script', cursive; }
.acquista-section.discounted .price-tag { margin-top: 1.5rem; font-size: 1.8rem; font-weight: 900; color: #C62828; display: inline-block; padding: 0.3rem 0.8rem; border-radius: 5px; }
.acquista-section.discounted .old-price { text-decoration: line-through; color: #6b6b6b; margin-right: 10px; font-weight: 700; font-size: 1.2rem; }
.acquista-section.discounted .new-price { color: #C62828; font-weight: 900; font-size: 1.8rem; }
.acquista-section.discounted::before { content: "Offerta Limitata!"; position: absolute; top: -30px; left: 0; background-color: #C62828; color: #fff; padding: 5px 15px; font-weight: 700; border-radius: 20px; font-size: 1rem; font-family: 'Dancing Script', cursive; }

/* ---------- Anteprima (lezione) ---------- */
.lezione-section {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; text-align: center;
}
@media (min-width: 768px) { .lezione-section { padding-top: 130px; } }
.container { max-width: 1000px; margin: 0 auto; width: 100%; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--blu); }
.video-wrapper { max-width: 800px; margin: 2rem auto; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); border-radius: 1rem; overflow: hidden; }
.video-wrapper video { width: 100%; height: auto; display: block; background: #000; }
.cta-container { text-align: center; margin-top: 2rem; }

/* ---------- Footer ---------- */
.benson-footer { background: var(--grad-nav); color: #fff; padding: 1.2rem 1rem 0.8rem; font-family: 'Noto Sans', sans-serif; }
.footer-content { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.footer-left, .footer-right { width: 100%; display: flex; flex-direction: column; align-items: center; }
.logo-footer { height: 80px; width: auto; }
.footer-social-icons { display: flex; gap: .4rem; justify-content: center; order: -1; margin-bottom: 4px; }
.footer-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; transition: transform 0.3s; }
.footer-social-icons a:hover { transform: scale(1.1); }
.footer-social-icons .social-icon { width: 1.4rem; height: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.footer-email { font-style: normal; }
.footer-email a { display: inline-block; padding: 10px 16px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.footer-bottom { text-align: center; margin-top: 0.4rem; font-size: 0.85rem; color: #fff; }
.footer-bottom p { margin: 0 0 .4rem; font-family: 'Noto Serif', serif; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.footer-links { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.footer-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.7); padding: .3rem 0; }
.footer-link:hover { text-decoration-thickness: 2px; }
.footer-powered { display: flex; justify-content: center; align-items: center; gap: 0.4rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.gabyweb-link { display: inline-flex; align-items: center; }
.gabyweb-logo { height: 36px; width: auto; border-radius: 0; }

/* ---------- Pagine policy ---------- */
.policy-main { padding: calc(var(--header-h) + 1.5rem) 1rem 3rem; display: flex; justify-content: center; background: #fff; }
.policy-container { max-width: 760px; width: 100%; padding: 2.5rem 1.8rem; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); background: #fff; }
.policy-container h1 { text-align: center; color: var(--bordeaux); margin-bottom: 0.8rem; font-size: 2.4rem; }
.policy-container h2 { font-family: 'Noto Serif', serif; font-size: 1.15rem; font-weight: 700; color: var(--bordeaux); margin: 2rem 0 .6rem; }
.policy-container p, .policy-container li { line-height: 1.7; margin-bottom: 0.7rem; font-size: 1.03rem; }
.policy-container ul { padding-left: 1.2rem; list-style: disc; }
.policy-container a { color: var(--bordeaux); text-decoration: underline; }
.policy-date { text-align: right; font-style: italic; font-size: .95rem; margin-bottom: 1.2rem; color: #444; }
@media (max-width: 600px) { .policy-container { padding: 1.2rem .9rem; } .policy-container h1 { font-size: 2rem; } }

/* ---------- 404 / 403 ---------- */
.error-main { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--header-h) + 2rem) 1rem 3rem; text-align: center; }
.error-box { max-width: 560px; }
.error-code { font-family: 'Dancing Script', cursive; font-size: 5rem; color: var(--claret); line-height: 1; }
.error-box h1 { color: var(--blu); font-size: 2.4rem; margin: .5rem 0 1rem; }
.error-box p { font-size: 1.1rem; color: #333; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* spazio per l'hamburger fisso sopra i titoli delle pagine interne (mobile) */
@media (max-width: 767px) {
  .benson-timeline-section, body.show-nav .benson-section:first-child, .lezione-section, .policy-main, .error-main { padding-top: 4.5rem; }
}
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }