/* ==========================================================================
   identidade-offer.css — cópia de identidade-v919.css, feita em 11/09/2026.
   Veste APENAS offer.html. Editar aqui não mexe na v919, e vice-versa.
   O pitch.css e o oferta.css também viraram cópia: eram os dois últimos
   arquivos que a v919 ainda dividia com as outras páginas, e enquanto
   dividisse não dava para mexer só nesta.
========================================================================== */
/* ==========================================================================
   PRODUTO 2 — cópia de identidade-v918.css, feita em 08/09/2026.
   É ela que dá à v919 o hero da v14: tarja vermelha, linha de apoio em
   texto vermelho (não o selo azul da v916) e manchete centralizada.
   Veste APENAS a v919.html. Editar aqui não mexe na v918, e vice-versa.
   Editar aqui NÃO afeta as páginas do produto 1, e editar as folhas originais
   em assets/css/ NÃO afeta as do produto 2. As duas árvores seguem separadas
   de propósito — é produto diferente.
   Não há url() em nenhuma delas, então a mudança de pasta é segura.
========================================================================== */

/* ==========================================================================
   STYLE-V3.CSS — identidade visual da versão 3
   Carregado DEPOIS do style.css, em v3.html apenas. Camada de sobreposição,
   não folha completa. NÃO carrega nada da V2: cantoneira, alinhamento à
   esquerda e Anton no corpo são exclusivos de lá.

   Referência visual: capa de tabloide alemão — barra de seções no topo,
   linha de apoio em vermelho ANTES da manchete, manchete enorme e preta,
   tudo centralizado, condensada e pesada.

   ATENÇÃO à especificidade: o pitch.css entra DEPOIS deste arquivo (ele é
   não-blocante). Para sobrepor algo do bloco de oferta é preciso seletor
   mais forte, tipo .oferta .oferta__titulo.

   ÍNDICE
     [v3.1] Tipografia e cores
     [v3.2] Cabeçalho e marca
     [v3.3] Tarja da editoria
     [v3.5] Linha de apoio e manchete
     [v3.6] Rodapé
     [v3.7] Responsivo
========================================================================== */

/* ------------------------------------------------- [v3.1] Tipografia --- */
:root{
  --v3-vermelho:#D40E14;
  --v3-tinta:#111111;
  --v3-tinta-2:#4A4F55;
  --v3-linha:#DFE2E6;
  --v3-rodape:#1A1D24;
  --sans:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --v3-titulo:"Fira Sans Condensed","Fira Sans",Arial,sans-serif;
}

body{
  background:#fff;
  color:var(--v3-tinta);
  font-family:var(--sans);
}

/* --------------------------------------------- [v3.2] Cabeçalho --- */
.masthead{
  background:#fff;
  border-bottom:0;
  color:var(--v3-tinta);
}
.masthead__top{ padding-block:10px; align-items:center; }
.brand{ text-decoration:none; }
/* Logo em imagem.
   O tamanho é comandado pela ALTURA; a largura acompanha sozinha, então
   qualquer proporção de arquivo funciona sem distorcer.
   max-width impede que um logo muito largo empurre os ícones para fora. */
/* Seletor precisa ser MAIS FORTE que o .brand img do style.css, que fixa
   30x30 para o logo antigo. .brand img vale (0,1,1); .brand__logo sozinho
   vale (0,1,0) e perderia sempre, em qualquer ordem de arquivo. */
.brand img.brand__logo{
  display:block;
  height:72px;
  width:auto;
  max-width:62vw;
}

.masthead__icones{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  pointer-events:none;   /* decorativos, como na V2 */
}
.masthead__icone{ display:block; width:24px; height:24px; color:var(--v3-tinta); }
.masthead__icone svg{ width:100%; height:100%; display:block; }

/* --------------------------------------- [v3.3] Tarja da editoria --- */
/* Faixa larga em vermelho com o nome da editoria, e abaixo uma tira mais
   escura com texto correndo em laço. Substitui o menu e o breadcrumb. */
.tarja{ background:var(--v3-vermelho); color:#fff; }

.tarja__titulo{
  font-family:var(--v3-titulo);
  font-weight:800;
  font-size:clamp(26px,1rem + 2.6vw,40px);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:22px 16px;       /* o respiro pedido */
  line-height:1;
}

/* Tira de baixo: mesmo vermelho, escurecido, para separar sem virar
   outra cor. overflow:hidden é o que recorta o trilho que corre. */
.tarja__faixa{
  background:rgba(0,0,0,.22);
  overflow:hidden;
  padding:11px 0;
}
.tarja__trilho{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation:deslizaTarja var(--tarja-tempo, 28s) linear infinite;
}
.tarja__item{
  font-family:var(--v3-titulo);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(255,255,255,.95);
}
.tarja__sep{ color:rgba(255,255,255,.5); font-size:13px; }

/* O deslocamento de uma volta é UMA cópia do conteúdo mais o vão que a
   separa da cópia seguinte — nunca "metade do trilho".

   Por que não -50%: metade só fecha o laço quando existem exatamente duas
   cópias. Em tela larga duas não bastam para cobrir a faixa, e o trilho
   precisa de três, quatro, às vezes cinco. Aí metade deixa de coincidir
   com uma volta e o fim da faixa aparece vazio. Era esse o buraco vermelho.

   Quem mede a volta e conta quantas cópias cabem é o duplicarTrilho() na
   seção [08], que escreve --tarja-passo e --tarja-tempo aqui. O tempo
   acompanha a distância para a velocidade não mudar com o tamanho da tela.
   Os valores de reserva valem só se o JS não rodar. */
@keyframes deslizaTarja{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(var(--tarja-passo, 50%) * -1)); }
}
@media (hover:hover) and (pointer:fine){
  .tarja:hover .tarja__trilho{ animation-play-state:paused; }
}

@media (prefers-reduced-motion:reduce){
  .tarja__trilho{ animation:none; }
}

/* --------------------------- [v3.5] Linha de apoio e manchete --- */
/* A ordem no v3.html já põe a linha de apoio primeiro. Aqui só o peso.
   Ela é o "kicker" vermelho da capa: menor que a manchete, centralizada. */
.standfirst{
  font-family:var(--v3-titulo);
  font-weight:700;
  font-size:clamp(17px,1rem + .7vw,23px);
  line-height:1.25;
  color:var(--v3-vermelho);
  text-align:center;
  margin:18px 0 6px;
}

/* Manchete: o elemento mais pesado da página inteira, de propósito. */
.article__inner h1{
  font-family:var(--v3-titulo);
  font-weight:800;
  font-size:clamp(28px,1rem + 3.6vw,54px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--v3-tinta);
  margin:0 0 20px;
}

/* --------------------------------------------------- [v3.6] Rodapé --- */
.site-footer{
  background:var(--v3-rodape);
  color:rgba(255,255,255,.72);
}
.site-footer a{ color:rgba(255,255,255,.88); }
.site-footer .disclaimer{ color:rgba(255,255,255,.5); }

/* ----------------------------------------------- [v3.7] Responsivo --- */
@media (max-width:760px){
  .brand img.brand__logo{ height:56px; max-width:58vw; }
  .masthead__icones{ gap:14px; }
  .masthead__icone{ width:22px; height:22px; }
  .tarja__titulo{ padding:17px 16px; }
  .standfirst{ margin-top:14px; }
}


/* ==========================================================================
   [H] HERO — molde do gelatinmeister.com/fr, refeito em 11/09/2026.
   Vive FORA do #pitch, então não passa pelo escopo .gelatin. Os nomes daqui
   são todos .hero-fr__* justamente para não esbarrar em nada da oferta.
   O rosa é o mesmo #E91E7A que os cartões já usam.
========================================================================== */

.hero-fr{
  position: relative;
  overflow: hidden;
  padding: 64px 0 96px;
  /* Clareia de cima para baixo até o rosa em que a oferta continua. */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F5 60%, #FCE4EC 100%);
}

/* Onda branca que emenda com a seção de baixo. SVG em data: URI — nenhuma
   requisição a mais, e escala junto com a largura da tela. */
.hero-fr::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;              /* cobre a linha de meio pixel que aparece no zoom */
  width: 100%;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23FFFFFF' d='M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,120L0,120Z'/%3E%3C/svg%3E") center bottom / cover no-repeat;
  z-index: 2;
  pointer-events: none;
}

.hero-fr__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-fr__titulo{
  margin: 0 0 22px;
  font-family: Merriweather, Georgia, "Times New Roman", serif;
  /* clamp em vez de três breakpoints: o tamanho acompanha a largura de forma
     contínua, sem degraus no meio do caminho. */
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 400;
  line-height: 1.15;
  color: #1A1A1A;
}
.hero-fr__destaque{ color: #E91E7A; }
.hero-fr__marca{ color: #2D1B25; }

.hero-fr__sub{
  max-width: 520px;
  margin: 0 0 32px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.75;
  color: #4A4A4A;
}

.hero-fr__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  border-radius: 50px;
  background: linear-gradient(135deg, #E91E7A 0%, #C2185B 100%);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(233,30,122,.4);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
  animation: heroPulso 2s ease infinite;
}
.hero-fr__cta:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(233,30,122,.55);
}
.hero-fr__carrinho{ width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

@keyframes heroPulso{
  0%, 100% { box-shadow: 0 8px 30px rgba(233,30,122,.40); }
  50%      { box-shadow: 0 8px 45px rgba(233,30,122,.65); }
}

/* Quem pediu menos animação no sistema não leva pulso nem salto no hover. */
@media (prefers-reduced-motion: reduce){
  .hero-fr__cta{ animation: none; transition: none; }
  .hero-fr__cta:hover{ transform: none; }
}

/* ENQUADRAMENTO DA IMAGEM DO HERO
   O arquivo é deitado: 1120x654, com o frasco centrado e a fita métrica
   se abrindo para os dois lados. Se ele apenas encolhesse junto com a tela,
   no celular viraria uma tira de ~190px de altura e o frasco — que é o
   produto — ficaria minúsculo no meio dela.

   Por isso a caixa tem aspect-ratio próprio por faixa de tela e o
   object-fit decide o que fazer com a sobra:
     • computador  — contain, proporção natural: nada é cortado;
     • tablet      — cover a 3/2: as pontas da fita começam a sair;
     • celular     — cover a 5/4: corta mais fita, o frasco cresce.
   Como o frasco está no centro do arquivo, o corte simétrico do cover
   (object-position padrão) nunca encosta nele.

   O drop-shadow só vale onde NÃO há corte. Com cover, o filtro passaria a
   contornar as bordas retas do recorte e desenharia a sombra de um
   retângulo, em vez de seguir o contorno do frasco. */
.hero-fr__imagem{ text-align: center; }
.hero-fr__imagem img{
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1120 / 654;
  object-fit: contain;
  /* margin-inline:auto, e não só o text-align:center do pai: uma folha de
     base desta página declara img{display:block}, e elemento de bloco não
     obedece a text-align — ficava encostado na esquerda no celular. */
  margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(139,69,112,.22));
}

/* Uma coluna: o frasco sobe, o texto desce. */
@media (max-width: 900px){
  .hero-fr{ padding: 28px 0 72px; }
  .hero-fr__inner{
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .hero-fr__imagem{ order: -1; }
  .hero-fr__imagem img{
    max-width: 520px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: none;          /* ver o comentário da regra base */
  }
  .hero-fr__sub{ margin-left: auto; margin-right: auto; }
  .hero-fr__cta{ width: 100%; max-width: 320px; }
}


/* Celular: a imagem vai de BORDA A BORDA.
   O .hero-fr__inner tem padding lateral de 20px, e a imagem precisa passar
   por cima dele. A largura sai de margin-inline negativa do MESMO tamanho
   do padding — e não de 100vw, que inclui a barra de rolagem e por isso
   estoura para fora da página, criando scroll lateral.

   Com a largura inteira o corte lateral do cover diminui sozinho: sobra
   mais espaço, então menos fita é descartada. */
@media (max-width: 600px){
  .hero-fr__imagem{
    margin-inline: -20px;
  }
  .hero-fr__imagem img{
    width: 100%;
    max-width: none;
    aspect-ratio: 5 / 4;
  }
}

@media (max-width: 480px){
  .hero-fr::after{ height: 54px; }
  .hero-fr__cta{ padding: 16px 24px; }
}


/* ==========================================================================
   [C] CABEÇALHO DA MARCA — molde do gelatinmeister.com/fr, 11/09/2026.
   Fora do #pitch, como o hero: nomes .cab-fr__* para não esbarrar no
   .masthead das outras versões nem em nada dentro do escopo .gelatin.
========================================================================== */

.cab-fr{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,.97);
  /* backdrop-filter só muda algo onde houver conteúdo passando por baixo;
     onde não há suporte, o fundo 97% branco já resolve sozinho. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212,99,143,.12);
}

.cab-fr__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* A logo é medida pela LARGURA, não pela altura. O arquivo é uma faixa de
   840x70 — 12:1 —, e presa pela altura ela fica larga demais: a 22px de
   alto dava 264px e empurrava o botão para fora da tela no celular.

   O encolhimento fica por conta do flex (flex:0 1 auto + min-width:0), não
   de um número por breakpoint: se o espaço apertar mais do que eu previ,
   ela cede sozinha. O botão é quem tem flex-shrink:0 — ele nunca some. */
.cab-fr__logo{
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
}
.cab-fr__logo img{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.cab-fr__logo:hover img{ opacity: .85; }

.cab-fr__menu{ display: flex; align-items: center; gap: 4px; }
.cab-fr__menu a{
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #4A4A4A;
  text-decoration: none;
  transition: color .3s cubic-bezier(.4,0,.2,1);
}
/* Risquinho que cresce do meio para fora no hover, como no original. */
.cab-fr__menu a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: #E91E7A;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.cab-fr__menu a:hover{ color: #E91E7A; }
.cab-fr__menu a:hover::after{ width: 60%; }

.cab-fr__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;   /* ver o comentário da logo: quem cede é ela */
  padding: 10px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, #E91E7A 0%, #C2185B 100%);
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(212,99,143,.3);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.cab-fr__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212,99,143,.4);
}
.cab-fr__carrinho{ width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce){
  .cab-fr__cta{ transition: none; }
  .cab-fr__cta:hover{ transform: none; }
  .cab-fr__menu a::after{ transition: none; }
}

/* O hero começa embaixo do cabeçalho, que é fixo e não ocupa espaço. */
.hero-fr{ padding-top: 100px; }

@media (max-width: 900px){
  /* Some o menu, fica logo + botão. Ver o porquê no comentário do HTML. */
  .cab-fr__menu{ display: none; }
  .cab-fr__inner{ padding: 10px 16px; }
  /* A logo é uma faixa de 840x70 — 12:1. Presa pela ALTURA ela dava 264px
     de largura e, somada ao botão, estourava os 375px do celular: o
     Commander saía pela direita. Presa pela largura, ela encolhe junto.
     150 + 146 (botão) + 16 (vão) + 32 (padding) = 344, cabe. */
  .cab-fr__logo{ max-width: 240px; }
  .cab-fr__cta{ padding: 9px 16px; font-size: 12.5px; gap: 6px; }
  .hero-fr{ padding-top: 72px; }
}

/* Telas bem estreitas (320px e abaixo, e navegadores embutidos em painel).
   Aqui os 150px fixos da logo voltam a estourar, então ela passa a medir
   em PORCENTAGEM da barra e o botão encolhe junto. */
@media (max-width: 400px){
  .cab-fr__inner{ gap: 10px; padding: 10px 12px; }
  .cab-fr__logo{ max-width: 170px; }
  .cab-fr__cta{ padding: 8px 12px; font-size: 11.5px; }
  .cab-fr__carrinho{ width: 12px; height: 12px; }
}

/* Rolagem suave para as âncoras do menu, com o cabeçalho fixo descontado:
   sem o scroll-padding, o topo da seção pararia atrás dele. */
html{ scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }