/* ==========================================================================
   AMOR NATURAL — Página Capa (home)
   Adaptado de design-reference/index.html + styles.css. Classes prefixadas
   com an- para não colidir com Astra/WooCommerce/Spectra. Carregado só na
   home (is_front_page()) — ver functions.php.
   ========================================================================== */

/* A home tem seu próprio título dentro do hero — esconde o title bar padrão do Astra */
.entry-header.ast-no-thumbnail { display: none; }

/* Evita que a barra superior/cabeçalho fixo cubra a seção ao usar o link #newsletter */
#newsletter { scroll-margin-top: 140px; }

.an-home-section { padding: 72px 0; }
.an-home-section-tight { padding: 56px 0; }
.an-home-bg-tinted {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--bg-accent);
    border-bottom: 1px solid var(--bg-accent);
}

.an-home-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.an-home-head-center { text-align: center; margin-bottom: 40px; }

.an-home-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--brand-green-dark);
    line-height: 1.2;
    margin: 0;
}

.an-home-lead { font-size: 15px; color: var(--text-secondary); margin-top: 8px; }

.an-home-link-arrow { font-size: 14px; font-weight: 600; color: var(--brand-green-main); white-space: nowrap; text-decoration: none; }
.an-home-link-arrow:hover { color: var(--brand-green-dark); }

/* ==========================================
   HERO
   ========================================== */
.an-hero-wrapper { position: relative; overflow: hidden; background: #112113; }

.an-hero-slides {
    display: flex;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.an-hero-slides::-webkit-scrollbar { display: none; }

.an-hero-slide { flex: 0 0 100%; scroll-snap-align: start; }

.an-hero-swipe-hint {
    position: absolute;
    bottom: 16px;
    right: 24px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    pointer-events: none;
}

.an-hero-banner {
    position: relative;
    padding: 84px 0;
    color: #FFF;
    background: radial-gradient(circle at 72% 45%, #1B3A20 0%, #0D1B0E 72%);
}

.an-hero-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.an-badge-gold {
    background: transparent;
    border: 1px solid rgba(214, 164, 73, 0.7);
    color: #E0B96A;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

.an-hero-title {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #fff;
}

.an-hero-title em { font-style: italic; color: var(--brand-sage); }
.an-hero-desc { font-size: 16.5px; opacity: 0.88; margin-bottom: 32px; max-width: 500px; line-height: 1.65; }
.an-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.an-hero-visual { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; }

.an-hero-mockup {
    position: relative;
    width: 290px;
    height: 370px;
    background-color: #24422A;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.an-hero-mockup--photo {
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255,255,255,0.25);
}

.an-hero-mockup--placeholder { border: 2px dashed rgba(255,255,255,0.3); }

.an-hero-mockup-icon { font-size: 48px; line-height: 1; opacity: 0.7; }

.an-hero-mockup-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-align: center;
    padding: 0 20px;
}

.an-hero-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--brand-green-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

/* ==========================================
   BARRA DE CONFIANÇA
   ========================================== */
.an-trust-bar { background-color: var(--bg-surface); border-bottom: 1px solid var(--bg-accent); padding: 22px 0; }
.an-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.an-trust-item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.an-trust-icon { font-size: 24px; line-height: 1; }
.an-trust-item strong { display: block; font-size: 13.5px; color: var(--brand-green-dark); font-weight: 700; }
.an-trust-item span { font-size: 12.5px; color: var(--text-muted); }

/* ==========================================
   CATEGORIAS (círculos)
   ========================================== */
.an-cat-circles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; }

.an-cat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    text-decoration: none !important;
}

.an-circle-visual {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 118px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    background-color: var(--brand-sage-light);
    border: 1px solid transparent;
    transition: var(--transition-normal);
}

.an-circle-c2 { background-color: #F1EADC; }
.an-circle-c4 { background-color: #E7EFE6; }
.an-circle-c6 { background-color: #F5EEE4; }
.an-circle-c8 { background-color: #EAF0E9; }

.an-cat-circle:hover .an-circle-visual { transform: translateY(-4px); border-color: var(--brand-sage); box-shadow: var(--shadow-soft); }

.an-circle-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }

/* ==========================================
   BUSQUE POR BENEFÍCIO
   ========================================== */
.an-benefits-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }

.an-benefit-tile {
    background-color: var(--bg-surface);
    border: 1px solid var(--bg-accent);
    border-radius: var(--radius-md);
    padding: 28px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    transition: var(--transition-normal);
}

.an-benefit-tile:hover { border-color: var(--brand-sage); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.an-benefit-icon { font-size: 30px; line-height: 1; }
.an-benefit-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); text-align: center; line-height: 1.35; }

/* ==========================================
   LINHAS / MARCAS
   ========================================== */
.an-brands-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.an-brand-chip {
    background-color: var(--bg-main);
    border: 1px solid var(--bg-accent);
    color: var(--text-secondary);
    padding: 12px 26px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================
   INSTAGRAM
   ========================================== */
.an-insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.an-insta-tile {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.an-insta-tile::after { content: "📷"; opacity: 0.35; }
.an-insta-tile:hover { opacity: 0.85; transform: translateY(-2px); }
.an-insta-c1 { background-color: #DCE7DA; }
.an-insta-c2 { background-color: #E9E2D2; }
.an-insta-c3 { background-color: #E4EDDF; }
.an-insta-c4 { background-color: #EFE7D8; }
.an-insta-c5 { background-color: #DFE9DD; }
.an-insta-c6 { background-color: #E8E1D0; }

/* Produtos WooCommerce embutidos na home (shortcodes) herdam o card padrão
   do site (theme/style.css) — aqui só ajustamos o espaçamento do wrapper. */
.an-home-products.woocommerce ul.products { margin: 0; }

/* ==========================================
   RESPONSIVO
   ========================================== */
@media (max-width: 1100px) {
    .an-cat-circles { grid-template-columns: repeat(4, 1fr); row-gap: 26px; }
    .an-benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .an-insta-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .an-trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .an-trust-item { justify-content: flex-start; }

    .an-hero-container { grid-template-columns: 1fr; text-align: center; }
    .an-hero-actions { justify-content: center; }
    .an-hero-desc { margin-left: auto; margin-right: auto; }
    .an-hero-title { font-size: 34px; }
    .an-hero-banner { padding: 56px 0; }
    .an-hero-visual { height: 300px; }
    .an-hero-mockup { width: 220px; height: 270px; }

    .an-home-section { padding: 48px 0; }
    .an-home-section-tight { padding: 40px 0; }
    .an-home-title { font-size: 26px; }
}

@media (max-width: 560px) {
    .an-cat-circles { grid-template-columns: repeat(3, 1fr); }
    .an-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .an-trust-grid { grid-template-columns: 1fr; }
    .an-home-head-row { align-items: flex-start; }
}