/* ==========================================================================
   Seção: Atendentes — Wrapper & Header
   Estética Oráculo · Luxo minimalista escuro · Dourado champagne
   ========================================================================== */

.flavor-section--atendentes {
    --ora-bg-primary:         #0B0A09;
    --ora-bg-secondary:       #100F0D;
    --ora-surface:            #171513;
    --ora-surface-elevated:   #1D1B18;
    --ora-border:             #2A2622;
    --ora-border-strong:      #3D3830;
    --ora-border-focus:       #C9A96E;
    --ora-text-primary:       #F2EDE7;
    --ora-text-secondary:     #A09889;
    --ora-text-muted:         #5C5549;
    --ora-text-inverse:       #0B0A09;
    --ora-cta:                #C9A96E;
    --ora-cta-hover:          #B8944F;
    --ora-accent:             #D4BA82;
    --ora-accent-glow:        rgba(201, 169, 110, 0.15);
    --ora-font:               'Outfit', sans-serif;
    --ora-font-display:       'Cormorant Garamond', Georgia, serif;
    --ora-radius-base:        8px;
    --ora-transition-base:    0.25s ease;
}

/* ── Container ───────────────────────────────────────────────────────────── */
.flavor-section--atendentes {
    background-color: var(--ora-bg-primary);
    padding: 80px 0 96px;
    position: relative;
    overflow: hidden;
    font-family: var(--ora-font);
    color: var(--ora-text-primary);
}

/* Noise texture */
.flavor-section--atendentes::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.flavor-section--atendentes > * {
    position: relative;
    z-index: 1;
}

/* ── Filete dourado ──────────────────────────────────────────────────────── */
.atendentes__filete {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, #C9A96E 30%, #D4BA82 50%, #C9A96E 70%, transparent 95%);
    margin-bottom: 64px;
    position: relative;
}

.atendentes__filete::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -100%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(212, 186, 130, 0.5), transparent);
    animation: filete-shimmer 4s ease-in-out infinite;
}

@keyframes filete-shimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.atendentes__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
    padding: 0 24px;
}

.atendentes__eyebrow {
    display: inline-block;
    font-family: var(--ora-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ora-cta);
    margin-bottom: 16px;
}

.atendentes__title {
    font-family: var(--ora-font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    font-style: italic;
    color: var(--ora-text-primary);
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.atendentes__subtitle {
    font-family: var(--ora-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--ora-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Divider ornamental */
.atendentes__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    gap: 12px;
}

.atendentes__divider::before,
.atendentes__divider::after {
    content: '';
    flex: 0 0 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ora-border-strong));
}

.atendentes__divider::after {
    background: linear-gradient(90deg, var(--ora-border-strong), transparent);
}

.atendentes__divider-diamond {
    color: var(--ora-cta);
    font-size: 10px;
    opacity: 0.6;
}

/* ── Wrapper do grid ─────────────────────────────────────────────────────── */
.atendentes__grid-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Animação de entrada ─────────────────────────────────────────────────── */
.atendentes__header,
.atendentes__grid-wrapper {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.atendentes__header.is-visible,
.atendentes__grid-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.atendentes__grid-wrapper {
    transition-delay: 0.15s;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .flavor-section--atendentes { padding: 64px 0 72px; }
    .atendentes__filete          { margin-bottom: 48px; }
    .atendentes__header          { margin-bottom: 40px; }
}

@media (max-width: 768px) {
    .flavor-section--atendentes { padding: 48px 0 56px; }
    .atendentes__filete          { margin-bottom: 36px; }
    .atendentes__header          { margin-bottom: 32px; }
    .atendentes__eyebrow         { font-size: 10px; }
    .atendentes__subtitle        { font-size: 14px; }
}

@media (max-width: 480px) {
    .atendentes__grid-wrapper { padding: 0 16px; }
    .atendentes__header        { padding: 0 16px; }
}