/* Designs da página de entrega (escolhidos no painel: capa, cor, tipografia e grade) */

/* ---------- Cores ---------- */
.cor-claro     { --bg: #ffffff; --panel: #f4f4f2; --brown: #333333; --text: #3a3a3a; --btn: #333333; --muted: #8a8a8a; --escuro: #1d1d1d; --acento-escuro: #bdbdbd; }
.cor-dourado   { --bg: #fffdf7; --panel: #f5efe2; --brown: #9a8659; --text: #4a463c; --btn: #9a8659; --muted: #958e7c; --escuro: #2a2720; --acento-escuro: #cdb98a; }
.cor-rosa      { --bg: #fdf8f8; --panel: #f4e8e8; --brown: #9c7473; --text: #4d4242; --btn: #9c7473; --muted: #9a8b8b; --escuro: #2b2222; --acento-escuro: #d6aaa9; }
.cor-terracota { --bg: #fcf8f5; --panel: #f2e8e0; --brown: #9b6c52; --text: #4a3f38; --btn: #9b6c52; --muted: #9a8a7f; --escuro: #2a211c; --acento-escuro: #d3a385; }
.cor-areia     { --bg: #faf8f6; --panel: #eeeae5; --brown: #8f8172; --text: #46413b; --btn: #8f8172; --muted: #9a928a; --escuro: #26231f; --acento-escuro: #c7b8a6; }
.cor-oliva     { --bg: #fafaf5; --panel: #eeeee5; --brown: #7a8562; --text: #43473b; --btn: #7a8562; --muted: #8f9384; --escuro: #22251d; --acento-escuro: #b5c09a; }
.cor-agave     { --bg: #f7faf9; --panel: #e9efed; --brown: #6a8c83; --text: #3d4744; --btn: #6a8c83; --muted: #87938f; --escuro: #1d2422; --acento-escuro: #a5c7bd; }
.cor-mar       { --bg: #f8f9fa; --panel: #eaecf0; --brown: #787d93; --text: #3e4049; --btn: #787d93; --muted: #8b8e99; --escuro: #1f2027; --acento-escuro: #b5b9cf; }
.cor-escuro    { --bg: #161616; --panel: #222222; --brown: #e3d7c6; --text: #d8d8d6; --btn: #4b4b48; --muted: #8f8f8a; --escuro: #0d0d0d; --acento-escuro: #e3d7c6; --line: rgba(255, 255, 255, .12); }


/* ---------- Tipografia ---------- */
.tipografia-moderna   { --display: "Jost", sans-serif; --body: "Jost", sans-serif; }
.tipografia-moderna h1, .tipografia-moderna h2, .tipografia-moderna .dl h3 { font-weight: 300; letter-spacing: .04em; }
.tipografia-moderna .carta-body p { font-size: 17px; font-weight: 300; }
.tipografia-romantica { --display: "Playfair Display", serif; --body: "Lora", serif; }
.tipografia-romantica h1, .tipografia-romantica .carta-body p:first-child { font-style: italic; }
.tipografia-editorial { --display: "Bodoni Moda", serif; --body: "Karla", sans-serif; }
.tipografia-editorial .cover-text h1 { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(36px, 6.5vw, 78px); }
.tipografia-editorial .carta-body p { font-size: 16px; }

/* ---------- Capa ---------- */
.capa-esquerda .cover-text { left: 6vw; right: auto; text-align: left; max-width: 700px; }
.capa-esquerda .cover-logo { left: 6vw; transform: none; }

.capa-moldura .cover::before { content: ""; position: absolute; z-index: 2; inset: 22px; border: 1px solid rgba(255, 255, 255, .75); pointer-events: none; }
.capa-moldura .cover-logo { top: 44px; }
.capa-moldura .cover-text { bottom: auto; top: 50%; transform: translateY(-40%); }

.capa-dividida .cover { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); color: var(--text); }
.capa-dividida .cover::after { display: none; }
.capa-dividida .cover-img { position: relative; grid-column: 2; grid-row: 1; height: 100%; }
.capa-dividida .cover-text { position: relative; grid-column: 1; grid-row: 1; align-self: center; bottom: auto; padding: 0 6vw; }
.capa-dividida .cover-text h1 { color: var(--brown); }
.capa-dividida .eyebrow.light { color: var(--muted); }
.capa-dividida .cover-btn { border-color: var(--text); }
.capa-dividida .cover-btn:hover { background: var(--text); color: var(--bg); }
.capa-dividida .cover-logo { left: 25%; }

.capa-classico .cover { height: auto; min-height: 0; background: var(--bg); color: var(--text); }
.capa-classico .cover::after { display: none; }
.capa-classico .cover-img { position: relative; height: 82vh; }
.capa-classico .cover-text { position: relative; bottom: auto; padding: 56px 16px 20px; }
.capa-classico .cover-text h1 { color: var(--brown); }
.capa-classico .eyebrow.light { color: var(--muted); }
.capa-classico .cover-btn { border-color: var(--text); }
.capa-classico .cover-btn:hover { background: var(--text); color: var(--bg); }

.capa-nenhuma .cover { height: 70vh; min-height: 420px; background: var(--panel); color: var(--text); }
.capa-nenhuma .cover-img { display: none; }
.capa-nenhuma .cover::after { display: none; }
.capa-nenhuma .cover-text { bottom: auto; top: 50%; transform: translateY(-40%); }
.capa-nenhuma .cover-text h1 { color: var(--brown); }
.capa-nenhuma .eyebrow.light { color: var(--muted); }
.capa-nenhuma .cover-btn { border-color: var(--text); }
.capa-nenhuma .cover-btn:hover { background: var(--text); color: var(--bg); }

/* logo branca em fundo claro fica escura */
.capa-dividida .cover-logo img, .capa-classico .cover-logo img, .capa-nenhuma .cover-logo img { filter: brightness(0) opacity(.7); }
.cor-escuro.capa-dividida .cover-logo img, .cor-escuro.capa-classico .cover-logo img, .cor-escuro.capa-nenhuma .cover-logo img { filter: none; }
.capa-classico .cover-logo { top: 16px; }

/* ---------- Grade ---------- */
.espacamento-amplo { --gap: 26px; }
.grid { gap: var(--gap); }
.grid.mosaico .col { display: grid; gap: var(--gap); align-content: start; }
.grid.mosaico button { margin-bottom: 0; }

.grid.linhas { display: flex; flex-wrap: wrap; gap: var(--gap); --altura: 260px; }
.miniaturas-grande .grid.linhas { --altura: 420px; }
.grid.linhas button { flex-grow: var(--r); flex-basis: calc(var(--altura) * var(--r)); width: auto; margin: 0; }
.grid.linhas img { height: 100%; object-fit: cover; }
.grid.linhas::after { content: ""; flex-grow: 999; }

.grid.quadrada { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--gap); }
.grid.quadrada button { margin: 0; }
.grid.quadrada img { aspect-ratio: 1; object-fit: cover; height: 100%; }

/* ---------- Favoritos ---------- */
.grid button { position: relative; }
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .28); color: #fff; opacity: 0; transition: opacity .2s, transform .2s; }
.grid button:hover .fav, .fav.on { opacity: 1; }
.fav:hover { transform: scale(1.1); }
.fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fav.on svg { fill: #fff; }
@media (hover: none) { .fav { opacity: .85; } }
.lb-fav { position: absolute; bottom: 12px; left: 16px; display: flex; align-items: center; gap: 8px; color: #fff !important; font-size: 14px !important; letter-spacing: .14em; text-transform: uppercase; font-family: var(--display); padding: 8px 14px !important; border: 1px solid rgba(255, 255, 255, .5); opacity: 1 !important; }
.lb-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lb-fav.on svg { fill: #fff; }
.tabs .tab-fav { color: var(--brown); }
.vazio-fav { text-align: center; color: var(--muted); padding: 40px 16px; }

/* ---------- PIN de download ---------- */
.pin-fundo { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pin-box { width: 100%; max-width: 340px; background: var(--bg); padding: 36px 28px; text-align: center; }
.pin-box h3 { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--brown); }
.pin-box p { font-size: 15px; margin-top: 8px; }
.pin-box input { width: 100%; margin-top: 18px; padding: 13px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 22px; letter-spacing: .4em; text-align: center; }
.pin-box button { width: 100%; margin-top: 10px; background: var(--btn); color: #fff; padding: 13px; font-family: var(--display); font-size: 17px; }
.pin-box .pin-cancelar { background: none; color: var(--muted); font-size: 14px; }
.pin-box small { display: block; margin-top: 10px; color: #b0533a; }
/* Ver na TV: mesma caixa do PIN, com os 3 passos e o código em letras grandes */
.tv-box ol { margin: 16px 0 0; padding-left: 20px; text-align: left; font-size: 15px; line-height: 1.55; }
.tv-box input { text-transform: uppercase; }
.tv-box input::placeholder { letter-spacing: .2em; font-size: 15px; color: var(--muted); }

/* Aviso de prévia do painel */
.aviso-previa { position: fixed; z-index: 80; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(20, 20, 18, .85); color: #fff; font: 13px/1.4 -apple-system, "Segoe UI", sans-serif; padding: 8px 14px; border-radius: 20px; pointer-events: none; }

@media (max-width: 700px) {
  .espacamento-amplo { --gap: 12px; }
  .grid { gap: min(var(--gap), 6px); }
  .espacamento-amplo .grid { gap: 12px; }
  .grid.linhas { --altura: 150px; }
  .miniaturas-grande .grid.linhas { --altura: 260px; }
  .capa-dividida .cover { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; }
  .capa-dividida .cover-img { grid-column: 1; grid-row: 1; height: 62vh; }
  .capa-dividida .cover-text { grid-column: 1; grid-row: 2; padding: 44px 16px 56px; text-align: center; }
  .capa-dividida .cover-logo { left: 50%; }
  .capa-dividida .cover-logo img { filter: none; }
  .capa-esquerda .cover-text { left: 0; padding: 0 22px; }
  .capa-esquerda .cover-logo { left: 22px; }
  .capa-moldura .cover::before { inset: 12px; }
  .capa-classico .cover-img { height: 64vh; }
}