/* ==========================================================================
   Logiks RC18 — Landing Page
   Sistema de design: Positivus (positivusdesignsystem.mdx)
   Paleta: substituída pelas cores do logo vetorial RC18.
     verde  #B9FF66  ->  laranja  #FF7726   (--primary)
     dark   #191A23  ->  ardósia  #2B3C46   (--dark)
   Regras preservadas do sistema: sem gradientes, sem opacidade nos fills,
   sombra sólida sem blur, borda de 1px, letter-spacing 0, line-height 1.28.
   ========================================================================== */

:root{
  /* ---------- Cores ---------- */
  --primary:#FF7726;          /* laranja da marca */
  --primary-hover:#E9611A;
  --primary-soft:#FFE7D9;     /* tinta clara do laranja (ver nota no README) */
  --secondary:#2B3C46;        /* ardósia da marca */
  --dark:#2B3C46;
  --dark-elevated:#354A57;
  --grey:#F2F4F5;
  --grey-hover:#E7EBED;
  --white:#FFFFFF;
  --background:#FFFFFF;
  --text:#101820;
  --placeholder:#66747D;

  --text-on-dark:#FFFFFF;
  --accent-on-dark:#FF7726;
  --border:#2B3C46;
  --border-input:#2B3C46;
  --error:#C4331D;

  /* ---------- Tipografia ---------- */
  --font-sans:"Space Grotesk",system-ui,sans-serif;
  --fw-regular:400;
  --fw-medium:500;

  --fs-h1:60px;
  --fs-h2:40px;
  --fs-h3:30px;
  --fs-h4:20px;
  --fs-body:18px;
  --fs-label:16px;

  --lh:1.28;
  --tracking:0;

  /* ---------- Layout ---------- */
  --container:1240px;
  --page-padding:100px;

  /* ---------- Espaçamento ---------- */
  --space-1:10px;  --space-2:15px;  --space-3:20px;  --space-4:28px;
  --space-5:30px;  --space-6:35px;  --space-7:40px;  --space-8:50px;
  --space-9:60px;  --space-10:64px; --space-11:70px; --space-12:80px;
  --space-13:100px;
  --space-section:140px;
  --space-section-gap:80px;

  /* ---------- Raios ---------- */
  --radius-mark:7px;
  --radius-control:14px;
  --radius-card:45px;
  --radius-pill:999px;

  /* ---------- Bordas & sombras ---------- */
  --border-width:1px;
  --shadow-hard:0 5px 0 0 #2B3C46;

  /* ---------- Componentes ---------- */
  --btn-padding:20px 35px;
  --input-padding:18px 30px;
  --navbar-height:68px;

  --transition:200ms ease;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh);
  letter-spacing:var(--tracking);
  color:var(--text);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;font-weight:var(--fw-medium);line-height:var(--lh);letter-spacing:0}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--primary);color:var(--text)}

.container{
  width:100%;
  max-width:calc(var(--container) + var(--page-padding) * 2);
  margin-inline:auto;
  padding-inline:var(--page-padding);
}

.section{padding-block:calc(var(--space-section) / 2);scroll-margin-top:120px}
.section__header{
  display:flex;
  align-items:center;
  gap:var(--space-7);
  margin-bottom:var(--space-section-gap);
}
.section__subtitle{max-width:580px}

/* Marca-texto (highlight) */
.highlight{
  display:inline;                    /* inline + clone: em titulos de 2 linhas cada
                                        linha recebe seu proprio marca-texto */
  background:var(--primary);
  border-radius:var(--radius-mark);
  padding:0 7px;
  color:var(--text);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.highlight--white{background:var(--white)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  padding:var(--btn-padding);
  border-radius:var(--radius-control);
  border:var(--border-width) solid transparent;
  font-family:var(--font-sans);
  font-size:var(--fs-h4);
  font-weight:var(--fw-regular);
  line-height:1.4;
  cursor:pointer;
  text-align:center;
  transition:background-color var(--transition),color var(--transition),border-color var(--transition);
}
.btn--primary{background:var(--dark);color:var(--white)}
.btn--primary:hover{background:var(--primary);color:var(--text)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--dark)}
.btn--secondary:hover{background:var(--dark);color:var(--white)}
.btn--accent{background:var(--primary);color:var(--text)}
.btn--accent:hover{background:var(--white);color:var(--text)}
.btn--block{width:100%}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}
.btn:disabled{cursor:not-allowed;opacity:.6}

/* Link "Saiba mais" */
.learn-more{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--fs-h4);
  transition:gap var(--transition);
}
.learn-more:hover{gap:22px}
.learn-more__icon{
  width:41px;height:41px;
  border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--dark);
  color:var(--primary);
  flex:none;
}

/* ---------- Painéis ---------- */
.panel{border-radius:var(--radius-card)}
.panel--grey{background:var(--grey)}
.panel--dark{background:var(--dark);color:var(--text-on-dark)}

/* ══════════════════════════ NAVBAR ══════════════════════════ */
.navbar{
  position:sticky;top:0;z-index:100;
  background:var(--background);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition);
  padding-block:var(--space-3);
}
.navbar.is-stuck{border-bottom-color:rgba(43,60,70,.12)}
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-7);
  min-height:var(--navbar-height);
}
.navbar__brand img{height:60px;width:auto}
.navbar__menu{display:flex;align-items:center;gap:var(--space-7)}
.navbar__link{font-size:var(--fs-h4);font-weight:var(--fw-regular);color:var(--text)}
.navbar__link:hover{text-decoration:underline;text-underline-offset:4px}

.navbar__toggle{
  display:none;
  width:52px;height:52px;
  border:1px solid var(--dark);
  border-radius:var(--radius-control);
  background:transparent;
  cursor:pointer;
  padding:0;
  place-items:center;
  gap:5px;
  grid-auto-flow:row;
}
.navbar__toggle span{display:block;width:22px;height:2px;background:var(--dark);transition:transform var(--transition),opacity var(--transition)}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero{padding-top:var(--space-9);padding-bottom:calc(var(--space-section) / 2)}
.hero__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-8);
  margin-bottom:var(--space-11);
}
.hero__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-6);
  max-width:531px;
}
.hero__text{max-width:531px}
.hero__art{flex:none;width:520px;max-width:48%}

.capability-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-5) var(--space-7);
  border-block:1px solid var(--dark);
  padding-block:var(--space-4);
}
.capability-strip li{font-size:var(--fs-h4);font-weight:var(--fw-medium);color:var(--dark)}

/* ═══════════════════ A PLATAFORMA ═══════════════════ */
.platform{
  display:flex;
  gap:var(--space-10);
  padding:var(--space-9);
}
.platform__text{display:flex;flex-direction:column;gap:var(--space-5);flex:1 1 620px}
.platform__lead{font-size:var(--fs-h4);font-weight:var(--fw-medium)}
.platform__tags{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-1);
  flex:0 1 340px;
}
.platform__tags li{
  background:var(--white);
  border:1px solid var(--dark);
  border-radius:var(--radius-control);
  padding:10px 20px;
  font-size:var(--fs-body);
}

/* ═══════════════════ BENEFÍCIOS ═══════════════════ */
.benefits{
  display:flex;
  align-items:stretch;
  gap:var(--space-10);
  padding:var(--space-11) var(--space-9);
}
.benefits__col{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--space-3);
}
.benefits__divider{width:1px;background:var(--white);flex:none;align-self:stretch}
.benefits .learn-more__icon{background:var(--white);color:var(--dark)}

/* ═══════════════════ ACORDEÃO (O DESAFIO) ═══════════════════ */
.accordion{display:flex;flex-direction:column;gap:var(--space-5)}
.accordion__item{
  background:var(--grey);
  border:1px solid var(--dark);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-hard);
  transition:background-color var(--transition);
}
.accordion__item.is-open{background:var(--primary)}

.accordion__head{
  width:100%;
  display:flex;
  align-items:center;
  gap:25px;
  padding:41px var(--space-9);
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--font-sans);
  text-align:left;
  color:var(--text);
}
.accordion__number{font-size:var(--fs-h1);font-weight:var(--fw-medium);line-height:1;flex:none}
.accordion__title{font-size:var(--fs-h3);font-weight:var(--fw-medium);flex:1}

.accordion__toggle{
  position:relative;
  width:58px;height:58px;flex:none;
  border-radius:var(--radius-pill);
  background:var(--grey);
  border:1px solid var(--dark);
}
.accordion__item.is-open .accordion__toggle{background:var(--white)}
.accordion__toggle::before,
.accordion__toggle::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--dark);
  transform:translate(-50%,-50%);
}
.accordion__toggle::before{width:22px;height:3px}
.accordion__toggle::after{width:3px;height:22px;transition:transform var(--transition),opacity var(--transition)}
.accordion__item.is-open .accordion__toggle::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.accordion__body{display:none;padding:0 var(--space-9) var(--space-7)}
.accordion__item.is-open .accordion__body{display:block}
.accordion__body p{border-top:1px solid var(--dark);padding-top:var(--space-5);max-width:88ch}

/* ═══════════════════ CARDS (DIFERENCIAIS) ═══════════════════ */
.cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-7);
}
.card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-7);
  min-height:310px;
  padding:var(--space-8);
  border:1px solid var(--dark);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-hard);
}
.card__body{display:flex;flex-direction:column;gap:var(--space-3);max-width:56%}
.card__mark{flex:none}
.card--grey{background:var(--grey)}
.card--primary{background:var(--primary)}
.card--dark{background:var(--dark);color:var(--text-on-dark)}

/* ═══════════════════ BLOCO CTA ═══════════════════ */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-8);
  padding:var(--space-9);
}
.cta__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);max-width:560px}
.cta__art{width:360px;flex:none}

/* ═══════════════════ CONTATO ═══════════════════ */
.contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-9);
  padding:var(--space-9) var(--space-13) var(--space-12);
}
.contact__col{flex:1 1 556px;max-width:556px}
.contact__art{width:300px;flex:none}
.contact__form{display:flex;flex-direction:column;gap:26px}

.field{display:flex;flex-direction:column;gap:5px;border:0;padding:0;margin:0;min-width:0}
.field__label{font-size:var(--fs-label);color:var(--text);padding:0}

.input,.textarea{
  width:100%;
  padding:var(--input-padding);
  border:1px solid var(--border-input);
  border-radius:var(--radius-control);
  background:var(--white);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh);
  color:var(--text);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.input::placeholder,.textarea::placeholder{color:var(--placeholder)}
.input:focus,.textarea:focus{
  outline:none;
  border-color:var(--dark);
  box-shadow:0 0 0 3px rgba(255,119,38,.55);
}
.textarea{min-height:190px;resize:vertical}

.field.is-invalid .input,
.field.is-invalid .textarea{border-color:var(--error);box-shadow:0 0 0 3px rgba(196,51,29,.18)}
.field__error{display:none;font-size:var(--fs-label);color:var(--error)}
.field.is-invalid .field__error{display:block}

.field--radios{gap:var(--space-2)}
.radios{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.radio{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:var(--fs-body);
  cursor:pointer;
}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio__dot{
  width:28px;height:28px;flex:none;
  border:1px solid var(--dark);
  border-radius:var(--radius-pill);
  background:var(--white);
  display:grid;place-items:center;
}
.radio__dot::after{
  content:"";width:16px;height:16px;border-radius:var(--radius-pill);
  background:transparent;
  transition:background-color var(--transition);
}
.radio input:checked + .radio__dot::after{background:var(--primary)}
.radio input:focus-visible + .radio__dot{outline:2px solid var(--primary);outline-offset:3px}

.contact__success{text-align:center;max-width:556px;margin-inline:auto;padding-block:var(--space-8)}
.contact__check{
  display:inline-grid;place-items:center;
  width:80px;height:80px;
  border-radius:var(--radius-pill);
  background:var(--primary);
  border:1px solid var(--dark);
  color:var(--dark);
  margin-bottom:var(--space-5);
}
.contact__success h3{margin-bottom:var(--space-1)}

/* ══════════════════════════ RODAPÉ ══════════════════════════ */
.footer{padding-top:calc(var(--space-section) / 2)}
.footer__panel{
  background:var(--dark);
  color:var(--text-on-dark);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:55px var(--space-9) var(--space-8);
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap}
.footer__brand{
  background:var(--white);
  border-radius:var(--radius-control);
  padding:16px 22px;
  display:inline-block;
}
.footer__brand img{height:92px;width:auto}
.footer__menu{display:flex;gap:var(--space-7);flex-wrap:wrap}
.footer__menu a{text-decoration:underline;text-underline-offset:4px}

.footer__middle{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-9);
  align-items:start;
}
.footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.footer__tag{margin-bottom:var(--space-1)}
.footer__note{max-width:44ch}

.footer__partners{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__partners-title{font-size:var(--fs-label)}
.partner-strip{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.partner-slot{
  width:136px;height:62px;
  border:1px dashed rgba(255,255,255,.45);
  border-radius:var(--radius-control);
  display:grid;place-items:center;
  font-size:var(--fs-label);
  color:rgba(255,255,255,.6);
}
.partner-strip img{max-height:44px;width:auto}

.footer__divider{border:0;border-top:1px solid var(--white);margin:0}
.footer__bottom{display:flex;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap}

/* ══════════════════════ RESPONSIVO ══════════════════════ */
@media (max-width:1279px){
  :root{--page-padding:60px}
  .hero__art{width:440px}
}

@media (max-width:1023px){
  :root{
    --page-padding:40px;
    --fs-h1:48px;
    --space-section:100px;
    --space-section-gap:60px;
  }
  .navbar__toggle{display:grid}
  .navbar__menu{
    display:none;
    position:absolute;
    left:var(--page-padding);right:var(--page-padding);
    top:calc(100% + 10px);
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-3);
    background:var(--white);
    border:1px solid var(--dark);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-hard);
    padding:var(--space-6);
  }
  .navbar__menu.is-open{display:flex}
  .navbar{position:relative}

  .hero__inner{flex-direction:column;align-items:flex-start}
  .hero__content,.hero__text{max-width:none}
  .hero__art{width:100%;max-width:520px;margin-inline:auto}
  .hero__content .btn{width:100%}

  .platform{flex-direction:column;padding:var(--space-7)}
  .platform__tags{flex-direction:row;flex-wrap:wrap}

  .benefits{flex-direction:column;padding:var(--space-7)}
  .benefits__divider{width:100%;height:1px;align-self:auto}

  .cards{grid-template-columns:1fr}
  .card{padding:var(--space-7)}
  .card__body{max-width:none}

  .cta{flex-direction:column;align-items:flex-start;padding:var(--space-7)}
  .cta__art{width:280px;margin-inline:auto}
  .cta__content{max-width:none}

  .contact{flex-direction:column;align-items:stretch;padding:var(--space-7)}
  .contact__col{max-width:none;flex:1 1 auto}
  .contact__art{display:none}
  .footer__middle{grid-template-columns:1fr;gap:var(--space-7)}
  .accordion__head{padding:var(--space-5) var(--space-7);gap:var(--space-3)}
  .accordion__body{padding:0 var(--space-7) var(--space-5)}
  .footer__panel{padding:var(--space-7)}
}

@media (max-width:767px){
  :root{
    --fs-h1:43px;
    --fs-h2:36px;
    --fs-h3:26px;
    --fs-h4:18px;
    --fs-body:16px;
    --lh:1.5;
    --page-padding:20px;
    --space-section:60px;
    --space-section-gap:40px;
    --btn-padding:18px 28px;
    --input-padding:16px 22px;
    --radius-card:32px;
  }
  .section__header{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  .navbar__brand img{height:48px}
  .footer__brand img{height:68px}
  .accordion__number{font-size:36px}
  .accordion__head{padding:var(--space-5) var(--space-6);gap:var(--space-2)}
  .accordion__toggle{width:44px;height:44px}
  .accordion__toggle::before{width:16px}
  .accordion__toggle::after{height:16px}
  .accordion__body{padding:0 var(--space-6) var(--space-5)}
  .capability-strip{justify-content:flex-start;gap:var(--space-3) var(--space-5)}
  .card{min-height:0}
  .card__mark svg{width:72px;height:72px}
  .radios{flex-direction:column;gap:var(--space-2)}
  .partner-slot{width:126px;height:56px}
  .footer__bottom{flex-direction:column;gap:var(--space-1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}