:root{
    /* ---------- PALETA (troque aqui se quiser mudar as cores) ---------- */
    --sky-top:     #dff3fa;
    --sky-bottom:  #bfe8f4;
    --teal:        #1bafa6;
    --teal-dark:   #0e7f78;
    --green:       #6dc24b;
    --green-dark:  #4c9e30;
    --yellow:      #ffd866;
    --yellow-dark: #c99e18;
    --white:       #ffffff;
    --text-dark:   #1f4a4a;
    --shadow-soft: 0 8px 24px rgba(20,80,80,.12);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html,body{
    background:#0b1220;
  }

  body{
    font-family:'Quicksand', sans-serif;
    color:var(--text-dark);
    display:flex;
    justify-content:center;
  }

  /* ======================================================
     TELA DE ABERTURA
     Cobre a página inteira até o visitante tocar. Esse toque
     é o que "libera" o navegador a tocar o vídeo COM SOM.
  ====================================================== */
  .intro{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    text-align:center;
    padding:32px;
    background:
      radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 60%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
    transition:opacity .5s ease, visibility .5s ease;
  }
  .intro.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .intro-badge{
    width:96px;
    height:96px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffffff, var(--teal) 70%);
    border:5px solid var(--white);
    box-shadow:var(--shadow-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:40px;
    color:var(--white);
    animation:introPulse 2.4s ease-in-out infinite;
  }
  @keyframes introPulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
  }
  .intro-title{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:26px;
    color:var(--green);
    -webkit-text-stroke:1.2px var(--green-dark);
  }
  .intro-text{
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--teal-dark);
    max-width:260px;
    line-height:1.5;
  }
  .intro-btn{
    display:flex;
    align-items:center;
    gap:10px;
    border:none;
    cursor:pointer;
    background:var(--teal);
    color:#fff;
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:17px;
    padding:14px 28px;
    border-radius:40px;
    box-shadow:var(--shadow-soft);
    transition:transform .15s ease;
  }
  .intro-btn:active{
    transform:scale(.95);
  }
  .intro-btn svg{
    width:20px;
    height:20px;
    stroke:#ffffff;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .logo{
	width: 50%;
    position: relative;
	
}  .logo img{
    position: absolute;
    width: 100%;
}

  /* Container central — simula o "cartão" de convite em formato retrato,
     que é como esse tipo de convite roda melhor no celular */
  .page{
    width:100%;
    max-width:480px;
    min-height:100vh;
    background-image:url("background.jpg");
	position:relative;
    overflow:hidden;
  }

  /* ======================================================
     HERO — VÍDEO
     Troque o src do <source> pelo seu vídeo (formato retrato,
     recomendado 9:16, mp4 H.264). O poster é a imagem exibida
     antes do vídeo carregar/tocar.
  ====================================================== */
  .hero{
    position:relative;
    width:100%;
    background:#0b1220;
    overflow:hidden;
  }
  
  .hero video{
    width:120%;
    height:100%;
    object-fit:cover;
    display:block;
	margin-left:-12%;
  }

  /* Botão de som sobre o vídeo */
  .sound-btn{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(11,18,32,.55);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
  }
  .sound-btn:active{
    transform:scale(.9);
  }
  .sound-btn svg{
    width:20px;
    height:20px;
    stroke:#ffffff;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .sound-btn .icon-muted{ display:block; }
  .sound-btn .icon-unmuted{ display:none; }
  .sound-btn.is-unmuted .icon-muted{ display:none; }
  .sound-btn.is-unmuted .icon-unmuted{ display:block; }



  /* Aviso visível só enquanto não houver vídeo — pode apagar este bloco
     inteiro (.hero-placeholder) quando o vídeo estiver no ar */
  .hero-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:32px;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.15), transparent 60%),
      linear-gradient(160deg, #2b3a55, #101826);
    color:#cfe8ea;
    font-family:'Quicksand', sans-serif;
    font-size:14px;
    line-height:1.6;
  }
  .hero-placeholder strong{
    display:block;
    font-family:'Fredoka', sans-serif;
    font-size:18px;
    color:var(--yellow);
    margin-bottom:6px;
    letter-spacing:.02em;
  }

  /* Sombra suave para o vídeo se misturar com o céu abaixo */
  .hero::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:70px;
    background:linear-gradient(180deg, rgba(191,232,244,0) 0%, var(--sky-bottom) 100%);
    pointer-events:none;
  }

  /* ======================================================
     SELO / EMBLEMA — no lugar do logo da marca original.
     Coloque aqui a inicial do aniversariante ou troque por
     uma imagem sua (ex: <img src="selo.png">).
  ====================================================== */
  .badge-wrap{
    display:flex;
    justify-content:center;
    margin-top:-70px;
    position:relative;
    z-index:2;
  }
  .badge{
    width:92px;
    height:92px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffffff, var(--teal) 70%);
    border:5px solid var(--white);
    box-shadow:var(--shadow-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:38px;
    color:var(--white);
    text-shadow:0 2px 6px rgba(0,0,0,.15);
  }

  /* ======================================================
     DECORAÇÕES DE CÉU — sol e nuvens (CSS/SVG, sem imagens externas)
  ====================================================== */
  .sky-decor{
    position:absolute;
    top:0; left:0; right:0;
    height:100%;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
  }
  .sun{
    position:absolute;
    top: 20%;
    left: 1%;
    width: 70px;
    height: 70px;
    z-index:5
  }
  @keyframes pulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
  }
  .cloud{
    position:absolute;
    border-radius:50px;
  }

  .cloud-a{ 
    width: 30%;
    height: 8%;
    top: 24%;
    left: -5%;
}  
   .cloud-b{ 
    width: 30%;
    height: 8%;
    top: 24%;
    left: 16%;
}     
.cloud-c{ 
    width: 30%;
    height: 8%;
    top: 24%;
    left: 60%;
}     
.cloud-d{ 
    width: 30%;
    height: 8%;
    top: 24%;
    left: 79%;
}  

.flag{
	width:73%;
}

.babys > img{
	width:15%;
}
.coelho{
    top: 19%;
    left: 1%;
	position:absolute;}
.coiote{
    width: 26% !important;
    top: 87%;
    left: 68%;
    position: absolute;}
.gato{
    top: 47%;
    left: 80%;
    position: absolute;}
.lola{
    top: 22%;
    left: 85%;
	position:absolute;}
.papa{
    width: 26% !important;
    top: 88%;
    left: 6%;
    position: absolute;}
.pato{
    width: 21% !important;
    top: 89%;
    left: 41%;
    position: absolute;}
.piu{
    top: 46%;
    left: 6%;
    position: absolute;}




  @keyframes drift{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(14px); }
    100%{ transform:translateX(0); }
  }

  /* ======================================================
     CONTEÚDO
  ====================================================== */
  .content{
    position:relative;
    z-index:2;
    padding:150px 28px 40px;
    text-align:center;
  }

  .name{
	margin-top:"10px";
    width:50%;
	animation:introPulse 2.4s ease-in-out infinite;
  }

 .invite-text{
	font-family: 'Fredoka', sans-serif;
    text-shadow: 2px 2px 2px white;
    font-weight: 600;
    font-size: 6vw;
    color: var(--teal-dark);
    line-height: 1.35;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  /* Faixa "1 aninho" */
  .ribbon{
    display:inline-block;
    background:var(--teal);
    color:var(--white);
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:22px;
    padding:8px 26px;
    border-radius:6px;
    position:relative;
    box-shadow:var(--shadow-soft);
    margin-bottom:26px;
  }
  .ribbon::before,
  .ribbon::after{
    content:"";
    position:absolute;
    top:0;
    border-style:solid;
  }
  .ribbon::before{
    left:-14px;
    border-width:19px 14px 19px 0;
    border-color:transparent var(--teal-dark) transparent transparent;
  }
  .ribbon::after{
    right:-14px;
    border-width:19px 0 19px 14px;
    border-color:transparent transparent transparent var(--teal-dark);
  }

  /* Data / hora */
  .datetime{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-bottom:30px;
		animation:introPulse 2.4s ease-in-out infinite;
  }
  .datetime .divider{
    width:2px;
    height:56px;
    background:repeating-linear-gradient(180deg, var(--green) 0 6px, transparent 6px 12px);
  }
  .dt-block .big{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:11vw;
    color:var(--yellow);
    text-shadow: 3px 3px #cb9a0d;
    line-height:1;
  }
  .dt-block .small{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:4vw;
    color:var(--teal-dark);
	text-shadow: 1px 1px white;
    letter-spacing:.06em;
    margin-top:2px;
  }

  .cta-label{
    font-family:'Fredoka', sans-serif;
	text-shadow: 2px 2px 2px white;
    font-weight:600;
	font-size: 5vw;
    color:var(--teal-dark);
    margin-bottom:20px;
  }

  /* ======================================================
     GRID DE ÍCONES
     Cada item é um <a> — troque href="#" pelo link real
     (Google Maps, formulário de confirmação, lista de presentes,
     upload/moldura). target="_blank" abre em nova aba.
  ====================================================== */
  .icon-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px 14%;
    margin-bottom: 11px;
}
  
  .icon-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:var(--teal-dark);
    gap:10px;
  }
  .icon-circle{
    width:76px;
    height:76px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #3fd0c4, var(--teal) 75%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-soft);
    transition:transform .15s ease;
  }
  .icon-btn:active .icon-circle{
    transform:scale(.92);
  }
  .icon-circle svg{
    width:34px;
    height:34px;
    stroke:#ffffff;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .icon-btn span{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:14.5px;
    line-height:1.25;
	text-decoration: none;
  }

  .footer-msg{
    font-family:'Fredoka', sans-serif;
	text-shadow: 2px 2px 2px white;
    font-weight:600;
    font-size: 5vw;
    color:var(--teal-dark);
    padding-bottom:17%;
  }

  /* Estrelinhas/confete simples para o rodapé, sem usar personagens */
  .confetti{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:14px;
    font-size:20px;
  }

  /* Reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    .sun, .cloud-a, .cloud-b{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ======================================================
     MODAL — LOCAL DA FESTA (escolha Waze / Google Maps)
  ====================================================== */
  .location-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .location-modal.is-open{
    visibility:visible;
    opacity:1;
  }
  .location-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,18,32,.55);
    backdrop-filter:blur(2px);
  }
  .location-modal__card{
    position:relative;
    width:100%;
    max-width:420px;
    background:var(--white);
    border-radius:24px 24px 0 0;
    padding:32px 26px 34px;
    text-align:center;
    box-shadow:var(--shadow-soft);
    transform:translateY(24px);
    transition:transform .25s ease;
  }
  .location-modal.is-open .location-modal__card{
    transform:translateY(0);
  }
  @media (min-width:520px){
    .location-modal{ align-items:center; }
    .location-modal__card{ border-radius:24px; }
  }
  .location-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(31,74,74,.08);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
  }
  .location-modal__close:active{
    background:rgba(31,74,74,.16);
  }
  .location-modal__close svg{
    width:16px;
    height:16px;
    stroke:var(--text-dark);
    fill:none;
    stroke-width:2.4;
    stroke-linecap:round;
  }
  .location-modal__icon{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #3fd0c4, var(--teal) 75%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-soft);
  }
  .location-modal__icon svg{
    width:28px;
    height:28px;
    stroke:#ffffff;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .location-modal__title{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:20px;
    color:var(--teal-dark);
    margin-bottom:6px;
  }
  .location-modal__subtitle{
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    font-size:14px;
    color:var(--text-dark);
    opacity:.75;
    margin-bottom:22px;
  }
  .location-modal__actions{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .location-modal__btn{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:16px;
    padding:14px 20px;
    border-radius:14px;
    color:#ffffff;
    box-shadow:var(--shadow-soft);
    transition:transform .15s ease;
  }
  .location-modal__btn:active{
    transform:scale(.96);
  }
  .location-modal__btn--waze{
    background:#33ccff;
  }
  .location-modal__btn--maps{
    background:var(--teal);
  }

  /* ======================================================
     LISTA DE PRESENTES — rolagem dentro do modal
  ====================================================== */
  .gift-list{
    list-style:none;
    max-height:280px;
    overflow-y:auto;
    text-align:left;
    border-radius:14px;
    background:rgba(31,74,74,.05);
    padding:6px 16px;
    margin-top:4px;
  }
  .gift-list li{
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--text-dark);
    padding:12px 4px;
    border-bottom:1px solid rgba(31,74,74,.1);
  }
  .gift-list li:last-child{
    border-bottom:none;
  }
  .gift-list li.pix{
    cursor:pointer;
    color:var(--teal-dark);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:opacity .15s ease;
  }
  .gift-list li.pix:active{
    opacity:.6;
  }
  .pix-feedback{
    min-height:20px;
    margin-top:8px;
    font-family:'Quicksand', sans-serif;
    font-weight:700;
    font-size:13px;
    color:var(--green-dark);
    opacity:0;
    transition:opacity .2s ease;
  }
  .pix-feedback.is-visible{
    opacity:1;
  }