/**
 * LEMP · Componentes de Interface
 * Componentes essenciais extraídos fielmente do design institucional:
 * - .btn-pill: botão em pílula com contorno fino e texto em caixa alta
 * - .titulo-display: títulos em caixa alta, peso ultra-fino e entrelinha arquitetônica
 * - .campo-linha: campos de formulário lineares com apenas borda inferior e labels em caixa alta
 */

/* ==========================================================================
   1. BOTÃO EM PÍLULA (.btn-pill)
   Fiel aos botões do PDF: contorno fino (1px), cantos 100% arredondados,
   tipografia pequena em caixa alta e transição sutil ao hover.
   ========================================================================== */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1.6rem;
    border-radius: var(--lemp-radius-pill);
    border: 1px solid var(--lemp-color-border);
    background-color: transparent;
    color: var(--lemp-color-text-main);
    font-family: var(--lemp-font-display);
    font-size: var(--lemp-font-btn);
    font-weight: var(--lemp-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--lemp-ls-wide);
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--lemp-trans-fast), 
                color var(--lemp-trans-fast), 
                border-color var(--lemp-trans-fast),
                transform var(--lemp-trans-fast);
}

/* Hover e foco interativo do botão pílula */
.btn-pill:hover {
    background-color: var(--lemp-color-text-main);
    color: var(--lemp-color-text-light);
    border-color: var(--lemp-color-text-main);
    opacity: 1;
    transform: translateY(-1px);
}

.btn-pill:active {
    transform: translateY(0);
}

.btn-pill:focus-visible {
    outline: 2px solid var(--lemp-color-text-main);
    outline-offset: 3px;
}

/* Variante Invertida / Clara (para superfícies escuras como o menu fullscreen) */
.btn-pill.btn-pill-light {
    border-color: var(--lemp-color-border-light);
    color: var(--lemp-color-text-light);
}

.btn-pill.btn-pill-light:hover {
    background-color: var(--lemp-color-text-light);
    color: var(--lemp-color-header);
    border-color: var(--lemp-color-text-light);
}

/* Grupo de botões pílula com espaçamento padronizado */
.grupo-btn-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}


/* ==========================================================================
   2. TÍTULOS DISPLAY (.titulo-display)
   Títulos com personalidade pura de estúdio de design:
   caixa alta, peso fino/light, tracking sutil e entrelinha compacta.
   ========================================================================== */
.titulo-display {
    font-family: var(--lemp-font-display);
    font-weight: var(--lemp-fw-thin);
    text-transform: uppercase;
    color: var(--lemp-color-text-main);
    line-height: var(--lemp-lh-display);
    letter-spacing: var(--lemp-ls-tight);
    margin: 0;
    text-wrap: balance;
}

/* Variação de escala para o Hero */
.titulo-display.titulo-hero {
    font-size: var(--lemp-font-hero);
    max-width: 1200px;
}

/* Variação de escala para "VAMOS CONVERSAR" */
.titulo-display.titulo-contato {
    font-size: var(--lemp-font-display-lg);
    line-height: 0.95;
    margin-bottom: var(--lemp-space-lg);
}

/* Variação de escala para o manifesto da seção Serviços */
.titulo-display.titulo-servicos {
    font-size: var(--lemp-font-services-hero);
    margin-bottom: var(--lemp-space-xl);
}

/* Títulos secundários de pilares (BRANDING, DESIGN, WEB) */
.titulo-pilar {
    font-family: var(--lemp-font-display);
    font-size: var(--lemp-font-pillar-title);
    font-weight: var(--lemp-fw-light);
    text-transform: uppercase;
    letter-spacing: var(--lemp-ls-wide);
    color: var(--lemp-color-text-main);
    margin-bottom: var(--lemp-space-md);
}


/* ==========================================================================
   3. CAMPO DE LINHA PARA FORMULÁRIO (.campo-linha)
   Campos minimalistas do PDF: apenas a linha inferior divisória,
   fundo transparente, labels discretos em caixa alta e foco responsivo.
   ========================================================================== */
.campo-linha-grupo {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

/* Label posicionado acima da linha, em caixa alta com tracking */
.campo-linha-label {
    display: inline-block;
    font-family: var(--lemp-font-display);
    font-size: var(--lemp-font-label);
    font-weight: var(--lemp-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--lemp-ls-wide);
    color: var(--lemp-color-text-main);
    margin-bottom: 0.35rem;
    pointer-events: none;
}

/* Input linear sem bordas laterais ou superior */
.campo-linha {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--lemp-color-line-input);
    border-radius: 0;
    background: transparent;
    padding: 0.5rem 0;
    font-family: var(--lemp-font-body);
    font-size: var(--lemp-font-body-size);
    font-weight: var(--lemp-fw-regular);
    color: var(--lemp-color-text-main);
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-bottom-color var(--lemp-trans-fast);
}

/* Placeholder discreto */
.campo-linha::placeholder {
    color: #999999;
    font-weight: var(--lemp-fw-light);
    opacity: 0.7;
}

/* Estado de foco: a linha inferior assume a cor de destaque principal (#1A1A1A) */
.campo-linha:focus {
    border-bottom-color: var(--lemp-color-line-focus);
    border-bottom-width: 1.5px;
    background: transparent;
}

/* Suporte para textarea (campo MENSAGEM) */
textarea.campo-linha {
    min-height: 80px;
    resize: vertical;
    line-height: var(--lemp-lh-body);
}

/* Feedback visual de validação do formulário */
.form-feedback {
    margin-top: 1rem;
    font-size: 0.88rem;
    font-family: var(--lemp-font-body);
    transition: all var(--lemp-trans-fast);
}

.form-feedback.sucesso {
    color: #2F7D4F;
}

.form-feedback.erro {
    color: #C0392B;
}

.form-feedback.info {
    color: var(--lemp-color-text-muted);
}

/* ==========================================================================
   4. BANNER DE COOKIES LGPD (.cookie-banner)
   Discreto, elegante e totalmente alinhado à estética do estúdio
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
    z-index: 9999;
    background-color: var(--lemp-color-header);
    color: var(--lemp-color-text-light);
    border-radius: var(--lemp-radius-card);
    padding: 1.25rem 1.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: cookieFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cookieFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.cookie-texto {
    font-family: var(--lemp-font-body);
    font-size: 0.85rem;
    color: #D2D2D2;
    margin: 0;
    flex: 1 1 320px;
    line-height: 1.5;
}

.cookie-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-acoes .btn-pill {
    padding: 0.5rem 1.25rem;
    font-size: 0.72rem;
}

.cookie-acoes .btn-pill-dark {
    background-color: var(--lemp-color-text-light);
    color: var(--lemp-color-header);
    border-color: var(--lemp-color-text-light);
}

.cookie-acoes .btn-pill-dark:hover {
    background-color: transparent;
    color: var(--lemp-color-text-light);
}

.cookie-acoes .btn-pill-recusar {
    border-color: rgba(255, 255, 255, 0.35);
    color: #A0A0A0;
}

.cookie-acoes .btn-pill-recusar:hover {
    color: var(--lemp-color-text-light);
    border-color: var(--lemp-color-text-light);
}