/* ===================== RESET ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}


/* ===================== HEADER ===================== */
.main-header {
  position: fixed;
  top: 10px; /* deixa um espaçamento do topo */
  left: 50%;
  transform: translateX(-50%); /* centraliza horizontalmente */
  width: 85%; /* largura automática para o conteúdo */
  z-index: 1000;
  background-color: #e30613; /* Vermelho AMANHECER */
  border-radius: 50px; /* totalmente arredondado */
  padding: 10px 40px; /* espaço interno maior para efeito oval */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* sombra mais evidente */
  border: 2px solid white; 
}



/* Container do header ajustado para flex interno */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}


/* ===================== LOGO ===================== */
.logo img {
  height: 40px;
}

/* ===================== NAV MENU ===================== */
.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
}

/* HOVER INTERATIVO */
.nav-menu a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: white;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* Legacy nav-menu a styles preserved but overridden for wireframe */



/* ===================== HEADER ACTIONS ===================== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* CARRINHO */
.cart img {
  height: 26px;
}

/* LOGIN */
.login-btn {
  color: white;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid white;
  padding: 6px 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background-color: white;
  color: #e30613;
}
/* ===================== USER LOGADO ===================== */

.user-area {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 6px 14px;
  border: 1px solid white;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Ícone */
.user-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/* Nome */
.user-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

/* HOVER igual ao login */
.user-area:hover {
  background-color: white;
  color: #e30613;
}

.user-area:hover .user-name {
  color: #e30613;
}

.user-area:hover .user-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(6869%) hue-rotate(352deg) brightness(92%) contrast(104%);
}

/* SOBRE PAGE MODERNA */
.sobre-page {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    background: transparent; /* Fundo transparente para mostrar a imagem de fundo */
    border-radius: 15px;
    padding-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra sutil para profundidade */
    position: relative;
    overflow: hidden;
}

.sobre-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('img/tabua.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* INTRODUÇÃO */
.intro {
    text-align: center;
    margin-bottom: 50px;
}

.intro h1 {
    color: #000; /* Preto */
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.intro-image {
    width: 80%;
    max-width: 1000px;
    height: auto;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.intro p {
    font-size: 1.1rem;
    color: #555;
}

/* INFORMAÇÕES EM CARDS */
.info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 50px;
}

.info-card {
    flex: 1 1 30%;
    min-width: 250px;
    background-color: #fff !important; /* Sempre branco */
    padding: 25px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1; /* Acima da sobreposição */
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    background-color: rgba(227, 6, 19, 0.05); /* Toque sutil de cor no hover para mais vida */
}

.info-card .icon {
    width: 60px;
    margin-bottom: 15px;
}

/* TÍTULOS DOS CARDS */
.info-card h2 {
    color: #000; /* Preto */
    margin-bottom: 10px;
}

/* MAPA */
.map-section {
    margin-bottom: 50px;
}

.map-section h2 {
    color: #000; /* Preto */
    margin-bottom: 20px;
    text-align: center;
}

/* GALERIA DE IMAGENS */
.images-section {
    text-align: center;
    margin-bottom: 50px;
}

.images-section h2 {
    color: #000; /* Preto */
    margin-bottom: 25px;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.image-gallery img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* RESPONSIVO */
@media(max-width: 900px) {
    .info-container {
        flex-direction: column;
        gap: 25px;
    }
    .image-gallery img,
    .intro-image {
        width: 90%;
        height: auto;
    }
}
body { margin: 0; font-family: sans-serif; }

.sobre-body {
    background-image: url('img/tabuas.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
}



/* HERO */
.novidades-hero {
    position: relative;
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url("img/imgnovidade.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    padding-left: 10%;
    color: white;
    overflow: hidden;
}

.novidades-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 340px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 18%,
        rgba(255,255,255,0.72) 48%,
        rgba(255,255,255,0.96) 78%,
        #ffffff 100%
    );
    pointer-events: none;
}


.hero-overlay {
    position: relative;
    z-index: 1;
}

.hero-overlay h1 { font-size: 3rem; margin-bottom: 15px; }
.hero-overlay p { font-size: 1.2rem; max-width: 500px; }

/* CAMPANHA */
.novidades-campanha {
    max-width: 1200px;
    margin: 80px auto 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.campanha-texto { flex: 1; }
.campanha-texto p {
    margin-bottom: 30px;
    line-height: 1.7;
}

.campanha-texto p:last-of-type {
    margin-bottom: 20px;
}
.campanha-texto h2 { font-size: 2.2rem; margin: 15px 0; color: #000; }

.btn-folheto {
    display: inline-block;
    background-color: #e30613;
    color: white;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
}

.campanha-imagem img { width: 100%; max-width: 420px; }

/* PRODUTOS REGIONAIS */
.section-regionais {
    text-align: center;
}

.red-section {
    background-color: #e30613;
    color: white;
    padding: 140px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    width: 100%;
}

.red-section h2, .red-section p {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.shape-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: translateY(-1px);
    z-index: 1;
}

.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 90px;
}

.shape-fill-red {
    fill: #e30613 !important;
}

.shape-fill-white {
    fill: #ffffff !important;
}






.red-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.red-section p {
    font-size: 1.3rem;
    margin-bottom: 30px;
}

.section-novi {
    background: #f9f9f9;
    padding: 80px 20px;
    text-align: center;
}

.section-regionais h2,
.section-novi h2 { font-size: 2.2rem; margin-bottom: 5px; color: #333; }

.section-regionais p.subtitle,
.section-novi p.subtitle { font-size: 1.1rem; color: #666; margin-bottom: 40px; }

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.slider-wrapper {
    overflow: hidden;
    width: 100%;
    margin: 0 10px;
}

.slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

.card-item {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.section-novi .card-item {
    flex: 0 0 320px; /* Garante que os itens mantenham o tamanho no slide */
    width: auto;
    display: block !important; /* Sobrescreve o display none do PHP anterior */
}


.card-item:hover {
    transform: translateY(-5px) scale(1.05);
    animation: pulse 1.5s infinite;
}

/* cores */
.bg-yellow { background-color: #fdfae3; }
.bg-purple { background-color: #f7e3fdff; }
.bg-green  { background-color: #eaf4e9; }
.bg-brown  { background-color: #f1e8d9; }
.bg-red    { background-color: #f1d9d9ff; }

.card-item img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    margin-bottom: 20px;
}

.card-item span {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    color: #444;
}

/* Icon for section - side positioned */
.section-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    clear: both;
}

.campanha-texto::after {
    content: "";
    display: block;
    clear: both;
}

.campanha-imagem-side {
    width: 100%;
    max-width: 420px;
    height: auto;
    float: right;
    margin: 40px 0 20px 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* SETAS */
.nav-btn {
    background: #000;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

/* Estilo para botões desativados */
.nav-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* RESPONSIVO */
@media (max-width: 900px) {
    .novidades-campanha,
    .slider-container { flex-direction: column; }
    .card-item { width: 90%; }
}

/* Animação de pulso para os cards */
@keyframes pulse {
    0% { box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
    50% { box-shadow: 0 10px 25px rgba(227, 6, 19, 0.3); }
    100% { box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
}

/* ===================== SOBRE NÓS - SECÇÃO FINAL (VERMELHA) ===================== */
.sobre-final-red {
    background-color: #e30613; /* Vermelho Amanhecer */
    color: white;
    padding: 120px 20px 80px 20px;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    /* Garante que a secção ocupa a largura total mesmo dentro de um container limitado */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Efeito de Onda no Topo - Suavizado */
.sobre-final-red::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" fill="#f9f9f9"><path d="M0,0 Q300,80 500,20 T1000,0 V100 H0 Z"/></svg>') repeat-x top;
    background-size: 100% 100px;
}


.sobre-final-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.sobre-final-texto {
    flex: 1;
}

.sobre-final-texto h2 {
    color: white !important;
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.sobre-final-texto p {
    color: white !important;
    font-size: 1.2rem;
    line-height: 1.8;
}

.sobre-final-imagem {
    flex: 1;
    text-align: right;
}

.sobre-final-imagem img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Red section 750 lojas layout */
.red-section .campanha-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.red-section .campanha-texto {
    text-align: left;
    max-width: 500px;
    margin-left: 40px;
    margin-right: auto;
}

.red-worker-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    float: right;
    margin: 0 10px 0 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@media (max-width: 900px) {
    .sobre-final-container {
        flex-direction: column-reverse; /* Texto em baixo, imagem em cima no mobile */
        text-align: center;
    }
    .sobre-final-imagem {
        text-align: center;
    }
    .red-worker-img {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
    }
    .red-section .campanha-texto {
        text-align: center;
    }
}