body {
    font-family: 'Inter', sans-serif;
    background-color: #fff5f7;
}
.handwritten {
    font-family: 'Caveat', cursive;
    color: #e0335f;
}
.gradient-bg {
    background: linear-gradient(135deg, #a01b42 0%, #ff5b81 100%);
}
.gradient-text {
    background: linear-gradient(135deg, #a01b42 0%, #ff5b81 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.wave-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C20 0, 40 20, 60 10 S100 0, 100 10 L100 20 L0 20 Z' fill='%23e0335f' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 120px 60px;
}
.music-note {
    position: absolute;
    opacity: 0.1;
    color: #e0335f;
    z-index: 0;
}
.card-shadow {
    box-shadow: 0 10px 30px rgba(224, 51, 95, 0.2);
}
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.modal-content {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.audio-wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q 5 5, 10 10 T 20 10 T 30 10 T 40 10 T 50 10 T 60 10 T 70 10 T 80 10 T 90 10 T 100 10' stroke='%23e0335f' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
}

/* New styles for play button effects */
.play-button {
    transition: all 0.3s ease;
    transform-origin: center;
}
.play-button.active {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 51, 95, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(224, 51, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 51, 95, 0); }
}

/* Background animation */
.wave-bg.playing {
    animation: waveMove 5s linear infinite;
}
@keyframes waveMove {
    0% { background-position: 0 0; }
    100% { background-position: 120px 0; }
}

/* Music note animation */
.music-note.animate {
    animation: floatNote 4s ease-out forwards;
}
@keyframes floatNote {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
    100% { transform: translateY(-100px) rotate(20deg); opacity: 0; }
}

/* Audio wave animation */
.audio-wave.playing {
    animation: waveAnimate 1s infinite alternate;
}
@keyframes waveAnimate {
    0% { background-size: 100px 20px; }
    100% { background-size: 100px 30px; }
}

/* Validation error styles */
.error-message {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
.error-border {
    border-color: #EF4444 !important;
}

/* Payment modal styles */
.payment-modal {
    max-width: 500px;
    width: 90%;
}
.audio-wave-preview {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q 5 5, 10 10 T 20 10 T 30 10 T 40 10 T 50 10 T 60 10 T 70 10 T 80 10 T 90 10 T 100 10' stroke='%23e0335f' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
}

.audio-wave-preview.playing {
    animation: waveAnimate 1s infinite alternate;
}

.play-button {
    transition: all 0.3s ease;
}

/* .play-button:hover removido: scale fica por conta do utilitario hover:scale-105 do Tailwind (corrige o pulo no hover) */
.example-slideshow {
    height: 160px;
    position: relative;
}

.example-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.example-slide.active {
    opacity: 1;
}


.example-indicator {
    transition: all 0.3s ease;
}

.example-indicator.active {
    background-color: #e0335f;
    transform: scale(1.3);
}

.example-prev,
.example-next {
    position: absolute;
    background-color: #fff;
    color: #e0335f;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 150ms;
    border: 1px solid #e5e7eb;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.example-prev:hover,
.example-next:hover {
    background-color: #fff5f8;
}

.example-prev {
    left: 8px; /* ajuste responsivo para mobile */
}

.example-next {
    right: 8px; /* ajuste responsivo para mobile */
}

@media (min-width: 768px) {
    .example-prev {
        left: 20px;
    }
    .example-next {
        right: 20px;
    }
}


.example-slideshow {
    height: 180px; /* Ajuste conforme necessário */
}

.fixed-button-container {
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Esconde o botão quando o modal estiver fechado */
#step2Content:not(.hidden) + .fixed-button-container {
    transform: translateY(0);
}

#step2Content.hidden + .fixed-button-container {
    transform: translateY(100%);
}

#lyricFeedback {
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

#lyricFeedback:focus {
    border-color: #e0335f;
    box-shadow: 0 0 0 3px rgba(224, 51, 95, 0.1);
}

#lyricFeedback:hover {
    border-color: #9ca3af;
}

/* Alternativa CSS sem GIF */
.custom-loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #e0335f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Texto cursivo legivel sobre o fundo gradiente vinho/rosa */
.gradient-bg .handwritten {
    color: #fff;
}

/* Tipografia alinhada a pagina principal: titulos em Fraunces (serif editorial) */
h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
}

/* variante-b: slideshow redesenhado em cards */
.example-slideshow { height: auto; position: relative; }
.example-slide { position: static; opacity: 1; width: auto; height: auto; display: none; }
.example-slide.active { display: block; animation: fadeIn .35s ease; }
.example-dot { width: 7px; height: 7px; border-radius: 9999px; background: #ffd9e3; border: none; padding: 0; cursor: pointer; transition: all .25s ease; }
.example-dot.active { background: #e0335f; width: 22px; }
/* botao play sem pulso */
.play-button.active { animation: none; }
.play-button { transition: transform .2s ease; }

/* variante-b: carrosseis arrastaveis */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.testimonial-carousel > article:first-child { margin-left: 0; }

/* ================= variante-b: componentes novos (CSS proprio, sem depender do build Tailwind) ================= */
.vb-scroller{display:flex;gap:16px;overflow-x:auto;padding:4px 16px 14px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
.vb-scroller::-webkit-scrollbar{display:none;}
.vb-scroller{-ms-overflow-style:none;scrollbar-width:none;}
.vb-scroller>*{scroll-snap-align:start;flex:0 0 auto;}
.vb-hint{text-align:center;font-size:.8rem;color:#a01b42;opacity:.55;margin-top:4px;}
.vb-hint i{font-size:.7rem;margin-right:4px;}

/* slideshow de exemplos */
.example-slideshow{height:auto;position:relative;}
.example-slide{display:none;}
.example-slide.active{display:block;animation:fadeIn .35s ease;}
.vb-slide-card{border-radius:16px;overflow:hidden;background:#fff;border:1px solid #ffd9e3;box-shadow:0 10px 26px -14px rgba(160,27,66,.3);}
.vb-slide-imgwrap{position:relative;background:#ffeef3;}
.vb-slide-img{width:100%;height:172px;object-fit:cover;display:block;}
.vb-slide-imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),transparent 55%);}
.vb-slide-genre{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.95);color:#e0335f;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.vb-slide-body{padding:16px;text-align:left;}
.vb-slide-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff5b81;}
.vb-slide-quote{font-size:14px;color:#5a3848;margin-top:5px;line-height:1.45;}
.vb-slide-foot{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid #ffd9e3;}
.vb-slide-foot i{color:#ff5b81;}
.vb-slide-title{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:700;color:#2a0a18;}
#playButton.vb-play{width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:86px;transform:translate(-50%,-50%);box-shadow:0 8px 22px -6px rgba(224,51,95,.65);cursor:pointer;z-index:3;border:3px solid #fff;color:#fff;transition:transform .2s ease;}
#playButton.vb-play:hover{transform:translate(-50%,-50%) scale(1.07);}
#playButton.vb-play svg{width:22px;height:22px;}
.vb-playrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;}
.vb-nav-btn{position:static;transform:none;left:auto;right:auto;top:auto;width:38px;height:38px;border-radius:999px;background:#fff;border:1px solid #ffd9e3;color:#e0335f;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(0,0,0,.2);cursor:pointer;transition:background .2s;}
.vb-nav-btn:hover{background:#ffeef3;}
.example-dots{display:flex;align-items:center;gap:6px;}
.example-dot{width:7px;height:7px;border-radius:999px;background:#ffd9e3;border:none;padding:0;cursor:pointer;transition:all .25s ease;}
.example-dot.active{background:#e0335f;width:22px;}
.play-button.active{animation:none;}

/* carrossel de depoimentos */
.vb-tcard{width:84vw;max-width:320px;background:#fff;border-radius:18px;padding:24px;box-shadow:0 16px 38px -18px rgba(160,27,66,.3);display:flex;flex-direction:column;}
.vb-quoteicon{color:#ffb3c6;font-size:26px;margin-bottom:6px;}
.vb-stars{color:#f5b301;font-size:13px;letter-spacing:1px;margin-bottom:10px;}
.vb-tcard>p{color:#5a3848;line-height:1.6;flex:1;margin-bottom:18px;font-size:15px;}
.vb-tfoot{display:flex;align-items:center;gap:12px;border-top:1px solid #f1e4ea;padding-top:14px;}
.vb-avatar{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:0 0 auto;}
.vb-tname{font-weight:700;color:#2a0a18;line-height:1.2;}
.vb-tcity{font-size:12px;color:#847a93;}

/* whatsapp */
.vb-wacard{width:80vw;max-width:300px;border-radius:18px;overflow:hidden;box-shadow:0 16px 38px -18px rgba(0,0,0,.32);border:1px solid #eee;background:#fff;}
.vb-wahead{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#075e54;color:#fff;}
.vb-waav{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;}
.vb-wahead b{font-size:14px;font-weight:600;display:block;line-height:1.2;}
.vb-wahead small{font-size:10px;color:#a7e0d4;}
.vb-wabody{display:flex;flex-direction:column;gap:6px;padding:14px 12px;background:#e5ddd5;min-height:178px;}
.wa-in,.wa-out{max-width:86%;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.36;box-shadow:0 1px 1px rgba(0,0,0,.12);color:#111;}
.wa-in{background:#fff;align-self:flex-start;border-top-left-radius:3px;}
.wa-out{background:#dcf8c6;align-self:flex-end;border-top-right-radius:3px;}
.wa-audio{align-self:flex-end;display:flex;align-items:center;gap:8px;background:#dcf8c6;padding:8px 10px;border-radius:10px;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.12);}
.wa-pp{width:26px;height:26px;border-radius:999px;background:#e0335f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex:0 0 auto;}
.wa-wave{display:flex;align-items:flex-end;gap:2px;height:16px;}
.wa-wave span{width:2px;background:#9fb89a;border-radius:2px;}
.wa-audio time{font-size:10px;color:#5a6b55;}

/* CTA final */
.vb-cta-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 16px;border-radius:999px;margin-bottom:18px;}
.vb-cta-btn{background:#fff;color:#e0335f;padding:16px 40px;border-radius:999px;font-weight:700;font-size:18px;box-shadow:0 14px 32px -10px rgba(0,0,0,.4);transition:transform .2s ease;display:inline-block;}
.vb-cta-btn:hover{transform:scale(1.05);}
.vb-cta-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:30px;font-size:14px;opacity:.95;}

/* variante-b: pulsadinha de leve no play ao clicar em "Ouça este Exemplo" */
@keyframes vbSoftPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); box-shadow: 0 8px 22px -6px rgba(224,51,95,.65); }
  50% { transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 0 0 14px rgba(224,51,95,.12), 0 8px 22px -6px rgba(224,51,95,.65); }
}
#playButton.vb-play.pulse-hint { animation: vbSoftPulse .85s ease-in-out 3; }

/* variante-b: FAQ */
.vb-faq { display: flex; flex-direction: column; gap: 12px; }
.vb-faq-item { background: #fff; border: 1px solid #ffd9e3; border-radius: 14px; overflow: hidden; }
.vb-faq-item summary { cursor: pointer; padding: 16px 18px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px; color: #2a0a18; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.vb-faq-item summary::-webkit-details-marker { display: none; }
.vb-faq-item summary::after { content: "+"; font-size: 22px; color: #e0335f; flex: 0 0 auto; line-height: 1; }
.vb-faq-item[open] summary::after { content: "\2212"; }
.vb-faq-item p { padding: 0 18px 16px; color: #5a3848; line-height: 1.6; font-size: 14px; }

/* variante-b: botoes principais de CTA em verde (igual a pagina principal v4) */
.vb-btn-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 14px 32px -14px rgba(16,185,129,.55), 0 4px 12px -4px rgba(16,185,129,.3);
  transition: transform .2s ease, background .25s ease;
}
.vb-btn-green:hover { transform: scale(1.03); background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }

/* ================= variante-b: cores/fontes alinhadas com a pagina principal (v4) ================= */
/* fundo claro quente igual as section--light da v4 */
body { background: linear-gradient(180deg, #fff8f9 0%, #ffeef3 100%); color: #2a0a18; }
/* titulos em vinho profundo, igual .section-title da v4 (wine-900) */
h1, h2, h3 { color: #6b0f2a; }
/* secoes "cinza" passam a um blush quente (v4 nao usa cinza) */
.bg-gray-50 { background-color: #fff5f8; }
/* textos de corpo nos tons quentes da v4 (ink / ink-soft) em vez de cinza neutro */
.text-gray-500 { color: #8a7286; }
.text-gray-600, .text-gray-700 { color: #5a3848; }
.text-gray-800, .text-gray-900 { color: #2a0a18; }

/* ================= variante-b: modal de criacao = identidade do CHECKOUT escuro (vinho) ================= */
#modal.modal-overlay { background: rgba(10,2,6,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* card do modal = gradiente vinho escuro (igual --bg-grad do checkout) */
#modal .modal-content {
  background:
    radial-gradient(ellipse 70% 14% at 78% 32%, rgba(196,36,89,.32) 0%, transparent 65%),
    radial-gradient(ellipse 80% 14% at 30% 64%, rgba(160,27,66,.38) 0%, transparent 65%),
    linear-gradient(180deg,#6b0f2a 0%,#5a0c24 30%,#6b0f2a 60%,#3d0817 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 20px;
}
/* texto claro por padrao dentro do modal */
#modal .modal-content, #modal h3, #modal h4, #modal p, #modal span, #modal label, #modal strong, #modal li, #modal a { color: #fff; }
#modal .text-gray-400, #modal .text-gray-500, #modal .text-gray-600, #modal .text-gray-700, #modal .text-gray-800, #modal .text-gray-900 { color: rgba(255,255,255,.66) !important; }

/* header = faixa mais escura */
#modal .modal-content > div:first-child {
  background: rgba(61,8,23,.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#modal h3 { font-family: 'Fraunces', Georgia, serif; color: #fff !important; }
#modal #closeModalBtn { color: rgba(255,255,255,.6) !important; }
#modal #closeModalBtn:hover { color: #fff !important; }

/* faixa dos passos 1-2-3 = tambem escura, sangrando ate a borda */
#modal div:has(> .step-indicator) {
  background: rgba(61,8,23,.97);
  margin: -1rem -1rem 1.5rem;
  padding: 1.25rem 1rem 1.1rem;
}
#modal .step-indicator .bg-purple-600 { background: #ff6b9d !important; color: #fff !important; box-shadow: 0 0 14px rgba(255,107,157,.45); }
#modal .step-indicator .bg-gray-200 { background: rgba(255,255,255,.09) !important; }
#modal .step-indicator span { color: rgba(255,255,255,.6) !important; }

/* labels */
#modal label { color: rgba(255,255,255,.88) !important; font-weight: 600; }

/* superficies claras -> superficie escura translucida */
#modal .bg-white:not(.modal-content), #modal .bg-gray-50, #modal .bg-gray-100 { background: rgba(255,255,255,.06) !important; }
#modal .bg-green-50 { background: rgba(16,185,129,.12) !important; }
#modal [class*="bg-yellow"] { background: rgba(251,191,36,.12) !important; }
#modal .border-gray-100, #modal .border-gray-200, #modal .border-gray-300 { border-color: rgba(255,255,255,.12) !important; }

/* campos */
#modal input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#modal select, #modal textarea {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
#modal input::placeholder, #modal textarea::placeholder { color: rgba(255,255,255,.42) !important; }
#modal input:focus, #modal select:focus, #modal textarea:focus {
  outline: none !important;
  border-color: #ff6b9d !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
#modal select option { background: #3d0817; color: #fff; }
#modal input[type="radio"], #modal input[type="checkbox"] { accent-color: #ff6b9d; }

/* area da letra = superficie escura, texto claro (igual .lyric-box do checkout) */
#modal #generatedLyrics {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.9) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* botoes primarios = verde (igual .ck-btn do checkout) */
#modal #nextStepBtn, #modal #goToPaymentBtn, #modal #btnFinalizarPagamento {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
  color: #fff !important;
  border: 0 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
  box-shadow: 0 14px 32px -8px rgba(16,185,129,.5) !important;
}
/* botoes secundarios = ghost escuro */
#modal #regenerateLyricsBtn, #modal #backToStep1Btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.88) !important;
}

/* selecao de pagamento */
#modal .payment-method-btn { background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(255,255,255,.13) !important; border-radius: 12px; }
#modal .payment-method-btn.active { border-color: #ff6b9d !important; background: rgba(255,107,157,.12) !important; }
#modal .payment-method-btn .method-icon { color: #ff6b9d !important; }
/* superficies claras restantes do modal (lyric wrapper, barras de botao sticky) */
#modal .bg-purple-50, #modal .bg-pink-50 { background: rgba(255,255,255,.06) !important; }
#modal .step2-sticky-buttons, #modal .fixed-payment-buttons, #modal .fixed-button-container, #modal .step3-sticky-buttons {
  background: rgba(61,8,23,.98) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.45) !important;
}
/* textos em tom vinho/rosa dentro do modal escuro -> rosa claro legivel */
#modal .text-purple-400, #modal .text-purple-500, #modal .text-purple-600, #modal .text-purple-700,
#modal .text-pink-500, #modal .text-pink-600, #modal .text-pink-700 { color: #ffb3c6 !important; }
/* caixas claras restantes do modal (preco, infos azuis/verdes/vermelhas) -> superficie escura */
#modal .price-box-new { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; }
#modal .bg-blue-50, #modal .bg-red-100 { background: rgba(255,255,255,.06) !important; }
#modal .bg-green-100, #modal .bg-green-200 { background: rgba(16,185,129,.14) !important; }
#modal .audio-wave-preview { background-color: rgba(255,255,255,.06) !important; }
#modal .border-blue-200 { border-color: rgba(147,197,253,.3) !important; }
#modal .text-blue-700, #modal .text-blue-800, #modal .text-blue-900 { color: #93c5fd !important; }
#modal .text-green-600, #modal .text-green-700, #modal .text-green-800 { color: #34d399 !important; }