/* ============================ ESTILOS GERAIS ============================ */
body {
  background-color: black;
  display: flex;          
  flex-direction: column;
  justify-content: center;
  margin: 2%;
}

/* ============================ CABEÇALHO (NAV) ============================ */
nav {
  width: 100%;
  text-align: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;       /* simplificado */
  margin: 0 2%;
}

nav ul li {
  flex: 1;
  margin: 2%;
  padding: 0;       /* simplificado */
  border-radius: 1vw;
  background-color: #ff4081;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul li a {
  display: block;
  width: 100%;
  padding: clamp(0.2rem, 2vw, 1rem);
  text-decoration: none;
  color: white;
  font-size: clamp(0.4rem, 4vw, 2rem);
  border-radius: 1vw;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

nav ul li a:hover {
  background-color: #007BFF;
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

nav ul li a.disabled {
  pointer-events: none;
  color: grey;
}

/* ============================ TÍTULOS ============================ */
h1, h2, h3, h4, h5 {
  text-align: center;
  margin: 1vw 0;
  font-size: clamp(1rem, 6vw, 3.5rem); /* títulos mais impactantes */

}

h1 { color: white; }
h2 { color: yellow; }
h3 { color: brown; }
h4 { color: white; }
h5 { color: #007BFF; }

/* ============================ PARÁGRAFOS ============================ */
.p1, .p2, .p3, .p4 {
  hyphens: auto;
  font-size: clamp(1rem, 5vw, 2.5rem);
  text-indent: 2em;
  margin: 2%;
}

.p1, .p2, .p4 { text-align: justify; }
.p3 { text-align: left; }

.p1 { color: gold; }
.p2 { color: red; }
.p3 { color: blue; }
.p4 { color: white; }

/* ============================ BOTÕES ============================ */
.btn-tecnologia,
.btn-serigrafia,
.btn1,
.btn2 {
  width: 98%;
  margin: 1%;
  padding: 1%;
  font-size: clamp(1rem, 5vw, 3rem);
  border: none;
  border-radius: 1vw;
  text-align: center;
  cursor: pointer;
  color: white;
  animation: blinkAlert 1s infinite alternate;
  transition: transform 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.btn-tecnologia:hover,
.btn-serigrafia:hover,
.btn1:hover,
.btn2:hover {
  background-color: #007BFF;
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn1:hover, .btn2:hover { background-color: #45a049; }

.btn3 {
  text-align: center;
  display: inline-block;
  padding: 1%;
  margin: 1%;
  font-size: clamp(0.4rem, 4vw, 2rem);
  border: none;
  border-radius: 1vw;
  background-color: #28A745;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn3:hover {
  background-color: #218838;
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ============================ ANIMAÇÃO DE ALERTA ============================ */
@keyframes blinkAlert {
  0% { background-color: green; }
  100% { background-color: white; color: blue; }
}

/* ============================ CONTAINERS ============================ */
.container-descriçãorifa {
  width: 95%;
  margin: 1% auto;
  padding: 1%;
  background-color: #1e1e1e;
  border-radius: 1vw;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  color: #f5f5f5;
  font-size: clamp(1rem, 5vw, 2.5rem);
}

.container-descriçãorifa dt {
  font-weight: bold;
  margin-top: 1vw;
  color: #ffd700;
  font-size: clamp(1rem, 5vw, 2.5rem);
}

.container-descriçãorifa dd {
  hyphens: auto;
  margin-left: 1vw;
  margin-bottom: 1vw;
  text-align: justify;
  line-height: 1.5;
  color: #e0e0e0;
  font-size: clamp(1rem, 5vw, 2.5rem);
  text-indent: 2em;
}

/* ============================ RODAPÉ ============================ */
footer {
  text-align: center;
  border-radius: 1vw;
  padding: 1%;
  margin: 1%;
  font-size: clamp(0.4rem, 4vw, 2rem);
  background-color: blue;
  color: white;
}