/*
 * page-sections.css — Design System Conceito Y
 * Padrões compartilhados entre todas as páginas internas.
 *
 * ══════════════════════════════════════════════════════
 *  TOKENS DE DESIGN
 * ══════════════════════════════════════════════════════
 *
 *  Cores:
 *    --bg:      #060608  (fundo principal)
 *    --gray:    #0D0D12  (fundo alternativo de seção)
 *    --orange:  #FF5C00  (laranja da marca)
 *    --text:    #FAF6F2  (texto principal)
 *    --muted:   #8A8995  (texto secundário)
 *    --border:  #1A1A1F  (bordas)
 *
 *  Tipografia:
 *    Títulos (H1/H2):  Space Grotesk 700
 *    Corpo:            Outfit 400/500
 *
 *  H1 — Hero split (conteúdo + imagem):
 *    clamp(36px, 5.2vw, 70px) | line-height: 0.97
 *
 *  H1 — Hero centralizado (sem imagem):
 *    clamp(40px, 5vw, 64px) | line-height: 1
 *
 *  H2 — Título de seção interna:
 *    clamp(28px, 3.5vw, 44px) | line-height: 1.05
 *
 *  Eyebrow (label acima do título):
 *    11px | letter-spacing: 0.2em | uppercase | orange | 700
 *
 *  Texto corrido de seção:
 *    17px | line-height: 1.75 | var(--muted) | max-width: 760px
 *
 *  Seção — padding padrão:
 *    96px 64px  (mobile: 60px 20px)
 *
 *  Container interno:
 *    max-width: 1200px; margin: 0 auto;
 *
 *  Alinhamento:
 *    Seções de conteúdo: esquerda (padrão)
 *    Hero sem imagem + CTA cards: centralizado
 *
 * ══════════════════════════════════════════════════════
 */

/* ══ RESET DE EYEBROW ══
   Garante que todos os eyebrows de seção sigam o mesmo padrão.
   Aplica sobre qualquer classe terminada em -label ou -eyebrow
   que não seja label da hero (hero-label já tem seu estilo). */

/* ══ UTILITÁRIOS REUTILIZÁVEIS ══ */

/* Seção padrão */
.cy-section {
    padding: 96px 64px;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.cy-section.alt {
    background: var(--gray);
}

/* Container interno */
.cy-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Eyebrow */
.cy-eye {
    font-size: 11px;
    color: var(--orange);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Título de seção (H2) */
.cy-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 44px);
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.cy-title span { color: var(--orange); }

/* Texto de seção */
.cy-text {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 760px;
}

.cy-text p { margin-bottom: 16px; }
.cy-text p:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
    .cy-section { padding: 60px 20px; }
}