@charset "UTF-8";
/* ==========================================================================
   CRISTOFOLI — Base & Componentes
   Bootstrap 5 estrutura o grid; aqui vivem os componentes da marca.

   Gerado a partir de scss/base.scss — não edite css/base.css diretamente.
   Compilar com: npm run build:css
   ========================================================================== */
/* ---- Reset suave ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--creme);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
}

/* Container alinhado ao design (1320px) */
.container,
.container-cris {
  max-width: var(--container-max);
}

.container-cris {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
  padding-bottom: 20px;
}

/* Seções — escala com a viewport (menos espaço no mobile, ~150px no desktop) */
.section {
  padding-block: clamp(3.5rem, 10vw, 150px);
}

.section-sm {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn-cris {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--marrom);
  color: var(--marrom);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn-cris:hover {
  background: var(--marrom);
  color: var(--creme);
}

/* Variante clara (sobre fundos vinho/laranja/escuros) */
.btn-cris--light {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--branco);
}
.btn-cris--light:hover {
  background: var(--branco);
  color: var(--vinho-escuro);
}

/* Botão compacto (VER MAIS) */
.btn-cris--sm {
  padding: 0.7rem 1.6rem;
  font-size: var(--fs-min-rodape);
}

/* ==========================================================================
   HEADER + NAV (logo centralizado, nav dividida)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--creme);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(44, 29, 22, 0.08);
}
/* Some ao descer a página e volta ao subir (js/main.js). */
.site-header.is-hidden {
  transform: translateY(-110%);
  box-shadow: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  gap: 1rem;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  flex: 1;
}

.nav-primary--right {
  justify-content: flex-end;
}

.site-logo {
  flex: 0 0 auto;
  margin-inline: 1rem;
}
.site-logo img {
  width: clamp(112px, 10vw, 150px);
  height: auto;
}

.nav-link-cris {
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--marrom);
  padding-block: 0.5rem;
  position: relative;
  white-space: nowrap;
}
.nav-link-cris::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--laranja);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav-link-cris:hover,
.nav-link-cris.is-active {
  color: var(--laranja);
}
.nav-link-cris:hover::after,
.nav-link-cris.is-active::after {
  width: 100%;
}

.nav-search {
  border: 0;
  background: transparent;
  padding: 0.4rem;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}
.nav-search img {
  width: 22px;
  height: 22px;
}

/* Trigger mobile */
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--marrom);
  border-radius: 2px;
  transition: transform var(--dur-fast);
}

/* ---- Mega-menu VINHOS ---- */
.has-megamenu {
  position: static;
}

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--amarelo-claro);
  box-shadow: 0 20px 40px rgba(44, 29, 22, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
  z-index: 1020;
}

.has-megamenu:hover .megamenu,
.megamenu.is-open,
.megamenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mesmo tratamento do "Nossos Produtos" (circle-product): pílula/arco,
   imagem em cover e hover com zoom suave da imagem. */
.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(var(--megamenu-cols, 4), 1fr);
  gap: 1.25rem;
  padding-block: clamp(2rem, 4vw, 4rem);
  max-width: 100%;
  margin-inline: auto;
}

.megamenu__item {
  text-align: center;
}

.megamenu__thumb {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 600px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.megamenu__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
  border-radius: 600px;
}

.megamenu__item:hover .megamenu__thumb img {
  transform: scale(1.01);
}

.megamenu__label {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marrom);
  margin-top: 10px;
  display: block;
}

/* ---- Offcanvas mobile ---- */
.mobile-nav {
  background: var(--creme);
  width: min(88vw, 380px);
}
.mobile-nav .offcanvas-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--linha);
}
.mobile-nav .site-logo img {
  width: 130px;
}
.mobile-nav .offcanvas-body {
  padding: 1.5rem;
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--marrom);
  font-size: 1.125rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--linha);
}
.mobile-nav__link.is-active {
  color: var(--laranja);
}

.mobile-nav__sub {
  padding: 0.5rem 0 0.75rem 1rem;
}
.mobile-nav__sub a {
  display: block;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  padding-block: 0.45rem;
}
.mobile-nav__sub a:hover {
  color: var(--laranja);
}

/* ==========================================================================
   TÍTULOS EDITORIAIS (serif + sans alternados, escalonados)
   ========================================================================== */
.headline {
  color: var(--marrom);
  text-transform: uppercase;
  line-height: 1.12;
  font-weight: 400;
}
.headline .serif {
  font-family: var(--font-serif);
  color: var(--marrom);
}
.headline .sans {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--marrom);
  text-transform: uppercase;
}

.headline--display {
  font-size: var(--fs-h1);
}

.experiencia-logo {
  display: block;
  max-width: min(420px, 100%);
  height: auto;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.headline--lg {
  font-size: clamp(1.9rem, 1rem + 4vw, 3.4rem);
}

/* linhas escalonadas (tensão editorial) */
.headline .line {
  display: block;
}

.alinhamento-direita {
  width: max-content;
  max-width: 100%;
  align-self: end;
}
@media (max-width: 767.98px) {
  .alinhamento-direita {
    width: 100%;
    text-align: center;
  }
  .headline .line,
  .headline .line > span {
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--laranja);
  font-weight: 500;
  margin-bottom: 1rem;
}

.lead {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texto);
}

/* ==========================================================================
   MARQUEE (faixa laranja)
   O loop infinito real (sem emenda) é controlado por requestAnimationFrame
   em js/main.js; a animação CSS abaixo é apenas o estado inicial/fallback.
   ========================================================================== */
.marquee {
  background: var(--laranja);
  color: var(--creme);
  overflow: hidden;
  padding-block: 0.85rem;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  gap: 0;
  will-change: transform;
  animation: marquee-scroll 34s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 1px;
}

.marquee__item {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  padding-left: 5px;
}
.marquee__item::after {
  content: "•";
  margin-left: 5px;
  opacity: 0.7;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ==========================================================================
   CARDS (experiências / blog)
   ========================================================================== */
.card-cris {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-cris__media {
  overflow: hidden;
  margin-bottom: 1.5rem;
  aspect-ratio: 3/4;
}
.card-cris__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card-cris:hover .card-cris__media img {
  transform: scale(1.05);
}

.card-cris__date {
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  color: var(--texto-suave);
  margin-bottom: 0.75rem;
}

.card-cris__title {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--marrom);
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

.card-cris__title--serif {
  font-family: var(--font-serif);
  text-transform: none;
  font-weight: 700;
}

.card-cris__text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  max-width: 305px;
  margin: 0 auto 20px auto;
}

/* Resumo do post: no máximo 4 linhas, para os cards da grade ficarem alinhados
   mesmo que o "Resumo" digitado no editor seja longo. */
.card-cris__text--resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.card-cris .btn-cris {
  align-self: center;
}

/* Card de produto (garrafa em fundo creme) */
.product-card {
  text-align: center;
}

.product-card__media {
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--dur-med) var(--ease-out);
}

.product-card:hover .product-card__media img {
  transform: translateY(-6px);
}

.product-card__name {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--marrom);
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  line-height: 1.25;
}

/* ==========================================================================
   PRODUTOS CIRCULARES (home)
   ========================================================================== */
.circle-product {
  text-align: center;
}

.circle-product__media {
  aspect-ratio: 3/4;
  border-radius: 600px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.circle-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
  border-radius: 600px;
}

.circle-product:hover .circle-product__media img {
  transform: scale(1.06);
}

.circle-product__label {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marrom);
}

/* ==========================================================================
   FORMAS DECORATIVAS (padrão "arcos" amarelos)
   ========================================================================== */
.pattern-band {
  position: relative;
  background: var(--creme);
  overflow: hidden;
}

.pattern-band__shapes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
  pointer-events: none;
  z-index: 0;
}

.pattern-band__content {
  position: relative;
  z-index: 1;
}

.produto-title .container-cris {
  max-width: 600px;
}

.experiencias-title .container-cris {
  max-width: 1000px;
}

.blog-title .container-cris {
  max-width: 1400px;
}

/* Faixa "1986" (Sobre / Experiência interna): usa a arte de arcos oficial
   img/sobre/fundo.svg em vez das formas procedurais. */
.pattern-band.section-sm {
  background-image: url(../img/sobre/fundo.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 750px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pattern-band.section-sm .pattern-band__shapes {
  display: none;
}

.shape {
  background: var(--amarelo);
  align-self: center;
  justify-self: center;
  width: 78%;
}

.shape--dome-up {
  aspect-ratio: 2/1;
  border-radius: 999px 999px 0 0;
  align-self: end;
}

.shape--dome-down {
  aspect-ratio: 2/1;
  border-radius: 0 0 999px 999px;
  align-self: start;
}

.shape--arch {
  aspect-ratio: 1/1.4;
  border-radius: 999px 999px 0 0;
  align-self: end;
}

.shape--circle {
  aspect-ratio: 1/1;
  border-radius: 999px;
}

/* Formas soltas (contato / produto) posicionadas livremente */
.deco-shape {
  position: absolute;
  background: var(--amarelo);
  z-index: 0;
}

.deco-shape--dome-down {
  border-radius: 0 0 999px 999px;
}

.deco-shape--dome-up {
  border-radius: 999px 999px 0 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--creme);
  overflow: hidden;
  padding-top: clamp(4.5rem, 12vw, 200px);
  padding-bottom: clamp(5rem, 12vw, 200px);
}

.site-footer__house {
  position: absolute;
  right: 50%;
  bottom: 10%;
  width: clamp(360px, 60vw, 920px);
  max-width: 60%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  transform: translateX(50%);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__logo img {
  width: clamp(170px, 20vw, 270px);
  height: auto;
}

.footer-nav a {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--marrom);
  padding-block: 0.28rem;
}
.footer-nav a:hover {
  color: var(--laranja);
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover {
  transform: translateY(-3px);
}
.footer-social img {
  width: 26px;
  height: 26px;
}

.footer-contact {
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
  color: var(--marrom);
  text-align: right;
  line-height: 1.7;
  max-width: 26rem;
  margin-left: auto;
}

/* ==========================================================================
   BLOCOS DE COR REUTILIZÁVEIS
   ========================================================================== */
.panel-verde {
  background: var(--verde-escuro);
  color: var(--creme);
}

.panel-vinho {
  background: var(--vinho-escuro);
  color: var(--creme);
}
.panel-vinho .alinhamento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: -webkit-fill-available;
}
/* Abaixo do desktop as colunas empilham: sem altura forçada nem
   space-between, senão o iPhone afasta o título do parágrafo. */
@media (max-width: 991.98px) {
  .panel-vinho .alinhamento {
    height: auto;
    justify-content: flex-start;
    gap: 1rem;
  }
}

.panel-laranja {
  background: var(--laranja);
  color: var(--creme);
}

.panel-amarelo {
  background: var(--amarelo);
  color: var(--marrom);
}

/* Selo circular "VINHOS DE FAMÍLIA" */
.badge-seal {
  width: clamp(90px, 12vw, 150px);
  height: clamp(90px, 12vw, 150px);
  animation: seal-spin 26s linear infinite;
}

@keyframes seal-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   MOTION — estados base (ativados por motion.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.includes__grid.oq [data-reveal].is-visible {
  display: flex;
  align-items: center;
}

.includes__grid.oq .texto {
  max-width: 500px;
  margin: 0 auto;
}

[data-reveal-delay="1"] {
  transition-delay: 0.08s;
}

[data-reveal-delay="2"] {
  transition-delay: 0.16s;
}

[data-reveal-delay="3"] {
  transition-delay: 0.24s;
}

[data-reveal-delay="4"] {
  transition-delay: 0.32s;
}

[data-reveal-delay="5"] {
  transition-delay: 0.4s;
}

/* NOTA: a supressão por prefers-reduced-motion foi removida a pedido do cliente,
   para que os efeitos (reveal, hover, parallax, marquee, selo) rodem sempre —
   inclusive em máquinas com "Reduzir movimento" ativo. Para reativar o respeito
   à acessibilidade, reponha um bloco @media (prefers-reduced-motion: reduce). */
/* ==========================================================================
   RESPONSIVO (mobile-first: ajustes acima de breakpoints)
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --header-h: 68px;
  }
  .nav-primary {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .site-header__inner {
    justify-content: space-between;
  }
  .site-logo {
    margin-inline: 0;
  }
  .nav-primary--right .nav-search {
    display: none;
  }
  .megamenu {
    position: static;
    box-shadow: none;
  }
  .footer-contact {
    text-align: left;
  }
}
@media (max-width: 767.98px) {
  .megamenu__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pattern-band__shapes {
    grid-template-columns: repeat(4, 1fr);
  }
  .headline .line--indent-1,
  .headline .line--indent-2 {
    padding-left: 0;
  }
  .site-footer__house {
    opacity: 0.5;
  }
  .footer-contact {
    text-align: left;
  }
}

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.07);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
@media (max-width: 575.98px) {
  .whatsapp-float {
    right: 1rem;
    bottom: 1rem;
    width: 52px;
    height: 52px;
  }
}