/* =============================================================================
   ATELIÊ FIOS DE TEREZA — FOLHA DE ESTILO ÚNICA
   Arquitetura ITCSS (do mais genérico ao mais específico) com nomes BEM.

   01 SETTINGS   variáveis
   02 TOOLS      utilitários de base
   03 GENERIC    reset
   04 ELEMENTS   tags puras
   05 OBJECTS    estruturas sem cor (grid, container)
   06 COMPONENTS blocos com identidade visual
   07 UTILITIES  ajustes pontuais
   ========================================================================== */

/* =============================================================================
   01 SETTINGS
   ========================================================================== */
:root {
  /* --- Cores (psicologia cromática definida no briefing) --- */
  --cor-fundo:        #FCFAF6;  /* marfim: pureza e atemporalidade   */
  --cor-fundo-alt:    #F7F2E9;  /* papel: faixa alternada            */
  --cor-fundo-rosa:   #FAF3EF;  /* rosado quase branco               */
  --cor-dourado:      #B7935A;  /* ouro velho: SÓ em filetes e arcos  */
  --cor-dourado-claro:#E8C6A0;
  --cor-dourado-escuro:#95763F;
  --cor-rosa:         #C68E7A;  /* acolhimento, compaixão            */
  --cor-rosa-palido:  #F3E1E3;  /* fundo de avatar e etiquetas       */
  --cor-rosa-linha:   #E0BCC2;

  /* CARMIM DA MARCA — extraído do arquivo da logomarca (#AE344B).
     O nome da variável continua "vinho" por compatibilidade com o restante
     da folha; o valor é o carmim oficial do ateliê. */
  --cor-vinho:        #AE344B;
  --cor-vinho-escuro: #8E2740;
  --cor-carmim:       #AE344B;
  --cor-carmim-fundo: #6E1C31;
  --cor-verde:        #5C6B5A;  /* esperança, renovação              */
  --cor-tinta:        #2B2320;  /* texto principal                   */
  --cor-tinta-suave:  #6B605A;  /* texto secundário                  */
  --cor-linha:        #E5DCCC;  /* bordas                            */
  --cor-branco:       #FFFFFF;
  --cor-sucesso:      #4F7A52;
  --cor-alerta:       #9A5B2E;

  /* --- Tipografia --- */
  /* Playfair Display ecoa a didone da assinatura "delicadezas para lares
     com alma". Karla é mais acolhedora que a Inter no texto corrido.
     Cormorant itálico carrega as orações sem competir com o logotipo. */
  --fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-oracao: 'Cormorant Garamond', Georgia, serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.125rem;
  --t-md:   1.375rem;
  --t-lg:   1.75rem;
  --t-xl:   2.5rem;
  --t-2xl:  3rem;
  --t-3xl:  3.75rem;

  --entrelinha:       1.6;
  --entrelinha-titulo:1.15;

  /* --- Espaçamento (escala de 4px) --- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;    --e-10: 8rem;

  /* --- Formas e sombras --- */
  --raio-p: 2px;
  --raio-m: 4px;
  --raio-g: 8px;
  --raio-arco: 180px 180px 2px 2px;      /* arco de capela: assinatura do projeto */
  --raio-arco-card: 52px 52px 0 0;       /* mesmo motivo no topo do cartão   */

  --sombra-suave:   0 1px 2px rgba(43,35,32,.05), 0 4px 16px rgba(43,35,32,.04);
  --sombra-media:   0 8px 30px rgba(43,35,32,.10);
  --sombra-dourada: 0 14px 40px rgba(174,52,75,.18);

  --transicao: 320ms cubic-bezier(.22,.61,.36,1);

  --largura-max: 1240px;
  --largura-texto: 68ch;
  --altura-topo: 84px;
}

/* =============================================================================
   03 GENERIC — reset enxuto
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================================
   04 ELEMENTS
   ========================================================================== */
body {
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: var(--entrelinha);
  color: var(--cor-tinta);
  background-color: var(--cor-fundo);
  /* Textura de linho: dois riscados finos a 5% de opacidade */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='%23B7935A' fill-opacity='.05'/%3E%3Cpath d='M0 0v6h1V0zM3 0v6h1V0z' fill='%236E3E44' fill-opacity='.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: var(--entrelinha-titulo);
  color: var(--cor-vinho);
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.125rem, 5vw, var(--t-3xl)); }
h2 { font-size: clamp(1.75rem, 4vw, var(--t-xl)); }
h3 { font-size: var(--t-md); }

p  { max-width: var(--largura-texto); }

a  { color: var(--cor-vinho); text-decoration-color: var(--cor-dourado-claro); text-underline-offset: .22em; }
a:hover { color: var(--cor-dourado-escuro); }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 3px solid var(--cor-dourado);
  outline-offset: 3px;
  border-radius: var(--raio-p);
}

::selection { background: var(--cor-dourado-claro); color: var(--cor-vinho-escuro); }

/* =============================================================================
   05 OBJECTS
   ========================================================================== */
.o-container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--e-5); }
.o-container--estreito { max-width: 860px; }

.o-secao { padding-block: clamp(var(--e-7), 8vw, var(--e-9)); }
.o-secao--alt { background-color: var(--cor-fundo-alt); }

.o-grade { display: grid; gap: var(--e-5); }
.o-grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.o-grade--3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.o-grade--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.o-pular-link {
  position: absolute; left: -9999px;
  background: var(--cor-vinho); color: #fff; padding: var(--e-3) var(--e-4); z-index: 999;
}
.o-pular-link:focus { left: var(--e-4); top: var(--e-4); }

/* =============================================================================
   06 COMPONENTS
   ========================================================================== */

/* --- Sobrelinha: filete dourado + palavra, o motivo gráfico do site -------- */
.c-sobrelinha {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cor-dourado-escuro);
  margin-bottom: var(--e-3);
}
.c-sobrelinha::before {
  content: ''; width: 42px; height: 1px; background: var(--cor-dourado); flex: none;
}
.c-sobrelinha--centro { justify-content: center; }
.c-sobrelinha--centro::after {
  content: ''; width: 42px; height: 1px; background: var(--cor-dourado); flex: none;
}

.c-titulo-secao { margin-bottom: var(--e-3); }
.c-apoio-secao  { color: var(--cor-tinta-suave); font-size: var(--t-base); margin-bottom: var(--e-6); }
.c-cabecalho-secao--centro { text-align: center; }
.c-cabecalho-secao--centro p { margin-inline: auto; }

/* --- Botões --------------------------------------------------------------- */
.c-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-4) var(--e-6);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--raio-m);
  text-decoration: none;
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao), color var(--transicao);
  border: 1px solid transparent;
  line-height: 1.2;
  text-align: center;
}
.c-botao--principal {
  background: var(--cor-dourado); color: #fff;
  box-shadow: 0 6px 18px rgba(183,147,90,.30);
}
.c-botao--principal:hover,
.c-botao--principal:focus-visible {
  background: var(--cor-vinho); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sombra-dourada);
}
.c-botao--contorno {
  border-color: var(--cor-dourado); color: var(--cor-vinho); background: transparent;
}
.c-botao--contorno:hover { background: var(--cor-dourado); color: #fff; }
.c-botao--vinho { background: var(--cor-vinho); color: #fff; }
.c-botao--vinho:hover { background: var(--cor-vinho-escuro); color: #fff; }
.c-botao--whats { background: #25D366; color: #08351a; }
.c-botao--whats:hover { background: #1eb457; color: #fff; }
.c-botao--bloco { width: 100%; }
.c-botao--grande { padding: var(--e-5) var(--e-7); font-size: var(--t-base); }
.c-botao[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* --- Topo ----------------------------------------------------------------- */
.c-topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,250,245,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-linha);
}
.c-topo__faixa {
  background: var(--cor-vinho); color: #F3E7DC;
  font-size: var(--t-xs); letter-spacing: .06em;
  text-align: center; padding: var(--e-2) var(--e-4);
}
.c-topo__faixa strong { color: var(--cor-dourado-claro); font-weight: 600; }
.c-topo__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  min-height: var(--altura-topo);
}
.c-topo__logo img { max-height: 56px; width: auto; }
.c-topo__logo { display: flex; align-items: center; text-decoration: none; }

.c-menu { display: flex; align-items: center; gap: var(--e-5); }
.c-menu__link {
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--cor-tinta);
  padding-block: var(--e-2); position: relative;
}
.c-menu__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--cor-dourado); transition: width var(--transicao);
}
.c-menu__link:hover::after, .c-menu__link[aria-current="page"]::after { width: 100%; }

.c-acoes { display: flex; align-items: center; gap: var(--e-3); }
.c-acoes__botao {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--cor-vinho); transition: background var(--transicao);
}
.c-acoes__botao:hover { background: var(--cor-fundo-alt); }
.c-acoes__contador {
  position: absolute; top: 3px; right: 2px;
  min-width: 20px; height: 20px; padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--cor-dourado); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 10px;
}
.c-acoes__contador--pulsa { animation: pulso .6s ease; }
@keyframes pulso { 0%{transform:scale(1)} 45%{transform:scale(1.5)} 100%{transform:scale(1)} }

.c-hamburguer { display: none; width: 44px; height: 44px; }

/* --- Menu móvel ----------------------------------------------------------- */
.c-menu-movel {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cor-fundo);
  padding: var(--e-6) var(--e-5);
  transform: translateX(100%);
  transition: transform var(--transicao);
  overflow-y: auto;
}
.c-menu-movel[data-aberto="true"] { transform: translateX(0); }
.c-menu-movel__lista { display: grid; gap: var(--e-2); margin-top: var(--e-6); }
.c-menu-movel__lista a {
  font-family: var(--fonte-titulo); font-size: var(--t-md);
  padding-block: var(--e-3); border-bottom: 1px solid var(--cor-linha);
  text-decoration: none; display: block;
}

/* --- Hero ----------------------------------------------------------------- */
.c-hero { position: relative; overflow: hidden; background: var(--cor-vinho-escuro); }
.c-hero__midia { position: absolute; inset: 0; }
.c-hero__midia img, .c-hero__midia video { width: 100%; height: 100%; object-fit: cover; }
.c-hero__veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(110,62,68,.30), transparent 60%),
    linear-gradient(180deg, rgba(37,22,24,.62), rgba(37,22,24,.80));
}
.c-hero__conteudo {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--e-8);
  max-width: 720px;
  color: #FBF6EE;
}
.c-hero__titulo {
  color: #FBF6EE; font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  margin-bottom: var(--e-4);
  text-wrap: balance;
}
.c-hero__titulo em { font-style: italic; color: var(--cor-dourado-claro); }
.c-hero__texto { font-size: var(--t-md); color: #EADDD1; margin-bottom: var(--e-6); max-width: 54ch; }
.c-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.c-hero .c-sobrelinha { color: var(--cor-dourado-claro); }
.c-hero .c-sobrelinha::before { background: var(--cor-dourado-claro); }
.c-hero__selos {
  display: flex; flex-wrap: wrap; gap: var(--e-5);
  margin-top: var(--e-7); padding-top: var(--e-5);
  border-top: 1px solid rgba(217,190,140,.35);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: #D9C6B4;
}

/* --- Cartão de produto ---------------------------------------------------- */
.c-produto {
  position: relative;
  background: var(--cor-branco);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.c-produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-dourada);
  border-color: var(--cor-dourado-claro);
}
.c-produto__figura { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cor-fundo-alt); }
.c-produto__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.22,.61,.36,1); }
.c-produto:hover .c-produto__figura img { transform: scale(1.06); }
.c-produto__selo {
  position: absolute; top: var(--e-3); left: var(--e-3);
  background: var(--cor-vinho); color: #F5E7D6;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--raio-p);
}
.c-produto__favorito {
  position: absolute; top: var(--e-3); right: var(--e-3);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
  color: var(--cor-vinho); transition: transform var(--transicao), color var(--transicao);
}
.c-produto__favorito:hover { transform: scale(1.12); color: var(--cor-rosa); }
.c-produto__favorito[aria-pressed="true"] { color: var(--cor-rosa); }
.c-produto__corpo { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.c-produto__categoria { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-dourado-escuro); }
.c-produto__nome { font-size: 1.25rem; }
.c-produto__nome a { text-decoration: none; }
.c-produto__nome a::after { content: ''; position: absolute; inset: 0; }
.c-produto__subtitulo { font-size: var(--t-sm); color: var(--cor-tinta-suave); font-style: italic; }
.c-produto__precos { margin-top: auto; padding-top: var(--e-3); display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.c-produto__preco-de { font-size: var(--t-sm); color: var(--cor-tinta-suave); text-decoration: line-through; }
.c-produto__preco { font-size: 1.375rem; font-weight: 600; color: var(--cor-vinho); font-family: var(--fonte-titulo); }
.c-produto__parcela { font-size: var(--t-xs); color: var(--cor-tinta-suave); width: 100%; }
.c-produto__escassez {
  font-size: var(--t-xs); color: var(--cor-alerta); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.c-produto__escassez::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-alerta); }

/* --- Cartão de categoria (arco de capela: elemento assinatura) ------------- */
.c-categoria {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--raio-arco);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--cor-vinho);
  border: 1px solid var(--cor-linha);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.c-categoria:hover { transform: translateY(-6px); box-shadow: var(--sombra-dourada); }
.c-categoria img { width: 100%; height: 100%; object-fit: cover; opacity: .74; transition: opacity var(--transicao), transform 700ms ease; }
.c-categoria:hover img { opacity: .92; transform: scale(1.05); }
.c-categoria__moldura {
  position: absolute; inset: 10px; border: 1px solid rgba(217,190,140,.55);
  border-radius: calc(180px - 10px) calc(180px - 10px) 2px 2px;
  pointer-events: none;
}
.c-categoria__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-6) var(--e-4) var(--e-4);
  background: linear-gradient(transparent, rgba(37,22,24,.86));
  color: #FBF6EE; text-align: center;
}
.c-categoria__legenda h3 { color: #FBF6EE; font-size: 1.375rem; }
.c-categoria__legenda span { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-dourado-claro); }

/* --- Faixa de números ----------------------------------------------------- */
.c-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--e-5); text-align: center; }
.c-numeros__valor { font-family: var(--fonte-titulo); font-size: var(--t-xl); color: var(--cor-dourado-escuro); line-height: 1; }
.c-numeros__rotulo { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-tinta-suave); margin-top: var(--e-2); }

/* --- Bloco "A Fé que Tocamos" --------------------------------------------- */
.c-historia { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--e-5), 5vw, var(--e-8)); align-items: center; }
.c-historia__mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.c-historia__mosaico img { border-radius: var(--raio-g); aspect-ratio: 1; object-fit: cover; box-shadow: var(--sombra-suave); }
.c-historia__mosaico img:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; border-radius: var(--raio-arco); }
.c-historia__citacao {
  font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-md);
  color: var(--cor-vinho); border-left: 2px solid var(--cor-dourado);
  padding-left: var(--e-4); margin-block: var(--e-5);
}
.c-historia__assinatura { font-size: var(--t-sm); color: var(--cor-tinta-suave); }

/* --- Depoimentos ---------------------------------------------------------- */
.c-depoimento {
  background: var(--cor-branco); border: 1px solid var(--cor-linha);
  border-radius: var(--raio-g); padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-3); height: 100%;
}
.c-depoimento__estrelas { color: var(--cor-dourado); letter-spacing: .18em; font-size: var(--t-sm); }
.c-depoimento__texto { font-family: var(--fonte-titulo); font-size: 1.1875rem; line-height: 1.5; color: var(--cor-tinta); }
.c-depoimento__pessoa { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--cor-linha); }
.c-depoimento__foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--cor-fundo-alt); }
.c-depoimento__inicial {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-rosa); color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-md);
}
.c-depoimento__nome { font-weight: 600; font-size: var(--t-sm); }
.c-depoimento__local { font-size: var(--t-xs); color: var(--cor-tinta-suave); }

/* --- Carrossel horizontal ------------------------------------------------- */
.c-carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-4); scrollbar-width: thin; }
.c-carrossel > * { scroll-snap-align: start; }
.c-carrossel::-webkit-scrollbar { height: 4px; }
.c-carrossel::-webkit-scrollbar-thumb { background: var(--cor-dourado-claro); border-radius: 2px; }

/* --- Notificação de prova social ------------------------------------------ */
.c-prova {
  position: fixed; left: var(--e-4); bottom: var(--e-4); z-index: 90;
  display: flex; align-items: center; gap: var(--e-3);
  width: min(340px, calc(100vw - 2rem));
  background: var(--cor-branco);
  border: 1px solid var(--cor-linha); border-left: 3px solid var(--cor-dourado);
  border-radius: var(--raio-g); padding: var(--e-3);
  box-shadow: var(--sombra-media);
  text-decoration: none; color: inherit;
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.c-prova[data-visivel="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.c-prova__foto { width: 52px; height: 52px; border-radius: var(--raio-m); object-fit: cover; flex: none; background: var(--cor-fundo-alt); }
.c-prova__texto { font-size: var(--t-xs); line-height: 1.45; }
.c-prova__texto strong { display: block; font-size: var(--t-sm); color: var(--cor-vinho); }
.c-prova__tempo { color: var(--cor-tinta-suave); }
.c-prova__fechar { position: absolute; top: 4px; right: 6px; font-size: 18px; color: var(--cor-tinta-suave); line-height: 1; }

/* --- Página de produto ---------------------------------------------------- */
.c-vitrine { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--e-5), 4vw, var(--e-7)); align-items: start; }
.c-galeria__principal {
  position: relative; overflow: hidden; border-radius: var(--raio-g);
  border: 1px solid var(--cor-linha); background: var(--cor-branco); aspect-ratio: 1;
}
.c-galeria__principal img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.c-galeria__principal:hover img { transform: scale(1.55); } /* zoom líquido: inspeção de relíquia */
.c-galeria__miniaturas { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }
.c-galeria__mini {
  width: 78px; height: 78px; border-radius: var(--raio-m); overflow: hidden;
  border: 1px solid var(--cor-linha); padding: 0; background: none;
}
.c-galeria__mini[aria-current="true"] { border-color: var(--cor-dourado); box-shadow: 0 0 0 2px var(--cor-dourado-claro); }
.c-galeria__mini img { width: 100%; height: 100%; object-fit: cover; }

.c-ficha__titulo { margin-bottom: var(--e-2); }
.c-ficha__subtitulo { font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-md); color: var(--cor-rosa); margin-bottom: var(--e-4); }
.c-ficha__preco { font-family: var(--fonte-titulo); font-size: var(--t-xl); color: var(--cor-vinho); line-height: 1; }
.c-ficha__preco-de { font-size: var(--t-base); color: var(--cor-tinta-suave); text-decoration: line-through; margin-right: var(--e-2); }
.c-ficha__parcela { font-size: var(--t-sm); color: var(--cor-verde); font-weight: 600; margin-top: var(--e-1); }
.c-ficha__bloco { margin-block: var(--e-5); }
.c-ficha__variacao { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.c-ficha__opcao {
  border: 1px solid var(--cor-linha); border-radius: var(--raio-m);
  padding: var(--e-2) var(--e-4); font-size: var(--t-sm); background: var(--cor-branco);
  transition: all var(--transicao);
}
.c-ficha__opcao[aria-pressed="true"] { border-color: var(--cor-dourado); background: var(--cor-dourado); color: #fff; }
.c-ficha__opcao[disabled] { opacity: .4; text-decoration: line-through; }

.c-quantidade { display: inline-flex; align-items: center; border: 1px solid var(--cor-linha); border-radius: var(--raio-m); background: var(--cor-branco); }
.c-quantidade button { width: 46px; height: 52px; font-size: var(--t-md); color: var(--cor-vinho); }
.c-quantidade input { width: 52px; height: 52px; text-align: center; border: none; background: none; font-weight: 600; }

.c-selo-confianca {
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--cor-fundo-alt); border: 1px dashed var(--cor-dourado-claro);
  border-radius: var(--raio-m); padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm); color: var(--cor-tinta-suave);
}
.c-selo-confianca strong { color: var(--cor-vinho); }

.c-urgencia {
  font-size: var(--t-sm); color: var(--cor-alerta); font-weight: 600;
  display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3);
}

.c-abas__nav { display: flex; gap: var(--e-5); border-bottom: 1px solid var(--cor-linha); margin-bottom: var(--e-5); flex-wrap: wrap; }
.c-abas__botao {
  padding-block: var(--e-3); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cor-tinta-suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.c-abas__botao[aria-selected="true"] { color: var(--cor-vinho); border-bottom-color: var(--cor-dourado); }
.c-abas__painel[hidden] { display: none; }
.c-abas__painel p + p { margin-top: var(--e-4); }

.c-oracao {
  font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-md);
  line-height: 1.55; color: var(--cor-vinho);
  background: var(--cor-fundo-alt); border-radius: var(--raio-g);
  padding: var(--e-6); border-left: 3px solid var(--cor-dourado);
}

/* --- Carrinho e checkout -------------------------------------------------- */
.c-linha-carrinho { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--e-4); align-items: center; padding-block: var(--e-4); border-bottom: 1px solid var(--cor-linha); }
.c-linha-carrinho img { width: 96px; height: 112px; object-fit: cover; border-radius: var(--raio-m); }

.c-resumo {
  background: var(--cor-branco); border: 1px solid var(--cor-linha);
  border-radius: var(--raio-g); padding: var(--e-5); position: sticky; top: calc(var(--altura-topo) + var(--e-4));
}
.c-resumo__linha { display: flex; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-2); font-size: var(--t-sm); }
.c-resumo__linha--total { border-top: 1px solid var(--cor-linha); margin-top: var(--e-3); padding-top: var(--e-4); font-size: var(--t-md); font-family: var(--fonte-titulo); color: var(--cor-vinho); }

.c-passos { display: flex; gap: var(--e-2); margin-bottom: var(--e-6); flex-wrap: wrap; }
.c-passos__item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.c-passos__numero { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cor-linha); font-weight: 600; }
.c-passos__item[data-ativo="true"] { color: var(--cor-vinho); }
.c-passos__item[data-ativo="true"] .c-passos__numero { background: var(--cor-dourado); border-color: var(--cor-dourado); color: #fff; }

/* --- Formulários ---------------------------------------------------------- */
.c-campo { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.c-campo__rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--cor-tinta); }
.c-campo__entrada, .c-campo select, .c-campo textarea {
  width: 100%; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cor-linha); border-radius: var(--raio-m);
  background: var(--cor-branco); font-size: var(--t-base);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.c-campo__entrada:focus, .c-campo select:focus, .c-campo textarea:focus {
  outline: none; border-color: var(--cor-dourado); box-shadow: 0 0 0 3px rgba(183,147,90,.18);
}
.c-campo__dica { font-size: var(--t-xs); color: var(--cor-tinta-suave); }
.c-campo__erro { font-size: var(--t-xs); color: #A8332F; }
.c-linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--e-4); }

.c-aviso { padding: var(--e-4); border-radius: var(--raio-m); font-size: var(--t-sm); margin-bottom: var(--e-4); }
.c-aviso--ok   { background: #EAF2EA; color: #2E5531; border: 1px solid #C6DEC8; }
.c-aviso--erro { background: #FBEDEC; color: #8E2B27; border: 1px solid #EFCFCD; }
.c-aviso--info { background: var(--cor-fundo-alt); color: var(--cor-tinta); border: 1px solid var(--cor-linha); }

/* --- Caixa de frete (regra dos 80 km) ------------------------------------- */
.c-frete { border: 1px solid var(--cor-linha); border-radius: var(--raio-g); padding: var(--e-5); background: var(--cor-branco); }
.c-frete__busca { display: flex; gap: var(--e-2); }
.c-frete__busca input { flex: 1; }
.c-frete__opcao { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3); border: 1px solid var(--cor-linha); border-radius: var(--raio-m); margin-top: var(--e-3); cursor: pointer; }
.c-frete__opcao:has(input:checked) { border-color: var(--cor-dourado); background: var(--cor-fundo-alt); }
.c-frete__local {
  margin-top: var(--e-4); padding: var(--e-5);
  background: linear-gradient(180deg, #F1F5EE, #E9F0E4);
  border: 1px solid #CDDCC4; border-radius: var(--raio-g);
}
.c-frete__local h4 { font-family: var(--fonte-titulo); color: var(--cor-verde); font-size: var(--t-md); margin-bottom: var(--e-2); }

/* --- Modais (pop-up de boas-vindas e de saída) ---------------------------- */
.c-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--e-4);
  background: rgba(37,22,24,.62);
  opacity: 0; visibility: hidden; transition: opacity var(--transicao), visibility var(--transicao);
}
.c-modal[data-aberto="true"] { opacity: 1; visibility: visible; }
.c-modal__caixa {
  position: relative; width: min(560px, 100%);
  background: var(--cor-fundo); border-radius: var(--raio-g);
  overflow: hidden; box-shadow: var(--sombra-media);
  transform: translateY(14px) scale(.98); transition: transform var(--transicao);
  max-height: 92vh; overflow-y: auto;
}
.c-modal[data-aberto="true"] .c-modal__caixa { transform: none; }
.c-modal__topo { background: var(--cor-vinho); color: #FBF6EE; padding: var(--e-6) var(--e-6) var(--e-5); text-align: center; }
.c-modal__topo h3 { color: #FBF6EE; font-size: var(--t-lg); }
.c-modal__topo p { color: #E4D2C4; font-size: var(--t-sm); margin-inline: auto; }
.c-modal__corpo { padding: var(--e-6); }
.c-modal__fechar { position: absolute; top: var(--e-3); right: var(--e-3); width: 36px; height: 36px; border-radius: 50%; color: #FBF6EE; font-size: 20px; }

/* --- Rodapé --------------------------------------------------------------- */
.c-rodape { background: var(--cor-vinho-escuro); color: #D9C6B4; padding-block: var(--e-8) var(--e-5); margin-top: var(--e-8); }
.c-rodape a { color: #D9C6B4; text-decoration: none; }
.c-rodape a:hover { color: var(--cor-dourado-claro); }
.c-rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--e-6); }
.c-rodape__titulo { font-family: var(--fonte-titulo); color: var(--cor-dourado-claro); font-size: 1.125rem; margin-bottom: var(--e-4); }
.c-rodape__lista { list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.c-rodape__base {
  margin-top: var(--e-7); padding-top: var(--e-4);
  border-top: 1px solid rgba(217,190,140,.22);
  display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  font-size: var(--t-xs); color: #B49E8D;
}
.c-rodape__consagracao {
  text-align: center; font-family: var(--fonte-titulo); font-style: italic;
  color: var(--cor-dourado-claro); font-size: var(--t-md); margin-bottom: var(--e-6);
}
.c-newsletter { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.c-newsletter input { flex: 1; padding: var(--e-3); border: 1px solid rgba(217,190,140,.35); background: rgba(255,255,255,.06); border-radius: var(--raio-m); color: #FBF6EE; }
.c-newsletter input::placeholder { color: #A88E7C; }

/* --- Botão flutuante do WhatsApp ------------------------------------------ */
.c-whats-flutuante {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.42);
  transition: transform var(--transicao);
}
.c-whats-flutuante:hover { transform: scale(1.08); }

/* --- Migalhas ------------------------------------------------------------- */
.c-migalhas { font-size: var(--t-xs); color: var(--cor-tinta-suave); padding-block: var(--e-4); display: flex; gap: var(--e-2); flex-wrap: wrap; }
.c-migalhas a { text-decoration: none; }

/* --- Página vazia / 404 --------------------------------------------------- */
.c-vazio { text-align: center; padding-block: var(--e-9); }
.c-vazio p { margin-inline: auto; color: var(--cor-tinta-suave); }

/* =============================================================================
   07 UTILITIES
   ========================================================================== */
.u-centro   { text-align: center; }
.u-oculto   { display: none !important; }
.u-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-mt-4 { margin-top: var(--e-4); }
.u-mt-6 { margin-top: var(--e-6); }
.u-mb-6 { margin-bottom: var(--e-6); }
.u-max-texto { max-width: var(--largura-texto); }

/* Revelação suave ao rolar (respeita prefers-reduced-motion pelo bloco acima) */
.u-revela { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms ease; }
.u-revela[data-visivel="true"] { opacity: 1; transform: none; }

/* =============================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .c-rodape__grade { grid-template-columns: 1fr 1fr; }
  .c-vitrine, .c-historia { grid-template-columns: 1fr; }
  .c-historia__mosaico { order: -1; }
}

@media (max-width: 860px) {
  .c-menu { display: none; }
  .c-hamburguer { display: grid; place-items: center; }
  .c-topo__logo img { max-height: 44px; }
  :root { --altura-topo: 68px; }
  .c-galeria__principal:hover img { transform: none; } /* sem zoom no toque */
  .c-resumo { position: static; }
}

@media (max-width: 560px) {
  :root { --t-base: 1.0625rem; }
  .o-container { padding-inline: var(--e-4); }
  .c-rodape__grade { grid-template-columns: 1fr; }
  .c-linha-carrinho { grid-template-columns: 72px 1fr; }
  .c-linha-carrinho img { width: 72px; height: 84px; }
  .c-prova { left: var(--e-3); right: var(--e-3); bottom: 84px; width: auto; }
  .c-hero__conteudo { min-height: 480px; }
}

/* =============================================================================
   IMPRESSÃO (o cliente costuma imprimir o comprovante do pedido)
   ========================================================================== */
@media print {
  .c-topo, .c-rodape, .c-prova, .c-whats-flutuante, .c-modal { display: none !important; }
  body { background: #fff; }
}

/* =========================================================================
   #COMPONENTES — AJUSTES DE FORMULÁRIO PARA O PAINEL
   Deixa selects, textareas e botões-texto coerentes com os inputs.
   ====================================================================== */
select,
textarea {
  width: 100%;
  padding: .7rem .9rem;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--cor-tinta);
  background: #fff;
  border: 1px solid var(--cor-linha);
  border-radius: 4px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cor-dourado);
  box-shadow: 0 0 0 3px rgba(183, 147, 90, .18);
}

textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

/* Botões que vivem dentro de tabelas: parecem link, agem como botão */
.adm__tabela button[type="submit"],
form button[type="submit"]:not([class]) {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.adm__tabela button[type="submit"]:hover { opacity: .7; }

/* =============================================================================
   08 COMPONENTES DA HOME v2 — trilhos, arcos e blocos de conversão
   Adicionados na revisão de identidade que partiu da logomarca carmim.
   ========================================================================== */

/* --- Marca no cabeçalho ---------------------------------------------------- */
.c-marca { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.c-marca__img { display: block; height: 54px; width: auto; }
@media (max-width: 720px) { .c-marca__img { height: 40px; } }

/* --- Busca no topo --------------------------------------------------------- */
.c-busca { flex: 1; min-width: 0; position: relative; }

.c-busca__campo {
  width: 100%;
  padding: .65rem .9rem .65rem 2.4rem;
  font-family: var(--fonte-corpo);
  font-size: var(--t-sm);
  font-weight: 300;
  color: var(--cor-tinta);
  background: var(--cor-fundo-alt);
  border: 1px solid #E4D7C3;
  border-radius: var(--raio-p);
}

.c-busca__campo::placeholder { color: #A2988A; }

.c-busca__campo:focus {
  outline: none;
  border-color: var(--cor-carmim);
  box-shadow: 0 0 0 3px rgba(174, 52, 75, .12);
}

.c-busca__icone {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #C79AA1; pointer-events: none;
}

/* --- TRILHO HORIZONTAL ----------------------------------------------------
   O item que fica cortado na borda direita é intencional: é ele que avisa
   ao visitante que há mais conteúdo e provoca o arrasto.
   -------------------------------------------------------------------------- */
.c-trilho {
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--e-5);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: var(--e-2);
}

.c-trilho::-webkit-scrollbar { display: none; }
.c-trilho:active { cursor: grabbing; }
.c-trilho > * { scroll-snap-align: start; flex: 0 0 auto; }
.c-trilho--puxado { user-select: none; }        /* durante o arrasto com mouse */
.c-trilho .c-produto { width: 232px; }
.c-trilho__frente { width: 152px; text-align: center; }

@media (max-width: 720px) {
  .c-trilho .c-produto { width: 190px; }
  .c-trilho__frente { width: 132px; }
}

/* --- Etiquetas de ocasião (o trilho de filtros) ---------------------------- */
.c-ocasioes { padding: var(--e-4) 0 var(--e-2); }

.c-ocasiao {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: var(--t-xs);
  color: #5A5148;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #E4D7C3;
  border-radius: var(--raio-p);
  transition: border-color var(--transicao), color var(--transicao);
}

.c-ocasiao:hover { border-color: var(--cor-carmim); color: var(--cor-carmim); }

.c-ocasiao--ativa,
.c-ocasiao--ativa:hover {
  background: var(--cor-carmim); border-color: var(--cor-carmim); color: #FDF4F2; font-weight: 500;
}

/* --- Cartão de produto: topo em arco --------------------------------------- */
.c-produto__figura {
  border-radius: var(--raio-arco-card);
  overflow: hidden;
  position: relative;
  background: #2E2622;
}

.c-produto__figura img { border-radius: var(--raio-arco-card); }

/* Moldura dourada interna acompanhando a curva do arco */
.c-produto__figura::after {
  content: '';
  position: absolute; inset: 6px 6px 0 6px;
  border: 1px solid var(--cor-dourado);
  border-bottom: none;
  border-radius: 47px 47px 0 0;
  pointer-events: none;
}

.c-produto__selo {
  font-family: var(--fonte-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--cor-dourado-claro);
  background: none;
  left: 0; right: 0; top: 14px;
  text-align: center;
}

.c-produto__regua { height: 1px; background: #EBDDCB; margin: var(--e-2) 0; }

/* A oração impressa no cartão que acompanha a peça */
.c-produto__oracao {
  font-family: var(--fonte-oracao);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--cor-vinho-escuro);
  margin-top: var(--e-2);
}

.c-produto__parcela { display: block; font-size: var(--t-xs); color: #8A8074; font-weight: 300; }

.c-produto__escassez { font-size: var(--t-xs); font-weight: 600; color: #A8552F; margin-top: var(--e-2); }
.c-produto__escassez--calma { color: var(--cor-verde); }

.c-produto__acao {
  display: block;
  margin-top: var(--e-3);
  padding: .75rem;
  font-family: var(--fonte-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  text-align: center;
  text-decoration: none;
  color: #FDF4F2;
  background: var(--cor-carmim);
  border-radius: var(--raio-p);
  transition: background var(--transicao);
}

.c-produto__acao:hover { background: var(--cor-vinho-escuro); color: #FDF4F2; }

/* --- Ornamento de seção: a rosa da marca ----------------------------------- */
.c-ornamento { display: flex; align-items: center; justify-content: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.c-ornamento::before,
.c-ornamento::after { content: ''; width: 58px; height: 1px; background: var(--cor-rosa-linha); }
.c-ornamento svg { color: var(--cor-carmim); }

/* --- Faixa de confiança ---------------------------------------------------- */
.c-confianca {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); text-align: center;
  background: var(--cor-fundo-rosa);
  border-top: 1px solid var(--cor-linha); border-bottom: 1px solid var(--cor-linha);
}
.c-confianca li { list-style: none; font-size: var(--t-xs); font-weight: 300; color: #5A5148; }
.c-confianca strong { font-family: var(--fonte-titulo); font-size: 1rem; color: var(--cor-vinho-escuro); font-weight: 600; }
.c-confianca svg { width: 16px; height: 16px; color: var(--cor-carmim); vertical-align: -3px; margin-right: .35rem; }

/* --- Prova social em fluxo (não sobrepõe mais o conteúdo) ------------------ */
.c-prova-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
@media (max-width: 720px) { .c-prova-grade { grid-template-columns: 1fr; } }

.c-prova-item {
  display: flex; align-items: center; gap: var(--e-3);
  background: #fff; border: 1px solid var(--cor-linha);
  border-left: 2px solid var(--cor-carmim);
  padding: .65rem .8rem;
}

.c-prova-item__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--cor-rosa-palido);
  display: flex; align-items: center; justify-content: center;
  color: #B26476;
}

.c-prova-item__texto { font-size: var(--t-xs); line-height: 1.45; color: var(--cor-tinta); }
.c-prova-item__peca  { font-family: var(--fonte-titulo); color: var(--cor-carmim); font-weight: 500; }
.c-prova-item__tempo { font-size: var(--t-xs); color: #A2988A; font-weight: 300; }

/* --- Jornada da peça ------------------------------------------------------- */
.c-jornada {
  background: #F4EDE2;
  border-top: 1px solid #E6DAC6; border-bottom: 1px solid #E6DAC6;
  padding: var(--e-6) var(--e-5);
}
.c-jornada__passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
.c-jornada__passo { text-align: center; }
.c-jornada__passo svg { width: 24px; height: 24px; color: var(--cor-carmim); }
.c-jornada__passo span {
  display: block; margin-top: var(--e-2);
  font-family: var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase;
  font-size: var(--t-xs); color: var(--cor-tinta-suave);
}
@media (max-width: 560px) { .c-jornada__passos { grid-template-columns: repeat(2, 1fr); row-gap: var(--e-5); } }

/* --- Bloco dos 80 km ------------------------------------------------------- */
.c-local {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-5); border-bottom: 1px solid var(--cor-linha);
}
.c-local__pino { width: 28px; height: 28px; color: var(--cor-carmim); flex: none; }
.c-local__texto { flex: 1; }
@media (max-width: 720px) { .c-local { flex-wrap: wrap; } .c-local__texto { flex: 1 1 100%; } }

/* --- Faixa da assinatura mensal ------------------------------------------- */
.c-assinatura {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  background: var(--cor-verde); color: #EAEFE7;
  padding: var(--e-5);
  border-top: 3px solid var(--cor-dourado);
}
@media (max-width: 640px) { .c-assinatura { flex-direction: column; text-align: center; } }

/* --- Faixa da história com o casal ---------------------------------------- */
.c-casal {
  display: grid; grid-template-columns: 1fr 320px;
  background: var(--cor-vinho-escuro); color: #F7E4E4;
  border-top: 3px solid var(--cor-dourado);
}
.c-casal__texto { padding: var(--e-7) var(--e-6); }
.c-casal__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); line-height: 1.25; color: #F7E4E4; }
.c-casal__titulo em { font-style: italic; }
.c-casal__foto { background: var(--cor-carmim-fundo); position: relative; min-height: 300px; }
.c-casal__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .c-casal { grid-template-columns: 1fr; } .c-casal__foto { min-height: 240px; } }

/* --- Rótulo em versalete (usa a didone da assinatura) ---------------------- */
.c-versal {
  font-family: var(--fonte-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--cor-carmim);
}

/* Esconde visualmente mas mantém para leitores de tela (display:none sumiria) */
.u-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Estrutura de seção da home v2 ---------------------------------------- */
.o-secao { padding: var(--e-6) 0; }

.o-secao__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); margin-bottom: var(--e-5); flex-wrap: wrap;
}

.o-secao__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--cor-vinho-escuro);
}

.o-secao__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--cor-carmim);
  text-decoration: none; border-bottom: 1px solid var(--cor-rosa-linha); padding-bottom: 2px;
}
.o-secao__link:hover { border-color: var(--cor-carmim); }

/* --- Cartão de frente do apostolado (o arco de capela) -------------------- */
/* ATENÇÃO: existe uma regra .c-categoria mais acima nesta folha, da primeira
   versão do projeto, em que a legenda ficava DENTRO da imagem. Agora o nome
   fica embaixo, então é preciso anular explicitamente o recorte, o fundo e a
   proporção fixa daquela regra — senão o texto é cortado pelo arco. */
.c-categoria {
  display: block;
  text-decoration: none;
  text-align: center;
  aspect-ratio: auto;          /* anula o 3/4 da regra antiga */
  overflow: visible;           /* o nome vive fora da imagem  */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.c-categoria:hover { transform: none; box-shadow: none; }

.c-categoria__figura {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--raio-arco);
  background: #EFE9DE;
  aspect-ratio: 300 / 340;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.c-categoria:hover .c-categoria__figura {
  transform: translateY(-5px);
  box-shadow: var(--sombra-dourada);
}

.c-categoria__figura img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;                                  /* a regra antiga baixava para .74 */
  transition: transform 700ms ease;
}

.c-categoria:hover .c-categoria__figura img { transform: scale(1.04); }

/* Moldura dourada interna acompanhando a curva do arco */
.c-categoria__figura::after {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid var(--cor-dourado);
  border-radius: 170px 170px 1px 1px;
  pointer-events: none;
}

/* O nome precisa de duas linhas: "Escapulários de porta" não cabe em uma.
   A altura mínima mantém todos os cartões alinhados na base. */
.c-categoria__nome {
  display: block;
  margin-top: var(--e-3);
  min-height: 2.6em;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: #3F382F;
  transition: color var(--transicao);
  text-wrap: balance;                          /* quebra as duas linhas parelhas */
}

.c-categoria:hover .c-categoria__nome { color: var(--cor-carmim); }

.c-categoria__chamada {
  display: block;
  margin-top: 2px;
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs);
  font-weight: 300;
  color: #A2988A;
}

/* --- Texto do bloco do casal --------------------------------------------- */
.c-casal__texto-corpo {
  font-size: var(--t-sm); font-weight: 300; line-height: 1.9;
  color: #EBC9C9; margin: var(--e-4) 0 var(--e-5); max-width: 42ch;
}

.c-casal .c-versal { color: #E0A9A9; margin-bottom: var(--e-3); }

/* --- Utilitários que faltavam -------------------------------------------- */
.u-py-4 { padding-top: var(--e-4); padding-bottom: var(--e-4); }
.u-mb-6 { margin-bottom: var(--e-6); }

/* --- Ajustes finais do cartão de produto ----------------------------------
   A regra original recortava o cartão com raio de 8px e escondia o arco.
   Aqui o cartão fica quase reto e o arco da foto volta a aparecer.
   -------------------------------------------------------------------------- */
.c-produto { border-radius: 3px; border-color: #EADFD0; }
.c-produto:hover { border-color: var(--cor-dourado); }

.c-produto__figura { background: #EFE9DE; }

/* O nome do produto cobre o cartão inteiro com um link invisível (::after).
   Sem z-index, esse link ficaria por cima do coração e do botão. */
.c-produto__favorito,
.c-produto__acao { position: relative; z-index: 2; }
.c-produto__favorito { position: absolute; }

.c-produto__nome { font-size: 1.0625rem; line-height: 1.3; }
.c-produto__subtitulo { font-style: normal; font-size: var(--t-xs); color: #9A8F80; font-weight: 300; }
.c-produto__precos { padding-top: var(--e-2); }