/* VARIÁVEIS DE CORES E ESTILO DA FRANTEC */
:root {
  --verde: #008A2E;
  --verde-limao: #7ED321;
  --azul-marinho: #003B70;
  --azul-celeste: #168DD2;
  --branco: #FFFFFF;
  --cinza-50: #F7F9F8;
  --cinza-100: #EEF2F0;
  --cinza-200: #DDE4E0;
  --cinza-500: #6F7974;
  --cinza-800: #27302C;
  --radius: 20px;
  --shadow: 0 12px 30px rgba(0, 59, 112, 0.08);
}

/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', Arial, sans-serif;
}

body {
  background-color: var(--cinza-50);
  color: var(--cinza-800);
  line-height: 1.6;
}

.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* BARRA SUPERIOR ADMIN */
.admin-bar {
  background: var(--azul-marinho);
  padding: 10px 0;
  text-align: right;
}

.admin-bar a {
  color: var(--verde-limao);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.admin-bar a:hover {
  color: var(--branco);
}

/* CABEÇALHO / HERO */
.hero-home {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0;
  background: linear-gradient(135deg, #fff 0%, #f7fbf8 54%, #edf8ef 100%);
  text-align: center;
}

.header h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--azul-marinho);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.header h1 span {
  color: var(--verde);
  display: block;
}

.header p {
  color: var(--cinza-500);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

/* SEÇÃO CATÁLOGO */
.catalog-section {
  padding: 60px 0;
}

.catalog-section h2 {
  font-size: 2rem;
  color: var(--azul-marinho);
  margin-bottom: 35px;
  position: relative;
  padding-left: 16px;
}

.catalog-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: var(--verde-limao);
  border-radius: 4px;
}

/* GRID DE PRODUTOS */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

/* CARD DO PRODUTO */
.product-card {
  background: var(--branco);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cinza-200);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 59, 112, 0.12);
  border-color: rgba(0, 138, 46, 0.2);
}

.card-img-wrapper {
  width: 100%;
  height: 220px;
  background: var(--cinza-100);
  overflow: hidden;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-content h3 {
  font-size: 1.2rem;
  color: var(--azul-marinho);
  margin-bottom: 12px;
  font-weight: 700;
}

.card-content p {
  color: var(--cinza-500);
  font-size: 0.92rem;
  flex-grow: 1;
  margin-bottom: 24px;
  line-height: 1.7;
}

/* BOTÃO WHATSAPP */
.btn-whatsapp {
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  padding: 14px;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-whatsapp:hover {
  background-color: #007024;
}

/* RODAPÉ */
.footer {
  margin-top: auto;
  background: var(--azul-marinho);
  color: var(--branco);
  text-align: center;
  padding: 30px 0;
  font-size: 0.88rem;
}

.footer span {
  color: var(--verde-limao);
  font-weight: 700;
}

/* ==========================================================================
   1. VARIÁVEIS E ESTILOS BASE (MODO CLARO - PADRÃO)
   ========================================================================== */
:root {
  --bg-principal: #f7fbf8;
  --bg-card: #ffffff;
  --texto-principal: #212529;
  --texto-secundario: #6c757d;
  --borda-cor: #e2e8f0;
  --azul-marinho: #003B70;
  --verde: #008A2E;
  --radius: 8px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Transição suave ao alternar entre os temas */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-principal);
  color: var(--texto-principal);
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

main, .hero-home {
  flex: 1;
}

/* ==========================================================================
   2. ESTRUTURA E COMPONENTES PÚBLICOS
   ========================================================================== */

/* Navbar */
.navbar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--borda-cor);
  padding: 15px 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-links a {
  color: var(--texto-principal);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--verde);
}

/* Logo */
.logo, .navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--azul-marinho);
  transition: color 0.3s ease;
}

.logo span, .navbar-brand span {
  color: var(--verde);
}

/* Hero Section (Home) */
.hero-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbf8 54%, #edf8ef 100%);
  text-align: center;
  transition: background 0.3s ease;
}

.hero-home h1 {
  color: var(--azul-marinho);
}

.hero-home p {
  color: var(--texto-secundario);
}

/* Cards & Caixas (Catálogo, Contato, Admin) */
.product-card, 
.contact-box, 
.admin-container, 
.login-card {
  background-color: var(--bg-card);
  border: 1px solid var(--borda-cor);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Rodapé */
.footer {
  margin-top: auto;
  background-color: var(--azul-marinho);
  color: #ffffff;
  text-align: center;
  padding: 30px 0;
  font-size: 0.88rem;
}

/* ==========================================================================
   3. MODO ESCURO (DARK MODE REFINADO)
   ========================================================================== */

/* Cores e Fundo Geral do Modo Escuro */
body.dark-mode {
  --bg-principal: #121824;      /* Fundo escuro elegante */
  --bg-card: #1e293b;           /* Fundo dos cartões e caixas */
  --texto-principal: #f8fafc;   /* Texto principal claro */
  --texto-secundario: #cbd5e1;  /* Texto descritivo legível */
  --borda-cor: #334155;         /* Bordas sutis */
  
  background-color: var(--bg-principal) !important;
  color: var(--texto-principal) !important;
}

/* Navbar e Links no Modo Escuro */
body.dark-mode .navbar {
  background-color: var(--bg-card) !important;
  border-bottom: 1px solid var(--borda-cor) !important;
}

body.dark-mode .nav-links a {
  color: var(--texto-principal) !important;
}

body.dark-mode .nav-links a:hover, 
body.dark-mode .nav-links a.active {
  color: #10b981 !important; /* Verde vibrante para seleção */
}

/* Logo no Modo Escuro: 'FRAN' em Branco e 'TEC' em Verde */
body.dark-mode .logo, 
body.dark-mode .navbar-brand,
body.dark-mode a.logo {
  color: #ffffff !important;
}

body.dark-mode .logo span, 
body.dark-mode .navbar-brand span {
  color: #10b981 !important;
}

/* Hero Section (Home) no Modo Escuro */
body.dark-mode .hero-home {
  background: linear-gradient(135deg, #121824 0%, #1e293b 54%, #0f172a 100%) !important;
}

body.dark-mode .hero-home h1 {
  color: #ffffff !important;
}

body.dark-mode .hero-home p {
  color: #94a3b8 !important;
}

/* Cards, Caixas e Conteúdo Interno */
body.dark-mode .product-card, 
body.dark-mode .contact-box, 
body.dark-mode .admin-container, 
body.dark-mode .login-card {
  background-color: var(--bg-card) !important;
  border-color: var(--borda-cor) !important;
  color: var(--texto-principal) !important;
}

/* Correção Global de Textos e Rótulos no Modo Escuro */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong {
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode label,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
  color: #e2e8f0;
body.dark-mode span{color: #10b981}
}

/* Ajustes Específicos para a Página de Contato */
body.dark-mode .contact-info-item {
  color: #cbd5e1 !important;
}

body.dark-mode .contact-box span, 
body.dark-mode .contact-box strong {
  color: #10b981 !important;
}

/* Inputs e Textareas no Modo Escuro */
body.dark-mode input, 
body.dark-mode textarea {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
}

body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}