/* ============================================================
   OtoXpress — site de vendas
   Sistema de design (decidido ANTES do layout):

   MARCA
     ana renk  --tijolo  #C2461D  terracota industrial (oficina, ferramenta)
     nötr      --papel   #F7F4EE  / --murekkep #15130F
     vurgu     --verde   #1D5E45  sadece "kanıt/para" için
   Bilinçli olarak mor-mavi degrade YOK.

   TİPOGRAFİ
     başlık: Bricolage Grotesque 700/800  (karakterli grotesk)
     gövde : Inter 400/500/600            (okunaklı)

   BOŞLUK — 8px tabanlı, keyfi px yok
     --s1 8  --s2 16  --s3 24  --s4 32  --s5 48  --s6 64  --s7 96  --s8 128
   ============================================================ */

:root {
  --tijolo: #c2461d;
  --tijolo-escuro: #9c3715;
  --tijolo-claro: #f0d9d0;
  --verde: #1d5e45;
  --verde-claro: #dfeee7;
  --papel: #f7f4ee;
  --papel-2: #efeae1;
  --branco: #fffdfa;
  --murekkep: #15130f;
  --cinza: #6e675c;
  --cinza-claro: #a29a8c;
  --linha: #e0d9cd;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --disp: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;

  --r1: 6px; --r2: 12px; --r3: 20px;
  /* gölge marka renginden türetildi, varsayılan gri değil */
  --sombra: 0 2px 4px rgba(21, 19, 15, .04), 0 12px 32px rgba(194, 70, 29, .07);
  --sombra-alta: 0 4px 8px rgba(21, 19, 15, .06), 0 24px 56px rgba(194, 70, 29, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--murekkep);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* [hidden] her zaman kazanmali — asagidaki display kurallari onu eziyordu */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(1180px, 100% - var(--s4)); margin-inline: auto; }
.wrap-estreito { width: min(760px, 100% - var(--s4)); margin-inline: auto; }

section { padding-block: var(--s7); }
@media (max-width: 720px) { section { padding-block: var(--s6); } }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 700; }

.olho {
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tijolo); display: inline-block; margin-bottom: var(--s2);
}
.chamada { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--cinza); max-width: 62ch; }
.destaque { color: var(--tijolo); }
.risco {
  background-image: linear-gradient(var(--tijolo-claro), var(--tijolo-claro));
  background-repeat: no-repeat;
  background-size: 100% .3em;
  background-position: 0 88%;
  padding-inline: .04em;
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 14px var(--s3); border-radius: var(--r1);
  font-size: .95rem; font-weight: 600; font-family: var(--body);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-primario { background: var(--tijolo); color: var(--branco); box-shadow: 0 2px 0 var(--tijolo-escuro); }
.btn-primario:hover { background: var(--tijolo-escuro); transform: translateY(-2px); box-shadow: 0 4px 0 var(--tijolo-escuro), var(--sombra); }
.btn-primario:active { transform: translateY(0); box-shadow: 0 1px 0 var(--tijolo-escuro); }
.btn-linha { border-color: var(--murekkep); color: var(--murekkep); background: transparent; }
.btn-linha:hover { background: var(--murekkep); color: var(--papel); transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--tijolo); outline-offset: 3px; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.navint { display: flex; align-items: center; gap: var(--s4); height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 1.24rem; letter-spacing: -.03em; margin-right: auto; }
.marca-sinal { width: 26px; height: 26px; }
.navlinks { display: flex; gap: var(--s3); font-size: .92rem; font-weight: 500; color: var(--cinza); }
.navlinks a { padding: 4px 0; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.navlinks a:hover { color: var(--murekkep); border-bottom-color: var(--tijolo); }
@media (max-width: 900px) { .navlinks { display: none; } .navint { gap: var(--s2); } }

/* seletor de idioma — segmentado, mesma família do resto (sem bandeirinha) */
.dil {
  display: inline-flex; gap: 2px; padding: 3px; flex-shrink: 0;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--branco);
}
.dil button {
  font-family: var(--body); font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  color: var(--cinza); background: transparent; border: 0; cursor: pointer;
  padding: 7px 11px; border-radius: 999px; line-height: 1;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.dil button:hover { color: var(--murekkep); }
.dil button[aria-pressed="true"] { background: var(--murekkep); color: var(--papel); }
.dil button:focus-visible { outline: 2px solid var(--tijolo); outline-offset: 2px; }
@media (max-width: 520px) {
  .dil button { padding: 7px 8px; font-size: .7rem; }
  .navcta { padding: 12px var(--s2); font-size: .88rem; }
}
/* abaixo de 400px marca + idioma + botão não cabem: o botão sai.
   O CTA continua no hero, nos passos, nos planos e no bloco final. */
@media (max-width: 400px) { .navcta { display: none; } }

/* ---------- hero — kırık simetri: 7/5, ortalanmış değil ---------- */
.hero { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--linha); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s6); align-items: center; }
.hero h1 { margin-block: var(--s2) var(--s3); }
.hero .chamada { margin-bottom: var(--s4); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.hero-nota { margin-top: var(--s3); font-size: .87rem; color: var(--cinza-claro); }
.hero-visual { position: relative; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero { padding-block: var(--s5) var(--s5); }
}

/* moldura de navegador — a screenshot é o herói, sem 3D nem mockup falso */
.moldura {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--branco); box-shadow: var(--sombra-alta); overflow: hidden;
}
.moldura-barra {
  display: flex; align-items: center; gap: 6px;
  padding: 10px var(--s2); border-bottom: 1px solid var(--linha); background: var(--papel-2);
}
.moldura-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha); display: block; }
.moldura-url {
  margin-left: var(--s1); font-size: .72rem; color: var(--cinza-claro);
  font-family: ui-monospace, Menlo, monospace; letter-spacing: -.01em;
}
.moldura img { width: 100%; height: auto; }

/* ---------- faixa de dores ---------- */
.dores { background: var(--murekkep); color: var(--papel); }
.dores h2 { color: var(--branco); }
.dores .chamada { color: var(--cinza-claro); }
.dores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); margin-top: var(--s5); }
.dor {
  padding: var(--s3); border: 1px solid rgba(247, 244, 238, .14); border-radius: var(--r2);
  background: rgba(247, 244, 238, .03); transition: background .25s var(--ease), border-color .25s var(--ease);
}
.dor:hover { background: rgba(247, 244, 238, .07); border-color: rgba(194, 70, 29, .5); }
.dor svg { width: 22px; height: 22px; color: var(--tijolo); margin-bottom: var(--s2); }
.dor h4 { color: var(--branco); margin-bottom: 6px; }
.dor p { font-size: .9rem; color: var(--cinza-claro); line-height: 1.5; }
@media (max-width: 900px) { .dores-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dores-grid { grid-template-columns: 1fr; } }

/* ---------- módulos clicáveis ---------- */
.mod-cabeca { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: end; margin-bottom: var(--s5); }
@media (max-width: 760px) { .mod-cabeca { grid-template-columns: 1fr; } }

.mod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 1000px) { .mod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .mod-grid { grid-template-columns: 1fr; } }

.mod {
  text-align: left; width: 100%; cursor: pointer;
  padding: var(--s3); border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--branco); font-family: var(--body);
  display: flex; flex-direction: column; gap: 10px; min-height: 148px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.mod:hover { transform: translateY(-3px); border-color: var(--tijolo); box-shadow: var(--sombra); }
.mod:focus-visible { outline: 3px solid var(--tijolo); outline-offset: 2px; }
.mod svg.ic { width: 24px; height: 24px; color: var(--tijolo); }
.mod h3 { font-size: 1.02rem; }
.mod p { font-size: .85rem; color: var(--cinza); line-height: 1.45; }
.mod-ver {
  margin-top: auto; font-size: .78rem; font-weight: 600; color: var(--tijolo);
  display: flex; align-items: center; gap: 5px;
}
.mod-ver svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.mod:hover .mod-ver svg { transform: translateX(3px); }

/* painel de detalhe do módulo */
.painel { position: fixed; inset: 0; z-index: 90; display: none; }
.painel[open] { display: block; }
.painel-fundo { position: absolute; inset: 0; background: rgba(21, 19, 15, .55); backdrop-filter: blur(3px); }
.painel-caixa {
  position: absolute; inset: auto 0 0 0; max-height: 92vh; overflow-y: auto;
  background: var(--papel); border-top-left-radius: var(--r3); border-top-right-radius: var(--r3);
  animation: sobe .3s var(--ease);
}
@keyframes sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .painel-caixa {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(1020px, calc(100% - var(--s6))); border-radius: var(--r3);
  }
  @keyframes sobe { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
}
.painel-int { padding: var(--s4); }
.painel-topo { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s3); }
.painel-topo svg.ic { width: 28px; height: 28px; color: var(--tijolo); flex-shrink: 0; margin-top: 2px; }
.painel-fechar {
  margin-left: auto; background: none; border: 1px solid var(--linha); border-radius: var(--r1);
  width: 34px; height: 34px; cursor: pointer; color: var(--cinza); flex-shrink: 0;
  display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease);
}
.painel-fechar:hover { background: var(--murekkep); color: var(--papel); }
.painel-corpo { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s4); }
@media (max-width: 860px) { .painel-corpo { grid-template-columns: 1fr; } .painel-int { padding: var(--s3); } }
.painel-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: var(--s2); }
.painel-lista li { display: flex; gap: 10px; font-size: .92rem; color: var(--cinza); line-height: 1.5; }
.painel-lista svg { width: 17px; height: 17px; color: var(--verde); flex-shrink: 0; margin-top: 3px; }
.painel-video {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3);
  font-family: var(--body); cursor: pointer; background: transparent;
  font-size: .87rem; font-weight: 600; color: var(--tijolo);
  border: 1.5px solid var(--tijolo); border-radius: var(--r1); padding: 9px var(--s2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.painel-video:hover { background: var(--tijolo); color: var(--branco); }
.painel-video svg { width: 16px; height: 16px; }
/* aviso de idioma do vídeo — some sozinho quando o dicionário devolve vazio */
.video-nota { margin-top: var(--s1); font-size: .8rem; color: var(--cinza-claro); }
.video-nota:empty { display: none; }
.painel video { width: 100%; border-radius: var(--r2); border: 1px solid var(--linha); background: var(--murekkep); }

/* ---------- diferenciais ---------- */
.dif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 760px) { .dif-grid { grid-template-columns: 1fr; } }
.dif {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2);
  padding: var(--s3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--branco);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.dif:hover { border-color: var(--verde); box-shadow: var(--sombra); }
.dif-selo {
  width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro);
  display: grid; place-items: center; flex-shrink: 0;
}
.dif-selo svg { width: 18px; height: 18px; color: var(--verde); }
.dif h4 { margin-bottom: 4px; }
.dif p { font-size: .89rem; color: var(--cinza); line-height: 1.5; }
.dif small { display: block; margin-top: 6px; font-size: .78rem; color: var(--cinza-claro); }

/* ---------- passos ---------- */
.passos { background: var(--papel-2); border-block: 1px solid var(--linha); }
.passo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 760px) { .passo-grid { grid-template-columns: 1fr; gap: var(--s3); } }
.passo { position: relative; padding-top: var(--s3); border-top: 3px solid var(--tijolo); }
.passo-n { font-family: var(--disp); font-size: 2.4rem; font-weight: 800; color: var(--tijolo-claro); line-height: 1; margin-bottom: var(--s1); }
.passo h3 { margin-bottom: 6px; }
.passo p { font-size: .93rem; color: var(--cinza); }

/* ---------- preços ---------- */
.preco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 940px) { .preco-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .preco-grid { grid-template-columns: 1fr; } }
.plano {
  padding: var(--s3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--branco);
  display: flex; flex-direction: column; transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.plano:hover { border-color: var(--tijolo); box-shadow: var(--sombra); transform: translateY(-3px); }
.plano-destaque { border-color: var(--tijolo); border-width: 2px; box-shadow: var(--sombra); }
.plano-fita {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--tijolo); color: var(--branco); padding: 3px 9px; border-radius: 99px; margin-bottom: 10px;
}
.plano h3 { font-size: 1.1rem; }
.plano-valor { font-family: var(--disp); font-size: 2.1rem; font-weight: 800; margin-block: var(--s1) 2px; letter-spacing: -.03em; }
.plano-valor span { font-family: var(--body); font-size: .82rem; font-weight: 500; color: var(--cinza-claro); letter-spacing: 0; }
.plano-para { font-size: .85rem; color: var(--cinza); margin-bottom: var(--s3); min-height: 2.6em; }
.plano ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s3); }
.plano li { display: flex; gap: 8px; font-size: .86rem; color: var(--cinza); }
.plano li svg { width: 15px; height: 15px; color: var(--verde); flex-shrink: 0; margin-top: 3px; }
.plano .btn { margin-top: auto; justify-content: center; }

/* ---------- faq ---------- */
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-p {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--s3) 0; font-family: var(--disp); font-size: 1.05rem; font-weight: 700; color: var(--murekkep);
  display: flex; align-items: center; gap: var(--s2); transition: color .2s var(--ease);
}
.faq-p:hover { color: var(--tijolo); }
.faq-p svg { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; transition: transform .25s var(--ease); color: var(--tijolo); }
.faq-item[open] .faq-p svg { transform: rotate(45deg); }
.faq-r { padding-bottom: var(--s3); font-size: .95rem; color: var(--cinza); max-width: 68ch; }

/* ---------- cta final ---------- */
.cta { background: var(--murekkep); color: var(--papel); text-align: center; }
.cta h2 { color: var(--branco); margin-bottom: var(--s2); }
.cta p { color: var(--cinza-claro); margin-inline: auto; margin-bottom: var(--s4); max-width: 52ch; }
.cta .btn-linha { border-color: var(--papel); color: var(--papel); }
.cta .btn-linha:hover { background: var(--papel); color: var(--murekkep); }

/* ---------- rodapé ---------- */
footer { padding-block: var(--s5); border-top: 1px solid var(--linha); font-size: .87rem; color: var(--cinza); }
.foot { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.foot .marca { font-size: 1.05rem; margin-right: auto; }
.foot a:hover { color: var(--tijolo); }

/* ---------- revelação (reduzida, sem exagero) ---------- */
.rev { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rev.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- WhatsApp fixo ----------
   Padrão esperado no Brasil. Usa o verde da marca (--verde), não o verde
   berrante do app — para não brigar com a paleta do site. */
.wpp-fixo {
  position: fixed; right: var(--s3); bottom: var(--s3); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 13px var(--s3); border-radius: 999px;
  background: var(--verde); color: var(--papel);
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 4px 12px rgba(21,19,15,.14), 0 12px 32px rgba(29,94,69,.28);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.wpp-fixo svg { width: 20px; height: 20px; flex-shrink: 0; }
.wpp-fixo:hover { background: #174c38; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21,19,15,.18), 0 16px 40px rgba(29,94,69,.34); }
.wpp-fixo:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 3px; }
/* No celular vira só o ícone — não pode tapar o conteúdo. */
@media (max-width: 620px) {
  .wpp-fixo { padding: 14px; }
  .wpp-fixo span { display: none; }
}

/* ============================================================
   PARLAMA (shiny) — dönen ışık halkası
   Kaynak fikir: ShinyButton (konik gradyan kenarlık).

   Renk BİLEREK mavi değil: bu sitenin paleti terracotta ve mor-mavi
   degrade kasıtlı olarak elendi. Vurgu --tijolo, süpürme beyaz.

   Teknik notlar:
   - Halka `mask-composite: exclude` ile yapılır (iç kutu maskeden çıkarılır).
     `z-index:-1` ile arkaya atmak ÇALIŞMAZ: yığın bağlamında negatif
     z-index'li sözde-eleman, elemanın kendi zemininin ÜZERİNE boyanır.
   - `:where()` sıfır özgüllük verir; `.wpp-fixo`nun `position: fixed`i
     ezilmez (düz `position: relative` yazılsa sabit buton akışa girerdi).
   ============================================================ */
@property --ox-aci {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ox-aci-don {
  to { --ox-aci: 360deg; }
}

:where(.btn, .mod, .painel-video, .wpp-fixo) {
  position: relative;
}

.btn::after,
.mod::after,
.painel-video::after,
.wpp-fixo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--ox-aci),
    transparent 0 8%,
    var(--ox-parlak, var(--tijolo)) 14%,
    #fff 20%,
    var(--ox-parlak, var(--tijolo)) 26%,
    transparent 34%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}

.btn:is(:hover, :focus-visible)::after,
.mod:is(:hover, :focus-visible)::after,
.painel-video:is(:hover, :focus-visible)::after,
.wpp-fixo:is(:hover, :focus-visible)::after {
  opacity: 1;
  animation: ox-aci-don 2.4s linear infinite;
}

/* Ana çağrı butonları beklemeden parlar — satış sayfasında CTA görünmeli */
.btn-primario::after {
  --ox-parlak: var(--tijolo-claro);
  opacity: 1;
  animation: ox-aci-don 3.6s linear infinite;
}
.btn-primario:is(:hover, :focus-visible)::after {
  animation-duration: 2s;
}

/* Çerçeveli butonlarda halka marka renginde okunur */
.btn-linha::after { --ox-parlak: var(--tijolo); }
.wpp-fixo::after  { --ox-parlak: #7ee0b8; }

@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .mod::after,
  .painel-video::after,
  .wpp-fixo::after {
    animation: none !important;
  }
}