/* OtimizaPedido — brand overrides over LogSnag base
   Laranja #FC5E03 (luz/glow), escuro #20282E. Minimal, non-destructive. */

:root{
  --op-orange:#FC5E03;
  --op-orange-hover:#e35402;
  --op-dark:#20282E;
}

/* Primary CTA buttons (LogSnag used solid black) -> brand orange */
a.bg-black{
  background-color:var(--op-orange) !important;
}
a.bg-black:hover{
  background-color:var(--op-orange-hover) !important;
}

/* Top announcement bar accent arrow / link hover */
a[href] strong.font-semibold{ color:var(--op-dark); }

/* Broken LogSnag app screenshots (dead Next image-optimizer URLs).
   Hidden until replaced by real OtimizaPedido visuals. */
.screenshot-container{ display:none !important; }

/* LogSnag third-party logo cluster (irrelevant + broken URL) */
img[alt="Integrações Otimiza Pedido"]{ display:none !important; }

/* ----------------------------------------------------------------
   Utilities used by the new OtimizaPedido sections but ABSENT from
   the prebuilt (JIT-purged) LogSnag CSS. Defined here so the sections
   render with the right colors/shape. Escaped class selectors.
   ---------------------------------------------------------------- */
.text-\[\#FC5E03\]{ color:#FC5E03; }
.bg-\[\#FC5E03\]{ background-color:#FC5E03; }
.bg-\[\#FC5E03\]\/10{ background-color:rgba(252,94,3,.10); }
.border-\[\#FC5E03\]{ border-color:#FC5E03; }
.hover\:border-\[\#FC5E03\]:hover{ border-color:#FC5E03; }
.bg-\[\#20282E\]{ background-color:#20282E; }

.text-red-400{ color:#f87171; }
.bg-white\/5{ background-color:rgba(255,255,255,.06); }
.text-white\/40{ color:rgba(255,255,255,.40); }
.text-white\/50{ color:rgba(255,255,255,.50); }
.text-white\/60{ color:rgba(255,255,255,.60); }
.text-white\/80{ color:rgba(255,255,255,.80); }
.bg-green-100{ background-color:#dcfce7; } .text-green-600{ color:#16a34a; }
.bg-blue-100{ background-color:#dbeafe; }  .text-blue-600{ color:#2563eb; }
.bg-gray-100{ background-color:#f3f4f6; }  .bg-gray-50{ background-color:#f9fafb; }

.rounded-3xl{ border-radius:1.5rem; }
.shadow-sm{ box-shadow:0 1px 2px 0 rgba(0,0,0,.05); }
.shadow-md{ box-shadow:0 4px 6px -1px rgba(0,0,0,.10),0 2px 4px -2px rgba(0,0,0,.10); }
.opacity-60{ opacity:.6; }
.h-10{ height:2.5rem; } .w-10{ width:2.5rem; }
.gap-4{ gap:1rem; } .gap-5{ gap:1.25rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-4xl{ font-size:2.25rem; line-height:2.5rem; }
.py-1\.5{ padding-top:.375rem; padding-bottom:.375rem; }
.mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; } .mt-10{ margin-top:2.5rem; }

@media (min-width:640px){
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:768px){
  .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:p-8{ padding:2rem; } .md\:p-14{ padding:3.5rem; }
}
@media (min-width:1024px){
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.p-6{ padding:1.5rem; } .p-8{ padding:2rem; }
.col-span-2{ grid-column:span 2 / span 2; }
@media (min-width:768px){ .md\:col-span-2{ grid-column:span 2 / span 2; } }
.gap-2{ gap:.5rem; } .gap-2\.5{ gap:.625rem; } .gap-3{ gap:.75rem; }
.hover\:text-gray-900:hover{ color:#111827; }
.tracking-wider{ letter-spacing:.05em; }

/* Hero order-feed: the exact LogSnag demo component runs as an isolated
   React + Framer Motion app (see the module script in index.html).
   No mask / blur here — the original has none. */