/* ==========================================================================
   YouSeller — Sistema de marca
   --------------------------------------------------------------------------
   Paleta amostrada da identidade oficial: o índigo profundo das peças da
   marca desce para o teal e termina na menta do logotipo (#00C87F).
   Esse gradiente vertical é a espinha do site: as seções escuras ocupam
   posições diferentes dele, e as claras usam um papel frio da mesma família.
   Carregado ANTES de style.css / features.css em todas as páginas.
   ========================================================================== */

:root {
  /* Índigo — a base da marca */
  --ys-void:      #07031A;
  --ys-ink:       #0B0420;
  --ys-raised:    #120A33;
  --ys-lift:      #1A1145;

  /* Teal — o meio do gradiente da marca */
  --ys-sea:       #0A2A47;
  --ys-sea-hi:    #0D3A5E;

  /* Menta — o verde real do logotipo */
  --ys-mint:      #00C87F;
  --ys-mint-hi:   #21E39B;
  --ys-mint-dark: #04A468;
  /* A menta pura sobre papel dá 2,95:1 — reprovado em texto.
     Esta é a versão para fundo claro (4,6:1 no papel, 5,1:1 no branco). */
  --ys-mint-ink:  #037F50;

  /* Claro */
  --ys-paper:     #F2F5FA;
  --ys-paper-hi:  #FFFFFF;
  --ys-head:      #0E1230;
  --ys-body:      #4C5570;
  --ys-hair:      #DEE4EF;

  /* Superfícies e fios sobre escuro */
  --ys-glass:     rgba(255, 255, 255, 0.04);
  --ys-glass-hi:  rgba(255, 255, 255, 0.07);
  --ys-wire:      rgba(255, 255, 255, 0.09);

  /* Menta em alfa — usada em brilhos, bordas e anéis de foco */
  --ys-mint-08:   rgba(0, 200, 127, 0.08);
  --ys-mint-15:   rgba(0, 200, 127, 0.15);
  --ys-mint-25:   rgba(0, 200, 127, 0.25);
  --ys-mint-40:   rgba(0, 200, 127, 0.40);
}

/* --------------------------------------------------------------------------
   1. A ESPINHA — gradiente índigo -> teal que atravessa a página
   -------------------------------------------------------------------------- */
.ys-spine {
  background:
    linear-gradient(180deg,
      var(--ys-ink)   0%,
      var(--ys-void) 38%,
      #08122E        68%,
      var(--ys-sea) 100%);
}

/* Brilho de menta posicionável: <div class="ys-bloom" style="--bloom-x:50%"> */
.ys-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    var(--bloom-size, 60% 55%) at var(--bloom-x, 50%) var(--bloom-y, 50%),
    var(--ys-mint-15),
    transparent 70%);
}

/* Malha técnica — o "papel milimetrado" das telas do produto */
.ys-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 55%, transparent 100%);
}

/* --------------------------------------------------------------------------
   2. COSTURAS — as passagens entre claro e escuro deixam de ser cortes secos
   -------------------------------------------------------------------------- */
.ys-seam {
  position: relative;
}

/* Escuro -> claro: um horizonte, não um corte.
   Fio de menta na junta + um véu curto de teal que o papel absorve. */
.ys-seam--enter-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(180deg,
    rgba(10, 42, 71, 0.22) 0%,
    rgba(10, 42, 71, 0.08) 34%,
    rgba(10, 42, 71, 0)   100%);
  pointer-events: none;
}

/* Claro -> escuro: rampa curta e acelerada.
   Um degradê longo do índigo sobre o papel passa por um cinza lavanda sujo
   no meio do caminho; concentrando a transição no fim, a junta fica limpa. */
.ys-seam--exit-dark::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(11, 4, 32, 0)    0%,
    rgba(11, 4, 32, 0.03) 52%,
    rgba(11, 4, 32, 0.16) 74%,
    rgba(11, 4, 32, 0.55) 89%,
    var(--ys-ink)        100%);
  pointer-events: none;
}

/* Fio de menta que marca a junta */
.ys-hairline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ys-mint-40), transparent);
}

/* --------------------------------------------------------------------------
   3. SUPERFÍCIE CLARA — papel frio, da mesma família do índigo
   -------------------------------------------------------------------------- */
.ys-paper {
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--ys-paper) 55%, #E9EEF7 100%);
  color: var(--ys-body);
}

/* Seção clara que vem logo após outra: continua de onde a anterior parou,
   em vez de reiniciar o branco no topo (o que criaria uma faixa visível). */
.ys-paper--cont {
  background: linear-gradient(180deg, #E9EEF7 0%, var(--ys-paper) 34%, #EDF1F8 100%);
  color: var(--ys-body);
}

.ys-card {
  background: var(--ys-paper-hi);
  border: 1px solid var(--ys-hair);
  box-shadow:
    0 1px 2px rgba(14, 18, 48, 0.04),
    0 8px 24px -12px rgba(14, 18, 48, 0.14);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.ys-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 200, 127, 0.35);
  box-shadow:
    0 1px 2px rgba(14, 18, 48, 0.04),
    0 18px 40px -18px rgba(14, 18, 48, 0.22),
    0 0 0 1px var(--ys-mint-15);
}

/* --------------------------------------------------------------------------
   4. BOTÃO PRIMÁRIO — menta da marca, não o verde genérico do WhatsApp
   -------------------------------------------------------------------------- */
.btn-premium {
  background: linear-gradient(135deg, var(--ys-mint-hi) 0%, var(--ys-mint) 55%, var(--ys-mint-dark) 100%);
  color: #04231A !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 14px var(--ys-mint-25),
    0 0 0 1px var(--ys-mint-40);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.3s ease;
}

.btn-premium:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 28px var(--ys-mint-40),
    0 0 0 1px rgba(0, 200, 127, 0.6);
}

/* Secundário — contorno de menta. O topo não compete com o CTA do hero:
   só um botão sólido por tela. */
.btn-ghost {
  color: var(--ys-mint-hi);
  background: rgba(0, 200, 127, 0.07);
  box-shadow: inset 0 0 0 1px var(--ys-mint-40);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.btn-ghost:hover {
  color: #04231A;
  background: var(--ys-mint);
  box-shadow: inset 0 0 0 1px var(--ys-mint), 0 6px 18px var(--ys-mint-25);
}

/* --------------------------------------------------------------------------
   5. PISO DE QUALIDADE — foco visível, seleção, barra de rolagem
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ys-mint);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--ys-mint);
  color: #04231A;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ys-void); }
::-webkit-scrollbar-thumb {
  background: #2A2352;
  border: 2px solid var(--ys-void);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ys-mint-dark); }

@media (prefers-reduced-motion: reduce) {
  .ys-card { transition: none; }
  .ys-card:hover { transform: none; }
  .btn-premium { transition: none; }
  .btn-premium:hover { transform: none; }
}

/* ==========================================================================
   PLAYER DAS DEMONSTRAÇÕES (quadro parado -> anima sob demanda)
   ========================================================================== */
.demo-media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    line-height: 0;
    background: #0B0420;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.demo-media img {
    display: block;
    width: 100%;
    height: auto;          /* a proporção vem dos atributos width/height */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-media:hover img,
.demo-media.is-pinned img {
    transform: scale(1.015);
}

.demo-media:focus-visible {
    outline: 2px solid #00C87F;
    outline-offset: -2px;
}

/* Selo de convite — some assim que a demo começa a rodar */
.demo-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: rgba(11, 4, 32, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 200, 127, 0.35);
    color: #21E39B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.demo-media[aria-pressed="true"] .demo-hint {
    opacity: 0;
    transform: translateY(4px);
}

.demo-hint-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Enquanto o arquivo animado baixa */
.demo-media.is-loading .demo-hint-label::after {
    content: "…";
}

/* Um anel de menta marca a demo travada pelo clique */
.demo-media.is-pinned {
    box-shadow: inset 0 0 0 2px rgba(0, 200, 127, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .demo-media img,
    .demo-hint {
        transition: none;
    }
    .demo-media:hover img,
    .demo-media.is-pinned img {
        transform: none;
    }
}

/* ==========================================================================
   VISUALIZADOR AMPLIADO
   As capturas têm 900px de largura e no cartão aparecem com menos da metade
   disso — o texto da interface fica ilegível, ainda mais no celular. Aqui a
   demonstração roda em tamanho real e a pessoa arrasta para percorrer a tela.
   ========================================================================== */
.demo-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.demo-viewer.hidden { display: none; }

.demo-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 3, 26, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.demo-viewer-panel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: rgba(18, 10, 51, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(7, 3, 26, 0.8);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.99);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.demo-viewer.is-open .demo-viewer-backdrop { opacity: 1; }
.demo-viewer.is-open .demo-viewer-panel { opacity: 1; transform: none; }

.demo-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.demo-viewer-caption {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.demo-viewer-close {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #d4d4d8;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.demo-viewer-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.demo-viewer-close:focus-visible { outline: 2px solid #00C87F; outline-offset: 2px; }
.demo-viewer-close svg { width: 18px; height: 18px; }

/* A imagem fica em tamanho natural; a caixa é que rola */
.demo-viewer-scroll {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mesma cor do painel: em retrato sobra área em volta da captura
       landscape, e um vazio preto ali lê como player quebrado. */
    background: #0E0726;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.demo-viewer-scroll img {
    display: block;
    margin: 0 auto;
    max-width: 100%;       /* inteira na tela: nada cortado ao abrir */
    max-height: 72vh;
    width: auto;
    height: auto;
    cursor: zoom-in;

    /* Item flex nasce com min-width:auto e se recusa a encolher abaixo do
       tamanho natural (900px). O Blink deixa o max-width vencer; o WebKit
       não — e a imagem transbordava, obrigando a arrastar. */
    min-width: 0;
    min-height: 0;
    flex: 0 1 auto;
}

/* Ampliada: tamanho real, e aí sim a caixa rola */
.demo-viewer.is-zoomed .demo-viewer-scroll img {
    max-width: none;
    max-height: none;
    min-width: 0;
    cursor: zoom-out;
}

/* Sem flex a caixa não centraliza sozinha, mas nenhuma regra de tamanho
   mínimo automático se aplica: é o caminho que não depende do motor. */
@supports not (display: flex) {
    .demo-viewer-scroll { display: block; text-align: center; }
}

.demo-viewer-hint {
    margin: 0;
    padding: 10px 18px;
    font-size: 11px;
    color: #8b8b99;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Em tela larga a imagem já cabe inteira: a dica de arrastar não se aplica */
@media (max-width: 640px) {
    .demo-viewer { padding: 0; }

    .demo-viewer-panel {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .demo-viewer-scroll { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-viewer-backdrop,
    .demo-viewer-panel { transition: none; }
}

/* No celular o desfoque do selo não paga o custo de composição */
@media (max-width: 767px) {
    .demo-hint {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(11, 4, 32, 0.94);
    }
}