:root { font-family: Arial, Helvetica, sans-serif; color: #0795ed; font-size: 1rem; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 17.5rem; min-height: 100dvh; overflow-x: hidden; }
button, input { font: inherit; }

/* Inversão de cores no fundo e layout */
.landing-page { 
    position: relative; 
    isolation: isolate; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: clamp(.75rem, 1.7vh, 1.5rem); 
    width: 100%; 
    min-height: 100dvh; 
    padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 4vw, 4rem); 
    overflow: hidden; 
    /* Fundo mais integrado e suave */
    background: linear-gradient(130deg, #fff5ee 0%, #fff 48%, #fff5ee 100%); 
}

.backdrop { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.backdrop::before, .backdrop::after { 
    content: ""; 
    position: absolute; 
    width: 38rem; 
    aspect-ratio: 1; 
    border: .125rem solid #ffcc99; 
    border-radius: 50%; 
    opacity: .26; 
    background: repeating-radial-gradient(circle, transparent 0 .5rem, #ffcc99 .5625rem .625rem, transparent .6875rem 1.0625rem); 
}
.backdrop::before { top: 12%; left: -25rem; }.backdrop::after { top: 9%; right: -25rem; }

/* Orbes agora em Laranja */
.orb { 
    position: absolute; 
    bottom: -19rem; 
    width: 33rem; 
    aspect-ratio: 1; 
    border-radius: 50%; 
    opacity: .27; 
    background: repeating-radial-gradient(circle at center, #ff801e 0 .1875rem, #e6731a .25rem .4375rem, #ff801e .5625rem .75rem); 
}
.orb-left { left: -19rem; }.orb-right { right: -19rem; }

/* Confetes com cores invertidas */
.confetti { position: absolute; width: .625rem; height: 1.6875rem; border-radius: .125rem; background: #0795ed; transform: rotate(31deg); animation: float 6s ease-in-out infinite; }
.c1{left:8%;top:13%;}
.c2{left:25%;top:4%;height:1rem;transform:rotate(-15deg);background:#ff801e}
.c3{left:73%;top:2%;height:2rem}
.c4{right:9%;top:16%;height:1.5625rem;background:#ff801e}
.c5{right:23%;top:25%;height:.6875rem}
.c6{left:16%;top:31%;height:.9375rem;animation-delay:-2s;background:#ff801e}
.c7{right:14%;top:42%;height:1.125rem;animation-delay:-3s}
.c8{left:37%;top:25%;height:.625rem;animation-delay:-4s;background:#ff801e}
.c9{left:4%;top:34%;height:.8125rem;transform:rotate(-42deg);animation-delay:-1s}
.c10{right:5%;top:5%;height:1.3125rem;transform:rotate(12deg);animation-delay:-2.5s;background:#ff801e}
.c11{left:48%;top:1%;height:.75rem;transform:rotate(20deg);animation-delay:-3.5s}
.c12{left:60%;top:15%;height:1.1875rem;transform:rotate(-30deg);animation-delay:-1.5s;background:#fff5ee;box-shadow:0 0 0 .0625rem rgba(255,128,30,.25) inset}
.c13{right:33%;top:6%;height:.625rem;border-radius:50%;width:.625rem;animation-delay:-4.5s;background:#ff801e}
.c14{left:14%;top:44%;height:.875rem;border-radius:50%;width:.875rem;animation-delay:-.5s}
.c15{right:41%;top:29%;height:.6875rem;transform:rotate(55deg);animation-delay:-3s;background:#fff5ee;box-shadow:0 0 0 .0625rem rgba(255,128,30,.25) inset}
.c16{left:31%;top:9%;height:.9375rem;border-radius:50%;width:.9375rem;animation-delay:-2.2s;background:#ff801e}
.c17{right:2%;top:33%;height:1rem;transform:rotate(-20deg);animation-delay:-4.2s}
.c18{left:82%;top:20%;height:.75rem;border-radius:50%;width:.75rem;animation-delay:-1.8s;background:#0795ed}

.brand { display:block; flex:0 0 auto; width:clamp(7.5rem,14vw,13.75rem); height:auto; justify-self:center; object-fit:contain; margin-bottom: clamp(1rem, 3vh, 2rem); }
.hero { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; width: min(100%, 45rem); text-align: center; margin-top: clamp(1rem, 2vh, 1.5rem); }
.present-box { 
    position: relative;
    width: clamp(8rem, 15vh, 12rem);
    aspect-ratio: 1;
    margin-bottom: clamp(1rem, 2vh, 2.5rem);
    margin-top: clamp(0.5rem, 1.5vh, 1rem);
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    perspective: 1000px;
    z-index: 1;
}

.box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80%;
    background: #0795ed; /* Azul Mell */
    border-radius: 0 0 1rem 1rem;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1);
}

.box::after { /* Fita vertical */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 100%;
    background: #ff801e; /* Laranja Mell */
}

.lid {
    position: absolute;
    top: 10%;
    left: -5%;
    width: 110%;
    height: 25%;
    background: #0795ed; /* Azul Mell */
    border-radius: 0.5rem;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.lid::after { /* Fita na tampa */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 18.2%;
    height: 100%;
    background: #ff801e; /* Laranja Mell */
}

.bow-top {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 30%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.bow-loop {
    position: absolute;
    width: 35%;
    height: 100%;
    background: #ff801e;
    border-radius: 50% 50% 50% 0;
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.15);
}

.bow-loop-left {
    left: 0;
    transform: rotate(-45deg);
}

.bow-loop-right {
    right: 0;
    transform: rotate(45deg);
}

.bow-center-top {
    position: absolute;
    width: 30%;
    height: 50%;
    background: #ff801e;
    border-radius: 50%;
    z-index: 2;
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.15);
}

.bow {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 30%;
    z-index: 3;
    transition: all 0.5s ease;
}

/* Laço real em CSS */


/* Animação de Abrir e Levitar */
.hero:hover .present-box {
    transform: translateY(-20px);
}

.hero:hover .lid {
    transform: translateY(-40px) rotate(-15deg);
    filter: drop-shadow(0 20px 20px rgba(0,0,0,0.15));
}

.hero:hover .bow-top {
    transform: translateX(-50%) translateY(-50px) rotate(-5deg);
}

.hero:hover .bow {
    transform: translateX(-50%) translateY(-45px) rotate(-10deg);
}

.hero:hover .present-box {
    animation: levitate 2s ease-in-out infinite alternate 0.5s;
}

@keyframes levitate {
    from { transform: translateY(-20px); }
    to { transform: translateY(-40px); }
}

@keyframes confetti-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(0);
    }
}

.confetti-burst {
    position: fixed;
    pointer-events: none;
    animation: confetti-burst 2s ease-out forwards;
}

/* Inversão de cores no texto do Hero */
.hero h1 { margin:0; color:#0795ed; font-size:clamp(2.1875rem,6.5vh,4.75rem); font-weight:900; line-height:.88; letter-spacing:-.125rem; text-shadow:0 .1875rem 0 #fff,0 .375rem .5rem rgba(130,80,40,.22); }
.hero h1 strong { color:#ff801e; font-size:1.1em; white-space:nowrap; }
.hero p { margin:clamp(.625rem,2.5vh,1.5rem) 0 0; font-size:clamp(.9375rem,2.6vh,1.9375rem); font-weight:700; line-height:1.2; }
.hero p b { color:#ff801e; }

/* Formulário com fundo mais opaco e destacado */
.lead-form { 
    display: flex; 
    flex: 0 0 auto; 
    flex-direction: column; 
    width: min(100%, 41.875rem); 
    gap: .875rem; 
    padding: 2rem; 
    background: rgba(255, 255, 255, 0.9); /* Fundo mais opaco */
    border-radius: 2rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 128, 30, 0.1);
}

.field { 
    position:relative; 
    display:flex; 
    align-items:center; 
    min-height:clamp(3.5625rem,7.2vh,6rem); 
    border-radius:clamp(1rem,2vw,1.75rem); 
    background:#fff; 
    box-shadow:0 .1875rem .6875rem rgba(130,70,10,.1); 
    overflow:hidden; 
    border: 1px solid #eee;
}
.field:focus-within { outline:.1875rem solid rgba(255,128,30,.35); border-color: #ff801e; }
.field input { width:100%; height:100%; min-height:inherit; border:0; outline:0; background:transparent; color:#12346d; font-size:clamp(1rem,2vw,1.75rem); padding:0 5% 0 15%; }
.field input::placeholder{color:#979797;opacity:1}

/* Ícones agora em Laranja */
.field-textarea{align-items:stretch;min-height:auto}
.field-textarea textarea{width:100%;border:0;outline:0;background:transparent;color:#12346d;font-size:clamp(.9375rem,1.8vw,1.375rem);padding:.875rem 5%;resize:vertical;min-height:4.5rem;font-family:inherit}
.field-textarea textarea::placeholder{color:#979797;opacity:1}

.icon{position:absolute;left:4%;width:5%;height:45%;background:#ff801e}
.person{clip-path:polygon(41% 0,59% 0,72% 12%,72% 33%,86% 49%,92% 68%,8% 68%,14% 49%,28% 33%,28% 12%)}
.phone{clip-path:polygon(21% 0,43% 0,50% 23%,39% 34%,58% 54%,69% 42%,92% 50%,92% 72%,75% 91%,50% 82%,18% 50%,8% 25%)}
.email{height:40%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,50% 51%,100% 0,91% 0,50% 37%,9% 0,0 0)}

.terms { display:flex; align-items:center; gap:.75rem; min-height:3rem; font-size:clamp(.75rem,1.65vw,1.4375rem); font-weight:700; line-height:1.2; }
.terms input{position:absolute;opacity:0}
.checkmark{flex:0 0 clamp(1.8125rem,4.1vh,3.25rem);height:clamp(1.8125rem,4.1vh,3.25rem);border-radius:.75rem;background:#ff801e;color:white;display:grid;place-items:center;font-size:clamp(1.375rem,3.5vh,2.625rem);line-height:1}
.terms input:not(:checked)+.checkmark{color:transparent;background:white;border:.125rem solid #ff801e}
.terms-link{padding:0;border:0;background:none;color:#ff801e;font:inherit;font-weight:700;cursor:pointer;text-align:left}

/* Botão de Resgate com efeito de hover e clique */
.claim-button { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:.625rem; 
    min-height:clamp(2.5rem,5vh,4rem); 
    border:0; 
    background:none; 
    box-shadow:none;
    cursor:pointer; 
    color:#0795ed; 
    font-size:clamp(1.0625rem,2.3vw,2rem); 
    font-weight:800; 
    text-decoration: underline;
    text-underline-offset: .3rem;
    transition: color 0.25s ease, transform 0.2s ease;
}

.claim-button:hover { 
    color: #ff801e; /* Fica Laranja no hover, igual antes */
    transform: translateY(-2px);
}

.claim-button:active { 
    transform: scale(0.96); 
}
.gift{font-size:1.4em}
.error{min-height:1.25rem;margin:0;text-align:center;color:#b52323;font-weight:bold}

/* Modais com cores invertidas */
.modal{position:fixed;z-index:3;inset:0;display:grid;place-items:center;padding:1.25rem;background:rgba(0,36,93,.45)}
.modal[hidden]{display:none}
.modal-card{width:min(24.375rem,100%);padding:2rem 1.625rem;border-radius:1.5rem;background:white;box-shadow:0 .75rem 2.1875rem rgba(0,36,93,.33);text-align:center;color:#063677}
.modal-gift{font-size:3rem}
.modal-card h1{margin:.625rem 0;font-size:1.6875rem}
.modal-card p{color:#315278;line-height:1.5}
.modal-card button{border:0;border-radius:99rem;padding:.8125rem 1.75rem;color:white;background:#ff801e;font-size:1rem;font-weight:bold;cursor:pointer}

.sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes float { 50% { transform:translateY(-.6875rem) rotate(48deg); } }

/* Layout Grid ajustado para melhor conexão */
@media (min-width: 62rem) and (min-height: 36rem) {
  .landing-page { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      grid-template-rows: auto auto; 
      align-content: center; 
      column-gap: 4rem; 
      row-gap: 2rem; 
      align-items: center; 
      padding-inline: 10%; 
  }
  .brand { grid-column: 1 / span 2; grid-row: 1; align-self: center; margin-bottom: 2rem; }
  .hero { grid-column: 1; grid-row: 2; align-self: center; justify-self: end; }
  .lead-form { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; }
}

@media (max-width: 37.5rem) { 
    .landing-page { padding-inline: 1rem; }
    .hero h1 { font-size:clamp(2rem,10.8vw,3.625rem); }
    .hero p { font-size:clamp(.9375rem,4.7vw,1.375rem); }
    .present { width:clamp(9.5rem,34vw,14rem); }
    .lead-form { width:100%; padding: 1.5rem; }
    .field input { padding-left:17%; }
    .icon { width:7%; }
    .terms { font-size:clamp(.8125rem,4vw,1.125rem); }
    .backdrop::before,.backdrop::after { opacity:.16; } 
}

/* Estilos Admin */
.admin-header {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.admin-btn {
    background: rgba(7, 149, 237, 0.1);
    border: 1px solid rgba(7, 149, 237, 0.3);
    color: #0795ed;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-btn:hover {
    background: #0795ed;
    color: white;
}

.admin-action-btn {
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: #0795ed;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.admin-table th, .admin-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.admin-table th {
    background: #f4f4f4;
    font-weight: bold;
}