/* 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. */

/* ===== Marquee de nichos (vanilla, sem React) ===== */
.op-marquee{position:relative;overflow:hidden}
.op-marquee-track{display:flex;width:max-content;animation-name:op-marquee;animation-duration:40s;animation-timing-function:linear;animation-iteration-count:infinite}
.op-marquee-rev .op-marquee-track{animation-direction:reverse}
.op-marquee:hover .op-marquee-track{animation-play-state:paused}
@keyframes op-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.op-chip{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:9999px;margin-right:.75rem}
.op-fade-l,.op-fade-r{position:absolute;top:0;height:100%;width:5rem;z-index:10;pointer-events:none}
.op-fade-l{left:0;background:linear-gradient(to right,#fff,transparent)}
.op-fade-r{right:0;background:linear-gradient(to left,#fff,transparent)}


/* ===== Fan carousel (vanilla + GSAP) ===== */
.fan-layout{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:38rem;overflow:visible}
.fan-card{position:absolute;top:50%;left:50%;width:15rem;height:30.5rem;margin:-15.25rem 0 0 -7.5rem;border-radius:1.5rem;overflow:hidden;background:#f3f4f6;box-shadow:0 20px 50px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);will-change:transform;opacity:0}
.fan-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media (max-width:1024px){.fan-layout{height:30rem}.fan-card{width:12rem;height:24.4rem;margin:-12.2rem 0 0 -6rem}}
@media (max-width:640px){.fan-layout{height:22rem}.fan-card{width:8.5rem;height:17.3rem;margin:-8.65rem 0 0 -4.25rem;border-radius:1rem}}
.fan-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;position:relative;z-index:30}
.fan-btn{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:9999px;border:1.5px solid rgba(0,0,0,.1);background:rgba(0,0,0,.05);color:rgba(0,0,0,.45);cursor:pointer;transition:border-color .3s,color .3s}
.fan-btn:hover{border-color:rgba(0,0,0,.25);color:rgba(0,0,0,.7)}
.fan-dots{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;max-width:18rem}
.fan-dot{width:.5rem;height:.5rem;border-radius:9999px;background:rgba(0,0,0,.15);transition:background .3s,transform .3s}
.fan-dot.active{background:rgba(0,0,0,.7);transform:scale(1.3)}


/* ===== Progressive blur thumbs (teste) ===== */
.blur-grid-card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:1rem;border:1px solid rgba(0,0,0,.06);background:#f3f4f6}
.blur-grid-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.blur-stack{position:absolute;left:0;bottom:0;width:100%;height:75%;opacity:0;transition:opacity .25s ease;pointer-events:none}
.blur-stack>div{position:absolute;inset:0}
.blur-label{position:absolute;left:0;bottom:0;padding:.85rem 1rem;opacity:0;transition:opacity .25s ease;z-index:5;pointer-events:none}
.blur-label p{color:#fff;font-weight:600;font-size:.95rem;line-height:1.2;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.blur-label span{color:#e5e7eb;font-size:.8rem;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.blur-grid-card:hover .blur-stack,.blur-grid-card:hover .blur-label{opacity:1}

/* grid 4+4 do teste progressive-blur */
.blur-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
@media (min-width:768px){.blur-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* label sem blur: degrade p/ leitura */
.blur-label{right:0;padding-top:2rem;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))}
@media (min-width:768px){.blur-grid{gap:.4rem}}

/* ================================================================
   MOBILE (<=639px): centralizar os elementos principais.
   Hero, intros de seção (eyebrow+título+texto), CTAs e chips.
   Corpos de card ficam à esquerda (legibilidade).
   ================================================================ */
@media (max-width:639px){
  /* intros de seção (caixa max-w-2xl) e textos do hero */
  .max-w-2xl{ margin-left:auto; margin-right:auto; text-align:center; }
  #hero .container{ text-align:center; }

  /* CTAs inline-flex centralizam pelo text-align do pai */
  #hero .container.relative,           /* CTA do hero */
  #exemplos .mt-10,                    /* "Quero a minha loja assim" */
  .space-y-16{ text-align:center; }    /* seção de CTA final */

  /* chips do hero (Delivery/Balcão/Mesa...) */
  #hero .justify-start{ justify-content:center; }

  /* bloco "Pagamentos" (label + badges) no fim de #nichos */
  #nichos .mt-10{ text-align:center; }
  #nichos .flex-wrap{ justify-content:center; }

  /* economia: stats e disclaimer ao centro */
  #economia .grid > div{ text-align:center; }
  #economia .text-white\/40{ text-align:center; }
}