/* ==========================================================================
   Cloara Pinheiro — Deputada Federal 5550 — Landing Page
   ========================================================================== */

:root{
  --purple-nav:      #61147e;
  --purple-deep:      #61197a;
  --purple-deep-2:    #621d7a;
  --magenta:          #a23590;
  --pink-accent:      #b3319d;
  --card-purple:      #4f006b;
  --lavender:         #f3f0fb;
  --card-purple-2:    #761f8a;
  --card-purple-3:    #9d338f;
  --gray-muted:       #a6a6a6;
  --white:            #ffffff;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1160px;
  --gap: clamp(1.5rem, 3vw, 3rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font);
  color:#2b2b2b;
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.section-inner{
  max-width: var(--container);
  margin:0 auto;
  padding: clamp(3rem,6vw,5.5rem) 1.5rem;
}

h1,h2,h3{ font-weight:900; letter-spacing:-0.02em; }

.light{ font-weight:300; }

/* ---------------- Top bar / nav ---------------- */
.topbar{
  background: var(--purple-nav);
  position: sticky;
  top:0;
  z-index:100;
}
.topbar__inner{
  max-width: 1500px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
}
.nav-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size: 0.8rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0.92;
  transition: opacity .2s;
}
.nav-links a:hover{ opacity:1; text-decoration:underline; }

.nav-socials{
  list-style:none;
  display:flex;
  gap:0.6rem;
  flex-shrink:0;
}
.nav-socials img{ width:28px; height:28px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  order:-1;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height: 640px;
  background:#fff;
  padding-top: 2rem;
  container-type: inline-size;
}
.hero__decor{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero__decor .blob{
  position:absolute;
  mix-blend-mode:multiply;
  opacity:0.9;
}
.blob--1{ width:70%; max-width:820px; left:8%;  top:10%; }
.blob--2{ width:55%; max-width:620px; right:-8%; top:30%; }
.blob--3{ width:85%; max-width:980px; left:15%; top:-45%; }
.blob--4{ width:45%; max-width:520px; left:30%; top:-4%; }
.hero__decor .texture{ display:none; }

.hero__photo{
  position:relative;
  z-index:1;
  flex:0 1 460px;
  max-width:44%;
}
.hero__photo img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

.hero__content{
  position:relative;
  z-index:1;
  flex:0 1 520px;
  max-width:48%;
  padding: 2.5rem 1.5rem 3.5rem 1.5rem;
}
.hero__logo{ width:min(320px, 100%); margin-bottom:1rem; }
.hero__role{
  font-weight:900;
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
  color: var(--purple-deep-2);
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.hero__number{
  font-weight:900;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height:0.9;
  color: var(--magenta);
  margin: 0.05em 0 0.1em;
}
.hero__tagline{
  font-weight:900;
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  color: var(--purple-deep);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.heart-inline{
  display:inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.05em;
  margin: 0 0.02em;
}

/* Precise, Figma-accurate composition — restored above tablet width.
   All positions are % of the original 3840x1100 hero frame, so the whole
   scene scales fluidly (font-size uses cqw = % of the hero's own width). */
@media (min-width: 1025px){
  .hero{
    display:block;
    align-items:unset;
    justify-content:unset;
    padding-top:0;
    min-height:0;
    aspect-ratio: 3840 / 1100;
  }
  .hero__decor .blob{
    mix-blend-mode:multiply;
    opacity:0.9;
    max-width:none;
    right:auto;
  }
  .blob--1{ left:17.97%; top:2.18%;    width:22.66%; height:52.55%; }
  .blob--2{ left:22.01%; top:42.82%;   width:35.21%; height:93.18%; }
  .blob--3{ left:65.16%; top:35.36%;   width:19.82%; height:111.36%; }
  .blob--4{ left:25.94%; top:-107%;    width:49.35%; height:120.09%; }

  .hero__decor .texture{
    display:block;
    position:absolute;
    border-radius:50%;
    overflow:hidden;
    opacity:0.6;
    mix-blend-mode:multiply;
  }
  .texture img{ width:100%; height:100%; object-fit:cover; }
  .texture--1{ left:22.58%; top:15.91%; width:15.03%; height:52.45%; }
  .texture--2{ left:39.17%; top:24.91%; width:14.09%; height:49.18%; }

  .hero__photo{
    position:absolute;
    z-index:1;
    max-width:none;
    flex:none;
    left:25.57%; top:0; width:24.77%; height:147.55%;
  }
  .hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

  .hero__content{
    position:static;
    max-width:none;
    flex:none;
    padding:0;
  }
  .hero__logo{
    position:absolute;
    margin-bottom:0;
    width:20.73cqw;
    left:47.55%; top:10.82%;
  }
  .hero__role{
    position:absolute;
    left:51.02%; top:47.35%;
    font-size:1.615cqw;
    white-space:nowrap;
  }
  .hero__number{
    position:absolute;
    left:51.02%; top:53.2%;
    font-size:7.018cqw;
    margin:0;
    white-space:nowrap;
  }
  .hero__tagline{
    position:absolute;
    left:55.89%; top:76.93%;
    font-size:1.289cqw;
    white-space:nowrap;
  }
}

/* ---------------- Intro band ---------------- */
.intro-band{ background: var(--magenta); color:#fff; }
.intro-band__inner{
  max-width: var(--container);
  margin:0 auto;
  padding: clamp(2.5rem,5vw,4rem) 1.5rem;
}
.pill-label{
  display:inline-block;
  border:1px solid var(--purple-deep);
  border-radius:999px;
  padding:0.5rem 1.5rem;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--purple-deep);
  margin-bottom:1.75rem;
}
.intro-band__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
}
.intro-band__title{
  font-weight:800;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  flex:1 1 380px;
}
.intro-band__text{
  flex:1 1 320px;
  max-width:420px;
  font-size:1rem;
  line-height:1.5;
}
.intro-band__rule{
  border:none;
  border-top:1px solid rgba(255,255,255,0.55);
  margin-top:2.5rem;
}

/* ---------------- Section title (shared) ---------------- */
.section-title{
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height:1.05;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-title span, .section-title strong{ display:block; }
.section-title .light{ color: var(--magenta); }

/* ---------------- Trajetória ---------------- */
.trajetoria{ background: var(--lavender); }
.trajetoria .section-title strong{ color: var(--purple-deep); }

.timeline{
  --timeline-gap: 3.25rem;
  position:relative;
  display:flex;
  flex-direction:column;
  gap: var(--timeline-gap);
}
.timeline__item{ position:relative; }
.timeline__item::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(-1 * var(--timeline-gap));
  height: var(--timeline-gap);
  width:2px;
  background: var(--pink-accent);
  transform: translateX(-50%);
  z-index:1;
}
.timeline__badge{
  position:absolute;
  left:50%;
  top: -1.4rem;
  transform: translateX(-50%);
  width: 2.8rem;
  height: 2.8rem;
  border-radius:50%;
  background: var(--pink-accent);
  color:#fff;
  font-weight:700;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.timeline__card{
  position:relative;
  border-radius: 1.75rem;
  padding: 2.25rem;
  display:flex;
  align-items:center;
  gap: 2rem;
  overflow:visible;
}
.timeline__card--purple{ background: var(--card-purple); color:#fff; }
.timeline__card--white{ background:#fff; color: var(--purple-deep); }
.timeline__text{ flex:1 1 55%; min-width:0; }
.timeline__text h3{
  color: var(--pink-accent);
  font-weight:900;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin-bottom:0.85rem;
}
.timeline__text .lead{ font-weight:800; margin-bottom:0.75rem; }
.timeline__text .lead--italic{ font-style:italic; }
.timeline__text p{ font-size:0.92rem; margin-bottom:0.85rem; }
.timeline__text p:last-child{ margin-bottom:0; }
.timeline__photo{
  flex:1 1 35%;
  border-radius:1.25rem;
  overflow:hidden;
  align-self:stretch;
  min-height:220px;
}
.timeline__photo img{
  width:100%; height:100%; object-fit:cover;
}
.timeline__card--overlap{
  min-height: 26rem;
}
.timeline__card--overlap .timeline__text{
  flex:0 1 55%;
}
.timeline__card--overlap .timeline__photo{
  position:absolute;
  top:-50px;
  right:2.25rem;
  bottom:2.25rem;
  width:35%;
  align-self:auto;
  min-height:0;
}
.timeline__card--overlap .timeline__photo img{
  object-position: center top;
}
.timeline__card--image-only{
  justify-content:flex-end;
}
.timeline__card--image-only:not(.timeline__card--overlap){
  min-height:300px;
}
.timeline__card--image-only .timeline__photo{
  flex: 0 1 44%;
  width:44%;
  min-height:0;
}

/* ---------------- Why Federal ---------------- */
.why-federal{
  background: var(--purple-deep);
  color:#fff;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.why-federal__text{
  flex: 0 0 auto;
  margin-right: clamp(1rem, 2.5vw, 3rem);
  width: clamp(14rem, 19.9vw, 24rem);
  padding: clamp(3rem,6vw,5.5rem) 0;
}
.why-federal__text .section-title{
  font-size: clamp(1.6rem, 2.31vw, 2.8rem);
  overflow-wrap: break-word;
}
.why-federal__text .section-title .light{ color: var(--magenta); }
.why-federal__text .section-title strong{ color:#fff; }
.why-federal__text p{
  font-size:0.98rem;
  margin-bottom:1.1rem;
}
.why-federal__photo{
  flex: 0 0 clamp(12rem, 23.9vw, 29rem);
  width: clamp(12rem, 23.9vw, 29rem);
  min-height:420px;
  position:relative;
}
.why-federal__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: top center;
  position:absolute;
  inset:0;
}

/* ---------------- Minhas Causas ---------------- */
.causas{ background:#fff; }
.causas .section-title strong{ color: var(--purple-deep); }

.causas-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.causa-card{
  position:relative;
  background: var(--lavender);
  border-radius: 1.75rem;
  padding: 3.25rem 2rem 2rem;
  min-height: 280px;
}
.causa-card--wide{ grid-column: 1 / -1; min-height:220px; }
.causa-card__badge{
  position:absolute;
  top:-1.4rem;
  left:2rem;
  width:3.4rem;
  height:3.4rem;
  border-radius:50%;
  background: var(--card-purple);
  display:flex;
  align-items:center;
  justify-content:center;
}
.causa-card--wide .causa-card__badge,
.causa-card--empty:not(.causa-card--wide) .causa-card__badge{
  left:50%;
  transform:translateX(-50%);
}
.causa-card__badge img{ width:45%; height:45%; object-fit:contain; }
.causa-card h3{
  color: var(--purple-deep);
  font-size:1.35rem;
  margin-bottom:0.6rem;
}
.causa-card hr{
  border:none;
  border-top:2px solid var(--pink-accent);
  width:60%;
  margin-bottom:1.25rem;
}
.causa-card .lead{ font-weight:800; color: var(--purple-deep); margin-bottom:0.75rem; }
.causa-card p{ font-size:0.92rem; color: var(--purple-deep); margin-bottom:0.75rem; }
.causa-card p:last-child{ margin-bottom:0; }

/* ---------------- Meu Trabalho ---------------- */
.trabalho{ background: var(--purple-deep); color:#fff; }
.trabalho .section-title strong{ color:#fff; }

.trabalho-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.trabalho-card{
  background: var(--card-purple-2);
  border-radius: 1.75rem;
  padding: 2.25rem;
  min-height: 300px;
}
.trabalho-card--wide{ grid-column: 1 / -1; min-height:220px; background: var(--card-purple-3); }
.trabalho-card__stat{
  font-weight:900;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.trabalho-card__stat .prefix{ font-size:0.5em; font-weight:800; margin-right:0.35em; }
.trabalho-card hr{
  border:none;
  border-top:2px solid rgba(255,255,255,0.7);
  margin: 1rem 0 1.25rem;
}
.trabalho-card h3{
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin-bottom:0.85rem;
}
.trabalho-card p{ font-size:0.9rem; margin-bottom:0.85rem; }
.trabalho-card p:last-child{ margin-bottom:0; }

/* ---------------- Footer ---------------- */
.site-footer{
  background:#fff;
  text-align:center;
  padding: clamp(3rem,6vw,5rem) 1.5rem;
}
.site-footer__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(1rem,3vw,2.5rem);
  flex-wrap:wrap;
  margin-bottom: 2.5rem;
}
.site-footer__logo{ width:min(260px, 60vw); }
.site-footer__role{
  font-weight:900;
  color: var(--magenta);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.site-footer__digits{
  font-weight:900;
  color: var(--purple-deep);
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height:0.95;
}
.site-footer__follow{
  color: var(--gray-muted);
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:1.4rem;
  margin-bottom:1.5rem;
}
.site-footer__socials{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:2.5rem;
}
.site-footer__socials img{ width:42px; height:42px; }
.site-footer__closing{
  color: var(--gray-muted);
  font-weight:500;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  max-width:900px;
  margin:0 auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px){
  .hero{ flex-direction:column; align-items:center; padding-top:3rem; }
  .hero__photo, .hero__content{ max-width:min(520px,88%); flex:0 1 auto; }
  .hero__content{ text-align:center; padding-bottom:2.5rem; }
  .hero__decor{ bottom:auto; height:640px; }

  .why-federal{ flex-direction:column; }
  .why-federal__text{ margin-left:0; margin-right:0; width:auto; padding:2.5rem 1.5rem 2rem; }
  .why-federal__text .section-title{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
  .why-federal__photo{ flex-basis:auto; width:auto; min-height:340px; order:-1; }
}

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    flex-direction:column;
    width:100%;
    order:3;
    padding-top:1rem;
    gap:0.85rem;
  }
  .nav-links.is-open{ display:flex; }
  .topbar__inner{ flex-wrap:wrap; }

  .timeline{ --timeline-gap: 2.5rem; }
  .timeline__badge{ width:2.2rem; height:2.2rem; font-size:1.05rem; top:-1.1rem; }
  .timeline__card{ flex-direction:column; padding:1.75rem; gap:1.25rem; }
  .timeline__card--image-only{ justify-content:flex-start; min-height:auto; }
  .timeline__photo{ min-height:220px; width:100%; }
  .timeline__card--image-only .timeline__photo{ flex:1 1 auto; width:100%; }
  .timeline__card--overlap{ min-height:auto; }
  .timeline__card--overlap .timeline__text{ flex:1 1 auto; }
  .timeline__card--overlap .timeline__photo{
    position:static;
    top:auto; right:auto; bottom:auto;
    width:100%;
  }

  .causas-grid, .trabalho-grid{ grid-template-columns:1fr; }
  .causa-card--wide, .trabalho-card--wide{ grid-column:auto; }

  .intro-band__row{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .intro-band__title, .intro-band__text{ flex:0 0 auto; max-width:none; }

  .hero__content{ order:-1; }
}

@media (max-width: 560px){
  .hero__number{ font-size: clamp(3rem, 16vw, 4.5rem); margin: 0.1rem 0; line-height: 1; }
  .hero__tagline{ font-size:1.15rem; margin-top: 0.5rem; }
  .section-title{ font-size: clamp(2rem, 11vw, 2.8rem); }
  .site-footer__digits{ font-size: clamp(2.75rem, 18vw, 4rem); }
  .site-footer__follow{ font-size:1.1rem; }
  .causa-card, .trabalho-card{ padding:2rem 1.5rem 1.5rem; }

  .why-federal__photo{ min-height:0; aspect-ratio: 1080 / 1920; }
}