/*
Theme Name: Ricardo Jayme
Theme URI: https://ricardojayme.com
Author: Ricardo Jayme
Description: Tema de portfólio para fotógrafo documental de casamentos. Reproduz a identidade visual de ricardojayme.com.
Version: 2.10.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ricardojayme
Tags: photography, portfolio, one-column, custom-menu, featured-images
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Cores — extraídas do site original */
  --color-bg:            #f7f6f3;
  --color-bg-header:     #ffffff;
  --color-text:          #2b2b2b;
  --color-text-muted:    #c4c4c4;
  --color-text-invert:   #f7f6f3;
  --color-dark:          #000000;
  --color-accent:        #e6316d;
  --color-gold:          #f7ce82;
  --color-cinza:         rgba(235, 235, 235, 0.82);
  --color-line:          #e2e0db;
  --color-field-bg:      #f7f6f3;
  /* Verde da marca, pedido pelo Ricardo. Sozinho, texto branco dá só 1.94:1
     de contraste — por isso o texto/ícone do botão usam --color-text
     (#2b2b2b), que dá 7.28:1 sobre esse verde. */
  --color-whatsapp:      #94cb00;
  --color-whatsapp-hover:#7fae00;

  /* Tipografia */
  --font-heading: 'Questrial', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --fs-base:      0.8rem;    /* 12.8px */
  --fs-small:     0.7rem;    /* 11.2px */
  --fs-nav:       0.8rem;    /* 12.8px */
  --fs-button:    0.75rem;   /* 12px   */
  /* Títulos escalam com a largura da janela, como no site original. */
  --fs-h1:        max(3rem, 8.91vw);
  --fs-h2:        max(2rem, 6.45vw);
  --fs-h3:        max(1.15rem, 1.84vw);

  --lh-body:      1.7;
  --lh-heading:   1;
  --ls-heading:   -0.04em;
  --ls-nav:       0.03em;

  /* Layout — margens laterais de 11.72vw reproduzem o grid do original */
  --header-height:      149px;
  --header-height-mob:  82px;
  --content-max:        none;
  --content-pad:        11.72vw;
  /* O original usa 2.963; aqui o hero é mais alto por escolha do Ricardo
     (≈ +100px a 1280) e a proporção mantém esse ganho em qualquer largura. */
  --hero-ratio:         2.4 / 1;
  --hero-ratio-mob:     3 / 4;

  /* Proporções das fotos, medidas no site original */
  --ratio-hero:      2.963;
  --ratio-ana:       1.461;
  --ratio-leo:       1.681;
  --ratio-mari:      1.003;
  --ratio-claudinne: 3.286;
  --ratio-feature:   2.241;
  --ratio-duo:       1.628;
  --ratio-rainbow:   13.112;
  --ratio-capa:      2.6;      /* original 2.246; mais baixa por escolha do Ricardo */
  --ratio-coberturas:0.66;
  --ratio-atelier:   0.905;
  --ratio-banner:    4.529;

  /* Espaçamentos — medidos no site original a 1280px:
     36px de respiro nas seções, 47px entre blocos, 12px dentro de um grupo. */
  --space-section:      2.25rem;   /* 36px */
  --space-block:        2.9rem;    /* 47px */
  --space-tight:        0.75rem;   /* 12px */
  --gap-grid:           0.625rem;  /* 10px */

  /* Transições */
  --ease:               cubic-bezier(0.4, 0, 0.2, 1);
  --dur:                0.4s;
  --dur-slide:          1.2s;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h1 { font-size: var(--fs-h1); color: var(--color-text-muted); }
h2 { font-size: var(--fs-h2); color: var(--color-text-muted); }
h3 { font-size: var(--fs-h3); color: var(--color-text); }

/* Sem isto, um <strong> dentro de texto já em negrito escala para 900. */
strong, b { font-weight: 700; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; }

/* Acessibilidade */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 0;
  z-index: 999;
  padding: 1.1rem 2rem;
  background: var(--color-text);
  color: var(--color-text-invert);
}
.skip-link:focus { top: 0; }

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

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.container--narrow { max-width: 860px; }

/* Galerias e faixas usam margens laterais menores que o conteúdo (4vw). */
.container--wide { --content-pad: 4vw; }

.section { padding-block: var(--space-section); }
.section--flush { padding-block: 0; }
.section--dark {
  background-color: var(--color-dark);
  color: var(--color-text-invert);
}
.section--dark h1,
.section--dark h2,
.section--dark p { color: var(--color-text-invert); }

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-bg-header);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 1.75rem var(--content-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.site-branding { line-height: 0; }

.site-branding img {
  width: auto;
  height: 46px;
}

.site-title-text {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

/* Navegação desktop */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: inline-block;
  padding-bottom: 3px;
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  border-bottom-color: var(--color-text);
}

/* Ações do header (carrinho) */
.header-actions {
  position: absolute;
  top: 50%;
  right: var(--content-pad);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-actions svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-text);
  fill: none;
  stroke-width: 1.4;
}

.cart-link { position: relative; display: inline-flex; }

.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6rem;
  line-height: 16px;
  text-align: center;
}

/* Botão hambúrguer (mobile) */
.menu-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: var(--content-pad);
  transform: translateY(-50%);
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: none;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 1.5px;
  background: var(--color-text);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle span { top: 50%; margin-top: -0.75px; }
.menu-toggle span::before { content: ''; top: -8px; }
.menu-toggle span::after  { content: ''; top: 8px; }

.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateX(-50%) translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after  { transform: translateX(-50%) translateY(-8px) rotate(-45deg); }

/* Overlay do menu mobile */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  background: var(--color-bg-header);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav ul {
  margin: 0; padding: 0;
  list-style: none;
  text-align: center;
}

.mobile-nav li { margin-bottom: 1.6rem; }

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

.mobile-nav__close {
  position: absolute;
  top: 1.6rem; right: var(--content-pad);
  width: 34px; height: 34px;
  border: 0; background: none;
  font-size: 0; color: var(--color-text);
}
.mobile-nav__close::before,
.mobile-nav__close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 1.5px;
  background: currentColor;
}
.mobile-nav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

body.menu-open { overflow: hidden; }

/* ==========================================================================
   5. Hero slider
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
  background: var(--color-bg);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slide) var(--ease);
}

.hero__slide.is-active { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2.25rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.7rem;
  z-index: 2;
}

.hero__dot {
  width: 11px; height: 11px;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.hero__dot.is-active { background: #fff; }

/* ==========================================================================
   6. Home — grid de composição (24 colunas)
   ========================================================================== */

.canvas { padding-block: var(--space-section); }

/* No original a home é uma seção contínua: o texto começa rente ao hero e as
   faixas seguintes não repetem o respiro de seção uma contra a outra. */
.hero + .canvas { padding-top: 0; }
.canvas + .canvas { padding-top: 0; }

/* Exceção: quando o fundo muda de cor (branco → cinza), zerar o respiro
   colava o título "álbuns" na borda do bloco cinza. Aqui as duas seções não
   são uma continuação visual — precisam do respiro normal entre elas. */
.canvas--white + .canvas--cinza { padding-top: var(--space-section); }

.canvas__grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-content: start;
  gap: var(--space-block) 0;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* Impede que um filho largo (preço sem quebra, texto longo) estique a coluna. */
.canvas__grid > * { min-width: 0; }

/* Posicionamento em colunas */
.c-start-1  { grid-column-start: 1; }
.c-start-2  { grid-column-start: 2; }
.c-start-8  { grid-column-start: 8; }
.c-start-13 { grid-column-start: 13; }
.c-start-14 { grid-column-start: 14; }
.c-start-18 { grid-column-start: 18; }
.c-start-23 { grid-column-start: 23; }

.c-span-2  { grid-column-end: span 2; }
.c-span-7  { grid-column-end: span 7; }
.c-span-8  { grid-column-end: span 8; }
.c-span-9  { grid-column-end: span 9; }
.c-span-10 { grid-column-end: span 10; }
.c-span-11 { grid-column-end: span 11; }
.c-span-12 { grid-column-end: span 12; }
.c-span-24 { grid-column-end: span 24; }

.t-center    { text-align: center; }
.self-start  { align-self: start; }
.self-center { align-self: center; }

/* Títulos: cada um tem seu tamanho E sua cor no original — cinza, creme,
   preto ou dourado. Todos em peso 700 (o Questrial só tem 400, então o
   navegador engrossa, e é isso que dá o traço mais cheio do site real). */
.canvas__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--color-text-muted);
}

.h-58, .h-72, .h-80, .h-82 {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.h-58 { font-size: max(1.9rem, 4.53vw); color: var(--color-text-invert); } /* creme sobre a foto */
.h-72 { font-size: max(2.2rem, 5.64vw); color: var(--color-gold); }        /* dourado */
.h-80 { font-size: max(2.4rem, 6.25vw); color: var(--color-gold); }        /* dourado */
.h-82 { font-size: max(2.4rem, 6.45vw); color: var(--color-dark); }        /* preto */

.canvas__heading { align-self: end; }
.canvas__heading .eyebrow {
  margin: 0 0 0.15rem;
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  color: var(--color-text);
}

/* O corpo de texto é preto — o cinza claro fica só no "seja real" e no botão. */
.canvas__text { color: var(--color-dark); }
.canvas__text--dark { color: var(--color-text); }

/* Coluna empilhada dentro de uma célula do grid */
.canvas__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}

/* "Respiro histórias..." — no original esse bloco é menor e recuado, com
   respiro à esquerda e à direita antes da foto, e fica na mesma linha do
   grid que essa foto (por isso a mesma altura e o centro alinhado). */
.stack-respiro {
  grid-row: 2;
  align-self: center;
}

/* A foto da mesma linha também centraliza — o texto costuma ser mais alto
   que a foto, e sem isso a foto sobra colada no topo da linha. */
.stack-respiro + .canvas__media { align-self: center; }

/* Variante que ocupa a altura da linha (a foto ao lado manda no tamanho):
   os blocos ficam no topo e o último desce para a base. */
.canvas__stack--fill {
  align-self: stretch;
  gap: var(--space-block);
}

.canvas__stack--fill > :last-child { margin-top: auto; }

.canvas__media { margin: 0; position: relative; }

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

/* Respiro de 2px entre duas fotos vizinhas na mesma linha do grid. */
.canvas__media.is-colada { padding-left: 2px; }

/* Proporções por foto */
.r-ana       { aspect-ratio: var(--ratio-ana); }
.r-leo       { aspect-ratio: var(--ratio-leo); }
.r-mari      { aspect-ratio: var(--ratio-mari); }
.r-claudinne { aspect-ratio: var(--ratio-claudinne); }
.r-duo       { aspect-ratio: var(--ratio-duo); }

/* Título sobreposto à foto */
.overlay-host { position: relative; }

.overlay-title {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

/* "o amor inspira a arte" — centralizado na vertical, à direita da foto */
.overlay-title--right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: right;
}

/* "você é protagonista" — 80% do topo, centralizado */
.overlay-title--center {
  left: 0;
  top: 80%;
  width: 100%;
  text-align: center;
}

/* "o amor é único" — 34% do topo, alinhado à esquerda */
.overlay-title--left {
  left: 0;
  top: 34%;
  width: 100%;
  text-align: left;
}

/* Imagem full-bleed com legenda sobreposta */
.feature {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.feature img {
  width: 100%;
  aspect-ratio: var(--ratio-feature);
  object-fit: cover;
}

.feature__caption {
  position: absolute;
  left: var(--content-pad);
  top: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  max-width: min(60%, 420px);
  font-weight: 700;
  color: var(--color-text-invert);
}

/* Botão */
.btn {
  display: inline-block;
  margin-top: var(--space-block);
  padding: 1.15rem 2rem;
  border: 1px solid currentColor;
  background: transparent;
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--color-text);
  color: var(--color-text-invert);
}

.btn--block { display: block; width: 100%; }

.btn--muted { color: var(--color-text-muted); }
.btn--muted:hover { background: var(--color-text-muted); color: var(--color-bg); }

.btn--invert { color: var(--color-text-invert); }
.btn--invert:hover { background: var(--color-text-invert); color: var(--color-text); }

/* Faixa "love wins" */
.rainbow-bar {
  align-self: start;
  width: 100%;
  aspect-ratio: var(--ratio-rainbow);
  object-fit: contain;
}

/* ==========================================================================
   7. Grid do Instagram
   ========================================================================== */

.instagram {
  padding-block: var(--space-section);
  text-align: center;
}

/* Feed vindo de plugin: só damos espaço, o plugin cuida do próprio layout. */
.instagram__feed img { display: block; }

.instagram__title {
  margin-bottom: var(--space-tight);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-text);
}

/* Faixa justificada: as larguras crescem na proporção de cada foto, então
   todas terminam com a mesma altura e a linha preenche a largura exata. */
.instagram__grid {
  display: flex;
  gap: 2.6vw;   /* → 33px @1280, como no original */
}

.instagram__item {
  position: relative;
  overflow: hidden;
  flex: var(--ar, 1) 1 0;
  aspect-ratio: var(--ar, 1);
}

.instagram__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.instagram__item:hover img { opacity: 0.75; transform: scale(1.04); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-block) var(--space-section);
  text-align: center;
  color: var(--color-text);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: var(--space-block);
}

.social-links a { line-height: 0; }

/* Glifos cheios do Font Awesome — mesmo padrão do botão do WhatsApp. */
.social-links svg {
  width: auto; height: 19px;
  fill: var(--color-text);
  transition: fill var(--dur) var(--ease);
}

.social-links a:hover svg { fill: var(--color-accent); }

.site-footer__copy {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text);
}

/* Botão flutuante do WhatsApp */
/* Botão fixo, presente em todas as páginas. Fica a 90% de opacidade e fecha
   em 100% no hover, para não competir com a foto por trás. */
.whatsapp-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  /* 15% menor que a versão anterior (padding 12/25, fonte 15, ícone 22). */
  gap: 10px;
  padding: 10px 21px;
  border-radius: 50px;
  background: var(--color-whatsapp);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  color: var(--color-text);
  font-size: 12.75px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: var(--color-whatsapp-hover);
  opacity: 1;
}

.whatsapp-float svg { flex: 0 0 auto; width: 19px; height: 19px; fill: currentColor; }

/* Em telas estreitas o botão vira só o ícone, para não cobrir o conteúdo. */
@media (max-width: 540px) {
  .whatsapp-float {
    right: 16px; bottom: 16px;
    padding: 12px;
    gap: 0;
  }

  .whatsapp-float span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

/* ==========================================================================
   9. Página: Portfólio
   ========================================================================== */

.page-hero {
  padding-block: var(--space-section) var(--space-block);
  text-align: center;
}

.page-hero__title { color: var(--color-text-muted); }

/* No original o texto ocupa a largura do conteúdo e é preto, não cinza. */
.page-hero__intro {
  margin: var(--space-block) auto 0;
  color: var(--color-dark);
}

/* A página inteira é preta, com o título gigante sobre o vídeo. */
.portfolio-capa {
  background: var(--color-dark);
  padding-block: var(--space-section) clamp(2.5rem, 5.6vw, 4.5rem);
}

/* Margem lateral própria desta página: 7.9vw (≈101px @1280). */
.container--portfolio { --content-pad: 7.9vw; }

.h-portfolio {
  font-size: max(2.5rem, 19.11vw);   /* → 244.6px @1280 */
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-muted);
  text-align: center;
}

/* Capa do vídeo: só carrega o YouTube depois do clique.
   O vídeo sobe por cima do título e esconde a parte de baixo dele. O original
   deixa 52% do texto exposto; aqui são 60%, por escolha do Ricardo. O -7.64vw
   é a fatia coberta (40% dos 19.11vw do título), então a sobreposição
   acompanha a tela. */
.video-capa {
  position: relative;
  z-index: 1;
  margin-top: -7.64vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-dark);
  cursor: pointer;
}

/* Vídeo filmado em pé (Reels/Stories): a caixa horizontal de 16:9 deixaria
   tarjas enormes nas laterais. Em vez disso, uma coluna vertical estreita,
   centralizada — largura pensada pra caber ao lado do título gigante sem
   dominar a tela inteira num desktop grande. */
.video-capa.is-vertical {
  width: min(360px, 72vw);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.video-capa__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease);
}

.video-capa:hover .video-capa__poster { opacity: 0.8; }

.video-capa__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(60px, 6.5vw, 84px);
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.video-capa__play svg { width: 100%; height: auto; }

.video-capa__play-bg {
  fill: #212121;
  fill-opacity: 0.8;
  transition: fill var(--dur) var(--ease), fill-opacity var(--dur) var(--ease);
}

.video-capa__play-seta { fill: #fff; }

.video-capa:hover .video-capa__play-bg {
  fill: #f00;
  fill-opacity: 1;
}

/* Depois do clique o iframe substitui a capa. */
.video-capa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  padding-top: var(--space-block);
}

.portfolio-item { position: relative; overflow: hidden; }

.portfolio-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.portfolio-item:hover img { transform: scale(1.05); }

.portfolio-item__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: #fff;
  letter-spacing: var(--ls-heading);
}

.portfolio-item:hover .portfolio-item__label { opacity: 1; }

/* ==========================================================================
   10. Página: Histórias Reais
   ========================================================================== */

/* Capa da página: foto larga com o título sobreposto perto da base */
.historias-capa { padding-top: var(--space-section); }

.historias-capa__media {
  position: relative;
  margin: 0;
}

/* Mesma proporção do slider da home (o original usa 1.942, mais alto). */
.historias-capa__media img {
  width: 100%;
  aspect-ratio: 2.4;
  object-fit: cover;
}

/* Como no original: centralizado e na faixa de baixo da foto. */
.historias-capa__title {
  position: absolute;
  left: 0;
  top: 78%;
  width: 100%;
  text-align: center;
}

.h-capa {
  display: block;
  font-family: var(--font-heading);
  font-size: max(2.4rem, 7.42vw);   /* → 95px @1280 */
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-gold);
}

/* "desde 2010" é um título em Questrial, não texto de corpo. */
.page-hero__eyebrow {
  margin-bottom: var(--space-tight);
  font-family: var(--font-heading);
  font-size: max(1.15rem, 1.85vw);   /* → 23.68px @1280 */
  font-weight: 700;
  line-height: 1.176;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

.historias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  padding-bottom: var(--space-section);
}

.historia-card {
  display: block;
  position: relative;
  overflow: hidden;
}

.historia-card__media { position: relative; overflow: hidden; }

.historia-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* Escurece a foto no mouseover — véu por cima, para o nome não escurecer junto. */
.historia-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.historia-card:hover .historia-card__media::after,
.historia-card:focus-visible .historia-card__media::after { opacity: 1; }

.historia-card:hover .historia-card__media img { transform: scale(1.05); }

/* O nome do casal fica sobre a foto, em creme — não abaixo dela. */
.historia-card__title {
  position: absolute;
  z-index: 2;              /* acima do véu do hover */
  left: 7%;
  top: 42%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: max(1.1rem, 2.21vw);   /* → 28.3px @1280 */
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-invert);
  pointer-events: none;
}

/* ==========================================================================
   11. Página: Proposta
   ========================================================================== */

/* Capa: foto full-bleed com o título sobreposto */
.proposta-capa {
  position: relative;
  background: var(--color-bg-header);
}

.proposta-capa__media { margin: 0; }

.proposta-capa__media img {
  width: 100%;
  aspect-ratio: var(--ratio-capa);
  object-fit: cover;
}

/* O título fica a ~32% da altura da foto, como no original. */
.proposta-capa__title {
  position: absolute;
  left: 0;
  top: 32%;
  width: 100%;
}

/* O original alinha à esquerda, mas o texto não preenche a caixa inteira e
   sobra folga só de um lado — centralizado fica no eixo da página. */
.h-gold {
  font-size: max(2.6rem, 10.28vw);   /* → 131.6px @1280 */
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-gold);
  text-align: center;
}

/* Fundos das seções da proposta (o ritmo vertical já vem do .canvas) */
.canvas--white { background: var(--color-bg-header); }
.canvas--cinza { background: var(--color-cinza); }

/* Proporções específicas desta página */
.r-coberturas { aspect-ratio: var(--ratio-coberturas); }
.r-atelier    { aspect-ratio: var(--ratio-atelier); }

/* "coberturas" — creme, centralizado, a 36% da altura da foto */
.overlay-title--coberturas {
  left: 0;
  top: 36%;
  width: 100%;
  text-align: center;
}

.h-coberturas {
  display: block;
  font-family: var(--font-heading);
  font-size: max(2.2rem, 7.54vw);    /* → 96.5px @1280 */
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-invert);
}

.h-albuns {
  align-self: start;
  font-family: var(--font-heading);
  font-size: max(2.4rem, 8.06vw);    /* → 103.2px @1280 */
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-invert);
}

/* Lista de coberturas: descrição à esquerda, preço à direita.
   A lista acompanha a altura da foto ao lado — o respiro entre os itens se
   distribui para que a última linha termine junto com a base da foto. */
.tabela-precos {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Cada cobertura ocupa uma faixa entre duas divisórias, e a folga que sobra
   se reparte igualmente entre elas. O conteúdo fica centrado na sua faixa. */
.preco-item {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.45rem;
  border-bottom: 1px solid var(--color-line);
}

.preco-item:first-child { padding-top: 0; }
.preco-item:last-child  { padding-bottom: 0; border-bottom: 0; }

.preco-item__info { flex: 1 1 auto; max-width: 55%; }

/* Título em peso normal; é a descrição que vem em negrito. */
.preco-item__title {
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: normal;
  color: #000;
}

.preco-item__info p {
  margin-bottom: 0;
  font-weight: 700;
  color: var(--color-text);
}

.preco-item__info .preco-item__opcao { font-weight: 400; }

/* Preço: dourado, quase o dobro do corpo de texto. */
.preco-item__price {
  flex: 0 0 auto;
  margin: 0;
  font-size: max(1.15rem, 1.85vw);   /* → 23.68px @1280 */
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-gold);
  white-space: nowrap;
}

/* Selo do fabricante */
.fabricante {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: start;
  font-size: var(--fs-base);
  color: var(--color-text);
}

.fabricante img {
  width: auto;
  height: 22px;
  object-fit: contain;
}

.proposta-notes {
  align-self: start;
  font-size: var(--fs-base);
  color: #000;
}

.proposta-notes em { font-style: italic; }
.proposta-notes__update { color: var(--color-text-muted); }

/* Os três cartões de álbum */
.albuns-cards {
  padding-block: clamp(1.5rem, 2.5vw, 2.4rem) var(--space-section);
  background: var(--color-bg);
}

.albuns-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 92vw;
  margin-inline: auto;
}

.album-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-header);
}

.album-card__banner {
  width: 100%;
  aspect-ratio: var(--ratio-banner);
  object-fit: cover;
}

.album-card__body {
  flex: 1 1 auto;
  padding: clamp(1.75rem, 3.8vw, 3.1rem) clamp(1.5rem, 3.8vw, 3.1rem);
  text-align: center;
}

.album-card__title {
  margin-bottom: 0.9rem;
  font-family: var(--font-heading);
  font-size: max(1.15rem, 1.85vw);   /* → 23.68px @1280 */
  font-weight: 700;
  line-height: 1.176;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

.album-card__title.is-gold { color: var(--color-gold); }

.album-card__desc { color: #000; }

.album-card__specs {
  margin-bottom: 1.25rem;
  color: #000;
}

/* Tamanho e preço vêm empilhados e centralizados, ambos em negrito. */
.album-card__sizes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  color: #000;
}

.album-card__sizes li {
  display: flex;
  flex-direction: column;
  padding-block: 0 0.6rem;
}

.album-card__sizes li:last-child { padding-bottom: 0; }


/* ==========================================================================
   12. Página: Quadros
   ========================================================================== */

.quadros-filters {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: var(--space-block);
}

.quadros-filter {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text);
}

.quadros-filter.is-active,
.quadros-filter:hover { border-bottom-color: var(--color-text); }

.quadros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: var(--space-section);
}

.quadro-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.quadro-card__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease);
}

.quadro-card__media img.is-hover { opacity: 0; }
.quadro-card:hover .quadro-card__media img.is-hover { opacity: 1; }

.quadro-card__title {
  margin-top: 0.9rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}

.quadro-card__price {
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.quadro-card .btn { margin-top: 0.9rem; }

/* ==========================================================================
   13. Página: Contato
   ========================================================================== */

/* A seção de contato tem fundo branco no site original. */
.contato-section { background: var(--color-bg-header); }

.contato {
  display: grid;
  grid-template-columns: 47fr 43fr;
  align-items: start;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding-block: var(--space-section);
}

.contato__media img {
  width: 100%;
  aspect-ratio: 1.247;
  object-fit: cover;
}

.contato__intro { margin-bottom: var(--space-block); }
.contato__intro strong { font-weight: 600; }

.contato__local {
  margin-bottom: var(--space-block);
  color: var(--color-text-muted);
}

/* Formulário */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-field { margin-bottom: 1.5rem; }

.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-base);
  color: var(--color-text);
}

.form-field .required {
  margin-left: 0.35rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  background: var(--color-field-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.form-field textarea { min-height: 160px; resize: vertical; }

/* Mesmo padrão visual do botão "me chama" da home (link para /contato logo
   abaixo do hero): contorno vazado, cinza-claro, preenche no hover. */
.form-submit {
  margin-top: var(--space-tight);
  padding: 1.15rem 2rem;
  border: 1px solid currentColor;
  background: transparent;
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.form-submit:hover { background: var(--color-text-muted); color: var(--color-bg); }

.form-notice {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  border-left: 2px solid currentColor;
  font-size: var(--fs-base);
}

.form-notice--success { color: #1e7a45; }
.form-notice--error   { color: #a12a2a; }

/* ==========================================================================
   14. Single: trabalho
   ========================================================================== */

.single-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.single-content {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--space-section);
  color: var(--color-text-muted);
}

.single-content h1 { margin-bottom: var(--space-block); text-align: center; }

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  padding-bottom: var(--space-section);
}

.galeria-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   14b. Auto-diagramador — full-bleed / díptico / respiro
   -------------------------------------------------------------------------- */

/* Nenhuma foto encosta na borda da tela: o maior tamanho é "wide", sempre
   com margem lateral. Tema clássico sem theme.json, então o breakout da
   coluna de 720px é manual. */
.single-content,
.entry-content {
  --rj-gutter: max(1rem, 5vw);
  --rj-wide: min(1100px, calc(100vw - 2 * var(--rj-gutter)));
}

.single-content .alignwide,
.entry-content .alignwide {
  width: var(--rj-wide);
  max-width: none;
  margin-left: calc(50% - var(--rj-wide) / 2);
  margin-right: calc(50% - var(--rj-wide) / 2);
  margin-block: var(--space-block);
}

.single-content .wp-block-image,
.entry-content .wp-block-image {
  margin-block: var(--space-block);
}

.single-content .wp-block-image img,
.entry-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.single-content .rj-diptico,
.single-content .rj-par,
.single-content .rj-trio,
.entry-content .rj-diptico,
.entry-content .rj-par,
.entry-content .rj-trio {
  gap: var(--gap-grid);
}

.single-content .rj-diptico .wp-block-image,
.single-content .rj-par .wp-block-image,
.single-content .rj-trio .wp-block-image,
.entry-content .rj-diptico .wp-block-image,
.entry-content .rj-par .wp-block-image,
.entry-content .rj-trio .wp-block-image {
  margin: 0;
}

/* Recorte comum pros dois lados do par ficarem com a mesma altura. */
.single-content .rj-diptico img,
.entry-content .rj-diptico img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.single-content .rj-par img,
.single-content .rj-trio__pilha img,
.entry-content .rj-par img,
.entry-content .rj-trio__pilha img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Trio: a grande preenche exatamente a altura das duas empilhadas. */
.single-content .rj-trio__pilha,
.entry-content .rj-trio__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}

.single-content .rj-trio__grande .wp-block-image,
.entry-content .rj-trio__grande .wp-block-image {
  height: 100%;
}

.single-content .rj-trio__grande img,
.entry-content .rj-trio__grande img {
  height: 100%;
  object-fit: cover;
}

.single-content .rj-vertical,
.entry-content .rj-vertical {
  max-width: 480px;
  margin-inline: auto;
}

.rj-respiro {
  width: 100%;
}

/* ==========================================================================
   15. Conteúdo genérico (page.php / single.php)
   ========================================================================== */

.entry {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-section);
}

.entry__title { margin-bottom: var(--space-block); text-align: center; }

.entry__content { color: var(--color-text-muted); }
.entry__content a { text-decoration: underline; }
.entry__content img { margin-block: var(--space-block); }

.entry__content h2,
.entry__content h3 { margin-block: var(--space-block) 0.75rem; }

/* Paginação */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-bottom: var(--space-section);
}

.pagination .page-numbers {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-line);
  font-size: var(--fs-small);
}

.pagination .current {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-text-invert);
}

/* ==========================================================================
   16. Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
  .instagram__grid { flex-wrap: wrap; }
  .instagram__item { flex-basis: calc(50% - var(--gap-grid)); }
  .portfolio-grid,
  .historias-grid,
  .quadros-grid,
  .albuns,
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --content-pad: clamp(1.25rem, 6vw, 5rem); }
}

@media (max-width: 768px) {
  :root {
    --header-height: var(--header-height-mob);
    --hero-ratio: var(--hero-ratio-mob);
    --content-pad: 1.5rem;
  }

  .site-header { min-height: var(--header-height-mob); }

  .site-header__inner {
    flex-direction: row;
    justify-content: flex-start;
    padding: 1.1rem var(--content-pad);
  }

  .site-branding img { height: 34px; }

  .main-nav { display: none; }
  .menu-toggle { display: block; }

  .header-actions { right: calc(var(--content-pad) + 52px); }

  .contato {
    grid-template-columns: 1fr;
    gap: var(--space-block);
  }

  .contato__media img { aspect-ratio: 3 / 2; }

  /* No mobile o grid vira uma coluna e os títulos saem de cima das fotos. */
  .canvas__grid { grid-template-columns: 1fr; }

  .canvas__grid > * {
    grid-column: 1 / -1 !important;
  }

  .canvas__media.row-tall img,
  .canvas__media.ratio-wide img { aspect-ratio: 3 / 2; }

  .overlay-title {
    position: static;
    transform: none;
    text-align: center;
    white-space: normal;
    margin-top: 0.9rem;
  }

  .rainbow-bar { width: min(180px, 50%); margin-inline: auto; }

  .feature__caption {
    position: static;
    max-width: none;
    padding: 1rem var(--content-pad) 0;
    color: var(--color-text);
  }

  /* Proposta no mobile */
  .proposta-capa__title {
    position: static;
    padding-block: 1.25rem 0;
  }

  .h-gold { font-size: clamp(2.4rem, 12vw, 4rem); }

  .h-coberturas,
  .h-albuns { color: var(--color-text-muted); }

  .r-coberturas { aspect-ratio: 3 / 4; }
  .r-atelier    { aspect-ratio: 1 / 1; }

  .preco-item__info { max-width: none; }

  .albuns-cards__grid {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 1.25rem;
    padding-inline: var(--content-pad);
  }

  .pacotes { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .feature img { aspect-ratio: 4 / 5; }

  .quadros-filters { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 540px) {
  .instagram__item { flex-basis: calc(100% - var(--gap-grid)); }

  /* Numa coluna só, o nome do casal volta para baixo da foto. */
  .historia-card__title {
    position: static;
    margin-top: 0.6rem;
    text-align: center;
    color: var(--color-text);
  }

  .portfolio-grid,
  .historias-grid,
  .quadros-grid,
  .albuns,
  .galeria-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. Scroll reveal — fade-in-para-cima ao rolar a página
   ========================================================================== */

/* .reveal anima o próprio elemento; .reveal-group anima os filhos diretos em
   cascata (delay crescente por nth-child). O JS (initScrollReveal, main.js)
   observa a entrada na tela e acrescenta .is-visible. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }

.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-group > * { opacity: 1; transform: none; }
}