/*
Theme Name: CasaPinus
Theme URI: https://casapinus.com
Author: CasaPinus & Marcos Aurelio
Author URI: https://casapinus.com
Description: Tema WordPress oficial da CasaPinus - Especialistas em Kits Pré-Fabricados de Chalés Suíços, Cabanas A-Frame e Casas de Madeira Maciça. Arquitetura moderna de Block Theme (Full Site Editing), performance Core Web Vitals, cabeçalho fixo, hero com vídeo de fundo, catálogo dinâmico de projetos, comparativo do kit com botão 'Eu quero', processo em 5 passos, selos de confiança, depoimentos e integração total com WooCommerce, Elementor Pro, Contact Form 7 e Rank Math SEO PRO.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casapinus
Tags: block-theme, full-site-editing, custom-colors, custom-menu, featured-images, responsive-layout, clean, wood, chalets, real-estate, e-commerce, woocommerce
*/

/* Tipografia Oficial do Tema */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ==========================================================================
   VARIÁVEIS GLOBAIS E PALETA OFICIAL CASAPINUS
   ========================================================================== */
:root {
  --cp-primary: #1A3826;
  --cp-primary-dark: #112419;
  --cp-primary-light: #2A543A;
  --cp-secondary: #8C5835;
  --cp-secondary-dark: #5E3A23;
  --cp-brown-dark: #2B1B14;
  --cp-brown-card: #3A261D;
  --cp-accent: #C58B43;
  --cp-yellow-btn: #EAB308;
  --cp-yellow-btn-hover: #CA8A04;
  --cp-base: #F8F7F4;
  --cp-surface: #FFFFFF;
  --cp-surface-warm: #F4EFEA;
  --cp-dark-bg: #1B120E;
  --cp-text-main: #1C2420;
  --cp-text-muted: #55625A;
  --cp-border: #E2DDD6;
  --cp-whatsapp: #15803D;
  --cp-whatsapp-hover: #166534;
  
  --cp-shadow-sm: 0 2px 8px rgba(18, 24, 20, 0.05);
  --cp-shadow-md: 0 8px 24px rgba(18, 24, 20, 0.08);
  --cp-shadow-lg: 0 16px 40px rgba(18, 24, 20, 0.12);
  --cp-radius-sm: 6px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 20px;
  --cp-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--cp-text-main);
  background-color: var(--cp-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   CABEÇALHO FIXO (STICKY HEADER)
   ========================================================================== */
.cp-sticky-header {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 221, 214, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: var(--cp-transition);
}

.cp-sticky-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 24px rgba(18, 24, 20, 0.08);
}

/* ==========================================================================
   HERO COM VÍDEO DE FUNDO
   ========================================================================== */
.cp-hero-video-wrapper {
  position: relative;
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--cp-dark-bg);
}

.cp-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.cp-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(27, 18, 14, 0.6) 0%, rgba(27, 18, 14, 0.82) 100%);
  z-index: 2;
}

.cp-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  color: #FFFFFF;
  text-align: center;
}

.cp-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.18;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.cp-hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 820px;
  margin: 0 auto 2.2rem auto;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* ==========================================================================
   BOTÕES E CTAs
   ========================================================================== */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--cp-radius-sm);
  text-decoration: none !important;
  cursor: pointer;
  transition: var(--cp-transition);
  border: 2px solid transparent;
}

.cp-btn-primary {
  background-color: var(--cp-primary);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(26, 56, 38, 0.25);
}

.cp-btn-primary:hover {
  background-color: var(--cp-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 56, 38, 0.35);
  color: #FFFFFF !important;
}

.cp-btn-yellow {
  background-color: var(--cp-yellow-btn);
  color: #1A1A1A !important;
  font-weight: 800;
  padding: 0.85rem 2.2rem;
  font-size: 1.05rem;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.3);
}

.cp-btn-yellow:hover {
  background-color: var(--cp-yellow-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.4);
  color: #1A1A1A !important;
}

.cp-btn-whatsapp {
  background-color: var(--cp-whatsapp);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.25);
}

.cp-btn-whatsapp:hover {
  background-color: var(--cp-whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.35);
  color: #FFFFFF !important;
}

/* ==========================================================================
   VITRINE DE PROJETOS & FILTROS (HOME)
   ========================================================================== */
.cp-filter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem 0 3rem 0;
}

.cp-filter-btn {
  padding: 0.65rem 1.4rem;
  border-radius: 50px;
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--cp-transition);
}

.cp-filter-btn:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

.cp-filter-btn.active {
  background-color: var(--cp-primary);
  border-color: var(--cp-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(26, 56, 38, 0.2);
}

.cp-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  width: 100%;
}

.cp-project-card {
  background: var(--cp-surface);
  border-radius: var(--cp-radius-md);
  overflow: hidden;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-sm);
  transition: var(--cp-transition);
  display: flex;
  flex-direction: column;
}

.cp-project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cp-shadow-lg);
  border-color: rgba(26, 56, 38, 0.2);
}

.cp-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #EAE6DF;
}

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

.cp-project-card:hover .cp-card-media img {
  transform: scale(1.04);
}

.cp-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(26, 56, 38, 0.9);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
}

.cp-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cp-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cp-text-main);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.cp-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--cp-text-muted);
  margin: 0.75rem 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cp-border);
}

.cp-spec-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cp-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ==========================================================================
   4 DIFERENCIAIS MARRONS (ESTILO OFICIAL DO PRINT)
   ========================================================================== */
.cp-brown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cp-brown-grid {
    grid-template-columns: 1fr;
  }
}

.cp-brown-card {
  background-color: var(--cp-brown-card);
  color: #FFFFFF;
  padding: 2.2rem 2rem;
  border-radius: var(--cp-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-brown-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cp-brown-card p {
  color: #E2D9D2;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   TRANSPARÊNCIA DO KIT ("O KIT MAIS COMPLETO DO MERCADO")
   ========================================================================== */
.cp-kit-box {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  padding: 3rem 2rem;
  box-shadow: var(--cp-shadow-md);
  max-width: 1000px;
  margin: 0 auto;
}

.cp-kit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .cp-kit-grid {
    grid-template-columns: 1fr;
  }
}

.cp-kit-col h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.cp-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
}

.cp-check-list li .cp-icon-check {
  color: var(--cp-primary);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}

.cp-check-list li .cp-icon-cross {
  color: #DC2626;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}

/* ==========================================================================
   LINHA DO TEMPO DOS 5 PASSOS
   ========================================================================== */
.cp-steps-container {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.cp-step-row {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  padding: 1.4rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--cp-shadow-sm);
  transition: var(--cp-transition);
}

.cp-step-row:hover {
  transform: translateX(6px);
  border-color: var(--cp-primary);
}

.cp-step-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cp-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
}

.cp-step-content h4 {
  margin: 0 0 0.35rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cp-primary);
}

.cp-step-content p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--cp-text-muted);
}

/* ==========================================================================
   ÍCONES DE CONFIANÇA (5 SELOS)
   ========================================================================== */
.cp-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 3.5rem auto 0 auto;
  text-align: center;
}

.cp-trust-card {
  padding: 1.5rem 1rem;
  background: var(--cp-surface);
  border-radius: var(--cp-radius-md);
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-sm);
}

.cp-trust-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}

.cp-trust-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cp-primary);
  margin: 0;
}

/* ==========================================================================
   DEPOIMENTOS DE CLIENTES (6 CARDS COM ESTRELAS)
   ========================================================================== */
.cp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cp-review-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  padding: 2rem;
  box-shadow: var(--cp-shadow-sm);
  display: flex;
  flex-direction: column;
}

.cp-review-stars {
  color: #F59E0B;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.cp-review-text {
  font-size: 0.95rem;
  color: var(--cp-text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.cp-review-author {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cp-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   COMPATIBILIDADE WOOCOMMERCE & CONTACT FORM 7
   ========================================================================== */
.woocommerce ul.products li.product {
  background: var(--cp-surface);
  border-radius: var(--cp-radius-md);
  border: 1px solid var(--cp-border);
  padding: 1rem;
  box-shadow: var(--cp-shadow-sm);
  transition: var(--cp-transition);
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button {
  background-color: var(--cp-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: var(--cp-radius-sm) !important;
}

.wpcf7 form input[type="submit"] {
  background-color: var(--cp-primary);
  color: #FFFFFF;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: var(--cp-radius-sm);
  border: none;
}

/* ==========================================================================
   STICKY CTA FLUTUANTE MOBILE (WHATSAPP)
   ========================================================================== */
.cp-mobile-sticky-bar {
  display: none;
}

@media (max-width: 768px) {
  .cp-mobile-sticky-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index: 9998;
    border-top: 1px solid var(--cp-border);
  }

  .cp-mobile-sticky-bar .cp-sticky-info {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cp-text-main);
  }

  .cp-mobile-sticky-bar .cp-btn-whatsapp {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }
}