/* ============================================================
   Contato — Família Orun
   Paleta: Creme quente · Âmbar dourado · Marrom-mel

   A página de contato é a porta de entrada: deve sentir
   como um espaço aberto, iluminado e acolhedor.
   Sem escuridão — só luz, calor e clareza.
   ============================================================ */

/* ============================================================
   VARIÁVEIS
   ============================================================ */
:root {
    --cnt-cream:       #FAF8F3;
    --cnt-cream-alt:   #F2EEE3;
    --cnt-cream-deep:  #EDE7D4;
    --cnt-white:       #FFFFFF;

    --cnt-amber:       #D4A017;
    --cnt-amber-mid:   #E8BF4A;
    --cnt-amber-dark:  #B8880F;
    --cnt-amber-pale:  rgba(212,160,23,0.09);
    --cnt-amber-glow:  rgba(212,160,23,0.16);

    /* Marrom-mel — mais quente que tinta pura, nunca preto */
    --cnt-ink:         #2E2010;
    --cnt-ink-soft:    rgba(46,32,16,0.62);
    --cnt-ink-muted:   rgba(46,32,16,0.36);

    --cnt-border:      rgba(140,100,20,0.12);
    --cnt-border-hover:rgba(212,160,23,0.35);
    --cnt-shadow:      rgba(140,100,20,0.07);
    --cnt-shadow-med:  rgba(140,100,20,0.12);

    /* Grade de pontos âmbar (textura caderno aquecido) */
    --cnt-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(184%2C136%2C15%2C0.11)'/%3E%3C/svg%3E");
}

/* ============================================================
   TEMA — override completo para fundo claro e quente
   ============================================================ */
.theme-contato {
    --color-bg:             var(--cnt-cream);
    --color-bg-alt:         var(--cnt-cream-alt);
    --color-surface:        var(--cnt-white);
    --color-surface-hover:  #FFFDF7;
    --color-border:         var(--cnt-border);
    --color-text:           var(--cnt-ink);
    --color-text-soft:      var(--cnt-ink-soft);
    --color-text-muted:     var(--cnt-ink-muted);
    --accent:               var(--cnt-amber);
    --accent-light:         var(--cnt-amber-mid);
    --accent-dark:          var(--cnt-amber-dark);
}

/* Header — fundo claro no tema contato */
.theme-contato .main-header {
    background: rgba(250,248,243,0.90);
    border-bottom-color: var(--cnt-border);
}
.theme-contato .main-header.scrolled {
    background: rgba(250,248,243,0.97);
    box-shadow: 0 2px 24px rgba(140,100,20,0.08);
}
.theme-contato .nav-link            { color: var(--cnt-ink-soft); }
.theme-contato .nav-link:hover,
.theme-contato .nav-link.active     { color: var(--cnt-ink); background: var(--cnt-amber-pale); }
.theme-contato .nav-link--cta       { background: var(--cnt-amber); color: var(--cnt-ink) !important; }
.theme-contato .nav-link--cta:hover { background: var(--cnt-amber-mid) !important; }
.theme-contato .main-nav            { background: var(--cnt-cream); border-left-color: var(--cnt-border); }
.theme-contato .hamburger,
.theme-contato .hamburger::before,
.theme-contato .hamburger::after    { background: var(--cnt-ink); }

/* Botões */
.theme-contato .btn-primary {
    background: var(--cnt-amber);
    color: var(--cnt-ink);
    font-weight: 700;
}
.theme-contato .btn-primary:hover {
    background: var(--cnt-amber-mid);
    color: var(--cnt-ink);
    box-shadow: 0 4px 24px rgba(212,160,23,0.35);
    transform: translateY(-2px);
}
.theme-contato .btn-secondary {
    background: var(--cnt-white);
    color: var(--cnt-ink);
    border: 1.5px solid var(--cnt-border);
}
.theme-contato .btn-secondary:hover {
    border-color: var(--cnt-amber);
    background: var(--cnt-amber-pale);
    color: var(--cnt-ink);
    transform: translateY(-2px);
}

/* Formulário */
.theme-contato .form-label  { color: var(--cnt-ink); font-weight: 600; }
.theme-contato .form-input,
.theme-contato .form-select,
.theme-contato .form-textarea {
    background: var(--cnt-cream);
    border-color: var(--cnt-border);
    color: var(--cnt-ink);
}
.theme-contato .form-input::placeholder,
.theme-contato .form-textarea::placeholder { color: var(--cnt-ink-muted); }
.theme-contato .form-input:focus,
.theme-contato .form-select:focus,
.theme-contato .form-textarea:focus {
    border-color: var(--cnt-amber);
    background: var(--cnt-white);
    box-shadow: 0 0 0 3px rgba(212,160,23,0.15);
}
.theme-contato .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(46%2C32%2C16%2C0.45)' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px;
    appearance: none;
    padding-right: 2.5rem;
}

/* Seção alt */
.theme-contato .section--alt { background: var(--cnt-cream-alt); }

/* ============================================================
   HERO — PORTA ABERTA
   ============================================================ */
.cnt-hero {
    background:
        radial-gradient(ellipse 55% 60% at 95% 5%,  rgba(212,160,23,0.13) 0%, transparent 58%),
        radial-gradient(ellipse 40% 35% at 8% 92%,  rgba(212,160,23,0.07) 0%, transparent 55%),
        var(--cnt-dots),
        var(--cnt-cream);
    background-size: auto, auto, 30px 30px, auto;
    padding: calc(var(--header-total) + 5rem) 0 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Linha âmbar no topo */
.cnt-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--cnt-amber) 25%,
        var(--cnt-amber-mid) 50%,
        var(--cnt-amber) 75%,
        transparent 100%);
    z-index: 2;
}

.cnt-hero__inner {
    max-width: 680px;
    position: relative; z-index: 1;
}

.cnt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.95rem;
    background: var(--cnt-amber-pale);
    border: 1px solid rgba(212,160,23,0.22);
    border-radius: 100px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--cnt-amber-dark);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1.75rem;
}

.cnt-hero__title {
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 900;
    color: var(--cnt-ink);
    line-height: 1.06;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}
.cnt-hero__title .acc-a { color: var(--cnt-amber-dark); }

.cnt-hero__sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--cnt-ink-soft);
    line-height: 1.78;
    max-width: 560px;
}

/* ============================================================
   LAYOUT PRINCIPAL — duas colunas
   ============================================================ */
.cnt-layout {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 3rem;
    align-items: start;
}

/* ============================================================
   COLUNA ESQUERDA — informações e motivos
   ============================================================ */
.cnt-col-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--cnt-amber-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* Itens de contato */
.cnt-info-list { display: flex; flex-direction: column; gap: 0.65rem; }

.cnt-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--cnt-white);
    border: 1px solid var(--cnt-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--cnt-ink);
    transition: var(--transition);
    box-shadow: 0 2px 10px var(--cnt-shadow);
}
.cnt-info-item:hover {
    border-color: var(--cnt-amber);
    box-shadow: 0 4px 22px var(--cnt-amber-glow);
    transform: translateX(4px);
    color: var(--cnt-ink);
}

.cnt-info-item__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--cnt-amber-pale);
    color: var(--cnt-amber-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background var(--transition);
}
.cnt-info-item:hover .cnt-info-item__icon {
    background: var(--cnt-amber-glow);
}

.cnt-info-item__text strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cnt-ink);
    margin-bottom: 0.12rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cnt-info-item__text span {
    font-size: 0.9rem;
    color: var(--cnt-ink-soft);
}

/* Motivos — chips arredondados */
.cnt-motivos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.cnt-motivo {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.42rem 0.88rem;
    background: var(--cnt-cream);
    border: 1px solid var(--cnt-border);
    border-radius: 100px;
    font-size: 0.83rem;
    color: var(--cnt-ink-soft);
    transition: var(--transition);
}
.cnt-motivo:hover {
    background: var(--cnt-amber-pale);
    border-color: rgba(212,160,23,0.28);
    color: var(--cnt-ink);
}
.cnt-motivo i {
    font-size: 0.78rem;
    color: var(--cnt-amber-dark);
    opacity: 0.75;
}

/* ============================================================
   COLUNA DIREITA — formulário
   ============================================================ */
.cnt-form-card {
    background: var(--cnt-white);
    border: 1px solid var(--cnt-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: 0 6px 32px var(--cnt-shadow-med);
    position: relative;
    overflow: hidden;
}

/* Faixa âmbar no topo do card de formulário */
.cnt-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right,
        var(--cnt-amber-dark),
        var(--cnt-amber-mid) 50%,
        var(--cnt-amber-dark));
}

/* ============================================================
   FRASE FINAL — âmbar, quente, espaçosa
   ============================================================ */
.cnt-frase {
    text-align: center;
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--cnt-cream-alt);
    background-image: var(--cnt-dots);
    background-size: 30px 30px;
    position: relative;
    overflow: hidden;
}
.cnt-frase::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        rgba(212,160,23,0.30) 40%,
        rgba(212,160,23,0.30) 60%,
        transparent);
}

/* Ornamento solar (fundo decorativo) */
.cnt-frase__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(212,160,23,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.cnt-frase .container { position: relative; z-index: 1; }

.cnt-frase__text {
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: var(--cnt-ink);
    letter-spacing: -0.028em;
    line-height: 1.25;
    max-width: 680px;
    margin: 0 auto;
}
.cnt-frase__text em {
    font-style: normal;
    color: var(--cnt-amber-dark);
}

/* Divisor leve entre info e motivos */
.cnt-col-divider {
    height: 1px;
    background: linear-gradient(to right, var(--cnt-border), transparent);
    margin: 1.75rem 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .cnt-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
@media (max-width: 600px) {
    .cnt-form-card { padding: 1.75rem 1.25rem; }
}