/* ============================================================================
   Design system — base extraída do sistema McLaren (tokens, tipografia e
   componentes), com a mesma paleta, a mesma escala de espaçamento e os mesmos
   valores de tipografia. Nomes de classe neutros para reuso em outros projetos.
   ========================================================================= */

/* --- famílias tipográficas -------------------------------------------------
   Arquivos woff2 do sistema de origem; a família foi renomeada para um
   identificador neutro. Trocar apenas os src abaixo substitui a fonte de
   display em todo o site.                                                   */
@font-face{font-family:Display;src:url(../fonts/mclaren-bespoke-light.6555357.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Display;src:url(../fonts/mclaren-bespoke-regular.9527808.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Display;src:url(../fonts/mclaren-bespoke-bold.49950c5.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- tokens --------------------------------------------------------------- */
:root{
  /* cor */
  --accent:#f36d1e;
  --accent-from:#ff8d1c;
  --accent-mid:#ff5e17;
  --accent-to:#ea1f00;
  --ink-900:#181c20;
  --ink-800:#363f44;
  --ink-700:#576269;
  --grey-700:#78838a;
  --grey-500:#9da8ae;
  --grey-300:#c8d0d5;
  --grey-100:#f0f3f4;
  --white:#fff;

  /* espaçamento fluido */
  --space-xs:clamp(.75rem,.75vw,.5rem);
  --space-sm:clamp(1rem,1.5vw,1.25rem);
  --space-md:clamp(1.25rem,2.5vw,2rem);
  --space-lg:clamp(2rem,4vw,4rem);
  --space-xl:clamp(3rem,6vw,6rem);
  --space-2xl:clamp(4rem,8vw,8rem);
  --space-3xl:clamp(5rem,10vw,10rem);

  /* tipografia */
  --font-display:Display,ui-sans-serif,system-ui,sans-serif;
  --font-body:"Noto Sans",ui-sans-serif,system-ui,sans-serif;

  /* layout */
  --shell:1590px;
  --header-h:75px;

  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (min-width:1024px){:root{--header-h:110px}}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-800);
  background:var(--white);
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- containers ----------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.25rem}
@media (min-width:768px){.shell{padding-inline:75px}}

.boxed-container{
  position:relative;margin-inline:auto;display:flex;height:100%;width:100%;
  flex-direction:column;overflow:visible;gap:var(--space-sm);padding-inline:1.25rem;
}
@media (min-width:640px){.boxed-container{max-width:640px}}
@media (min-width:768px){.boxed-container{max-width:768px}}
@media (min-width:1024px){.boxed-container{max-width:1024px}}
@media (min-width:1280px){.boxed-container{max-width:1280px}}
@media (min-width:1536px){.boxed-container{max-width:1536px}}
@media (min-width:1590px){.boxed-container{max-width:1590px}}

/* altura de viewport descontando o cabeçalho fixo */
.screen-less-header{height:calc(100dvh - var(--header-h));min-height:520px}

/* --- mídia de fundo ------------------------------------------------------- */
.bg-image{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center}

/* véu diagonal do herói */
.hero-shadow::after{
  content:"";display:block;position:absolute;top:0;left:0;height:100%;width:100%;
  background-image:linear-gradient(17deg,#000,transparent);opacity:.5;pointer-events:none;
}
/* véu simétrico para blocos de conteúdo sobre imagem */
.edge-shadow::after{
  content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background:linear-gradient(17deg,#000 20%,#0000004d 45%,#0000004d 55%,#000 85%);
}
/* Véu dos cartões de galeria: a diagonal vem do sistema de origem e o degradê
   inferior garante contraste do texto mesmo sobre fotos claras. */
.image-shadow{position:absolute;inset:0}
.image-shadow::after{
  content:"";display:block;position:absolute;inset:0;opacity:.8;
  background-image:linear-gradient(245deg,transparent,#000);
}
.image-shadow::before{
  content:"";display:block;position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(to top,#0b0d0feb 0%,#0b0d0fb8 30%,#0b0d0f38 58%,#0b0d0f00 84%);
}

/* --- superfícies ---------------------------------------------------------- */
.surface-dark{background-color:var(--ink-900);color:var(--white)}
.surface-gradient{background-image:linear-gradient(257deg,var(--ink-900),var(--ink-800));color:var(--white)}
.surface-light{background-color:var(--grey-100)}

/* --- tipografia ----------------------------------------------------------- */
.heading-hero{
  width:100%;font-family:var(--font-display);font-size:36px;line-height:1.25;font-weight:300;
  margin-top:var(--space-xs);margin-bottom:var(--space-sm);
}
@media (min-width:640px){.heading-hero{font-size:72px;line-height:1.05}}
@media (min-width:768px){.heading-hero{font-size:100px;line-height:1}}

.subheading-hero{font-family:var(--font-body);font-size:20px;line-height:1.5;font-weight:300}
@media (min-width:768px){.subheading-hero{font-size:28px;line-height:1.375}}

.heading-section{font-family:var(--font-display);font-weight:300;font-size:34px;line-height:1.15}
@media (min-width:768px){.heading-section{font-size:56px}}
@media (min-width:1280px){.heading-section{font-size:68px}}

.banner-heading{font-family:var(--font-display);font-weight:300;font-size:30px;line-height:1.1}
@media (min-width:768px){.banner-heading{font-size:48px}}

.banner-paragraph{font-size:12px;line-height:20px;font-weight:500;margin-top:var(--space-xs)}
@media (min-width:1024px){.banner-paragraph{font-size:14px;line-height:1.5}}

/* rótulo de seção: 12px, caixa alta, entreletra de 2px */
.eyebrow{
  display:inline-block;font-size:12px;line-height:20px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--grey-700);
}
.eyebrow--light{color:var(--grey-500)}
.lead{font-size:18px;line-height:1.7;font-weight:300;color:var(--ink-700)}
@media (min-width:768px){.lead{font-size:20px;line-height:30px}}
.lead--light{color:var(--grey-300)}

/* filete fino de separação */
.rule{height:1px;width:100%;background:var(--grey-300);border:0}
.rule--dark{background:#ffffff26}

/* --- botões --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-body);font-size:12px;line-height:1.5;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;
  padding-inline:var(--space-md);padding-block:.75rem;
  border:1px solid transparent;
  transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),
             border-color .3s cubic-bezier(.4,0,.2,1),opacity .3s,box-shadow .3s,transform .3s,filter .3s;
}
.btn--accent{border-color:var(--accent);background-color:var(--accent);color:var(--white)}
.btn--accent:hover{filter:brightness(1.08)}
.btn--accent-gradient{
  background-image:linear-gradient(78.89deg,var(--accent-from) -10%,var(--accent-mid),var(--accent-to) 110%);
  border-color:transparent;color:var(--white);
}
.btn--accent-gradient:hover{box-shadow:0 4px 20px #e95914cc;filter:brightness(1.12);transform:scale(1.02)}
.btn--rounded{border-radius:9999px}
.btn--lighter{border-color:var(--grey-500);color:var(--white)}
.btn--lighter:hover{background-color:#ffffff1a}
.btn--blurred{backdrop-filter:blur(31.7px);-webkit-backdrop-filter:blur(31.7px);background-color:#363f4540}
.btn--outline{border-color:var(--grey-300);color:var(--ink-800)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.btn--wide{padding-inline:var(--space-xl)}

/* --- galeria de banners --------------------------------------------------- */
.banner-grid{display:flex;flex-direction:column;margin-inline:auto;height:fit-content}
@media (min-width:1024px){.banner-grid{flex-direction:row}}

.banner-card{
  position:relative;display:flex;height:fit-content;width:100%;align-items:flex-end;
  overflow:hidden;padding:1.25rem;color:var(--white);min-height:440px;
}
@media (min-width:768px){.banner-card{padding:2.5rem}}
@media (min-width:1024px){.banner-card{width:50%;padding:3.5rem 3.5rem 2.5rem}}
.banner-card--full{width:100%}
@media (min-width:1024px){.banner-card--full{width:100%}}

.banner-card .bg-image{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.banner-card:hover .bg-image{transform:scale(1.04)}

.banner-body{position:relative;z-index:2;display:block;width:100%;padding-top:var(--space-md)}
.banner-shift{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.banner-card:hover .banner-shift{transform:translateY(-20px)}
.banner-cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--space-xs);
  font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--white);
  opacity:0;transform:translateY(-20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.banner-card:hover .banner-cta,.banner-card:focus-visible .banner-cta{opacity:1;transform:translateY(0)}
.banner-cta svg{width:12px;height:12px;fill:currentColor}

/* --- utilidades ----------------------------------------------------------- */
.is-hidden{display:none !important}
[hidden]{display:none !important}

/* revelação por rolagem, discreta */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}