/* Catálogos online do Foto IA Premium (catalogo.ultreix.com). Mesma identidade dos PDFs: tinta, ouro e marfim,
   Cinzel nos rótulos e números, Cormorant Garamond nos títulos e textos. */
@font-face { font-family: "Cinzel"; src: url("/fontes/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fontes/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --tinta: #0e0d0b;
  --papel: #17150f;
  --ouro: #c6a46a;
  --fio: #8c7447;
  --marfim: #ede6da;
  --cinza: #a39a8c;
  --serifa: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --romana: "Cinzel", "Trajan Pro", Georgia, serif;
  --borda: max(16px, env(safe-area-inset-left));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--tinta); color: var(--marfim);
  font: 300 1.2rem/1.55 var(--serifa); font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased; min-height: 100svh;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ouro); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- letras espaçadas (como nos PDFs) ---------- */
.romana { font-family: var(--romana); font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }

/* ---------- capa ---------- */
.capa {
  position: relative; text-align: center; padding: clamp(48px, 9vh, 96px) var(--borda) clamp(36px, 6vh, 64px);
  margin: 12px; border: 1px solid var(--fio);
}
.capa .voltar { position: absolute; top: 14px; left: 16px; font: 400 .66rem/1 var(--romana); letter-spacing: .24em; text-transform: uppercase; color: var(--cinza); text-decoration: none; padding: 8px 2px; }
.capa .voltar:hover { color: var(--ouro); }
.selo {
  width: 104px; height: 104px; margin: 0 auto 26px; border-radius: 50%; border: 1px solid var(--ouro);
  box-shadow: inset 0 0 0 4px var(--tinta), inset 0 0 0 4.5px rgba(198, 164, 106, .55);
  display: flex; align-items: center; justify-content: center; color: var(--ouro); font: 300 2.9rem/1 var(--serifa);
}
.selo span { display: inline-block; }
.selo .e { transform: translate(5px, -4px); }
.selo .p { font-size: 2.65rem; transform: translate(-7px, 9px); }
.capa .marca { margin: 0; font: 400 1.05rem/1 var(--romana); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; }
.capa .marca + small { display: block; margin-top: 10px; font: 400 .6rem/1 var(--romana); letter-spacing: .5em; padding-left: .5em; color: var(--ouro); text-transform: uppercase; }
.capa .fio { width: 54px; height: 1px; background: var(--ouro); margin: 26px auto 24px; border: 0; }
.capa h1 { margin: 0; font: italic 300 clamp(2.3rem, 9vw, 3.6rem)/1.05 var(--serifa); letter-spacing: -.005em; }
.capa .contagem { margin: 14px 0 0; font: 400 .7rem/1.6 var(--romana); letter-spacing: .34em; padding-left: .34em; color: var(--ouro); text-transform: uppercase; }

/* ---------- como escolher ---------- */
.como { max-width: 980px; margin: 0 auto; padding: 22px var(--borda) 6px; }
.como ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.como li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 4px 10px; }
.como .rn { grid-row: span 2; font: 400 1rem/1 var(--romana); color: var(--ouro); text-align: center; }
.como b { font-weight: 500; font-size: 1.22rem; }
.como span { color: var(--cinza); font-style: italic; font-size: 1.08rem; line-height: 1.4; }
@media (min-width: 760px) { .como ol { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ---------- seções (Infantil: meninas e meninos) ---------- */
.atalhos { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; padding: 10px var(--borda); background: rgba(14, 13, 11, .92); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(140, 116, 71, .35); }
.atalhos a { font: 400 .68rem/1 var(--romana); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--marfim); border: 1px solid var(--fio); padding: 11px 14px; }
.atalhos a:hover { border-color: var(--ouro); color: var(--ouro); }
.secao { max-width: 1240px; margin: 0 auto; padding: 34px var(--borda) 0; scroll-margin-top: 56px; }
.secao > h2 { text-align: center; margin: 10px 0 4px; font: italic 300 clamp(2rem, 7vw, 2.8rem)/1.1 var(--serifa); }
.secao > h2 + p { text-align: center; margin: 0 0 6px; font: 400 .68rem/1.6 var(--romana); letter-spacing: .32em; padding-left: .32em; color: var(--ouro); text-transform: uppercase; }

/* ---------- grade de cenas ---------- */
.grade { list-style: none; margin: 0 auto; padding: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; align-items: start; }
@media (min-width: 720px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cena { position: relative; }
.cena .foto { display: block; width: 100%; padding: 0; border: 0; background: var(--papel); cursor: zoom-in; outline: 1px solid var(--fio); outline-offset: 3px; transition: outline-color .15s; }
.cena .foto img { width: 100%; height: auto; background: var(--papel); }
.cena .foto:hover { outline-color: var(--ouro); }
.cena .rot { margin-top: 12px; text-align: center; }
.cena .num { display: block; font: 600 .86rem/1 var(--romana); letter-spacing: .26em; padding-left: .26em; color: var(--ouro); }
.cena .nota { display: block; margin-top: 5px; font-style: italic; font-size: .98rem; line-height: 1.25; color: var(--cinza); }
.marcar {
  position: absolute; top: 9px; right: 9px; width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(237, 230, 218, .75); background: rgba(14, 13, 11, .55); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, transform .15s;
}
.marcar svg { width: 18px; height: 18px; stroke: var(--marfim); stroke-width: 2; fill: none; }
.marcar .ok, .marcar[aria-pressed="true"] .mais { display: none; }
.marcar[aria-pressed="true"] .ok { display: block; }
.marcar[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); }
.marcar[aria-pressed="true"] svg { stroke: var(--tinta); stroke-width: 2.4; }
.cena.escolhida .foto { outline: 2px solid var(--ouro); outline-offset: 3px; }
.cena.indisponivel .foto img { filter: grayscale(1) brightness(.5); }
.cena.indisponivel .foto { cursor: default; }
.cena.indisponivel .nota { color: var(--ouro); font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .marcar:active { transform: scale(.92); } }

/* ---------- barra das escolhas ---------- */
.escolhas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px var(--borda) max(12px, env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--fio);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
.escolhas[hidden] { display: none; }
.escolhas .lista { flex: 1; min-width: 0; }
.escolhas .lista b { display: block; font: 400 .62rem/1.2 var(--romana); letter-spacing: .26em; text-transform: uppercase; color: var(--cinza); }
.escolhas .lista span { display: block; margin-top: 4px; font: 600 .9rem/1.3 var(--romana); letter-spacing: .1em; color: var(--ouro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escolhas .limpar { background: none; border: 0; color: var(--cinza); font-size: 1rem; font-style: italic; text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; cursor: pointer; }
.btn-ouro {
  background: var(--ouro); color: var(--tinta); border: 0; padding: 14px 18px; cursor: pointer; white-space: nowrap;
  font: 600 .72rem/1 var(--romana); letter-spacing: .2em; text-transform: uppercase;
}
.btn-ouro:hover { background: #d4b37b; }
.btn-linha { background: none; color: var(--marfim); border: 1px solid var(--fio); padding: 13px 18px; cursor: pointer; font: 400 .7rem/1 var(--romana); letter-spacing: .2em; text-transform: uppercase; }
.btn-linha:hover { border-color: var(--ouro); color: var(--ouro); }
body.com-escolhas main, body.com-escolhas footer { padding-bottom: 96px; }

.aviso {
  position: fixed; left: 50%; bottom: 100px; z-index: 40; transform: translateX(-50%); max-width: min(92vw, 420px);
  background: var(--marfim); color: var(--tinta); padding: 12px 18px; font-size: 1.08rem; line-height: 1.35; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.aviso[hidden] { display: none; }

/* ---------- foto grande ---------- */
.visor { position: fixed; inset: 0; z-index: 30; background: #080706; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor[hidden] { display: none; }
.visor .topo { display: flex; justify-content: space-between; align-items: center; padding: max(10px, env(safe-area-inset-top)) var(--borda) 6px; }
.visor .topo .num { font: 600 1rem/1 var(--romana); letter-spacing: .28em; color: var(--ouro); }
.visor .fechar { width: 46px; height: 46px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.visor .fechar svg, .visor .seta svg { width: 26px; height: 26px; stroke: var(--marfim); stroke-width: 1.5; fill: none; }
.visor .palco { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 6px 54px; touch-action: pan-y; }
.visor .palco img { max-width: 100%; max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; outline: 1px solid var(--fio); outline-offset: 4px; }
.visor .seta { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.visor .seta.ant { left: 2px; }
.visor .seta.prox { right: 2px; }
.visor .seta:disabled { opacity: .2; cursor: default; }
.visor .base { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px var(--borda) max(16px, env(safe-area-inset-bottom)); }
.visor .base .nota { color: var(--cinza); font-style: italic; min-height: 1.4em; text-align: center; }
.visor .escolher[aria-pressed="true"] { background: var(--marfim); }
.visor .escolher:disabled { background: #4a443a; color: #8d857a; cursor: default; }
@media (max-width: 520px) { .visor .palco { padding: 6px 8px; } .visor .seta { display: none; } }

/* ---------- 18+ (Sensual) ---------- */
.portao { position: fixed; inset: 0; z-index: 50; background: var(--tinta); display: grid; place-items: center; padding: 24px var(--borda); text-align: center; }
.portao[hidden] { display: none; }
.portao .caixa { max-width: 440px; border: 1px solid var(--fio); padding: 44px 26px 36px; }
.portao h1 { margin: 0 0 6px; font: italic 300 2.4rem/1.1 var(--serifa); }
.portao p { margin: 14px 0 0; color: var(--cinza); }
.portao .acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.portao .acoes a { text-decoration: none; }
body.travado { overflow: hidden; }

/* ---------- sumário (página inicial) ---------- */
.sumario { max-width: 760px; margin: 0 auto; padding: 18px var(--borda) 40px; }
.sumario > p { text-align: center; color: var(--cinza); font-style: italic; margin: 6px auto 30px; max-width: 34ch; font-size: 1.22rem; }
.sumario ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(140, 116, 71, .5); }
.sumario li { border-bottom: 1px solid rgba(140, 116, 71, .5); }
.sumario a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 22px 4px; text-decoration: none; color: var(--marfim); }
.sumario a:hover .tit { color: var(--ouro); }
.sumario .tit { font: italic 300 clamp(1.7rem, 6.4vw, 2.3rem)/1.1 var(--serifa); transition: color .15s; }
.sumario .qtd { font: 400 .66rem/1.4 var(--romana); letter-spacing: .26em; text-transform: uppercase; color: var(--ouro); text-align: right; }
.sumario .sub { grid-column: 1 / -1; color: var(--cinza); font-size: 1.04rem; font-style: italic; }
.sumario .maior { display: inline-block; margin-left: 10px; vertical-align: middle; font: 600 .6rem/1 var(--romana); letter-spacing: .14em; border: 1px solid var(--fio); color: var(--cinza); padding: 5px 6px 4px; }

/* ---------- rodapé ---------- */
footer { text-align: center; padding: 64px var(--borda) 56px; }
footer .fim { margin: 0; font: italic 300 clamp(1.6rem, 6vw, 2.1rem)/1.25 var(--serifa); }
footer .fio { width: 54px; height: 1px; background: var(--ouro); margin: 22px auto; border: 0; }
footer .romana { font-size: .64rem; color: var(--ouro); }
footer .rodape { margin-top: 26px; font-size: .95rem; color: var(--cinza); font-style: italic; }
footer .rodape a { color: var(--cinza); }
noscript p { text-align: center; color: var(--cinza); font-style: italic; }