/* ==========================================================================
   GALA MASTER SYSTEM (gala-master.css)
   Versão: FINAL CONSOLIDADA (Dashboard + Magic + Módulos)
   Local: public_html/assets/css/gala-master.css
   ========================================================================== */

:root {
  /* --- TOKENS GLOBAIS (Compatibilidade Dupla) --- */
  --gala-petroleo: #154552;
  --gala-rosa: #ee59a4;
  --gala-text: #334155;
  --gala-muted: #64748b;
  --gala-bg-page: #f8fafc;
  --gala-surface: #fff;
  --gala-border: rgba(21, 69, 82, 0.08);

  /* Variáveis Curtas (Para o Dashboard Novo) */
  --petroleo: var(--gala-petroleo);
  --rosa: var(--gala-rosa);
  --bg: var(--gala-bg-page);
  --bg-card: #ffffff;
  --text-main: var(--gala-text);
  --border-color: #e2e8f0;

  /* Sombras Premium */
  --gala-shadow: 0 15px 35px rgba(21, 69, 82, 0.08);
  --gala-pill-shadow: 0 10px 20px rgba(238, 89, 164, 0.15);
  
  /* Dimensões */
  --sidebar-width: 280px;
  --radius-card: 25px;
  --radius-pill: 50px;
  --input-h: 60px;
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'Poppins', sans-serif; 
    color: var(--text-main); 
    background-color: var(--bg); 
    margin: 0; padding: 0; 
    overflow-x: hidden;
    transition: 0.3s;
}

/* Tema Escuro (Suporte Nativo) */
body.dark-theme { 
    --bg: #0f172a; --gala-bg-page: #0f172a;
    --bg-card: #1e293b; --gala-surface: #1e293b;
    --text-main: #f1f5f9; --gala-text: #f1f5f9;
    --border-color: #334155; --gala-border: #334155;
}

/* ==========================================================================
   1. MÓDULO: MAGIC (Animações & Efeitos Premium)
   ========================================================================== */
/* Ken Burns (Zoom Lento em Banners) */
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}
.banner-slide img, .hero__media img, .foto-topo-img {
    animation: kenBurns 20s ease-in-out infinite alternate;
    will-change: transform;
}

/* Cards Flutuantes (Executivo Suave) */
.stat-card, .action-card, .blog-card, .vb-card, .ev-card, .gc-item, .rc-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    backface-visibility: hidden;
}
.stat-card:hover, .action-card:hover, .blog-card:hover, .vb-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important;
    border-color: var(--rosa) !important;
    z-index: 10;
}

/* Fade In na Rolagem */
.fade-in-block, .animated {
    animation: fadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0; animation-delay: 0.1s;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   2. MÓDULO: LAYOUT & DASHBOARD (Estrutura Principal)
   ========================================================================== */
.main-container, .dashboard-container {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 30px;
    max-width: 1920px; /* Permitir telas grandes */
    min-height: 100vh;
    transition: all 0.3s ease;
}

/* Toolbar (Barra de Ferramentas) */
.toolbar { 
    background: var(--bg-card); border-radius: 12px; padding: 12px 25px; margin-bottom: 30px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 3px solid var(--petroleo);
}

/* Cards de Estatísticas (Topo) */
.stat-card { 
    background: var(--bg-card); padding: 25px; border-radius: 15px; 
    border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; 
    height: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.stat-num { font-size: 2.2rem; font-weight: 800; color: var(--petroleo); line-height: 1; }
.stat-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.5px; }

/* Action Grid (Cards Grandes de Menu) */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }

.action-card { 
    background: var(--bg-card); border-radius: 20px; padding: 40px 20px; text-align: center; 
    text-decoration: none; color: var(--text-main); border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    height: 220px; position: relative; overflow: hidden;
}

/* Efeito Hover Premium no Action Card */
.action-card:hover { background: var(--petroleo); color: white !important; border-color: transparent; }
.action-card i { font-size: 3.5rem; margin-bottom: 20px; color: var(--rosa); transition: 0.3s; }
.action-card:hover i { color: white; transform: scale(1.1) rotate(-5deg); }
.action-card h5 { font-weight: 700; margin: 0; font-size: 1.2rem; text-transform: uppercase; }
.action-card small { font-size: 0.85rem; opacity: 0.8; margin-top: 8px; display: block; }

/* Responsividade do Dashboard */
@media (max-width: 1199px) {
    :root { --sidebar-width: 250px; }
    .stat-num { font-size: 1.8rem; }
}
@media (max-width: 991px) {
    .main-container, .dashboard-container { margin-left: 0; width: 100%; padding: 20px; }
    .action-grid { grid-template-columns: 1fr; }
    
    /* Menu Mobile Lógica */
    .gala-sidebar { transform: translateX(-100%); width: 280px; position: fixed; z-index: 1000; height: 100vh; }
    .gala-sidebar.mobile-active { transform: translateX(0); }
}

/* ==========================================================================
   3. MÓDULO: COMPONENTES GLOBAIS (Footer, Hero, Inputs)
   ========================================================================== */
/* Botões Gala Globais */
.gala-btn, .btn-home, .banner-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 55px; padding: 0 30px;
    background: var(--petroleo); color: #fff; border-radius: 50px; font-weight: 800; text-transform: uppercase;
    border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(21, 69, 82, 0.15);
    text-decoration: none;
}
.gala-btn:hover, .btn-home:hover { background: var(--rosa); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(238, 89, 164, 0.3); }

/* Inputs Globais */
.gala-input, input[type="text"], input[type="email"], select, textarea {
    width: 100%; height: 55px; padding: 0 25px; border-radius: 20px;
    border: 2px solid var(--bg); background: #fcfdfe; color: var(--text-main); font-weight: 600; outline: none;
    font-family: 'Poppins', sans-serif; transition: 0.3s;
}
.gala-input:focus, input:focus, textarea:focus { border-color: var(--rosa); background: #fff; }
textarea { height: auto; padding-top: 15px; min-height: 150px; }

/* Footer Block */
.fbx-box { background: var(--bg-card); border-radius: var(--radius-card); padding: 30px; border: 1px solid var(--border-color); }
.fbx-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--bg); padding-bottom: 20px; }
.fbx-title { font-family: 'Merriweather', serif; font-weight: 900; color: var(--petroleo); text-transform: uppercase; margin: 0; }

/* ==========================================================================
   4. MÓDULO: BLOG & NOTÍCIAS (Estilos de Listagem)
   ========================================================================== */
.blog-grid, .nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }

.blog-card, .nt-card {
    background: var(--bg-card); border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color);
    display: flex; flex-direction: column;
}

.blog-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 4px solid var(--bg); }
.blog-body { padding: 20px; }
.blog-tag { color: var(--rosa); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; }
.blog-ttl { font-weight: 800; color: var(--petroleo); font-size: 1.1rem; margin: 10px 0; }

/* ==========================================================================
   5. MÓDULO: GALERIA & MÍDIA
   ========================================================================== */
/* Grid de Miniaturas (Uploads) */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.gm-item { position: relative; border-radius: 20px; overflow: hidden; border: 2px solid transparent; background: #fff; }
.gm-item.is-selected { border-color: var(--rosa); }
.gm-check { position: absolute; top: 10px; left: 10px; z-index: 5; width: 25px; height: 25px; background: #fff; border-radius: 6px; display: grid; place-items: center; }

/* Vídeo Block */
.vb-card { background: var(--bg-card); border-radius: 25px; overflow: hidden; border: 1px solid var(--border-color); }
.vb-thumb { position: relative; aspect-ratio: 16/9; background: #000; }
.vb-thumb::after {
    content: "▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 55px; height: 55px; background: var(--rosa); color: #fff; border-radius: 50%; 
    display: grid; place-items: center; box-shadow: 0 10px 25px rgba(238,89,164,0.4); font-size: 1.2rem;
}

/* ==========================================================================
   6. MÓDULO: HERO (Banner Principal)
   ========================================================================== */
.hero {
    position: relative; border-radius: 28px; overflow: hidden; background: var(--petroleo);
    box-shadow: 0 25px 50px rgba(21, 69, 82, 0.15); margin-bottom: 30px; color: #fff;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--petroleo), transparent); }
.hero__inner { position: relative; z-index: 5; padding: 80px 40px; min-height: 450px; display: flex; align-items: center; }
.hero__title { font-family: 'Merriweather', serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 20px; }

/* ==========================================================================
   7. MÓDULO: INTERATIVIDADE (Letreiro & Floating Button)
   ========================================================================== */
/* Letreiro */
.letreiro-bar { background: var(--bg-card); border-radius: 25px; padding: 15px; overflow: hidden; white-space: nowrap; box-shadow: var(--gala-shadow); border: 1px solid var(--border-color); }
.letreiro-item { display: inline-flex; align-items: center; background: var(--bg); padding: 10px 20px; border-radius: 50px; margin-right: 20px; font-weight: 700; color: var(--petroleo); }

/* Floating Button (FAB) */
.fab { position: fixed; bottom: 30px; right: 30px; z-index: 1000; }
.fab-btn { 
    width: 64px; height: 64px; background: var(--petroleo); border-radius: 50%; color: #fff; 
    display: grid; place-items: center; box-shadow: 0 15px 30px rgba(21,69,82,0.3); 
    cursor: pointer; transition: 0.3s; font-size: 1.5rem;
}
.fab.is-open .fab-btn { background: var(--rosa); transform: rotate(45deg); }
.fab-menu { position: absolute; bottom: 80px; right: 0; opacity: 0; pointer-events: none; transition: 0.3s; transform: translateY(10px); }
.fab.is-open .fab-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Linktree */
.ltp-item { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 20px; background: var(--bg-card); padding: 15px; border-radius: 20px; border: 1px solid var(--border-color); margin-bottom: 15px; }
.ltp-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
/* ==========================================================================
   MÓDULO: PÁGINA DE CIRURGIAS (Extraído de pages/cirurgia/index.php)
   ========================================================================== */

/* Ajuste de respiro para o menu principal fixo */
.cirurgia-wrapper { 
    padding-top: 80px; 
}

/* Header de Seção Personalizado (Galeria Dinâmica) */
.section-gala-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-gala-header h2 {
    font-family: 'Merriweather', serif; /* Garante a fonte do sistema */
    font-weight: 900;
    color: var(--gala-petroleo);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.section-gala-header .divider {
    width: 80px; height: 5px; 
    background: var(--gala-rosa);
    margin: 15px auto; 
    border-radius: 10px;
}
/* ==========================================================================
   MÓDULO: PÁGINAS DE ESPECIALIDADES (Cirurgias)
   Origem: pages/cirurgia/catarata.php (Refatorado)
   ========================================================================== */

/* Hero da Cirurgia (Layout) */
.surgery-hero {
    position: relative;
    height: 500px;
    display: flex; align-items: center;
    color: white;
    border-radius: 0 0 60px 60px;
    overflow: hidden;
    background-color: var(--gala-petroleo); /* Fallback */
}

/* Breadcrumbs Customizados */
.breadcrumb-gala .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }
.breadcrumb-gala a { color: rgba(255,255,255,0.7); text-decoration: none; transition: 0.3s; }
.breadcrumb-gala a:hover { color: var(--gala-rosa); }

/* Cards de Conteúdo */
.info-card {
    background: var(--gala-surface);
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    border: 1px solid var(--gala-border);
    margin-bottom: 35px;
}

/* Títulos de Seção */
.section-title {
    color: var(--gala-petroleo);
    font-weight: 800;
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 25px;
}
.section-title i { color: var(--gala-rosa); font-size: 2rem; }

/* Itens de Checklist */
.check-item {
    background: var(--gala-bg-page);
    padding: 20px; border-radius: 20px;
    border: 1px solid var(--gala-border);
    display: flex; align-items: center; gap: 15px;
    height: 100%; transition: 0.3s;
}
.check-item:hover { border-color: var(--gala-rosa); transform: translateY(-3px); }
.check-item i { color: var(--gala-rosa); font-size: 1.2rem; }

/* Timeline do Procedimento */
.gala-timeline { border-left: 3px solid rgba(238, 89, 164, 0.2); margin-left: 10px; }
.timeline-step { position: relative; padding-bottom: 30px; padding-left: 35px; }
.timeline-step::before {
    content: ''; position: absolute; left: -10px; top: 5px;
    width: 18px; height: 18px; background: var(--gala-rosa);
    border-radius: 50%; border: 4px solid #fff;
    box-shadow: 0 0 0 3px rgba(238, 89, 164, 0.1);
}

/* Sidebar e CTA (Chamada para Ação) */
.sticky-sidebar { position: sticky; top: 100px; z-index: 10; }

.cta-card {
    background: var(--gala-surface);
    padding: 40px 30px; border-radius: 35px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    text-align: center;
}

.btn-gala-main {
    background: var(--gala-petroleo); color: white;
    padding: 18px; border-radius: 50px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    display: block; width: 100%; text-decoration: none !important;
    transition: 0.4s; box-shadow: 0 10px 25px rgba(21, 69, 82, 0.2);
}
.btn-gala-main:hover { 
    background: var(--gala-rosa); transform: translateY(-5px); 
    color: white; box-shadow: 0 15px 30px rgba(238, 89, 164, 0.3); 
}

/* Selo de Segurança */
.safety-badge {
    background: linear-gradient(135deg, var(--gala-petroleo) 0%, #0a252d 100%);
    color: white; padding: 30px; border-radius: 30px;
    margin-top: 30px; text-align: center;
}

/* Utilitários de Cirurgia */
.text-petroleo { color: var(--gala-petroleo) !important; }
.text-rosa { color: var(--gala-rosa) !important; }
.text-muted-gala { color: var(--gala-muted) !important; }
.mt-n5 { margin-top: -3rem !important; }
.opacity-90 { opacity: 0.9; }

@media (max-width: 768px) {
    .surgery-hero { height: 400px; border-radius: 0 0 40px 40px; }
    .info-card { padding: 30px 20px; }
}
/* ==========================================================================
   MÓDULO: VESÍCULA / EXTRA
   Origem: pages/cirurgia/colecistectomia.php
   ========================================================================== */

/* Badge de Tecnologia (Variante Slate) */
.tech-badge {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: white;
    padding: 30px;
    border-radius: 30px;
    margin-top: 30px;
    text-align: center;
}
/* ==========================================================================
   MÓDULO: HÉRNIA / EXTRA
   Origem: pages/cirurgia/hernia.php
   ========================================================================== */

/* Alerta de Urgência (Gala Style) */
.gala-alert {
    background: rgba(238, 89, 164, 0.05); /* Tint de Rosa */
    border-left: 5px solid var(--gala-rosa);
    border-radius: 15px;
    padding: 25px;
    margin-top: 25px;
}
/* ==========================================================================
   MÓDULO: HISTERECTOMIA / EXTRA
   Origem: pages/cirurgia/histerectomia.php
   ========================================================================== */

/* Cards de Método Cirúrgico */
.method-box {
    padding: 20px;
    border-radius: 20px;
    border: 2px solid var(--gala-bg-page);
    transition: 0.3s;
    background: #fff;
}
.method-box:hover { 
    border-color: var(--gala-rosa); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    transform: translateX(5px);
}

/* Badge de Recuperação (Vinho/Bordeaux) */
.recovery-badge {
    background: linear-gradient(135deg, #831843 0%, #500724 100%);
    color: white;
    padding: 30px;
    border-radius: 30px;
    margin-top: 30px;
    text-align: center;
}
/* ==========================================================================
   MÓDULO: LAQUEADURA / EXTRA
   Origem: pages/cirurgia/laqueadura.php
   ========================================================================== */

/* Box da Lei 14.443 */
.law-box {
    background: var(--gala-bg-page);
    border-radius: 30px;
    padding: 40px;
    border-left: 8px solid var(--gala-rosa);
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.law-item {
    display: flex; gap: 15px; margin-bottom: 20px;
}
.law-item i { color: var(--gala-rosa); font-size: 1.2rem; }

/* Cards de Metodologia */
.method-card {
    padding: 25px;
    border-radius: 20px;
    border: 2px solid var(--gala-bg-page);
    transition: 0.3s;
    background: white;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
.method-card:hover { 
    border-color: var(--gala-rosa); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    transform: translateY(-5px);
}
/* ==========================================================================
   MÓDULO: VASECTOMIA / EXTRA
   Origem: pages/cirurgia/vasectomia.php
   ========================================================================== */

/* Box de Mitos e Verdades (Escuro) */
.truth-box {
    background: linear-gradient(135deg, var(--gala-petroleo) 0%, #0a252d 100%);
    color: white;
    padding: 40px;
    border-radius: 30px;
    margin-bottom: 35px;
}

.myth-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 20px;
    height: 100%;
    transition: 0.3s;
}
.myth-item:hover { 
    background: rgba(255, 255, 255, 0.1); 
    border-color: var(--gala-rosa); 
}
.myth-item h6 { 
    color: var(--gala-rosa); 
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px; 
}

/* Badge de Estatística (Branco com borda Rosa) */
.efficiency-badge {
    background: white;
    color: var(--gala-petroleo);
    padding: 30px;
    border-radius: 30px;
    margin-top: 30px;
    text-align: center;
    border: 2px solid var(--gala-rosa);
}
/* ==========================================================================
   MÓDULO: PEDRA NA VESÍCULA / EXTRA
   Origem: pages/cirurgia/vesicula.php
   ========================================================================== */

/* Grid de Sintomas (Variação do Check Item) */
.symptom-item {
    background: var(--gala-bg-page);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--gala-border);
    display: flex; align-items: center; gap: 15px;
    height: 100%; transition: 0.3s;
}
.symptom-item:hover { 
    border-color: var(--gala-rosa); 
    transform: translateY(-3px); 
}
.symptom-item i { color: var(--gala-rosa); font-size: 1.3rem; }

/* Timeline Alternativa (Steps) */
.gala-steps { border-left: 3px solid rgba(238, 89, 164, 0.2); margin-left: 10px; }

.step-box { 
    position: relative; padding-bottom: 30px; padding-left: 35px; 
}
.step-box::before {
    content: ''; position: absolute; left: -10px; top: 5px;
    width: 18px; height: 18px; background: var(--gala-rosa);
    border-radius: 50%; border: 4px solid #fff;
    box-shadow: 0 0 0 3px rgba(238, 89, 164, 0.1);
}
/* ==========================================================================
   MÓDULO: CENTRAL DE ATENDIMENTO (Formulários)
   ========================================================================== */

/* Hero Escuro */
.form-hero {
    background-color: var(--gala-petroleo);
    padding: 100px 20px 140px; /* Espaço extra embaixo para os cards subirem */
    color: white;
}

/* Grid da Central */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Card do Formulário */
.form-card {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
}

.form-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(21, 69, 82, 0.15);
}

/* Ícone com Fundo Rosa */
.form-icon {
    width: 70px; height: 70px;
    background: #ffebf5; /* Rosa bem clarinho */
    color: var(--gala-rosa);
    border-radius: 20px;
    display: grid; place-items: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: 0.3s;
}

.form-card:hover .form-icon {
    background: var(--gala-rosa);
    color: #fff;
    transform: rotate(10deg);
}

/* Textos */
.form-title {
    color: var(--gala-petroleo);
    font-weight: 800; font-size: 1.2rem;
    margin-bottom: 10px;
}

.form-desc {
    color: var(--gala-muted);
    font-size: 0.9rem; line-height: 1.5;
    margin-bottom: 25px; flex-grow: 1;
}

/* Link de Ação (Texto Rosa) */
.form-link {
    color: var(--gala-rosa);
    font-weight: 800; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: 5px;
}

.form-card:hover .form-link i { transform: translateX(5px); transition: 0.3s; }
/* ==========================================================================
   MÓDULO: WRAPPER DE FORMULÁRIOS (Gala Forms)
   Origem: pages/formulario/formulario1.php
   ========================================================================== */

/* Cabeçalho do Formulário */
.form-header-gala {
    background: linear-gradient(135deg, var(--gala-petroleo) 0%, #0a252d 100%);
    padding: 80px 20px 120px;
    color: white;
    text-align: center;
    border-radius: 0 0 50px 50px;
    margin-bottom: -60px;
}

.form-container-wrapper {
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* Card Branco do Formulário */
.gala-form-card {
    background: #fff;
    border-radius: 35px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    border: 1px solid var(--gala-border);
    overflow: hidden;
    padding: 40px;
}

/* Estilização Forçada dos Inputs (Sobrescreve Frameworks Externos) */
input.form-control, select.form-select, textarea.form-control {
    border-radius: 12px !important;
    padding: 12px 15px !important;
    border: 2px solid var(--gala-bg-page) !important;
    transition: 0.3s !important;
    background-color: #fcfdfe !important;
}

input.form-control:focus, select.form-select:focus, textarea.form-control:focus { 
    border-color: var(--gala-rosa) !important; 
    box-shadow: none !important; 
    background-color: #fff !important;
}

/* Botão de Envio Customizado */
.btn-submit-gala {
    background: var(--gala-rosa) !important;
    border: none !important;
    padding: 15px 40px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: white !important;
    transition: 0.4s !important;
    width: 100%;
}

.btn-submit-gala:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(238, 89, 164, 0.3); 
    background: var(--gala-petroleo) !important;
}

/* Responsividade Formulário */
@media (max-width: 768px) {
    .form-header-gala { padding: 60px 20px 100px; }
    .gala-form-card { padding: 25px 20px; border-radius: 25px; }
}