/* =====================================================================
   The House English - main.css
   Mobile first. Canvas do layout: 1920 px. 1 unidade de canvas = var(--u).
   Sem bordas, sombras, blur, filtros ou animações (regras do layout).
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "League Gothic"; src: url("../fonts/league-gothic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --wine-900: #490216; --wine-800: #54031A; --wine-700: #640621; --wine-600: #7F1231;
  --orange-600: #FF5A00; --orange-400: #FFA34F; --orange-accent: #FF9900;
  --brown-950: #1B1107; --brown-900: #371302; --brown-800: #472D21;
  --pink: #EA5479; --cream: #F9F4EF; --white: #FFFFFF; --black: #000000;

  --grad-wine: linear-gradient(135deg, #490216 0%, #640621 33%, #7F1231 67%, #54031A 100%);
  --grad-wine-h: linear-gradient(90deg, #490216 0%, #640621 33%, #7F1231 67%, #54031A 100%);
  --grad-orange: linear-gradient(90deg, #FF5A00, #FFA34F);
  --grad-brown: linear-gradient(90deg, #1B1107 0%, #472D21 50%, #371302 100%);

  --radius-input: 15px; --radius-btn-sm: 18px; --radius-tag: 24px; --radius-card: 33px;
  --radius-pill: 38px; --radius-card-lg: 40px; --radius-card-xl: 65px;

  --u: calc(min(100vw, 1920px) / 1920);

  --fs-h1-hero: max(44px, calc(83.8 * var(--u)));
  --fs-display-xl: max(72px, calc(190 * var(--u)));
  --fs-h2-xl: max(56px, calc(134.4 * var(--u)));
  --fs-h2: max(44px, calc(99 * var(--u)));
  --fs-h2-sm: max(40px, calc(85.6 * var(--u)));
  --fs-h3: max(22px, calc(38.2 * var(--u)));
  --fs-lead: max(20px, calc(38 * var(--u)));
  --fs-p: max(17px, calc(31.5 * var(--u)));
  --fs-small: max(16px, calc(28 * var(--u)));
  --fs-btn: max(19px, calc(34.4 * var(--u)));
  --fs-nav: max(16px, calc(29.8 * var(--u)));
  --fs-strip: max(15px, calc(36.2 * var(--u)));
  --fs-badge: max(14px, calc(20 * var(--u)));
  --fs-field: max(16px, calc(28.5 * var(--u)));
  --fs-footer-title: max(17px, calc(34.4 * var(--u)));
  --fs-footer-link: max(16px, calc(27.2 * var(--u)));

  --gutter: max(20px, calc(125 * var(--u)));
  --sec-pad: max(56px, calc(110 * var(--u)));
  --btn-h: max(56px, calc(76 * var(--u)));
  --nav-h: max(64px, calc(117 * var(--u)));
  --gap-h2: max(16px, calc(36 * var(--u)));

  --r-input: max(12px, calc(15 * var(--u)));
  --r-btn-sm: max(16px, calc(18 * var(--u)));
  --r-tag: max(16px, calc(24 * var(--u)));
  --r-card: max(16px, calc(33 * var(--u)));
  --r-pill: max(16px, calc(38 * var(--u)));
  --r-card-lg: max(16px, calc(40 * var(--u)));
  --r-card-xl: max(16px, calc(65 * var(--u)));

  --font-display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-ui: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--grad-brown);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-p);
  line-height: 1.4;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
button, input, select { font: inherit; color: inherit; }
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* âncoras do menu: o título não fica escondido atrás do header fixo */
section[id], li[id], [id="contato"] { scroll-margin-top: var(--nav-h); }

:focus-visible { outline: 3px solid var(--orange-accent); outline-offset: 3px; }
.theme-cream :focus-visible, .theme-orange :focus-visible, .testimonials :focus-visible,
.company__card :focus-visible, .level__card :focus-visible { outline-color: var(--wine-700); }
.age-card :focus-visible { outline-color: var(--orange-accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--cream); color: var(--wine-900); padding: 12px 18px;
  font: 700 16px/1.2 var(--font-ui); border-radius: 12px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }

/* ---------- Type helpers ---------- */
.h2, .h2-xl, .h2-sm, .display-xl {
  font-family: var(--font-display); font-weight: 400; line-height: .97;
  text-transform: uppercase; letter-spacing: 0;
}
.h2 { font-size: var(--fs-h2); }
.h2-xl { font-size: var(--fs-h2-xl); }
.h2-sm { font-size: var(--fs-h2-sm); }
.display-xl { font-size: var(--fs-display-xl); }

.text-grad, .theme-cream .tone {
  background: var(--grad-wine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  max-width: 100%;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-grad, .theme-cream .tone { background: none; color: var(--wine-700); }
}

/* ---------- Themes ---------- */
.theme-wine { background: var(--grad-wine); color: var(--cream); }
.theme-orange { background: var(--grad-orange); color: var(--wine-900); }
.theme-brown { background: var(--grad-brown); color: var(--cream); }
.theme-cream { background: var(--cream); color: var(--wine-700); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--btn-h);
  padding: 8px 24px; border: 0; border-radius: var(--r-pill);
  font: 700 var(--fs-btn)/1.2 var(--font-body); text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
.btn--orange { background: var(--grad-orange); color: var(--wine-900); }
.btn--wine { background: var(--grad-wine-h); color: var(--cream); }
.btn--pink { background: var(--pink); color: var(--white); }
.btn--cream { background: var(--cream); color: var(--wine-700); }
.btn--sm {
  min-height: 48px; width: auto; padding: 10px 22px;
  font-size: 17px; text-transform: none; border-radius: var(--r-btn-sm);
}

/* ---------- Promo bar ---------- */
.promo-bar {
  background: var(--pink); color: var(--cream);
  /* cream sobre rosa dá 3,2:1: só passa como texto grande (>= 18,66 px bold), por isso o piso de 19 px */
  font: 700 max(19px, calc(36.2 * var(--u)))/1.4 var(--font-ui);
  text-align: center;
  min-height: max(40px, calc(75 * var(--u)));
  display: flex; align-items: center; justify-content: center;
  padding: 8px var(--gutter);
}

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--grad-brown); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--nav-h); padding-inline: var(--gutter);
}
.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img { width: max(150px, calc(302 * var(--u))); }

.nav-toggle {
  position: relative; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; min-width: 48px; padding: 8px 4px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
  font: 700 16px/1 var(--font-ui);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 26px; height: 3px; background: currentColor; border-radius: 2px;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.nav { display: none; }
.nav.is-open {
  display: block; position: fixed; inset: 0; z-index: 60;
  background: var(--grad-wine); overflow-y: auto;
}
.nav__list {
  list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 48px;
}
.nav__link {
  display: block; padding: 10px 0;
  font: 400 26px/1.3 var(--font-ui); color: var(--cream); text-decoration: none;
}
.nav__link:hover { text-decoration: underline; text-underline-offset: .2em; }
html.menu-open { overflow: hidden; }

/* sem JS: menu sempre visível, em linha */
.no-js .nav-toggle { display: none; }
.no-js .site-header__inner { flex-wrap: wrap; padding-block: 8px; }
.no-js .nav { display: block; }
.no-js .nav__list { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 0 0 8px; }
.no-js .nav__link { font-size: 16px; padding: 6px 0; }

@media (min-width: 1100px) {
  .site-header__inner { padding-inline: calc(140 * var(--u)) calc(179 * var(--u)); }
  .nav-toggle { display: none; }
  .nav, .nav.is-open { display: block; position: static; background: none; overflow: visible; }
  .nav__list, .no-js .nav__list { flex-direction: row; gap: calc(28 * var(--u)); padding: 0; }
  .nav__link, .no-js .nav__link { font-size: var(--fs-nav); line-height: 1.38; padding: 0; }
  html.menu-open { overflow: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--grad-wine); color: var(--cream); }
.hero__flag {
  position: absolute; left: 0; top: 0;
  height: 55%; width: auto; max-width: none;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid; gap: 40px;
  padding: 40px var(--gutter) 56px;
}
.hero__badge { font: 700 var(--fs-badge)/1.4 var(--font-ui); color: var(--white); margin: 0 0 2px 2px; }
.hero__title {
  font: 400 var(--fs-h1-hero)/.98 var(--font-display);
  text-transform: uppercase; color: var(--orange-accent);
}
.hero__subtitle {
  font: 700 max(15px, calc(25.6 * var(--u)))/1.3 var(--font-body);
  text-transform: uppercase; color: var(--cream);
  margin: 6px 0 max(20px, calc(30 * var(--u)));
}
.hero__media { width: 100%; }

/* form */
.lead-form { display: grid; gap: max(12px, calc(17 * var(--u))); }
.field { position: relative; }
.field__input {
  display: block; width: 100%;
  height: max(52px, calc(58 * var(--u)));
  padding: 0 max(14px, calc(29 * var(--u)));
  border: 0; border-radius: var(--r-input);
  background: var(--white); color: var(--brown-950);
  font: 400 var(--fs-field)/1.2 var(--font-ui);
}
.field__input::placeholder { color: #5a5a5a; opacity: 1; }
.field__input[aria-invalid="true"] { outline: 3px solid var(--orange-accent); outline-offset: 2px; }
.field__prefix {
  position: absolute; left: max(14px, calc(27 * var(--u))); top: 0;
  height: max(52px, calc(58 * var(--u)));
  display: flex; align-items: center; gap: max(8px, calc(15 * var(--u)));
  font: 400 var(--fs-field)/1 var(--font-ui); color: var(--black);
  pointer-events: none;
}
.field__flag { width: max(26px, calc(36 * var(--u))); height: auto; }
.field--phone .field__input { padding-left: max(92px, calc(141 * var(--u))); }
.field__error { margin-top: 6px; font: 700 15px/1.3 var(--font-ui); color: var(--cream); }
.field__error:empty { display: none; }
.field__error::before { content: "\26A0\FE0E  "; }
/* Montserrat 34,4 não cabe em 421 px numa linha (o Canva usava Open Sans 30 aqui);
   texto vinho sobre laranja tem contraste alto, então o piso pode ser 17 px */
.lead-form__submit {
  justify-self: center; margin-top: max(4px, calc(13 * var(--u)));
  padding-inline: 12px; white-space: nowrap;
  font-size: max(17px, calc(27 * var(--u)));
}
.lead-form__status { font: 700 15px/1.4 var(--font-ui); color: var(--cream); text-align: center; }
.lead-form__status:empty { display: none; }
.lead-form__status a { color: inherit; }
.lead-form__consent { font: 400 max(14px, calc(18 * var(--u)))/1.4 var(--font-ui); color: var(--cream); text-align: center; }

/* video cards */
.video-card {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0; border: 0; margin: 0;
  border-radius: var(--r-card);
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
}
button.video-card { cursor: pointer; }
button.video-card:hover .video-card__label { text-decoration: underline; }
.video-card--hero {
  aspect-ratio: 848 / 506;
  background: var(--grad-orange); color: var(--wine-900);
  font-size: max(28px, calc(61.9 * var(--u)));
}
.video-card--testimonial {
  aspect-ratio: 471 / 281;
  background: var(--wine-900); color: var(--cream);
  font-size: max(22px, calc(34.4 * var(--u)));
}

@media (min-width: 1024px) {
  .hero__flag { height: 100%; }
  .hero__inner {
    grid-template-columns: max(340px, calc(548 * var(--u))) 1fr;
    column-gap: max(40px, calc(202 * var(--u)));
    align-items: center;
    min-height: calc(809 * var(--u));
    padding: calc(70 * var(--u)) calc(171 * var(--u)) calc(100 * var(--u)) calc(151 * var(--u));
  }
  .hero__subtitle { letter-spacing: -.066em; word-spacing: .12em; }
  .hero__media { justify-self: end; max-width: calc(848 * var(--u)); }
  .lead-form__submit { width: max(300px, calc(421 * var(--u))); }
}

/* ---------- Testimonials / carousel ---------- */
.testimonials {
  background: var(--cream); text-align: center;
  padding: max(36px, calc(40 * var(--u))) 0 max(24px, calc(27 * var(--u)));
  overflow: hidden;
}
.testimonials__caption {
  font: 700 max(16px, calc(29.5 * var(--u)))/1.35 var(--font-ui);
  margin-inline: auto; padding-inline: var(--gutter);
}
.testimonials__title {
  font: 700 max(28px, calc(61.2 * var(--u)))/1.25 var(--font-ui);
  letter-spacing: -.058em; margin-inline: auto; padding-inline: var(--gutter);
}
.carousel { margin-top: max(28px, calc(52 * var(--u))); }
.carousel__track {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 6px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__list {
  display: flex; gap: 16px; list-style: none;
  width: max-content; margin: 0 auto;
  padding: 0 var(--gutter);
}
.carousel__item { flex: 0 0 auto; width: 78vw; scroll-snap-align: center; }
.carousel__bar {
  position: relative;
  height: max(12px, calc(20 * var(--u)));
  margin-top: max(24px, calc(98 * var(--u)));
  background: #F1E9E5;
}
.carousel__thumb {
  position: absolute; left: 0; top: 50%;
  width: max(90px, calc(618 * var(--u)));
  height: max(8px, calc(12 * var(--u)));
  margin-top: calc(max(8px, calc(12 * var(--u))) / -2);
  background: #9E767E; border-radius: 6px;
  cursor: grab; touch-action: none;
}
@media (min-width: 1024px) {
  .carousel__track { scroll-snap-type: none; cursor: grab; }
  .carousel__list { gap: calc(82 * var(--u)); padding: 0; }
  .carousel__item { width: calc(471 * var(--u)); }
}

/* ---------- Split sections (texto + imagem) ---------- */
.split {
  display: grid; gap: 36px;
  padding: var(--sec-pad) var(--gutter);
}
.split__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.split__text > .h2, .split__text > .display-xl { margin-bottom: var(--gap-h2); }
.prose p { font-size: var(--fs-p); line-height: 1.4; }
.prose--spaced p + p { margin-top: 1.4em; }
.prose--lead p { font-size: var(--fs-lead); line-height: 1.4; }
.split__btn { margin-top: max(28px, calc(80 * var(--u))); }
.split__media { justify-self: center; width: 100%; }
.split__media--cutout img { width: 80%; margin-inline: auto; }
.split__media--photo img { width: 100%; border-radius: var(--r-card); }

@media (min-width: 640px) {
  .split__media--cutout img { width: 70%; }
  .split__btn { width: auto; min-width: 320px; }
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: calc((var(--img-x) - 125) * var(--u)) calc(var(--img-w) * var(--u));
    gap: 0; align-items: center;
    min-height: calc(var(--h) * var(--u));
    padding: calc(60 * var(--u)) 0 calc(60 * var(--u)) var(--gutter);
  }
  .split .prose { max-width: calc(var(--text-w) * var(--u)); }
  .split__btn { width: calc(500 * var(--u)); min-width: 0; margin-left: calc(200 * var(--u)); }
  .split__media { justify-self: start; }
  .split__media--cutout img { width: 100%; }
}

/* início imediato (alunos encostados na base da seção) */
.split--start { padding-bottom: 0; }
.split--start .split__media { align-self: end; }
.split--start .split__btn { margin-top: max(24px, calc(44 * var(--u))); }
@media (min-width: 1024px) {
  .split--start { padding-block: 0; }
  .split--start .split__text { padding-block: calc(60 * var(--u)); }
  .split--start .split__btn { margin-left: 0; }
  .split--start > .split__text > .display-xl { margin-bottom: max(8px, calc(4 * var(--u))); }
}

/* ---------- Age cards ---------- */
.age-cards { padding: max(40px, calc(66 * var(--u))) var(--gutter); }
.age-cards__list {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: 24px; max-width: 520px;
}
.age-card {
  display: flex; flex-direction: column;
  background: var(--grad-wine); color: var(--cream);
  border-radius: var(--r-pill);
  padding: max(10px, calc(11 * var(--u))) max(10px, calc(13 * var(--u))) max(24px, calc(43 * var(--u)));
}
.age-card__img { width: 100%; aspect-ratio: 467 / 360; object-fit: cover; border-radius: max(14px, calc(30 * var(--u))); }
.age-card__title {
  font: 700 var(--fs-h3)/1.25 var(--font-body);
  margin: max(16px, calc(26 * var(--u))) max(8px, calc(18 * var(--u))) max(8px, calc(14 * var(--u)));
}
.age-card__text { font-size: var(--fs-small); line-height: 1.18; margin-inline: max(8px, calc(18 * var(--u))); }
.age-card__more {
  align-self: center; margin-top: auto; padding: max(20px, calc(34 * var(--u))) 8px 4px;
  font: 700 max(17px, calc(32 * var(--u)))/1.3 var(--font-body); text-decoration: none; color: var(--cream);
}
.age-card__more:hover { text-decoration: underline; }
.btn--card {
  align-self: center; width: min(100%, max(240px, calc(393 * var(--u))));
  min-height: max(56px, calc(71 * var(--u)));
  margin-top: max(12px, calc(18 * var(--u)));
  border-radius: var(--r-btn-sm);
  font-size: max(19px, calc(32 * var(--u)));
}
@media (min-width: 1024px) {
  .age-cards__list { grid-template-columns: repeat(3, calc(493 * var(--u))); gap: calc(77 * var(--u)); max-width: none; justify-content: center; }
  .age-card { min-height: calc(804 * var(--u)); }
}

/* ---------- Company ---------- */
.company { background: var(--grad-brown); padding: max(32px, calc(52 * var(--u))) var(--gutter) 0; }
.company__card {
  display: grid; gap: 28px;
  background: var(--cream); border-radius: var(--r-card-lg);
  padding: 16px 16px 36px;
}
.company__photo { position: relative; container-type: inline-size; overflow: hidden; border-radius: var(--r-card); }
.company__photo img { width: 100%; }
.company__shade { position: absolute; inset: 0 0 0 38%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%); }
.glass-tag {
  position: absolute; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) rotate(var(--rot));
  background: rgba(249, 244, 239, .26); color: var(--white);
  font-family: var(--font-body); font-weight: 700; white-space: nowrap; line-height: 1;
  border-radius: 2.3cqw;
}
.glass-tag--1 { left: 62.9%; top: 22.1%; width: 33.8cqw; height: 8.4cqw; font-size: 5.4cqw; --rot: -9.6deg; }
.glass-tag--2 { left: 76.1%; top: 45.2%; width: 30.1cqw; height: 7.4cqw; font-size: 4.8cqw; --rot: 2.8deg; }
.glass-tag--3 { left: 61.9%; top: 66.8%; width: 30.1cqw; height: 6.5cqw; font-size: 4cqw; --rot: -6.5deg; }
.glass-tag--4 { left: 75.9%; top: 87.8%; width: 33.2cqw; height: 5cqw; font-size: 2.55cqw; --rot: -2.2deg; }
.company__text { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 4px; }
.company__text .h2 { margin-inline: auto; }
.company__lead { font-size: var(--fs-small); line-height: 1.35; margin: max(8px, calc(4 * var(--u))) auto 0; }
.btn--company {
  margin-top: max(24px, calc(60 * var(--u)));
  min-height: max(56px, calc(65 * var(--u)));
  border-radius: var(--r-btn-sm);
  font-size: max(19px, calc(29.6 * var(--u)));
}
@media (min-width: 640px) { .btn--company { width: auto; padding-inline: 40px; } }
@media (min-width: 1024px) {
  .company__card {
    grid-template-columns: calc(618 * var(--u)) 1fr; gap: 0; align-items: center;
    min-height: calc(468 * var(--u));
    padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(35 * var(--u)) calc(95 * var(--u));
  }
  .company__text { padding-left: calc(40 * var(--u)); }
  .company__lead { max-width: calc(830 * var(--u)); }
  .free__text { max-width: calc(940 * var(--u)); }
  .level__text { max-width: calc(1390 * var(--u)); }
  .btn--company { width: calc(431 * var(--u)); padding-inline: 16px; }
}

/* ---------- Free content ---------- */
.free {
  background: var(--grad-brown); color: var(--cream); text-align: center;
  padding: max(48px, calc(65 * var(--u))) var(--gutter) max(48px, calc(87 * var(--u)));
}
.free .h2-sm { margin-inline: auto; }
.free__text { margin: max(6px, calc(2 * var(--u))) auto 0; }
.free__pills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: max(12px, calc(36 * var(--u)));
  list-style: none; padding: 0; margin-top: max(24px, calc(37 * var(--u)));
}
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: max(10px, calc(14 * var(--u)));
  min-width: max(150px, calc(256 * var(--u))); min-height: max(52px, calc(64 * var(--u)));
  padding: 6px 20px;
  background: var(--pink); color: var(--white); border-radius: var(--r-tag);
  font: 700 max(19px, calc(31.5 * var(--u)))/1 var(--font-body); text-decoration: none;
}
.pill:hover span { text-decoration: underline; }
.pill__icon { width: auto; height: max(26px, calc(42 * var(--u))); }

/* ---------- Level test ---------- */
.level { background: var(--grad-wine-h); padding: max(40px, calc(128 * var(--u))) var(--gutter) max(32px, calc(93 * var(--u))); }
.level__card {
  background: var(--cream); color: var(--wine-700); text-align: center;
  border-radius: var(--r-card-xl);
  padding: max(36px, calc(62 * var(--u))) max(20px, calc(90 * var(--u))) max(40px, calc(90 * var(--u)));
}
.level__card .h2-xl, .level__text { margin-inline: auto; }
.level__text { font-size: var(--fs-lead); line-height: 1.4; margin-top: max(10px, calc(6 * var(--u))); }
.level__chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: max(10px, calc(24 * var(--u)));
  list-style: none; padding: 0; margin-top: max(28px, calc(56 * var(--u)));
}
.chip {
  min-width: max(64px, calc(120 * var(--u)));
  padding: .18em .5em;
  background: var(--wine-900); color: var(--cream);
  border-radius: var(--r-tag);
  font: 400 max(34px, calc(64 * var(--u)))/1.1 var(--font-display);
}
.level__btn { margin-top: max(28px, calc(56 * var(--u))); }
@media (min-width: 640px) { .level__btn { width: auto; padding-inline: 48px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--grad-wine-h); color: var(--white); padding: max(48px, calc(120 * var(--u))) var(--gutter) 0; }
.footer__cols {
  display: grid; gap: 40px 24px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
}
.footer__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer__title { font: 700 var(--fs-footer-title)/1.4 var(--font-body); text-transform: uppercase; margin-bottom: max(10px, calc(22 * var(--u))); }
.footer__links { list-style: none; padding: 0; text-align: left; font: 400 var(--fs-footer-link)/1.4 var(--font-body); }
.footer__links a { display: inline-block; padding: 4px 0; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.social {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center;
  gap: max(14px, calc(26 * var(--u))) max(24px, calc(37 * var(--u)));
}
.social li:has(.social__link--wordmark) { grid-column: 1 / -1; }
.social__link { display: block; padding: 2px; }
.social__link--square svg { height: max(40px, calc(64 * var(--u))); width: auto; }
.social__link--wordmark svg { height: max(30px, calc(46 * var(--u))); width: auto; }

.footer__contact {
  display: grid; gap: 32px; justify-items: center; text-align: center;
  margin-top: max(48px, calc(110 * var(--u)));
}
.footer__logo img { width: max(180px, calc(260 * var(--u))); }
.footer__subtitle { font: 700 max(17px, calc(28 * var(--u)))/1.4 var(--font-body); margin-bottom: 6px; }
.footer__unit address { font-style: normal; font-size: var(--fs-footer-link); line-height: 1.45; margin-bottom: 14px; }
.footer__unit p { font-size: var(--fs-footer-link); margin-bottom: 14px; }
.footer__phone { font-weight: 700; text-decoration: none; }
.footer__phone:hover { text-decoration: underline; }
.footer__bottom {
  margin: max(40px, calc(80 * var(--u))) calc(-1 * var(--gutter)) 0;
  padding: 20px var(--gutter);
  background: var(--wine-900);
  font: 400 15px/1.5 var(--font-body); text-align: center; color: var(--cream);
}
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(4, max-content); column-gap: calc(110 * var(--u)); }
  .footer__contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px calc(70 * var(--u)); text-align: left; }
  .footer__unit address, .footer__unit p { font-size: max(15px, calc(24 * var(--u))); }
  .footer__logo { align-self: center; }
}

/* ---------- Text pages (privacidade, 404) ---------- */
.page-text { padding: var(--sec-pad) var(--gutter); min-height: 50vh; }
.page-text .h2 { margin-bottom: var(--gap-h2); }
.page-text__body { max-width: 900px; display: grid; gap: 1em; color: var(--wine-900); }
.page-text__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; max-width: 900px; }
.page-text__actions .btn { width: auto; }

/* ---------- Modals ---------- */
.modal {
  width: min(92vw, 560px); max-height: 92vh; overflow-y: auto;
  border: 0; padding: max(28px, calc(48 * var(--u))) max(20px, calc(44 * var(--u)));
  border-radius: var(--r-pill);
  background: var(--grad-wine); color: var(--cream);
}
.modal::backdrop { background: rgba(27, 17, 7, .82); }
.modal__close {
  position: absolute; right: 10px; top: 8px;
  width: 48px; height: 48px; border: 0; background: none; cursor: pointer;
  color: var(--cream); font: 400 36px/1 var(--font-ui);
}
.modal__title { font: 400 var(--fs-h2-sm)/.97 var(--font-display); text-transform: uppercase; color: var(--orange-accent); margin-bottom: 20px; padding-right: 40px; }
.lead-step2 { display: grid; gap: 16px; }
.field__label { display: block; margin-bottom: 6px; font: 700 16px/1.3 var(--font-ui); }
.field--select .field__input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 44px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23490216' d='M7 9 0 0h14z'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.modal__cta { margin-top: 8px; }
.modal__skip { justify-self: center; padding: 8px; font: 700 16px/1.3 var(--font-ui); color: var(--cream); }
.modal--video { width: min(94vw, 1100px); padding: 56px 16px 16px; background: var(--brown-950); }
.modal__video { aspect-ratio: 16 / 9; }
.modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }