/* Tema Sunshine: "nosso raio de sol", em aquarela rosa e amarelo pastel.
   Carregado depois do convite.css, sobrescrevendo só os tokens e o que muda.
   Rosa é a cor de destaque, amarelo fica nos raios e nos detalhes, e o texto
   corrido usa um marrom quente que passa no contraste do celular ao sol. */

.cvt.tema-sunshine{
  --creme:#FDF6EF; --papel:#FFFCF8;
  --rosa:#F7C6CD; --rosa-claro:#FCE8EB; --rosa-fundo:#E07A89;
  --azul:#FCE8EB; --azul-fundo:#E07A89;
  --folha:#F3C95E; --folha-clara:#F9E3A0; --mata:#C65D70;
  --tinta:#6B4E4A; --tinta-suave:#8E716C;
  --borda:rgba(224,122,137,.30);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --script:'Dancing Script','Brush Script MT',cursive;
  --sans:'Nunito','Trebuchet MS',-apple-system,sans-serif;
  /* a imagem do convite pessoal usa a letra cursiva no nome */
  --nome-canvas:'Dancing Script',cursive;
}

/* papel creme com manchas de aquarela bem leves */
.cvt.tema-sunshine .jardim{background:var(--creme)}
.cvt.tema-sunshine .jardim .b1{background:rgba(247,198,205,.26)}
.cvt.tema-sunshine .jardim .b2{background:rgba(249,224,160,.24)}
.cvt.tema-sunshine .jardim .b3{background:rgba(247,198,205,.22)}
.cvt.tema-sunshine .jardim .b4{background:rgba(249,224,160,.20)}
.cvt.tema-sunshine .jardim .luz{
  background:radial-gradient(60% 48% at 50% 36%, rgba(255,252,248,.92), rgba(255,252,248,.40) 62%, transparent 80%);
}

/* ==========================================================================
   Enfeites de aquarela: moldura da página, sol, nuvem, buquês e colinas
   ========================================================================== */
.cvt.tema-sunshine .ceu .brilho{position:absolute}
.cvt.tema-sunshine .cvt-moldura-pag{
  position:absolute; inset:8px; border:1.5px solid rgba(224,122,137,.34); border-radius:26px;
}
.cvt.tema-sunshine .cvt-moldura-pag::after{
  content:''; position:absolute; inset:5px; border:1.5px dashed rgba(224,122,137,.38); border-radius:21px;
}
.cvt.tema-sunshine .cvt-deco{position:absolute; height:auto; max-width:none; pointer-events:none; user-select:none}
.cvt.tema-sunshine .cvt-deco-sol{left:-2px; top:0; width:112px}
.cvt.tema-sunshine .cvt-deco-nuvem{right:-14px; top:34px; width:116px; opacity:.95}
.cvt.tema-sunshine .cvt-deco-buque{bottom:38px; width:168px}
.cvt.tema-sunshine .cvt-deco-buque-e{left:-16px}
.cvt.tema-sunshine .cvt-deco-buque-d{right:-16px; transform:scaleX(-1)}
.cvt.tema-sunshine .cvt-colinas{position:absolute; left:0; right:0; bottom:0; width:100%; height:92px; display:block}
.cvt.tema-sunshine .envelope{padding-bottom:calc(220px + env(safe-area-inset-bottom))}

@media (min-width:720px){
  .cvt.tema-sunshine .cvt-deco-sol{left:8px; top:0; width:168px}
  .cvt.tema-sunshine .cvt-deco-nuvem{right:12px; top:34px; width:190px}
  .cvt.tema-sunshine .cvt-deco-buque{width:210px; bottom:66px}
  .cvt.tema-sunshine .cvt-deco-buque-e{left:-10px}
  .cvt.tema-sunshine .cvt-deco-buque-d{right:-10px}
  .cvt.tema-sunshine .cvt-colinas{height:120px}
  .cvt.tema-sunshine .cvt-moldura-pag{inset:14px; border-radius:32px}
  .cvt.tema-sunshine .cvt-moldura-pag::after{inset:7px; border-radius:26px}
  .cvt.tema-sunshine .envelope{padding-bottom:calc(250px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   Abertura
   ========================================================================== */
.cvt.tema-sunshine .portal{padding-top:70px}
.cvt.tema-sunshine .sobrescrito{
  max-width:12em; margin:0 auto 6px;
  font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.32;
  letter-spacing:0; text-indent:0; text-transform:none; color:var(--tinta);
  text-wrap:balance;
}

/* arco da foto: borda de papel, sombra rosada e raios em volta */
.cvt.tema-sunshine .moldura{overflow:visible; max-width:340px}
.cvt.tema-sunshine .janela{
  background:linear-gradient(165deg,#FDE9EC,#FFF6E8 55%,#FCE8EB);
  box-shadow:0 0 0 6px #FFFCF8 inset, 0 0 0 7.5px rgba(224,122,137,.45) inset,
             0 16px 34px rgba(198,93,112,.16);
}
.cvt.tema-sunshine .arco{overflow:visible}

.cvt.tema-sunshine .pre-nome{
  max-width:17em; margin:22px auto 0;
  font-family:var(--sans); font-weight:700; font-size:15px; line-height:1.55;
  letter-spacing:.15em; text-indent:.15em; text-transform:uppercase; color:var(--rosa-fundo);
  text-wrap:balance;
}

.cvt.tema-sunshine h1{
  margin:2px 0 0; font-family:var(--script); font-weight:700; font-style:normal;
  font-size:clamp(84px,26vw,120px); line-height:1.08; letter-spacing:0; color:#E58492;
}
.cvt.tema-sunshine .nome-txt{
  position:relative; display:inline-block; padding:0 .06em .04em;
  background:linear-gradient(180deg,#F4A9B3 8%,#E07A89 92%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* raiozinhos amarelos dos dois lados do nome e da palavra em destaque */
.cvt.tema-sunshine .nome-txt::before,
.cvt.tema-sunshine .nome-txt::after,
.cvt.tema-sunshine .realce::before,
.cvt.tema-sunshine .realce::after{
  content:''; position:absolute; top:22%; width:.30em; height:.42em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Cg stroke='%23F3C95E' stroke-width='3.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M26 6 14 12'/%3E%3Cpath d='M27 21H11'/%3E%3Cpath d='M26 36 14 30'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.cvt.tema-sunshine .nome-txt::before,
.cvt.tema-sunshine .realce::before{right:100%}
.cvt.tema-sunshine .nome-txt::after,
.cvt.tema-sunshine .realce::after{left:100%; transform:scaleX(-1)}
.cvt.tema-sunshine h1 em{
  display:block; margin-top:2px;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.24em; letter-spacing:.01em;
  color:var(--mata); -webkit-text-fill-color:var(--mata);
}

/* linha pontilhada com coração */
.cvt.tema-sunshine .divisor-coracao{margin:10px auto 0}

/* data, horário e local em colunas */
.cvt.tema-sunshine .info3{margin-top:18px}
.cvt.tema-sunshine .info3-col + .info3-col{border-left:2px dashed rgba(243,201,94,.75)}
.cvt.tema-sunshine .info3-rot{color:var(--rosa-fundo)}
.cvt.tema-sunshine .info3-num{color:var(--rosa-fundo)}
.cvt.tema-sunshine .info3-local{font-family:var(--serif)}

/* frase de chamada com a palavra cursiva */
.cvt.tema-sunshine .chamada{
  margin-top:26px; max-width:16em;
  font-family:var(--serif); font-size:19px; line-height:1.45; color:var(--tinta);
}
.cvt.tema-sunshine .realce{
  position:relative; display:table; margin:4px auto 0; padding:0 .1em;
  font-family:var(--script); font-weight:700; font-size:2em; line-height:1.05;
  color:var(--rosa-fundo);
}

/* selo, quando usado */
.cvt.tema-sunshine .selo{
  font-family:var(--sans); font-weight:800; letter-spacing:.14em; color:var(--mata);
  box-shadow:0 0 0 1.5px rgba(224,122,137,.45) inset, 0 6px 18px rgba(198,93,112,.10);
}

/* contagem */
.cvt.tema-sunshine .contagem{margin-top:26px}
.cvt.tema-sunshine .contagem div{
  border:1.5px dashed rgba(224,122,137,.38);
  box-shadow:0 6px 18px rgba(198,93,112,.07);
}
.cvt.tema-sunshine .contagem div:nth-child(even){border-color:rgba(243,201,94,.85)}
.cvt.tema-sunshine .contagem b{font-family:var(--sans); font-weight:700; color:var(--rosa-fundo)}
.cvt.tema-sunshine .contagem span{font-weight:700; color:var(--tinta-suave)}
.cvt.tema-sunshine .faltam{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--tinta)}

/* ==========================================================================
   Cartões
   ========================================================================== */
.cvt.tema-sunshine .cartao{
  position:relative; border-radius:28px;
  background:rgba(255,252,248,.94);
  border:1.5px solid rgba(224,122,137,.22);
  box-shadow:0 12px 32px rgba(198,93,112,.09);
}
.cvt.tema-sunshine .cartao::before{
  content:''; position:absolute; inset:7px; pointer-events:none;
  border:1.5px dashed rgba(224,122,137,.26); border-radius:22px;
}
.cvt.tema-sunshine .cartao > *{position:relative}
.cvt.tema-sunshine .cartao h2{
  font-family:var(--serif); font-weight:600; font-size:27px; color:var(--mata);
  letter-spacing:-.005em; text-align:center;
}
.cvt.tema-sunshine .cartao h2 + .apoio{text-align:center}
.cvt.tema-sunshine .ilustra.cabeca{display:block; margin:0 auto 8px; height:auto}
.cvt.tema-sunshine .divisor{
  height:0; background:none; border-top:2px dotted rgba(224,122,137,.40);
  width:120px; margin:14px auto 4px;
}
.cvt.tema-sunshine .linha{align-items:center; border-bottom-color:rgba(224,122,137,.25)}
.cvt.tema-sunshine .linha .ilustra{flex:none; width:40px; height:auto; margin:0}
.cvt.tema-sunshine .linha svg{color:var(--rosa-fundo)}
.cvt.tema-sunshine .linha p{font-weight:700}

/* botões: rosa no principal, amarelo de sol no secundário */
.cvt.tema-sunshine .botao{font-weight:800}
.cvt.tema-sunshine .botao.rosa{
  background:linear-gradient(180deg,#E8848F,#D2606F); color:#FFFFFF;
  text-shadow:0 1px 0 rgba(150,50,70,.22);
  box-shadow:0 8px 22px rgba(210,96,111,.32);
}
.cvt.tema-sunshine .botao.rosa:hover{background:linear-gradient(180deg,#E17A87,#C85566)}
.cvt.tema-sunshine .botao.verde{
  background:linear-gradient(180deg,#FBE29A,#F5CC5E); color:#6B4E4A;
  box-shadow:0 8px 22px rgba(243,201,94,.38);
}
.cvt.tema-sunshine .botao.verde:hover{background:linear-gradient(180deg,#F9DB86,#F2C44C)}
.cvt.tema-sunshine .botao.contorno{background:#FFFCF8; color:var(--mata); border-color:rgba(224,122,137,.50)}
.cvt.tema-sunshine .botao.contorno:hover{background:rgba(252,232,235,.7)}
.cvt.tema-sunshine .botao:focus-visible{outline-color:var(--rosa-fundo)}

/* formulário */
.cvt.tema-sunshine label{font-weight:700}
.cvt.tema-sunshine input[type=text],
.cvt.tema-sunshine input[type=tel],
.cvt.tema-sunshine textarea{background:#FFF8F4; border-color:rgba(224,122,137,.30)}
.cvt.tema-sunshine input::placeholder,
.cvt.tema-sunshine textarea::placeholder{color:#B39A95}
.cvt.tema-sunshine .campo input:focus,
.cvt.tema-sunshine .campo textarea:focus,
.cvt.tema-sunshine textarea:focus{border-color:var(--rosa-fundo); box-shadow:0 0 0 3px rgba(224,122,137,.20)}
.cvt.tema-sunshine .bloco{border-top:2px dotted rgba(224,122,137,.30)}
.cvt.tema-sunshine .bloco > h3{font-weight:800; color:var(--mata)}
.cvt.tema-sunshine .contador button{color:var(--mata); background:#FFF4F1; border-color:rgba(224,122,137,.32)}
.cvt.tema-sunshine .contador input{color:var(--mata); border-color:rgba(224,122,137,.32)}
.cvt.tema-sunshine .ficha{border-color:rgba(224,122,137,.28)}
.cvt.tema-sunshine .ficha > .titulo{color:var(--mata); font-weight:800}
.cvt.tema-sunshine .ficha > .titulo .pino{background:var(--folha); color:#6B4E4A}
.cvt.tema-sunshine .ficha.crianca > .titulo .pino{background:var(--rosa-fundo); color:#FFFFFF}
.cvt.tema-sunshine .aviso{color:#C04B60}

/* confirmação */
.cvt.tema-sunshine #cvt-confirmado .marca{color:var(--rosa-fundo)}
.cvt.tema-sunshine .lista{border-color:rgba(224,122,137,.28)}
.cvt.tema-sunshine .lista h3{color:var(--mata); font-weight:800}
.cvt.tema-sunshine .lista li .quem{color:var(--mata)}
.cvt.tema-sunshine .lista .marcador{background:var(--folha)}
.cvt.tema-sunshine .lista .criancas li .marcador{background:var(--rosa-fundo)}
.cvt.tema-sunshine .meu-convite{background:#FFF8F4; border:1.5px dashed rgba(224,122,137,.38)}
.cvt.tema-sunshine .meu-rotulo{color:var(--mata)}
.cvt.tema-sunshine .outra{border-top:2px dotted rgba(224,122,137,.30)}
.cvt.tema-sunshine .outra-botao{color:var(--mata)}
.cvt.tema-sunshine .outra-botao:hover{background:rgba(252,232,235,.6); border-color:rgba(224,122,137,.45)}

/* presentes */
.cvt.tema-sunshine .presente-lista li{border-bottom:1px dashed rgba(224,122,137,.28)}
.cvt.tema-sunshine .presente-lista svg{color:var(--rosa-fundo)}
.cvt.tema-sunshine .pix{background:#FFF8F4; border:1.5px dashed rgba(243,201,94,.8)}
.cvt.tema-sunshine .pix-chave{color:var(--mata)}

/* rodapé */
.cvt.tema-sunshine footer p{font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; color:var(--tinta); text-wrap:balance}
.cvt.tema-sunshine footer .fecho{
  margin-top:6px; font-family:var(--script); font-style:normal; font-weight:700;
  font-size:28px; letter-spacing:0; text-transform:none; color:var(--rosa-fundo);
}
.cvt.tema-sunshine footer p.cvt-credito{font-family:var(--sans); font-style:normal; font-weight:500; font-size:12px; color:var(--tinta-suave)}
.cvt.tema-sunshine .cvt-credito a{color:var(--mata)}

/* ==========================================================================
   Desktop: abertura à esquerda, cartões à direita
   ========================================================================== */
@media (min-width:720px) and (max-width:919px){
  .cvt.tema-sunshine .moldura{max-width:400px}
  .cvt.tema-sunshine .portal{padding-top:80px}
}
@media (min-width:920px){
  .cvt.tema-sunshine .portal{padding-top:58px}
  .cvt.tema-sunshine .sobrescrito{font-size:20px}
  .cvt.tema-sunshine .moldura{max-width:280px}
  .cvt.tema-sunshine .pre-nome{margin-top:14px; font-size:14px}
  .cvt.tema-sunshine h1{font-size:clamp(76px,6.2vw,100px)}
  .cvt.tema-sunshine .info3{margin-top:14px}
  .cvt.tema-sunshine .chamada{margin-top:18px; font-size:18px}
  .cvt.tema-sunshine .contagem{margin-top:18px}
  .cvt.tema-sunshine .cartao:first-of-type{margin-top:28px}
  .cvt.tema-sunshine .cartao + .cartao{margin-top:24px}
  /* sol e nuvem acompanham a coluna da abertura, como no cartão impresso */
  .cvt.tema-sunshine .cvt-deco-sol{left:calc(50% - min(590px, 50%) + 20px); top:14px; width:136px}
  .cvt.tema-sunshine .cvt-deco-nuvem{right:auto; left:calc(50% - 36px - 146px); top:34px; width:140px}
  .cvt.tema-sunshine .sobrescrito{max-width:11.5em}
}
@media (min-width:920px) and (max-height:800px){
  .cvt.tema-sunshine .moldura{max-width:220px}
  .cvt.tema-sunshine h1{font-size:clamp(66px,5.2vw,84px)}
}

body.convite-tela-cheia.tema-sunshine{background:#FDF6EF; color:#6B4E4A}
body.convite-tela-cheia.tema-sunshine ::selection{background:#F7C6CD; color:#8C3A4C}