:root {
    --ink: #0c0c0c;
    /* preto principal */
    --ink-2: #151515;
    /* preto cartões */
    --paper: #ffffff;
    /* branco */
    --muted: #9ea3a8;
    /* cinza texto */
    --gold: #e7c785;
    /* dourado principal */
    --gold-2: #f5dba7;
    /* dourado claro */
    --accent: #e2b35a;
    /* botões */
    --accent-2: #c79c4e;
    /* hover */
    --wa: #25D366;
    /* whatsapp */
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Lora", serif;
    color: #222;
    background: #fff
}

/* NAV */
.nav-dark {
    background: linear-gradient(180deg, #0b0b0b 0%, #131313 100%)
}

.brand {
    font-weight: 800;
    letter-spacing: .2rem;
    color: #fff
}

.brand small {
    font-weight: 700;
    color: var(--gold)
}

.navbar .nav-link {
    color: #eee;
    font-weight: 600
}

.navbar .nav-link:hover {
    color: var(--gold)
}

.btn-cta {
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    border: none;
    border-radius: 999px
}

.btn-cta:hover {
    background: var(--accent-2);
    color: #000
}

/* HERO */
.hero {
    position: relative;
    background: radial-gradient(1200px 600px at 80% 0%, rgba(231, 199, 133, .15), transparent 60%), #0b0b0b;
    color: #eee;
    overflow: hidden
}

.hero .kicker {
    color: var(--gold);
    font-weight: 700;
}

.hero h1 {
    font-weight: 600;
}

.hero .lead {
    color: #eaeaea
}

.badge-wa {
    background: rgba(231, 199, 133, .12);
    color: var(--gold);
    border: 1px solid rgba(231, 199, 133, .35);
    padding: .45rem .8rem;
    border-radius: 999px;
    font-weight: 700;
}

.hero-img {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5)
}

.hero-img::after {
    content: "ELEGANCE";
    position: absolute;
    right: -60px;
    top: 10px;
    color: rgba(255, 255, 255, .06);
    font-size: 8rem;
    font-weight: 800;
    letter-spacing: .3rem;
    transform: rotate(90deg);
    pointer-events: none
}

/* PROBLEMA */
.section {
    position: relative
}

.section-title {
    color: #111;
    font-weight: 600;
}

.problem h2 {
    font-size: 46px !important;
}

.problem h3 {
    font-size: 28px !important;
}

.emph {
    color: #111;
    font-weight: 800
}

.icon-bullet {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 199, 133, .15);
    color: #a88638;
    margin-right: .65rem
}

.problem .grad {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.problem .item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem 1rem;
    border-radius: 14px;
    margin-bottom: .9rem
}

.problem .item .i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 199, 133, .18);
    color: #a88638;
    font-size: 1.25rem;
    flex: 0 0 44px
}

.problem .callout {
    background: linear-gradient(90deg, rgba(231, 199, 133, .92) 0%, rgba(199, 156, 78, .92) 100%);
    color: #1f1b14;
    box-shadow: 0 12px 26px rgba(199, 156, 78, .28)
}

.problem .callout .i {
    background: rgba(0, 0, 0, .12);
    color: #fff
}

/* WEDGE (3 passos) */
/* WEDGE v2 (3 Passos com diagonais) */
.wedge2 {
    position: relative
}

.wedge-panel {
    position: relative;
    color: #fff;
    background:
        radial-gradient(1000px 500px at 70% 0%, rgba(231, 199, 133, .10), transparent 60%),
        linear-gradient(180deg, #0b0b0b 0%, #151515 100%);
    clip-path: polygon(5% 0, 100% 0, 100% 86%, 95% 100%, 0 100%, 0 12%);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
}

.wedge-panel .title {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-weight: 700
}

.gold {
    color: var(--gold)
}

.step2 {
    text-align: center;
}

.step2 .num {
    font-family: "Playfair Display", serif;
    font-size: 2.6rem;
    color: #fff;
    line-height: 1;
}

.step2 p {
    max-width: 280px;
    margin: .5rem auto 0;
    color: #f1f1f1;
    font-size: 28px;
}

.step2 .swash {
    display: block;
    width: 72%;
    height: 18px;
    margin: .9rem auto 0;
    border-bottom: 2px solid var(--gold);
    border-radius: 0 0 26px 26px;
}

/* BENEFÍCIOS v2 (linhas curvadas douradas) */
.benefit2 .item {
    position: relative;
    text-align: center;
    padding: .9rem 1rem 1.4rem;
    margin: 0 auto 1rem;
    max-width: 760px;
    color: #141414;
    font-size: 26px;
}

.benefit2 .item::after {
    content: "";
    position: absolute;
    left: 1%;
    right: 1%;
    bottom: .35rem;
    height: 18px;
    border-bottom: 2px solid var(--accent);
    border-radius: 0 0 26px 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25)
}

.benefit2 .hl {
    color: var(--accent-2)
}

/* SHOWCASE */
.showcase {
    background: linear-gradient(180deg, #0b0b0b 0%, #151515 100%);
    color: #fff;
    overflow: hidden
}

.showcase h3 {
    font-weight: 800
}

.photo {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4)
}

.btn-gold {
    background: var(--accent);
    color: #fff;
    border: none;
    font-weight: 800;
    border-radius: 999px;
}

/* HISTÓRIA v2 – wedge full-width com diagonais e "curl" */
.wedge-history {
    position: relative;
    color: #eee;
    background:
        radial-gradient(900px 400px at 25% 10%, rgba(231, 199, 133, .10), transparent 60%),
        linear-gradient(180deg, #0b0b0b 0%, #151515 100%);
    clip-path: polygon(6% 0, 100% 0, 100% 82%, 94% 100%, 0 100%, 0 14%);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
}

.wedge-history::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -10px;
    width: 180px;
    height: 120px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background: linear-gradient(135deg, #e9e9e9, #ffffff);
    box-shadow: 0 16px 26px rgba(0, 0, 0, .28);
    pointer-events: none
}

.wedge-history .kicker {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: .85rem
}

/* GALERIA v1 – fundo imagem + título com quadrado + carrossel 3x3 */
.gallery {
    position: relative;
    color: #fff;
    background: url('back-gallery.png') center/cover no-repeat;
    overflow: hidden
}

.gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .8));
}

.gallery .container {
    position: relative;
    z-index: 2
}

/* Centraliza o texto do accordion */
.accordion-button {
  justify-content: center;     /* centra o conteúdo no eixo principal */
  text-align: center;          /* garante centralização de múltiplas linhas */
}

/* Reposiciona o ícone de abrir/fechar para a direita sem deslocar o título */
.accordion-button::after {
  position: absolute;
  right: 1rem;                 /* distância da borda direita */
  margin-left: 0 !important;   /* remove o auto que empurra o texto */
}

/* Opcional: mantém alinhamento no estado "collapsed" também */
.accordion-button.collapsed {
  justify-content: center;
  text-align: center;
}

.accordion{
    text-align: center;
}

.badge-square {
    display: inline-block;
    padding: .5rem .9rem;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: rgba(0, 0, 0, .35);
    color: #e9e9e9;
    font-weight: 600
}

.gallery h3 {
    font-weight: 700;
    font-size: 2rem
}

.gallery .photo {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .55)
}

.gallery .carousel-control-prev,
.gallery .carousel-control-next {
    width: auto;
    opacity: 1
}

.gallery .carousel-control-prev .control-dot,
.gallery .carousel-control-next .control-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(226, 179, 90, .35)
}

.gallery .carousel-control-prev .control-dot:hover,
.gallery .carousel-control-next .control-dot:hover {
    background: var(--accent-2)
}

.wedge-history h3 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: #fff;
    font-size: 70px;
    line-height: 0.9;
}

.wedge-history .gold {
    color: var(--gold)
}

.wedge-history>.container {
    position: relative;
    z-index: 2
}

.ph {
    background: #dedede;
    border-radius: 12px;
    height: 150px;
    position: relative
}

.ph::before {
    content: "\F4F4";
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #bbb;
    font-size: 2rem
}

/* HISTÓRIA */
.history {
    background: #0b0b0b;
    color: #eee
}

.history h3 {
    font-family: "Playfair Display", serif;
    color: var(--gold)
}

.phone {
    transform: rotate(-16deg);
    max-width: 220px
}

/* COUNTDOWN */
.count .box {
    background: #0b0b0b;
    color: #fff;
    border-radius: 14px;
    padding: .8rem 1rem;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2)
}

.count .val {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--gold)
}

.count .lbl {
    font-size: .8rem;
    color: #c9c9c9
}

/* FAQ */
.accordion-button {
    font-weight: 600
}

.accordion-button:not(.collapsed) {
    background: rgba(231, 199, 133, .12);
    color: #1a1a1a
}

/* FOOTER */
footer {
    background: #0b0b0b;
    color: #ddd
}

footer a {
    color: #ddd
}

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(231, 199, 133, .6), transparent)
}

/* Utilities */
.pill {
    border-radius: 999px
}