/* ============================================================
   RENATA MOCELIN NAILS ACADEMY — UI SIZE SYSTEM
   Foco: tamanhos, hierarquia, line-height e ritmo.
   Não substitui as famílias tipográficas das páginas.
============================================================ */

:root {
    --fs-label: 12px;
    --fs-small: 13px;
    --fs-body: 16px;
    --fs-body-lg: 17px;
    --fs-card: 22px;
    --fs-subsection: 28px;
    --fs-section: clamp(38px, 3.4vw, 50px);
    --fs-page: clamp(50px, 5vw, 64px);
    --fs-home: clamp(62px, 6.4vw, 84px);
    --section-space: 82px;
    --section-space-compact: 54px;
    --page-top-space: 46px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--fs-body);
    line-height: 1.62;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.hero-title {
    font-size: var(--fs-home);
    line-height: .98;
}

.loja-hero h1,
.cursos-hero h1,
.portfolio-hero h1,
.agenda-hero h1,
.produto-conteudo h1,
.pagina-interna h1 {
    font-size: var(--fs-page);
    line-height: 1.04;
}

.secao-cabecalho h2,
.servicos-topo h2,
.sobre-conteudo h2,
.portfolio-home-topo h2,
.estilos-cabecalho h2,
.academy h2,
.faq-introducao h2,
.loja-secao-cabecalho h2,
.loja-interesse-box h2,
.catalog-header h2,
.cursos-cta h2,
.portfolio-introducao-grid h2,
.portfolio-cta h2 {
    font-size: var(--fs-section);
    line-height: 1.08;
}

.produto-detalhes h2,
.produto-uso h2,
.portfolio-tecnica-conteudo h2,
.agenda-calendario-topo h3 {
    font-size: var(--fs-subsection);
    line-height: 1.12;
}

.servico-premium h3,
.portfolio-home-overlay h3,
.estilo-card h3,
.poster-card h3,
.produto-card-info h3,
.produto-caracteristicas h3,
.loja-passo strong {
    font-size: var(--fs-card);
    line-height: 1.2;
}

.hero-description,
.loja-hero p,
.cursos-hero p,
.portfolio-hero p,
.agenda-hero p,
.produto-resumo {
    font-size: var(--fs-body-lg);
    line-height: 1.68;
}

.secao-etiqueta,
.pagina-etiqueta,
.agenda-etiqueta,
.portfolio-hero-etiqueta,
.section-kicker,
.loja-kicker,
.loja-etiqueta,
.produto-marca,
.produto-kicker {
    font-size: var(--fs-label);
    line-height: 1.25;
}

small,
.texto-auxiliar,
.agenda-ajuda,
.agenda-resumo-seguranca {
    font-size: var(--fs-small);
}

/* Ritmo vertical */
main section:not(.hero):not(.pagina-interna) {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.loja-page > section,
.cursos-page > section,
.produto-page > section {
    max-width: none;
    margin-inline: 0;
}

.loja-hero,
.cursos-hero { padding-top: var(--page-top-space); }
.produto-topo { padding-top: 38px; }

.agenda-hero-conteudo,
.portfolio-hero-conteudo {
    padding-top: 54px;
    padding-bottom: 60px;
}

.loja-como-funciona {
    padding-top: 28px;
    padding-bottom: 10px;
}

.loja-produtos,
.catalog-section { padding-top: var(--section-space-compact); }

.produto-detalhes,
.produto-uso {
    padding-top: 58px;
    padding-bottom: 58px;
}

/* CTAs */
.btn,
.btn-primary,
.btn-secundario,
.btn-outline,
.btn-gold,
.hero-actions a,
.academy-acoes a,
.sobre-acoes a,
.portfolio-cta a,
.cursos-cta a,
.loja-hero-acoes a,
.produto-acoes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.cursos-hero-actions .btn-gold,
.cursos-hero-actions .btn-outline {
    white-space: nowrap;
    text-wrap: nowrap;
}

@media (max-width: 768px) {
    :root {
        --fs-label: 11px;
        --fs-small: 12px;
        --fs-body: 15px;
        --fs-body-lg: 15.5px;
        --fs-card: 20px;
        --fs-subsection: 24px;
        --fs-section: clamp(30px, 8vw, 34px);
        --fs-page: clamp(36px, 9vw, 40px);
        --fs-home: clamp(42px, 11vw, 48px);
        --section-space: 50px;
        --section-space-compact: 38px;
        --page-top-space: 24px;
    }

    body { line-height: 1.6; }

    /* Bottom nav já possui “Mais”. */
    .mobile-more-trigger { display: none !important; }

    .loja-hero {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .cursos-hero {
        padding-top: 30px;
        padding-bottom: 44px;
    }

    .produto-topo {
        padding-top: 22px;
        padding-bottom: 44px;
    }

    .agenda-hero-conteudo,
    .portfolio-hero-conteudo {
        min-height: auto;
        padding-top: 36px;
        padding-bottom: 46px;
    }

    main section:not(.hero):not(.pagina-interna) {
        padding-top: var(--section-space);
        padding-bottom: var(--section-space);
    }

    .secao-cabecalho,
    .catalog-header,
    .loja-secao-cabecalho,
    .portfolio-home-topo,
    .estilos-cabecalho { margin-bottom: 28px; }

    .loja-como-funciona { padding: 26px 0 8px; }
    .loja-produtos { padding-top: 44px; padding-bottom: 56px; }
    .catalog-section { padding-top: 40px; }
    .produto-detalhes,
    .produto-uso { padding-top: 46px; padding-bottom: 46px; }
    .agenda-layout { padding-top: 42px; }

    .btn,
    .btn-primary,
    .btn-secundario,
    .btn-outline,
    .btn-gold,
    .hero-actions a,
    .academy-acoes a,
    .sobre-acoes a,
    .portfolio-cta a,
    .cursos-cta a,
    .loja-hero-acoes a,
    .produto-acoes a {
        min-height: 54px;
        padding: 12px 18px;
        font-size: 15px;
        line-height: 1.05;
    }

    .cursos-hero-actions .btn-gold,
    .cursos-hero-actions .btn-outline {
        width: 100%;
        white-space: nowrap;
        text-wrap: nowrap;
    }
}

@media (max-width: 420px) {
    :root {
        --fs-page: 36px;
        --fs-section: 30px;
        --fs-subsection: 23px;
        --fs-card: 19px;
        --fs-home: 42px;
        --section-space: 46px;
        --page-top-space: 20px;
    }

    .loja-container,
    .produto-container,
    .cursos-page .container { width: calc(100% - 28px); }

    .cursos-hero-actions .btn-gold,
    .cursos-hero-actions .btn-outline {
        min-height: 54px;
        padding-inline: 14px;
        font-size: 14px;
    }
}