/* Eternize — cabeçalho, laterais (etapas / resumo) e fundo decorativo no computador. */
.bg-deco {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%236B1D2F' stroke-opacity='.13' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M40 44V10c1 9 12 9 11 22'/%3E%3Cpath fill='none' stroke='%236B1D2F' stroke-opacity='.13' stroke-width='2.2' stroke-linejoin='round' d='M28 54 17 43c-6-6 2-15 8-9l3 3 3-3c6-6 14 3 8 9Z'/%3E%3C/svg%3E") no-repeat -60px 96% / 300px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23C99738' stroke-opacity='.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M24 48V12l22-4v34M24 48c0 4-3 6-7 6s-6-2-6-5 3-6 7-6 6 2 6 5Zm22-6c0 4-3 6-7 6s-6-2-6-5 3-6 7-6 6 2 6 5Z'/%3E%3C/svg%3E") no-repeat calc(100% + 30px) 100% / 320px,
    radial-gradient(600px 420px at 100% 0, #c9973824, transparent 70%),
    radial-gradient(640px 520px at 0 100%, #6b1d2f12, transparent 70%),
    var(--cream);
  opacity: 1;
}
.bg-deco::after {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background: repeating-linear-gradient(to bottom, transparent 0 46px, #c9973810 46px 47px);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 18%, transparent 82%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent 18%, transparent 82%, #000 100%);
}

/* Cabeçalho */
.eter-header {
  position: sticky; top: 0; z-index: 30;
  background: #faf6f0e8; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6d7c0; box-shadow: 0 1px 0 #fffdfa, 0 6px 22px #2a181a0a;
}
.eter-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent); opacity: .65; }
.eter-header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 40px, 1520px); min-height: 88px; margin: 0 auto; }
.eter-logo { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.eter-logo img { display: block; width: 276px; height: auto; }
.eter-tagline { margin: 0 auto 0 8px; padding-left: 22px; border-left: 1px solid #e0cfb4; color: #8a6a55; font: italic 400 16px/1.2 'DM Serif Display', Georgia, serif; }
.eter-tagline span { color: var(--gold); font-style: normal; margin-right: 4px; }
.eter-cta { white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; text-decoration: none;
  background: var(--wine); color: #fffaf4; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 5px 14px #6b1d2f2e, inset 0 0 0 1px #e5c15855; transition: background .2s, transform .2s;
}
.eter-cta:hover { background: var(--wine2); transform: translateY(-1px); }

/* Estrutura em 3 colunas */
.site-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; margin: 0 auto; padding: 0 0 40px; }
.site-shell .page-wrap { width: min(100% - 24px, 900px); margin: 0 auto; padding: 21px 0 24px; }
.side { display: none; }
.side-right { display: block; width: min(100% - 24px, 900px); margin: 0 auto 56px; }

.side-kicker { display: block; color: #9b725d; font-size: 10px; font-weight: 800; letter-spacing: .15em; }

@media (min-width: 621px) {
  .site-shell .page-wrap { width: min(100% - 32px, 760px); }
  .side-right { width: min(100% - 32px, 760px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .side-right .summary-card, .side-right .guarantee { grid-column: 1 / -1; }
  .side-right .summary-card { display: none; }
}

/* Computador: laterais fixas ao lado do conteúdo */
@media (min-width: 1280px) {
  .site-shell {
    grid-template-columns: minmax(210px, 250px) minmax(0, 880px) minmax(260px, 310px);
    justify-content: center; gap: 34px; align-items: start; padding: 22px 28px 70px;
  }
  .site-shell .page-wrap { width: 100%; padding-top: 0; }
  .side { display: block; position: sticky; top: 112px; }
  .side-right { width: 100%; margin: 0; display: block; }
  .side-right > * + * { margin-top: 18px; }
  .side-right .summary-card { display: block; }
  .site-shell .step-nav { display: none; }
  .site-shell .hero { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .site-shell .hero-card { display: none; }
  .site-shell .hero-copy { max-width: 700px; }
  .site-shell .hero h1 { font-size: clamp(48px, 4vw, 60px); }
}

/* Etapas fixas à esquerda */
.rail-steps {
  padding: 22px 18px 18px; border: 1px solid #e8d9c4; border-radius: 22px;
  background: linear-gradient(180deg, #fffdfa, #fbf5ec); box-shadow: 0 10px 28px #2a181a0c;
}
.rail-title { display: block; margin: 0 6px 14px; color: #9b725d; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.rail-steps ol { margin: 0; padding: 0; list-style: none; position: relative; }
.rail-steps li { position: relative; }
.rail-steps li + li { margin-top: 4px; }
.rail-steps li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 46px; bottom: -10px; width: 2px; background: #e8d9c4; border-radius: 2px; }
.rail-step {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 15px;
  background: transparent; color: var(--ink); text-align: left; transition: background .2s, border-color .2s;
}
.rail-step b { display: block; font-size: 13px; line-height: 1.25; }
.rail-step small { display: block; margin-top: 1px; color: #85797c; font-size: 11px; }
.rail-num {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: #f3e8e6; color: #8f6b6f; font: 400 17px 'DM Serif Display', Georgia, serif; border: 1px solid #e8d3d0; transition: all .2s;
}
.rail-step:not(:disabled):hover { background: #f8efe9; }
.rail-step:disabled { cursor: default; opacity: 1; }
.rail-step:disabled b { color: #8d8185; }
.rail-step.active { background: #fff; border-color: #dcbdb8; box-shadow: 0 6px 16px #6b1d2f12; }
.rail-step.active .rail-num { background: var(--wine); border-color: var(--wine); color: #fff; box-shadow: 0 0 0 4px #6b1d2f18; }
.rail-step.done .rail-num { background: var(--gold); border-color: var(--gold); color: transparent; position: relative; }
.rail-step.done .rail-num::after { content: ""; position: absolute; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.rail-bar { height: 5px; margin-top: 16px; border-radius: 5px; background: #eadfd0; overflow: hidden; }
.rail-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wine), var(--gold)); transition: width .5s ease; }
.rail-hint { margin: 10px 4px 0; color: #7a6e71; font-size: 12px; line-height: 1.45; }
.rail-note { display: flex; gap: 12px; margin-top: 16px; padding: 4px 8px; color: #7a5f52; }
.rail-note p { margin: 0; font: italic 400 14px/1.5 'DM Serif Display', Georgia, serif; }
.rail-note-mark { color: var(--gold); font-size: 24px; line-height: 1; }

/* Resumo à direita */
.summary-card {
  position: relative; padding: 22px 20px 18px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, #3a1822 0%, #5a1c2d 100%); color: #fff7ef;
  box-shadow: 0 16px 36px #3a182238, inset 0 0 0 1px #e5c1582e;
}
.summary-card::after { content: "♪"; position: absolute; right: 12px; top: -12px; color: #e5c158; opacity: .12; font: 400 120px/1 'DM Serif Display', Georgia, serif; pointer-events: none; }
.summary-card .side-kicker { color: #e5c158; }
.summary-title { margin: 8px 0 14px; font: 400 25px/1.15 'DM Serif Display', Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.summary-title em { font-style: normal; color: #f0cf76; }
.summary-list { margin: 0; }
.summary-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #ffffff1c; font-size: 12.5px; }
.summary-list dt { color: #d9bfc0; flex: 0 0 auto; }
.summary-list dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.summary-list dd.empty { color: #ffffff59; font-weight: 400; }
.summary-progress { margin-top: 6px; }
.summary-progress .rail-bar { background: #ffffff1f; margin-top: 10px; }
.summary-progress .rail-bar i { background: linear-gradient(90deg, #e5c158, #f6e3a1); }
.summary-progress small { display: block; margin-top: 8px; color: #e9d6c8; font-size: 11px; }

.trust-list { margin-bottom: 0; padding: 4px 6px; list-style: none; }
.trust-list li { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; }
.trust-list li + li { border-top: 1px dashed #e0cfb4; }
.trust-list svg { flex: 0 0 34px; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #f6ecd6; color: #a8761c; }
.trust-list b { display: block; font-size: 13px; }
.trust-list small { display: block; margin-top: 1px; color: #7a6e71; font-size: 12px; line-height: 1.4; }

.testimonial { position: relative; margin: 0; padding: 20px 20px 16px; border: 1px solid #ecdcc5; border-radius: 20px; background: #fffdfa; box-shadow: 0 8px 22px #2a181a0a; }
.quote-mark { position: absolute; top: -4px; left: 14px; color: var(--gold); font: 400 64px/1 'DM Serif Display', Georgia, serif; opacity: .55; }
.testimonial blockquote { margin: 14px 0 12px; font: italic 400 16px/1.5 'DM Serif Display', Georgia, serif; color: #3d2b30; }
.testimonial figcaption { color: #85797c; font-size: 12px; }
.testimonial figcaption b { color: var(--wine); }
.guarantee { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; border: 1px solid #e5c158; background: linear-gradient(135deg, #fbf2d9, #fffaf0); }
.guarantee-seal { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; box-shadow: 0 0 0 4px #c9973829; }
.guarantee-seal svg { width: 22px; height: 22px; }
.guarantee b { display: block; color: var(--wine); font: 400 17px 'DM Serif Display', Georgia, serif; }
.guarantee p { margin: 3px 0 0; color: #6a5a52; font-size: 12.5px; line-height: 1.5; }

/* Tablet e celular */
@media (max-width: 900px) {
  .eter-tagline { display: none; }
  .eter-cta { margin-left: auto; }
}
@media (max-width: 620px) {
  .eter-header-in { min-height: 68px; width: calc(100% - 24px); }
  .eter-logo img { width: 196px; }
  .eter-cta { min-height: 40px; padding: 0 15px; font-size: 12px; white-space: nowrap; }
  .side-right { margin-bottom: 40px; display: block; }
  .side-right > * + * { margin-top: 12px; }
  .site-shell { padding-bottom: 20px; }
  .site-shell .page-wrap { padding-top: 14px; }
}
@media (max-width: 370px) { .eter-cta { display: none; } .eter-logo img { width: 180px; } }
@media (prefers-reduced-motion: reduce) { .rail-bar i, .eter-cta, .rail-step, .rail-num { transition: none; } }

/* Até 5 fotos do pedido: miniaturas numeradas, com botão de remover */
#photoPreview.cover-preview { display: block; }
.photo-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.photo-summary > div { flex: 1; min-width: 0; }
.photo-summary small { white-space: normal; line-height: 1.35; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.photo-thumb { position: relative; aspect-ratio: 1; }
.cover-preview .photo-thumb img { width: 100%; height: 100%; flex: none; object-fit: cover; border: 2px solid var(--gold); border-radius: 12px; display: block; }
.photo-order { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #6B1D2F; color: #FAF6F0; font: 700 11px/20px Inter, system-ui, sans-serif; text-align: center; }
.photo-remove { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border: 2px solid #FAF6F0; border-radius: 50%; background: #6B1D2F; color: #FAF6F0; font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; padding: 0; }
.photo-remove:hover { background: #8F2840; }
.photo-remove:focus-visible { outline: 3px solid #C9973899; outline-offset: 1px; }
@media (max-width: 520px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } .photo-summary { flex-wrap: wrap; } }

/* ---- Pagamento e compra guardada ---- */
.resume-bar { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #E5C158; border-radius: 16px; background: linear-gradient(135deg, #FFF8E6, #FAF6F0); box-shadow: 0 8px 24px #6b1d2f12; }
.resume-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resume-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wine); color: #FAF6F0; font-size: 18px; flex: none; }
.resume-main p { flex: 1 1 220px; margin: 0; color: #3b2a2f; font-size: 15px; font-weight: 600; line-height: 1.35; }
.resume-main p em { display: block; color: #8a6a1f; font-style: normal; font-weight: 500; font-size: 13px; }
.resume-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.resume-actions .primary-pill, .resume-actions .outline-pill { min-height: 44px; padding: 0 18px; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.my-orders { margin-top: 10px; font-size: 14px; }
.my-orders summary { cursor: pointer; color: var(--wine); font-weight: 600; min-height: 32px; }
.my-orders ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.my-orders a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #E9DED2; color: #3b2a2f; text-decoration: none; }
.my-orders a span { color: #8a6a1f; font-size: 13px; }
.restore-note { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #FDF1F1; border: 1px solid #E8C4C4; color: #6B1D2F; font-size: 15px; line-height: 1.45; }

.checkout { margin: 6px 0 18px; padding: 24px; border: 1px solid #E5C158; border-radius: 20px; background: linear-gradient(180deg, #FFFDFA, #FAF6F0); box-shadow: 0 12px 34px #6b1d2f14; }
.checkout-title { margin: 6px 0 4px; font: 400 28px/1.15 'DM Serif Display', Georgia, serif; color: var(--wine); }
.checkout-lead { margin: 0 0 18px; color: #5b4c51; font-size: 16px; line-height: 1.5; }
.package-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.package-card { position: relative; display: block; cursor: pointer; }
.package-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.package-body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 16px 16px; border: 2px solid #E0D3C6; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.package-card:hover .package-body { border-color: #C99738; }
.package-card input:checked + .package-body { border-color: var(--wine); box-shadow: 0 0 0 4px #6b1d2f18, 0 8px 22px #6b1d2f14; }
.package-card input:focus-visible + .package-body { outline: 3px solid #C9973899; outline-offset: 2px; }
.package-card input:checked + .package-body::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--wine); color: #fff; font: 700 14px/24px Inter, sans-serif; text-align: center; }
.package-name { font: 400 21px/1.15 'DM Serif Display', Georgia, serif; color: #2a1d21; padding-right: 26px; }
.package-body small { color: #6b5d62; font-size: 14px; line-height: 1.4; flex: 1; }
.package-price { font: 700 24px/1 Inter, system-ui, sans-serif; color: var(--wine); margin-top: 6px; }
.package-tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #C99738; color: #fff; font: 700 10px/1.4 Inter, sans-serif; letter-spacing: .08em; }
.checkout-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #F5EEE4; }
.checkout-summary div { min-width: 0; }
.checkout-summary dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a6a1f; font-weight: 700; }
.checkout-summary dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: #2a1d21; overflow-wrap: anywhere; }
.pay-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 22px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--wine), var(--wine2)); color: #fffaf4; font: 700 19px/1.2 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 26px #6b1d2f40; transition: transform .15s, box-shadow .15s; }
.pay-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #6b1d2f50; }
.pay-button:active { transform: scale(.985); }
.pay-button:disabled { opacity: .65; cursor: wait; transform: none; }
.pay-button:focus-visible { outline: 3px solid #E5C158; outline-offset: 3px; }
.pay-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pay-button b { padding: 5px 11px; border-radius: 999px; background: #ffffff26; font-size: 17px; }
.pay-button b:empty { display: none; }
.pay-safe { display: flex; gap: 9px; align-items: flex-start; margin: 12px 2px 0; color: #5b4c51; font-size: 14px; line-height: 1.45; }
.pay-safe svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: #386448; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-box { padding: 20px; border: 2px dashed #C99738; border-radius: 16px; background: repeating-linear-gradient(135deg, #FFF8E6, #FFF8E6 14px, #FFFDF6 14px, #FFFDF6 28px); }
.demo-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #C99738; color: #fff; font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .1em; }
.demo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #E9DED2; font-size: 16px; }
.demo-total strong { font-size: 24px; color: var(--wine); }
.demo-box .text-link { display: block; margin: 14px auto 0; min-height: 44px; }
.pay-wait { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid #E9DED2; }
.pay-wait p { margin: 4px 0 6px; color: #5b4c51; font-size: 15px; }
.paid-note { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #E8F1E8; color: #2f5a3f; }
.paid-note svg { width: 32px; height: 32px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paid-note p { margin: 2px 0 0; font-size: 15px; }
.order-link-box { margin: 0 0 18px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #E9DED2; }
.order-link-box p { margin: 4px 0 10px; color: #5b4c51; font-size: 14px; line-height: 1.45; }
.order-link-box .link-copy input { font-size: 13px; }
.delivery-side .order-link-box { margin-top: 14px; }
@media (max-width: 640px) {
  .checkout { padding: 18px 14px; border-radius: 16px; }
  .checkout-title { font-size: 24px; }
  .package-grid { grid-template-columns: 1fr; }
  .checkout-summary { grid-template-columns: 1fr; gap: 8px; }
  .checkout-summary div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .pay-button { min-height: 68px; font-size: 18px; flex-wrap: wrap; }
  .resume-actions { width: 100%; } .resume-actions > * { flex: 1; justify-content: center; text-align: center; }
}
.checkout .text-link, .pay-wait .text-link { font-size: 15px; }
.pay-notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #E5C158; color: #6b4e12; font-size: 14px; line-height: 1.45; }