/* CHINELATTO — Reels (carrossel scroll-snap + facade de vídeo) */
.reels-sec{margin:38px 0}
.reels-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.reels-head-left{display:flex;align-items:center;gap:11px;min-width:0}
.reels-ico{flex-shrink:0;display:flex;line-height:0;filter:drop-shadow(0 3px 6px rgba(200,24,30,.28))}
.reels-titulo{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.6rem;margin:0;color:var(--text,#111)}
.reels-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.reels-pill{border:1px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:var(--text-mid,#555);
  padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.reels-pill:hover{border-color:#C8181E;color:#C8181E}
.reels-pill.active{background:#C8181E;border-color:#C8181E;color:#fff}
/* Contador "N / total" (qual vídeo estamos) */
.reels-contador{font-family:'DM Sans',system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--text-mid,#666);font-variant-numeric:tabular-nums;
  background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:99px;padding:3px 11px;line-height:1.6;white-space:nowrap;flex-shrink:0}
/* Setas laterais (indicam que é um carrossel) */
.reels-viewport{position:relative}
.reels-arrow{position:absolute;top:37%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:var(--text,#111);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding-bottom:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);transition:all .15s}
.reels-arrow:hover{border-color:#C8181E;color:#C8181E;box-shadow:0 6px 18px rgba(200,24,30,.22)}
.reels-arrow-prev{left:4px}
.reels-arrow-next{right:4px}
.reels-arrow:disabled{opacity:.3;cursor:default;box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* Some com as setas enquanto um vídeo estiver tocando (não poluir a reprodução) */
.reels-sec.reels-tocando .reels-arrow{opacity:0;pointer-events:none}
/* No mobile as setas continuam (affordance de carrossel), um pouco maiores p/ o toque */
@media(max-width:600px){.reels-arrow{width:44px;height:44px;font-size:24px}}

/* Fileira horizontal com scroll-snap (feel "TikTok") */
.reels-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.reels-track::-webkit-scrollbar{height:8px}
.reels-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:8px}

.reel-card{flex:0 0 auto;width:230px;scroll-snap-align:start;display:flex;flex-direction:column;transition:transform .18s ease}
.reel-card:hover{transform:translateY(-4px)}
.reel-player{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#000;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.14);transition:box-shadow .18s ease}
/* Hover: anel vermelho igual ao contorno dos cards de máquina */
.reel-card:hover .reel-player{box-shadow:0 0 0 2px var(--accent,#C8181E), 0 12px 30px rgba(0,0,0,.24)}
.reel-poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.reel-player:hover .reel-poster{transform:scale(1.04)}
.reel-poster-vazio{display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff;opacity:.5}
/* Vídeo (facade) sobrepõe o player inteiro — sem position:absolute ele empilha
   ABAIXO do poster e é cortado pelo overflow:hidden (só toca o áudio). */
.reel-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;z-index:2}
.reel-player.playing .reel-poster{visibility:hidden}
/* Em tela cheia, o vídeo vertical deve caber INTEIRO (letterbox), não ser
   cortado — object-fit:cover cortaria topo/base numa tela landscape. */
.reel-player video:fullscreen{object-fit:contain;background:#000}
.reel-player video:-webkit-full-screen{object-fit:contain;background:#000}

/* Botão play (facade) */
.reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .15s}
.reel-play::before{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.reel-player:hover .reel-play{background:#C8181E}
.reel-player.playing .reel-play{display:none}

/* Badge da linha de produto: topo (texto inteiro). Data: rodapé direito (sem conflito) */
/* Padronizada com a .badge-linha dos cards de destaque (mesma tipografia/forma);
   fundo opaco + sombra só porque aqui fica SOBRE o vídeo (legibilidade). */
.reel-linha{position:absolute;top:8px;left:8px;max-width:calc(100% - 16px);z-index:2;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.05);color:var(--text-mid,#666);
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:4px;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.reel-data{position:absolute;bottom:8px;right:8px;z-index:2;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;pointer-events:none}

/* Card padronizado: legenda de 2 linhas + "ver mais", social SEMPRE no rodapé */
.reel-cap{padding:10px 2px 0;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.reel-tit{font-size:13.5px;font-weight:700;line-height:1.3;margin:0;color:var(--text,#111);
  min-height:3.9em;text-align:justify;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.reel-leg{font-size:12px;color:var(--text-mid,#666);line-height:1.5;margin:4px 0 0;
  text-align:justify;hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Expandida (ver mais): mostra parágrafos (quebras \n) por inteiro */
.reel-leg.aberta{-webkit-line-clamp:unset;overflow:visible;white-space:pre-line}
.reel-vermais{display:none;align-self:flex-start;background:none;border:0;padding:3px 0 0;
  color:var(--text-mid,#666);font-size:11.5px;font-weight:600;cursor:pointer}
.reel-vermais:hover{color:#C8181E}
/* Rodapé do card: separador + BOTÕES (Ver a máquina / Ver na rede) */
.reel-links{margin-top:auto;padding-top:11px;border-top:1px solid var(--border,#e5e7eb);
  display:flex;flex-direction:column;gap:8px;align-items:stretch}
.reel-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;
  padding:9px 12px;border-radius:8px;font-size:12.5px;font-weight:700;line-height:1.25;
  text-decoration:none;text-align:center;cursor:pointer;transition:all .15s}
.reel-btn-seta{font-weight:800;flex-shrink:0}
.reel-btn-maquina{background:#C8181E;color:#fff;border:1px solid #C8181E}
.reel-btn-maquina:hover{background:#A01217;border-color:#A01217}
.reel-btn-social{background:var(--surface,#fff);color:var(--text,#111);border:1px solid var(--border,#e5e7eb)}
.reel-btn-social:hover{border-color:#C8181E;color:#C8181E}
body.dark .reel-btn-social,html.dark-on .reel-btn-social,.dark .reel-btn-social{background:#1f2937;border-color:#374151;color:#e5e7eb}

@media (max-width:600px){
  /* 1 card cheio por vez (sem recortes dos vizinhos) + snap firme em cada card */
  .reels-track{scroll-snap-type:x mandatory;gap:12px;scroll-padding:0}
  .reel-card{flex:0 0 100%;width:auto;max-width:none;scroll-snap-align:center}
  .reels-titulo{font-size:1.3rem}
  .reels-titulo-sub{display:none}   /* no mobile fica só "Reels" (evita quebra feia) */
}

/* Dark mode */
body.dark .reels-titulo,html.dark-on .reels-titulo,.dark .reels-titulo{color:#f3f4f6}
body.dark .reels-pill,html.dark-on .reels-pill,.dark .reels-pill{background:#1f2937;border-color:#374151;color:#cbd5e1}
body.dark .reel-tit,.dark .reel-tit{color:#f3f4f6}
body.dark .reels-track::-webkit-scrollbar-thumb,.dark .reels-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}