/* =============================================================
   custom.css — Crescendo no Caminho
   Estilos das seções, templates e componentes específicos
   ============================================================= */

/* ---------------------------------------------------------------
   HERO — PÁGINA INICIAL
   --------------------------------------------------------------- */
.cnc-hero {
    position:   relative;
    background: var(--cor-secundaria);
    padding:    5rem 0 4.5rem;
    overflow:   hidden;
}

/* Pattern de pontos SVG sutil no fundo */
.cnc-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%238B6F47' opacity='0.12'/%3E%3C/svg%3E");
    pointer-events: none;
}

.cnc-hero__conteudo {
    position:   relative;
    max-width:  700px;
    text-align: center;
    margin:     0 auto;
}

.cnc-hero__titulo {
    font-family:   var(--fonte-titulo);
    font-size:     clamp(2rem, 5vw, 3rem);
    color:         var(--cor-texto);
    margin-bottom: 1.25rem;
    line-height:   1.2;
}

.cnc-hero__subtitulo {
    font-size:     1.125rem;
    color:         #5a4a38;
    margin-bottom: 2.25rem;
    line-height:   var(--line-height);
}

.cnc-hero__botoes {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1rem;
    justify-content: center;
}

/* ---------------------------------------------------------------
   SEÇÃO: ÚLTIMOS ARTIGOS
   --------------------------------------------------------------- */
.cnc-ultimos-artigos {
    padding:    4.5rem 0;
    background: var(--cor-branco-quente);
}

/* ---------------------------------------------------------------
   SEÇÃO: CATEGORIAS GRID
   --------------------------------------------------------------- */
.cnc-categorias {
    padding:    4.5rem 0;
    background: var(--cor-secundaria);
}

.cnc-categorias-grid {
    display: grid;
    gap:     1.25rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .cnc-categorias-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .cnc-categorias-grid { grid-template-columns: repeat(5, 1fr); }
}

.cnc-categoria-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.75rem;
    padding:         1.5rem 1rem;
    background:      var(--cor-branco-quente);
    border-radius:   var(--raio-lg);
    text-decoration: none;
    color:           var(--cor-texto);
    box-shadow:      var(--sombra-card);
    transition:      box-shadow var(--transicao), transform var(--transicao), background var(--transicao);
    text-align:      center;
}

.cnc-categoria-item:hover {
    box-shadow:      var(--sombra-card-hover);
    transform:       translateY(-4px);
    background:      var(--cor-primaria);
    color:           #fff;
    text-decoration: none;
}

.cnc-categoria-item:hover .cnc-categoria-icone svg {
    stroke: #fff;
}

.cnc-categoria-icone {
    width:  52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnc-categoria-icone svg {
    width:     36px;
    height:    36px;
    stroke:    var(--cor-acento);
    fill:      none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--transicao);
}

.cnc-categoria-nome {
    font-weight: 600;
    font-size:   0.9rem;
    line-height: 1.3;
}

/* ---------------------------------------------------------------
   SEÇÃO: SOBRE
   --------------------------------------------------------------- */
.cnc-sobre {
    padding:    4.5rem 0;
    background: var(--cor-branco-quente);
}

.cnc-sobre__inner {
    display:     flex;
    gap:         3rem;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 768px) {
    .cnc-sobre__inner { flex-direction: row; }
}

.cnc-sobre__texto {
    flex: 1;
}

.cnc-sobre__titulo {
    font-family:   var(--fonte-titulo);
    font-size:     var(--tamanho-h2);
    margin-bottom: 1rem;
}

.cnc-sobre__texto p {
    font-size:   1.05rem;
    color:       #4a3728;
    line-height: var(--line-height);
}

.cnc-sobre__ilustracao {
    flex-shrink: 0;
}

.cnc-sobre__ilustracao svg {
    width:   160px;
    height:  160px;
    opacity: 0.85;
}

/* ---------------------------------------------------------------
   SEÇÃO: LEAD MAGNET / CAPTURA DE EMAIL
   --------------------------------------------------------------- */
.cnc-lead-magnet {
    background: var(--cor-primaria);
    padding:    4.5rem 0;
    color:      #fff;
}

.cnc-lead-magnet__inner {
    max-width:  640px;
    margin:     0 auto;
    text-align: center;
}

.cnc-lead-magnet__titulo {
    font-family:   var(--fonte-titulo);
    font-size:     clamp(1.5rem, 3vw, 2rem);
    color:         #fff;
    margin-bottom: 0.75rem;
}

.cnc-lead-magnet__subtitulo {
    font-size:     1.05rem;
    color:         rgba(255, 255, 255, 0.88);
    margin-bottom: 2rem;
    line-height:   var(--line-height);
}

.cnc-lead-form {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.75rem;
}

.cnc-lead-form__campo {
    flex:          1;
    min-width:     200px;
    padding:       0.75rem 1rem;
    border:        2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--raio);
    background:    rgba(255, 255, 255, 0.15);
    color:         #fff;
    font-family:   var(--fonte-corpo);
    font-size:     1rem;
    transition:    border-color var(--transicao), background var(--transicao);
}

.cnc-lead-form__campo::placeholder { color: rgba(255, 255, 255, 0.65); }

.cnc-lead-form__campo:focus {
    outline:      none;
    border-color: rgba(255, 255, 255, 0.8);
    background:   rgba(255, 255, 255, 0.22);
}

.cnc-lead-form__btn {
    padding:       0.75rem 1.75rem;
    background:    var(--cor-acento);
    color:         #fff;
    border:        2px solid var(--cor-acento);
    border-radius: var(--raio);
    font-family:   var(--fonte-corpo);
    font-size:     1rem;
    font-weight:   700;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background var(--transicao), transform var(--transicao);
}

.cnc-lead-form__btn:hover {
    background:   #5a6b4e;
    border-color: #5a6b4e;
    transform:    translateY(-2px);
}

.cnc-lead-form__sucesso {
    display:       none;
    margin-top:    1.5rem;
    padding:       1rem 1.5rem;
    background:    rgba(255, 255, 255, 0.2);
    border-radius: var(--raio);
    font-weight:   600;
    font-size:     1.05rem;
}

.cnc-lead-form__sucesso.visivel { display: block; }

/* ---------------------------------------------------------------
   SEÇÃO: PRODUTOS EM DESTAQUE
   --------------------------------------------------------------- */
.cnc-produtos-destaque {
    padding:    4.5rem 0;
    background: var(--cor-secundaria);
}

.cnc-produtos-grid {
    display: grid;
    gap:     1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .cnc-produtos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .cnc-produtos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Grid da página de loja (3 col / 2 tab / 1 mob) */
.cnc-loja-grid {
    display: grid;
    gap:     1.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .cnc-loja-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .cnc-loja-grid { grid-template-columns: repeat(3, 1fr); }
}

.cnc-produto-card {
    background:    var(--cor-branco-quente);
    border-radius: var(--raio-lg);
    box-shadow:    var(--sombra-card);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--transicao), transform var(--transicao);
}

.cnc-produto-card:hover {
    box-shadow: var(--sombra-card-hover);
    transform:  translateY(-3px);
}

.cnc-produto-card__img {
    aspect-ratio: 1/1;
    overflow:     hidden;
    background:   var(--cor-secundaria);
}

.cnc-produto-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.cnc-produto-card:hover .cnc-produto-card__img img {
    transform: scale(1.04);
}

.cnc-produto-card__corpo {
    padding:        1.25rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.cnc-produto-card__nome {
    font-family:   var(--fonte-titulo);
    font-size:     1.1rem;
    color:         var(--cor-texto);
    margin-bottom: 0.5rem;
}

.cnc-produto-card__desc {
    font-size:    0.9rem;
    color:        #5a4a38;
    flex:         1;
    margin-bottom: 0.75rem;
    line-height:  1.55;
}

.cnc-produto-card__preco {
    font-size:     1.2rem;
    font-weight:   700;
    color:         var(--cor-primaria);
    margin-bottom: 1rem;
}

.cnc-produto-card__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.65rem 1.25rem;
    background:      var(--cor-primaria);
    color:           #fff;
    border-radius:   var(--raio);
    font-weight:     600;
    font-size:       0.9rem;
    text-decoration: none;
    transition:      background var(--transicao);
    text-align:      center;
}

.cnc-produto-card__btn:hover {
    background:      var(--cor-hover);
    color:           #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   PÁGINA DE LOJA
   --------------------------------------------------------------- */
.cnc-loja-header {
    padding:    3.5rem 0 2rem;
    background: var(--cor-secundaria);
    text-align: center;
}

.cnc-loja-header__titulo {
    font-family:   var(--fonte-titulo);
    font-size:     var(--tamanho-h1);
    margin-bottom: 0.75rem;
}

.cnc-loja-header__subtitulo {
    font-size:  1.1rem;
    color:      #5a4a38;
    max-width:  600px;
    margin:     0 auto;
    line-height: var(--line-height);
}

.cnc-loja-conteudo {
    padding: 3rem 0 5rem;
}

/* ---------------------------------------------------------------
   PÁGINA DE CONTATO
   --------------------------------------------------------------- */
.cnc-contato-header {
    padding:    3.5rem 0 2rem;
    background: var(--cor-secundaria);
    text-align: center;
}

.cnc-contato-layout {
    display:   grid;
    gap:       3rem;
    padding:   3rem 0 5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cnc-contato-layout { grid-template-columns: 1.5fr 1fr; }
}

/* Formulário de contato */
.cnc-contato-form .cnc-campo {
    margin-bottom: 1.25rem;
}

.cnc-contato-form label {
    display:       block;
    font-weight:   600;
    font-size:     0.9rem;
    color:         var(--cor-texto);
    margin-bottom: 0.4rem;
}

.cnc-contato-form input,
.cnc-contato-form textarea {
    width:         100%;
    padding:       0.75rem 1rem;
    border:        1.5px solid rgba(61, 46, 31, 0.2);
    border-radius: var(--raio);
    font-family:   var(--fonte-corpo);
    font-size:     1rem;
    color:         var(--cor-texto);
    background:    var(--cor-branco-quente);
    transition:    border-color var(--transicao);
}

.cnc-contato-form input:focus,
.cnc-contato-form textarea:focus {
    outline:      none;
    border-color: var(--cor-primaria);
}

.cnc-contato-form textarea { min-height: 150px; resize: vertical; }

.cnc-contato-form button[type="submit"] {
    width: 100%;
}

/* Informações de contato */
.cnc-contato-info h3 {
    font-family:   var(--fonte-titulo);
    font-size:     1.3rem;
    margin-bottom: 1rem;
}

.cnc-contato-info p { font-size: 0.95rem; color: #4a3728; }

.cnc-contato-social {
    display:    flex;
    gap:        0.75rem;
    margin-top: 1.5rem;
    flex-wrap:  wrap;
}

.cnc-contato-social a {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.5rem 0.9rem;
    border:          1.5px solid rgba(61, 46, 31, 0.2);
    border-radius:   var(--raio);
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--cor-texto);
    text-decoration: none;
    transition:      background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.cnc-contato-social a:hover {
    background:      var(--cor-primaria);
    color:           #fff;
    border-color:    var(--cor-primaria);
    text-decoration: none;
}

.cnc-contato-social svg {
    width:  16px;
    height: 16px;
}

/* ---------------------------------------------------------------
   VAZIO — ESTADO SEM CONTEÚDO
   --------------------------------------------------------------- */
.cnc-vazio {
    padding:    3rem;
    text-align: center;
    color:      #6b5a45;
    background: var(--cor-secundaria);
    border-radius: var(--raio-lg);
}

/* ---------------------------------------------------------------
   PLACEHOLDER THUMBNAIL (quando não há imagem)
   --------------------------------------------------------------- */
.cnc-thumb-placeholder {
    width:           100%;
    aspect-ratio:    16/9;
    background:      var(--cor-secundaria);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.cnc-thumb-placeholder svg {
    width:   48px;
    height:  48px;
    stroke:  rgba(139, 111, 71, 0.4);
    fill:    none;
}