@charset "utf-8";
/* custom css route 419 */
/* Mário de Lima */

@import url('/assets/css/files/loader.css');

/* ==========================================================================
   VARIABLES & TOKENS
   ========================================================================== */
:root {
 --primary: #2563eb;
 --dark: #1e293b;
 --light: #f8fafc;
 --text: #334155;
 --border: #e2e8f0;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'Verdana', sans-serif;
 background-color: var(--light);
 color: var(--text);
 line-height: 1.3;
}

hr {
 margin: 10px 0;
 border: 0;
 border-top: 1px solid var(--border);
}

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */
.container {
 max-width: 1000px;
 margin: 0 auto;
 padding: 0 20px;
}

.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
}

.center {
 text-align: center;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
header {
 background: white;
 border-bottom: 1px solid var(--border);
 padding: 1.8rem 0;
 top: 0;
 z-index: 100;
}

.nav-brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

nav {
 display: flex;
 gap: 25px;
 margin-top: 10px;
}

/* ==========================================================================
   BRAND IMAGES & GROUPS
   ========================================================================== */
.brand-images {
 display: flex;
 justify-content: center;
 gap: 40px;
 margin: 20px 0;
}

.image-group {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 font-size: 0.85rem;
 font-weight: bold;
 color: var(--dark);
}

.img-brand {
 max-width: 150px;
 height: auto;
 border-radius: 8px;
 object-fit: cover;
}

/* ==========================================================================
   SECTIONS & CARDS
   ========================================================================== */
section {
 padding: 1.8rem 0;
}

.hero {
 padding: 0.1rem 0;
}

h3 {
 font-size: 1.8rem;
 margin-bottom: 0.8rem;
 color: var(--dark);
 border-left: 4px solid var(--primary);
 padding-left: 15px;
}

.card {
 background: white;
 padding: 1.0rem;
 border-radius: 8px;
 border: 1px solid var(--border);
}

.card h4,
h5 {
 margin-bottom: 0.5rem;
 color: var(--dark);
}

.experience-list {
 list-style: none;
 padding-left: 0;
}

.experience-list li {
 line-height: 1.2;
 margin-bottom: 2px;
}

/* ==========================================================================
   BADGES & INTERACTIVE ELEMENTS
   ========================================================================== */
.badge-container {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 1rem;
}

.badge {
 background: #dbeafe;
 color: var(--primary);
 padding: 5px 12px;
 border-radius: 20px;
 font-size: 0.85rem;
 font-weight: 600;
}

a,
a:hover,
a:focus,
a:active {
 background-color: transparent !important;
 text-decoration: none;
}

/* ==========================================================================
   SHOWCASE & WIDGETS (WEB ONLY)
   ========================================================================== */
.demo-box {
 background: #0f172a;
 color: #38bdf8;
 padding: 1rem;
 border-radius: 6px;
 font-family: 'Courier New', Courier, monospace;
 font-size: 0.9rem;
 margin-top: 1rem;
}

.video-placeholder {
 background: #e2e8f0;
 width: 100%;
 aspect-ratio: 16/9;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 6px;
 margin-bottom: 1rem;
}

footer {
 text-align: center;
 padding: 1.8rem;
 border-top: 1px solid var(--border);
 font-size: 0.9rem;
}

/* ==========================================================================
   MEDIA PRINT - OPTIMIZED FOR 1 PAGE (A4)
   ========================================================================== */
@media print {
 @page {
  size: A4;
  margin: 0.8cm 1.2cm;
  /* Aproveita melhor as bordas da folha física */
 }

 body {
  background: white;
  color: black;
  font-size: 10pt;
  /* Diminui a escala da fonte para agrupar o conteúdo */
  line-height: 1.2;
 }

 /* Exclusão cirúrgica de elementos não-imprimíveis */
 #showcases,
 [hidden],
 nav,
 footer,
 script,
 .no-print,
 .video-placeholder,
 .demo-box {
  display: none !important;
 }

 header {
  position: static;
  padding: 0 0 0.5rem 0;
  border: none;
 }

 .container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
 }

 h2 {
  font-size: 1.2rem;
 }

 section {
  padding: 0.3rem 0;
  /* Margem vertical mínima entre seções */
 }

 h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
  padding-left: 8px;
  border-left: 3px solid var(--primary);
 }

 h4 {
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
 }

 hr {
  margin: 5px 0;
  border-top: 1px solid #cbd5e1;
 }

 /* Definição de Badges econômicas */
 .badge-container {
  margin-top: 0.4rem;
  gap: 5px;
 }

 .badge {
  padding: 2px 6px;
  font-size: 0.75rem;
  border: 1px solid #cbd5e1;
  background: none !important;
  color: black !important;
 }

 /* Ajuste fino dos blocos de experiência */
 .grid {
  gap: 1rem;
  /* Diminui a lacuna padrão de 2rem */
 }

 .card {
  padding: 0.7rem;
  border: 1px solid #cbd5e1;
  background: transparent;
  page-break-inside: avoid;
  /* Prevenção contra quebras órfãs */
 }

 .experience-list li {
  margin-bottom: 1px;
  font-size: 0.8rem;
 }

 /* Ajuste de links para impressão tradicional */
 a {
  color: black !important;
  text-shadow: none !important;
 }
}