/* ============================================================
   RIPPLE RESINAS — estilo
   Paleta: azul-turquesa do mar, areia, pérola e ouro.
   ============================================================ */

:root {
    --turquesa: #0a5f69;
    --turquesa-escuro: #063f47;
    --turquesa-medio: #0a6a74;
    --espuma: #d3ecee;
    --areia: #f1ebe1;
    --perola: #faf7f2;
    --ouro: #a8844e;
    --ouro-claro: #cfb07a;
    --tinta: #162a2e;
    --nevoa: #5a6d71;
    --linha: rgba(10, 95, 105, .14);
    --linha-forte: rgba(10, 95, 105, .32);
    --erro: #9b3d28;

    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

    --largura: 1180px;
    --respiro: clamp(64px, 10vw, 128px);
    --arco: 999px 999px 0 0;
    --suave: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--perola);
    color: var(--tinta);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; color: var(--turquesa); }
em { font-style: italic; color: var(--ouro); }
p { margin: 0 0 1em; }

.sobretitulo {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: 18px;
}
.titulo { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 22px; }
.centro { text-align: center; margin-top: 48px; }

/* ---------- botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .35s var(--suave), color .35s var(--suave), border-color .35s var(--suave), transform .35s var(--suave);
}
.btn:hover { transform: translateY(-2px); }
.btn--cheio { background: var(--turquesa); color: var(--perola); }
.btn--cheio:hover { background: var(--turquesa-escuro); }
.btn--linha { background: transparent; color: var(--turquesa); border-color: var(--turquesa); }
.btn--linha:hover { background: var(--turquesa); color: var(--perola); }
.btn--claro { background: var(--perola); color: var(--turquesa); }
.btn--claro:hover { background: var(--ouro-claro); color: var(--turquesa-escuro); }
.btn--linha-clara { background: transparent; color: var(--perola); border-color: rgba(250, 247, 242, .55); }
.btn--linha-clara:hover { background: var(--perola); color: var(--turquesa); }

.link-seta {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--turquesa);
    border-bottom: 1px solid var(--ouro);
    padding-bottom: 4px;
    transition: color .3s;
}
.link-seta::after { content: " →"; }
.link-seta:hover { color: var(--ouro); }

/* ---------- ondas ---------- */
.onda { display: block; width: 100%; height: 60px; }

/* ---------- cabeçalho ---------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topo__marca img { width: 128px; height: auto; }
.menu { display: flex; align-items: center; gap: 36px; }
.menu a {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--turquesa);
    position: relative;
    padding: 6px 0;
}
.menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--ouro);
    transform: scaleX(0);
    transition: transform .35s var(--suave);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu__insta { display: inline-flex; align-items: center; gap: 8px; }
.menu__insta span { display: none; }
.topo__menu-btn { display: none; }

/* ---------- hero ---------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 85% 10%, var(--turquesa-medio) 0%, transparent 60%),
        linear-gradient(180deg, var(--turquesa) 0%, var(--turquesa-escuro) 100%);
    color: var(--perola);
    overflow: hidden;
}
.hero__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 110px) 24px clamp(120px, 14vw, 170px);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 64px;
}
.hero h1 { color: var(--perola); font-size: clamp(46px, 6.6vw, 86px); font-weight: 400; margin-bottom: 26px; }
.hero h1 em { color: var(--ouro-claro); }
.hero__sub { font-size: 18px; max-width: 460px; color: var(--espuma); margin-bottom: 38px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .sobretitulo { color: var(--ouro-claro); }
.hero__foto { margin: 0; justify-self: end; width: 100%; max-width: 400px; position: relative; }
.hero__foto::before {
    content: "";
    position: absolute;
    inset: -14px -14px 14px 14px;
    border: 1px solid rgba(207, 176, 122, .5);
    border-radius: var(--arco);
}
.hero__foto img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--arco);
}
.hero__ondas { position: absolute; left: 0; right: 0; bottom: -1px; height: 80px; }
.hero__ondas .onda { position: absolute; bottom: 0; left: 0; width: 200%; height: 80px; }
.onda--1 { fill: rgba(250, 247, 242, .18); animation: mare 16s linear infinite; }
.onda--2 { fill: var(--perola); animation: mare 22s linear infinite reverse; }
@keyframes mare { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- pilares ---------- */
.pilares__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: var(--respiro) 24px calc(var(--respiro) * .6);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.pilar { border-top: 1px solid var(--linha); padding-top: 26px; }
.pilar__num { font-family: var(--serif); font-style: italic; color: var(--ouro); font-size: 20px; }
.pilar h2 { font-size: 34px; margin: 6px 0 12px; }
.pilar p { color: var(--nevoa); margin: 0; }

/* ---------- seções ---------- */
.secao { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) 24px; }
.secao--sem-topo { padding-top: 0; }
.secao__cabeca { text-align: center; margin-bottom: 56px; }
.secao__cabeca .titulo { margin-bottom: 10px; }
.secao__sub { color: var(--nevoa); }

/* ---------- produtos ---------- */
.grade-produtos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 56px 36px;
}
.produto { display: flex; flex-direction: column; width: calc((100% - 72px) / 3); }
.produto__foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 220px 220px 4px 4px;
    background: var(--areia);
    margin-bottom: 24px;
}
.produto__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--suave), opacity .6s var(--suave);
}
.produto:hover .produto__foto img { transform: scale(1.04); }
.produto__foto-2 { position: absolute; inset: 0; opacity: 0; }
.produto__foto--troca:hover .produto__foto-2 { opacity: 1; }
.selo {
    position: absolute;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    background: rgba(250, 247, 242, .92);
    color: var(--turquesa);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.produto__info { text-align: center; display: flex; flex-direction: column; flex: 1; }
.produto__cat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro); margin-bottom: 6px; }
.produto__nome { font-size: 28px; margin-bottom: 10px; }
.produto__desc { color: var(--nevoa); font-size: 15px; line-height: 1.6; max-width: 320px; margin: 0 auto 14px; }
.produto__preco { font-size: 14px; color: var(--nevoa); margin-top: auto; margin-bottom: 18px; }
.produto__preco strong { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--turquesa); margin-left: 4px; }
.produto__acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.produto__acoes .btn { padding: 12px 22px; font-size: 12px; }

.aviso-unica {
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 21px;
    color: var(--turquesa);
    max-width: 620px;
    margin: 0 auto 60px;
}

/* ---------- dupla (foto + texto) ---------- */
.dupla {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px var(--respiro);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
}
.dupla--justa { padding: 0; }
.dupla__foto { margin: 0; }
.dupla__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arco); }
.dupla__texto p { color: var(--nevoa); max-width: 460px; }
.dupla__texto .link-seta { display: inline-block; margin-top: 14px; }

/* ---------- faixa atacado / instagram ---------- */
.faixa-atacado {
    background: var(--turquesa);
    background-image: radial-gradient(80% 120% at 50% 0%, var(--turquesa-medio), var(--turquesa) 70%);
    color: var(--espuma);
    text-align: center;
}
.faixa-atacado__dentro { max-width: 640px; margin: 0 auto; padding: var(--respiro) 24px; }
.faixa-atacado h2 { color: var(--perola); font-size: clamp(38px, 5vw, 60px); margin-bottom: 18px; }
.faixa-atacado .sobretitulo { color: var(--ouro-claro); }
.faixa-atacado p { margin-bottom: 34px; }

/* ---------- cabeçalho de página ---------- */
.cabeca-pagina { text-align: center; padding: clamp(56px, 8vw, 96px) 24px 48px; }
.cabeca-pagina h1 { font-size: clamp(52px, 7vw, 88px); font-weight: 400; }
.cabeca-pagina--escura {
    position: relative;
    background: linear-gradient(180deg, var(--turquesa) 0%, var(--turquesa-escuro) 100%);
    padding-bottom: 120px;
}
.cabeca-pagina--escura h1 { color: var(--perola); }
.cabeca-pagina--escura h1 em { color: var(--ouro-claro); }
.cabeca-pagina--escura .sobretitulo { color: var(--ouro-claro); }
.onda--base { position: absolute; left: 0; bottom: -1px; fill: var(--perola); }

/* ---------- abas varejo / atacado ---------- */
.abas {
    display: inline-flex;
    margin-top: 38px;
    padding: 5px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
}
.aba {
    padding: 11px 32px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--turquesa);
    transition: background .3s, color .3s;
}
.aba[aria-selected="true"] { background: var(--turquesa); color: var(--perola); }
.aba:not([aria-selected="true"]):hover { color: var(--ouro); }

/* ---------- sob encomenda ---------- */
.encomenda { background: var(--areia); padding: var(--respiro) 24px; }
.encomenda__lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--largura);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--linha);
}
.encomenda__lista li { padding: 34px 28px; border-bottom: 1px solid var(--linha); }
.encomenda__lista li:not(:nth-child(3n)) { border-right: 1px solid var(--linha); }
.encomenda__lista h3 { font-size: 28px; margin-bottom: 8px; }
.encomenda__lista p { color: var(--nevoa); font-size: 15px; margin: 0; }

/* ---------- atacado ---------- */
.atacado-intro .dupla__texto p { max-width: 520px; }
.passos { background: var(--areia); padding: var(--respiro) 24px; }
.passos__lista, .processo__lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--largura);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.passos__lista li, .processo__lista li { text-align: center; }
.passos__lista span, .processo__lista span {
    display: inline-grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 1px solid var(--ouro);
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--ouro);
    margin-bottom: 18px;
}
.passos__lista h3, .processo__lista h3 { font-size: 26px; margin-bottom: 8px; }
.passos__lista p, .processo__lista p { color: var(--nevoa); font-size: 15px; margin: 0; }

.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 160px 160px 4px 4px; }
.galeria figcaption {
    text-align: center;
    margin-top: 14px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    color: var(--turquesa);
}

/* ---------- formulário de orçamento ---------- */
.orcamento { background: var(--turquesa-escuro); color: var(--espuma); }
.orcamento__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: var(--respiro) 24px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 72px;
}
.orcamento h2 { color: var(--perola); font-size: clamp(38px, 5vw, 56px); margin-bottom: 18px; }
.orcamento .sobretitulo { color: var(--ouro-claro); }
.form { display: grid; gap: 22px; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label {
    display: grid;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ouro-claro);
}
.form input, .form select, .form textarea {
    width: 100%;
    font: 300 16px/1.5 var(--sans);
    color: var(--perola);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(211, 236, 238, .3);
    padding: 10px 0;
    border-radius: 0;
    transition: border-color .3s;
    letter-spacing: normal;
    text-transform: none;
}
.form textarea { resize: vertical; }
.form select option { color: var(--tinta); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--ouro-claro); }
.form input::placeholder, .form textarea::placeholder { color: rgba(211, 236, 238, .45); }
.form__arquivo input { font-size: 14px; border: 0; color: var(--espuma); }
.form .btn { justify-self: start; margin-top: 8px; }

/* ---------- página feito à mão ---------- */
.historia__dentro, .personalizar__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: var(--respiro) 24px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(40px, 7vw, 96px);
    align-items: center;
}
.historia__foto, .personalizar__foto { margin: 0; }
.historia__foto img, .personalizar__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arco); }
.historia__texto p { color: var(--nevoa); }
.historia__texto .destaque {
    font-family: var(--serif);
    font-size: 25px;
    line-height: 1.45;
    color: var(--turquesa);
}

.unica { background: var(--areia); }
.unica__dentro { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) 24px; text-align: center; }
.unica__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 40px 0 48px; text-align: left; }
.unica__grade h3 { font-size: 27px; margin-bottom: 12px; }
.unica__grade p { color: var(--nevoa); margin: 0; }
.nota { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--turquesa); max-width: 640px; margin: 0 auto; }

.processo { padding: var(--respiro) 24px; }

.personalizar { background: var(--areia); }
.personalizar__dentro { grid-template-columns: 1.1fr .9fr; }
.lista-onda { list-style: none; padding: 0; margin: 0 0 36px; }
.lista-onda li { padding: 12px 0 12px 40px; border-bottom: 1px solid var(--linha); position: relative; }
.lista-onda li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 24px; height: 8px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c3-4 6-4 9 0s6 4 9 0 4.5-2 6-2' fill='none' stroke='%23a8844e' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cuidados__dentro { max-width: 760px; margin: 0 auto; padding: var(--respiro) 24px; text-align: center; }
.cuidados ul { list-style: none; padding: 0; margin: 12px 0 0; }
.cuidados li { padding: 16px 0; border-bottom: 1px solid var(--linha); color: var(--nevoa); }
.cuidados strong { font-weight: 500; color: var(--turquesa); }

/* ---------- rodapé ---------- */
.rodape { background: var(--turquesa-escuro); color: var(--espuma); position: relative; }
.onda--topo { fill: var(--turquesa-escuro); position: absolute; top: -59px; left: 0; }
.rodape__dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 72px 24px 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.rodape__marca img { width: 108px; height: auto; margin-bottom: 20px; }
.rodape__marca p { font-size: 15px; color: rgba(211, 236, 238, .75); }
.rodape__links, .rodape__contato { display: grid; gap: 12px; }
.rodape a { text-decoration: none; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.rodape a:hover { color: var(--ouro-claro); }
.rodape__base {
    text-align: center;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(211, 236, 238, .5);
    border-top: 1px solid rgba(211, 236, 238, .12);
    margin: 0;
    padding: 22px 24px;
}

/* ---------- animação de entrada ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--suave), transform .9s var(--suave); }
.revelar.visivel { opacity: 1; transform: none; }
.sem-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .revelar { opacity: 1; transform: none; transition: none; }
    .onda--1, .onda--2 { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
    .produto { width: calc((100% - 36px) / 2); }
    .galeria { grid-template-columns: repeat(2, 1fr); }
    .passos__lista, .processo__lista { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
    .encomenda__lista { grid-template-columns: repeat(2, 1fr); }
    .encomenda__lista li:not(:nth-child(3n)) { border-right: 0; }
    .encomenda__lista li:nth-child(odd) { border-right: 1px solid var(--linha); }
    .orcamento__dentro { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 820px) {
    body { font-size: 16px; }
    .topo__menu-btn {
        display: grid;
        gap: 7px;
        width: 44px; height: 44px;
        place-content: center;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .topo__menu-btn span { display: block; width: 26px; height: 1px; background: var(--turquesa); transition: transform .3s; }
    .topo__menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
    .topo__menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--perola);
        border-bottom: 1px solid var(--linha);
        padding: 8px 24px 24px;
        display: none;
    }
    .menu.aberto { display: flex; }
    .menu a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--linha); }
    .menu a::after { display: none; }
    .menu a[aria-current="page"] { color: var(--ouro); }
    .menu__insta span { display: inline; }

    .hero__dentro { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; }
    .hero__foto { justify-self: center; max-width: 300px; }
    .pilares__dentro { grid-template-columns: 1fr; gap: 32px; }
    .dupla, .historia__dentro, .personalizar__dentro { grid-template-columns: 1fr; }
    .personalizar__foto { order: -1; }
    .unica__grade { grid-template-columns: 1fr; gap: 32px; }
    .rodape__dentro { grid-template-columns: 1fr 1fr; }
    .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .produto { width: 100%; }
    .encomenda__lista { grid-template-columns: 1fr; }
    .encomenda__lista li:nth-child(odd) { border-right: 0; }
    .form__linha { grid-template-columns: 1fr; }
    .aba { padding: 10px 22px; }
    .hero__acoes .btn { width: 100%; }
    .galeria { gap: 14px; }
}

/* ============================================================
   LOJA — conta, carrinho, checkout, pedidos e painel
   ============================================================ */

/* ---------- utilitários ---------- */
[hidden] { display: none !important; }
.visualmente-oculto, .campo-isca {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.centro-texto { text-align: center; }
.codigo { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .92em; letter-spacing: .02em; word-break: break-all; }

/* ---------- disponibilidade no cartão de produto ---------- */
.produto__disponibilidade {
    margin: auto 0 6px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nevoa);
}
.produto__disponibilidade + .produto__preco { margin-top: 0; }

/* ---------- faixa de demonstração ---------- */
.faixa-demo {
    margin: 0;
    padding: 8px 16px;
    background: var(--ouro-claro);
    color: var(--turquesa-escuro);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------- ícones do menu (conta e carrinho) ---------- */
.menu__icone { display: inline-flex; align-items: center; gap: 8px; }
.menu__icone .menu__rotulo { display: none; }
.menu__contador {
    position: absolute;
    top: -2px; right: -12px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--turquesa);
    color: var(--perola);
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
}
@media (max-width: 1080px) and (min-width: 821px) {
    .menu { gap: 22px; }
}

/* ---------- botões extras ---------- */
.btn--pequeno { padding: 10px 18px; font-size: 12px; }
.btn--largo { width: 100%; }
.btn--desativado { opacity: .45; cursor: not-allowed; pointer-events: none; }
.link-botao {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nevoa);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.link-botao:hover { color: var(--turquesa); }

/* ---------- avisos ---------- */
.avisos { max-width: var(--largura); margin: 24px auto 0; padding: 0 24px; display: grid; gap: 10px; }
.aviso { margin: 0; padding: 14px 20px; border-radius: 14px; border: 1px solid; font-size: 15px; line-height: 1.5; }
.aviso--sucesso { background: rgba(10, 95, 105, .07); border-color: rgba(10, 95, 105, .28); color: var(--turquesa-escuro); }
.aviso--erro { background: rgba(155, 61, 40, .06); border-color: rgba(155, 61, 40, .3); color: var(--erro); }
.aviso--info { background: var(--areia); border-color: var(--linha); color: var(--tinta); }

/* ---------- selos de situação ---------- */
.etiqueta {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.etiqueta--ok { background: rgba(10, 95, 105, .12); color: var(--turquesa-escuro); }
.etiqueta--alerta { background: rgba(168, 132, 78, .18); color: #6b5128; }
.etiqueta--erro { background: rgba(155, 61, 40, .12); color: var(--erro); }
.etiqueta--neutro { background: var(--areia); color: var(--nevoa); }

/* ---------- cabeçalhos e contêineres ---------- */
.cabeca-pagina--curta { padding-bottom: 36px; }
.cabeca-pagina--curta h1 { font-size: clamp(40px, 5.6vw, 64px); }
.cabeca-pagina .secao__sub { max-width: 560px; margin: 16px auto 0; }
.estreito { max-width: 640px; margin: 0 auto; padding: 0 24px var(--respiro); }
.cartao {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 44px);
}
.cartao__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nevoa);
}
.cartao__rodape a { color: var(--turquesa); }
.valor-grande { font-family: var(--serif); font-size: 48px; color: var(--turquesa); margin: 0 0 8px; }

/* ---------- formulários em fundo claro ---------- */
.campos { display: grid; gap: 22px; }
.campos__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.campos__linha--3 { grid-template-columns: 1.2fr 1.2fr .6fr; }
.campos__linha--4 { grid-template-columns: repeat(4, 1fr); }
.campos__nota { margin: 0; font-size: 14px; color: var(--nevoa); }
.campo, .campo__legenda {
    display: grid;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nevoa);
}
.campo__legenda { margin-bottom: 4px; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    font: 300 16px/1.5 var(--sans);
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    border-radius: 0;
    padding: 10px 0;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color .3s;
}
.campo input[type="file"] { border-bottom: 0; font-size: 14px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--turquesa); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { box-shadow: 0 2px 0 var(--turquesa); }
.campo [aria-invalid="true"] { border-bottom-color: var(--erro); }
.campo small { font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--nevoa); }
.campo__erro { display: block; font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--erro); }
.campo__opcional { letter-spacing: .06em; text-transform: none; }
.campo__grupo { display: flex; gap: 12px; align-items: end; }
.campo__grupo input { flex: 1; }
.campo__arquivo { display: grid; gap: 6px; font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--nevoa); margin-top: 6px; }
.campos--linha { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.campos--linha .campo { flex: 1 1 240px; }
.miniatura { width: 96px; height: 120px; object-fit: cover; border-radius: 60px 60px 4px 4px; }

/* escolhas (radio e checkbox) */
.escolha { display: flex; flex-wrap: wrap; gap: 10px 22px; border: 0; margin: 0; padding: 0; }
.escolha__item { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.escolha__item input { width: 18px; height: 18px; margin: 0; accent-color: var(--turquesa); }

/* ---------- blocos ---------- */
.bloco {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 32px);
    margin: 0;
    min-width: 0;
}
fieldset.bloco { display: grid; gap: 20px; }
.bloco__titulo { font-family: var(--serif); font-weight: 500; line-height: 1.1; color: var(--turquesa); font-size: 28px; margin: 0 0 16px; padding: 0; }
.revisao + .campos__nota { margin-top: 16px; }
fieldset.bloco > .bloco__titulo { float: left; width: 100%; margin-bottom: 0; }
.bloco__subtitulo { font-size: 22px; margin: 22px 0 10px; }
.bloco p:last-child { margin-bottom: 0; }
.bloco--destaque { border-color: var(--ouro-claro); background: #fffdf8; }
.bloco--alerta { border-color: rgba(155, 61, 40, .35); background: #fffaf8; }
.bloco__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 8px; }
.bloco__acoes--inicio { justify-content: flex-start; }
.bloco__acoes--centro { justify-content: center; }
.dobra { margin-top: 18px; border-top: 1px solid var(--linha); padding-top: 14px; }
.dobra summary { cursor: pointer; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--turquesa); }
.dobra[open] summary { margin-bottom: 16px; }

/* ---------- layout loja (conteúdo + resumo) ---------- */
.loja {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px var(--respiro);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}
.loja__principal { display: grid; gap: 24px; min-width: 0; }
.resumo {
    position: sticky;
    top: 104px;
    background: var(--areia);
    border-radius: 24px;
    padding: 28px;
}
.resumo__titulo { font-size: 28px; margin-bottom: 16px; }
.resumo__titulo--espaco { margin-top: 28px; }
.resumo__linhas { margin: 0 0 20px; display: grid; gap: 10px; }
.resumo__linhas div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.resumo__linhas dt { color: var(--nevoa); }
.resumo__linhas dd { margin: 0; text-align: right; }
.resumo__total { padding-top: 12px; border-top: 1px solid var(--linha-forte); }
.resumo__total dt, .resumo__total dd { font-family: var(--serif); font-size: 26px; color: var(--turquesa); }
.resumo__linhas--pedido { margin-top: 16px; }
.resumo__itens { list-style: none; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--linha); display: grid; gap: 8px; font-size: 15px; }
.resumo__itens li { display: flex; justify-content: space-between; gap: 12px; }
.resumo__nota { font-size: 14px; color: var(--nevoa); margin: 16px 0 0; }
.resumo__voltar { display: inline-block; margin-top: 20px; }
.resumo__sair { margin-top: 24px; }

/* ---------- etapas do checkout ---------- */
.etapas { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin: 26px 0 0; padding: 0; }
.etapas li { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); }
.etapas li[aria-current="step"] { color: var(--turquesa); border-bottom: 1px solid var(--ouro); padding-bottom: 4px; }

/* ---------- carrinho ---------- */
.carrinho { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.carrinho__item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto auto;
    grid-template-areas: "foto info qtd subtotal" "foto info acoes acoes";
    gap: 6px 24px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--linha);
}
.carrinho__foto { grid-area: foto; width: 88px; height: 110px; object-fit: cover; border-radius: 60px 60px 4px 4px; background: var(--areia); }
.carrinho__info { grid-area: info; }
.carrinho__nome { font-size: 24px; margin-bottom: 6px; }
.carrinho__detalhe { margin: 0; font-size: 14px; color: var(--nevoa); }
.carrinho__qtd { grid-area: qtd; display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nevoa); }
.carrinho__qtd input { width: 64px; padding: 8px 6px; border: 1px solid var(--linha-forte); border-radius: 10px; font: 300 16px var(--sans); color: var(--tinta); background: #fff; text-align: center; }
.carrinho__subtotal { grid-area: subtotal; margin: 0; font-family: var(--serif); font-size: 22px; color: var(--turquesa); text-align: right; }
.carrinho__acoes { grid-area: acoes; display: flex; justify-content: flex-end; gap: 18px; }
.js [data-atualizar] { display: none; }

/* ---------- entrega e opções de frete ---------- */
.entrega__titulo { font-size: 28px; margin-bottom: 14px; }
.entrega { display: grid; gap: 16px; }
.entrega__cep { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.entrega__cep .campo { flex: 0 1 220px; }
.entrega__nota { margin: 0; font-size: 14px; color: var(--nevoa); }
.opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opcoes__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "radio nome preco" "radio prazo preco" "radio detalhe detalhe";
    gap: 2px 14px;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: #fff;
}
.opcoes__item input { grid-area: radio; width: 18px; height: 18px; margin: 0; accent-color: var(--turquesa); }
.opcoes__nome { grid-area: nome; font-weight: 400; }
.opcoes__prazo { grid-area: prazo; font-size: 14px; color: var(--nevoa); }
.opcoes__preco { grid-area: preco; font-family: var(--serif); font-size: 22px; color: var(--turquesa); }
.opcoes__detalhe { grid-area: detalhe; font-size: 14px; color: var(--nevoa); margin-top: 6px; }
.opcoes--escolha .opcoes__item { cursor: pointer; transition: border-color .25s, background .25s; }
.opcoes--escolha .opcoes__item:has(input:checked) { border-color: var(--turquesa); background: rgba(10, 95, 105, .05); }
.prazo { margin: 14px 0 0; line-height: 1.6; }
.prazo .campos__nota { display: block; }

/* ---------- revisão e itens do pedido ---------- */
.revisao { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.revisao__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.revisao__item--sem-foto { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.revisao__item img { width: 64px; height: 80px; object-fit: cover; border-radius: 40px 40px 4px 4px; }
.revisao__nome { margin: 0; }
.revisao__detalhe { margin: 0; font-size: 14px; color: var(--nevoa); }
.revisao__valor { margin: 0; font-family: var(--serif); font-size: 20px; color: var(--turquesa); }

/* ---------- conta: lista de pedidos ---------- */
.lista-pedidos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.lista-pedidos__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "numero total" "data total" "selos selos";
    gap: 4px 16px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--linha);
    text-decoration: none;
    transition: background .25s;
}
.lista-pedidos__item:hover { background: rgba(10, 95, 105, .04); }
.lista-pedidos__numero { grid-area: numero; font-family: var(--serif); font-size: 22px; color: var(--turquesa); }
.lista-pedidos__data { grid-area: data; font-size: 14px; color: var(--nevoa); }
.lista-pedidos__selos { grid-area: selos; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lista-pedidos__total { grid-area: total; font-family: var(--serif); font-size: 22px; align-self: center; }

/* ---------- andamento do pedido ---------- */
.progresso { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; }
.progresso__passo {
    flex: 1;
    position: relative;
    padding-top: 26px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nevoa);
    text-align: center;
}
.progresso__passo::before {
    content: "";
    position: absolute;
    top: 5px; left: 50%;
    width: 12px; height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--linha-forte);
    z-index: 1;
}
.progresso__passo::after {
    content: "";
    position: absolute;
    top: 11px; left: -50%;
    width: 100%; height: 1px;
    background: var(--linha-forte);
}
.progresso__passo:first-child::after { display: none; }
.progresso__passo--feito { color: var(--turquesa); }
.progresso__passo--feito::before { background: var(--turquesa); border-color: var(--turquesa); }
.progresso__passo--feito::after, .progresso__passo--atual::after { background: var(--turquesa); }
.progresso__passo--atual { color: var(--tinta); font-weight: 500; }
.progresso__passo--atual::before { border: 3px solid var(--ouro); width: 14px; height: 14px; margin-left: -7px; top: 4px; }
.progresso__texto { margin: 0; }

.historico { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.historico li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
.historico time { color: var(--nevoa); }
.historico small { display: block; color: var(--nevoa); font-size: 12px; }

/* ---------- painel ---------- */
.painel { max-width: var(--largura); margin: 0 auto; padding: 0 24px var(--respiro); display: grid; gap: 24px; }
.painel-nav, .filtros--abas {
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
}
.painel-nav a, .filtros--abas a {
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--turquesa);
    transition: background .3s, color .3s;
}
.painel-nav a[aria-current="page"], .filtros--abas a[aria-current="page"] { background: var(--turquesa); color: var(--perola); }
.painel-nav a:not([aria-current="page"]):hover, .filtros--abas a:not([aria-current="page"]):hover { color: var(--ouro); }
.filtros--abas { justify-self: start; }
.painel__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.painel__colunas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.painel__colunas--pedido > div, .painel__colunas--pedido > aside { display: grid; gap: 24px; min-width: 0; }
.painel__form { display: grid; gap: 24px; }
.selos-cabeca { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.indicador {
    display: block;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 20px;
    padding: 20px 22px;
    text-decoration: none;
    transition: border-color .25s;
}
a.indicador:hover { border-color: var(--turquesa); }
.indicador__rotulo { margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); }
.indicador__valor { margin: 0; font-family: var(--serif); font-size: 34px; line-height: 1.1; color: var(--turquesa); }
.indicador__nota { margin: 6px 0 0; font-size: 13px; color: var(--nevoa); }
.indicador--destaque { background: var(--turquesa); border-color: var(--turquesa); }
.indicador--destaque .indicador__rotulo, .indicador--destaque .indicador__nota { color: var(--espuma); }
.indicador--destaque .indicador__valor { color: var(--perola); }
.indicador--alerta { border-color: var(--ouro-claro); background: #fffdf8; }

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--linha-forte);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nevoa);
    text-align: left;
    white-space: nowrap;
}
.tabela td { padding: 14px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela td a { color: var(--turquesa); }
.tabela small { color: var(--nevoa); }
.tabela__produto { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 200px; }
.tabela__produto img { width: 44px; height: 55px; object-fit: cover; border-radius: 30px 30px 3px 3px; }
.tabela__linha--apagada td { opacity: .55; }
.tabela__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.entrada-curta { width: 96px; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: 10px; font: 300 15px var(--sans); color: var(--tinta); background: #fff; }
.entrada-curta:focus { outline: none; border-color: var(--turquesa); }

.filtros { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: end; }
.filtros .campo { flex: 1 1 160px; }
.filtros__check { flex: 0 0 auto; margin-bottom: 10px; }
.paginacao { display: flex; justify-content: center; align-items: center; gap: 24px; font-size: 14px; color: var(--nevoa); }
.paginacao a { color: var(--turquesa); }
.lista-simples { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.lista-simples a { color: var(--turquesa); }
.lista-simples--pequena { font-size: 13px; color: var(--nevoa); }
.cartoes-orcamento { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.orcamento-item__topo .bloco__titulo { margin-bottom: 8px; font-size: 24px; }
.orcamento-item__topo p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.orcamento-item__mensagem { background: var(--perola); border-radius: 12px; padding: 14px 16px; font-size: 15px; }

/* ---------- responsivo da loja ---------- */
@media (max-width: 980px) {
    .loja { grid-template-columns: 1fr; }
    .resumo { position: static; }
    .painel__colunas { grid-template-columns: 1fr; }
    .campos__linha--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .menu__icone { width: 100%; }
    .menu__icone .menu__rotulo { display: inline; }
    .menu__contador { position: static; margin-left: 4px; }
}

@media (max-width: 560px) {
    .campos__linha, .campos__linha--3 { grid-template-columns: 1fr; }
    .carrinho__item {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas: "foto info" "foto qtd" "subtotal acoes";
    }
    .carrinho__foto { width: 72px; height: 90px; }
    .carrinho__subtotal { text-align: left; }
    .progresso { flex-direction: column; gap: 14px; }
    .progresso__passo { padding: 0 0 0 28px; text-align: left; }
    .progresso__passo::before { left: 0; margin-left: 0; top: 3px; }
    .progresso__passo--atual::before { margin-left: -1px; top: 2px; }
    .progresso__passo::after { display: none; }
    .cartoes-orcamento { grid-template-columns: 1fr; }
    .painel-nav a { padding: 9px 14px; }
    .resumo { padding: 22px; }
}
.tabela__valor { white-space: nowrap; }
.tabela .etiqueta + .etiqueta { margin-left: 4px; }
.carrinho__subtotal, .revisao__valor, .opcoes__preco, .lista-pedidos__total, .resumo__linhas dd { white-space: nowrap; }
@media (max-width: 560px) {
    .indicadores { grid-template-columns: 1fr 1fr; }
    .indicador__valor { font-size: 28px; }
}

/* ---------- pagamento na loja (Pix e cartão) ---------- */
.pix { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; margin: 18px 0; }
.pix__qr { width: 220px; height: 220px; padding: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; image-rendering: pixelated; }
.pix__codigo { display: grid; gap: 10px; }
.pix__texto {
    width: 100%;
    font: 13px/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace;
    color: var(--tinta);
    background: var(--perola);
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 10px 12px;
    resize: none;
    word-break: break-all;
}
.pix__situacao { margin: 0 0 12px; font-size: 14px; color: var(--nevoa); }
.pix__situacao::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ouro); vertical-align: middle; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .25; } }
.pagamento-cartao__form { min-height: 40px; }
@media (max-width: 560px) {
    .pix { grid-template-columns: 1fr; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pix__situacao::before { animation: none; }
}