/* =========================================================
   OYA Aviation — folha de estilo única
   Cores e fontes conforme OYA_manual.pdf
   ========================================================= */

:root{
  /* Marca */
  --red:        #A2000B;   /* C22 M100 Y100 K25 */
  --red-dark:   #7E0009;
  --blue:       #304874;   /* C100 M84 Y27 K20 */
  --grey:       #96989A;

  /* Derivados para superfícies */
  --navy:       #1B2A44;
  --navy-deep:  #142034;
  --ink:        #16202F;
  --body:       #4A5666;
  --line:       #E1E5EB;
  --wash:       #F5F7F9;
  --white:      #FFFFFF;

  --serif-ital: "Source Sans 3", system-ui, sans-serif;
  --sans:       "Source Sans 3", system-ui, -apple-system, sans-serif;
  --display:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --wrap: 1140px;
  --gut: 32px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--red); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* ---------- Tipografia ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  line-height:1.16;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.3rem, 5.2vw, 3.6rem); font-weight:700; }
h2{ font-size:clamp(1.75rem, 3.4vw, 2.5rem); }
h3{ font-size:1.22rem; font-weight:600; letter-spacing:0; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

/* Eyebrow — caixa alta, leve, entrelinhada + fio.
   Reproduz o cabeçalho de seção do manual da marca. */
.eyebrow{
  display:flex; align-items:center; gap:20px;
  font-family:var(--display);
  font-size:.78rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey);
  margin:0 0 26px;
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ display:none; }
.eyebrow--light{ color:rgba(255,255,255,.62); }
.eyebrow--light::after{ background:rgba(255,255,255,.22); }

/* Tagline em itálico leve — Myriad Pro Light Italic no impresso */
.tagline{
  font-family:var(--serif-ital);
  font-weight:300; font-style:italic;
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  line-height:1.5;
  color:var(--blue);
}
.tagline--light{ color:rgba(255,255,255,.9); }

.lede{ font-size:1.16rem; line-height:1.7; color:var(--body); }

/* ---------- Botões ---------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:500;
  font-size:.95rem; letter-spacing:.04em;
  padding:15px 30px;
  border:1.5px solid transparent; border-radius:2px;
  cursor:pointer; transition:.18s ease;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex:none; }

.btn--primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn--primary:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

.btn--outline{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--outline:hover{ background:var(--blue); color:#fff; }

/* ---------- Cabeçalho ---------- */

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:92px;
}
.brand img{ height:56px; width:auto; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav .btn{ display:none; }   /* só aparece no menu mobile */
.nav .btn--primary{ color:#fff; }   /* vence o `.nav a` do menu */
.nav a{
  font-family:var(--display); font-size:.95rem; font-weight:500;
  color:var(--ink); letter-spacing:.01em; position:relative; padding:6px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--red); transition:right .22s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--red); }

.head-side{ display:flex; align-items:center; gap:22px; }

.lang{
  display:flex; align-items:center; gap:7px;
  font-family:var(--display); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.lang a{ color:var(--grey); }
.lang a:hover{ color:var(--ink); }
.lang .on{ color:var(--ink); font-weight:600; }
.lang .sep{ color:var(--line); }

.head-cta{ padding:11px 22px; font-size:.88rem; }

/* Botão de menu (mobile) */
.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; padding:0; cursor:pointer;
}
/* pitch entre as barras = altura + margens = 2 + 8 = 10px,
   que é exatamente o quanto a 1ª e a 3ª precisam andar pra virar X */
.burger span{
  display:block; width:22px; height:2px; margin:4px auto;
  background:var(--ink); transition:.25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero{
  position:relative; overflow:hidden;
  background:var(--navy);
  color:#fff;
  padding:clamp(80px,12vw,140px) 0 clamp(80px,11vw,130px);
}
.hero::before{  /* borboleta como marca-d'água */
  content:""; position:absolute;
  right:6%; top:50%; transform:translateY(-50%);
  width:min(30vw,340px); aspect-ratio:949/1200;
  background:url("oya-marca-branca.png") center/contain no-repeat;
  opacity:.13; pointer-events:none;
}
.hero::after{  /* fio vermelho de assinatura, como no cartão */
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:5px; background:var(--red);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-copy{ max-width:660px; }
.hero h1{ color:#fff; margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:#fff; opacity:.55; }
.hero .lede{ color:rgba(255,255,255,.8); font-size:1.2rem; max-width:560px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero--inner{ padding:clamp(64px,8vw,96px) 0; }
.hero--inner h1{ margin-bottom:18px; }

/* ---------- Secções ---------- */

.section{ padding:clamp(72px,9vw,110px) 0; }
.section--wash{ background:var(--wash); }
.section--tight{ padding:clamp(56px,7vw,84px) 0; }

.section-head{ max-width:660px; margin-bottom:56px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Grade de serviços ---------- */

.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:#fff; padding:40px 34px 42px;
  transition:.2s ease; position:relative;
}
.card:hover{ background:#fff; box-shadow:0 14px 40px rgba(27,42,68,.09); z-index:2; }
.card-num{
  font-family:var(--display); font-size:.78rem; font-weight:500;
  letter-spacing:.18em; color:var(--red); display:block; margin-bottom:18px;
}
.card h3{ margin-bottom:12px; }
.card p{ font-size:.98rem; line-height:1.68; margin:0; }

/* ---------- Duas colunas ---------- */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,86px); align-items:center;
}
.split--narrow{ grid-template-columns:.85fr 1.15fr; align-items:start; }

.figure{
  position:relative; background:var(--wash);
  border:1px solid var(--line); padding:56px;
  display:grid; place-items:center; min-height:320px;
}
.figure img{ width:min(100%,300px); }

/* ---------- Números / provas ---------- */

.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.fact{ background:#fff; padding:36px 28px; }
.fact b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:2.4rem; line-height:1; color:var(--blue); margin-bottom:10px;
}
.fact span{ font-size:.95rem; }

/* ---------- Lista de checagem ---------- */

.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  position:relative; padding:14px 0 14px 34px;
  border-bottom:1px solid var(--line); font-size:1rem;
}
.checks li:last-child{ border-bottom:0; }
.checks li::before{
  content:""; position:absolute; left:2px; top:22px;
  width:11px; height:6px;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}

/* ---------- Faixa de chamada ---------- */

.cta-band{
  position:relative; overflow:hidden;
  background:var(--navy-deep); color:#fff;
  padding:clamp(64px,8vw,96px) 0;
  border-top:5px solid var(--red);
}
.cta-band::before{
  content:""; position:absolute; right:7%; top:50%; transform:translateY(-50%);
  height:min(72%,230px); aspect-ratio:949/1200;
  background:url("oya-marca-branca.png") center/contain no-repeat;
  opacity:.10; pointer-events:none;
}
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; max-width:660px; }
.cta-band p{ color:rgba(255,255,255,.78); max-width:560px; font-size:1.1rem; }
.cta-band .hero-actions{ margin-top:34px; }

/* ---------- Contato ---------- */

.contact-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,80px); align-items:start;
}
.contact-list{ list-style:none; margin:34px 0 0; padding:0; }
.contact-list li{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 0; border-top:1px solid var(--line);
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list svg{ width:20px; height:20px; flex:none; margin-top:4px; color:var(--blue); }
.contact-list .k{
  display:block; font-family:var(--display); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin-bottom:3px;
}
.contact-list .v{ font-size:1.06rem; color:var(--ink); }
.contact-list a.v:hover{ color:var(--red); }

.panel{
  background:var(--navy); color:#fff;
  padding:clamp(36px,5vw,52px);
  position:relative; overflow:hidden;
}
.panel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--red);
}
.panel h3{ color:#fff; font-size:1.5rem; font-family:var(--display); }
.panel p{ color:rgba(255,255,255,.78); }
.panel .btn{ margin-top:8px; width:100%; justify-content:center; }
.panel-note{
  margin-top:22px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem; color:rgba(255,255,255,.6);
}

/* ---------- Rodapé ---------- */

.site-foot{ background:var(--ink); color:rgba(255,255,255,.62); padding:64px 0 0; font-size:.94rem; }
.foot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand img{ height:88px; width:auto; margin-bottom:22px; }
.foot-brand p{ max-width:300px; font-size:.94rem; }
.foot-col h4{
  color:#fff; font-family:var(--display); font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:11px; }
.foot-col a{ color:rgba(255,255,255,.62); }
.foot-col a:hover{ color:#fff; }
.foot-bot{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  padding:24px 0 30px; font-size:.85rem; color:rgba(255,255,255,.4);
}

/* ---------- Botão flutuante do WhatsApp ---------- */

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
  transition:.2s ease;
}
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.wa-float svg{ width:29px; height:29px; fill:#fff; }

/* ---------- Responsivo ---------- */

@media (max-width:960px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:820px){
  :root{ --gut:22px; }

  .burger{ display:block; }
  .head-inner{ height:78px; }
  .brand img{ height:46px; }
  .head-cta{ display:none; }

  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 22px 22px;
    box-shadow:0 18px 40px rgba(27,42,68,.1);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:.22s ease;
  }
  .nav[data-open="true"]{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1.02rem; }
  .nav a::after{ display:none; }
  .nav .btn{ display:inline-flex; margin-top:18px; justify-content:center; border-bottom:0; }

  .split, .split--narrow, .contact-grid{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .hero::before{ opacity:.07; right:-16%; }
  .figure{ padding:40px; min-height:auto; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .grid--3{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; gap:34px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .card{ padding:32px 26px 34px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}