/* Tema Realeza: rosé e dourado.
   Carregado depois do convite.css, sobrescrevendo só os tokens e o que muda.
   O dourado claro fica em ornamento e filete: texto e botão usam o rosé
   profundo e o dourado escuro, que passam no contraste do celular ao sol. */

.cvt.tema-realeza{
  /* Paleta tirada da arte do save the date: rosé aquarelado e ouro velho. */
  --creme:#FCEFEC; --papel:#FFF8F6;
  --rosa:#F6CFCB; --rosa-claro:#FDEBE8; --rosa-fundo:#C4676A;
  --azul:#F0D9B8; --azul-fundo:#A8813C;
  --folha:#C79A4B; --folha-clara:#E8CE96; --mata:#A8813C;
  --tinta:#7A4B49; --tinta-suave:#A0716E;
  --borda:rgba(199,154,75,.42);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --script:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Trebuchet MS',-apple-system,sans-serif;
}

/* fundo aquarelado: rosa quente no topo, creme no miolo, rosé embaixo */
.cvt.tema-realeza .jardim span{background:none}
.cvt.tema-realeza .jardim .b1{background:radial-gradient(closest-side,rgba(246,201,196,.92),transparent)}
.cvt.tema-realeza .jardim .b2{background:radial-gradient(closest-side,rgba(240,217,184,.85),transparent)}
.cvt.tema-realeza .jardim .b3{background:radial-gradient(closest-side,rgba(233,168,163,.72),transparent)}
.cvt.tema-realeza .jardim .b4{background:radial-gradient(closest-side,rgba(246,201,196,.80),transparent)}
.cvt.tema-realeza .jardim .luz{background:radial-gradient(closest-side,rgba(255,248,246,.94),transparent)}

/* pérolas e brilhos do fundo */
.cvt.tema-realeza .ceu .brilho{position:absolute}
.cvt.tema-realeza .ceu .perola{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#FFF8F6,#F1D9CF 70%,#D8B49B);
  opacity:.8;
}

/* moldura: filete dourado interno, que é o contraste da foto em preto e branco */
.cvt.tema-realeza .janela{box-shadow:0 0 0 1.5px rgba(198,161,91,.55) inset, 0 18px 40px rgba(46,34,38,.14)}

/* tipografia mais formal */
.cvt.tema-realeza h1{font-family:var(--serif); font-weight:500; letter-spacing:-.01em}
.cvt.tema-realeza h1 em{
  font-family:var(--script); font-weight:400; font-style:italic;
  font-size:.40em; letter-spacing:.02em; margin-top:6px; color:var(--rosa-fundo); opacity:.9;
}
.cvt.tema-realeza .sobrescrito{
  letter-spacing:.30em; text-indent:.30em;
  position:relative; z-index:2;
  /* desce o suficiente para passar longe da filigrana dos cantos */
  padding-top:40px;
}
.cvt.tema-realeza .selo{
  letter-spacing:.20em; color:var(--mata);
  box-shadow:0 0 0 1px rgba(198,161,91,.45) inset, 0 6px 18px rgba(46,34,38,.10);
}
.cvt.tema-realeza .cartao h2{font-family:var(--serif); font-weight:500}

/* filete dourado no topo dos cartões */
.cvt.tema-realeza .cartao{
  box-shadow:0 8px 26px rgba(46,34,38,.09);
  border-top:2px solid rgba(198,161,91,.55);
}

/* botões */
.cvt.tema-realeza .botao.verde{background:var(--rosa-fundo); box-shadow:0 8px 22px rgba(142,51,80,.24)}
.cvt.tema-realeza .botao.verde:hover{background:#7B2A44}
.cvt.tema-realeza .botao.rosa{background:var(--mata); box-shadow:0 8px 22px rgba(140,109,47,.24)}
.cvt.tema-realeza .botao.rosa:hover{background:#775C25}
.cvt.tema-realeza .botao.contorno{color:var(--rosa-fundo); border-color:rgba(198,161,91,.55)}
.cvt.tema-realeza .botao.contorno:hover{background:rgba(240,207,216,.30)}

/* contagem regressiva */
.cvt.tema-realeza .contagem b{color:var(--rosa-fundo)}
.cvt.tema-realeza .contagem div{border-top:2px solid rgba(198,161,91,.45)}

/* formulário */
.cvt.tema-realeza .campo input:focus,
.cvt.tema-realeza .campo textarea:focus{border-color:var(--folha); box-shadow:0 0 0 3px rgba(198,161,91,.22)}
.cvt.tema-realeza .contador button{color:var(--rosa-fundo)}
.cvt.tema-realeza .ficha .pino{background:var(--rosa-fundo); color:#FFFCFA}
.cvt.tema-realeza .ficha.crianca .pino{background:var(--mata)}

/* confirmação */
.cvt.tema-realeza #cvt-confirmado .marca{stroke:var(--rosa-fundo)}
.cvt.tema-realeza .lista h3{color:var(--mata)}
.cvt.tema-realeza .lista .marcador{background:var(--folha)}

/* rodapé */
.cvt.tema-realeza footer .fecho{color:var(--mata)}

/* ==========================================================================
   Coroa: imagem apoiada sobre o topo do arco
   Fica dentro da .moldura (que é position:relative), então acompanha a
   largura da foto em qualquer tela, sem media query.
   ========================================================================== */
.cvt.tema-realeza .moldura{overflow:visible}
.cvt.tema-realeza .coroa{
  position:absolute;
  left:50%;
  /* 18.5% é onde começa a curva do arco: a coroa desce até encostar nela */
  top:18.5%;
  width:46%;
  height:auto;
  transform:translate(-50%,-82%);
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(140,109,47,.28));
}

/* o portal precisa de espaço acima para a coroa não ser cortada */
/* a coroa sobe acima da moldura, então o portal abre espaço para ela e a
   linha de abertura sai da rota da cruz */
.cvt.tema-realeza .portal{padding-top:10px}
.cvt.tema-realeza .sobrescrito{margin-bottom:80px}
@media (min-width:720px){
  .cvt.tema-realeza .sobrescrito{margin-bottom:94px}
}

/* No desktop a coroa é menor, para não invadir a linha de abertura */
@media (min-width:920px){
  .cvt.tema-realeza .portal{padding-top:0}
  .cvt.tema-realeza .sobrescrito{padding-top:26px}
  .cvt.tema-realeza .sobrescrito{margin-bottom:62px}
  .cvt.tema-realeza .coroa{width:44%}
}
@media (min-width:920px) and (max-height:800px){
  .cvt.tema-realeza .sobrescrito{margin-bottom:46px}
  .cvt.tema-realeza .portal{padding-top:8px}
}
@media (min-width:920px) and (min-height:940px){
  .cvt.tema-realeza .sobrescrito{margin-bottom:66px}
}


/* ==========================================================================
   XV no início do nome
   O algarismo romano ganha cor e corpo próprios, para não competir com o
   nome e ainda assim ser lido primeiro.
   ========================================================================== */
.cvt.tema-realeza h1 .romano{
  display:block;
  font-family:var(--serif); font-weight:500;
  font-size:.62em; line-height:1; letter-spacing:.10em;
  color:var(--mata); margin-bottom:6px;
}
.cvt.tema-realeza h1 .romano::after{
  content:''; display:block; width:64px; height:2px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.85),transparent);
}

/* ==========================================================================
   Cantos em filigrana, no alto da página
   ========================================================================== */
.cvt.tema-realeza .cvt-canto{
  position:absolute; top:0; width:112px; height:112px; opacity:.85;
  pointer-events:none;
}
.cvt.tema-realeza .cvt-canto-se{left:0}
.cvt.tema-realeza .cvt-canto-sd{right:0}
@media (min-width:720px){
  .cvt.tema-realeza .cvt-canto{width:164px; height:164px}
}
@media (min-width:1180px){
  .cvt.tema-realeza .cvt-canto{width:200px; height:200px}
}


/* A guirlanda fica um pouco recuada para a foto liderar a leitura. */
.cvt.tema-realeza .arco{opacity:.82}

/* filete creme por dentro da janela, o contorno que separa a foto do fundo */
.cvt.tema-realeza .janela{
  box-shadow:0 0 0 6px #FFF8F6 inset, 0 0 0 7.5px rgba(199,154,75,.55) inset,
             0 18px 40px rgba(122,75,73,.16);
}