@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --paper: #fffdf8;
  --cream: #f5efe3;
  --cream-deep: #ebe1d1;
  --green: #315f35;
  --green-dark: #173b26;
  --red: #b93a34;
  --orange: #c78637;
  --ink: #1b211c;
  --muted: #5f695f;
  --line: rgba(27, 33, 28, .16);
  --cn-display-font: "Arial Rounded MT Bold", "Avenir Next", Arial, sans-serif;
  --cn-display-tracking: .005em;
  --cn-hero-font: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --body: "Avenir Next", Avenir, Inter, Arial, sans-serif;
  --min-type: 14pt;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--min-type); line-height: 1.6; }
.elementor-page .elementor-element.e-con { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0; --container-widget-width: 100%; --container-widget-flex-grow: 1; gap: 0; }
.elementor-widget-cappuccinotes-section, .elementor-widget-cappuccinotes-section > .elementor-widget-container { width: 100%; margin: 0 !important; }
.lessons.elementor-lessons-intro { padding-bottom: 0; }
.lessons.elementor-lessons-group { padding-block: 0; }
.lessons.elementor-lessons-private { padding-top: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
small { font-size: var(--min-type); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 16px; background: white; border: 1px solid var(--line); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.site-header { position: relative; z-index: 20; background: var(--paper); }
.mini-bar { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 8px 24px; background: var(--green-dark); color: white; font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mini-bar span:nth-child(even) { color: var(--orange); }
.nav-shell { width: min(1320px, calc(100% - 40px)); height: 100px; margin: auto; display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; align-items: center; gap: 24px; }
.brand { width: 260px; height: 82px; display: flex; align-items: center; overflow: hidden; }
.brand img { width: 260px; height: auto; max-width: none; }
.nav-links { justify-self: center; display: flex; gap: 38px; font-size: var(--min-type); font-weight: 700; }
.nav-links a { padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav-links a:hover { border-color: var(--green); }

.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 22px; border: 1px solid var(--green-dark); border-radius: 9px; background: var(--green-dark); color: white; font-size: var(--min-type); line-height: 1.2; font-weight: 600; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.button:hover { background: var(--green); border-color: var(--green); transform: translateY(-2px); }
.button-small { min-height: 48px; justify-self: end; padding: 11px 16px; font-size: var(--min-type); }
.button-secondary { background: transparent; color: var(--green-dark); }
.button-secondary:hover { color: white; }
.button-light { border-color: white; background: white; color: var(--green-dark); }
.button-light:hover { border-color: var(--cream); background: var(--cream); }

.poster-hero { isolation: isolate; width: min(1440px, calc(100% - 40px)); aspect-ratio: 1734 / 907; position: relative; margin: 20px auto 0; overflow: hidden; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.poster-hero__media { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.poster-hero__background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.poster-hero__content { position: relative; z-index: 1; width: 55%; height: 100%; padding: clamp(42px, 4.7vw, 76px) clamp(40px, 4.5vw, 74px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.poster-hero__title { margin: 0; color: var(--green-dark); font-family: var(--cn-hero-font); font-size: clamp(66px, 6.25vw, 100px); font-weight: 400; letter-spacing: .005em; line-height: .94; text-transform: uppercase; }
.poster-hero__title span { display: block; }
.poster-hero__accent { margin-top: .16em; color: #cf342f; }
.poster-hero__subtitle { margin: clamp(20px, 2vw, 30px) 0 0; color: #101510; font-family: var(--body); font-size: clamp(18px, 1.55vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }

.eyebrow { margin: 0 0 15px; color: var(--green); font-size: var(--min-type) !important; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
h2, h3 { margin: 0; font-family: var(--cn-display-font); font-kerning: normal; letter-spacing: var(--cn-display-tracking); }
h2 { font-size: clamp(42px, 4.5vw, 66px); line-height: 1.03; }
h3 { font-size: 25px; line-height: 1.12; }
h2 em { color: var(--red); font-style: normal; }
.section { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 88px 0; }
.section-heading { margin-bottom: 42px; }
.narrow-heading { max-width: 860px; }
.split-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 70px; }
.split-heading > p { margin: 0 0 5px; color: var(--muted); font-size: var(--min-type); }
.centered-heading { max-width: 760px; margin-inline: auto; text-align: center; }
.centered-heading > p:last-child { max-width: 650px; margin: 20px auto 0; color: var(--muted); }

.results { padding-top: 80px; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.results-grid article { padding: 34px 34px 38px 0; }
.results-grid article + article { padding-left: 34px; border-left: 1px solid var(--line); }
.results-grid span { display: block; margin-bottom: 44px; color: var(--red); font-size: var(--min-type); font-weight: 700; }
.results-grid h3 { margin-bottom: 13px; }
.results-grid p { margin: 0; color: var(--muted); }

.cappuccino-method { width: min(1440px, calc(100% - 40px)); margin: 8px auto 0; display: grid; grid-template-columns: 1.08fr .92fr; background: var(--cream); border-radius: 8px; overflow: hidden; }
.method-image { min-height: 720px; }
.method-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.method-copy { padding: 72px clamp(44px, 5vw, 82px); display: flex; flex-direction: column; justify-content: center; }
.method-lede { margin: 24px 0 30px; color: var(--muted); font-size: var(--min-type); }
.layers-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.layers-list li { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.layers-list li > span { color: var(--red); font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.layers-list h3 { margin-bottom: 5px; font-size: 20px; }
.layers-list p { margin: 0; color: var(--muted); font-size: var(--min-type); }

.lessons { width: min(1440px, calc(100% - 40px)); padding-top: 88px; padding-bottom: 96px; }
.lessons-heading { width: min(1200px, 100%); margin: 0 auto 44px; }
.format-options { width: min(1200px, 100%); margin: 0 auto 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.format-option { min-height: 180px; padding: 28px; display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 30px rgba(25,47,31,.04); transition: transform .35s cubic-bezier(.18,.88,.32,1.22), box-shadow .35s ease, border-color .35s ease; }
.format-option:hover { transform: translateY(-8px) rotate(-.35deg); border-color: var(--green); box-shadow: 0 22px 44px rgba(25,47,31,.13); }
.format-option:nth-child(2):hover { transform: translateY(-8px) rotate(.35deg); }
.format-icon { width: 112px; height: 112px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 42% 58% 54% 46% / 51% 44% 56% 49%; background: var(--cream); color: var(--green-dark); transition: transform .35s cubic-bezier(.18,.88,.32,1.22); }
.format-option:hover .format-icon { transform: rotate(-6deg) scale(1.07); }
.format-icon-classes i { position: absolute; font-style: normal; font-family: Arial, sans-serif; font-size: 42px; line-height: 1; }
.format-icon-classes i:nth-child(1) { left: 12px; top: 43px; color: var(--red); transform: rotate(-10deg); }
.format-icon-classes i:nth-child(2) { left: 37px; top: 17px; z-index: 1; color: var(--green-dark); }
.format-icon-classes i:nth-child(3) { right: 10px; top: 48px; color: #d38a2f; transform: rotate(10deg); }
.format-icon-one i { font-style: normal; font-family: Arial, sans-serif; font-size: 70px; line-height: 1; color: var(--green-dark); transform: translate(-7px, 4px); }
.format-icon-one b { position: absolute; right: 8px; top: 12px; min-width: 42px; padding: 6px 7px; border-radius: 50%; background: var(--red); color: white; font-size: 13px; line-height: 30px; text-align: center; transform: rotate(8deg); }
.format-option-copy { display: flex; flex-direction: column; gap: 8px; }
.format-option-copy strong { font-family: var(--cn-display-font); font-size: 31px; line-height: 1; }
.format-option-copy > span { color: var(--muted); font-size: var(--min-type); line-height: 1.45; }
/* Icona disegnata a mano invece del carattere freccia: su iOS il glifo veniva
   sostituito dall'emoji di sistema, un quadrato blu fuori palette. */
.format-arrow { align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green-dark); color: #fff; transition: transform .3s ease, background .3s ease; }
.format-arrow svg { width: 19px; height: 19px; display: block; }
.format-option:hover .format-arrow { background: var(--red); }
.format-option:hover .format-arrow { transform: translate(4px, 4px); }
.card-label { margin: 0 0 18px; color: var(--green); font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.group-feature { position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); padding: 48px 0 56px; display: flex; flex-direction: column; overflow: hidden; background: var(--green-dark); color: white; }
.group-feature::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../images/italian-cappuccino-pattern.png") center / 560px auto repeat; mix-blend-mode: screen; opacity: .08; pointer-events: none; }
.group-feature-image { width: min(1440px, calc(100% - 40px)); margin-inline: auto; aspect-ratio: 16 / 8.5; }
.group-feature-image img { width: 100%; height: 100%; object-fit: cover; }
.group-feature-copy { width: min(1240px, calc(100% - 40px)); margin-inline: auto; padding: clamp(44px, 5vw, 68px) 0 0; display: grid; gap: clamp(32px, 4vw, 48px); }
.group-feature .card-label { color: #edc680; }
.group-feature h3 { max-width: 880px; margin-bottom: 20px; font-size: clamp(40px, 4vw, 58px); }
.group-copy-intro { max-width: 940px; }
.group-copy-intro > p:not(.card-label) { margin: 0 0 18px; color: #dfe8dd; }
.group-copy-intro .group-lede { color: white; }
.program-info-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 18px; }
.program-panel { min-height: 100%; padding: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.06); }
.program-label { margin: 0 0 20px; color: #edc680; font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.group-feature ul, .private-copy ul { margin: 8px 0 0; padding: 22px 0 0; display: grid; gap: 11px 20px; border-top: 1px solid; list-style: none; font-size: var(--min-type); line-height: 1.45; font-weight: 600; }
.program-panel ul { grid-template-columns: 1fr 1fr; margin-top: 0; padding-top: 0; border: 0; }
.group-feature li::before { content: "—"; margin-right: 7px; color: #edc680; }
.class-times > p:not(.program-label) { margin: 0 0 20px; color: #dfe8dd; }
.class-times > p:last-child { margin: 22px 0 0; font-size: var(--min-type); }
.time-options { display: grid; gap: 10px; }
.time-options strong { padding: 14px 16px; border-left: 3px solid #edc680; background: rgba(255,255,255,.07); font-size: 18px; }
.program-learning { padding: 30px 0; display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: 46px; border-block: 1px solid rgba(255,255,255,.22); }
.program-learning .program-label { grid-column: 1 / -1; margin-bottom: -24px; }
.program-learning h4 { margin: 0; font-family: var(--cn-display-font); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; letter-spacing: var(--cn-display-tracking); }
.program-learning > div p { margin: 0 0 14px; color: #dfe8dd; }
.program-learning > div p:last-child { margin-bottom: 0; color: white; }
.private-copy ul { padding-left: 22px; list-style: disc; }
.private-copy li { min-height: 21px; padding-left: 2px; }
.private-copy li::marker { color: var(--red); }
.program-price { padding: 30px; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(280px, 1fr) auto; align-items: center; gap: 34px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.08); }
.program-price-main > span { display: block; margin-bottom: 4px; color: #edc680; font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.program-price-main > strong { display: block; font-size: clamp(50px, 5vw, 68px); line-height: 1; letter-spacing: -.05em; }
.program-price-main p { margin: 7px 0 0; color: #dfe8dd; font-size: var(--min-type); }
.program-price-summary { display: flex; flex-direction: column; gap: 3px; color: #dfe8dd; font-size: var(--min-type); }
.program-price-summary strong { margin-bottom: 5px; color: white; font-size: 18px; }
.program-price .button { min-width: 220px; }

.private-feature { margin-top: 56px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.private-overview { min-height: 430px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: stretch; }
.private-copy { padding: 52px; align-self: center; }
.private-copy h3 { max-width: 620px; margin-bottom: 16px; font-size: clamp(34px, 3.2vw, 48px); }
.private-copy > p:not(.card-label) { max-width: 720px; margin: 0 0 24px; color: var(--muted); }
.private-copy ul { grid-template-columns: 1fr 1fr; margin-bottom: 30px; border-color: var(--line); }
.private-single-price { margin: -4px 0 24px; display: flex; align-items: baseline; gap: 12px; }
.private-single-price strong { color: var(--green-dark); font-family: var(--cn-display-font); font-size: 28px; line-height: 1; }
.private-single-price span { color: var(--muted); font-size: var(--min-type); }
.private-copy > .button { width: 100%; }
.private-cup-wrap { min-height: 430px; overflow: hidden; background: rgba(235,225,209,.65); }
.private-illustration { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.about-section { width: min(1440px, calc(100% - 40px)); margin: 8px auto; display: grid; grid-template-columns: .82fr 1.18fr; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.about-image { min-height: 650px; }
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { padding: clamp(48px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; background: var(--green-dark); color: white; }
.about-copy .eyebrow { color: #dfb06c; }
.about-copy h2 { margin-bottom: 28px; }
.about-copy > p:not(.eyebrow) { margin: 0 0 18px; color: #dfe8dd; }
.credentials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.credentials span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; font-size: var(--min-type); line-height: 1.35; font-weight: 600; }

.process { padding-block: 72px; }
.process .section-heading { margin-bottom: 28px; }
.process .split-heading { grid-template-columns: minmax(0, 1.55fr) minmax(260px, .55fr); gap: 48px; }
.process .split-heading h2 { font-size: clamp(44px, 4vw, 58px); white-space: nowrap; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.process-list li { display: grid; grid-template-columns: 72px 1fr; min-height: 106px; align-items: center; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--red); font-size: var(--min-type); font-weight: 700; }
.process-list li > div { display: grid; grid-template-columns: minmax(250px, .58fr) minmax(0, 1fr); align-items: center; gap: 36px; }
.process-list p { margin: 0; color: var(--muted); }

.testimonials { position: relative; isolation: isolate; width: 100%; margin: 12px auto; padding: 92px 0 78px; overflow: hidden; background: var(--green-dark); color: white; }
.testimonials::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../images/italian-cappuccino-pattern.png") center / 560px auto repeat; mix-blend-mode: screen; opacity: .12; pointer-events: none; }
.testimonials-heading { position: relative; z-index: 1; width: min(980px, calc(100% - 48px)); margin: 0 auto 44px; text-align: center; }
.testimonials-heading h2 { max-width: 780px; margin: 0 auto; font-family: var(--body); font-size: clamp(38px, 4vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.quote-label { margin: 0 0 16px; color: #edc680; font-size: var(--min-type); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.testimonial-carousel { position: relative; z-index: 1; width: min(1008px, calc(100% - 48px)); margin: 0 auto; }
.testimonial-viewport { width: 100%; overflow: hidden; border-radius: 24px; }
.testimonial-track { width: 100%; display: flex; transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.testimonial-slide { flex: 0 0 100%; min-width: 0; padding: 0 14px; display: flex; }
.testimonial-card { position: relative; width: 100%; height: 430px; margin: 0; padding: 72px 78px 58px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid rgba(255,255,255,.3); border-radius: 22px; box-shadow: 0 22px 60px rgba(6,25,15,.25); }
.testimonial-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--red), var(--orange)); }
.quote-mark { position: absolute; top: 26px; right: 54px; color: var(--cream-deep); font-family: Georgia, serif; font-size: 120px; line-height: 1; }
.testimonial-card > p { position: relative; z-index: 1; max-width: 800px; margin: 0 0 44px; font-family: var(--body); font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; line-height: 1.3; letter-spacing: -.028em; }
.testimonial-card footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; font-size: var(--min-type); line-height: 1.35; }
.testimonial-card footer small { display: block; color: var(--muted); }
.avatar { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--green); color: white; font-weight: 700; }
.carousel-controls { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.carousel-controls button { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; color: white; cursor: pointer; font-family: var(--body); font-size: 28px; line-height: 1; transition: background .2s ease, color .2s ease, transform .2s ease; }
.carousel-controls button:hover { background: white; color: var(--green-dark); transform: translateY(-2px); }
.carousel-controls span { min-width: 68px; color: #e4ebe2; font-size: var(--min-type); text-align: center; }

.pricing { padding-top: 100px; }
.faq-list { border-top: 1px solid var(--ink); }
details { border-bottom: 1px solid var(--line); }
summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-family: var(--cn-display-font); font-size: 20px; font-kerning: normal; letter-spacing: var(--cn-display-tracking); }
summary::-webkit-details-marker { display: none; }
summary span:last-child { font-family: var(--body); font-size: 24px; font-weight: 400; transition: transform .2s ease; }
details[open] summary span:last-child { transform: rotate(45deg); }
details p { max-width: 800px; margin: -4px 0 26px; color: var(--muted); }

.final-cta { width: min(1200px, calc(100% - 48px)); margin: 12px auto 80px; padding: 52px 64px; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; column-gap: 44px; row-gap: 26px; background: var(--green); color: white; border-radius: 8px; }
.final-cta .eyebrow { color: #e4b46d; }
.final-cta h2 { max-width: 700px; font-size: clamp(37px, 4vw, 58px); }
.final-cta > div:nth-child(2) > p:last-child { max-width: 720px; margin: 22px 0 0; color: #e4ebe2; }
.final-cta > div:last-child { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.final-cta > div:last-child .button { min-width: 250px; }
.final-mascot { width: 270px; grid-row: 1 / span 2; align-self: center; opacity: 0; transform: translate(-68px, 46px) rotate(-8deg) scale(.72); transform-origin: 50% 100%; }
.final-mascot.is-visible { animation: mascot-arrive .9s cubic-bezier(.18,.88,.32,1.22) both; }
.final-mascot img { width: 100%; height: auto; }
.final-mascot.is-visible img { animation: mascot-float 4s ease-in-out .9s infinite; }

@keyframes mascot-arrive {
  from { opacity: 0; transform: translate(-56px, 42px) rotate(-8deg) scale(.72); }
  to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(1.5deg); }
}

.footer { width: min(1200px, calc(100% - 48px)); margin: 0 auto 24px; display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 50px; padding-top: 34px; border-top: 1px solid var(--line); }
.footer-brand img { width: 190px; height: 190px; object-fit: contain; object-position: center; }
.footer-brand p { margin: 4px 0 0; color: var(--muted); }
.footer > div:not(.footer-brand):not(.footer-bottom) { display: flex; flex-direction: column; gap: 7px; font-size: var(--min-type); }
.footer-label { margin: 0 0 7px; font-size: var(--min-type); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.footer-contact-button { width: fit-content; min-height: 48px; margin-bottom: 6px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--green-dark); border-radius: 8px; background: var(--green-dark); color: white; font-weight: 600; line-height: 1.2; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.footer-contact-button:hover { border-color: var(--green); background: var(--green); transform: translateY(-2px); }
.footer-bottom { grid-column: 1/-1; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--min-type); }
.back-to-top { width: 52px; height: 52px; flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: white; font-size: 27px; line-height: 1; box-shadow: 0 9px 22px rgba(190,60,48,.2); transition: transform .3s cubic-bezier(.18,.88,.32,1.22), box-shadow .3s ease, background .2s ease; }
.back-to-top:hover { transform: translateY(-6px); background: var(--green-dark); box-shadow: 0 14px 28px rgba(25,47,31,.2); }
.back-to-top:focus-visible { outline: 3px solid #e4b46d; outline-offset: 4px; }

@media (max-width: 980px) {
  .mini-bar { min-height: 36px; gap: 9px; padding: 7px 20px; font-size: 13px; letter-spacing: .055em; line-height: 1.2; white-space: nowrap; }
  .nav-shell { width: calc(100% - 56px); height: 84px; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }
  .brand { width: 220px; height: 72px; }
  .brand img { width: 220px; }
  .button-small { min-height: 44px; padding: 10px 14px; font-size: 16px; }
  .nav-links { display: none; }
  .poster-hero { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; }
  .poster-hero__media { order: 2; position: relative; inset: auto; width: 100%; aspect-ratio: 867 / 907; border-top: 1px solid var(--line); }
  /* Specificità (0,2,0): deve battere `.elementor img { max-width:100%; height:auto }`
     di Elementor, altrimenti width:200% viene bloccata al 100% e l'immagine,
     spostata di -100%, finisce tutta fuori dal riquadro (che ha overflow:hidden). */
  .poster-hero .poster-hero__background { inset: auto auto 0 -100%; width: 200%; max-width: none; height: auto; object-fit: contain; object-position: initial; }
  .poster-hero__content { order: 1; width: 100%; height: auto; min-height: 0; padding: 48px 44px 52px; justify-content: flex-start; }
  .poster-hero__title { max-width: 680px; font-size: clamp(66px, 9vw, 88px); }
  .poster-hero__subtitle { max-width: 620px; font-size: 22px; }
  .split-heading { grid-template-columns: 1fr; gap: 18px; }
  .results { width: calc(100% - 80px); }
  .results-grid { grid-template-columns: 1fr; }
  .results-grid article, .results-grid article + article { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .results-grid article:last-child { border-bottom: 0; }
  .results-grid span { margin-bottom: 20px; }
  .cappuccino-method { grid-template-columns: 1fr; }
  .method-image { min-height: 0; aspect-ratio: 4 / 3; }
  .format-options { grid-template-columns: 1fr; }
  .group-feature-copy { gap: 28px; }
  .program-info-grid { grid-template-columns: 1fr; }
  .program-learning { grid-template-columns: 1fr; gap: 16px; }
  .program-learning .program-label { grid-column: auto; margin-bottom: 0; }
  .program-price { grid-template-columns: 1fr 1fr; }
  .program-price .button { grid-column: 1 / -1; width: 100%; }
  .group-feature-image { aspect-ratio: 16 / 9; }
  .private-overview { grid-template-columns: 1fr; }
  .private-cup-wrap { min-height: 480px; }
  .about-section { grid-template-columns: 1fr; }
  .about-image { min-height: 600px; }
  .process .split-heading { grid-template-columns: 1fr; gap: 16px; }
  .process .split-heading h2 { white-space: normal; }
  .process-list li > div { grid-template-columns: 1fr; gap: 7px; }
  .final-cta { grid-template-columns: 220px 1fr; }
  .final-cta > div:last-child { grid-column: 2; align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: var(--min-type); }
  .mini-bar { min-height: 34px; gap: 7px; padding: 7px 18px; font-size: 13px; }
  .mini-bar span:not(:first-child) { display: none; }
  .nav-shell { width: calc(100% - 56px); height: 78px; grid-template-columns: 74px 1fr; gap: 12px; }
  .brand { width: 74px; height: 68px; }
  .brand img { width: 250px; transform: translateX(-1px); }
  .button-small { padding: 9px 12px; font-size: 15px; }
  /* --- Hero mobile immersiva -------------------------------------------------
     Solo telefono (<= 640px). Tablet e desktop restano impilati/affiancati.
     L'immagine diventa il fondo dell'intera sezione e il testo ci sta sopra.
     La `.nav-shell` (logo e bottone) diventa trasparente e l'immagine le passa
     sotto: la hero risale di 78px, l'altezza della nav. Sopra la hero resta
     solo la `.mini-bar` verde, alta 34px, ed è quello il valore di
     `--cn-hero-offset`: serve a far finire la hero esattamente a fondo schermo.
     Se cambiano le altezze di `.mini-bar` o `.nav-shell`, definite qui sopra in
     questo stesso blocco, vanno aggiornati sia l'offset sia il margine negativo.
     `svh` evita il salto di altezza quando su Safari iOS la barra degli
     indirizzi si ritira. */
  .site-header { background: transparent; }
  .poster-hero {
    --cn-hero-offset: 34px;
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(100vh - var(--cn-hero-offset));
    min-height: calc(100svh - var(--cn-hero-offset));
    /* Risale di 78px, l'altezza della `.nav-shell`, cosi l'illustrazione le
       passa sotto. Deve stare dopo, non prima: una `margin` abbreviata qui
       sopra azzererebbe lo spostamento. */
    margin: -78px 0 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  /* Da loggati WordPress aggiunge la barra di amministrazione (46px su mobile):
     senza questo la hero sborderebbe sotto il bordo dello schermo. */
  .admin-bar .poster-hero { --cn-hero-offset: 80px; }
  .poster-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-top: 0;
  }
  .poster-hero .poster-hero__background {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 80% 50%;
  }
  /* Due veli sovrapposti, entrambi nel crema del sito.
     Il primo è una fascia sottile in cima a tutta larghezza: fa da tappeto a
     logo e bottone, che ora stanno sopra l'illustrazione.
     Il secondo è un'ellisse ancorata all'angolo in alto a sinistra, dove sta il
     titolo: si spegne sia scendendo sia andando verso destra, così il terzo
     destro (il volto dell'allieva) e tutta la metà bassa restano ai colori
     pieni. Un velo a tutta larghezza su tutta l'altezza sbiadiva viso e cupola. */
  .poster-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(247,243,237,.55) 0%, rgba(247,243,237,.3) 10%, rgba(247,243,237,0) 22%),
      radial-gradient(125% 62% at 0% 0%, rgba(247,243,237,.55) 0%, rgba(247,243,237,.34) 48%, rgba(247,243,237,0) 82%);
    pointer-events: none;
  }
  /* Tappeto dietro al testo. Il velo diffuso da solo non bastava: su schermo vero
     il titolo scuro finiva sopra cupola e foglie e si leggeva male. Questo invece
     è un pannello crema pieno, largo quanto la colonna di testo e non di più, che
     sfuma a destra per non coprire il volto dell'allieva. La `mask-image` lo fa
     sfumare anche sopra e sotto, altrimenti si vedrebbero due tagli netti.
     Senza supporto alla maschera resta comunque il pannello sfumato a destra. */
  .poster-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 84px;
    bottom: -10px;
    left: -30px;
    right: -30px;
    /* Dove finisce il pieno. Non è una percentuale della larghezza, perché il
       tappeto deve seguire il testo, non lo schermo. Il sottotitolo finisce
       sempre a 255px dal bordo, mentre il titolo scala con la larghezza
       (`clamp(32px, 9.2vw, 44px)`) e arriva a 26px + 5,95 volte il corpo: 214px
       su iPhone SE, 285px a 568px di larghezza. Prendo il maggiore dei due e
       aggiungo 12px d'aria; i 30px in più sono lo sbordo a sinistra. */
    --cn-mat: max(297px, 68px + 5.95 * clamp(32px, 9.2vw, 44px));
    --cn-mat-fade: 80px;
    background: linear-gradient(to right, rgba(250,246,240,.94) 0, rgba(250,246,240,.9) var(--cn-mat), rgba(250,246,240,0) calc(var(--cn-mat) + var(--cn-mat-fade)));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
    pointer-events: none;
  }
  .poster-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 104px 26px 24px;
    justify-content: flex-start;
  }
  /* 20ch tiene "STOP STUDYING / ITALIAN." su due righe e "START SPEAKING IT."
     tutto su una, invece di lasciare "IT." orfano a capo. */
  .poster-hero__title {
    max-width: 20ch;
    font-size: clamp(32px, 9.2vw, 44px);
    line-height: .97;
    text-shadow: 0 1px 12px rgba(250,246,240,.9);
  }
  .poster-hero__subtitle {
    margin-top: 14px;
    max-width: 24ch;
    font-size: 16px;
    line-height: 1.35;
    text-shadow: 0 1px 10px rgba(250,246,240,.9);
  }
  .section { width: calc(100% - 56px); padding: 68px 0; }
  .results { width: calc(100% - 72px); }
  /* I tre punti erano troppo distanziati: 28px sopra e sotto ogni blocco piu
     20px fra il numero e il titolo. */
  .results-grid article, .results-grid article + article { padding: 18px 0; }
  .results-grid span { margin-bottom: 10px; }
  .results-grid h3 { margin-bottom: 8px; }
  h2 { font-size: 40px; }
  /* --- Sezioni a tutta larghezza --------------------------------------------
     Su telefono le quattro sezioni con sfondo pieno smettono di essere schede:
     niente larghezza ridotta, niente angoli arrotondati, niente cornice, cosi
     il colore arriva ai bordi dello schermo e si leggono come fasce continue.
     Il margine di 20px passa dal contenitore al testo che sta dentro. */
  .cappuccino-method { width: 100%; margin-inline: 0; border-radius: 0; }
  .method-image { min-height: 0; aspect-ratio: 4 / 3; }
  .method-copy { padding: 52px 20px; }
  .layers-list li { grid-template-columns: 1fr; gap: 7px; }
  .lessons-heading { margin-bottom: 34px; }
  .format-options { margin-bottom: 42px; }
  .format-option { min-height: 0; padding: 22px; grid-template-columns: 84px 1fr auto; gap: 17px; }
  .format-icon { width: 84px; height: 84px; }
  .format-icon-classes i { font-size: 32px; }
  .format-icon-classes i:nth-child(1) { left: 7px; top: 34px; }
  .format-icon-classes i:nth-child(2) { left: 28px; top: 12px; }
  .format-icon-classes i:nth-child(3) { right: 5px; top: 38px; }
  .format-icon-one i { font-size: 54px; }
  .format-icon-one b { right: 2px; top: 5px; min-width: 34px; padding: 3px; font-size: 11px; line-height: 28px; }
  .format-option-copy strong { font-size: 27px; }
  /* Margine laterale di 20px per lato: prima erano 28px di larghezza ridotta
     piu 24px di padding, cioe 52px, troppi su telefono. */
  .group-feature-image, .group-feature-copy { width: calc(100% - 40px); }
  .group-feature-copy { padding: 38px 0; }
  .group-feature h3 { font-size: 38px; }
  .program-panel { padding: 24px; }
  .program-panel ul { grid-template-columns: 1fr; }
  .program-learning { padding-block: 26px; }
  .program-price { padding: 24px; grid-template-columns: 1fr; gap: 24px; }
  .program-price .button { grid-column: auto; min-width: 0; }
  /* La scheda privata sta dentro una `.section` stretta: vanno allargate
     entrambe, altrimenti resta il margine del contenitore. */
  .elementor-lessons-private { width: 100%; }
  .private-feature { border: 0; border-radius: 0; }
  .private-copy { padding: 38px 20px; }
  .private-copy ul { grid-template-columns: 1fr; }
  .private-single-price { align-items: flex-start; flex-direction: column; gap: 6px; }
  .private-cup-wrap { min-height: 420px; }
  .about-section { width: 100%; margin-inline: 0; border: 0; border-radius: 0; }
  .about-image { min-height: 500px; }
  .about-copy { padding: 52px 20px; }
  .process { padding-block: 58px; }
  .process .section-heading { margin-bottom: 24px; }
  .process-list li { grid-template-columns: 48px 1fr; min-height: 126px; padding: 16px 0; }
  .testimonials { padding: 68px 0 58px; }
  .testimonials::before { background-size: 430px auto; opacity: .1; }
  .testimonials-heading, .testimonial-carousel { width: calc(100% - 56px); }
  .testimonials-heading { margin-bottom: 30px; text-align: left; }
  .testimonial-slide { padding-inline: 9px; }
  .testimonial-card { height: 480px; padding: 58px 28px 38px; border-radius: 18px; }
  .testimonial-viewport { border-radius: 18px; }
  .quote-mark { top: 18px; right: 24px; font-size: 90px; }
  .testimonial-card > p { font-size: 27px; }
  .pricing { padding-top: 76px; }
  summary { font-size: var(--min-type); line-height: 1.3; }
  .final-cta { width: 100%; margin-bottom: 60px; padding: 45px 20px; border-radius: 0; grid-template-columns: 1fr; gap: 28px; }
  .final-mascot { width: min(260px, 72vw); grid-row: auto; justify-self: center; }
  .final-cta > div:last-child { grid-column: 1; }
  .footer { width: calc(100% - 56px); grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 4px; }
  .back-to-top { margin-top: 14px; align-self: flex-end; }
}

/* Schermi molto stretti (320px: iPhone SE di prima generazione, oppure un iPhone
   con lo zoom display attivo). Qui il volto dell'insegnante cade proprio sotto la
   riga del sottotitolo, quindi il tappeto largo come sugli altri telefoni glielo
   sbiadiva. Mando il sottotitolo a capo prima, così il blocco di testo si stringe
   e il tappeto può finire 40px prima e spegnersi più in fretta. */
@media (max-width: 360px) {
  .poster-hero__subtitle { max-width: 17ch; text-wrap: balance; }
  .poster-hero__content::before { --cn-mat: 256px; --cn-mat-fade: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .testimonial-track { transition: none; }
}