:root {
    --vinho: #870b0a;
    --vinho-claro: #c51a10;
    --musgo: #344034;
    --musgo-claro: #59654d;
    --ouro: #d5b86e;
    --ouro-claro: #efd58f;
    --marfim: #f5efe5;
    --texto: #ded3c0;
    --sombra: rgba(10, 3, 6, .62);
    --fundo-campo: rgba(6, 3, 4, .28);
    --fonte-editorial: "Bodoni Moda", Didot, "Bodoni MT", "Bodoni 72", Georgia, serif;
    --fonte-interface: "Trebuchet MS", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--vinho);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--marfim);
    font-family: var(--fonte-interface);
    letter-spacing: .015em;
    background:
        radial-gradient(
            circle at 50% 45%,
            transparent 16%,
            rgba(20, 0, 3, .5) 100%
        ),
        repeating-linear-gradient(
            112deg,
            rgba(255, 255, 255, .02) 0 1px,
            transparent 1px 7px
        ),
        radial-gradient(
            ellipse at 28% 18%,
            rgba(226, 45, 24, .62),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #9f0c08,
            #650306 55%,
            #981009
        );
}

button,
input,
textarea {
    font: inherit;
}

a {
    color: var(--ouro-claro);
}

h1,
h2,
h3 {
    font-family: var(--fonte-editorial);
    font-weight: 500;
    -webkit-text-stroke: .18px currentColor;
    text-shadow: 0 0 .01px currentColor;
}

.experiencia {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
}

.painel-cliente {
    --largura-chave: 219px;
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(1.75rem, 6vh, 3.5rem) 1.5rem 5rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--marfim);
    text-align: center;
    background:
        repeating-linear-gradient(
            98deg,
            rgba(255, 255, 255, .018) 0 1px,
            transparent 1px 5px
        ),
        repeating-linear-gradient(
            12deg,
            rgba(65, 0, 0, .025) 0 2px,
            transparent 2px 11px
        ),
        radial-gradient(
            ellipse at center,
            transparent 24%,
            rgba(28, 0, 4, .52) 100%
        ),
        radial-gradient(
            ellipse at 26% 12%,
            rgba(239, 51, 27, .48),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 76% 72%,
            rgba(55, 0, 4, .6),
            transparent 42%
        ),
        linear-gradient(
            155deg,
            #a60d08,
            #6f0407 52%,
            #9e1009
        );
    box-shadow: inset 0 0 9rem rgba(53, 0, 4, .48);
}

.marca span,
h1 em {
    color: var(--ouro);
}

h1 {
    max-width: 13ch;
    margin: clamp(1rem, 3vh, 1.7rem) auto
        clamp(1.25rem, 3.8vh, 2.2rem);
    font-size: clamp(2.2rem, 8.5vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: .005em;
}

h1 em {
    font-weight: 400;
}

.voltar-experiencia {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    margin: -.5rem 0 1rem;
    padding: .45rem;
    color: var(--ouro-claro);
    font-size: .72rem;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.abertura-conteudo {
    width: min(100%, 28rem);
    text-align: center;
}

.apresentacao {
    display: grid;
    gap: .15rem;
    width: 100%;
    margin: 0 0 clamp(2rem, 7vh, 3.4rem);
    color: var(--ouro-claro);
    font-family: var(--fonte-editorial);
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.18;
    text-align: center;
    -webkit-text-stroke: .12px currentColor;
}

.parceria {
    white-space: nowrap;
}

.chamada-abertura {
    width: 100%;
    max-width: none;
    margin: 0 0 clamp(2rem, 7vh, 3.4rem);
    font-size: clamp(1.85rem, 8.2vw, 2.25rem);
    line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
}

.sobrelinha {
    margin-bottom: .7rem;
    color: var(--ouro-claro);
    font-size: .68rem;
    font-weight: bold;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.introducao {
    max-width: 34rem;
    margin-right: auto;
    margin-left: auto;
    color: var(--marfim);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.18rem, 2.7vw, 1.4rem);
    line-height: 1.62;
    letter-spacing: .045em;
    text-align: center;
    white-space: pre-line;
}

.formulario {
    display: grid;
    gap: .85rem;
    width: 100%;
    max-width: 28rem;
    margin-top: 1.5rem;
}

.painel-cliente .formulario {
    justify-items: center;
}

.formulario label,
.grade-form label,
legend {
    color: var(--texto);
    font-size: .78rem;
    letter-spacing: .07em;
}

input,
textarea {
    width: 100%;
    padding: .95rem 1rem;
    color: var(--marfim);
    border: 1px solid rgba(181, 150, 91, .42);
    border-radius: 3px;
    outline: none;
    background: rgba(6, 3, 4, .28);
}

input:focus,
textarea:focus {
    border-color: var(--ouro-claro);
    box-shadow: 0 0 0 3px rgba(181, 150, 91, .16);
}

button {
    min-height: 50px;
    padding: 1rem 1.3rem;
    color: #1c100b;
    font-weight: bold;
    letter-spacing: .08em;
    border: 1px solid var(--ouro);
    border-radius: 3px;
    background:
        linear-gradient(
            135deg,
            var(--ouro-claro),
            var(--ouro)
        );
    cursor: pointer;
}

button:hover {
    filter: brightness(1.08);
}

.painel-cliente button:not(.botao-texto) {
    min-height: auto;
    margin-top: 1rem;
    padding: .35rem 1rem;
    color: var(--ouro-claro);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.45rem, 4vw, 1.7rem);
    font-weight: 500;
    border: 0;
    background: transparent;
}

.painel-cliente button:not(.botao-texto):focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 5px;
}

.grupo-codigo {
    min-width: 0;
    margin: 0 0 .3rem;
    padding: 0;
    border: 0;
}

.grupo-codigo legend {
    margin-bottom: .65rem;
}

.painel-cliente .rotulo-codigo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.lacunas {
    display: flex;
    justify-content: center;
    gap: 13px;
}

.lacuna {
    flex: 0 0 45px;
    width: 45px;
    height: 47px;
    padding: 2px;
    color: var(--marfim);
    font-family: var(--fonte-editorial);
    font-size: 1.6rem;
    text-align: center;
    border: 3px solid #765923;
    border-radius: 1px;
    background: var(--fundo-campo);
    box-shadow:
        inset 0 0 .65rem rgba(67, 15, 29, .16),
        0 4px 12px rgba(14, 1, 5, .14);
}

.acesso-inicial {
    margin-top: 0;
}

.acesso-inicial legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dica-inversao {
    width: min(100%, 23rem);
    margin: .55rem 0 0;
    color: var(--marfim);
    font-family: var(--fonte-editorial);
    font-size: 1.12rem;
    line-height: 1.48;
    letter-spacing: .05em;
}

.texto-em-linhas span {
    display: block;
}

.mensagem {
    max-width: 30rem;
    margin: .15rem 0 0;
    padding: .5rem .75rem;
    border-left: 2px solid var(--ouro);
    background: rgba(255, 255, 255, .05);
    font-size: .82rem;
}

.mensagem.erro {
    border-color: #ce6c6c;
}

.progresso {
    width: min(22rem, 80%);
    height: 1px;
    margin: 0 0 clamp(1rem, 3vh, 1.7rem);
    background: rgba(181, 150, 91, .2);
}

.progresso span {
    display: block;
    width: var(--progresso);
    height: 100%;
    background: var(--ouro);
    transition: width .5s;
}

.segredo-texto {
    width: min(100%, 28rem);
    max-width: 100%;
    margin: .1rem auto .7rem;
    color: var(--marfim);
    font-size: clamp(1.28rem, 5.5vw, 1.75rem);
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
}

.formulario-segredo {
    max-width: 240px;
    margin-top: .5rem;
}

.campo-segredo {
    width: 100%;
    padding: .65rem .8rem;
    font-family: var(--fonte-editorial);
    font-size: 1.35rem;
    letter-spacing: .06em;
    text-align: center;
    background: var(--fundo-campo);
}

.revelacao-final {
    display: flex;
    width: min(100%, 34rem);
    flex-direction: column;
    align-items: center;
}

.revelacao-final h1 {
    margin-top: 0;
    margin-bottom: clamp(1rem, 3vh, 1.7rem);
}

.revelacao-final .introducao {
    max-width: 31rem;
    margin-top: 0;
    margin-bottom: .65rem;
}

.arte-chave {
    display: block;
    width: clamp(68px, 10vh, 92px);
    height: auto;
    max-height: 24vh;
    margin: .1rem auto .35rem;
    object-fit: contain;
}

.codigo-final {
    display: block;
    width: 92px;
    margin: .75rem auto;
    padding: 0;
    color: var(--ouro-claro);
    font:
        500 clamp(2rem, 8vw, 2.65rem) / 1
        var(--fonte-editorial);
    letter-spacing: .08em;
    text-align: center;
    border: 0;
    background: transparent;
    text-shadow: 0 5px 22px rgba(29, 2, 9, .55);
}

.sair {
    margin-top: clamp(.5rem, 1.5vh, 1rem);
}

.voltar-etapa {
    margin-top: clamp(.35rem, 1vh, .7rem);
}

.voltar-etapa + .sair {
    margin-top: .2rem;
}

.botao-texto {
    min-height: auto;
    padding: .25rem;
    color: #b9aa96;
    border: 0;
    background: transparent;
    font-size: .82rem;
    text-decoration: underline;
}

.data-visita {
    color: var(--ouro);
}

.rodape-marca {
    position: absolute;
    right: 1rem;
    bottom: max(
        2.75rem,
        calc(env(safe-area-inset-bottom) + 1.5rem)
    );
    left: 1rem;
    display: grid;
    gap: .22rem;
    color: var(--ouro-claro);
    font-family: var(--fonte-editorial);
    font-size: .9rem;
    letter-spacing: .12em;
    line-height: 1.15;
    text-align: center;
}

.rodape-marca small {
    color: var(--marfim);
    font-family: var(--fonte-interface);
    font-size: .74rem;
    letter-spacing: .09em;
}

/* ==========================================================
   MENU GASTRONÔMICO DA EXPERIÊNCIA
   ========================================================== */

.menu-experiencia {
    width: min(100%, 42rem);
    margin: 0 auto clamp(1.7rem, 5vh, 2.8rem);
    color: var(--marfim);
    text-align: center;
}

.menu-etapa {
    margin: 0 0 .7rem;
    color: var(--ouro-claro);
    font-family: var(--fonte-interface);
    font-size: clamp(.75rem, 2.8vw, .88rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.menu-titulo {
    max-width: 27ch;
    margin: 0 auto clamp(1.5rem, 4vh, 2.2rem);
    color: var(--marfim);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.85rem, 7.4vw, 2.65rem);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: .01em;
    text-wrap: balance;
}

.menu-titulo span {
    display: inline-block;
    margin: 0 .12em;
    color: var(--ouro);
    font-weight: 400;
}

.menu-titulo small {
    display: inline;
    color: var(--texto);
    font: inherit;
    font-size: .66em;
}

.menu-abertura {
    max-width: 35rem;
    margin: 0 auto clamp(2.2rem, 6vh, 3.2rem);
    color: var(--texto);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.18rem, 4.5vw, 1.45rem);
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: .012em;
    text-wrap: pretty;
}

.menu-abertura p {
    margin: 0;
}

.menu-abertura p + p {
    margin-top: .5rem;
}

.menu-harmonizacoes {
    display: grid;
    gap: clamp(2.25rem, 7vh, 3.6rem);
    width: 100%;
    max-width: 39rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: harmonizacao;
}

.menu-harmonizacoes li {
    counter-increment: harmonizacao;
}

.menu-sensacao {
    margin: 0 0 .42rem;
    color: var(--ouro-claro);
    font-family: var(--fonte-interface);
    font-size: clamp(.76rem, 2.9vw, .9rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.menu-sensacao::before {
    content:
        counter(harmonizacao, decimal-leading-zero)
        " · ";
}

.menu-prato {
    max-width: 30ch;
    margin: 0 auto;
    color: var(--marfim);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.5rem, 5.8vw, 1.95rem);
    font-weight: 500;
    line-height: 1.23;
    letter-spacing: .005em;
    text-wrap: balance;
    -webkit-text-stroke: .12px currentColor;
    text-shadow: 0 0 .01px currentColor;
}

.menu-explicacao {
    max-width: 35rem;
    margin: .75rem auto 0;
    color: var(--texto);
    font-family: var(--fonte-editorial);
    font-size: clamp(1.08rem, 4vw, 1.27rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.56;
    letter-spacing: .012em;
    text-wrap: pretty;
}

.menu-prato-unico {
    margin-bottom: clamp(1.5rem, 4vh, 2.4rem);
}

.menu-prato-unico .menu-titulo {
    margin-bottom: .35rem;
}

.menu-harmonizacao-unica {
    margin: 0;
}

.menu-harmonizacao-unica .menu-prato {
    max-width: 34ch;
}

.menu-harmonizacao-unica .menu-explicacao {
    margin-top: .8rem;
}

.dica-etapa {
    width: min(100%, 32rem);
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
    margin-bottom: .8rem;
    color: var(--ouro-claro);
    font-size: clamp(1.22rem, 4.6vw, 1.52rem);
    font-style: normal;
    line-height: 1.48;
    letter-spacing: .035em;
    text-shadow: 0 2px 16px rgba(34, 3, 6, .32);
}

.dica-etapa.segredo-texto {
    color: var(--ouro-claro);
    font-size: clamp(1.28rem, 5.5vw, 1.75rem);
}

.menu-experiencia + .dica-etapa {
    padding-top: clamp(1.2rem, 4vh, 2rem);
    border-top: 1px solid rgba(213, 184, 110, .28);
}

.painel-cliente:has(.menu-experiencia) {
    padding-bottom: 4rem;
}

.painel-cliente:has(.menu-experiencia) .rodape-marca {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: clamp(2.2rem, 6vh, 3.5rem);
}

/* ==========================================================
   PAINEL ADMINISTRATIVO
   ========================================================== */

.corpo-admin {
    color: var(--marfim);
    background:
        radial-gradient(
            circle at 10% 0,
            #5b1826,
            transparent 35rem
        ),
        linear-gradient(
            145deg,
            #16080d,
            #260d15 58%,
            #172017
        );
}

.admin {
    max-width: 1180px;
    margin: auto;
    padding: 1.5rem;
}

.admin-login {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
}

.admin-login .cartao-admin {
    width: min(100%, 430px);
    margin: 0;
}

.voltar-painel {
    position: fixed;
    z-index: 10;
    top: max(1rem, env(safe-area-inset-top));
    left: 1rem;
    padding: .45rem;
    color: var(--ouro-claro);
    font-size: .72rem;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.cabecalho-admin,
.titulo-detalhes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cabecalho-admin {
    margin-bottom: 1rem;
}

.cabecalho-admin h1 {
    max-width: none;
    margin: .2rem 0;
    color: var(--marfim);
    font-size: clamp(2rem, 6vw, 3.4rem);
}

.cartao-admin {
    margin-bottom: 1rem;
    padding: 1.3rem;
    border: 1px solid rgba(181, 150, 91, .3);
    border-radius: 5px;
    background: rgba(27, 12, 17, .82);
    box-shadow: 0 16px 40px rgba(5, 2, 3, .28);
    backdrop-filter: blur(5px);
}

.cartao-admin h2 {
    margin-top: 0;
    color: var(--marfim);
}

.cartao-admin .formulario {
    max-width: none;
    margin-top: 0;
}

.estreito {
    max-width: 430px;
}

.grade-admin,
.grade-form {
    display: grid;
    gap: 1rem;
}

.grade-form label {
    display: grid;
    gap: .45rem;
}

.campo-largo {
    grid-column: 1 / -1;
}

.cartao-admin input,
.cartao-admin textarea {
    color: var(--marfim);
    background: rgba(5, 3, 4, .3);
}

.destaque {
    border-left: 4px solid var(--ouro);
}

.codigos-criados {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(130px, 1fr));
    gap: .6rem;
}

.codigos-criados div {
    padding: .8rem;
    border-left: 2px solid var(--musgo-claro);
    background: rgba(52, 64, 52, .3);
}

.codigos-criados dt {
    color: #bfb29d;
    font-size: .7rem;
}

.codigos-criados dd {
    margin: .2rem 0;
    color: var(--ouro-claro);
    font: 1.5rem var(--fonte-editorial);
    letter-spacing: .12em;
}

.tabela-responsiva {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th,
td {
    padding: .9rem .8rem;
    border-bottom:
        1px solid rgba(181, 150, 91, .2);
    vertical-align: middle;
}

th {
    color: #b7a992;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

td a {
    color: var(--marfim);
    text-decoration: none;
}

.linha-cliente {
    cursor: pointer;
}

.linha-cliente:hover,
.linha-cliente:focus {
    outline: none;
    background: rgba(52, 64, 52, .32);
}

.codigo-lista {
    color: var(--ouro-claro);
    font-family: var(--fonte-editorial);
    font-size: 1.12rem;
    letter-spacing: .12em;
}

.estado {
    display: inline-block;
    padding: .38rem .62rem;
    color: #e9e3d7;
    border: 1px solid rgba(113, 130, 96, .45);
    border-radius: 2rem;
    background: rgba(52, 64, 52, .55);
    font-size: .72rem;
    white-space: nowrap;
}

.detalhes-cliente {
    scroll-margin-top: 1rem;
    border-color: rgba(181, 150, 91, .55);
}

.titulo-detalhes h2 {
    margin-bottom: .5rem;
}

.codigos-detalhes {
    margin: 1rem 0 1.5rem;
}

.zona-exclusao {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top:
        1px solid rgba(206, 108, 108, .25);
}

.zona-exclusao p {
    color: #cbbcac;
    font-size: .82rem;
}

.botao-perigo {
    color: #fff;
    border-color: #93434b;
    background: #70232d;
}

.linha-usuario {
    max-width: none;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom:
        1px solid rgba(181, 150, 91, .2);
}

/* ==========================================================
   TELAS MAIORES
   ========================================================== */

@media (min-width: 768px) {
    .painel-cliente {
        width: min(100%, 960px);
        min-height: min(860px, 100svh);
        margin: 0 auto;
        padding:
            clamp(2.5rem, 7vh, 4.5rem)
            4rem
            5.5rem;
        justify-content: flex-start;
        box-shadow:
            inset 0 0 9rem rgba(53, 0, 4, .48),
            0 0 5rem rgba(30, 0, 3, .42);
    }

    .abertura-conteudo {
        width: min(100%, 34rem);
    }

    .apresentacao {
        font-size: 1.4rem;
    }

    .chamada-abertura {
        font-size: 2.55rem;
    }

    .formulario {
        margin-right: auto;
        margin-left: auto;
    }

    .revelacao-final .introducao {
        font-size: 1.18rem;
    }

    .arte-chave {
        width: 92px;
    }

    .menu-experiencia {
        width: min(100%, 44rem);
    }

    .menu-harmonizacoes {
        max-width: 40rem;
    }

    .menu-prato {
        font-size: clamp(1.65rem, 3vw, 2rem);
    }

    .menu-explicacao {
        font-size: clamp(1.12rem, 1.9vw, 1.3rem);
    }

    .menu-abertura {
        font-size: clamp(1.22rem, 2vw, 1.45rem);
    }

    .grade-admin {
        grid-template-columns: .8fr 1.2fr;
    }

    .grade-form {
        grid-template-columns: 1fr 1fr;
    }

    .codigos-criados {
        grid-template-columns:
            repeat(auto-fit, minmax(130px, 1fr));
    }

    .linha-usuario {
        grid-template-columns:
            1.4fr 1fr auto auto;
        align-items: end;
    }
}

/* ==========================================================
   CELULARES
   ========================================================== */

@media (max-width: 480px) {
    .painel-cliente:has(.menu-experiencia) {
        padding-right: 1.15rem;
        padding-left: 1.15rem;
    }

    .menu-titulo {
        font-size: clamp(1.75rem, 7.5vw, 2.05rem);
    }

    .menu-prato {
        max-width: 25ch;
    }

    .menu-explicacao {
        max-width: 29rem;
    }
}

@media (max-height: 650px) {
    .painel-cliente {
        padding-top: 1.65rem;
    }

    h1 {
        margin-top: .7rem;
        margin-bottom: 1rem;
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .apresentacao,
    .chamada-abertura {
        margin-bottom: 1.7rem;
    }

    .formulario {
        margin-top: .75rem;
        gap: .55rem;
    }

    .progresso {
        margin-bottom: .8rem;
    }

    .introducao {
        margin: .45rem auto;
        line-height: 1.4;
    }

    .sair {
        margin-top: .5rem;
    }

    .arte-chave {
        width: 56px;
        max-height: 18vh;
    }

    .rodape-marca {
        bottom: max(
            2rem,
            calc(env(safe-area-inset-bottom) + 1rem)
        );
    }

    .menu-experiencia {
        margin-bottom: 1.5rem;
    }

    .menu-harmonizacoes {
        gap: 1.9rem;
    }

    .menu-abertura {
        margin-bottom: 1.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}