/* ==========================================================
   PÁGINA CONFEITARIA  (folhas "Doces" e "Bolos")
   Todas as medidas da folha usam "cqw" (1% da largura da folha),
   então ela escala igual à arte original em qualquer tela.
========================================================== */
.conf-pagina {
    padding: calc(var(--altura-topo) + 30px) 16px 130px;
    --vinho: #7a2410;
    --terracota: #c0583b;
    --tinta: #241e1b;
}

/* ---------- abas Doces / Bolos ---------- */
.conf-abas {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 14px;
    width: fit-content;
    border: 1px solid var(--borda-dourada);
}
.conf-abas button {
    min-width: 130px;
    padding: 13px 30px;
    background: none;
    border: 0;
    color: var(--texto-suave);
    font: 500 12px var(--fonte-texto);
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .3s;
}
.conf-abas button[aria-selected="true"] { background: var(--dourado); color: var(--fundo); }
.conf-abas button:not([aria-selected="true"]):hover { color: var(--dourado); }

.conf-dica { text-align: center; color: var(--texto-apagado); font-size: 12px; margin-bottom: 26px; }

/* ---------- a folha ---------- */
.folha {
    container-type: inline-size;
    position: relative;
    width: min(100%, 700px);
    margin: 0 auto;
    aspect-ratio: 1131 / 1600;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: var(--tinta);
    font-family: 'Quicksand', sans-serif;
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
    animation: folha-entra .5s ease;
}
.folha[hidden] { display: none; }
.folha-doces { background-image: url("../img/confeitaria-doces.jpg"); background-color: #cfcdc9; }
.folha-bolos { background-image: url("../img/confeitaria-bolos.jpg"); background-color: #f0d9b8; }

@keyframes folha-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* moldura preta: cantos em "L" deslocados, como na arte */
.folha-quadro i { position: absolute; background: #17120f; }
.l-t { left: 9.7%;  top: 7.2%;  width: 46%; height: 2px; }
.l-l { left: 9.7%;  top: 7.2%;  width: 2px; height: 85.6%; }
.l-b { left: 9.7%;  top: 92.8%; width: 80.6%; height: 2px; }
.l-r { left: 90.3%; top: 31.9%; width: 2px; height: 61%; }

.folha-conteudo {
    position: relative;
    z-index: 2;
    margin: 0 12.5%;
    padding-top: 11%;
    padding-bottom: 12%;
    text-align: center;
}

/* logo da folha */
.f-logo {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "marca nome" "marca sub";
    align-items: center;
    justify-items: center;
    column-gap: 2.4cqw;
    margin: 0 0 4cqw -2cqw;
}
.f-marca { grid-area: marca; width: 13cqw; height: auto; }
.f-nome {
    grid-area: nome;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 6.4cqw;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--terracota);
    white-space: nowrap;
}
.f-sub {
    grid-area: sub;
    font-family: 'Dancing Script', cursive;
    font-weight: 500;
    font-size: 7.4cqw;
    line-height: 1.1;
    color: var(--terracota);
    margin-top: 1.2cqw;
}

.folha h2 {
    margin: 10cqw 0 3.4cqw;
    font-size: max(3.4cqw, 15px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vinho);
}
.folha h2:first-of-type { margin-top: 0; }

.folha h3 {
    margin: 7cqw 0 3.5cqw;
    font-size: max(2.1cqw, 12px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #15100d;
}

/* itens clicáveis */
.itens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .55em;
    row-gap: .1em;
    font-size: max(2.55cqw, 13px);
    line-height: 1.6;
    letter-spacing: .04em;
    font-weight: 500;
}

.it {
    background: none;
    border: 0;
    padding: 0 .1em;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: .35em;
    transition: color .2s, background .2s, box-shadow .2s;
}
.it:hover { color: var(--vinho); text-decoration: underline; text-underline-offset: .22em; }
.it:focus-visible, .sug:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }
.it[aria-pressed="true"], .sug[aria-pressed="true"] {
    color: #fff;
    background: var(--vinho);
    box-shadow: 0 0 0 .22em var(--vinho);
    text-decoration: none;
}

/* bolinha entre os itens */
.itens > .it::after, .itens > .it-grupo::after {
    content: "•";
    display: inline-block;
    margin-left: .55em;
    color: var(--tinta);
    text-decoration: none;
}
.itens > :last-child::after { display: none; }
.it[aria-pressed="true"]::after { color: #fff; }
.it-grupo .it::after { display: none; }

.folha-cta {
    display: inline-block;
    margin-top: 17cqw;
    font-size: max(2.1cqw, 12px);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #15100d;
    padding-bottom: .25em;
    border-bottom: 2px solid transparent;
    transition: .25s;
}
.folha-cta:hover { color: var(--vinho); border-bottom-color: var(--vinho); }

/* sugestões */
.sugestoes { position: relative; margin-top: 11cqw; }
.sugestoes h4 {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    font-size: max(5.8cqw, 24px);
    color: var(--vinho);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .12em;
    margin-bottom: 3cqw;
}
.sug-lista { display: flex; flex-direction: column; align-items: center; font-size: max(2.4cqw, 13px); letter-spacing: .04em; font-weight: 500; line-height: 1.6; }
.sug { background: none; border: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; padding: 0 .3em; border-radius: .35em; transition: .2s; }
.sug:hover { color: var(--vinho); text-decoration: underline; text-underline-offset: .22em; }

.estrela { position: absolute; display: block; }
.estrela svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.e1 { width: 7cqw;  height: 7cqw;  left: 6%;  top: 15%; animation: brilha 3.2s infinite; }
.e2 { width: 7cqw;  height: 7cqw;  right: 2%; top: 14%; animation: brilha 3.2s 1s infinite; }
.e3 { width: 3cqw;  height: 3cqw;  left: -1%; top: 36%; animation: brilha 3.2s .5s infinite; }
.e4 { width: 3cqw;  height: 3cqw;  right: 4%; top: 41%; animation: brilha 3.2s 1.5s infinite; }
.e5 { width: 3.6cqw; height: 3.6cqw; left: 8%; top: 56%; animation: brilha 3.2s 2s infinite; }
.e6 { width: 3.6cqw; height: 3.6cqw; right: -1%; top: 64%; animation: brilha 3.2s .8s infinite; }
@keyframes brilha { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.8) rotate(20deg); opacity: .75; } }

/* barra do pedido */
.pedido {
    position: fixed;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 900;
    width: min(calc(100% - 24px), 560px);
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 18px;
    background: rgba(17,16,14,.96);
    border: 1px solid var(--dourado);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
}
.pedido-info { flex: 1; font-size: 13px; color: var(--texto-suave); }
.pedido-info strong { color: var(--dourado); font-size: 18px; }
.pedido-limpar { background: none; border: 0; color: var(--texto-apagado); font: 500 11px var(--fonte-texto); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.pedido-limpar:hover { color: var(--dourado); }
.pedido-botao { padding: 12px 18px; background: var(--dourado); color: var(--fundo); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }

/* celular: a folha deixa de ter proporção fixa para o texto ficar legível */
@media (max-width: 600px) {
    .conf-pagina { padding-left: 10px; padding-right: 10px; }
    .folha { aspect-ratio: auto; background-size: cover; }
    .folha-conteudo { margin: 0 11%; padding-top: 16%; padding-bottom: 16%; }
    .l-l, .l-r { height: auto; }
    .folha-quadro { position: absolute; inset: 0; }
    .l-t { top: 3.5%; } .l-l { top: 3.5%; bottom: 3.5%; height: auto; }
    .l-b { top: auto; bottom: 3.5%; } .l-r { top: 22%; bottom: 3.5%; height: auto; }
    .f-nome { font-size: 6.8cqw; }
}