/* ============================================================
   BELEZA INFINITA — rebuild editorial
   Paleta do briefing: #FFF8F3 · #4C1235 · #9B2853 · #F3B39A
   Playfair Display (editorial) + sans de sistema (UI)
   ============================================================ */

/* ---------- Playfair Display local ---------- */
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-400.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-700.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-900.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --papel:#FFF8F3;          /* fundo claro */
  --marfim:#FFFDF9;         /* moldura marfim */
  --vinho:#4C1235;          /* vinho — títulos/editorial */
  --vinho-2:#7A3B57;        /* texto secundário (7.6:1 sobre o papel) */
  --rosa:#9B2853;           /* primária */
  --rosa-hover:#7E1F44;
  --rosa-active:#671836;
  --pessego:#F3B39A;        /* textura tipográfica */
  --borda:#EBD3C1;
  --borda-forte:#D9AE92;
  --foco:#4C1235;

  --fonte-editorial:"Playfair Display",Didot,"Bodoni MT",Georgia,serif;
  --fonte-ui:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;

  --raio-sm:8px;
  --raio-md:14px;
  --raio-pilula:999px;
  --sombra-1:0 1px 2px rgba(76,18,53,.07);
  --sombra-2:0 8px 24px rgba(76,18,53,.12);
  --sombra-3:0 24px 64px rgba(76,18,53,.28);
  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte-ui);
  font-size:16px; line-height:1.5;
  background:var(--papel); color:var(--vinho);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}

:focus{outline:none}
:focus-visible{
  outline:3px solid var(--foco);
  outline-offset:3px;
  border-radius:var(--raio-sm);
}

/* Link de pular conteúdo */
.pular{
  position:absolute; left:16px; top:-80px; z-index:200;
  background:var(--vinho); color:var(--papel);
  padding:12px 20px; border-radius:var(--raio-pilula);
  font-weight:600; text-decoration:none; transition:top var(--dur) var(--ease);
}
.pular:focus{top:12px}

/* ============================================================
   01 · MASTHEAD — bloco de marca (desktop 550px)
   ============================================================ */
.masthead{
  position:relative; overflow:hidden;
  min-height:550px;
  display:flex; flex-direction:column; align-items:center;
  background:var(--papel);
}
.marca{
  width:100%; max-width:820px;
  display:flex; flex-direction:column; align-items:center;
  padding:56px 24px 0;
  position:relative; z-index:2;
}
.marca-logo{
  width:600px; height:370px;
  object-fit:contain;            /* logo original sempre integral */
}
.slogan{
  font-family:var(--fonte-editorial);
  font-weight:900; font-size:42px; line-height:1.08;
  color:var(--vinho); text-align:center;
  margin-top:42px; letter-spacing:-.01em;
}
.slogan em{font-style:normal; color:var(--rosa)}

/* Navegação discreta — DEPOIS do slogan */
.nav-discreta{
  margin-top:30px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
}
.nav-discreta a{
  font-size:12.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--vinho-2); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; padding:10px 14px;
  border-radius:var(--raio-pilula);
}
.nav-discreta a:hover{color:var(--rosa); background:rgba(155,40,83,.07)}
.nav-discreta .sep{color:var(--borda-forte); font-size:12px}

/* Gesto editorial abaixo do bloco de marca */
.gesto{
  margin:44px 0 0; position:relative; z-index:2;
  display:flex; align-items:center; gap:16px;
  font-size:12px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--vinho-2);
}
.gesto::before,.gesto::after{
  content:""; display:block; width:72px; height:1px; background:var(--borda-forte);
}

/* ============================================================
   Campanha — cena de 720px, moldura marfim, "b" tipográfico
   ============================================================ */
.campanha{
  position:relative; z-index:1;
  width:100%; min-height:720px;
  display:flex; align-items:center; justify-content:center;
  padding:56px 24px 88px;
  overflow:hidden;
}
/* "b" ampliado como textura tipográfica (não marca-d'água) */
.b-textura{
  position:absolute; z-index:0;
  font-family:var(--fonte-editorial); font-weight:900;
  font-size:clamp(420px, 62vw, 860px); line-height:.8;
  color:var(--pessego); opacity:.55;
  right:-.12em; bottom:-.32em;
  user-select:none; pointer-events:none;
}
.moldura-marfim{
  position:relative; z-index:1;
  background:var(--marfim);
  border:1px solid var(--borda);
  box-shadow:var(--sombra-3);
  border-radius:4px;
  padding:44px 56px;
}
.montagem{position:relative; width:648px; height:640px}
/* Foto principal 468x585 com terminação curva */
.foto-principal{
  position:absolute; left:0; top:0;
  width:468px; height:585px;
  margin:0;
}
.foto-principal img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  border-radius:14px 14px 50% 50% / 14px 14px 64px 64px;  /* terminação curva */
  box-shadow:var(--sombra-2);
  background:#E9D5C6;
}
/* Segunda foto 244x288 atravessando a borda da primeira */
.foto-secundaria{
  position:absolute; left:384px; top:196px;
  width:244px; height:288px;
  margin:0;
}
.foto-secundaria img{
  width:100%; height:100%; object-fit:cover; object-position:center 15%;
  border-radius:12px;
  border:10px solid var(--marfim);
  box-shadow:var(--sombra-2);
  background:#E9D5C6;
}
.legenda-campanha{
  position:relative; z-index:1;
  margin-top:40px;
  font-family:var(--fonte-editorial); font-style:italic; font-size:20px;
  color:var(--vinho-2); text-align:center; max-width:560px;
}

/* ============================================================
   02 · Faixa de curadoria (temas dos metadados)
   ============================================================ */
.curadoria{
  background:var(--vinho); color:var(--papel);
  padding:72px 24px; text-align:center;
}
.curadoria .olho{
  font-size:12px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--pessego); margin-bottom:16px;
}
.curadoria h2{
  font-family:var(--fonte-editorial); font-weight:900;
  font-size:clamp(30px, 4.4vw, 46px); line-height:1.1; letter-spacing:-.01em;
  margin-bottom:12px;
}
.curadoria p{color:#EFD9CE; max-width:560px; margin:0 auto 32px; font-size:16px}
.temas{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  max-width:900px; margin:0 auto;
}
.tema{
  min-height:44px; padding:10px 22px;
  border:1.5px solid rgba(243,179,154,.55); border-radius:var(--raio-pilula);
  background:transparent; color:var(--papel);
  font-family:var(--fonte-ui); font-size:15px; font-weight:600;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.tema:hover{border-color:var(--pessego); background:rgba(243,179,154,.14)}
.tema[aria-pressed="true"]{
  background:var(--pessego); border-color:var(--pessego); color:var(--vinho);
}

/* ============================================================
   03 · Galeria explorável — 4 colunas desktop / 2 mobile
   ============================================================ */
.galeria{padding:88px 24px 40px; max-width:1440px; margin:0 auto}
.galeria-cab{text-align:center; margin-bottom:36px}
.galeria-cab .olho{
  font-size:12px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rosa); margin-bottom:16px;
}
.galeria-cab h2{
  font-family:var(--fonte-editorial); font-weight:900;
  font-size:clamp(32px, 4.6vw, 50px); line-height:1.08; letter-spacing:-.01em;
  margin-bottom:12px;
}
.galeria-cab h2 em{font-style:normal; color:var(--rosa)}
.galeria-cab p{color:var(--vinho-2); max-width:600px; margin:0 auto}
.conta-retratos{
  display:inline-block; margin-top:18px;
  font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vinho-2);
}
.conta-retratos b{color:var(--rosa); font-size:18px}

.filtros{
  position:sticky; top:0; z-index:10;
  background:rgba(255,248,243,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--borda); border-bottom:1px solid var(--borda);
  padding:14px 16px; margin:0 -24px 8px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.filtros select, .filtros input{
  min-height:44px; padding:10px 18px;
  border:1px solid var(--borda-forte); border-radius:var(--raio-pilula);
  font-size:16px; font-family:var(--fonte-ui);
  background:#fff; color:var(--vinho);
}
.filtros input{min-width:230px}
.filtros select:hover, .filtros input:hover{border-color:var(--vinho)}
.btn-limpar{
  min-height:44px; padding:10px 26px;
  border:1.5px solid var(--borda-forte); border-radius:var(--raio-pilula);
  background:transparent; color:var(--vinho);
  font-size:16px; font-weight:600; font-family:var(--fonte-ui); cursor:pointer;
}
.btn-limpar:hover{border-color:var(--vinho); background:#fff}

#grade{
  display:grid; gap:20px;
  grid-template-columns:repeat(2, 1fr);   /* 2 colunas no celular */
  padding:28px 0 16px;
}
@media(min-width:640px){ #grade{grid-template-columns:repeat(3, 1fr)} }
@media(min-width:1100px){ #grade{grid-template-columns:repeat(4, 1fr); gap:24px} }  /* 4 desktop */

.card{
  position:relative; aspect-ratio:3/4; overflow:hidden;   /* esqueleto 3:4 */
  border-radius:12px 12px 50% 50% / 12px 12px 30px 30px;  /* terminação curva */
  background:var(--marfim);
  border:1px solid var(--borda);
  cursor:pointer; padding:0; font:inherit;
  box-shadow:var(--sombra-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:var(--sombra-2)}
.card:hover img{transform:scale(1.04)}
/* Esqueleto de carregamento — layout 3:4 estável */
.card.esqueleto{
  cursor:default;
  background:linear-gradient(100deg, #F7E7DB 40%, #FBF1E9 50%, #F7E7DB 60%);
  background-size:200% 100%;
  animation:brilho 1.4s var(--ease) infinite;
}
.card.esqueleto:hover{transform:none; box-shadow:var(--sombra-1)}
@keyframes brilho{to{background-position:-200% 0}}

#vazio{
  text-align:center; color:var(--vinho-2); font-size:17px;
  padding:72px 24px; display:none; max-width:560px; margin:0 auto;
}
#vazio strong{display:block; font-family:var(--fonte-editorial); font-size:26px; color:var(--vinho); margin-bottom:8px}

#erro-acervo{
  display:none; text-align:center;
  max-width:640px; margin:32px auto; padding:40px 32px;
  background:var(--marfim); border:1px solid var(--borda-forte); border-radius:var(--raio-md);
}
#erro-acervo.visivel{display:block}
#erro-acervo .b-erro{
  font-family:var(--fonte-editorial); font-weight:900; font-size:64px;
  color:var(--pessego); line-height:1; margin-bottom:12px;
}
#erro-acervo h2{font-family:var(--fonte-editorial); font-size:24px; margin-bottom:8px}
#erro-acervo p{color:var(--vinho-2); font-size:16px}
#erro-acervo code{background:#F7E7DB; padding:2px 8px; border-radius:6px; font-size:14px}

#sentinela{min-height:48px; display:flex; align-items:center; justify-content:center; padding:8px}
.fim-lista{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vinho-2); font-weight:600;
}

/* ============================================================
   04 · Visualizador editorial — 60/40 desktop
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(76,18,53,.92);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal.aberto{display:flex}
.modal-box{
  position:relative; background:var(--papel);
  border-radius:var(--raio-md); box-shadow:var(--sombra-3);
  width:100%; max-width:1040px; max-height:92vh; overflow:auto;
  display:grid; grid-template-columns:3fr 2fr;   /* 60 / 40 */
}
.modal-foto{
  position:relative; background:var(--vinho);
  min-height:320px; display:flex; align-items:center; justify-content:center;
}
.modal-foto img{
  width:100%; height:100%; max-height:92vh;
  object-fit:contain; display:block;
}
/* Setas explícitas — visíveis também no toque */
.seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,248,243,.94); border:1px solid var(--borda);
  color:var(--vinho); font-size:22px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra-2); z-index:2;
  transition:background var(--dur) var(--ease);
}
.seta:hover{background:#fff}
.seta.anterior{left:12px}
.seta.seguinte{right:12px}

.modal-info{
  padding:36px 32px; display:flex; flex-direction:column; gap:18px;
  overflow:auto;
}
.modal-info .olho{
  font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rosa);
}
.modal-info h2{
  font-family:var(--fonte-editorial); font-weight:700;
  font-size:26px; line-height:1.2;
}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  background:#F7E7DB; border-radius:var(--raio-pilula);
  padding:6px 14px; font-size:13px; font-weight:600; color:var(--vinho-2);
}
/* 05 · Leitura do prompt completo */
.rotulo-prompt{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--vinho-2);
}
.prompt-txt{
  font-size:16px; line-height:1.6; color:var(--vinho);
  max-height:240px; overflow:auto; overflow-wrap:break-word;
  background:var(--marfim); border:1px solid var(--borda);
  border-radius:var(--raio-sm); padding:16px;
  user-select:text;
}
.prompt-txt:focus-visible{outline:3px solid var(--foco); outline-offset:2px}
.btn-copiar{
  min-height:48px; width:100%;
  background:var(--rosa); color:#fff;
  border:none; border-radius:var(--raio-pilula); padding:12px 20px;
  font-size:16px; font-weight:700; font-family:var(--fonte-ui); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-copiar:hover{background:var(--rosa-hover)}
.btn-copiar:active{background:var(--rosa-active); transform:scale(.98)}
.btn-copiar[disabled]{opacity:.55; cursor:wait}
.fechar{
  position:absolute; top:14px; right:16px; z-index:3;
  background:var(--papel); border:1px solid var(--borda); border-radius:50%;
  width:44px; height:44px; font-size:18px; line-height:1; cursor:pointer; color:var(--vinho);
  display:inline-flex; align-items:center; justify-content:center;
}
.fechar:hover{background:#fff}

/* Confirmação — só aparece após sucesso real */
#toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--vinho); color:var(--papel);
  padding:14px 28px; border-radius:var(--raio-pilula);
  font-size:16px; font-weight:600; max-width:min(92vw, 560px); text-align:center;
  opacity:0; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index:120; pointer-events:none; box-shadow:var(--sombra-3);
}
#toast.mostrar{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.aviso{background:#7A3B57}

/* ---------- Rodapé ---------- */
footer{
  background:var(--papel); border-top:1px solid var(--borda);
  text-align:center; padding:56px 24px 48px; color:var(--vinho-2); font-size:15px;
}
footer .flogo{display:flex; justify-content:center; margin-bottom:20px}
footer .flogo img{width:220px; height:136px; object-fit:contain}
footer nav{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:16px}
footer nav a{
  color:var(--vinho-2); text-decoration:none; font-size:13px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  min-height:44px; display:inline-flex; align-items:center; padding:8px 12px;
}
footer nav a:hover{color:var(--rosa)}

/* ============================================================
   Mobile 390px
   ============================================================ */
@media(max-width:640px){
  /* Bloco de marca: 397px · logo 320x270 · slogan 27px */
  .masthead{min-height:0}
  .marca{min-height:397px; justify-content:center; padding:28px 20px 8px}
  .marca-logo{width:320px; height:270px}
  .slogan{font-size:27px; margin-top:26px}
  .nav-discreta{margin-top:20px}
  .gesto{margin-top:28px}

  /* Cena de 810px · fotos 234x377 e 158x201 · nova sobreposição */
  .campanha{min-height:810px; padding:40px 16px 72px}
  .moldura-marfim{padding:22px}
  .montagem{width:300px; height:560px}
  .foto-principal{width:234px; height:377px; left:0; top:0}
  .foto-principal img{border-radius:10px 10px 50% 50% / 10px 10px 40px 40px}
  .foto-secundaria{width:158px; height:201px; left:142px; top:330px}
  .foto-secundaria img{border-width:7px}
  .b-textura{font-size:420px; right:-.2em; bottom:-.28em}
  .legenda-campanha{font-size:17px; margin-top:28px}

  .filtros{margin:0 -16px 8px}
  .filtros select, .filtros input, .filtros .btn-limpar{flex:1 1 44%; min-width:0}
  .filtros input{flex:1 1 100%}

  /* Visualizador: foto acima, texto abaixo */
  .modal{padding:12px}
  .modal-box{grid-template-columns:1fr}
  .modal-foto{min-height:0}
  .modal-foto img{max-height:44vh}
  .modal-info{padding:24px 20px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important; transition:none !important}
  .card:hover{transform:none}
  .card:hover img{transform:none}
}