/* ------------------- */
/* RESET & VARIAVEIS   */
/* ------------------- */
:root {
    --laranja-queimado: #FF7A59;
    --grafite: #2D3748;
    --cinza-claro: #F7FAFC;
    --branco: #FFFFFF;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--grafite); line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--grafite); }
h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; }
h2 { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
p { margin-bottom: 1rem; }
section { padding: 80px 0; }
a { color: var(--laranja-queimado); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------- */
/* TOP BAR             */
/* ------------------- */
.top-bar { background-color: var(--grafite); color: var(--cinza-claro); padding: 0.5rem 0; font-size: 0.9rem; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: var(--cinza-claro); text-decoration: none; margin-right: 20px; display: inline-flex; align-items: center; }
.top-bar a:hover { color: var(--branco); text-decoration: none; }
.top-bar i { margin-right: 8px; color: var(--laranja-queimado); }
.top-bar-whatsapp-btn { background-color: var(--laranja-queimado); color: var(--branco); padding: 5px 15px; border-radius: 5px; font-weight: bold; margin-right: 0; }
.top-bar-whatsapp-btn:hover { color: var(--branco); background-color: #e66a4f; }
.top-bar-whatsapp-btn i { color: var(--branco); }

/* ------------------- */
/* HEADER & NAVEGAÇÃO  */
/* ------------------- */
.header { background-color: var(--branco); box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 0.5rem 0; position: sticky; top: 0; z-index: 1000; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { text-decoration: none; display: flex; align-items: center; gap: 15px; z-index: 1001; }
.logo:hover { text-decoration: none; }
.logo-image { max-height: 60px; }
.logo-text { font-family: var(--font-heading); font-size: 1.5rem; color: var(--grafite); font-weight: 700; }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--grafite); text-decoration: none; font-weight: 500; }
.mobile-nav-toggle { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ------------------- */
/* ESTILOS GERAIS DE CONTEÚDO... */
/* ------------------- */
.hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/banner-artebela-neon.png'); background-size: cover; background-position: center; color: var(--branco); text-align: center; padding: 120px 0; }
.hero h1, .hero p { color: var(--branco); }
.hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem auto; }
.cta-button { background-color: var(--laranja-queimado); color: var(--branco); padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; font-family: var(--font-heading); font-size: 1.1rem; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: #e66a4f; text-decoration: none; }
.cta-button .fa-whatsapp { margin-right: 10px; }
.products { background-color: var(--branco); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.product-card { display: flex; flex-direction: column; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; background-color: var(--cinza-claro); padding: 0; }
.product-image { width: 100%; height: 250px; object-fit: contain; padding: 10px; }
.product-info { padding: 1.5rem; text-align: center; }
.product-info h3 { margin-bottom: 0.5rem; }
.features { background-color: var(--cinza-claro); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: center; }
.feature-item i { font-size: 2.5rem; color: var(--laranja-queimado); margin-bottom: 1rem; }
.feature-item h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.process { background-color: var(--branco); }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; text-align: center; }
.step { position: relative; padding-top: 50px; }
.step span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background-color: var(--laranja-queimado); color: var(--branco); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: var(--font-heading); }
.testimonials { background-color: var(--cinza-claro); }
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.testimonial-card { background-color: var(--branco); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); }
.testimonial-card p { font-style: italic; margin-bottom: 1rem; }
.testimonial-card h4 { font-family: var(--font-body); font-weight: bold; color: var(--laranja-queimado); }
.footer { background-color: var(--grafite); color: var(--cinza-claro); padding: 60px 0 20px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px; }
.footer-col h4 { color: var(--branco); margin-bottom: 1rem; }
.footer-col p {  margin-bottom: 0.5rem;  font-size: 0.9rem; display: flex; align-items: center; }
.footer-col i { margin-right: 10px; width: 20px; text-align: center; }
.footer-col a { color: var(--cinza-claro); }
.footer-address { display: flex; align-items: flex-start; margin-bottom: 0.5rem;  font-size: 0.9rem; }
.footer-address div { display: flex; flex-direction: column; }
.social-icons a { color: var(--branco); font-size: 1.5rem; margin-right: 15px; text-decoration: none; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #4A5568; font-size: 0.9rem; }
.footer-bottom a { color: var(--cinza-claro); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.whatsapp-float { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background-color: #25D366; color: var(--branco); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); z-index: 100; text-decoration: none; }
.whatsapp-float:hover { text-decoration: none; }

/* ------------------- */
/* ESTILOS PÁGINAS INTERNAS (PRODUTOS, SOBRE, CONTATO) */
/* ------------------- */
.page-title { background-color: var(--cinza-claro); text-align: center; padding: 60px 0; }
.page-title h1 { margin-bottom: 1rem; }
.page-title p { max-width: 700px; margin-left: auto; margin-right: auto; font-size: 1.1rem; }
.product-detail, .about-intro { padding: 60px 0; }
.product-detail.alt-bg { background-color: var(--cinza-claro); }
.product-detail-content, .about-intro-content { display: flex; align-items: center; gap: 3rem; }
.product-detail-content.image-right { flex-direction: row-reverse; }
.product-detail-image, .about-intro-image, .product-detail-text, .about-intro-text { flex: 1; }
.product-detail-image img, .about-intro-image img { width: 100%; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-detail-text h2, .about-intro-text h2 { text-align: left; margin-bottom: 1.5rem; }
.product-detail-text ul { list-style-position: inside; padding-left: 10px; }
.product-detail-text ul li { margin-bottom: 0.5rem; }
.cta-final { background-color: var(--branco); text-align: center; }
.cta-final p { max-width: 600px; margin-left: auto; margin-right: auto; }
.pillars { background-color: var(--cinza-claro); }
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.pillar-item { background-color: var(--branco); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.07); text-align: center; }
.pillar-item img { width: 100%; height: 200px; object-fit: cover; }
.pillar-item h3 { margin: 1.5rem 1rem 0.5rem 1rem; }
.pillar-item p { padding: 0 1.5rem 1.5rem 1.5rem; }
.contact-page-content { background-color: var(--branco); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: flex-start; }
.contact-details h2 { text-align: left; margin-bottom: 2rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.contact-info-item i { font-size: 1.5rem; color: var(--laranja-queimado); margin-top: 5px; }
.contact-info-item strong { font-family: var(--font-heading); display: block; margin-bottom: 0.25rem; }
.contact-info-item p { margin: 0; line-height: 1.5; }
.contact-map iframe { border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* ------------------- */
/* FAQ E DEPOIMENTOS DE PRODUTO */
/* ------------------- */
.faq { background-color: var(--branco); }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-category { text-align: left; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--laranja-queimado); font-size: 1.5rem; }
.faq-container h2:first-of-type { margin-top: 0; }
.faq-item { border-bottom: 1px solid #E2E8F0; padding: 1rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { font-size: 1.2rem; font-weight: bold; font-family: var(--font-heading); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin-top: 1rem; padding-left: 10px; }
.faq-item summary::after { content: '+'; font-size: 1.8rem; color: var(--laranja-queimado); transition: transform 0.2s ease-out; }
.faq-item[open] summary::after { content: '−'; transform: rotate(180deg); }
.product-testimonials { background-color: var(--cinza-claro); }

/* ------------------- */
/* PÁGINAS DE BLOG */
/* ------------------- */
.blog-listing .container { max-width: 1200px; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.blog-post-card { background-color: var(--branco); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.07); display: flex; flex-direction: column; }
.blog-post-card.featured { flex-direction: column; }
.post-card-image-link img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s ease-out; }
.blog-post-card:hover .post-card-image-link img { transform: scale(1.05); }
.post-card-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.post-card-content h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.post-card-content h3 a { color: var(--grafite); text-decoration: none; }
.post-card-content p { flex-grow: 1; margin-bottom: 1.5rem; }
.read-more-btn { font-weight: bold; text-decoration: none; align-self: flex-start; }
.article-container { padding-bottom: 0; }
.article-header { position: relative; text-align: center; color: var(--branco); display: flex; align-items: center; justify-content: center; min-height: 400px; overflow: hidden; }
.article-header picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.article-header picture::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.article-header img { width: 100%; height: 100%; object-fit: cover; }
.article-header .container { position: relative; z-index: 1; }
.article-header h1, .article-header p { color: var(--branco); text-shadow: 2px 2px 8px rgba(0,0,0,0.7); }
.article-header h1 { max-width: 800px; margin-left: auto; margin-right: auto; }
.article-header p { margin-bottom: 0; }
.article-content { padding-top: 80px; }
.article-content .container { max-width: 800px; }
.article-content h2 { text-align: left; margin-top: 2.5rem; }
.article-content ul { list-style-position: inside; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.article-content li { margin-bottom: 0.5rem; }
.article-inline-image { display: block; margin: 2.5rem 0; }
.article-inline-image img { width: 100%; border-radius: 8px; }
.share-section { border-top: 1px solid #E2E8F0; margin-top: 3rem; padding-top: 2.5rem; text-align: center; }
.share-section h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.share-buttons { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 5px; color: var(--branco); text-decoration: none; font-weight: bold; transition: transform 0.2s ease-out; }
.share-btn:hover { color: var(--branco); text-decoration: none; transform: scale(1.05); }
.share-btn i { font-size: 1.2rem; }
.share-btn.whatsapp { background-color: #25D366; }
.share-btn.facebook { background-color: #1877F2; }
.share-btn.linkedin { background-color: #0A66C2; }
.share-btn.twitter { background-color: #1DA1F2; }
.share-btn.email { background-color: #718096; }
.share-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* ------------------- */
/* PÁGINAS DE UTILIDADE (MAPA DO SITE, 404, 500) */
/* ------------------- */
.sitemap-content {
    background-color: var(--branco);
}
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.sitemap-col h2 {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--laranja-queimado);
}
.sitemap-col ul {
    list-style: none;
    padding-left: 0;
}
.sitemap-col li {
    margin-bottom: 0.75rem;
}
.sitemap-col a {
    text-decoration: none;
    font-weight: 500;
}
.sitemap-col a:hover {
    text-decoration: underline;
}

.error-page-content {
    background-color: var(--branco);
    text-align: center;
    padding: 100px 0;
}
.error-page-content h1 {
    font-size: 3rem;
}
.error-page-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}
.error-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.cta-button.secondary-btn {
    background-color: var(--grafite);
}
.cta-button.secondary-btn:hover {
    background-color: #4A5568;
}

/* ------------------- */
/* RESPONSIVIDADE (MOBILE-FIRST) */
/* ------------------- */
@media (max-width: 768px) {
    .logo-text { display: none; }
    .nav { position: fixed; inset: 0 0 0 30%; flex-direction: column; padding: min(20rem, 15vh) 2rem; gap: 2rem; background: hsl(0 0% 100% / 0.9); backdrop-filter: blur(1rem); transform: translateX(100%); transition: transform 350ms ease-out; z-index: 999; }
    .nav[data-visible="true"] { transform: translateX(0%); }
    .nav a { color: var(--grafite); font-size: 1.2rem; font-weight: bold; }
    .mobile-nav-toggle { display: block; position: absolute; top: 1.5rem; right: 1.5rem; background: transparent; border: 0; width: 2rem; aspect-ratio: 1; z-index: 1001; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(45, 55, 72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat: no-repeat; }
    .mobile-nav-toggle[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(45, 55, 72)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e"); }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    .top-bar { display: none; }
    .header .container { flex-direction: row; }
    .logo { margin-bottom: 0; }
    .logo-image { max-height: 50px; }
    section { padding: 60px 0; }
    .product-detail-content, .about-intro-content { flex-direction: column; gap: 2rem; }
    .product-detail-content.image-right { flex-direction: column; }
    .contact-grid { grid-template-columns: 1fr; }
    .error-page-content h1 { font-size: 2.5rem; }
    .error-links { flex-direction: column; }
}
@media (min-width: 768px) {
    .testimonial-grid { grid-template-columns: 1fr 1fr; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-post-card.featured { grid-column: 1 / -1; flex-direction: row; }
    .blog-post-card.featured .post-card-image-link,
    .blog-post-card.featured .post-card-content { flex: 1; }
    .blog-post-card.featured .post-card-image-link img { height: 100%; }
}
@media (min-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
    .blog-post-card.featured { grid-column: 1 / -1; }
}