/* =========================================================
   LP Elas por Elas — Grupo Paola Farneze
   Layout fiel ao Figma (desktop 1920 / mobile 393).
   ========================================================= */

:root {
  --rosa-texto: #ea8bb6;   /* títulos e destaques */
  --rosa-card: #f4508c;    /* cards rosa */
  --vinho: #611232;        /* cards vinho */
  --branco: #ffffff;
  --cinza: #545454;
  --fundo-claro: #f7f7f7;
  --preto: #000000;

  --ff-serif: "Playfair Display", Georgia, serif;
  --ff-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-sans: "Barlow", Arial, sans-serif;
  /* Card "Por que" usa IvyPresto Headline SemiBold no Figma (Adobe Fonts).
     Se o projeto tiver o kit da Adobe, troque aqui por "ivypresto-headline". */
  --ff-ivy: "Playfair Display", Georgia, serif;

  --largura: 1144px;
  --margem: 36px;          /* margem lateral no mobile */
  --gap-secoes: 200px;
}

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

html, body { margin: 0; padding: 0; }

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
  color: var(--branco);
  font-family: var(--ff-sans);
  background: linear-gradient(180deg, #000b03 0%, #000b03 8%, #15000b 47%, #15000b 100%);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-family: var(--ff-serif); font-style: italic; font-weight: 700; }
strong { font-weight: 700; color: var(--rosa-texto); }

.centro { text-align: center; }
.rosa { color: var(--rosa-texto); }

/* ---------- Topo ---------- */
.topo {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: #0000001d;
}
.topo__elas { width: 74px; }
.topo__divisor { width: 1px; height: 33px; background: var(--branco); }
.topo__gpf { width: 238px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 972px;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 75%, #000b03 100%),
    linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%),
    url("assets/evento.jpg") center top / cover no-repeat;
}
.hero__conteudo {
  width: 100%;
  max-width: 1352px;
  margin: 0 auto;
  padding-left: 184px;
  padding-right: var(--margem);
}
.hero__marca img { width: 230px; }
.hero__titulo {
  margin-top: 34px;
  max-width: 645px;
  font-family: var(--ff-cond);
  font-weight: 400;
  font-size: 67px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.hero__titulo span { font-weight: 700; }

.hero .cta { max-width: 484px; }
.hero a span {
  color: var(--preto);
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
}

.hero .selos { width: 300px; }

/* ---------- Estrutura ---------- */
.conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 108px 0 220px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-secoes);
}
.secao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ---------- Tipografia ---------- */
.titulo {
  max-width: 1000px;
  font-family: var(--ff-cond);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}
.titulo--estreito { max-width: 780px; }
.titulo--esquerda { text-align: left; font-size: 64px; }

.pergunta {
  max-width: 1060px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 72px;
  line-height: 1.05;
  color: var(--rosa-texto);
  text-align: center;
}

.texto {
  font-family: var(--ff-cond);
  font-size: 32px;
  line-height: 1.12;
}
.texto--grande { font-size: 34px; line-height: 1.15; }
.estreito { max-width: 820px; }

.paragrafo-leve {
  max-width: 960px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.frase-rosa {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  color: var(--rosa-texto);
}
.frase-rosa--menor { font-size: 32px; line-height: 1.1; }

.frase-forte {
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
}

.citacao {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
}

/* ---------- Cards ---------- */
.card { border-radius: 5px; width: 100%; }
.card--rosa { background: var(--rosa-card); }
.card--vinho { background: var(--vinho); }
.card--duplo {
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 72px;
  align-items: center;
  padding: 64px 72px;
}
.card__coluna { display: flex; flex-direction: column; gap: 24px; }
.card__destaque {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.card__pergunta {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.02;
}
.card--duplo .texto { font-size: 30px; }

/* ---------- Seção 3 ---------- */
.colunas {
  width: 100%;
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 72px;
  align-items: center;
}
.lista-talvez { display: flex; flex-direction: column; gap: 22px; }
.escolhas { padding: 56px; }
.escolhas__intro {
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.08;
  margin-bottom: 28px;
}
.escolhas li {
  padding: 18px 0;
  border-top: 1px solid rgba(234, 139, 182, .6);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
}
.manifesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.manifesto .pergunta { font-size: 68px; max-width: 1000px; }
.manifesto .paragrafo-leve { font-size: 36px; }

/* ---------- Seção 4 ---------- */
.temas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.temas .frase-rosa { font-size: 48px; }
.pills {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.pills li {
  padding: 18px 32px;
  border-radius: 5px;
  background: var(--vinho);
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
}

/* ---------- Seção 5 ---------- */
.grade {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pilar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 40px 48px;
  border-radius: 5px;
}
.pilar--vinho { background: var(--vinho); }
.pilar--rosa { background: var(--rosa-card); }
.pilar__num {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
}
.pilar--vinho .pilar__num { color: var(--rosa-texto); }
.pilar h3 {
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
}
.pilar p {
  font-family: var(--ff-cond);
  font-size: 24px;
  line-height: 1.18;
}
.pilar p + p { margin-top: -8px; }

/* ---------- Seção 6 ---------- */
.para-quem {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 72px;
}
.para-quem li {
  font-family: var(--ff-cond);
  font-size: 34px;
  line-height: 1.12;
}
.para-quem li::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--rosa-card);
}
.fecho { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fecho .paragrafo-leve { font-size: 40px; }
.fecho .frase-rosa { font-size: 48px; }

/* ---------- Seção 7 (card claro) ---------- */
.card-claro {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 472px;
  gap: 64px;
  align-items: center;
  padding: 80px 0 80px 88px;
  border-radius: 24px;
  background: var(--fundo-claro);
  color: var(--cinza);
}
.card-claro__texto { display: flex; flex-direction: column; gap: 22px; }
.card-claro h2 {
  font-family: var(--ff-ivy);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  color: var(--preto);
}
.card-claro p {
  font-family: var(--ff-sans);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.card-claro__fecho {
  font-family: var(--ff-serif) !important;
  font-style: italic;
  font-weight: 700;
  font-size: 30px !important;
  line-height: 1.1 !important;
  color: var(--preto);
}
.card-claro__foto {
  width: 432px;
  height: auto;
  object-fit: cover;
  border-radius: 36px;
}

/* ---------- Seção 8 ---------- */
.um-dia {
  width: 100%;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 72px;
  align-items: center;
}
.um-dia__foto {
  width: 100%;
  height: 720px;
  object-fit: cover;
  border-radius: 25px;
}
.um-dia__texto { display: flex; flex-direction: column; gap: 22px; }
.um-dia__texto .texto { font-size: 28px; line-height: 1.15; }

/* ---------- Seção 9 ---------- */
.esperando { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.esperando .paragrafo-leve { font-size: 42px; }
.esperando__lista {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 84px;
  line-height: 1.05;
  color: var(--rosa-texto);
  text-align: center;
}
.secao .card--duplo .card__pergunta { font-size: 44px; line-height: 1.05; }

/* ---------- Fechamento ---------- */
.secao--fechamento { gap: 48px; }
.fechamento__marca img { width: 372px; }
.fechamento__frase {
  max-width: 1000px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 60px;
  line-height: 1.05;
  text-align: center;
}
.fechamento__frase em { color: var(--rosa-texto); }

/* ---------- Botão dourado ---------- */
.cta { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.botao {
  --ouro: linear-gradient(90deg, #fff9ba 0%, #f2d99f 14%, #9e8a61 31%, #e5cd95 47%, #fff9ba 58%, #f2d99f 70%, #9e8a61 82%, #f2d99f 90%, #fff9ba 100%);
  display: inline-block;
  padding: 8px 9px 9px;
  border-radius: 46px;
  border: 1px solid #f2d99f;
  background: var(--ouro);
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.botao span {
  display: block;
  padding: 22px 60px;
  border-radius: 46px;
  border: 1px solid #fff9ba;
  background: var(--ouro);
  box-shadow: 0 4px 12.6px rgba(0, 0, 0, .35);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 29.4px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #242424;
  white-space: nowrap;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.05); }
.selos { width: 262px; }

/* ---------- Decoração ---------- */
.decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bolha {
  position: absolute;
  width: 951px;
  height: 869px;
  border-radius: 50%;
  background: #ea8bb6;
  opacity: .35;
  filter: blur(300px);
}
.marca-dagua {
  position: absolute;
  width: 1381px;
  opacity: .05;
}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1240px) {
  :root { --gap-secoes: 160px; }
  .conteudo { padding-left: var(--margem); padding-right: var(--margem); }
  .hero__conteudo { padding-left: 64px; }
  .card--duplo, .colunas, .um-dia, .card-claro { grid-template-columns: 1fr 1fr; }
  .card-claro__foto { width: 100%; }
  .grade { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Mobile (base Figma: 393px, margem 36px)
   ========================================================= */
@media (max-width: 767px) {
  :root { --gap-secoes: 128px; }

  .topo { height: 65px; gap: 21px; }
  .topo__elas { width: 52px; }
  .topo__divisor { height: 23px; }
  .topo__gpf { width: 167px; }

  .hero {
    min-height: 0;
    align-items: flex-end;
    padding: 360px 0 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 75%, #000b03 100%),
      url("assets/evento.jpg") center top / auto 740px no-repeat;
  }
  .hero__conteudo { padding: 0 var(--margem); }
  .hero__marca img { width: 169px; margin: 0 auto;}
  .hero__titulo { margin-top: 20px; font-size: 40px; text-align: center; max-width: 100%; margin-bottom: 24px; }
  .hero .cta { max-width: 484px; }
  .hero a span { font-size: 15px; }
  .hero .selos { width: 200px; }

  .conteudo { padding: 80px var(--margem) 120px; }
  .secao { gap: 46px; }

  .titulo { font-size: 44px; }
  .titulo--esquerda { text-align: center; }
  .pergunta, .manifesto .pergunta { font-size: 34px; line-height: 1.08; }
  .texto, .texto--grande { font-size: 22px; line-height: 1.15; }
  .paragrafo-leve,
  .manifesto .paragrafo-leve { font-size: 22px; line-height: 1.18; }
  .fecho .paragrafo-leve,
  .esperando .paragrafo-leve { font-size: 24px; }
  .frase-rosa, .fecho .frase-rosa, .temas .frase-rosa { font-size: 28px; }
  .frase-rosa--menor { font-size: 24px; }
  .frase-forte { font-size: 28px; }
  .citacao { font-size: 30px; }

  .card--duplo {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 32px 28px;
  }
  .card__destaque { font-size: 24px; line-height: 1.05; }
  .card__pergunta,
  .secao .card--duplo .card__pergunta { font-size: 28px; }
  .card--duplo .texto { font-size: 20px; }
  .card__coluna { gap: 22px; }

  .colunas { grid-template-columns: 1fr; gap: 46px; }
  .lista-talvez { gap: 20px; }
  .escolhas { padding: 32px 28px 24px; }
  .escolhas__intro { font-size: 24px; margin-bottom: 18px; }
  .escolhas li { font-size: 24px; padding: 14px 0; }

  .pills { gap: 8px; }
  .pills li { padding: 12px 18px; font-size: 20px; }

  .grade { grid-template-columns: 1fr; gap: 12px; }
  .pilar { padding: 28px 28px 32px; gap: 14px; }
  .pilar__num { font-size: 48px; }
  .pilar h3 { font-size: 24px; }
  .pilar p { font-size: 19px; }

  .para-quem { grid-template-columns: 1fr; gap: 34px; }
  .para-quem li { font-size: 22px; }
  .para-quem li::before { width: 40px; margin-bottom: 12px; }

  .card-claro {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
  }
  .card-claro__foto { order: -1; width: 100%; height: 380px; border-radius: 0; }
  .card-claro__texto { padding: 32px 28px 36px; gap: 16px; }
  .card-claro h2 { font-size: 38px; }
  .card-claro p { font-size: 18px; line-height: 1.28; }
  .card-claro__fecho { font-size: 24px !important; }

  /* título → foto → texto, como no Figma mobile */
  .um-dia { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .um-dia__texto { display: contents; }
  .um-dia__texto .titulo { order: -2; margin-bottom: 10px; }
  .um-dia__foto { order: -1; height: 300px; margin-bottom: 10px; }
  .um-dia__texto .texto { font-size: 21px; }

  .esperando__lista { font-size: 44px; }

  .secao--fechamento { gap: 42px; }
  .fechamento__marca img { width: 220px; }
  .fechamento__frase { font-size: 32px; line-height: 1.08; }

  .cta { gap: 16px; }
  .botao { padding: 6px; }
  .botao span { padding: 16px 22px; font-size: 19px; letter-spacing: -0.03em; }
  .selos { width: 210px; }

  .bolha { width: 420px; height: 390px; filter: blur(140px); }
  .marca-dagua { width: 500px; }
}