/* ============================================================
   RESERVA MESA — Página "Como Funciona" (/como-funciona/)
   Nort Marketing · bloco HTML autocontido, prefixo .rm-cf

   COMO APLICAR: o HTML de rm-como-funciona.html vai num widget HTML do
   Elementor, e este arquivo é enfileirado na página. Tudo escopado em
   .rm-cf — nada vaza para o resto do site.

   O vídeo é o mesmo arquivo que já está na página hoje
   (uploads/2026/03/como_funciona.mp4), com o mesmo poster.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

.rm-cf{
  --rm-bordo:#5C0407;
  --rm-bordo-deep:#3D0205;
  --rm-bordo-light:#7A1016;
  --rm-gold:#C8B687;
  --rm-gold-strong:#B89A5F;
  --rm-gold-soft:#E4D7B8;
  --rm-cream:#FAF7F2;
  --rm-cream-2:#F3EDE2;
  --rm-ink:#2B211C;
  --rm-ink-soft:#6B5F57;
  --rm-white:#FFFFFF;
  --rm-alert:#B3261E;
  --rm-font-display:'Archivo',sans-serif;
  --rm-font-body:'Inter',sans-serif;
  --rm-radius:18px;
  --rm-radius-lg:26px;
  --rm-container:1120px;
  --rm-ease:cubic-bezier(.22,.8,.3,1);
  --rm-shadow:0 18px 40px rgba(28,19,16,.14);
  --rm-shadow-soft:0 8px 24px rgba(28,19,16,.09);

  font-family:var(--rm-font-body);
  color:var(--rm-ink);
  background:var(--rm-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.rm-cf *,.rm-cf *::before,.rm-cf *::after{box-sizing:border-box}
.rm-cf img,.rm-cf video{max-width:100%;display:block}
.rm-cf a{text-decoration:none;color:inherit}
.rm-cf p{margin:0}
.rm-cf ul{margin:0;padding:0;list-style:none}
.rm-cf h1,.rm-cf h2,.rm-cf h3{font-family:var(--rm-font-display);line-height:1.1;margin:0}
.rm-cf-container{max-width:var(--rm-container);margin:0 auto;padding:0 24px}

.rm-cf-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.rm-cf-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;opacity:.75}

.rm-cf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--rm-font-display);font-size:.92rem;font-weight:800;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .26s var(--rm-ease),box-shadow .26s var(--rm-ease),background .26s var(--rm-ease);
}
.rm-cf a.rm-cf-btn-gold,.rm-cf .rm-cf-btn-gold{
  background:linear-gradient(135deg,var(--rm-gold-soft),var(--rm-gold));
  color:var(--rm-bordo);box-shadow:0 12px 26px rgba(200,182,135,.32);
}
.rm-cf a.rm-cf-btn-gold:hover,.rm-cf .rm-cf-btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(200,182,135,.42)}
.rm-cf a.rm-cf-btn-bordo,.rm-cf .rm-cf-btn-bordo{
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  color:#FAF7F2;box-shadow:0 12px 26px rgba(92,4,7,.26);
}
.rm-cf a.rm-cf-btn-bordo:hover,.rm-cf .rm-cf-btn-bordo:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(92,4,7,.34)}
.rm-cf a.rm-cf-btn-ghost,.rm-cf .rm-cf-btn-ghost{
  background:transparent;color:#FAF7F2;border:1.5px solid rgba(250,247,242,.42);
}
.rm-cf a.rm-cf-btn-ghost:hover,.rm-cf .rm-cf-btn-ghost:hover{border-color:var(--rm-gold);color:var(--rm-gold)}

/* ================= TOPO COM VÍDEO ================= */
.rm-cf-hero{
  background:
    radial-gradient(115% 120% at 80% 20%,rgba(122,16,22,.85),transparent 58%),
    linear-gradient(150deg,var(--rm-bordo-deep),var(--rm-bordo) 60%,#6B0509);
  color:#FAF7F2;
  padding:66px 0 70px;
}
.rm-cf-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.rm-cf-hero .rm-cf-eyebrow{color:var(--rm-gold)}
.rm-cf-hero h1{
  font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:900;letter-spacing:-.025em;
  margin:16px 0 18px;text-wrap:balance;
}
.rm-cf-hero p{font-size:1.05rem;line-height:1.68;color:rgba(250,247,242,.84);max-width:480px}
.rm-cf-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* moldura do vídeo */
.rm-cf-video{
  position:relative;border-radius:var(--rm-radius-lg);overflow:hidden;
  border:1px solid rgba(200,182,135,.4);
  box-shadow:0 30px 60px rgba(0,0,0,.42);
  background:#1C1310;
}
.rm-cf-video video{width:100%;height:auto;display:block}
.rm-cf-video-legenda{
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;color:rgba(250,247,242,.7);margin-top:12px;
}
.rm-cf-video-legenda::before{
  content:"";width:17px;height:17px;flex:none;
  background:var(--rm-gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ================= OS QUATRO PASSOS ================= */
.rm-cf-passos{padding:74px 0 66px;background:var(--rm-cream)}
.rm-cf-sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.rm-cf-sec-head .rm-cf-eyebrow{color:var(--rm-gold-strong);margin-bottom:13px}
.rm-cf-sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:900;color:var(--rm-bordo);letter-spacing:-.02em;margin-bottom:13px}
.rm-cf-sec-head p{font-size:1rem;line-height:1.65;color:var(--rm-ink-soft)}

.rm-cf-passos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rm-cf-passo{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--rm-white);border:1px solid rgba(200,182,135,.5);
  border-radius:var(--rm-radius);padding:26px 22px 24px;
  box-shadow:var(--rm-shadow-soft);
  transition:transform .3s var(--rm-ease),box-shadow .3s var(--rm-ease),border-color .3s var(--rm-ease);
}
.rm-cf-passo:hover{transform:translateY(-4px);box-shadow:var(--rm-shadow);border-color:var(--rm-gold)}
.rm-cf-passo-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rm-cf-passo-icone{
  width:46px;height:46px;border-radius:13px;flex:none;
  background-image:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:23px 23px,cover;
}
.rm-cf-icone-buscar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F2'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.6 13.4l4.2 4.2 1.5-1.5-4.2-4.2A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light))}
.rm-cf-icone-cupom{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F2'%3E%3Cpath d='M2 9.6V6.5A2.5 2.5 0 0 1 4.5 4h15A2.5 2.5 0 0 1 22 6.5v3.1a2.6 2.6 0 0 0 0 4.8v3.1a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-3.1a2.6 2.6 0 0 0 0-4.8Zm14.2-2.1-8.4 9h1.9l8.4-9Zm-7.6 1.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm6.8 5.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light))}
.rm-cf-icone-qr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F2'%3E%3Cpath d='M3 3h8v8H3Zm2 2v4h4V5Zm8-2h8v8h-8Zm2 2v4h4V5ZM3 13h8v8H3Zm2 2v4h4v-4Zm8-2h3v3h-3Zm5 0h3v3h-3Zm-5 5h3v3h-3Zm5 0h3v3h-3Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light))}
.rm-cf-icone-desconto{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAF7F2'%3E%3Cpath d='M19 5 5 19l1.4 1.4L20.4 6.4Zm-11.5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm9 8a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light))}
.rm-cf-passo-num{
  font-family:var(--rm-font-display);font-size:2.4rem;font-weight:900;
  line-height:1;color:var(--rm-cream-2);letter-spacing:-.04em;
}
.rm-cf-passo h3{font-size:1.02rem;font-weight:800;color:var(--rm-bordo);line-height:1.3}
.rm-cf-passo p{font-size:.9rem;line-height:1.55;color:var(--rm-ink-soft)}

/* ================= REGRAS DE USO ================= */
.rm-cf-regras{padding:70px 0;background:var(--rm-white)}
.rm-cf-regras-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:6px}
.rm-cf-regra{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--rm-cream);border:1px solid rgba(200,182,135,.5);
  border-radius:var(--rm-radius);padding:20px 22px;
}
.rm-cf-regra-icone{
  width:38px;height:38px;border-radius:11px;flex:none;margin-top:2px;
  background-image:linear-gradient(135deg,var(--rm-gold-strong),var(--rm-gold));
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:20px 20px,cover;
}
.rm-cf-ico-pessoas{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm7 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3Zm-7 2c-3 0-7 1.5-7 4.2V21h14v-3.8C16 14.5 12 13 9 13Zm7 .3c-.6 0-1.2 0-1.8.2A5.9 5.9 0 0 1 18 17.2V21h4v-3.4c0-2.5-3.3-4.3-6-4.3Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-gold-strong),var(--rm-gold))}
.rm-cf-ico-email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm9 8 8-5H4Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-gold-strong),var(--rm-gold))}
.rm-cf-ico-relogio{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 10.6-3.5 2.4a1 1 0 0 1-1.2-1.6l3-2.1V6.6a1 1 0 0 1 2 0Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-gold-strong),var(--rm-gold))}
.rm-cf-ico-lista{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M4 6h2v2H4Zm4 0h12v2H8ZM4 11h2v2H4Zm4 0h12v2H8ZM4 16h2v2H4Zm4 0h12v2H8Z'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--rm-gold-strong),var(--rm-gold))}
.rm-cf-regra h3{font-size:.98rem;font-weight:800;color:var(--rm-bordo);margin-bottom:5px;line-height:1.3}
.rm-cf-regra p{font-size:.9rem;line-height:1.6;color:var(--rm-ink-soft)}

/* a regra que o restaurante mais cobra: nada de juntar mesas */
.rm-cf-atencao{
  display:flex;align-items:flex-start;gap:14px;
  background:#FDF6E7;border:1.5px solid rgba(200,182,135,.85);
  border-radius:var(--rm-radius);padding:20px 22px;margin-top:16px;
}
.rm-cf-atencao::before{
  content:"";width:34px;height:34px;flex:none;margin-top:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B89A5F'%3E%3Cpath d='M12 2 1 21h22Zm0 6a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1Zm0 9.5a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 12 17.5Z'/%3E%3C/svg%3E") center/28px no-repeat;
}
.rm-cf-atencao h3{font-size:.98rem;font-weight:800;color:var(--rm-bordo);margin-bottom:5px}
.rm-cf-atencao p{font-size:.9rem;line-height:1.6;color:var(--rm-ink)}

/* ================= O QUE VOCÊ PAGA ================= */
.rm-cf-transparencia{
  background:
    radial-gradient(110% 130% at 20% 20%,rgba(122,16,22,.72),transparent 60%),
    linear-gradient(140deg,var(--rm-bordo-deep),var(--rm-bordo));
  color:#FAF7F2;padding:68px 0;
}
.rm-cf-transp-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center}
.rm-cf-transparencia .rm-cf-eyebrow{color:var(--rm-gold);margin-bottom:13px}
.rm-cf-transparencia h2{font-size:clamp(1.75rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:16px}
.rm-cf-transparencia > .rm-cf-container > .rm-cf-transp-grid > div > p{
  font-size:1.02rem;line-height:1.7;color:rgba(250,247,242,.84);
}
.rm-cf-conta{
  background:rgba(250,247,242,.08);
  border:1px solid rgba(200,182,135,.4);
  border-radius:var(--rm-radius-lg);
  padding:28px 30px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.rm-cf-conta-linha{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px dashed rgba(250,247,242,.22);
}
.rm-cf-conta-linha:last-of-type{border-bottom:0}
.rm-cf-conta-linha span{font-size:.94rem;color:rgba(250,247,242,.82);line-height:1.5}
.rm-cf-conta-linha strong{
  font-family:var(--rm-font-display);font-size:1rem;font-weight:800;color:#FAF7F2;
  white-space:nowrap;
}
.rm-cf-conta-linha.rm-cf-destaque strong{color:var(--rm-gold);font-size:1.2rem}
.rm-cf-conta-nota{
  font-size:.84rem;line-height:1.55;color:rgba(250,247,242,.68);
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(250,247,242,.16);
}

/* ================= FECHAMENTO ================= */
.rm-cf-final{padding:70px 0 78px;background:var(--rm-cream);text-align:center}
.rm-cf-final h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:900;color:var(--rm-bordo);letter-spacing:-.02em;margin-bottom:14px}
.rm-cf-final p{font-size:1rem;line-height:1.65;color:var(--rm-ink-soft);max-width:520px;margin:0 auto 28px}
.rm-cf-final-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ================= RESPONSIVO ================= */
@media (max-width:991px){
  .rm-cf-hero{padding:52px 0 56px}
  .rm-cf-hero-grid{grid-template-columns:1fr;gap:32px}
  .rm-cf-hero p{max-width:none}
  .rm-cf-passos-grid{grid-template-columns:1fr 1fr;gap:16px}
  .rm-cf-regras-grid{grid-template-columns:1fr}
  .rm-cf-transp-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:575px){
  .rm-cf-container{padding:0 18px}
  .rm-cf-hero{padding:42px 0 46px}
  .rm-cf-hero-cta{flex-direction:column;align-items:stretch}
  .rm-cf-btn{width:100%}
  .rm-cf-passos,.rm-cf-regras,.rm-cf-final{padding:52px 0}
  .rm-cf-passos-grid{grid-template-columns:1fr}
  .rm-cf-passo{flex-direction:row;align-items:flex-start;gap:16px;padding:20px}
  .rm-cf-passo-topo{flex-direction:column;gap:8px}
  .rm-cf-passo-num{font-size:1.6rem}
  .rm-cf-transparencia{padding:52px 0}
  .rm-cf-conta{padding:22px 20px}
  .rm-cf-final-cta{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .rm-cf *{transition:none !important;animation:none !important}
}

/* ================= EXEMPLO DE ECONOMIA ================= */
.rm-cf-exemplo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--rm-white);border:1.5px solid rgba(200,182,135,.7);
  border-radius:var(--rm-radius-lg);overflow:hidden;margin-top:30px;
}
.rm-cf-exemplo-item{padding:24px 22px;border-right:1px solid rgba(200,182,135,.5)}
.rm-cf-exemplo-item:last-child{border-right:0;background:var(--rm-cream)}
.rm-cf-exemplo-rotulo{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rm-ink-soft);margin-bottom:8px;
}
.rm-cf-exemplo-valor{
  font-family:var(--rm-font-display);font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:900;
  color:var(--rm-bordo);letter-spacing:-.02em;line-height:1.1;display:block;margin-bottom:6px;
}
.rm-cf-exemplo-item p{font-size:.86rem;line-height:1.5;color:var(--rm-ink-soft)}
.rm-cf-exemplo-nota{
  font-size:.8rem;line-height:1.55;color:var(--rm-ink-soft);
  margin-top:14px;text-align:center;
}

/* ================= PERGUNTAS FREQUENTES ================= */
.rm-cf-faq{padding:74px 0;background:var(--rm-cream)}
.rm-cf-faq-lista{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rm-cf-faq-item{
  background:var(--rm-white);border:1px solid rgba(200,182,135,.55);
  border-radius:var(--rm-radius);overflow:hidden;
  transition:border-color .25s var(--rm-ease),box-shadow .25s var(--rm-ease);
}
.rm-cf-faq-item[open]{border-color:var(--rm-gold);box-shadow:var(--rm-shadow-soft)}
.rm-cf-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--rm-font-display);font-size:1rem;font-weight:800;
  color:var(--rm-bordo);line-height:1.4;
  padding:20px 22px;cursor:pointer;list-style:none;
}
.rm-cf-faq-item summary::-webkit-details-marker{display:none}
.rm-cf-faq-item summary::after{
  content:"";width:22px;height:22px;flex:none;
  background:var(--rm-bordo);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--rm-ease);
}
.rm-cf-faq-item[open] summary::after{transform:rotate(45deg)}
.rm-cf-faq-item summary:hover{background:var(--rm-cream)}
.rm-cf-faq-item summary:focus-visible{outline:3px solid var(--rm-gold);outline-offset:-3px}
.rm-cf-faq-resposta{padding:0 22px 20px;font-size:.95rem;line-height:1.7;color:var(--rm-ink-soft)}
.rm-cf-faq-resposta strong{color:var(--rm-ink);font-weight:600}
.rm-cf-faq-resposta a{color:var(--rm-bordo);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:767px){
  .rm-cf-exemplo{grid-template-columns:1fr}
  .rm-cf-exemplo-item{border-right:0;border-bottom:1px solid rgba(200,182,135,.5)}
  .rm-cf-exemplo-item:last-child{border-bottom:0}
  .rm-cf-faq{padding:52px 0}
  .rm-cf-faq-item summary{font-size:.95rem;padding:17px 18px}
  .rm-cf-faq-resposta{padding:0 18px 17px;font-size:.9rem}
}