* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #020617;
  color: #e5e7eb;
  font-family: monospace;
}

/* HEADER */
.site-header {
  padding: 60px 40px;
  background: linear-gradient(180deg, #06134a, #06134a);
  border-bottom: 1px solid #1e293b;
}

.header-content {
  max-width: 1100px;
  margin: auto;
}

.portfolio-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: #22c55e;
  border: 1px solid #14532d;
  border-radius: 6px;
}

h1 {
  font-size: 40px;
  margin-top: 16px;
}

.subtitle {
  margin-top: 8px;
  color: #38bdf8;
}

.contact {
  margin-top: 12px;
  font-size: 13px;
}

.contact a {
  color: #22c55e;
  text-decoration: none;
}

/* BARE METAL */
.baremetal {
  text-align: center;
  padding: 30px;
}

.baremetal-title {
  letter-spacing: .2em;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ========================= */
/* BARE METAL (CHASSI REAL)  */
/* ========================= */

.baremetal-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 180px;
  height: 48px;
  margin: 0 auto;
  background: linear-gradient(
    180deg,
    #0b1220,
    #020617
  );
  border: 1px solid #1e293b;
  border-radius: 8px;
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.9),
    0 0 18px rgba(34,197,94,.15);
}

/* LED PADRÃO */
.bm-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 6px rgba(34,197,94,.8),
    0 0 14px rgba(34,197,94,.4);
  opacity: .3;
  animation-name: bm-blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* VELOCIDADES DIFERENTES */
.bm-led:nth-child(1) { animation-duration: 0.18s; }
.bm-led:nth-child(2) { animation-duration: 0.42s; }
.bm-led:nth-child(3) { animation-duration: 0.67s; }
.bm-led:nth-child(4) { animation-duration: 0.31s; }
.bm-led:nth-child(5) { animation-duration: 0.54s; }

/* ANIMAÇÃO REALISTA */
@keyframes bm-blink {
  from {
    opacity: .15;
    box-shadow:
      0 0 2px rgba(34,197,94,.4),
      0 0 6px rgba(34,197,94,.2);
  }
  to {
    opacity: 1;
    box-shadow:
      0 0 6px rgba(34,197,94,1),
      0 0 18px rgba(34,197,94,.9);
  }
}

@keyframes blink {
  from { opacity: .2; }
  to { opacity: 1; }
}

/* FLOW */
.flow-description {
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding: 10px 30px 30px;
}

/* DIAGRAM */
.infra-diagram {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 30px;
}

.node {
  width: 220px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #020617, #020617);
  border: 1px solid #1e293b;
  box-shadow: 0 0 25px rgba(34,197,94,.08);
}

.node h4 {
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: .08em;
}

/* TAGS */
.tag {
  display: inline-block;
  margin: 4px 4px 0 0;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid #334155;
  color: #cbd5f5;
}

/* COLORS */
.neutral { color: #cbd5f5; }
.edge { color: #fbbf24; border-color: #92400e; }
.firewall-tag { color: #f43f5e; border-color: #881337; }
.server-tag { color: #22c55e; border-color: #14532d; }
.db-tag { color: #38bdf8; border-color: #075985; }
.monitor-tag { color: #c084fc; border-color: #6b21a8; }

/* ARROWS */
.arrow {
  position: relative;
  width: 46px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(34,197,94,1),
    rgba(34,197,94,.3)
  );
  margin: 0 6px;
}

/* PONTA DA SETA */
.arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid rgba(34,197,94,1);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  filter: drop-shadow(0 0 6px rgba(34,197,94,.8));
}



/* MONITORING */
.monitoring {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* ARCHITECTURE */
.architecture {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  border-radius: 14px;
  border: 1px solid #1e293b;
}

.architecture h3 {
  margin-bottom: 16px;
  letter-spacing: .1em;
  color: #22c55e;
}

.architecture li {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* PRODUCTION */
.production {
  max-width: 900px;
  margin: 40px auto 60px;
  padding: 30px;
  border-left: 4px solid #22c55e;
}

.production h3 {
  margin-bottom: 12px;
}

.production p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ========================= */
/* EVIDÊNCIAS TÉCNICAS       */
/* ========================= */

.evidence-intro {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5f5;
}

.evidence-block {
  max-width: 900px;
  margin: 40px auto;
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, #020617, #020617);
  border: 1px solid #1e293b;
  box-shadow: 0 0 30px rgba(34,197,94,.08);
}

.evidence-block h3 {
  margin-bottom: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #22c55e;
}

.evidence-block p {
  font-size: 13px;
  line-height: 1.6;
  color: #e5e7eb;
  margin-bottom: 12px;
}

.evidence-code {
  margin: 16px 0;
  padding: 16px;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 10px;
  overflow-x: auto;
}

.evidence-code code {
  font-size: 12px;
  color: #86efac;
}

.evidence-note {
  font-size: 12px;
  color: #94a3b8;
}
.status-ok {
  color: #22c55e;
  font-weight: bold;
}


/* ========================= */
/* LINK DE EVIDÊNCIAS        */
/* ========================= */

.evidence-link {
  max-width: 820px;
  margin: 30px auto 50px;
  padding: 18px 22px;
  border: 1px dashed #1e293b;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(180deg, #020617, #020617);
}

.evidence-link p {
  font-size: 13px;
  color: #cbd5f5;
  margin-bottom: 8px;
}

.evidence-link a {
  font-size: 13px;
  color: #22c55e;
  text-decoration: none;
  font-weight: bold;
}

.evidence-link a:hover {
  text-decoration: underline;
}
/* ===== EVIDÊNCIAS VISUAIS ===== */

.evidence-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(760px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.evidence-image {
  background: #0f172a; /* fundo escuro técnico */
  border: 1px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

.evidence-image img {
  width: 100%;
  height: 180px;           /* 🔒 ALTURA FIXA */
  object-fit: cover;       /* 🔒 NÃO distorce */
  display: block;
  filter: contrast(1.05);
}

.evidence-image figcaption {
  padding: 10px;
  font-size: 0.85rem;
  color: #cbd5f5;
  background: #020617;
  border-top: 1px solid #1e293b;
}

/* ===== MODAL DE EVIDÊNCIAS ===== */

.evidence-thumb {
  cursor: zoom-in;
}

/* fundo escuro */
.evidence-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* imagem grande */
.evidence-modal img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

/* legenda */
.evidence-modal p {
  margin-top: 12px;
  color: #cbd5f5;
  font-size: 0.9rem;
}

/* botão fechar */
.evidence-close {
  position: absolute;
  top: 18px;
  right: 26px;
  font-size: 2rem;
  color: #e5e7eb;
  cursor: pointer;
}
.baremetal-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-top: 4px;
}

.site-header {
  position: relative;
}

.header-badges {
  position: absolute;
  top: 50px;
  right: 100px;
  display: flex;
  gap: 12px;
}

.header-badges img {
  filter:
    grayscale(100%)
    contrast(1.0)
    brightness(1.02)
    saturate(0%)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 10px rgba(180, 190, 200, 0.25));

  transition: filter 0.3s ease, transform 0.3s ease;
}


.contact {
  font-size: 0.95em;
  color: #9ca3af;
  
}

.contact a {
  color: #9ca3af;
  text-decoration: underline;     /* sublinhado permanente */
  text-decoration-color: #9ca3af; /* cinza suave */
  font-size: 0.95em;
}

.contact a:hover {
  text-decoration: underline;     /* mantém igual no hover */
  color: white;
  text-decoration-color: white; /* cinza suave */
}

/* ========================= */
/* O QUE ESTE AMBIENTE DEMONSTRA */
/* ========================= */

.capabilities {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.06),
    rgba(251, 191, 36, 0.02)
  );
  border: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow:
    0 0 24px rgba(251, 191, 36, 0.15);
}

.capabilities h3 {
  margin-bottom: 18px;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fbbf24;
}

.capabilities ul {
  list-style: none;
}

.capabilities li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #e5e7eb;
}

/* marcador técnico */
.capabilities li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: #fbbf24;
  font-weight: bold;
}

/* ========================= */
/* RESPONSIVO — MOBILE       */
/* ========================= */

@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  /* HEADER */
  .site-header {
    padding: 40px 20px;
    text-align: center;
  }

  .header-content {
    padding: 0;
  }

  h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 14px;
  }

  .contact {
    font-size: 12px;
    line-height: 1.5;
  }

  .contact a {
    word-break: break-word;
  }

  /* BADGES (graduação / mba) */
  .header-badges {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }

  .header-badges img {
    width: 42px;
    height: auto;
  }

  /* BARE METAL */
  .baremetal {
    padding: 20px;
  }

  .baremetal-box {
    width: 160px;
    height: 44px;
  }

  /* DESCRIÇÃO */
  .flow-description {
    font-size: 12px;
    padding: 10px 20px 20px;
  }

  /* DIAGRAMA */
  .infra-diagram {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .node {
    width: 100%;
    max-width: 360px;
  }

  /* SETAS — viram verticais */
  .arrow {
    width: 2px;
    height: 24px;
    margin: 4px 0;
    background: linear-gradient(
      180deg,
      rgba(34,197,94,1),
      rgba(34,197,94,.3)
    );
  }

  .arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(34,197,94,1);
    border-bottom: none;
  }

  /* MONITORAMENTO */
  .monitoring {
    padding: 10px;
  }

  /* SEÇÕES GRANDES */
  .architecture,
  .production,
  .capabilities,
  .evidence-link,
  .evidence-block {
    margin: 24px 16px;
    padding: 20px;
  }

  .architecture li,
  .production p,
  .capabilities li {
    font-size: 12px;
  }

  /* EVIDÊNCIAS VISUAIS */
  .evidence-gallery {
    grid-template-columns: 1fr;
  }

  .evidence-image img {
    height: 160px;
  }

  /* MODAL */
  .evidence-modal img {
    max-width: 95%;
    max-height: 75vh;
  }

}

.edgefw-tag {
  color: #fb923c;
  border-color: #9a3412;
}