/* Faixa vinho: da prova até o rodapé a página inteira vira bordô.
   Camada por cima do pagina.css, só com o que muda de cor. Os cards de plano seguem brancos para saltar. */
.faixa-vinho,
.palco-gruda {
  --vinho-escuro: #3a050b;
  --vinho-texto: rgba(247, 228, 199, 0.8);
  --vinho-texto-fraco: rgba(247, 228, 199, 0.62);
  --vinho-linha: rgba(247, 228, 199, 0.16);
  background: var(--acento);
  color: var(--creme);
}

/* Cantos curvos em cima (chega por cima do bege) e embaixo (desliza por cima do rodapé revelado), com sombra dos dois lados. */
.faixa-vinho {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  border-radius: var(--raio-faixa);
  box-shadow:
    0 -24px 60px -30px rgba(40, 5, 8, 0.55),
    0 28px 60px -24px rgba(20, 2, 4, 0.75);
}

.faixa-vinho h2,
.faixa-vinho h3 {
  color: var(--branco);
}

/* Mesmo destaque do fechamento: creme com brilho branco, senão bordô some no bordô. */
.faixa-vinho h2 .destaque,
.faixa-vinho h3 .destaque {
  background-image: linear-gradient(
    100deg,
    var(--creme) 0%,
    var(--creme) 40%,
    #ffffff 50%,
    var(--creme) 60%,
    var(--creme) 100%
  );
}

.faixa-vinho ::selection {
  background: var(--creme);
  color: var(--acento);
}

.faixa-vinho h2 .destaque::selection,
.faixa-vinho h3 .destaque::selection {
  -webkit-text-fill-color: var(--acento);
  color: var(--acento);
  background: var(--creme);
}

.faixa-vinho .plano-card ::selection {
  background: var(--acento);
  color: var(--creme);
}

.faixa-vinho .secao-sub {
  color: var(--vinho-texto);
}

/* Prova */
/* Fundo: o caixa à noite (caderno à esquerda, cupom e calculadora à direita, meio vazio). O véu escuro no centro
   segura o título em creme por cima do papel claro do caderno. A cor chapada fica até a foto carregar. */
.faixa-vinho .prova-historia {
  background:
    radial-gradient(55% 80% at 50% 50%, rgba(43, 1, 4, 0.85) 0%, rgba(43, 1, 4, 0) 100%),
    url("fotos/caixa-noite.webp") center 55% / cover no-repeat,
    var(--vinho-escuro);
}

/* No celular a foto deitada punha as pontas dos objetos atrás do texto (dono reprovou). Aqui vai a versão em pé:
   objetos numa faixa nos 30% de baixo, o resto escuro. Encaixada pela largura e presa embaixo; o espaço sob o
   texto (45% da largura = 30% da altura da foto 2:3) deixa a faixa inteira abaixo das letras. A cor é a do alto da foto. */
@media (max-width: 900px) {
  .faixa-vinho .prova-historia {
    padding-bottom: calc(45% + 8px);
    background: url("fotos/caixa-noite-celular.webp") center bottom / 100% auto no-repeat, #200003;
  }
}

.faixa-vinho .prova-historia p {
  color: var(--vinho-texto);
}

/* Depoimentos */
.faixa-vinho .depoimento {
  border-color: var(--vinho-linha);
  background: var(--vinho-escuro);
}

.faixa-vinho .marquee-reverso .depoimento {
  background: rgba(58, 5, 11, 0.55);
}

.faixa-vinho .depoimento strong {
  color: var(--branco);
}

.faixa-vinho .depoimento small {
  color: var(--vinho-texto-fraco);
}

.faixa-vinho .depoimento blockquote {
  color: var(--vinho-texto);
}

.faixa-vinho .avatar {
  background: rgba(247, 228, 199, 0.14);
  color: var(--creme);
}

.faixa-vinho .avatar-creme {
  background: var(--creme);
  color: var(--acento);
}

/* Planos: quadriculado, moldura e ícones dos cantos em creme; os cards brancos voltam ao texto escuro. */
.faixa-vinho #oferta {
  --grade: rgba(247, 228, 199, 0.06);
}

.faixa-vinho .planos-moldura {
  border-color: var(--vinho-linha);
}

.faixa-vinho .canto {
  border-color: var(--vinho-linha);
  background: var(--acento);
  color: var(--creme);
}

.faixa-vinho .plano-card {
  color: var(--texto);
}

.faixa-vinho .plano-card.destaque {
  box-shadow:
    0 0 0 3px rgba(247, 228, 199, 0.35),
    0 26px 50px -20px rgba(20, 2, 4, 0.6);
}

.faixa-vinho .alternar-plano {
  box-shadow: 0 14px 30px -18px rgba(20, 2, 4, 0.6);
}

.faixa-vinho .contorno-gira::before {
  background: conic-gradient(
    from var(--giro, 0deg),
    var(--vinho-linha) 0deg,
    var(--creme) 50deg,
    var(--vinho-linha) 110deg,
    var(--vinho-linha) 180deg,
    var(--creme) 230deg,
    var(--vinho-linha) 290deg
  );
}

/* Dúvidas: cada pergunta vira um card vinho escuro. */
.faixa-vinho .faq details {
  margin-bottom: 10px;
  padding: 16px 22px;
  border-bottom: 0;
  border-radius: var(--raio-m);
  background: var(--vinho-escuro);
}

.faixa-vinho .faq summary:hover,
.faixa-vinho .faq summary:hover .icone,
.faixa-vinho .faq summary:focus-visible,
.faixa-vinho .faq summary:focus-visible .icone {
  color: var(--branco);
}

/* Cada pergunta em uma linha: no celular a fonte encolhe com a largura em vez de quebrar.
   13,2 = largura da pergunta mais longa em "em" (mediu 12,84) com folga; 72px = padding + ícone + gap.
   Pergunta nova mais longa exige recalibrar. */
.faixa-vinho .faq {
  container-type: inline-size;
}

@media (max-width: 900px) {
  .faixa-vinho .faq details {
    padding: 14px 18px;
  }

  .faixa-vinho .faq summary {
    font-size: min(17px, calc((100cqi - 72px) / 13.2));
  }
}

.faixa-vinho .faq details p {
  color: var(--vinho-texto);
}

/* Fechamento: no fundo bordô o card passa a vinho escuro para continuar sendo um bloco. */
.palco-gruda .fechamento {
  background: var(--vinho-escuro);
  box-shadow: inset 0 0 0 1px var(--vinho-linha);
}