/* ==========================================================================
   CAROL QUEIROZ · SITE DE CAMPANHA
   Design system copiado da estrutura de joycetrindade.com.br
   Todo o conteúdo é PLACEHOLDER. Troque os tokens abaixo e os textos [ ].
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* cor · amostrada dos arquivos oficiais da campanha */
  --roxo:#5D318B;          /* roxo do banner, cor de fundo forte */
  --roxo-claro:#6E4A98;    /* roxo do coração e do lettering QUEIROZ */
  --roxo-deep:#42215F;     /* sombra dura e hover */
  --roxo-ink:#2B1440;      /* texto sobre fundo claro */
  --lilas:#D8C7EC;         /* roxo lavado, fundo de seção suave */
  --lilas-soft:#EADFF6;
  --amarelo:#FEC504;       /* amarelo do fundo dos banners */
  --ambar:#F4B018;         /* amarelo do lettering CAROL e do 45000 */
  --branco:#FFFFFF;
  --creme:#FFFBF0;         /* off-white quente, puxado do amarelo */
  --creme-quente:#FFF6E0;

  /* papéis */
  --bg:var(--creme);
  /* aliases: o layout de origem tinha turquesa, azul e rosa.
     A marca da Carol só tem roxo, amarelo e branco, então tudo cai neles. */
  --turquesa:var(--amarelo);
  --azul:var(--roxo-claro);
  --rosa:var(--ambar);
  --texto:var(--roxo-ink);
  --sombra-dura:6px 6px 0 var(--roxo-ink);
  --sombra-dura-amarela:8px 8px 0 var(--ambar);
  --sombra-card:0 10px 30px rgba(46,18,89,.12);

  /* tipografia */
  --display:"Anton","Archivo Narrow",Impact,sans-serif;
  --texto-fonte:"Archivo",system-ui,-apple-system,sans-serif;

  /* medidas */
  --container:1240px;
  --gutter:24px;
  --raio:14px;
  --raio-pill:999px;
  --header-h:84px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font-family:var(--texto-fonte);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto é obrigatório: as imagens trazem os atributos width/height
   (que evitam o layout pulando enquanto carregam), e sem isso o CSS muda a
   largura mas o navegador mantém a altura do atributo, esmagando a foto. */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{margin:0;line-height:1.02;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA DO SISTEMA
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
}

/* headline gigante com a sombra dura deslocada, a assinatura do sistema */
.display--stamp{
  color:var(--creme);
  text-shadow:
     .05em .05em 0 var(--roxo-ink),
     .1em  .1em  0 rgba(20,5,40,.28);
}

.condensada{
  font-family:var(--texto-fonte);
  font-variation-settings:"wdth" 70;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.14;
  letter-spacing:.01em;
}

.eyebrow{
  display:inline-block;
  font-family:var(--texto-fonte);
  font-variation-settings:"wdth" 78;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.titulo-secao{
  font-family:var(--display);
  font-size:clamp(2.05rem,5.4vw,3.7rem);
  text-transform:uppercase;
  line-height:1.1;
  letter-spacing:.004em;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.secao{padding-block:clamp(64px,9vw,120px);position:relative}
.secao > .container{position:relative;z-index:2}
.secao--creme{background:var(--creme)}
.secao--creme-quente{background:var(--creme-quente)}
.secao--lilas{background:var(--lilas)}
.secao--roxa{background:var(--roxo);color:var(--creme)}
.secao--flush{padding-block:0}

.grid-2{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.grid-2--esticado{align-items:stretch;gap:0}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------------------
   5. ESPAÇOS RESERVADOS
   Onde a foto ainda não chegou. Bloco neutro e discreto, com a medida
   escrita no meio. Pra usar de verdade, troque a div inteira por:
   <img src="assets/img/arquivo.jpg" alt="descrição" width="..." height="...">
   -------------------------------------------------------------------------- */
.ph{
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  width:100%;
  max-width:100%;
  min-height:200px;
  aspect-ratio:var(--ph-ratio,4/5);
  padding:20px;
  background:#F4F0F7;
  border:1px dashed rgba(43,20,64,.22);
  border-radius:12px;
  color:rgba(43,20,64,.45);
  font-variation-settings:"wdth" 88;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
}
.ph::before{
  content:"";
  width:26px;height:22px;
  border:1.6px solid currentColor;
  border-radius:4px;
  opacity:.6;
  background:
    radial-gradient(circle at 32% 34%, currentColor 0 2px, transparent 2.5px),
    linear-gradient(to top right, transparent 46%, currentColor 46% 62%, transparent 62%);
}
.ph--escuro{
  background:#3A1B55;
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.6);
}
.ph--wide{--ph-ratio:16/9}
.ph--square{--ph-ratio:1/1}
.ph--tall{--ph-ratio:3/4}

/* espaço da logo, no rodapé: mesma altura da logo real */
.ph-logo{
  display:grid;
  place-items:center;
  width:min(100%,280px);
  height:clamp(48px,6vw,60px);
  border:1px dashed rgba(255,255,255,.34);
  border-radius:8px;
  color:rgba(255,255,255,.55);
  font-variation-settings:"wdth" 88;
  font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
}

/* foto em card: borda roxa + bloco amarelo deslocado atrás */
.foto-card{position:relative;isolation:isolate}
.foto-card{margin-right:22px}
@media (min-width:900px){.foto-card{margin-right:0}}
.foto-card > .ph{
  border-radius:var(--raio);
  position:relative;
  z-index:1;
}
.foto-card::after{
  content:"";
  position:absolute;
  inset:22px -22px -22px 22px;
  background:var(--amarelo);
  border-radius:var(--raio);
  z-index:0;
}

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border:2px solid var(--roxo);
  border-radius:var(--raio-pill);
  background:var(--roxo);
  color:var(--creme);
  font-variation-settings:"wdth" 82;
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px)}

.btn--sombra{box-shadow:5px 5px 0 var(--amarelo)}
.btn--sombra:hover,.btn--sombra:focus-visible{box-shadow:8px 8px 0 var(--amarelo)}

.btn--amarelo{
  background:var(--amarelo);
  color:var(--roxo-ink);
  border-color:var(--roxo);
  box-shadow:5px 5px 0 var(--roxo);
}
.btn--amarelo:hover,.btn--amarelo:focus-visible{box-shadow:8px 8px 0 var(--roxo)}

.btn--vazado{background:transparent;color:var(--roxo)}
.btn--vazado:hover{background:var(--roxo);color:var(--creme)}

.btn--bloco{width:100%;justify-content:center}

.link-seta{
  display:inline-flex;align-items:center;gap:8px;
  font-variation-settings:"wdth" 78;
  font-weight:700;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:3px;
  transition:gap .18s ease;
}
.link-seta:hover{gap:14px}

/* --------------------------------------------------------------------------
   7. BALÃO DE FALA (card de proposta e card de mídia)
   -------------------------------------------------------------------------- */
.balao{
  position:relative;
  padding:26px 28px 30px;
  border-radius:6px;
  background:var(--roxo);
  color:var(--creme);
}
.balao::after{
  content:"";
  position:absolute;
  bottom:-22px;left:34px;
  border:11px solid transparent;
  border-top-color:var(--roxo);
  border-right-width:22px;
  border-left-width:0;
}
.balao--azul{background:var(--azul)}
.balao--azul::after{border-top-color:var(--azul)}
.balao--rosa,.balao--amarelo{background:var(--ambar);color:var(--roxo-ink)}
.balao--rosa::after,.balao--amarelo::after{border-top-color:var(--ambar)}
.balao--rosa .balao__icone,.balao--amarelo .balao__icone{background:rgba(43,20,64,.14)}
.balao--rosa a,.balao--amarelo a{color:var(--roxo-deep)}

/* variante vazada, usada na faixa "na mídia".
   O rabinho é feito com dois triângulos: o de trás na cor da borda,
   o da frente na cor do fundo, 3px acima. Dá o contorno aberto. */
.balao--vazado{
  background:transparent;
  color:var(--roxo);
  border:2px solid var(--roxo);
  border-radius:4px;
}
.balao--vazado::after{
  bottom:-26px;
  left:32px;
  z-index:0;
  border-top-color:var(--roxo);
  border-width:13px 26px 13px 0;
}
.balao--vazado::before{
  content:"";
  position:absolute;
  bottom:-20.5px;
  left:34.5px;
  z-index:1;
  border:11px solid transparent;
  border-right-width:21px;
  border-left-width:0;
  border-top-color:var(--bg-balao,var(--creme-quente));
}

.balao__titulo{
  font-variation-settings:"wdth" 74;
  font-weight:700;
  font-size:clamp(1rem,1.6vw,1.16rem);
  text-transform:uppercase;
  line-height:1.16;
  margin:0;
}
.balao__fonte{
  margin:12px 0 0;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.72;
}
.balao__conteudo{display:flex;align-items:flex-start;gap:16px}
.balao__icone{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.16);
  margin-bottom:14px;
  flex:none;
}
.balao__icone svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

.grade-baloes{
  display:grid;
  gap:46px 26px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
/* propostas ficam em 2 colunas largas, como no layout de referência */
.grade-baloes--duplas{grid-template-columns:1fr}
@media (min-width:820px){
  .grade-baloes--duplas{grid-template-columns:1fr 1fr}
}

/* --------------------------------------------------------------------------
   8. HEADER
   Fundo claro porque a logo oficial (CAROL âmbar + QUEIROZ roxo) só tem
   contraste sobre claro. A versão branca da logo fica pro rodapé escuro.
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--branco);
  color:var(--roxo-ink);
  border-bottom:3px solid var(--amarelo);
}
.header__inner{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:24px;
  justify-content:space-between;
}

.logo{display:block;line-height:0;text-decoration:none;flex:none}
.logo img{height:clamp(44px,6vw,58px);width:auto}

.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-variation-settings:"wdth" 80;
  font-weight:600;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;
  color:var(--roxo);
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.nav a:hover{border-bottom-color:var(--amarelo);color:var(--roxo-deep)}

.sociais{display:flex;align-items:center;gap:9px}
.sociais a{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1.6px solid currentColor;
  border-radius:50%;
  color:var(--roxo);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.sociais a:hover{background:var(--roxo);border-color:var(--roxo);color:var(--branco)}
.sociais svg{width:16px;height:16px;fill:currentColor}

.menu-btn{
  display:none;
  width:44px;height:44px;
  border:1.6px solid var(--roxo);
  border-radius:10px;
  background:transparent;color:var(--roxo);
  cursor:pointer;
}
.menu-btn span{
  display:block;width:20px;height:2px;margin:4px auto;
  background:currentColor;transition:transform .22s ease,opacity .22s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1020px){
  .nav,.header .sociais{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:4px;
    padding:18px var(--gutter) 24px;
    background:var(--branco);
    border-bottom:3px solid var(--amarelo);
    box-shadow:0 18px 30px rgba(43,20,64,.14);
  }
  .header.aberto .nav{display:flex}
  .header.aberto .sociais{display:flex;flex-direction:row;padding-top:0}
  .nav a{font-size:17px;padding:9px 0}
  .menu-btn{display:block}
}

/* --------------------------------------------------------------------------
   9. HERO
   Reproduz a peça oficial: chão amarelo, onda roxa embaixo e o coração
   da marca gigante e lavado no canto esquerdo.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--amarelo);
  overflow:hidden;
  isolation:isolate;
}

/* a onda roxa que corta o rodapé do bloco, como no banner */
.hero__forma{
  position:absolute;
  left:-5%;right:-5%;bottom:0;
  height:26%;
  background:var(--roxo);
  border-radius:60% 40% 0 0 / 100% 80% 0 0;
  z-index:0;
}

/* o coração da marca, enorme e lavado, atrás de tudo */
.hero__coracao{
  position:absolute;
  left:-11%;top:-6%;
  width:min(40%,460px);
  opacity:.13;
  mix-blend-mode:multiply;
  z-index:0;
  pointer-events:none;
}

.hero__inner{
  position:relative;z-index:2;
  display:grid;
  gap:clamp(28px,4vw,56px);
  align-items:center;
  /* o rodapé generoso mantém os botões acima da onda roxa */
  padding-block:clamp(44px,5vw,72px) clamp(104px,11vw,168px);
}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.02fr .98fr}
}

.hero__eyebrow{color:var(--roxo);margin-bottom:16px}

.hero__titulo{
  font-family:var(--display);
  font-size:clamp(2.5rem,7.2vw,4.6rem);
  line-height:.98;
  text-transform:uppercase;
  color:var(--roxo);
  text-shadow:.035em .035em 0 rgba(255,255,255,.55);
}
.hero__titulo em{
  display:block;
  font-style:normal;
  color:var(--branco);
  text-shadow:.035em .035em 0 var(--roxo-deep);
}

.hero__linha{
  margin:22px 0 0;
  max-width:46ch;
  font-size:clamp(1rem,2vw,1.14rem);
  color:var(--roxo-ink);
}

/* a faixa do número, redesenhada em CSS a partir do selo da logo */
.faixa-numero{
  display:inline-block;
  margin-top:28px;
  padding:12px 30px 14px;
  background:linear-gradient(180deg,var(--roxo-claro) 0%,var(--roxo-deep) 100%);
  border-radius:10px;
  box-shadow:0 10px 0 -2px rgba(43,20,64,.35);
  text-align:center;
}
.faixa-numero__cargo{
  display:block;
  font-variation-settings:"wdth" 84;
  font-weight:700;font-size:clamp(12px,1.5vw,15px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--branco);
}
.faixa-numero__digitos{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,6.4vw,4rem);
  line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(180deg,var(--amarelo) 0%,var(--ambar) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.hero__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.hero__arte{position:relative;z-index:2}
.hero__arte img{
  width:100%;
  max-width:min(100%,540px);
  margin-inline:auto;
  border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(43,20,64,.5);
}

@media (max-width:899px){
  .hero__forma{height:22%}
  .hero__coracao{width:64%;left:-20%;top:auto;bottom:4%;opacity:.1}
}

/* --------------------------------------------------------------------------
   10. FORMAS DECORATIVAS
   -------------------------------------------------------------------------- */
.forma{position:absolute;z-index:0;pointer-events:none}
.forma--meia-lua{
  width:150px;height:300px;
  background:var(--amarelo);
  border-radius:0 300px 300px 0;
  left:0;top:20%;
}
.forma--chevron{
  width:110px;height:190px;
  background:var(--roxo);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);
  left:0;top:34%;
}
.forma--estrela{
  width:130px;height:130px;
  background:var(--rosa);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
@media (max-width:899px){.forma{display:none}}

/* --------------------------------------------------------------------------
   11. NÚMEROS
   -------------------------------------------------------------------------- */
.numeros{
  display:grid;
  gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  text-align:center;
}
.numero__valor{
  font-family:var(--display);
  font-size:clamp(2.8rem,6.5vw,4.4rem);
  color:var(--amarelo);
  line-height:.9;
  text-shadow:.04em .04em 0 var(--roxo-ink);
}
.numero__rotulo{
  margin-top:12px;
  font-variation-settings:"wdth" 78;
  font-weight:700;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.3;
}

/* --------------------------------------------------------------------------
   12. BLOCOS DE COR (mosaico)
   -------------------------------------------------------------------------- */
.mosaico{display:grid;grid-template-columns:1fr}
@media (min-width:900px){.mosaico{grid-template-columns:1fr 1fr}}
.mosaico__bloco{
  padding:clamp(36px,5vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  min-height:280px;
}
.mosaico__bloco--lilas{background:var(--lilas)}
.mosaico__bloco--rosa{background:var(--ambar);color:var(--roxo-ink)}
.mosaico__bloco--creme{background:var(--creme)}
.mosaico__bloco--roxo{background:var(--roxo);color:var(--creme)}
.mosaico__titulo{
  font-variation-settings:"wdth" 72;
  font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  text-transform:uppercase;
  line-height:1.12;
  color:var(--azul);
}
.mosaico__bloco--rosa .mosaico__titulo{color:var(--roxo-ink)}
.mosaico__bloco--roxo .mosaico__titulo{color:var(--amarelo)}
.mosaico__bloco--lilas .mosaico__titulo{color:var(--roxo)}

/* --------------------------------------------------------------------------
   13. VÍDEO
   -------------------------------------------------------------------------- */
.video{position:relative}
.video .ph{
  --ph-ratio:21/9;
  min-height:240px;
  /* o botão de play mora no centro, então o rótulo desce */
  align-content:end;
  padding-bottom:30px;
}
.video .ph::before{display:none}
.video__play{
  position:absolute;inset:0;margin:auto;
  width:88px;height:88px;
  display:grid;place-items:center;
  border:2.5px solid var(--creme);
  border-radius:50%;
  background:rgba(46,18,89,.35);
  color:var(--creme);
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.video__play:hover{transform:scale(1.07);background:var(--roxo)}
.video__play svg{width:30px;height:30px;fill:currentColor;margin-left:4px}

/* --------------------------------------------------------------------------
   14. FORMULÁRIO
   -------------------------------------------------------------------------- */
.form{display:grid;gap:14px}
.form__linha{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.form__linha{grid-template-columns:1fr}}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"]{
  width:100%;
  padding:15px 22px;
  border:2px solid var(--roxo);
  border-radius:var(--raio-pill);
  background:transparent;
  color:var(--texto);
  font-family:inherit;font-size:15px;
}
.form input::placeholder{
  color:rgba(46,18,89,.5);
  font-variation-settings:"wdth" 82;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;
}
.form__consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12.5px;line-height:1.45;
}
.form__consent input{margin-top:3px;accent-color:var(--roxo);flex:none}

.pilha-botoes{display:grid;gap:16px;margin-top:26px;max-width:340px}

/* bloco que emoldura o banner vertical oficial */
.bloco-banner{
  position:relative;
  background:var(--amarelo);
  display:grid;place-items:center;
  padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px);
  overflow:hidden;
}
.bloco-banner::before{
  content:"";
  position:absolute;left:-10%;right:-10%;bottom:-14%;
  height:46%;
  background:var(--roxo);
  border-radius:60% 40% 0 0 / 100% 80% 0 0;
}
.bloco-banner img{
  position:relative;
  width:auto;
  max-width:100%;
  max-height:min(78vh,620px);
  border-radius:16px;
  box-shadow:0 22px 50px -16px rgba(43,20,64,.55);
}

/* --------------------------------------------------------------------------
   15. FAIXA HASHTAG
   -------------------------------------------------------------------------- */
.faixa-tag{
  position:relative;
  background:var(--lilas);
  padding-block:clamp(40px,6vw,80px);
  overflow:hidden;
}
.faixa-tag__coracao{
  position:absolute;
  right:-3%;top:50%;
  transform:translateY(-50%);
  width:min(30%,260px);
  opacity:.35;
  pointer-events:none;
}
.faixa-tag .container{position:relative;z-index:1}
.faixa-tag__texto{
  font-family:var(--display);
  font-size:clamp(2.4rem,9vw,6rem);
  text-transform:uppercase;
  color:var(--roxo);
  line-height:.9;
  white-space:nowrap;
}
.faixa-tag__texto span{color:var(--roxo-deep)}

/* --------------------------------------------------------------------------
   16. SELO (rótulo com sombra dura, tipo etiqueta)
   -------------------------------------------------------------------------- */
.selo{
  display:inline-block;
  padding:8px 18px;
  background:var(--roxo);
  color:var(--creme);
  border-radius:6px;
  box-shadow:4px 4px 0 var(--amarelo);
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.4rem);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.selo em{color:var(--amarelo);font-style:normal}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
/* fundo mais escuro que o roxo padrão: na versão branca da logo o
   "QUEIROZ" continua roxo, e sobre o roxo claro ele desaparecia. */
.footer{background:var(--roxo-deep);color:var(--creme)}
.footer__foto{position:relative}
.footer__foto .ph{
  --ph-ratio:24/9;
  min-height:240px;
  align-content:start;
  padding-top:34px;
}
.footer__frase{
  position:absolute;left:0;right:0;bottom:8%;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(2rem,7vw,4.6rem);
  text-transform:uppercase;
  color:var(--amarelo);
  text-shadow:.045em .045em 0 var(--roxo-ink);
  padding-inline:var(--gutter);
}
.footer__base{
  padding-block:44px;
  display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;
}
.footer__marca{display:grid;gap:14px}
.footer__marca img{height:clamp(42px,5vw,54px);width:auto}
.footer__slogan{
  margin:0;
  font-variation-settings:"wdth" 78;
  font-weight:700;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;max-width:32ch;line-height:1.35;
  color:var(--amarelo);
}
.footer__legal{font-size:12.5px;opacity:.7}
.footer .sociais a{color:var(--branco);border-color:rgba(255,255,255,.6)}
.footer .sociais a:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--roxo-ink)}

/* --------------------------------------------------------------------------
   18. REVELAR NO SCROLL
   -------------------------------------------------------------------------- */
/* o estado escondido depende da classe .js na raiz: sem JavaScript, ou se o
   script falhar, o conteúdo aparece normalmente em vez de sumir. */
.js .revelar{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .revelar.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revelar{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}