/* ==========================================================================
   Rafael Souza Fotógrafo — style.css
   Ordem: fontes · tokens · reset · base · seções (mesma ordem do HTML)
   Valores vindos do Figma: ver _referencias/spec.md
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas, somente woff2) ---------- */
@font-face {
  font-family: 'Cormorant Infant';
  src: url('../assets/fonts/cormorant-infant-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Arquivo variável: cobre Italic 400 e SemiBold Italic 600 */
@font-face {
  font-family: 'Cormorant Infant';
  src: url('../assets/fonts/cormorant-infant-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-ultralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-semibold-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/gilroy-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Cores (Figma) */
  --cor-fundo: #F3F1F1;
  --cor-bege: #DAD5D2;
  --cor-texto: #292929;
  --cor-verde: #56673E;
  --cor-card: rgb(242 242 242 / 0.8);
  --overlay-numeros: rgb(40 35 31 / 0.8);
  --overlay-depoimentos: rgb(0 0 0 / 0.6);
  /* Títulos grandes: cinza quente SÓLIDO (antes #292929 com 30%/40% de opacidade), da família do bege
     #DAD5D2. Contraste ~3,1:1 sobre o bege (mínimo WCAG para letra grande: 3:1). Decisão do usuário. */
  --texto-titulo: #797471;
  --texto-titulo-dep: #797471;              /* título dos Depoimentos */
  --texto-italico: rgb(41 41 41 / 0.9);
  --branco-90: rgb(255 255 255 / 0.9);
  --branco-80: rgb(255 255 255 / 0.8);

  /* Fontes */
  --fonte-serif: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  --fonte-sans: 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Raios */
  --raio-5: 5px;
  --raio-10: 10px;
  --raio-15: 15px;
  --raio-80: 80px;

  /* Unidade de escala: 1 unidade do Figma (1920 px) = --u.
     De 1920 px para baixo a composição encolhe proporcionalmente;
     acima de 1920 px o conteúdo fica travado em 1920 e centralizado.
     Uso: calc(120 * var(--u)) = 120px em 1920 px de largura.
     Usa 100cqw (largura do .pagina, sem a barra de rolagem) e não 100vw.
     (Abaixo de 1024 px o layout responsivo entra na Etapa 6.) */
  --u: calc(min(100cqw, 1920px) / 1920);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Base ---------- */
html { overflow-x: clip; }
body {
  min-height: 100vh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-sans);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:focus-visible { outline: 2px solid var(--cor-verde); outline-offset: 3px; }

/* Contêiner de largura: base da unidade --u. Todo o conteúdo fica dentro dele;
   elementos fixos ficam fora. */
.pagina { container-type: inline-size; width: 100%; }

/* ---------- Seções ---------- */
.secao { position: relative; width: 100%; max-width: 1920px; margin-inline: auto; }


/* ---------- 1. Hero (Figma 34:8 — 1920×904) ---------- */
.hero {
  height: calc(904 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: calc(58 * var(--u));   /* logo com topo em ~y720 (ajuste pedido pelo usuário) */
  overflow: hidden;
  background: #000;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__titulo { position: relative; width: calc(673 * var(--u)); }   /* 554 no Figma; ampliado a pedido do usuário */
.hero__titulo img { width: 100%; height: auto; }
.hero__logo-mobile,
.hero__subtitulo,
.br-mobile { display: none; }

/* ---------- 2. Faixa de categorias (Figma 37:32 — 1920×76) ---------- */
.faixa {
  height: calc(76 * var(--u));
  background: var(--cor-bege);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.faixa__trilho,
.faixa__grupo,
.faixa__grupo li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: calc(40 * var(--u));
}
.faixa__trilho { padding-left: calc(9 * var(--u)); }
.faixa__grupo li {
  font-size: max(12px, calc(18 * var(--u)));   /* mínimo de 12px (só atua abaixo de 1280px: tablet deitado) */
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: normal;
  white-space: nowrap;
}
.faixa__grupo li::after {
  content: '';
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--cor-texto);
}

/* ---------- 3. Introdução (Figma 48:68 — 1920×248) ---------- */
.introducao {
  height: calc(248 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  /* O Figma usa "vertical trim" nos textos: os valores abaixo reproduzem as
     linhas de base do modelo (título y117, subtítulo y161), não as caixas. */
  padding-top: calc(68 * var(--u));
  text-align: center;
}
.introducao__titulo {
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(60 * var(--u));
  line-height: 1;
  color: var(--texto-italico);
}
.introducao__subtitulo {
  margin-top: calc(9 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 200;
  line-height: 1;
}

/* ---------- Componentes compartilhados ---------- */
/* Título grande de seção (CASAMENTOS, PRÉ-CASAMENTO, EVENTOS SOCIAIS).
   Posicionado pela linha de base: "top" = baseline do Figma − 99 (ascendente
   da Cormorant Infant 120px com line-height 1). */
.titulo-secao {
  position: absolute;
  margin: 0;
  font-family: var(--fonte-serif);
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-titulo);
}
/* Foto recortada: o contêiner define tamanho e formato (cantos); a imagem cobre.
   --px/--py/--z (no style da <img>) reproduzem o enquadramento do Figma. */
.foto { position: relative; overflow: hidden; flex-shrink: 0; }
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--px, 50%) var(--py, 50%);
  transform-origin: var(--px, 50%) var(--py, 50%);
  transform: scale(var(--z, 1));
}

/* Botão verde de WhatsApp (Eternize e Sobre). Hover na Etapa 7. */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(382 * var(--u));
  height: calc(66 * var(--u));
  background: var(--cor-verde);
  border-radius: calc(15 * var(--u));
  color: #fff;
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- 4. Casamentos (Figma 54:95 — 1920×1020) ---------- */
.casamentos {
  height: calc(1020 * var(--u));
  background: var(--cor-bege);
  border-radius: calc(80 * var(--u)) calc(80 * var(--u)) 0 0;
}
.casamentos__foto { position: absolute; }
.casamentos__foto--1 { left: calc(596 * var(--u));  top: calc(73 * var(--u));  width: calc(365.4 * var(--u)); height: calc(440.3 * var(--u));
  border-radius: calc(128.4 * var(--u)) calc(128.4 * var(--u)) 0 calc(1.7 * var(--u)); }
.casamentos__foto--2 { left: calc(984 * var(--u));  top: calc(161 * var(--u)); width: calc(300 * var(--u));   height: calc(390.3 * var(--u));
  border-radius: calc(72.1 * var(--u)) calc(48.5 * var(--u)) calc(64.6 * var(--u)) 0; }
.casamentos__foto--3 { left: calc(1307 * var(--u)); top: calc(293 * var(--u)); width: calc(364.4 * var(--u)); height: calc(433.9 * var(--u));
  border-radius: 0 calc(67.2 * var(--u)) calc(67.2 * var(--u)) 0; }
.casamentos__foto--4 { left: calc(596 * var(--u));  top: calc(536 * var(--u)); width: calc(365.1 * var(--u)); height: calc(230.8 * var(--u));
  border-radius: 0 0 0 calc(62 * var(--u)); }
.casamentos__foto--5 { left: calc(984 * var(--u));  top: calc(574 * var(--u)); width: calc(300 * var(--u));   height: calc(369.2 * var(--u));
  border-radius: 0 calc(68.2 * var(--u)) 0 calc(68.2 * var(--u)); }
.casamentos__titulo { left: calc(223 * var(--u)); top: calc(772 * var(--u)); }

/* ---------- 5. Pré-casamento (Figma 54:136 — 1920×965) ---------- */
.pre-casamento {
  height: calc(965 * var(--u));
  overflow: hidden;
}
.pre-casamento__trilho {
  position: absolute;
  top: calc(120 * var(--u));
  left: 0;
  width: 100%;
  height: calc(696.3 * var(--u));
  display: flex;
  gap: calc(7 * var(--u));
  overflow-x: auto;                 /* rolagem por toque/trackpad; hover nas laterais na Etapa 7 */
  scrollbar-width: none;
}
.pre-casamento__trilho::-webkit-scrollbar { display: none; }
.pre-casamento__trilho .foto {
  width: calc(475.2 * var(--u));
  height: 100%;
  border-radius: calc(10 * var(--u));
}
/* Esmaecimento lateral (degradês ocultos no Figma: 318px, #F3F1F1 → transparente) */
.pre-casamento__esmaecer {
  position: absolute;
  top: calc(120 * var(--u));
  width: calc(318 * var(--u));
  height: calc(696.3 * var(--u));
  pointer-events: none;             /* não bloqueia a rolagem das fotos */
}
.pre-casamento__esmaecer--esq { left: 0;  background: linear-gradient(to right, var(--cor-fundo), rgb(243 241 241 / 0)); }
.pre-casamento__esmaecer--dir { right: 0; background: linear-gradient(to left,  var(--cor-fundo), rgb(243 241 241 / 0)); }
.pre-casamento__faixa {
  position: absolute;
  top: calc(816 * var(--u));
  left: 0;
  width: 100%;
  height: calc(153 * var(--u));     /* ultrapassa a seção em 4 px, como no Figma (cortado) */
  background: var(--cor-bege);
  border-radius: 0 0 calc(80 * var(--u)) calc(80 * var(--u));
}
.pre-casamento__titulo { left: calc(773 * var(--u)); top: calc(16 * var(--u)); }
.pre-casamento__titulo .hifen { margin-inline: calc(1.5 * var(--u)); }   /* hífen da fonte é mais estreito que no Figma */

/* ---------- 6. Eventos sociais (Figma 85:2 — 1920×1147) ---------- */
.eventos { height: calc(1147 * var(--u)); }
.eventos__card {
  position: absolute;
  left: calc(155 * var(--u));
  top: calc(100 * var(--u));
  width: calc(1610 * var(--u));
  height: calc(941 * var(--u));
  background: var(--cor-bege);
  border-radius: calc(15 * var(--u));
}
.eventos__fileira {
  position: absolute;
  left: calc(60 * var(--u));        /* x215 no frame */
  width: calc(1491 * var(--u));
  height: calc(334.3 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(25 * var(--u));
  overflow: hidden;
}
.eventos__fileira--1 { top: calc(78 * var(--u)); }                            /* y178 */
.eventos__fileira--2 { top: calc(433 * var(--u)); justify-content: flex-end; } /* y533, alinhada à direita */
.eventos__fileira .foto { height: calc(334 * var(--u)); border-radius: calc(5 * var(--u)); }
.eventos__foto--estreita { width: calc(281 * var(--u)); }
.eventos__foto--larga    { width: calc(427 * var(--u)); }
.eventos__fileira img { filter: grayscale(1); }
.eventos__titulo { left: calc(335 * var(--u)); top: calc(805 * var(--u)); }   /* x490, baseline y1003 no frame */

/* ---------- 7. Números (Figma 81:3 — 1920×451) ---------- */
.numeros {
  height: calc(451 * var(--u));
  overflow: hidden;
  background: #000;
}
.numeros__fundo { position: absolute; inset: 0; }
.numeros__fundo img { filter: grayscale(1); }
.numeros__fundo::after {                   /* overlay #28231F @ 80% */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-numeros);
}
.numero {
  position: absolute;
  top: calc(153 * var(--u));          /* linhas de base do modelo: valor y240, rótulo y278 */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--branco-80);
  font-weight: 600;
  line-height: 1;
}
.numero--1 { left: calc(390 * var(--u)); }
.numero--2 { left: calc(850 * var(--u)); }
.numero--3 { left: calc(1304 * var(--u)); }
.numero__valor {
  display: flex;
  align-items: baseline;
  font-size: calc(100 * var(--u));
  letter-spacing: -0.07em;
}
.numero__mais { font-size: calc(101.85 * var(--u)); margin-right: calc(7 * var(--u)); }
.numero__rotulo {
  margin-top: calc(1 * var(--u));
  font-size: calc(26 * var(--u));
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- 8. Eternize sua história (Figma 149:65 — 1920×979) ---------- */
.eternize {
  height: calc(979 * var(--u));
  background: var(--cor-bege);
}
.eternize__foto { position: absolute; }
/* Sombras do Figma (as camadas com 0% de opacidade foram omitidas) */
.eternize__foto--1 {
  left: calc(392 * var(--u)); top: calc(118 * var(--u));
  width: calc(333.5 * var(--u)); height: calc(488.6 * var(--u));
  border-radius: calc(5.17 * var(--u));
  box-shadow:
    calc(-2 * var(--u))  calc(2 * var(--u))  calc(7 * var(--u))  rgb(0 0 0 / 0.1),
    calc(-8 * var(--u))  calc(10 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / 0.1),
    calc(-17 * var(--u)) calc(22 * var(--u)) calc(17 * var(--u)) rgb(0 0 0 / 0.1);
}
.eternize__foto--2 {
  left: calc(622 * var(--u)); top: calc(347 * var(--u));
  width: calc(340 * var(--u)); height: calc(408.4 * var(--u));
  border-radius: calc(5.62 * var(--u));
  box-shadow:
    calc(-2.17 * var(--u))  calc(2.17 * var(--u))  calc(6.52 * var(--u))  rgb(0 0 0 / 0.1),
    calc(-8.69 * var(--u))  calc(7.6 * var(--u))   calc(11.95 * var(--u)) rgb(0 0 0 / 0.1),
    calc(-19.55 * var(--u)) calc(17.38 * var(--u)) calc(16.29 * var(--u)) rgb(0 0 0 / 0.1);
}
.eternize__foto--3 {
  left: calc(345 * var(--u)); top: calc(489 * var(--u));
  width: calc(333.5 * var(--u)); height: calc(386.4 * var(--u));
  border-radius: calc(5.17 * var(--u));
  box-shadow:
    calc(-1 * var(--u)) calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / 0.1),
    calc(-4 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / 0.1),
    calc(-9 * var(--u)) calc(9 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.1);
}
.eternize__titulo {
  position: absolute;
  left: calc(797 * var(--u));
  top: calc(227 * var(--u));
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--texto-titulo);
}
.eternize__texto {
  position: absolute;
  left: calc(1046 * var(--u));
  top: calc(437 * var(--u));
  width: calc(382 * var(--u));
  font-family: var(--fonte-serif);
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.1;
  color: var(--texto-italico);
}
.eternize__texto strong { font-weight: 600; }
.eternize__botao { position: absolute; left: calc(1046 * var(--u)); top: calc(586 * var(--u)); }

/* ---------- 9. Depoimentos (Figma 178:38 — 1920×1054) ---------- */
.depoimentos {
  height: calc(1054 * var(--u));
  background: var(--cor-bege);
  overflow: hidden;
}
.depoimentos__titulo {
  position: absolute;
  left: calc(379 * var(--u));
  top: calc(47 * var(--u));
  margin: 0;
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(61.79 * var(--u));
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--texto-titulo-dep);
}
.depoimentos__fundo {
  position: absolute;
  top: calc(150 * var(--u));
  left: 0;
  width: 100%;
  height: calc(804 * var(--u));
}
.depoimentos__fundo img { filter: grayscale(1) contrast(1.27); }
.depoimentos__fundo::after {             /* overlay #000 @ 60% (Figma) */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-depoimentos);
}
.depoimentos__fileira {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  gap: calc(20 * var(--u));
  overflow: hidden;
}
.depoimentos__fileira > li { flex-shrink: 0; }
.depoimentos__fileira--1 { top: calc(286 * var(--u)); }
.depoimentos__fileira--2 { top: calc(568 * var(--u)); justify-content: flex-end; }   /* alinhada à direita */

/* Card: posições internas pelo padrão da maioria dos cards do Figma
   (aspas +25, 1ª linha do texto +95, autor +162 a partir do topo do card) */
.depoimento {
  position: relative;
  width: calc(495 * var(--u));
  height: calc(249 * var(--u));
  margin: 0;
  background: var(--cor-card);
  border-radius: calc(15 * var(--u));
}
.depoimento::before {                   /* aspas: círculo verde 29px com “ bege */
  content: '\201C';
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(25 * var(--u));
  width: calc(29 * var(--u));
  height: calc(29 * var(--u));
  border-radius: 50%;
  background: var(--cor-verde);
  color: var(--cor-bege);
  font-family: var(--fonte-serif);
  font-size: calc(48.57 * var(--u));
  line-height: calc(47 * var(--u));   /* centraliza a tinta do glifo “ no círculo (medido) */
  padding-left: calc(0.6 * var(--u)); /* compensa o glifo levemente deslocado à esquerda (medido) */
  text-align: center;
  overflow: hidden;
}
.depoimento__texto {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(94 * var(--u));
  width: calc(431 * var(--u));
  margin: 0;
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.depoimento__autor {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(162 * var(--u));
  display: grid;
  grid-template-columns: calc(58 * var(--u)) auto;
  grid-template-rows: auto auto;
  column-gap: calc(11 * var(--u));
  align-content: center;
  height: calc(58 * var(--u));
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.depoimento__avatar {
  grid-row: 1 / 3;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}
.depoimento__nome   { align-self: end; position: relative; top: calc(2 * var(--u)); font-size: max(12px, calc(20 * var(--u))); font-weight: 700; }
.depoimento__arroba { align-self: start; margin-top: calc(7 * var(--u)); font-size: max(12px, calc(16 * var(--u))); font-weight: 500; }   /* mínimo legível (opção b) */
/* Texto longo (Kamila): 4 linhas e entrelinha 110%, como no Figma. Com a correção "certeza de que"
   a 2ª linha ficou maior: quebras fixadas no HTML (.br-desktop) e espaçamento −6,2% para caber. */
.depoimento--longo .depoimento__texto { top: calc(59 * var(--u)); line-height: 1.1; letter-spacing: -0.062em; }
.depoimento--longo .depoimento__autor { top: calc(156 * var(--u)); }
/* Ingrid: no Figma a caixa de texto é mais larga (453px) e o texto fica em 1 linha */
.depoimento--largo .depoimento__texto { width: calc(453 * var(--u)); }

/* ---------- 10. Sobre (Figma 169:52 — 1920×738) ---------- */
.sobre {
  height: calc(738 * var(--u));
  background: var(--cor-bege);
}
.sobre__card {
  position: absolute;
  left: calc(245 * var(--u));
  top: calc(83 * var(--u));
  width: calc(1430 * var(--u));
  height: calc(572 * var(--u));
  background: var(--cor-texto);
  border-radius: calc(10 * var(--u));
}
.sobre__nome {
  position: absolute;
  left: calc(391 * var(--u));
  top: calc(130 * var(--u));
  width: calc(298 * var(--u));
  margin: 0;
}
.sobre__nome img { width: 100%; height: auto; }
.sobre__texto {
  position: absolute;
  left: calc(390 * var(--u));
  top: calc(190 * var(--u));
  width: calc(501 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  line-height: 1.3;
  color: var(--cor-bege);
}
.sobre__texto p + p { margin-top: calc(21.4 * var(--u)); }   /* linha em branco entre parágrafos (medida no modelo) */
.sobre__texto strong { font-weight: 600; line-height: 1; }   /* não altera a altura da linha (estável em qualquer largura) */
.sobre__botao { position: absolute; left: calc(391 * var(--u)); top: calc(521 * var(--u)); }
.sobre__foto {
  position: absolute;
  left: calc(1014 * var(--u));
  top: calc(31 * var(--u));
  width: calc(459.5 * var(--u));
  height: calc(656 * var(--u));
  border-radius: calc(10.4 * var(--u));
}

/* ---------- 11. Rodapé (Figma 223:80 — 1920×296) ---------- */
.rodape {
  height: calc(296 * var(--u));
  background: var(--cor-bege);
  font-size: max(12px, calc(16 * var(--u)));   /* mínimo legível (opção b) */
  line-height: 1;
}
.rodape::before {                      /* área clara com cantos superiores de 100px */
  content: '';
  position: absolute;
  left: 0;
  top: calc(91 * var(--u));
  width: 100%;
  height: calc(205 * var(--u));
  background: var(--cor-fundo);
  border-radius: calc(100 * var(--u)) calc(100 * var(--u)) 0 0;
}
.rodape__dev,
.rodape__copy,
.rodape__instagram,
.rodape__divisor { position: absolute; margin: 0; white-space: nowrap; }   /* sem quebra em larguras menores */
.rodape__dev {
  left: calc(316 * var(--u));
  top: calc(184 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.rodape__dev img { position: relative; top: calc(1 * var(--u));   /* linha de base do "jailins" (13px do topo do logo) alinhada à do texto */ width: calc(48 * var(--u)); height: auto; }
.rodape__divisor {
  top: calc(174 * var(--u));
  width: 1px;
  height: calc(39 * var(--u));
  background: var(--cor-texto);
}
.rodape__divisor--1 { left: calc(620 * var(--u)); }
.rodape__divisor--2 { left: calc(1302 * var(--u)); }
.rodape__copy {                        /* caixa só do tamanho do texto: não cobre os links vizinhos */
  left: 50%;
  transform: translateX(-50%);
  top: calc(170 * var(--u));
  text-align: center;
  line-height: 1.5;
}
.rodape__instagram {
  left: calc(1495 * var(--u));
  top: calc(184 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  font-weight: 500;
}
.rodape__instagram img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.rodape__instagram span { position: relative; top: calc(0.5 * var(--u)); }   /* centro das maiúsculas = centro do ícone */


/* ==========================================================================
   TABLET DEITADO (1024–1279px) — mesma composição do desktop, com letra mínima de 12px.
   Onde o texto maior não cabe na caixa fixa do Figma, o bloco passa a crescer com o texto.
   ========================================================================== */
/* Kamila: abaixo de ~1152px de conteúdo o mínimo de 12px atua e as 4 linhas fixas não cabem no card
   (como no celular, o card sai) */
@media (min-width: 1024px) and (max-width: 1166px) {
  .depoimentos__fileira > li:has(.depoimento--longo) { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Sobre: grade nas mesmas colunas do Figma (texto em x390, foto em x1014); o card cresce com o texto */
  .sobre {
    height: auto;
    display: grid;
    grid-template-columns: calc(390 * var(--u)) calc(560 * var(--u)) calc(64 * var(--u)) calc(459.5 * var(--u)) 1fr;
    padding: calc(130 * var(--u)) 0 calc(151 * var(--u));   /* nome a 47 do topo do card; botão a 68 do fim */
  }
  .sobre__card { top: calc(83 * var(--u)); bottom: calc(83 * var(--u)); height: auto; }
  .sobre__nome,
  .sobre__texto,
  .sobre__botao { position: relative; left: auto; top: auto; grid-column: 2; }   /* relative: acima do card */
  .sobre__texto { width: auto; margin-top: calc(27 * var(--u)); }
  .sobre__botao { margin-top: calc(30 * var(--u)); }
  .sobre__foto {                         /* sai 52 acima e 32 abaixo do card, como no Figma */
    position: relative; left: auto; top: auto;
    grid-column: 4; grid-row: 1 / 4; height: auto;
    margin: calc(-99 * var(--u)) 0 calc(-100 * var(--u));
  }
}


/* ==========================================================================
   CELULAR E TABLET EM PÉ (até 1023px) — Figma "MOBILE" 341:41 (390×1696)
   Unidade --m: 1 unidade do Figma mobile = 100cqw / 390 (proporcional à largura do celular).
   A partir de 580px de largura a escala trava: o conteúdo vira uma coluna centralizada
   de 580px (tablet em pé, celular deitado) e os fundos seguem na largura toda.
   --coluna = margem de fora da coluna de 580px (0 no celular): fotos de Casamentos.
   --lado = margem de fora das CAIXAS (cards de Eventos, Depoimentos e Sobre; rodapé), que no
   tablet são mais largas que a coluna (até ~740px) para não sobrar espaço vazio nas laterais
   (ajuste do usuário, iPad Air 820px). É 0 até 788px de largura.
   Seções 1–5 seguem o modelo mobile (com ajustes aprovados pelo usuário).
   Seções 6–11: layout definido pelo usuário na Etapa 6 (sem modelo no Figma).
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --m: calc(min(100cqw, 580px) / 390);
    --coluna: calc((100cqw - 390 * var(--m)) / 2);
    --lado: max(0px, (100cqw - 788px) / 2);
  }

  .br-desktop { display: none; }          /* quebras fixas do card da Kamila valem só no desktop */

  /* 1. Hero (341:42 — 390×480) */
  .hero { height: calc(480 * var(--m)); padding-bottom: calc(22 * var(--m)); }
  .hero__titulo {
    width: calc(320 * var(--m));          /* ajuste do usuário: logo maior que o subtítulo (Figma: 270) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(9 * var(--m));
  }
  .hero__logo { display: none; }
  .hero__logo-mobile { display: block; }
  .hero__subtitulo {
    display: block;
    color: var(--branco-90);
    font-size: calc(14.6 * var(--m));
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 2. Faixa de categorias (341:73 — 390×34) */
  .faixa { height: calc(44 * var(--m)); }   /* ajuste do usuário: faixa mais larga (Figma: 34) */
  .faixa__trilho,
  .faixa__grupo,
  .faixa__grupo li { gap: calc(17.79 * var(--m)); }
  .faixa__trilho { padding-left: 0; }
  .faixa__grupo li { font-size: max(11px, calc(11 * var(--m))); }   /* Figma: 8px; 11px por legibilidade (opção b) */
  .faixa__grupo li::after { width: calc(2.2 * var(--m)); height: calc(2.2 * var(--m)); }

  /* 3. Introdução (341:103 — 390×80) */
  /* Ajustes do usuário (imagem de referência): título com ~318px, subtítulo em 2 linhas (1ª com ~287px), mais respiro */
  .introducao { height: auto; padding: calc(40 * var(--m)) calc(16 * var(--m)) calc(40 * var(--m)); }
  .introducao__titulo { font-size: calc(36.4 * var(--m)); }
  .introducao__subtitulo { margin-top: calc(8.5 * var(--m)); font-size: max(12px, calc(15.78 * var(--m))); line-height: 1.14; }

  /* 4. Casamentos — ajuste do usuário: fotos uma abaixo da outra, na largura do celular
     (ordem: as 3 da coluna esquerda do Figma mobile, depois as 2 da direita).
     Cantos do Figma mobile ampliados na mesma proporção da foto. */
  .casamentos {
    height: auto; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--m));
    padding: calc(40 * var(--m)) calc(20 * var(--m) + var(--coluna)) calc(44 * var(--m));
    border-radius: calc(47 * var(--m)) calc(47 * var(--m)) 0 0;
  }
  .casamentos__foto { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .casamentos__foto--1 { order: 1; aspect-ratio: 365.4 / 440.3; border-radius: calc(122.9 * var(--m)) calc(122.9 * var(--m)) 0 calc(1.7 * var(--m)); }
  .casamentos__foto--4 { order: 2; aspect-ratio: 365.1 / 230.8; border-radius: 0 0 0 calc(59.3 * var(--m)); }
  .casamentos__foto--3 { order: 3; aspect-ratio: 364.4 / 433.9; border-radius: calc(63 * var(--m)) 0 0 calc(63 * var(--m)); }
  .casamentos__foto--2 { order: 4; aspect-ratio: 300 / 390.3; border-radius: calc(84.2 * var(--m)) calc(56.6 * var(--m)) calc(75.5 * var(--m)) 0; }
  .casamentos__foto--5 { order: 5; aspect-ratio: 300 / 369.2; border-radius: 0 calc(79.5 * var(--m)) 0 calc(79.5 * var(--m)); }
  .titulo-secao { font-size: calc(46 * var(--m)); }
  .casamentos__titulo { order: 6; position: static; margin-top: calc(14 * var(--m)); font-size: calc(51.64 * var(--m)); }   /* 318px de largura */

  /* 5. Pré-casamento (350:128 — 390×357) */
  .pre-casamento { height: calc(357 * var(--m)); }
  .pre-casamento__trilho { top: calc(26 * var(--m)); height: calc(250.4 * var(--m)); gap: calc(2.517 * var(--m)); }
  .pre-casamento__trilho .foto { width: calc(170.9 * var(--m)); border-radius: calc(3.6 * var(--m)); }
  /* esmaecimento estreito + setas: bloco "Pré-casamento" na seção ANIMAÇÕES (fim do arquivo) */
  .pre-casamento__faixa { top: calc(276 * var(--m)); height: calc(81 * var(--m)); border-radius: 0 0 calc(28.8 * var(--m)) calc(28.8 * var(--m)); }
  /* título menor que no Figma (46) para ter respiro lateral; centralizado na faixa */
  .pre-casamento__titulo { left: 0; right: 0; top: calc(18 * var(--m)); font-size: calc(42 * var(--m)); text-align: center; }   /* ~320px: quase a largura de CASAMENTOS (318; ajuste do usuário, antes 355) */
  .pre-casamento__titulo .hifen { margin-inline: calc(0.5 * var(--m)); }

  /* Carrosséis do celular: Eventos e Depoimentos andam sozinhos, como no desktop (sem acompanhar a
     rolagem da página; decisão do usuário). A fileira de baixo continua alinhada à direita (sentido oposto). */

  /* 6. Eventos sociais — 2 fotos por fileira, todas em retrato; título em 2 linhas */
  .br-mobile { display: inline; }
  .eventos { height: auto; padding: calc(32 * var(--m)) calc(16 * var(--m) + var(--lado)); }
  .eventos__card {
    position: relative; left: auto; top: auto; width: auto; height: auto;
    display: flex; flex-direction: column; gap: calc(10 * var(--m));
    padding: calc(24 * var(--m)) 0 calc(28 * var(--m));
    border-radius: calc(15 * var(--m));
  }
  /* margem (e não padding): as fotos andando são cortadas a 16px da borda do card */
  .eventos__fileira { position: static; width: auto; height: auto; gap: calc(8 * var(--m)); margin-inline: calc(16 * var(--m)); }
  /* 2 fotos inteiras visíveis em qualquer largura de card (no celular: 159×190) */
  .eventos__fileira .foto { width: calc((100% - 8 * var(--m)) / 2); height: auto; aspect-ratio: 159 / 190; border-radius: calc(5 * var(--m)); }
  .eventos__titulo {
    position: static; margin-top: calc(14 * var(--m));
    font-size: calc(41.14 * var(--m)); line-height: 1; text-align: center;   /* 320px: não encosta nas laterais do card */
  }

  /* 7. Números — mesmo layout; números 34 (antes 40) para ganhar espaço entre eles (ajuste do usuário) */
  .numeros { height: calc(150 * var(--m)); }   /* faixa mais estreita (ajuste do usuário) */
  .numeros__lista {
    position: absolute; inset: 0;
    display: flex; justify-content: center; align-items: center; gap: calc(40 * var(--m));
  }
  .numero { position: static; }
  .numero__valor { font-size: calc(34 * var(--m)); }
  .numero__mais { font-size: calc(34.6 * var(--m)); margin-right: calc(2.5 * var(--m)); }
  .numero__rotulo { margin-top: calc(6 * var(--m)); font-size: max(12px, calc(12 * var(--m))); }

  /* 8. Eternize — vertical: título, frase, fotos (uma abaixo da outra), botão
     (ajuste do usuário: a frase logo abaixo do título, para não competir com o título dos Depoimentos) */
  .eternize {
    height: auto; padding: calc(44 * var(--m)) calc(16 * var(--m)) calc(56 * var(--m));
    display: flex; flex-direction: column; align-items: center;
  }
  .eternize__titulo { order: 1; position: static; font-size: calc(48 * var(--m)); margin-bottom: calc(14 * var(--m)); }
  /* todas as fotos com a largura da 1ª foto no Figma (333,5) e a altura da 2ª (408,4) */
  .eternize__foto {
    order: 3; position: relative; left: auto; top: auto;
    width: calc(333.5 * var(--m)); height: calc(408.4 * var(--m)); margin-bottom: calc(18 * var(--m));
    border-radius: calc(5 * var(--m));
    box-shadow: calc(-4 * var(--m)) calc(6 * var(--m)) calc(14 * var(--m)) rgb(0 0 0 / 0.14);
  }
  /* Foto 1: o arquivo é uma montagem (a faixa da direita é outra foto). Na moldura mais larga do
     celular, zoom 1,21 alinhado à esquerda corta essa faixa, e alinhado ao topo mantém a cabeça inteira. */
  .eternize__foto--1 img { --px: 0% !important; --py: 0% !important; --z: 1.21 !important; }
  .eternize__texto {
    order: 2; position: static; width: calc(300 * var(--m));
    margin: 0 0 calc(40 * var(--m)); font-size: calc(28 * var(--m)); line-height: 1.15; text-align: center;
    text-wrap: balance;   /* linhas equilibradas, sem palavra sozinha no fim */
  }
  .botao.eternize__botao { order: 4; position: static; margin-top: calc(14 * var(--m)); width: calc(333.5 * var(--m)); }   /* mesma largura das fotos */

  /* Botão (Eternize e Sobre) no celular */
  .botao { width: calc(320 * var(--m)); height: calc(56 * var(--m)); font-size: calc(16 * var(--m)); border-radius: calc(12 * var(--m)); }

  /* 9. Depoimentos — título maior em várias linhas; 1 card visível por fileira */
  .depoimentos { height: auto; display: grid; grid-template-columns: 100%; }
  .depoimentos__titulo {
    grid-row: 1; position: static;
    padding: calc(40 * var(--m)) calc(24 * var(--m)) calc(32 * var(--m));
    font-size: calc(40 * var(--m)); line-height: 0.85;   /* ajuste do usuário: um pouco maior (antes 36,08) */ white-space: normal; text-align: center;
  }
  /* 3 linhas como na imagem de referência: "Depoimentos de quem / transformou momentos / em memória." */
  .depoimentos__titulo { justify-self: center; max-width: calc(366 * var(--m)); padding-inline: calc(24 * var(--m)); box-sizing: border-box; width: calc(366 * var(--m)); }   /* largura acompanha a letra: mantém as 3 linhas */
  .depoimentos__fundo { grid-row: 2 / 4; grid-column: 1; position: relative; top: auto; left: auto; width: auto; height: auto; }
  .depoimentos__fileira { grid-column: 1; position: relative; top: auto; gap: calc(16 * var(--m)); padding-inline: calc(16 * var(--m) + var(--coluna)); }   /* 1º card alinhado à coluna; os seguintes aparecem ao lado */
  .depoimentos__fileira--1 { grid-row: 2; padding-top: calc(40 * var(--m)); }
  .depoimentos__fileira--2 { grid-row: 3; padding-top: calc(16 * var(--m)); padding-bottom: calc(40 * var(--m)); }
  .depoimentos__fileira > li { display: flex; }
  .depoimentos__fileira > li:has(.depoimento--longo) { display: none; }   /* card da Kamila (texto longo) fora do celular, a pedido do usuário */
  /* cards mais baixos e todos com a MESMA altura (ajuste do usuário) */
  .depoimento {
    width: calc(358 * var(--m)); height: calc(212 * var(--m));
    display: flex; flex-direction: column;
    padding: calc(18 * var(--m)) calc(28 * var(--m)) calc(18 * var(--m));   /* 28px nas laterais: conteúdo mais equilibrado no card */
    border-radius: calc(15 * var(--m));
  }
  .depoimento::before {
    position: relative; left: auto; top: auto; flex-shrink: 0;
    width: calc(26 * var(--m)); height: calc(26 * var(--m));
    font-size: calc(43.5 * var(--m)); line-height: calc(42.1 * var(--m)); padding-left: calc(0.5 * var(--m));
    margin-bottom: 0;   /* espaço aspas→frase = frase→autor */
  }
  /* frase centralizada no espaço entre as aspas e o autor (como no card da Dayane, referência do usuário) */
  .depoimento__texto,
  .depoimento--longo .depoimento__texto,
  .depoimento--largo .depoimento__texto {
    position: static; width: auto; margin: auto 0;
    font-size: calc(15 * var(--m)); line-height: 1.2; letter-spacing: -0.02em;
  }
  .depoimento__autor,
  .depoimento--longo .depoimento__autor {
    position: static; margin-top: 0;
    grid-template-columns: calc(44 * var(--m)) auto; column-gap: calc(12 * var(--m)); height: calc(44 * var(--m));
  }
  .depoimento__avatar { width: calc(44 * var(--m)); height: calc(44 * var(--m)); }
  .depoimento__nome { top: 0; font-size: calc(15 * var(--m)); }
  .depoimento__arroba { margin-top: calc(4 * var(--m)); font-size: max(12px, calc(13 * var(--m))); }

  /* 10. Sobre — vertical: nome, texto, foto, botão (sobre o card escuro) */
  .sobre { height: auto; padding: calc(40 * var(--m)) calc(16 * var(--m) + var(--lado)); display: flex; flex-direction: column; }
  .sobre__card {
    left: calc(16 * var(--m) + var(--lado)); right: calc(16 * var(--m) + var(--lado)); top: calc(40 * var(--m)); bottom: calc(40 * var(--m));
    width: auto; height: auto; border-radius: calc(12 * var(--m));
  }
  .sobre__nome,
  .sobre__texto,
  .sobre__foto,
  .sobre__botao { position: relative; left: auto; top: auto; }   /* relative: ficam acima do card */
  .sobre__nome { order: 1; align-self: center; width: calc(260 * var(--m)); margin: calc(36 * var(--m)) 0 0; }   /* centralizado; 260px (ajuste do usuário, antes 200) */
  /* alinhado à esquerda; text-wrap: pretty evita palavras sozinhas no fim dos parágrafos */
  .sobre__texto { order: 2; width: auto; margin: calc(22 * var(--m)) calc(28 * var(--m)) 0; font-size: calc(15.5 * var(--m)); line-height: 1.45; text-wrap: pretty; }   /* últimas linhas com 6/4/3 palavras */
  .sobre__texto p + p { margin-top: 1em; }
  .sobre__foto {
    order: 3; height: auto; aspect-ratio: 459.5 / 656;
    width: min(100% - 48 * var(--m), 310 * var(--m));   /* 310px no celular; no tablet não cresce com a caixa */
    margin: calc(28 * var(--m)) auto 0; border-radius: calc(10 * var(--m));
  }
  .sobre__botao { order: 4; width: min(100% - 48 * var(--m), 310 * var(--m)); margin: calc(28 * var(--m)) auto calc(36 * var(--m)); }

  /* 11. Rodapé — copyright centralizado em cima; "Desenvolvido por" à esquerda e Instagram à direita embaixo */
  .rodape {
    height: auto; display: grid;
    grid-template-columns: 1fr auto; grid-template-areas: "copy copy" "dev insta";
    align-items: center; column-gap: calc(12 * var(--m)); row-gap: calc(22 * var(--m));
    padding: calc(56 * var(--m)) calc(20 * var(--m) + var(--lado)) calc(40 * var(--m));
    font-size: max(12px, calc(12 * var(--m)));
  }
  .rodape::before { top: calc(18 * var(--m)); height: auto; bottom: 0; border-radius: calc(40 * var(--m)) calc(40 * var(--m)) 0 0; }
  .rodape__dev,
  .rodape__copy,
  .rodape__instagram { position: relative; left: auto; right: auto; top: auto; transform: none; }
  .rodape__divisor { display: none; }
  .rodape__dev { grid-area: dev; gap: calc(6 * var(--m)); }
  .rodape__dev img { width: calc(40 * var(--m)); top: calc(0.8 * var(--m)); }
  .rodape__instagram { grid-area: insta; justify-self: end; gap: calc(8 * var(--m)); }
  .rodape__instagram img { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }
  .rodape__instagram span { top: 0; }
  .rodape__copy { grid-area: copy; justify-self: center; text-align: center; white-space: normal; }
  /* área de toque de 44px nos links do rodapé, sem mudar o visual */
  .rodape__dev a,
  .rodape__instagram { position: relative; }
  .rodape__dev a::after,
  .rodape__instagram::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* Tablet em pé: título dos Depoimentos em 2 linhas, equilibradas (ajuste do usuário) */
@media (min-width: 768px) and (max-width: 1023px) {
  .depoimentos__titulo { width: auto; max-width: none; padding-inline: calc(16 * var(--m) + var(--lado)); text-wrap: balance; }
}


/* ==========================================================================
   ANIMAÇÕES (Etapa 7) — o Figma só tem hovers de protótipo (0.4s ease-out);
   os carrosséis foram definidos pelo usuário. Movimento dos carrosséis em js/main.js:
   ele mede o "período" de cada loop (--periodo) e a duração (--duracao).
   ========================================================================== */

/* ---------- Carrosséis automáticos (loop sem pulo) ----------
   Faixa: o trilho anda um grupo inteiro e recomeça.
   Eventos e Depoimentos (todas as larguras): cada item anda um conjunto inteiro; as cópias do conjunto
   (criadas pelo JS) ocupam o lugar dele. Fileira de baixo em sentido oposto. */
@keyframes carrossel-esq { to { transform: translateX(calc(-1 * var(--periodo, 0px))); } }
@keyframes carrossel-dir { to { transform: translateX(var(--periodo, 0px)); } }

.faixa__trilho.carrossel--auto { animation: carrossel-esq var(--duracao, 60s) linear infinite; }
.carrossel--auto > li { animation: carrossel-esq var(--duracao, 60s) linear infinite; }
.carrossel--auto.carrossel--inverso > li { animation-name: carrossel-dir; }
/* Pausas: Eventos e Depoimentos com o mouse em cima (só aparelhos com mouse: no toque o :hover
   "grudava" e a fileira parava de vez — bug relatado); Depoimentos também enquanto o dedo está
   sobre a fileira (classe do JS); tudo pausa fora da tela. A faixa NÃO pausa com o mouse (decisão do usuário). */
.faixa__trilho.carrossel--parado,
.carrossel--pausado > li,
.carrossel--parado > li { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .carrossel--auto:hover > li { animation-play-state: paused; }
}

/* ---------- Pré-casamento (desktop): setas discretas dentro do esmaecimento ---------- */
.pre-casamento__seta {
  position: absolute;
  top: calc((120 + 696.3 / 2) * var(--u));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(44px, calc(64 * var(--u)));
  height: max(44px, calc(112 * var(--u)));
  opacity: 0.35;
  transition: opacity 0.4s ease-out;
}
.pre-casamento__seta--esq { left: calc(40 * var(--u)); }
.pre-casamento__seta--dir { right: calc(40 * var(--u)); }
.pre-casamento__seta svg {
  width: max(14px, calc(24 * var(--u)));
  height: auto;
  fill: none;
  stroke: var(--cor-texto);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.pre-casamento__seta.ativa,
.pre-casamento__seta:hover,
.pre-casamento__seta:focus-visible { opacity: 0.9; }
/* Celular/tablet em pé: o Pré-casamento fica parado e o visitante desliza com o dedo, em loop.
   Esmaecimento estreito só na borda + seta, nos dois lados o tempo todo (decisão do usuário). */
@media (max-width: 1023px) {
  .pre-casamento__esmaecer {
    display: block;
    top: calc(26 * var(--m));
    height: calc(250.4 * var(--m));
    width: calc(34 * var(--m));
    transition: opacity 0.3s ease;
  }
  .pre-casamento__seta {
    display: flex;
    top: calc((26 + 250.4 / 2) * var(--m));
    width: 44px;                         /* área de toque */
    height: 44px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  .pre-casamento__seta--esq { left: calc(-5 * var(--m)); }
  .pre-casamento__seta--dir { right: calc(-5 * var(--m)); }
  .pre-casamento__seta svg { width: 11px; stroke-width: 2; }
  /* arraste próprio em loop infinito (JS): sem rolagem nativa na horizontal; na vertical, a página rola */
  .pre-casamento__trilho.pre--arrastavel {
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .pre-casamento__trilho.pre--arrastavel img { -webkit-user-drag: none; pointer-events: none; }
}

/* ---------- Hovers (só em aparelhos com mouse) ---------- */
.casamentos__foto,
.eternize__foto { transition: transform 0.4s ease-out; }
.eventos__fileira img { transition: filter 0.4s ease-out; }   /* desktop: hover do Figma (0.4s) */
@media (max-width: 1023px) {
  .eventos__fileira img { transition: filter 1.2s ease; }   /* celular: volta ao P&B suave (pedido do usuário) */
  /* Casamentos: as fotos aparecem ao entrar na tela durante a rolagem (pedido do usuário).
     O JS põe .revelar na seção (sem JS ou com movimento reduzido, as fotos já aparecem) e
     .visivel em cada foto quando ela entra na tela. */
  .casamentos.revelar .casamentos__foto {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .casamentos.revelar .casamentos__foto.visivel { opacity: 1; transform: none; }
  /* Depoimentos: o toque longo (para pausar e ler) abria a seleção de texto/menu do iPhone sobre
     o card em movimento. Sem seleção nem menu nessa fileira (pedido do usuário). */
  .depoimentos__fileira {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
.botao { transition: background-color 0.7s ease, color 0.7s ease, box-shadow 0.7s ease; -webkit-tap-highlight-color: transparent; }   /* mais suave que o Figma (0.4s), a pedido do usuário */

/* Eventos no celular/tablet em pé: a foto fica colorida ao entrar na fileira e volta ao P&B
   quando começa a sair pela outra ponta (classe do JS) */
.eventos__fileira .foto.foto--cor img { filter: grayscale(0); }

@media (hover: hover) {
  /* Casamentos e Eternize: a foto inteira cresce 4%, com o formato e a sombra (Figma, dobra 5) */
  .casamentos__foto:hover,
  .eternize__foto:hover { transform: scale(1.04); }
  /* Eventos: P&B → colorida */
  .eventos__fileira .foto:hover img { filter: grayscale(0); }
  /* Botões: fundo claro e texto verde (Eternize com borda, Sobre com brilho), como no Figma.
     Só com mouse: no toque, o :hover "grudava" e o botão ficava branco depois do clique. */
  .eternize__botao:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-verde);
    box-shadow: inset 0 0 0 1.5px var(--cor-verde);   /* borda sem mudar o tamanho do botão */
  }
  .sobre__botao:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-verde);
    box-shadow: 0 0 max(6px, calc(10.5 * var(--u))) rgb(255 255 255 / 0.8);
  }
}
/* Teclado: mesmo destaque do hover */
.eternize__botao:focus-visible {
  background-color: var(--cor-fundo);
  color: var(--cor-verde);
  box-shadow: inset 0 0 0 1.5px var(--cor-verde);
}
.sobre__botao:focus-visible {
  background-color: var(--cor-fundo);
  color: var(--cor-verde);
  box-shadow: 0 0 max(6px, calc(10.5 * var(--u))) rgb(255 255 255 / 0.8);
}

/* Celular/tablet em pé: botões com um pulso leve em loop (cresce 4% e volta) */
@keyframes botao-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 1023px) {
  .botao { animation: botao-pulso 2.4s ease-in-out infinite; }
  /* Eternize: zoom leve conforme a rolagem (o JS calcula --zoom pela distância ao centro da tela) */
  .eternize__foto { transform: scale(var(--zoom, 1)); transition: none; will-change: transform; }
}

/* ---------- Textos e títulos aparecem ao rolar (celular e desktop; pedido do usuário) ----------
   Esmaecimento ligado à rolagem (ajuste do usuário): o JS põe .texto-fade (invisível) e ajusta a
   opacidade conforme o texto sobe na tela; a transição curta só alisa os saltos da rolagem.
   Totalmente visível → .texto-fade--visivel. Sem JS ou com movimento reduzido, os textos já
   aparecem normalmente. */
.texto-fade { opacity: 0; transition: opacity 0.2s linear; }
.texto-fade.texto-fade--visivel { opacity: 1; }

/* ---------- Movimento reduzido: nada anda sozinho; as fileiras rolam com o dedo/trackpad ---------- */
@media (prefers-reduced-motion: reduce) {
  .faixa__trilho.carrossel--auto,
  .carrossel--auto > li,
  .botao { animation: none; }
  .eternize__foto { transform: none; }
  .eventos__fileira,
  .depoimentos__fileira { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .eventos__fileira::-webkit-scrollbar,
  .depoimentos__fileira::-webkit-scrollbar { display: none; }
  .casamentos__foto,
  .eventos__fileira img,
  .eternize__foto,
  .botao,
  .pre-casamento__seta { transition: none; }
}