/* Landing Colcci Memorias (Dia das Criancas). Mobile primeiro: o acesso vem do QR na loja. */
.ddc {
  --ddc-font: var(--font, 'Gotham'), sans-serif;
  --ddc-preto: #111;
  --ddc-cinza: #6b6b6b;
  --ddc-linha: #d9d4cc;
  --ddc-papel: #f7f3ed;
  --ddc-dourado: #c8a27a;
  --ddc-erro: #b00020;
  --ddc-foco: #1a73e8;
  --ddc-raio: 14px;
  --ddc-borda: max(16px, (100% - 1100px) / 2);

  font-family: var(--ddc-font);
  color: var(--ddc-preto);
  overflow: hidden;
}

/* Breadcrumb do layout do site (este CSS so carrega nesta landing) */
.wd-browsing-breadcrumbs { display: none; }

.ddc *, .ddc *::before, .ddc *::after { box-sizing: border-box; }
.ddc [hidden] { display: none !important; }
.ddc p, .ddc h1, .ddc h2, .ddc ol, .ddc figure { margin: 0; padding: 0; }

/* Abertura */
.ddc .ddc__hero {
  position: relative;
  padding: 56px var(--ddc-borda) 40px;
  background:
    radial-gradient(circle at 85% 10%, rgba(200, 162, 122, .35), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(200, 162, 122, .18), transparent 40%),
    #0d0d0d;
  color: #fff;
  text-align: center;
}
.ddc .ddc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ddc-dourado);
}
.ddc .ddc__eyebrow::before, .ddc .ddc__eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.ddc .ddc__titulo {
  margin: 18px 0 16px;
  font-size: clamp(40px, 11vw, 96px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.ddc .ddc__titulo em { display: block; font-style: normal; font-weight: 300; letter-spacing: .04em; }
.ddc .ddc__texto { max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ddc .ddc__passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 560px;
  margin: 36px auto 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.ddc .ddc__passos li { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); }
.ddc .ddc__passos span { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0; }

/* Conteudo */
.ddc .ddc__grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}
.ddc .ddc__form { display: flex; flex-direction: column; gap: 32px; }
.ddc .ddc__campo { display: flex; flex-direction: column; gap: 8px; }
.ddc .ddc__label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; font-weight: 700; }
.ddc .ddc__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ddc-preto);
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
}
.ddc .ddc__tag {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--ddc-preto);
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ddc .ddc__tag--opc { background: transparent; color: var(--ddc-cinza); border: 1px solid var(--ddc-linha); }
.ddc .ddc__ajuda { padding-left: 40px; font-size: 13px; line-height: 1.5; color: var(--ddc-cinza); }

/* Area de envio: o input cobre a area inteira (invisivel), o resto e so visual */
.ddc .ddc__zona {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  max-height: 280px;
  border: 1.5px dashed var(--ddc-linha);
  border-radius: var(--ddc-raio);
  background: var(--ddc-papel);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ddc .ddc__zona:hover { border-color: var(--ddc-preto); background: #f2ece3; }
.ddc .ddc__zona:focus-within { outline: 3px solid var(--ddc-foco); outline-offset: 2px; }
.ddc .ddc__file { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ddc .ddc__zona-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; text-align: center; }
.ddc .ddc__zona-vazia svg {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  fill: none;
  stroke: var(--ddc-preto);
  stroke-width: 1.5;
  stroke-linejoin: round;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.ddc .ddc__zona-vazia strong { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ddc .ddc__zona-vazia small { font-size: 12px; color: var(--ddc-cinza); }
.ddc .ddc__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ddc .ddc__trocar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: none;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(17, 17, 17, .85);
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ddc .ddc__zona:has(.ddc__preview:not([hidden])) { border-style: solid; border-color: var(--ddc-preto); }
.ddc .ddc__zona:has(.ddc__preview:not([hidden])) .ddc__zona-vazia { visibility: hidden; }
.ddc .ddc__zona:has(.ddc__preview:not([hidden])) .ddc__trocar { display: block; }
.ddc .ddc__erro { font-size: 13px; color: var(--ddc-erro); }
.ddc .ddc__erro:empty { display: none; }

/* Termo */
.ddc .ddc__termo { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--ddc-raio); background: var(--ddc-papel); }
.ddc .ddc__termo-texto { max-height: 140px; overflow: auto; font-size: 13px; line-height: 1.6; color: #444; }
.ddc .ddc__check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ddc .ddc__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ddc-preto); }

/* Botoes */
.ddc .ddc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--ddc-preto);
  border-radius: 99px;
  background: var(--ddc-preto);
  color: #fff;
  font: 700 13px var(--ddc-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.ddc .ddc__btn:hover { background: #333; color: #fff; }
.ddc .ddc__btn:active { transform: scale(.98); }
.ddc .ddc__btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.ddc .ddc__btn.ddc__btn--sec { background: transparent; color: var(--ddc-preto); }
.ddc .ddc__btn.ddc__btn--sec:hover { background: var(--ddc-preto); color: #fff; }
.ddc #ddc-enviar::after { content: '→'; font-size: 16px; font-weight: 400; transition: transform .2s; }
.ddc #ddc-enviar:not([disabled]):hover::after { transform: translateX(4px); }

/* Resultado: foto numa moldura de polaroid */
.ddc .ddc__resultado { display: flex; flex-direction: column; gap: 20px; }
.ddc .ddc__res-titulo { font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; text-align: center; }
.ddc .ddc__moldura {
  width: min(100%, 420px);
  margin: 8px auto 0;
  padding: 14px 14px 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px rgba(0, 0, 0, .14);
  transform: rotate(-1.5deg);
}
.ddc .ddc__foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--ddc-papel);
  overflow: hidden;
}
.ddc .ddc__foto-icone { width: 72px; height: 72px; fill: none; stroke: var(--ddc-linha); stroke-width: 1.2; stroke-linecap: round; }
.ddc .ddc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ddc-revela 1.2s ease-out; }
.ddc .ddc__legenda { padding: 16px 0 18px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; text-align: center; color: var(--ddc-cinza); }
.ddc .ddc__status { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.5; text-align: center; color: var(--ddc-cinza); }
.ddc .ddc__acoes { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.ddc .ddc__acoes:has(#ddc-compartilhar[hidden]) { grid-template-columns: 1fr; }

/* Gerando: brilho passando pela moldura */
.ddc.is-loading .ddc__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: ddc-brilho 1.6s linear infinite;
}
.ddc.is-loading .ddc__foto-icone { animation: ddc-pulsa 1.6s ease-in-out infinite; }
.ddc.is-loading .ddc__status { color: var(--ddc-preto); font-weight: 700; }

@keyframes ddc-brilho { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes ddc-pulsa { 50% { transform: scale(1.12); stroke: var(--ddc-dourado); } }
@keyframes ddc-revela { from { opacity: 0; filter: sepia(1) blur(6px); } to { opacity: 1; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .ddc *, .ddc *::before, .ddc *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 900px) {
  .ddc .ddc__hero { padding-top: 88px; padding-bottom: 64px; }
  .ddc .ddc__texto { font-size: 17px; }
  .ddc .ddc__grid { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 72px; padding-top: 64px; padding-bottom: 96px; }
  .ddc .ddc__resultado { position: sticky; top: 24px; }
}