/* =========================================================
   Zé Santana 1311 — Deputado Federal
   Folha de estilo principal
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --red:            #e1232b;
  --red-strong:     #e02020;
  --yellow:         #efc801;
  --yellow-deep:    #f2c802;
  --green:          #159c38;
  --green-bright:   #26a939;
  --blue:           #1b3faa;

  --ink:            #3d4c4c;   /* corpo de texto */
  --white:          #ffffff;

  --font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* larguras de conteúdo medidas no layout de referência (1440px) */
  --w-header:  1294px;
  --w-about:    880px;
  --w-traj:     952px;
  --w-achv:     408px;
  --w-footer:  1072px;

  --pad-mobile: 24px;

  /* raio "folha" — cantos superior-esquerdo e inferior-direito */
  --leaf-lg: 54px;
  --leaf-md: 28px;
  --leaf-sm: 21px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 15px; }
p:last-child{ margin-bottom:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:10px 18px;
  font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

/* ---------- 3. Título em pílula vermelha ---------- */
.badge{
  display:inline-block;
  margin:0 0 47px;
  padding:20px 26px 22px;
  background:var(--red);
  color:var(--white);
  font-size:28px;
  font-weight:800;
  font-style:italic;
  line-height:1;
  letter-spacing:-.01em;
  border-radius:var(--leaf-md) 0 var(--leaf-md) 0;
}

/* =========================================================
   4. HEADER
   ========================================================= */
.site-header{
  position:absolute;
  inset:36px 0 auto;
  z-index:60;
}

.site-header__pill{
  position:relative;
  width:min(100% - 146px, var(--w-header));
  margin-inline:auto;
  min-height:58px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:var(--white);
  border-radius:999px;
  box-shadow:0 2px 14px rgba(0,0,0,.06);
}

/* “Siga nas Redes Sociais” só aparece no mobile */
.site-header__brand{ display:none; }

.nav__list{
  display:flex;
  align-items:center;
  gap:35px;
}

.nav__link{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:var(--red-strong);
  white-space:nowrap;
  transition:color .18s ease, transform .18s ease;
}
.nav__link:hover{ color:var(--green); transform:translateY(-1px); }

/* botão hambúrguer (mobile) */
.burger{
  display:none;
  width:34px; height:30px;
  padding:5px 3px;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; height:3px; border-radius:2px;
  background:var(--red-strong);
  transition:transform .25s ease, opacity .2s ease;
}
.burger span + span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background-color:#f7f6ee;
}

/* o degradê de origem tem o verde à esquerda; o layout pede verde à direita */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../img/bg.webp') center / cover no-repeat;
  transform:scaleX(-1);
}

.hero__stage{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  aspect-ratio:1440 / 1020;
}

/* posições em % do palco 1440×1020 — proporção idêntica à referência */
.hero__photo{
  position:absolute;
  left:44.79%;            /* 645px  */
  top:14.41%;             /* 147px  */
  width:55.35%;           /* 797px  */
  max-width:none;         /* pode extrapolar o palco (recorte do hero) */
}
.hero__logo{
  position:absolute;
  left:5%;                /* 72px   */
  top:36.08%;             /* 368px  */
  width:43.82%;           /* 631px  */
}
.hero__slogan{
  position:absolute;
  left:16.94%;            /* 244px  */
  top:70.88%;             /* 723px  */
  width:19.93%;           /* 287px  */
}
.hero__rule{ display:none; }

/* =========================================================
   6. QUEM EU SOU
   ========================================================= */
.about{ padding:104px 0 81px; }

.about__inner{
  width:min(100% - 2 * var(--pad-mobile), var(--w-about));
  margin-inline:auto;
  display:grid;
  grid-template-columns:468px 1fr;
  gap:33px;
  align-items:start;
}

.about__media{ margin:0; }
.about__media img{
  width:100%;
  border-radius:var(--leaf-lg) 0 var(--leaf-lg) 0;
}

.about__text .badge{ margin-bottom:47px; }

/* =========================================================
   7. FAIXA DE ÍCONES
   ========================================================= */
.faixa{
  width:min(100% - 72px, 1368px);
  height:93px;
  margin:0 auto 95px;
  background-image:url('../img/frame-18196.png');
  background-repeat:repeat-x;
  background-position:left center;
  background-size:auto 93px;
}

/* =========================================================
   8. MINHA TRAJETÓRIA
   ========================================================= */
.traj{
  background:var(--yellow);
  padding:55px 0 50px;
}

.traj__inner{
  width:min(100% - 2 * var(--pad-mobile), var(--w-traj));
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 480px;
  gap:91px;
  align-items:start;
}

.traj__media{ margin:0; }
.traj__media img{
  width:100%;
  border-radius:0 var(--leaf-lg) 0 var(--leaf-lg);
}

.traj .badge{ margin-bottom:38px; }

/* =========================================================
   9. REALIZAÇÕES
   ========================================================= */
.achv{ padding:96px 0 0; }

.achv__inner{
  width:min(100% - 2 * var(--pad-mobile), var(--w-achv));
  margin-inline:auto;
}
.achv .badge{ margin-bottom:41px; }

/* =========================================================
   10. CTA
   ========================================================= */
.cta{
  padding:99px 0 129px;
  display:flex;
  justify-content:center;
}

.cta__card{
  width:min(100% - 2 * var(--pad-mobile), 464px);
  padding:45px 24px 40px;
  background:var(--yellow);
  border-radius:var(--leaf-lg) 0 var(--leaf-lg) 0;
  text-align:center;
}

.cta__title{
  margin:0 0 19px;
  color:var(--red);
  font-size:31px;
  font-weight:800;
  font-style:italic;
  line-height:1.22;
}

.cta__btn{
  display:inline-block;
  padding:29px 14px;
  white-space:nowrap;
  min-width:310px;
  background:var(--red-strong);
  color:var(--white);
  font-size:20px;
  font-weight:700;
  line-height:1;
  border-radius:var(--leaf-sm) 0 var(--leaf-sm) 0;
  transition:transform .18s ease, background-color .18s ease;
}
.cta__btn:hover{ background:var(--red); transform:translateY(-2px); }

/* =========================================================
   11. FOOTER
   ========================================================= */
.social{ background:var(--green); }

.social__inner{
  width:min(100% - 2 * var(--pad-mobile), var(--w-footer));
  margin-inline:auto;
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.social__title{
  margin:0;
  color:var(--yellow);
  font-size:19px;
  font-weight:700;
}

.social__list{ display:flex; align-items:center; gap:44px; }

.social__list a{
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  transition:background-color .2s ease, transform .2s ease;
}
.social__list a:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }

.social__list svg{
  width:46px; height:46px;
  fill:none;
  stroke:var(--white);
  stroke-width:1.7;
}
.social__list svg .solid,
.social__list svg .dot{ fill:var(--white); stroke:none; }

/* --- rodapé branco --- */
.footer__main{ background:var(--white); }

.footer__inner{
  width:min(100% - 2 * var(--pad-mobile), var(--w-footer));
  margin-inline:auto;
  min-height:280px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:start;
  gap:120px;
  padding:55px 0;
}

.footer__logo img{ width:362px; }

.footer__nav ul{ display:grid; gap:10px; }
.footer__nav a{
  font-size:14px;
  font-weight:600;
  color:#3e3e3e;
  transition:color .18s ease;
}
.footer__nav a:hover{ color:var(--red); }

.footer__legal{
  margin:0;
  max-width:274px;
  justify-self:end;
  text-align:center;
  font-size:8px;
  line-height:1.45;
  color:#000;
}

/* --- tarja tricolor --- */
.footer__stripe{ display:flex; height:32px; }
.footer__stripe span{ flex:1 1 33.333%; }
.footer__stripe span:nth-child(1){ background:var(--yellow-deep); }
.footer__stripe span:nth-child(2){ background:var(--green-bright); }
.footer__stripe span:nth-child(3){ background:var(--red-strong); }

/* =========================================================
   12. RESPONSIVO — telas médias
   ========================================================= */
@media (max-width:1180px){
  .site-header__pill{ width:min(100% - 48px, var(--w-header)); }
  .nav__list{ gap:24px; }
  .nav__link{ font-size:14px; }
}

@media (max-width:992px){
  .about__inner{ grid-template-columns:1fr; gap:40px; max-width:640px; }
  .about__media img{ max-width:468px; }
  .traj__inner{ grid-template-columns:1fr; gap:40px; max-width:640px; }
  .traj__media img{ max-width:480px; }
  .achv__inner{ max-width:560px; }
}

/* =========================================================
   13. RESPONSIVO — mobile (layout de referência: 440px)
   ========================================================= */
@media (max-width:767px){

  /* --- header --- */
  .site-header{ inset:20px 0 auto; }

  .site-header__pill{
    width:calc(100% - 32px);
    min-height:40px;
    padding:0 20px 0 24px;
    justify-content:space-between;
    gap:12px;
  }

  .site-header__brand{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--red-strong);
  }

  .burger{ display:block; }

  /* menu suspenso */
  .nav{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:18px;
    box-shadow:0 14px 34px rgba(0,0,0,.14);
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{ display:block; padding:12px 24px; font-size:15px; }

  /* --- hero (palco de referência: 440 × 1066) --- */
  /* no mobile o degradê é mais saturado e some em branco antes da logo */
  .hero::before{
    transform:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 38%, #ffffff 54%),
      radial-gradient(150% 46% at 106% -4%, #2fab00 0%, rgba(47,171,0,.92) 18%, rgba(47,171,0,0) 60%),
      linear-gradient(184deg, #c9d401 0%, #d7da01 20%, #e4ef00 40%, #e9f200 54%);
  }

  .hero__stage{ aspect-ratio:440 / 1066; }

  .hero__photo{
    left:-14.73%;         /* -65px  */
    top:9.85%;            /* 105px  */
    width:122.3%;         /* 538px  */
  }
  .hero__slogan{
    left:50.9%;           /* 224px  */
    top:50.56%;           /* 539px  */
    width:43.6%;          /* 192px  */
  }
  .hero__logo{
    left:6.1%;            /* 27px   */
    top:64.73%;           /* 690px  */
    width:90.2%;          /* 397px  */
  }
  .hero__rule{
    display:flex;
    position:absolute;
    left:4.1%;
    right:4.1%;
    top:83.21%;           /* 887px  */
    height:8px;
    border-radius:4px;
    background:linear-gradient(90deg,
      var(--yellow-deep) 0 33.33%,
      var(--green-bright) 33.33% 66.66%,
      var(--red-strong) 66.66% 100%);
  }

  /* --- quem eu sou --- */
  .badge{ margin-bottom:38px; }

  .about{ padding:0 0 70px; }
  .about__inner{ width:100%; gap:33px; }

  .about__media{ width:100%; }
  .about__media img{ width:100%; border-radius:0; }

  .about__text{ width:calc(100% - 2 * var(--pad-mobile)); margin-inline:auto; }
  .about__text .badge{
    display:block;
    width:fit-content;
    margin-inline:auto;
    margin-bottom:57px;
  }

  /* --- faixa --- */
  .faixa{
    width:100%;
    height:68px;
    margin-bottom:96px;
    background-size:auto 68px;
    background-position:center;
  }

  /* --- trajetória: no mobile a foto vem antes do texto --- */
  .traj{ padding:55px 0 42px; }
  .traj__inner{
    width:calc(100% - 2 * var(--pad-mobile));
    gap:0;
  }
  .traj__media{ order:-1; margin-bottom:49px; }
  .traj__media img{
    width:100%;
    aspect-ratio:392 / 507;
    object-fit:cover;
    object-position:center;
    border-radius:0 44px 0 44px;
  }
  .traj .badge{
    display:block;
    width:fit-content;
    margin-inline:auto;
    margin-bottom:44px;
  }

  /* --- realizações --- */
  .achv{ padding:97px 0 0; }
  .achv__inner{ width:calc(100% - 2 * var(--pad-mobile)); }
  .achv .badge{ display:block; width:fit-content; margin-inline:auto; }

  /* --- cta --- */
  .cta{ padding:83px 0 104px; }
  .cta__card{ width:calc(100% - 2 * var(--pad-mobile)); padding:45px 20px 40px; }
  .cta__title{ margin-bottom:20px; }
  .cta__btn{ min-width:0; width:100%; max-width:310px; padding:26px 12px; }

  /* --- footer --- */
  .social__inner{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-height:188px;
    gap:26px;
    width:calc(100% - 2 * var(--pad-mobile));
  }
  .social__title{ font-size:18px; }
  .social__list{ gap:40px; align-self:center; }
  .social__list a{ width:46px; height:46px; }
  .social__list svg{ width:42px; height:42px; }

  .footer__inner{
    width:calc(100% - 2 * var(--pad-mobile));
    grid-template-columns:1fr;
    justify-items:center;
    gap:40px;
    min-height:0;
    padding:55px 0 56px;
  }
  .footer__logo{ display:block; justify-self:center; width:min(100%, 362px); }
  .footer__logo img{ width:min(100%, 362px); }
  .footer__nav ul{ justify-items:center; text-align:center; gap:8px; }
  .footer__nav a{ font-size:15px; font-weight:700; }
  .footer__legal{
    justify-self:center;
    max-width:370px;
    font-size:11px;
    line-height:1.5;
  }

  .footer__stripe{ height:18px; }
  .footer__stripe span:nth-child(1),
  .footer__stripe span:nth-child(3){ flex:0 0 18.2%; }
  .footer__stripe span:nth-child(2){ flex:1 1 auto; }
}

/* telas muito estreitas */
@media (max-width:420px){
  .site-header__brand{ font-size:12px; }
  .badge{ font-size:25px; padding:18px 22px 20px; }
  .cta__title{ font-size:27px; }
  .cta__btn{ font-size:18px; }
}

@media (max-width:360px){
  .badge{ font-size:22px; padding:16px 20px 18px; }
  .cta__title{ font-size:24px; }
  .cta__btn{ font-size:16px; padding:24px 12px; }
  .footer__legal{ font-size:10px; }
}

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