/* ==========================================================================
   Teste de Visão — Óticas Gassi
   Home (abertura + termo de ciência + seleção de unidade).

   Escopo: tudo aqui está sob `body.tv-home`, usado só em index.php.
   Nenhuma regra vaza para as páginas de teste, prepare, result ou admin.
   ========================================================================== */

.tv-home {
  /* Tinta ---------------------------------------------------------------- */
  --ink:        #22262b;   /* corpo de texto — 15.2:1 no branco             */
  --ink-2:      #32373e;   /* títulos e traços — herdado dos SVG do fluxo   */
  --muted:      #54606d;   /* apoio — 5.6:1 sobre #ECF0F4, tingido de frio  */

  /* Superfícies ---------------------------------------------------------- */
  --surface:    #ecf0f4;   /* superfície clínica já usada nos modais        */
  --surface-0:  rgba(236, 240, 244, 0);
  --paper:      #ffffff;
  --line:       #d7dfe6;
  --dot:        #b3c0cc;

  /* Marca ---------------------------------------------------------------- */
  --red:        #c70612;   /* amostrado do padrão de pontos em PAG_01.png   */
  --red-deep:   #9a040e;
  --red-wash:   #fdf1f2;

  --shell:      41rem;     /* medida de leitura ~71ch no termo              */

  font-family: "ZEISS Frutiger Next", "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(199, 6, 18, .12);
  text-size-adjust: 100%;
}

/* Superfícies do navegador que ninguém desenha, mas que também vestem a página */
.tv-home ::selection      { background: rgba(199, 6, 18, .16); color: var(--ink); }
.tv-home                  { caret-color: var(--red); accent-color: var(--red); }
.tv-home :focus-visible   { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.tv-home :focus:not(:focus-visible) { outline: none; }

.tv-home *::-webkit-scrollbar          { width: 10px; height: 10px; }
.tv-home *::-webkit-scrollbar-track    { background: transparent; }
.tv-home *::-webkit-scrollbar-thumb    { background: var(--line); border-radius: 99px;
                                         border: 3px solid var(--surface); }
.tv-home *::-webkit-scrollbar-thumb:hover { background: #bdc9d4; }
.tv-home * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }


/* ==========================================================================
   1. Abertura
   ========================================================================== */

/* `.div1` também serve o admin — por isso o escopo. */
.tv-home .div1 {
  height: 100%;
  min-height: 100%;
  padding: 0;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

/* setText() reescreve a classe de #divgeral e #divgeral2 a cada resize.
   Por isso estes dois são estilizados por ID, nunca por classe. */
.tv-home #divgeral,
.tv-home #divgeral2 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.tv-home #divgeral {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* O hero — a fachada da loja-conceito. A cunha diagonal branca na base da arte
   já faz a transição para o conteúdo, então ela nunca pode ser cortada: se a
   altura apertar, o corte vem de cima (`object-position` ancorado embaixo). */
.tv-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 933;
  object-fit: cover;
  object-position: 50% 100%;
  max-height: 46dvh;
}

.tv-lede {
  width: min(100% - 2.5rem, 31rem);
  margin: 0 auto;
  padding: clamp(.75rem, 3.5vw, 1.75rem) 0 2.5rem;
  text-align: center;
  flex: 1 0 auto;
}

.tv-lede__title {
  margin: 0;
  font-family: Cinzel, "ZEISS Frutiger Next", serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 7.4vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: .025em;
  color: var(--ink-2);
  text-wrap: balance;
}

.tv-lede__sub {
  margin: .95rem 0 0;
  font-size: clamp(1rem, 3.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ==========================================================================
   2. Botões
   ========================================================================== */

.tv-home .tv-btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(34, 38, 43, .16), 0 6px 14px -8px rgba(34, 38, 43, .5);
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1),
              box-shadow    .18s cubic-bezier(.16, 1, .3, 1),
              transform     .12s cubic-bezier(.16, 1, .3, 1);
}

.tv-home .tv-btn:hover  { --btn-bg: var(--red-deep);
                          box-shadow: 0 2px 4px rgba(34,38,43,.18), 0 10px 20px -8px rgba(34,38,43,.55); }
.tv-home .tv-btn:active { transform: translateY(1px);
                          box-shadow: 0 1px 1px rgba(34,38,43,.2); }

.tv-home .tv-btn[disabled] {
  --btn-bg: #cfd8e0;
  --btn-fg: #6b7681;
  cursor: not-allowed;
  box-shadow: none;
}

.tv-lede .tv-btn { margin-top: 1.6rem; }

/* Linha de garantias — fatos verificáveis, não selos.
   O ponto é inline: se a lista quebrar, ele quebra junto com o item. */
.tv-facts {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .55rem;
  font-size: .875rem;
  color: var(--muted);
}

.tv-facts li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--dot);
  vertical-align: middle;
}


/* ==========================================================================
   3. Termo de ciência (#etapa1)
   --------------------------------------------------------------------------
   Contrato com o script.js:
     • #etapa1 recebe attr("class","collapse") ao aceitar — logo NENHUMA regra
       aqui pode definir display por #etapa1, ou ele nunca some.
     • #etapa2 mantém .collapse do Bootstrap. `.collapse:not(.show)` tem
       especificidade 0,2,0 — a mesma de `.tv-home .tv-prep` — e o home.css
       carrega depois, então empate revelaria o carrossel cedo. Daí o
       `:not(.collapse)`, que só casa quando o Bootstrap já liberou.
     • #textoinfo é alvo de setText() e precisa continuar existindo aqui.
   ========================================================================== */

.tv-home .modal-fullscreen .modal-header {
  padding: .35rem .5rem;
  border: 0;
  min-height: 3rem;
}

.tv-home .modal-header .btn-close {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0 auto;
  padding: 0;
  opacity: .55;
  border-radius: 50%;
  transition: opacity .18s ease-out, background-color .18s ease-out;
}
.tv-home .modal-header .btn-close:hover { opacity: 1; background-color: rgba(34, 38, 43, .06); }

/* Só o eixo vertical muda: com `justify-content: center` o topo de um texto
   mais alto que a janela fica inalcançável no scroll. O `align-items: center`
   herdado do style.css FICA — é ele que mantém o carrossel de preparo
   encolhido ao próprio conteúdo, e trocá-lo por `stretch` esticava o
   `col-7` da mãozinha para a largura toda do modal. */
.tv-home #modal1 {
  justify-content: flex-start;
  padding: 0;
}

/* O termo, ao contrário, precisa da largura toda (a barra fixa sangra até as
   bordas). Só largura: definir `display` aqui quebraria o .collapse do aceite. */
.tv-home #etapa1 { width: 100%; }

/* Devolve ao carrossel de preparo a centralização vertical que #modal1 tinha. */
.tv-home .tv-prep:not(.collapse) {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 .75rem 1.5rem;
}

.tv-home #nextcarousel {
  min-width: 13rem;
  min-height: 3rem;
  padding: .7rem 1.75rem;
  border: 0;
  border-radius: 6px;
  background-color: var(--red);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(34, 38, 43, .16), 0 6px 14px -8px rgba(34, 38, 43, .5);
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1);
}
.tv-home #nextcarousel:hover { background-color: var(--red-deep); }

.tv-home .carousel-indicators .btn3.active { background-color: var(--red); }

.tv-home #etapa1 #textoinfo {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.cs {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.cs__mark { display: block; margin: .25rem auto 1.6rem; color: var(--ink-2); }

.cs__title {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink-2);
  text-wrap: balance;
}

/* A negativa ganha a própria linha — é a frase que precisa sobreviver
   a uma leitura de três segundos. */
.cs__title em { display: block; font-style: normal; color: var(--red); }

.cs .cs__lead {
  margin: 1.35rem 0 0;
  font-size: clamp(1.02rem, 3.4vw, 1.12rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.cs__rule { margin: 1.75rem 0 0; border: 0; border-top: 1px solid var(--line); }

.cs h3 {
  margin: 2.4rem 0 .55rem;   /* mais ar acima do título do que abaixo */
  font-size: 1.075rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink-2);
  text-wrap: balance;
}

.cs__rule + h3 { margin-top: 1.75rem; }

.cs p {
  margin: 0 0 .85rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

.cs p:last-child { margin-bottom: 0; }
.cs strong       { font-weight: 700; color: var(--ink); }

/* --- As negativas: lista tipográfica, sem ícone e sem cartão -------------- */

.cs__nots {
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.cs__nots li {
  padding: .8rem .1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}

.cs__nots strong { font-weight: 700; color: var(--ink-2); }

/* --- Fatores de interferência: aposto leve que quebra o bloco de texto ---- */

.cs__factors {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .9375rem;
  color: var(--muted);
}

.cs__factors li {
  padding: .28rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  line-height: 1.4;
}

/* --- "Importante": superfície recuada, sem barra lateral colorida --------- */

.cs__note {
  margin: 2.4rem 0 0;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--red-wash);
  border: 1px solid #f2d4d7;
  border-radius: 8px;
}

.cs__note h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  color: var(--red-deep);
}

.cs__note svg { flex: none; color: var(--red); }
.cs__note p   { color: var(--ink); }

/* --- Letra miúda ---------------------------------------------------------- */

.cs__fine {
  margin: 2rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.cs__fine p {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* --- Barra de consentimento ---------------------------------------------
   Irmã de .cs, não filha: ocupa a largura do modal enquanto o texto fica na
   medida de leitura. A degradê acima dissolve o texto em vez de guilhotiná-lo.
   ------------------------------------------------------------------------ */

.cs__bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 2.25rem;
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line);
}

.cs__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2.75rem;
  background: linear-gradient(to top, var(--surface), var(--surface-0));
  pointer-events: none;
}

.cs__bar__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1.15rem 1.25rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
}

.cs__progress {
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .cs__progress {
    animation: tv-progress linear both;
    animation-timeline: scroll(nearest);
  }
}

@keyframes tv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cs__bar .tv-btn { font-size: .98rem; }

.cs__bar .cs__hint {
  margin: .7rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
  color: var(--muted);
}


/* ==========================================================================
   4. Seleção de unidade (#modallojas) — a primeira tela que o visitante vê
   ========================================================================== */

.tv-home #modallojas .modal-content {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 48px -12px rgba(34, 38, 43, .45);
}

.tv-home #modallojas .modal-body { padding: 0; background: var(--paper); }

.tv-store__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tv-store__pad { padding: 1.5rem 1.35rem 1.6rem; }

.tv-store__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-2);
  text-wrap: balance;
}

.tv-store__sub {
  margin: .4rem 0 1.1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.tv-home #selectloja {
  min-height: 3.25rem;
  padding: .5rem 2.5rem .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--paper);
  font-size: 1.02rem;
  color: var(--ink);
}

.tv-home #selectloja:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(199, 6, 18, .15);
}

.tv-home #modallojas .modal-footer {
  padding: 0 1.35rem 1.5rem;
  border: 0;
  background: var(--paper);
}

.tv-home #modallojas .modal-footer > * { margin: 0; }


/* ==========================================================================
   5. Movimento — um único momento: a página entra em foco
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .tv-hero__img   { animation: tv-focus 1.15s cubic-bezier(.16, 1, .3, 1) both; }
  .tv-lede__title { animation: tv-rise  .85s cubic-bezier(.16, 1, .3, 1) .10s both; }
  .tv-lede__sub   { animation: tv-rise  .85s cubic-bezier(.16, 1, .3, 1) .17s both; }
  .tv-lede .tv-btn{ animation: tv-rise  .85s cubic-bezier(.16, 1, .3, 1) .24s both; }
  .tv-facts       { animation: tv-rise  .85s cubic-bezier(.16, 1, .3, 1) .31s both; }

  @keyframes tv-focus {
    from { opacity: 0; filter: blur(10px); transform: scale(1.035); }
    to   { opacity: 1; filter: blur(0);    transform: none; }
  }

  @keyframes tv-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}


/* ==========================================================================
   6. Telas maiores
   --------------------------------------------------------------------------
   A abertura vira uma coluna centrada: um hero de 1440px ao lado de um texto
   de 500px lê como acidente, e cortar a arte para caber mataria a cunha.
   ========================================================================== */

@media (min-width: 768px) {
  .tv-home #divgeral { max-width: 48rem; margin-inline: auto; }
  .tv-hero__img      { max-height: none; }
  .tv-lede           { padding-bottom: 3rem; }

  .cs          { padding-inline: 2rem; }
  .cs__bar__in { padding-inline: 2rem; }
  .cs__nots li { padding: .9rem .1rem; }
}