/* ReserveiAqui — estilos complementares ao Tailwind (CDN) */

:root {
    --ivory: #FBF8F4;
    --linen: #F4EDE5;
    --sand: #E8DCCD;
    --nude: #D9BBA7;
    --blush: #C99B87;
    --champagne: #B48E5A;
    --champagne-light: #D8BF94;
    --champagne-deep: #8A6634;
    --cocoa: #6B5347;
    --espresso: #2B221F;
}

/* Fundo: brilhos suaves + textura de grão */
.aura {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42rem 32rem at 88% -6%, rgba(217, 187, 167, .55), transparent 65%),
        radial-gradient(36rem 30rem at -8% 28%, rgba(216, 191, 148, .32), transparent 62%),
        radial-gradient(30rem 24rem at 60% 105%, rgba(201, 155, 135, .22), transparent 60%);
}
.aura::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selo "em construção" */
.pulse-dot {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: var(--champagne);
}
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
    from { transform: scale(1); opacity: .7; }
    to { transform: scale(3); opacity: 0; }
}

/* Contador */
.count-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.25rem;
    padding: .85rem .5rem .7rem;
    border: 1px solid var(--sand);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px -18px rgba(43, 34, 31, .35);
}
.count-num {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.35rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--espresso);
}
.count-label {
    margin-top: .35rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cocoa);
}
@media (min-width: 640px) {
    .count-box { min-width: 5.25rem; }
    .count-num { font-size: 2.75rem; }
}

/* Chips de segmento */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid var(--sand);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .6);
    font-size: .85rem;
    font-weight: 600;
    color: var(--espresso);
}
.chip svg { color: var(--champagne-deep); }
.chip-soon {
    border-style: dashed;
    background: transparent;
    color: var(--cocoa);
}

/* Formulário */
.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.seg-option {
    display: block;
    padding: .55rem .75rem;
    border-radius: 9999px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cocoa);
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.peer:checked + .seg-option {
    background: #fff;
    color: var(--espresso);
    box-shadow: 0 2px 8px -2px rgba(43, 34, 31, .18);
}
.peer:focus-visible + .seg-option {
    outline: 2px solid var(--champagne);
    outline-offset: 2px;
}
.field-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--espresso);
}
.field {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--sand);
    border-radius: .9rem;
    background: var(--ivory);
    font-size: .95rem;
    color: var(--espresso);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field::placeholder { color: rgba(107, 83, 71, .55); }
.field:hover { border-color: var(--nude); }
.field:focus {
    outline: none;
    border-color: var(--champagne);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(180, 142, 90, .16);
}
select.field:invalid { color: rgba(107, 83, 71, .65); }
.field[aria-invalid="true"] {
    border-color: #B5574B;
    box-shadow: 0 0 0 4px rgba(181, 87, 75, .12);
}
.field-error {
    display: none;
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 500;
    color: #A2483D;
}
.field-error.is-visible { display: block; }

.checkbox {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--espresso);
}

/* Botões */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 3.25rem;
    padding: 0 1.75rem;
    border-radius: 9999px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s, background-color .2s, box-shadow .2s, opacity .2s;
}
.btn-primary {
    color: var(--ivory);
    background: linear-gradient(180deg, #3A2E2A, var(--espresso));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 14px 28px -14px rgba(43, 34, 31, .55);
}
.btn-primary:hover { transform: translateY(-1px); background: linear-gradient(180deg, #45372F, #33282A); }
.btn-primary:disabled { cursor: progress; opacity: .75; transform: none; }
.btn-secondary {
    color: var(--espresso);
    border: 1px solid var(--sand);
    background: #fff;
}
.btn-secondary:hover { border-color: var(--nude); transform: translateY(-1px); }
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 3px;
}

.spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(251, 248, 244, .35);
    border-top-color: var(--ivory);
    border-radius: 9999px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.status-error { background: #F8E9E6; color: #8E3E34; }
.status-info { background: var(--linen); color: var(--cocoa); }

.success-badge { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop {
    from { transform: scale(.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Seção de recursos */
.feature {
    display: flex;
    gap: .9rem;
}
.feature strong {
    display: block;
    font-weight: 700;
    color: var(--espresso);
}
.feature p {
    margin-top: .2rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--cocoa);
}
.feature-dot {
    flex-shrink: 0;
    width: .55rem;
    height: .55rem;
    margin-top: .45rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--champagne-light), var(--champagne));
    box-shadow: 0 0 0 4px rgba(216, 191, 148, .25);
}

/* Prévia do app */
.slot {
    padding: .55rem 0;
    border: 1px solid var(--sand);
    border-radius: .75rem;
    color: var(--espresso);
}
.slot-off {
    border-color: transparent;
    background: var(--linen);
    color: rgba(107, 83, 71, .5);
    text-decoration: line-through;
}
.slot-on {
    border-color: var(--champagne);
    background: rgba(216, 191, 148, .25);
    color: var(--champagne-deep);
}

/* Modal de privacidade */
.dialog {
    width: min(34rem, calc(100% - 2rem));
    margin: auto;
    padding: 0;
    border: 1px solid var(--sand);
    border-radius: 1.75rem;
    background: var(--ivory);
    color: var(--espresso);
    box-shadow: 0 40px 80px -30px rgba(43, 34, 31, .45);
}
.dialog::backdrop {
    background: rgba(43, 34, 31, .45);
    backdrop-filter: blur(4px);
}

/* Entrada suave */
.reveal { animation: reveal .9s cubic-bezier(.2, .7, .2, 1) both; }
.reveal-delay { animation-delay: .15s; }
@keyframes reveal {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
