@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* Paleta Aro Acessórios */
    --color-bg: #022620;
    /* Verde Esmeralda Profundo [cite: 4] */
    --color-accent: #D4AF37;
    /* Dourado Metálico [cite: 4] */
    --color-text-main: #F2F0E6;
    /* Off-White/Beige [cite: 5] */
    --color-text-muted: #A8A8A8;
    --glass-bg: rgba(255, 255, 255, 0.05);

    /* Espaçamentos */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Fontes */
    --font-title: 'Playfair Display', serif;
    /* [cite: 6] */
    --font-body: 'Montserrat', sans-serif;
    /* [cite: 6] */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Mantém configurações de fonte */
    font-family: var(--font-body);
    color: var(--color-text-main);
    min-height: 100vh;
    overflow-x: hidden;
    /* Remove cor sólida */
    background-color: transparent;
}

/* Novo Fundo com Blur */
body::before {
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* Margem de segurança para o blur */
    background: url('./bac1.jpg') no-repeat center center;
    background-size: cover;
    filter: blur(5px);
    /* Desfoque baixo solicitado */
    z-index: -1;
}

/* Contraste de texto para fundo claro */
h1,
h2,
h3,
p,
span,
a {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Sombra para contraste */
}

#app {
    width: 100%;
    max-width: 480px;
    /* Largura mobile */
    padding: var(--spacing-lg);
    position: relative;
}

/* --- ETAPA 2: HERO SECTION --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: var(--spacing-md);
    margin-bottom: 2rem;
    width: 100%;
    position: relative;
    z-index: 10;
}

.avatar-container {
    position: relative;
    margin-bottom: var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
}

/* O Avatar (Imagem) */
.avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent);
    /* Borda Dourada */
    background-color: #000;
    position: relative;
    z-index: 2;
}

/* Animação de Respiração (Glow) */
.avatar-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    z-index: 1;
    opacity: 0.4;
    animation: pulse-gold 3s infinite ease-in-out;
}

@keyframes pulse-gold {
    0% {
        transform: scale(0.95);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.2;
    }
}

/* Tipografia do Hero */
.profile-name {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 400;
    /* Playfair fica melhor regular ou light */
    color: var(--color-text-main);
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.profile-bio {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-main);
    opacity: 0.85;
    font-weight: 300;
    /* Alterado de 400 para 300 conforme solicitado no CSS original */
    max-width: 90%;
    line-height: 1.4;
}

/* --- ETAPA 3: DESTAQUE VISUAL (MOOD SETTER) --- */
.highlight-card {
    width: 100%;
    margin-bottom: var(--spacing-lg);
    border-radius: 24px;
    /* Arredondado maior */
    overflow: hidden;

    /* Moldura de Vidro */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.highlight-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    /* Mantém proporção retangular bonita */
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Efeito de Zoom leve ao tocar/passar mouse */
.highlight-card:hover .highlight-image {
    transform: scale(1.05);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ETAPA 4: MENU CONCIERGE (BOTÕES) --- */
.links-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.6s;
    /* Aparece depois do destaque */
}

.link-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.2rem 1.5rem;
    /* Botões mais altos */
    text-decoration: none;

    /* LIQUID GLASS STYLE */
    background: rgba(255, 255, 255, 0.15);
    /* Vidro leitoso */
    backdrop-filter: blur(20px) saturate(180%);
    /* Desfoque potente e cores vivas */
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border-radius: 50px;
    /* Cápsula/Pílula perfeita */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Borda de luz */

    /* Efeito de Volume/Reflexo 3D */
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.2),
        /* Sombra projetada suave */
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    /* Brilho superior interno */

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: var(--spacing-md);
    /* Espaçamento entre botões */
}

.link-btn:active,
.link-btn:hover {
    transform: scale(0.98);
    /* Efeito de clique tátil */
    background: rgba(255, 255, 255, 0.25);
    /* Mais brilho ao tocar */
    box-shadow:
        0 4px 16px 0 rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.link-icon {
    font-size: 1.5rem;
    color: #fff;
    /* Ícone branco puro */
    margin-right: 1.2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.link-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.link-arrow {
    margin-left: auto;
    /* Empurra seta para direita */
    opacity: 0.5;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* --- ETAPA 5: LIFESTYLE SLIDER --- */
.gallery-section {
    width: 100%;
    margin-top: var(--spacing-lg);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.9s;
}

.gallery-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-style: italic;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* Container com Scroll Horizontal (Estilo Stories) */
.gallery-container {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    /* Espaço para scrollbar ou sombra */
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);

    /* Scroll Snap Physics */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Suavidade no iOS */
    scrollbar-width: none;
    /* Esconde barra no Firefox */
}

.gallery-container::-webkit-scrollbar {
    display: none;
    /* Esconde barra no Chrome/Safari */
}

.gallery-item {
    flex: 0 0 80%;
    /* Ocupa 80% da largura para mostrar que tem mais ao lado */
    aspect-ratio: 4/5;
    /* Formato Instagram Portrait */
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: center;
    /* Centraliza ao soltar */
    position: relative;

    /* Acabamento Glass na Borda */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Zoom leve ao passar o dedo */
.gallery-item:active .gallery-img {
    transform: scale(1.05);
}

/* --- ETAPA 6: POLIMENTO (LOADER & FOOTER) --- */

/* Loading Spinner */
.loader-container {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-accent);
    /* Dourado */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Rodapé Minimalista */
.footer {
    text-align: center;
    padding: 2rem 0 1rem;
    width: 100%;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 1.2s;
    /* O último a aparecer */
}

.footer-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
}