/* ============================================================
   TUTORIAIS EM VÍDEO — grade 4×2 + modal (YouTube)
   Fonte única. Usado em /para/*, /vtn/* e (inline) no index.html.
   Progressive enhancement: a grade é montada por assets/tutoriais.js.
   ============================================================ */
.frtut{margin:0;}
.frtut__head{max-width:640px;}
.frtut__eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fiscal,#1E5631);margin:0 0 10px;}
.frtut__title{font-family:var(--f-display,Georgia,serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 6px;color:var(--ink,#12211a);}
.frtut__sub{color:var(--muted,#586A5C);font-size:.98rem;line-height:1.5;margin:0;}

.frtut__grid{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:960px){ .frtut__grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .frtut__grid{grid-template-columns:1fr;} }

.frtut__card{display:flex;flex-direction:column;width:100%;text-align:left;padding:0;
  background:var(--paper-2,#fff);border:1px solid var(--line,#e6e2d6);border-radius:14px;
  overflow:hidden;cursor:pointer;font-family:inherit;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.frtut__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(0,0,0,.4);
  border-color:var(--fiscal,#1E5631);}
.frtut__card:focus-visible{outline:2px solid var(--fiscal,#1E5631);outline-offset:2px;}

.frtut__thumb{position:relative;aspect-ratio:16/9;background:#0a1a10;overflow:hidden;}
.frtut__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.frtut__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(7,19,13,.05),rgba(7,19,13,.32));
  transition:background .2s ease;}
.frtut__card:hover .frtut__play{background:linear-gradient(180deg,rgba(7,19,13,.10),rgba(7,19,13,.42));}
.frtut__play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--fiscal,#1E5631);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);transition:transform .2s ease;}
.frtut__card:hover .frtut__play span{transform:scale(1.08);}
.frtut__play svg{width:22px;height:22px;margin-left:2px;}
.frtut__n{position:absolute;top:9px;left:9px;z-index:2;font-family:var(--f-num,ui-monospace,monospace);
  font-size:.7rem;font-weight:700;color:#fff;background:rgba(7,19,13,.6);
  padding:2px 8px;border-radius:100px;letter-spacing:.04em;}

.frtut__meta{padding:12px 14px 15px;}
.frtut__ct{font-family:var(--f-display,Georgia,serif);font-weight:600;font-size:1rem;line-height:1.25;
  margin:0 0 3px;color:var(--ink,#12211a);}
.frtut__cd{font-size:.82rem;line-height:1.4;color:var(--muted,#586A5C);margin:0;}

/* variante para fundo escuro (seção de demonstração do index.html) */
.frtut--dark .frtut__title{color:#fff;}
.frtut--dark .frtut__sub{color:var(--sand-dim,#c9d3c2);}
.frtut--dark .frtut__eyebrow{color:var(--lime,#9BE15D);}
.frtut--dark .frtut__card{background:rgba(255,255,255,.04);border-color:rgba(231,220,199,.14);}
.frtut--dark .frtut__card:hover{border-color:var(--lime,#9BE15D);}
.frtut--dark .frtut__ct{color:#fff;}
.frtut--dark .frtut__cd{color:var(--sand-dim,#c9d3c2);}

/* modal / lightbox */
.frtut-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(7,19,13,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.frtut-modal.is-open{display:flex;}
.frtut-modal__box{position:relative;width:min(1040px,96vw);}
.frtut-modal__frame{position:relative;aspect-ratio:16/9;width:100%;background:#0a1a10;
  border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  border:1px solid rgba(231,220,199,.16);}
/* iframe = YouTube; video = arquivo nosso (R2). Mesma caixa 16/9 nos dois casos. */
.frtut-modal__frame iframe,
.frtut-modal__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.frtut-modal__frame video{background:#0a1a10;object-fit:contain;}
.frtut-modal__cap{margin:12px 2px 0;color:var(--sand,#e7dcc7);font-size:.92rem;text-align:center;}
.frtut-modal__close{position:absolute;top:-14px;right:-14px;z-index:2;width:42px;height:42px;
  border-radius:50%;background:#fff;color:var(--ink,#12211a);display:flex;align-items:center;
  justify-content:center;border:0;cursor:pointer;font-size:1.2rem;line-height:1;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);transition:transform .18s ease,background .18s ease;}
.frtut-modal__close:hover{transform:scale(1.06);background:#f2efe6;}
@media(max-width:560px){ .frtut-modal__close{top:-46px;right:0;} }