/* ---------------- RESET ---------------- */

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

/* ---------------- BASE ---------------- */

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: #0e1333;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  text-align: center;
  padding: 2rem;
  max-width: 620px;
}

/* ---------------- LOGO ---------------- */

.logo {
  width: 400px;
  max-width: 90vw;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
}

/* ---------------- TEXT ---------------- */

h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

.subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
}

.coming-soon {
  margin-top: 2rem;
  font-size: 0.9rem;
  letter-spacing: 2px;
  opacity: 0.6;
}

/* ---------------- BUTTONS ---------------- */

.primary-btn {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.9rem 1.8rem;
  background: #ffd500;
  color: #014086;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.4px;
  transition: all 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 213, 0, 0.35);
}

/* ---------------- CONTACT FORM ---------------- */

.contact-form {
  margin-top: 2.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-form p {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.85rem;
  border-radius: 6px;
  border: none;
  font-size: 0.95rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}

.contact-form button {
  margin-top: 1rem;
  padding: 0.9rem;
  background: #ffd500;
  color: #014086;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%;
}

/* ---------------- BACK HOME ---------------- */

.back-home {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #ffd500;
  border: 2px solid #ffd500;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.back-home:hover {
  background: #ffd500;
  color: #014086;
}

/* ---------------- CONTACT DIRECT ---------------- */

.contact-direct {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.95rem;
  color: #e6e6e6;
}

.contact-direct p:first-child {
  margin-bottom: 0.6rem;
  opacity: 0.9;
}

.contact-direct a {
  color: #ffd500;
  text-decoration: none;
  font-weight: 500;
}

.contact-direct a:hover {
  text-decoration: underline;
}

/* ---------------- MINI CONTACT (INDEX) ---------------- */

.contact-mini {
  margin-top: 2.4rem;
  font-size: 0.85rem;
  color: #e6e6e6;
  opacity: 0.9;
  text-align: center;
  line-height: 1.7;
}

/* ---------------- WHATSAPP ---------------- */

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wa-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffd500' d='M16 2.7A13.3 13.3 0 0 0 2.7 16c0 2.3.6 4.6 1.8 6.6L2 30l7.6-2.4a13.2 13.2 0 0 0 6.4 1.6A13.3 13.3 0 0 0 29.3 16 13.3 13.3 0 0 0 16 2.7Zm0 24.2a10.9 10.9 0 0 1-5.6-1.6l-.4-.2-4.5 1.4 1.5-4.3-.3-.4A10.9 10.9 0 1 1 16 26.9Zm6-8.2c-.3-.1-1.9-.9-2.2-1s-.5-.1-.7.1-.8 1-.9 1.2-.3.2-.6.1a8.8 8.8 0 0 1-2.6-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.4.3-.6s0-.4 0-.6-.7-1.8-1-2.4-.6-.5-.8-.5h-.7a1.4 1.4 0 0 0-1 .5 4.2 4.2 0 0 0-1.3 3.1 7.3 7.3 0 0 0 1.5 3.9 16.7 16.7 0 0 0 6.4 5.7 7.3 7.3 0 0 0 3.9.6 3.4 3.4 0 0 0 2.3-1.6 2.8 2.8 0 0 0 .2-1.6c-.1-.2-.3-.3-.6-.4Z'/%3E%3C/svg%3E");
}

/* ---------------- MICROCOPY ---------------- */

.contact-microcopy {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #e6e6e6;
  opacity: 0.7;
  text-align: center;
}