/* ==========================================================================
   STORYTELLING DA HOME SEM LOGIN — 5 cenas (texto + imagem, alternando os lados)
   Só aparece dentro de .rocco-landing (visitante). Para colocar uma imagem real,
   as imagens ficam em /assets/img/historia-N-*.webp (fundo transparente).
   ========================================================================== */
.story { max-width:none; margin:0; padding:0; }
.story-cena { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding:72px max(32px, calc((100% - 1136px) / 2)); background:var(--faixa-fundo); color:var(--faixa-texto); }
.story-cena:nth-child(even) .story-img { order:-1; }  /* cenas 2 e 4: imagem à esquerda */

.story-num { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.story-num::before { content:""; width:48px; height:3px; border-radius:3px; }
.story-texto h2 { margin:0; font-size:clamp(32px,3.9vw,54px); line-height:1.04; font-weight:800; letter-spacing:-.04em; }
.story-texto h2 em { font-style:normal; }
.story-texto p { max-width:480px; margin:18px 0 0; font-size:clamp(17px,1.35vw,21px); line-height:1.45; }
.story-cta { display:inline-flex; align-items:center; justify-content:center; min-height:56px; margin-top:28px; padding:10px 32px; border-radius:999px; font:800 16px 'Manrope','Inter',sans-serif; cursor:pointer; box-shadow:0 8px 20px rgba(35,80,72,.22); }

/* FAIXAS DE COR: cada cena ocupa a largura toda, com uma cor da paleta (bege, mostarda, verde, terracota, mostarda clara) */
.story-cena { --faixa-fundo:#F1E7DA; --faixa-texto:#4A2117; --faixa-destaque:#B5532F; --faixa-sub:#718080; --faixa-botao:#235048; --faixa-botao-texto:#fff; }
.story-cena:nth-child(1) { --faixa-fundo:#F1E7DA; }
.story-cena:nth-child(2) { --faixa-fundo:#E7B65C; --faixa-destaque:#235048; --faixa-num:#4A2117; --faixa-sub:#4A2117; }
.story-cena:nth-child(3) { --faixa-fundo:#235048; --faixa-texto:#F5EFE6; --faixa-destaque:#E7B65C; --faixa-sub:#F1E7DA; }
.story-cena:nth-child(4) { --faixa-fundo:#B5532F; --faixa-texto:#FFF8F0; --faixa-destaque:#F5D88F; --faixa-sub:#FBEBDD; }
.story-cena:nth-child(5) { --faixa-fundo:#F5D88F; --faixa-destaque:#B5532F; --faixa-num:#4A2117; --faixa-sub:#4A2117; }
.story-num { color:var(--faixa-num, var(--faixa-destaque)); }
.story-num::before { background:var(--faixa-destaque); }
.story-texto h2 { color:var(--faixa-texto); }
.story-texto h2 em { color:var(--faixa-destaque); }
.story-texto p { color:var(--faixa-sub); }
.story-cta { border:0; background:var(--faixa-botao); color:var(--faixa-botao-texto); }

/* Imagem da cena (.story-img-vazio = espaço reservado, só aparece se a cena estiver sem imagem) */
.story-img { display:flex; align-items:center; justify-content:center; margin:0; }
.story-img img { display:block; width:auto; max-width:100%; height:auto; max-height:480px; object-fit:contain; }  /* PNG/WebP transparente: sem caixa, sem corte */
.story-img-vazio { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; aspect-ratio:4/3; padding:24px; border:3px dashed rgba(35,80,72,.35); border-radius:28px; background:rgba(35,80,72,.07); color:#235048; text-align:center; }
.story-img-vazio span { font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.story-img-vazio small { max-width:280px; color:#5A524C; font-size:14px; line-height:1.4; }

/* Aparece suavemente ao rolar (só liga se o JS carregou) */
.story-js .story-cena > * { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.story-js .story-cena.story-visivel > * { opacity:1; transform:none; }

@media (max-width:760px) {
  .story-cena { grid-template-columns:1fr; gap:24px; padding:44px 20px; }
  .story-cena:nth-child(even) .story-img { order:0; }   /* no celular: sempre texto em cima, imagem embaixo */
  .story-texto h2 { font-size:clamp(30px,8.4vw,38px); }
  .story-img-vazio { border-radius:22px; }
  .story-img img { max-height:340px; }
  .story-cta { width:100%; }
}