/* ==========================================================
   REALEZA ACESSÓRIOS
   HOME v1.9
   /assets/css/home.css
========================================================== */

/* ==================================================
   SLIDE DA HOME — banner "duas bandas"
   Cadastro único (foto sempre 4:5 + título + texto curto +
   link do botão + cor de fundo da banda de texto — ver
   database/2026-08-25_slides.sql e CLAUDE.md). Duas bandas
   coladas (sem gap) no desktop/tablet, empilhado (foto em
   cima 100% da largura, texto embaixo) a partir de 600px —
   a foto usa TODO o espaço que sobrar depois da banda de
   texto (object-fit: cover), o "respiro" pedido pelo Luciano
   é o padding interno da própria banda de texto.
================================================== */

.hero-slider {
    position: relative;
    width: 100%;
    max-width: 1152px;
    height: 432px;
    margin: 0 auto 64px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-default);
}

.hero-slider-track {
    display: flex;
    height: 100%;
    transition: transform .6s ease;
}

.hero-slide {
    flex: 0 0 100%;
    display: flex;
    height: 100%;
}

.hero-slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    color: #FFFFFF;
    min-width: 0;
}

.hero-slide-title {
    max-width: 460px;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.hero-slide-text {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 28px;
    color: #FFFFFF;
    opacity: .92;
}

.hero-slide-btn {
    align-self: flex-start;
    background: #FFFFFF;
}

.hero-slide-btn:hover {
    opacity: .9;
}

/* Largura da banda da foto é a PRÓPRIA proporção 4:5 aplicada à
   altura do slide (432px). object-fit: contain (não cover!) porque
   a foto da Vanessa PRECISA aparecer inteira, sem cortar nada —
   mesmo que o arquivo real não seja EXATAMENTE 4:5 (a maioria não é
   pixel-perfeito), contain garante 100% da imagem visível sempre,
   na pior das hipóteses sobra uma tarja fina, nunca corta. Sobrou
   espaço horizontal no slide? Vira conteúdo (banda de texto,
   flex: 1 acima), nunca "esticar/cortar" a foto pra preencher. */

.hero-slide-photo {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 4 / 5;
    position: relative;
}

.hero-slide-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hero-slider-dots {
    position: absolute;
    left: 56px;
    bottom: 24px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.hero-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-default);
}

.hero-slider-dot.active {
    background: #FFFFFF;
    width: 24px;
    border-radius: 999px;
}

@media (max-width: 600px) {

    .hero-slider {
        height: auto;
        border-radius: var(--radius-md);
        margin-bottom: 40px;
    }

    .hero-slide {
        flex-direction: column;
        height: auto;
    }

    .hero-slide-photo {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .hero-slide-content {
        flex: none;
        width: 100%;
        padding: 32px 24px 40px;
    }

    .hero-slide-title {
        font-size: 26px;
    }

    .hero-slider-dots {
        left: 50%;
        transform: translateX(-50%);
        bottom: 16px;
    }

}

/* ==================================================
   NOVIDADE DA SEMANA
================================================== */

.featured-product {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 60px;
    align-items: center;
}

.featured-product-image img {

    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    box-shadow:
        0 20px 60px rgba(0,0,0,.08);
    transition: .5s ease;
}

.featured-product-title {
    margin-bottom: 20px;
    font-size: 56px;
    line-height: 1.1;
}

.featured-product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    color: #d4a93a;
}

.featured-product-rating span {
    margin-left: 10px;
    color: var(--color-text);
}

.featured-product-old-price {
    display: block;
    text-decoration: line-through;
    opacity: .5;
    margin-bottom: 8px;
}

.featured-product-price {
    font-size: 52px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.featured-product-discount {
    display: inline-block;
    padding: 6px 12px;
    background: #dff5e1;
    color: #2e7d32;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.featured-product-installments {
    font-size: 18px;
    margin-bottom: 24px;
}

.featured-product-description {
    max-width: 600px;
    margin-bottom: 32px;
    line-height: 1.8;
}

/* ==================================================
   SOBRE A REALEZA
================================================== */

.about-home {
    padding: 70px 0;
}

.about-home-grid {
    display: grid;
    grid-template-columns: 500px 520px;
    justify-content: center;
    gap: 70px;
    align-items: center;
}

.about-home-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.about-home-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: #f4d28c;
    color: #5a4534;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.about-home-content h2 {
    max-width: 620px;
    margin-bottom: 28px;
    margin: 0 0 28px;
    line-height: 1.15;
}

.about-home-content p {
    max-width: 540px;
    margin-bottom: 18px;
    line-height: 1.85;
    font-size: 1.05rem;
}

.about-home-content {
    width: 100%;
}

/* ==================================================
   DO PRIMEIRO CLIQUE ATÉ A SUA CASA
   6 passos com foto real (assets/img/vanessa/) — mesmo padrão de
   card de imagem já usado em ".about-home-image"/".showcase-image"
   (aspect-ratio 4/5, object-fit:cover, .image-hover-zoom pro hover).
   Virou carrossel (2026-08-02, print 14 do Luciano) — em mobile os
   6 passos empilhados em 1 coluna deixavam a página excessivamente
   alta (verticalizada). Reaproveita o MESMO componente genérico
   `.carousel`/`.carousel-viewport`/`.carousel-track` já usado em
   "Feitas para Impressionar" (assets/js/carousel.js já inicializa
   qualquer `.carousel` da página sozinho, sem JS novo) — autoplay
   infinito + arraste por mouse/toque de graça, em vez de reinventar.
================================================== */

.processo-home {
    padding: 70px 0;
}

/* Centraliza o ".section-badge" (é inline-flex, então centraliza via
   text-align no container — mesma técnica já usada em
   ".home-showcase > .container") */

.processo-home > .container {
    text-align: center;
}

.processo-step {
    flex: 0 0 300px;
    text-align: center;
}

.processo-image {
    position: relative;
    margin-bottom: 20px;
}

.processo-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.processo-number {
    position: absolute;
    top: 12px;
    left: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 500;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.processo-step h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.processo-step p {
    font-size: 15px;
    color: var(--color-text-light);
}

/* ==================================================
   BENEFÍCIOS
================================================== */

.benefits-home {
    padding: 70px 0;
}

.benefits-home .section-title {
    text-align: center;
    margin-bottom: 60px;
}

.benefits-home .section-title h2 {
    margin-bottom: 12px;
}

.benefits-home .section-title p {
    margin: 0;
}

/* .benefits-grid / .benefit-card viraram componente compartilhado em
   assets/css/layout.css (2026-08-01) — usados aqui na Home E em
   sobre.php. Não redefinir aqui: ver layout.css. */

/* ==================================================
   BRILHE EM QUALQUER OCASIÃO
================================================== */

.home-showcase {
    padding: 80px 60px;
    background: var(--color-secondary);
    border-radius: var(--radius-lg);
    margin: 60px 0;
}

.home-showcase > .container {
    text-align: center;
}

.home-showcase .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.home-showcase .section-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.showcase-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.showcase-card {
    text-align: center;
    width: 300px;
}

.showcase-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    transition: transform .45s ease;
}

.showcase-image {
    margin-bottom: 20px;
}

.showcase-card h3 {
    margin-bottom: 10px;
}

.showcase-card span {
    display: block;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--color-primary);
}

/* ==================================================
   FEITAS PARA IMPRESSIONAR
================================================== */

.home-inspiration {
    padding: 90px 0;
}

.home-inspiration .section-header{
    text-align:center;
    margin-bottom:60px;
}

.inspiration-footer{
    margin-top:50px;
    text-align:center;
}

.carousel {
    width: 100%;
    position: relative;
}

.carousel-viewport {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    width: max-content;
    will-change: transform;
}

/* Mesma largura padrão das demais grades de card da Home (300px,
   proporção 4:5) — antes era 260px, um valor solto sem relação com
   showcase-card/processo-grid/instagram-grid. */

.carousel-track .inspiration-card,
.inspiration-card {
    flex: 0 0 300px;
    text-align: center;
}

.inspiration-image{
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom:18px;
}

.inspiration-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.inspiration-card:hover img{
    transform: scale(1.06);
}

.inspiration-card h3 {
    font-size: 20px;
    line-height: 1.25;
    min-height: 52px;
    margin-bottom: 0;
}

/* ==================================================
   SIGA NO INSTAGRAM
   Grade de posts reais (embed oficial do Instagram, sem token) —
   enquanto um slot não tem post real colado, mostra um estado vazio
   elegante ("Em breve" + link pro perfil), nunca espaço quebrado.
================================================== */

.instagram-home {
    padding: 70px 0;
    text-align: center;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: center;
    gap: 24px;
}

/* Voltou pra 1:1 (2026-07-31) — a Vanessa gera as artes com IA e nem
   sempre sai numa proporção previsível (já apareceu 4:3, 5:4 etc.); o
   Luciano padronizou recortando pra quadrado no Photoshop antes de
   postar, então o quadrado é o formato real que a gente recebe, não o
   4:5 usado no resto do site. Não copiar esse valor pras outras seções. */

.instagram-slot {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-secondary);
}

.instagram-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.instagram-slot a:hover img {
    transform: scale(1.06);
}

/* Estado vazio — sem post real colado ainda */

.instagram-slot-empty {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--color-primary);

    transition: var(--transition-default);
}

.instagram-slot-empty:hover {
    background: var(--color-border);
}

.instagram-slot-empty i {
    font-size: 32px;
}

.instagram-slot-empty span {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-light);
}

/* Quando um post real (blockquote do Instagram) é colado no slot,
   ele já vem com seu próprio estilo/iframe — ocupa o slot inteiro */

.instagram-slot iframe {
    width: 100% !important;
    min-width: 0 !important;
}

.instagram-footer {
    margin-top: 40px;
}

/* ==================================================
   RESPONSIVO — TABLET (≤991px)
   Empilha as duas grades de largura fixa (Novidade da Semana e
   Sobre a Realeza) em 1 coluna — imagem em cima, texto embaixo,
   igual nas duas (a imagem já vem primeiro no HTML dos dois blocos).
================================================== */

@media (max-width: 991px) {

    .featured-product {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .featured-product-title {
        font-size: 40px;
    }

    .featured-product-price {
        font-size: 40px;
    }

    .featured-product-description {
        max-width: 100%;
    }

    .about-home-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-home-image,
    .about-home-content {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }

    .about-home-content h2,
    .about-home-content p {
        max-width: 100%;
    }

    .home-showcase {
        padding: 56px 32px;
    }

    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================================================
   RESPONSIVO — MOBILE (≤600px)
================================================== */

@media (max-width: 600px) {

    .featured-product-title {
        font-size: 32px;
    }

    .featured-product-price {
        font-size: 32px;
    }

    .home-showcase {
        padding: 40px 20px;
        margin: 40px 0;
    }

    .showcase-grid {
        gap: 24px;
    }

    .showcase-card {
        width: 100%;
        max-width: 300px;
    }

    .about-home {
        padding: 48px 0;
    }

    .processo-home {
        padding: 48px 0;
    }

    .benefits-home {
        padding: 48px 0;
    }

    .home-inspiration {
        padding: 56px 0;
    }

    .carousel-track {
        gap: 20px;
    }

    .carousel-track .inspiration-card,
    .inspiration-card,
    .carousel-track .processo-step,
    .processo-step {
        flex: 0 0 200px;
    }

    .instagram-home {
        padding: 48px 0;
    }

    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}