@charset "UTF-8";
/* ==========================================================================
   CRISTOFOLI — Estilos por página / seção
   Depende de tokens.css + base.css.

   Gerado a partir de scss/pages.scss — não edite css/pages.css diretamente.
   Compilar com: npm run build:css
   ========================================================================== */
/* ==========================================================================
   HOME
   ========================================================================== */
/* Banner */
.banner {
  width: 100%;
  background: #1a1a1c;
}

.banner-slide {
  width: 100%;
}
.banner-slide img {
  width: 100%;
  height: calc(100vh - 85px);
  object-fit: cover;
  object-position: center;
}

.owl-banner .owl-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
}
.owl-banner .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.55);
}
.owl-banner .owl-dots .owl-dot.active span {
  background: var(--amarelo);
}

/* Especificidade de 2 classes: precisa vencer o próprio CSS do Owl Carousel
   (".owl-carousel.owl-loaded { display: block }"), que senão sobrescreve o
   display:none e faz os dois banners (desktop + mobile) aparecerem juntos. */
.owl-carousel.owl-banner--mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .owl-carousel.owl-banner--desktop {
    display: none;
  }
  .owl-carousel.owl-banner--mobile {
    display: block;
  }
}

/* Manifesto */
.manifesto {
  text-align: center;
  padding-block: clamp(3.5rem, 10vw, 150px);
}

.manifesto__title {
  margin-inline: auto;
  max-width: 100%;
  text-align: left;
}

/* nowrap só no desktop (>=992px) para preservar as 3 linhas; abaixo, quebra natural.
   Usa 992px exato (não o mixin bp-lg-up de 1024px) para casar com o
   contraponto @include m.bp-md-down (991.98px) logo abaixo. */
@media (min-width: 992px) {
  .manifesto__title {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
  .manifesto__title .line {
    white-space: nowrap;
  }
  .manifesto__title .line.line--indent-1 {
    text-align: center;
  }
  .manifesto__title .line.line--indent-2 {
    text-align: right;
  }
}
.manifesto__sub {
  margin: 0;
  margin-top: 20px;
  color: var(--marrom);
  text-align: left;
  max-width: 40ch;
  text-transform: none; /* .headline (ancestral) força uppercase; texto complementar deve ficar como digitado. */
}

/* Variante centralizada (página interna da Experiência). */
.manifesto__title--center {
  text-align: center;
}
.manifesto__title--center .line {
  text-align: center;
  /* títulos longos quebram em várias linhas centralizadas (vence o nowrap do desktop) */
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.manifesto__sub--center {
  text-align: center;
  margin-inline: auto;
  max-width: 60ch;
}

@media (max-width: 767.98px) {
  .manifesto__title {
    text-align: center;
  }
  .manifesto__title .line {
    white-space: normal;
  }
  .manifesto__sub {
    margin-left: 0;
    margin-inline: auto;
    text-align: center;
  }
}
/* Bloco verde */
.green-block {
  overflow: hidden;
}

.green-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.green-block__text {
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.green-block__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Os 4 itens (A Cristofoli / Experiências / Gastronomia / Loja) têm todos a
   mesma tipografia por padrão — nenhum se destaca dos outros. */
.green-block__link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--creme);
  width: max-content;
  max-width: 100%;
  font-weight: 400;
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.green-block__link:hover {
  color: var(--amarelo);
  transform: translateX(8px);
}

/* Texto que aparece ao lado do item só no hover/foco — mesma tipografia que
   "Nossa história" usava (serif, itálico, 600, 0.9rem, opacidade 0.85). */
.green-block__hint {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--creme);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.green-block__link:hover .green-block__hint,
.green-block__link:focus .green-block__hint,
.green-block__link:focus-visible .green-block__hint {
  opacity: 0.85;
  transform: translateX(0);
}

.green-block__media {
  position: relative;
  min-height: 320px;
}
.green-block__media img {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.green-block__media img.is-swapping {
  opacity: 0;
}

@media (max-width: 991.98px) {
  .green-block__grid {
    grid-template-columns: 1fr;
  }
  .green-block__media {
    min-height: 380px;
    order: -1;
  }
}
/* Nossos produtos */
.products__head {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.products__title {
  color: var(--marrom);
  margin-bottom: 1rem;
}

.products__sub {
  color: var(--texto-suave);
}

.products__grid {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.products__grid > * {
  min-width: 0;
}

/* Carrossel de Linhas (usado quando há mais de 4 linhas cadastradas):
   substitui o grid acima por um Owl Carousel com setas e arrastar.
   NÃO forçar display:block aqui: o próprio CSS do Owl Carousel já cuida
   disso (".owl-carousel{display:none}" até o JS inicializar e adicionar
   ".owl-loaded"). Sobrescrever isso fazia os itens (sobretudo os do
   mega-menu "Produtos", inicializado só no primeiro hover) aparecerem
   "crus" — sem grid nem carrossel — ocupando um espaço enorme mesmo
   estando visualmente escondidos, e inflando a altura da página. */
.owl-linhas .owl-stage {
  display: flex;
  align-items: flex-start;
}
.owl-linhas .owl-item {
  min-width: 0;
}

.owl-linhas .owl-nav button.owl-prev,
.owl-linhas .owl-nav button.owl-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--marrom);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-fast) var(--ease-out);
}
.owl-linhas .owl-nav button.owl-prev:hover,
.owl-linhas .owl-nav button.owl-next:hover {
  background: var(--amarelo);
}
.owl-linhas .owl-nav button.owl-prev {
  left: -6px;
}
.owl-linhas .owl-nav button.owl-next {
  right: -6px;
}
.owl-linhas.owl-carousel {
  position: relative;
  padding-inline: 2.5rem;
}
.owl-megamenu.owl-carousel {
  padding-inline: 2rem;
}

/* Cada produto: bloco centralizado (rótulo no meio, sob o círculo) */
.circle-product {
  display: block;
  text-align: center;
}

.circle-product__label {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 5vw, 2rem);
  }
}
/* Bloco vinho */
.wine-block {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  min-height: 750px;
  display: flex;
  align-items: center;
}

.wine-block__pattern {
  position: absolute;
  inset: 0;
  background-image: url(../img/inicial/fundo.svg);
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wine-block__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.wine-block__arch {
  margin: 0 auto 1.5rem;
  width: clamp(120px, 16vw, 160px);
  height: auto;
}

.wine-block__title {
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}

.wine-block__text {
  color: rgba(251, 244, 224, 0.9);
  margin-bottom: 2rem;
}

/* ==========================================================================
   HERO DE PÁGINA (experiências / vinhos / blog / contato)
   ========================================================================== */
.page-hero {
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-hero__title {
  display: inline-block;
  text-align: left;
  margin-bottom: 1.5rem;
}
.page-hero__title .line--indent-1 {
  text-align: center;
}

.page-hero__sub {
  color: var(--texto-suave);
  max-width: 52ch;
  margin-inline: auto;
}

.pb-section {
  padding-bottom: clamp(4rem, 9vw, 8rem);
}

.page-hero--left {
  text-align: left;
}
.page-hero--left .page-hero__sub {
  margin-left: 0;
}

/* ==========================================================================
   EXPERIÊNCIA INTERNA
   ========================================================================== */
.includes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.includes__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
}

.owl-includes.owl-carousel,
.owl-includes .owl-stage-outer,
.owl-includes .owl-item,
.includes__slide {
  height: 100%;
}
.owl-includes.owl-carousel {
  position: relative;
}
.owl-includes .owl-nav button.owl-prev,
.owl-includes .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--marrom);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.owl-includes .owl-nav button.owl-prev:hover,
.owl-includes .owl-nav button.owl-next:hover {
  background: var(--amarelo);
}
.owl-includes .owl-nav button.owl-prev {
  left: 1rem;
}
.owl-includes .owl-nav button.owl-next {
  right: 1rem;
}
.owl-includes .owl-dots {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  z-index: 2;
}
.owl-includes .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.6);
}
.owl-includes .owl-dots .owl-dot.active span {
  background: var(--amarelo);
}

.includes__panel {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
}

.includes__title {
  color: var(--marrom);
  margin-bottom: 1.5rem;
}

.includes__list {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.includes__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-text-m);
  line-height: 1.5;
}
.includes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marrom);
}

@media (max-width: 991.98px) {
  .includes__grid {
    grid-template-columns: 1fr;
  }
  .includes__media {
    order: -1;
  }
  .includes__media img {
    min-height: 320px;
  }
}
/* Informações úteis */
.info-visit__head {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.info-visit__title {
  color: var(--marrom);
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.info-visit__sub {
  color: var(--texto-suave);
}

.info-visit__grid {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.info-col {
  border-left: 1px solid var(--linha);
  padding-left: 1.5rem;
}
.info-col:first-child {
  border-left: 0;
  padding-left: 0;
}

.info-col__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marrom);
  margin-bottom: 0.75rem;
}

.info-col .text-m {
  color: var(--marrom);
}
.info-col .text-m p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .info-col {
    border-left: 0;
    padding-left: 0;
  }
}
/* Valores (vinho) — --values-bg/--values-color permitem sobrescrever a cor
   por experiência (campos ACF "Cor de Fundo"/"Cor do Texto" da seção). */
.values {
  background-color: var(--values-bg, var(--vinho-escuro));
  color: var(--values-color, var(--creme));
}

.values__title {
  color: var(--values-color, var(--creme));
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
}

.values__list {
  display: grid;
  gap: 0.85rem;
  max-width: 30rem;
}
.values__list li {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  font-size: var(--fs-text-m);
  color: var(--values-color, rgba(251, 244, 224, 0.92));
  padding-bottom: 0.2rem;
}
/* O valor vem de um editor WYSIWYG: respeita parágrafos, quebras, negrito e
   links como digitados no painel (nada de nowrap/inline/negrito forçado). */
.values__list .values__valor {
  flex: 1 1 12rem;
  min-width: 0;
}
.values__list .values__valor p {
  margin: 0 0 0.75rem;
}
.values__list .values__valor p:last-child {
  margin-bottom: 0;
}
.values__list .values__valor a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Links e botão da seção seguem as cores definidas nos campos da experiência. */
.values a:not(.btn-cris) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.values .btn-cris--values {
  border-color: var(--values-color, var(--creme));
  color: var(--values-color, var(--creme));
  background: transparent;
}
.values .btn-cris--values:hover,
.values .btn-cris--values:focus-visible {
  background: var(--values-color, var(--creme));
  border-color: var(--values-color, var(--creme));
  color: var(--values-bg, var(--vinho-escuro));
}
.values__policy {
  margin-top: 1.5rem;
  max-width: 26rem;
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.values__media {
  max-width: 320px;
  margin-right: auto;
  margin-bottom: 1.75rem;
}
.values__media img {
  width: 100%;
}

.values__note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--values-color, rgba(251, 244, 224, 0.85));
  margin-bottom: 1.75rem;
}
.values__note strong {
  color: var(--values-color, var(--creme));
}

@media (max-width: 991.98px) {
  .values__media {
    margin-inline: 0;
  }
}
/* Fotos sobrepostas (colagem) — duas fotos se sobrepondo, selo no canto */
.overlap__stage {
  position: relative;
  min-height: clamp(360px, 44vw, 560px);
  max-width: 900px;
  margin-inline: auto;
}

.overlap__img {
  position: absolute;
  border-radius: 2px;
}

.overlap__img--1 {
  width: 41%;
  left: 3%;
  top: 8%;
  transform: rotate(-2deg);
  z-index: 1;
}

.overlap__img--2 {
  width: 50%;
  left: 35%;
  top: 0;
  transform: rotate(6deg);
  z-index: 2;
}

.overlap__seal {
  position: absolute;
  width: 20%;
  max-width: 180px;
  left: 72%;
  bottom: 30%;
  z-index: 3;
}

@media (max-width: 767.98px) {
  .overlap__img--1 {
    position: static;
    transform: rotate(-3deg);
    margin-bottom: -3rem;
    width: 70%;
  }
  .overlap__img--2 {
    position: static;
    transform: rotate(3deg);
    margin-left: auto;
    width: 60%;
  }
  .overlap__stage {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 1rem;
  }
  .overlap__seal {
    position: static;
    width: clamp(110px, 30vw, 140px);
    margin: 1rem auto 0;
  }
}
/* ==========================================================================
   VINHOS / PRODUTO INTERNO
   ========================================================================== */
.wines-grid {
  max-width: 1100px;
  margin-inline: auto;
}

.product-card {
  margin-top: 50px;
}

.product-card__media {
  aspect-ratio: 3/4;
}

/* Hero do produto */
.product-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(300px, 50vw, 740px);
  padding: 40px 0px;
}

.product-hero__arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(230px, 50vw, 700px);
  height: clamp(300px, 50vw, 740px);
  background: var(--amarelo);
  border-radius: 999px 999px 0 0;
  z-index: 0;
}

.product-hero__bottle {
  position: relative;
  z-index: 1;
  /* Altura/largura explícitas: Safari não resolve max-height em % dentro de
     flex, e o rótulo "estourava" o palco. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.product-hero__eyebrow {
  color: var(--laranja);
}

.product-hero__title {
  color: var(--marrom);
  margin-bottom: 2rem;
  text-transform: none;
}

.spec {
  margin-bottom: 2rem;
  max-width: 30rem;
}

.spec__row {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linha);
}
.spec__row dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-bottom: 0.25rem;
}
.spec__row dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  color: var(--marrom);
}
.spec__row dd p:last-child {
  margin-bottom: 0;
}

/* Conceito (vinho) */
.concept__title {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  color: var(--creme);
  line-height: 1.35;
  margin-bottom: 1.75rem;
}

/* Título (h5) e texto compartilham a mesma largura máxima, para as bordas
   direitas ficarem alinhadas. */
.concept {
  --concept-measure: 31.5rem;
}
.concept .alinhamento > .h5 {
  max-width: var(--concept-measure);
}

.concept__text {
  color: rgba(251, 244, 224, 0.9);
  max-width: var(--concept-measure);
}

.concept__media img {
  width: 100%;
}
/* Galeria (carrossel .owl-includes): proporção fixa para a altura não pular
   entre fotos de tamanhos diferentes. */
.concept__media .owl-concept img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* Análise sensorial */
.sensory__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.sensory__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sensory__text {
  padding-right: 0px;
  padding: 30px 15px;
  max-width: 500px;
  margin: 0 auto;
}

.sensory__title {
  color: var(--marrom);
  margin-bottom: 1.75rem;
  font-size: 1.05rem;
}

.sensory__block {
  margin-bottom: 1.5rem;
}
.sensory__block h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marrom);
  margin-bottom: 0.4rem;
}
.sensory__block .text-m {
  color: var(--texto-suave);
}
.sensory__block .text-m p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .sensory__grid {
    grid-template-columns: 1fr;
  }
  .sensory__media {
    order: -1;
  }
  .sensory__text {
    padding-right: 0;
  }
}
/* Harmonização */
.harmony {
  overflow: hidden;
}

.harmony .alinhamento {
  padding-right: 0px;
  padding: 30px 15px;
  max-width: 500px;
  margin: 0;
}

.harmony__title {
  color: var(--marrom);
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}

.harmony__list {
  margin-top: 1.25rem;
}

/* Composição: forma 1 em cima da imagem (coluna esquerda) e formas 2/3/4
   alinhadas uma abaixo da outra (coluna direita). */
.harmony__frame {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  grid-template-rows: clamp(56px, 9vw, 120px) auto;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  align-items: stretch;
  max-width: 560px;
  margin-inline: auto;
}

.harmony__sh {
  display: block;
  background: var(--amarelo);
}

/* Forma 1 — topo da imagem */
.harmony__sh--1 {
  grid-column: 1;
  grid-row: 1;
  border-radius: 999px 999px 0 0;
}

/* Forma 2 — topo da coluna direita */
.harmony__sh--2 {
  grid-column: 2;
  grid-row: 1;
  border-radius: 999px 999px 0 0;
}

.harmony__media {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  overflow: hidden;
}
.harmony__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

/* Formas 3 e 4 — empilhadas na coluna direita, alinhadas à imagem */
.harmony__stack {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.harmony__sh--3 {
  flex: 1;
  border-radius: 0 0 999px 999px;
}

.harmony__sh--4 {
  flex: 1.25;
  border-radius: 999px 999px 0 0;
}

@media (max-width: 575.98px) {
  /* No mobile, mantém só a forma 1 sobre a imagem (limpo) */
  .harmony__frame {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(44px, 12vw, 80px) auto;
  }
  .harmony__sh--2,
  .harmony__stack {
    display: none;
  }
  .harmony__media {
    grid-column: 1;
  }
}
/* Relacionados */
.related__head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.related__title {
  color: var(--marrom);
  margin-bottom: 0.5rem;
}

.related__eyebrow {
  color: var(--texto-suave);
  letter-spacing: 0.14em;
}

.related .related__eyebrow {
  margin: 25px auto 50px auto;
}

/* ==========================================================================
   BLOG INTERNO (post)
   ========================================================================== */
.post__head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.post__head .page-hero__title,
.post__title {
  text-align: center;
  display: block;
}

.post__title .line--indent-1 {
  padding-left: 0;
}

.post__subtitle {
  margin-top: 1rem;
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* Imagem principal em formato de arco (topo curvo), sem fundo amarelo */
.post__hero {
  width: min(100%, 620px);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.post__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: center;
  border-radius: 999px 999px 0 0;
}

.post__body {
  max-width: 760px;
  margin-inline: auto;
}
.post__body p {
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  line-height: 1.75;
  color: var(--texto);
  margin-bottom: 1.4rem;
}

.post__subhead {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--marrom);
  margin: 2rem 0 1rem;
}

.pt-0 {
  padding-top: 0 !important;
}

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-block {
  margin-bottom: 2rem;
}

.contact-block__label {
  color: var(--marrom);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.contact-block .text-m {
  color: var(--texto);
  line-height: 1.8;
}

.contact-block a:hover {
  color: var(--laranja);
}

.contact-links {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.contact-links a {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}
.contact-links a:hover {
  transform: translateY(-3px);
}
.contact-links img {
  width: 30px;
  height: 30px;
}

.contact-media {
  position: relative;
  padding: 2rem 0;
  min-height: 360px;
}

.contact-media__photo {
  position: relative;
  z-index: 1;
  width: min(62%, 380px);
  margin-left: auto;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.contact-media__d1 {
  width: clamp(140px, 16vw, 220px);
  height: clamp(70px, 8vw, 110px);
  right: 0;
  top: 0;
  z-index: 0;
}

.contact-media__d2 {
  width: clamp(140px, 16vw, 220px);
  height: clamp(140px, 16vw, 220px);
  right: 0;
  top: 40%;
  border-radius: 999px 0 0 999px;
  z-index: 0;
}

.contact-media__d3 {
  width: clamp(120px, 14vw, 190px);
  height: clamp(60px, 7vw, 95px);
  right: 4%;
  bottom: 6%;
  z-index: 0;
}

@media (max-width: 767.98px) {
  .contact-media__photo {
    width: min(80%, 320px);
    margin-inline: auto;
  }
}
/* Horários */
.hours__head {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hours__title {
  color: var(--marrom);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.hours__sub {
  color: var(--texto-suave);
}

.hours__col {
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.hours__col--divider {
  border-left: 1px solid var(--linha);
}

.hours__col-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--marrom);
  margin-bottom: 1.25rem;
}

.hours__col .text-m {
  color: var(--texto-suave);
  margin-bottom: 0.85rem;
}

@media (max-width: 767.98px) {
  .hours__col--divider {
    border-left: 0;
    border-top: 1px solid var(--linha);
    padding-top: 2rem;
    margin-top: 1rem;
  }
}
/* ---- Marca de arco "1986" recolorível (via mask) ----
   Atualmente sem uso nas páginas (os arcos usam imagem/CSS diretos), mantida
   disponível para reaproveitamento futuro. */
.arch-mark {
  display: inline-block;
  width: 182px;
  height: 82px;
  max-width: 55vw;
  background-color: var(--marrom);
  -webkit-mask: url("../img/sobre/1986.svg") no-repeat center/contain;
  mask: url("../img/sobre/1986.svg") no-repeat center/contain;
}

.arch-mark--light {
  background-color: var(--creme);
}

/* ==========================================================================
   SOBRE
   ========================================================================== */
.vineyard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.vineyard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 640px;
}

.vineyard__text {
  padding-right: clamp(1.5rem, 6vw, 6rem);
  max-width: 40ch;
}

.vineyard__lead {
  color: var(--marrom);
  margin-bottom: 1.75rem;
  font-size: 1.15rem;
}

@media (max-width: 991.98px) {
  .vineyard__grid {
    grid-template-columns: 1fr;
  }
  .vineyard__text {
    padding: 0 clamp(1.25rem, 5vw, 4rem);
    max-width: none;
  }
}
/* Padrão 1986 */
.pattern-band__arch {
  margin: 0 auto 1.5rem;
  width: clamp(140px, 18vw, 200px);
  height: auto;
}

.pattern-band__text {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--marrom);
}

/* História — resíduos da composição clássica anterior (.history__photo,
   .history__thumbs, .history__right-text). A seção atual é .history-t__*. */
.history__photo {
  margin-bottom: 1.75rem;
}
.history__photo img {
  width: 100%;
  filter: grayscale(1);
}

.history__right-text {
  max-width: 52ch;
}

.history__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.history__thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: grayscale(1);
}

@media (max-width: 767.98px) {
  .history__thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================================
   HISTÓRIA — linha do tempo (Figma "Frame 85", capítulos de 1500×900)
   Desktop (>=992px): a seção "trava" (pin); ao rolar, o capítulo atual sai
   (fade) e o próximo entra, e o fundo muda para a cor do capítulo. Os "dots"
   (miniaturas) navegam direto para um capítulo.
   Mobile/tablet (e sem JS): um capítulo abaixo do outro, cada um com seu fundo.
   O JS adiciona .is-pinned (modo travado) e controla .is-active.
   ========================================================================== */
.history-t {
  --history-ink: #fbf4e0; /* texto sobre os fundos coloridos (Figma) */
  --history-media-h: clamp(200px, 32vh, 260px);
  --history-gap: clamp(1.5rem, 5.5vh, 3.2rem);
  position: relative;
  color: var(--history-ink);
}

.history-t__chapter {
  --chapter-bg: var(--laranja);
  background-color: var(--chapter-bg);
  padding-block: clamp(3rem, 9vw, 5rem);
  scroll-margin-top: var(--header-h);
}
.history-t__chapter--laranja {
  --chapter-bg: var(--laranja);
}
.history-t__chapter--vinho-escuro {
  --chapter-bg: var(--vinho-escuro);
}
.history-t__chapter--verde-escuro {
  --chapter-bg: var(--verde-escuro);
}
.history-t__chapter--vinho-claro {
  --chapter-bg: var(--vinho-claro);
}
.history-t__chapter--verde-claro {
  --chapter-bg: var(--verde-claro);
}

.history-t__grid {
  display: grid;
  gap: 1.5rem;
}

/* Título: 1ª linha serifada (regular), 2ª linha sans (semibold, um pouco maior) */
.history-t__title {
  --history-title: clamp(2rem, 1rem + 3.4vw, 3.75rem);
  margin: 0;
  color: var(--history-ink);
  font-size: var(--history-title);
  line-height: 1.17;
  text-transform: uppercase;
}
.history-t__serif,
.history-t__sans {
  display: block;
}
.history-t__serif {
  font-family: var(--font-serif);
  font-weight: 400;
}
.history-t__sans {
  font-family: var(--font-sans);
  font-size: 1.0833em;
  font-weight: 600;
  line-height: 1.08;
}

.history-t__sub {
  max-width: 24rem;
  margin: 1rem 0 0;
  color: var(--history-ink);
}

.history-t__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 440/260;
  overflow: hidden;
}
.history-t__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-t__text {
  max-width: 36rem;
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  line-height: 1.3;
}
.history-t__text p {
  margin: 0 0 10px;
}
.history-t__text p:last-child {
  margin-bottom: 0;
}

/* Dots = miniaturas clicáveis (1 por capítulo); o do capítulo atual fica em destaque */
.history-t__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.history-t__dot {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  aspect-ratio: 3/2;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.history-t__dot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history-t__dot:hover {
  opacity: 1;
  transform: translateY(-4px);
}
.history-t__dot:focus-visible {
  outline-color: var(--history-ink);
}
.history-t__dot.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--history-ink);
}

/* Desktop: 2 colunas = título | foto, texto | texto, (texto) | dots */
@media (min-width: 992px) {
  .history-t__chapter {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
  .history-t__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: var(--history-media-h) minmax(7rem, auto) auto;
    gap: var(--history-gap) 0;
  }
  .history-t__head {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
  }
  .history-t__sub {
    margin-top: auto;
  }
  .history-t__media {
    grid-column: 2;
    grid-row: 1;
    max-width: 440px;
    height: var(--history-media-h);
    aspect-ratio: auto;
  }
  .history-t__text {
    max-width: 440px;
  }
  .history-t__text--esq {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  .history-t__text--dir {
    grid-column: 2;
    grid-row: 2;
  }
  .history-t__nav {
    grid-column: 2;
    grid-row: 3;
    max-width: 618px;
  }
}

/* Modo "pin" (só quando o JS confirma largura e altura suficientes).
   O fundo fica no sticky e troca de cor com o capítulo (--history-bg, via JS);
   os capítulos ficam empilhados no mesmo espaço e só o ativo aparece. */
.history-t.is-pinned .history-t__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--history-bg, var(--laranja));
  transition: background-color 0.8s var(--ease-out);
}
.history-t.is-pinned .history-t__stage {
  position: relative;
  height: 100%;
}
/* Estado de repouso = deslocado para baixo → ao ativar sobe até o lugar;
   ao sair volta para baixo enquanto some. */
.history-t.is-pinned .history-t__chapter {
  position: absolute;
  inset: 0;
  min-height: 0;
  /* o menu (sticky) pode reaparecer por cima: reserva o espaço dele no topo */
  padding-block: calc(var(--header-h) + clamp(0.5rem, 2vh, 1.5rem))
    clamp(1.5rem, 4vh, 3rem);
  background-color: transparent;
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.8s var(--ease-out);
  pointer-events: none;
}
.history-t.is-pinned .history-t__chapter.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* ==========================================================================
   EFEITO EDITORIAL (curtain reveal + parallax) — página Sobre
   ========================================================================== */
.reveal-cover {
  position: relative;
  overflow: hidden;
}
.reveal-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(var(--py, 0)) scale(1.14);
  will-change: transform;
}

/* Esconde só quando o motion.js está ativo (.fx-on) — se o JS falhar, as
   imagens continuam visíveis (nunca ficam presas escondidas). */
.fx-on .reveal-cover {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s var(--ease-out);
}
.fx-on .reveal-cover.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* Molduras do efeito na Sobre */
.vineyard__media.reveal-cover {
  height: clamp(360px, 44vw, 640px);
  max-height: none;
}

.history__photo.reveal-cover {
  aspect-ratio: 16/10;
}

.history__thumbs .reveal-cover {
  aspect-ratio: 1/1;
}

/* ==========================================================================
   BANNER DE COOKIES
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1080;
  max-width: 640px;
  background: var(--creme);
  border: 1px solid var(--marrom);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 18px 44px rgba(44, 29, 22, 0.18);
  transform: translateY(140%);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.5s var(--ease-out);
}
.cookie-bar.is-open {
  transform: translateY(0);
  opacity: 1;
}

.cookie-bar__text {
  margin: 0;
  flex: 1 1 260px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto);
}
.cookie-bar__text a {
  color: var(--laranja);
  text-decoration: underline;
}

.cookie-bar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-bar__link {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.cookie-bar__link:hover {
  color: var(--laranja);
}

/* ==========================================================================
   MODAL DE AVISO (idade / boas-vindas)
   ========================================================================== */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

.age-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease-out),
    visibility 0.4s;
}
.age-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.age-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 29, 22, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.age-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 470px;
  background: var(--creme);
  border-radius: 4px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.55s var(--ease-out);
  overflow: hidden;
}
.age-modal__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 110px;
  background: var(--amarelo);
  border-radius: 0 0 999px 999px;
  opacity: 0.5;
  z-index: -1;
}

.age-modal.is-open .age-modal__card {
  transform: none;
}

.age-modal__logo {
  width: 118px;
  height: auto;
  margin: 0 auto 1.5rem;
}

.age-modal__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--laranja);
  margin-bottom: 0.75rem;
}

.age-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
  color: var(--marrom);
  margin-bottom: 1rem;
}

.age-modal__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto);
  max-width: 34ch;
  margin: 0 auto 1.75rem;
}

.age-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.age-modal__no {
  background: transparent;
  border-color: var(--linha);
  color: var(--texto-suave);
}
.age-modal__no:hover {
  background: transparent;
  border-color: var(--marrom);
  color: var(--marrom);
}

.age-modal__note {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--texto-suave);
  margin: 0;
}

/* ==========================================================================
   MODAL DE BUSCA (mesmo padrão visual do age-modal, no lugar do prompt())
   ========================================================================== */
.search-modal__card {
  max-width: 520px;
}

.search-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.search-modal__close:hover {
  color: var(--marrom);
}

.search-modal__form {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.search-modal__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--branco);
  color: var(--marrom);
}
.search-modal__input:focus {
  outline: none;
  border-color: var(--laranja);
}

.search-modal__submit {
  flex: 0 0 auto;
}

@media (max-width: 479.98px) {
  .search-modal__form {
    flex-direction: column;
  }
}

/* ==========================================================================
   FILTRO DE PRODUTOS (página "Produtos": nome + categoria)
   ========================================================================== */
.products-filter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 760px;
  margin-inline: auto;
}

.products-filter__field {
  flex: 1 1 240px;
}

.products-filter__input,
.products-filter__select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--branco);
  color: var(--marrom);
}
.products-filter__input:focus,
.products-filter__select:focus {
  outline: none;
  border-color: var(--laranja);
}

.products-filter__empty {
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   PÁGINA DE POLÍTICAS
   ========================================================================== */
.policy__updated {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 2.5rem;
}

.policy {
  max-width: 820px;
  margin-inline: auto;
}
.policy h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  color: var(--marrom);
  margin: 2.5rem 0 1rem;
}
.policy h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--marrom);
  margin: 1.75rem 0 0.75rem;
}
.policy p,
.policy li {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--texto);
}
.policy ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.policy li {
  margin-bottom: 0.5rem;
}
.policy a {
  color: var(--laranja);
  text-decoration: underline;
}

/* ==========================================================================
   PÁGINA DE ERRO (404)
   ========================================================================== */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-page__inner {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding-inline: 1.5rem;
}

.error-page__code {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 3rem + 14vw, 11rem);
  line-height: 1;
  color: var(--marrom);
  margin-bottom: 0.5rem;
}

.error-page__arch {
  width: clamp(140px, 18vw, 190px);
  height: auto;
  margin: 0 auto 1.5rem;
}

.error-page__title {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--marrom);
  font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem);
  margin-bottom: 1rem;
}

.error-page__text {
  color: var(--texto-suave);
  margin-bottom: 2rem;
}

/* Rodapé — link legal */
.footer-legal {
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
}
.footer-legal a {
  color: var(--texto-suave);
  text-decoration: underline;
}
.footer-legal a:hover {
  color: var(--laranja);
}

/* Blog (mobile): títulos menores, centralizados e sem estourar a largura. */
@media (max-width: 767.98px) {
  .blog-title .manifesto__title {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    text-align: center;
  }
  .blog-title .manifesto__title .line {
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .blog-title .alinhamento-direita {
    width: 100%;
    max-width: 100%;
  }
  .blog-title .manifesto__sub {
    font-size: 1rem;
    max-width: 32ch;
    margin-inline: auto;
    text-align: center;
  }
}

/* ==========================================================================
   OUTRAS EXPERIÊNCIAS (carrossel no fim da página de experiência)
   ========================================================================== */
.outras-experiencias__title {
  font-family: var(--font-serif);
  color: var(--marrom);
  margin-bottom: 2.5rem;
}
.owl-outras.owl-carousel {
  position: relative;
  padding-inline: 2.5rem;
}
.owl-outras .owl-nav button.owl-prev,
.owl-outras .owl-nav button.owl-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--marrom);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-fast) var(--ease-out);
}
.owl-outras .owl-nav button.owl-prev:hover,
.owl-outras .owl-nav button.owl-next:hover {
  background: var(--amarelo);
}
.owl-outras .owl-nav button.owl-prev {
  left: -6px;
}
.owl-outras .owl-nav button.owl-next {
  right: -6px;
}
.owl-outras .owl-nav button.disabled {
  opacity: 0.35;
}

/* Mega-menu de Experiências em carrossel (mais de 6 itens) */
.megamenu__grid.owl-carousel.owl-loaded {
  display: block;
}
.megamenu__grid.owl-carousel .megamenu__item {
  display: block;
}

/* Links dentro dos textos de "O que inclui" e "Informações úteis" ficam com o
   mesmo visual do botão do site (.btn-cris). */
.includes__panel .text-m a,
.info-col .text-m a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--marrom);
  border-radius: 2px;
  color: var(--marrom);
  background: transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.includes__panel .text-m a:hover,
.info-col .text-m a:hover {
  background: var(--marrom);
  color: var(--creme);
}
.includes__panel .text-m a strong,
.info-col .text-m a strong {
  font-weight: inherit;
}

/* Links dentro dos valores viram botão, nas cores definidas na experiência. */
.values .values__valor a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--values-color, var(--creme));
  border-radius: 2px;
  color: var(--values-color, var(--creme));
  background: transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.values .values__valor a:hover,
.values .values__valor a:focus-visible {
  background: var(--values-color, var(--creme));
  color: var(--values-bg, var(--vinho-escuro));
}
.values .values__valor a strong {
  font-weight: inherit;
}