/* =========================
   CONTACT PAGE — FULL STYLE
   ========================= */

/* RESET SAFE */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #080808;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
}

/* =========================
   HERO
   ========================= */

.contact-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem 8vw;
  overflow: hidden;
  background: #080808;
}

/* overlay cyber */
.contact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 45, 59, 0.1),
    rgba(0, 0, 0, 0.95)
  );
}

/* content */
.contact-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

/* status */
.contact-status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(255, 45, 59, .35);
  color: #ff2d3b;
  font-family: monospace;
  font-size: .7rem;
  letter-spacing: .15em;
}

.contact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2d3b;
}

/* title */
.contact-title {
  font-size: clamp(3rem, 7vw, 7rem);
  margin: 1.5rem 0 0;
  line-height: .9;
}

/* subtitle */
.contact-subtitle {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: rgba(255,255,255,.65);
  max-width: 650px;
}

/* tags */
.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.8rem;
}

.contact-tag {
  font-family: monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  padding: .35rem .75rem;
  border: 1px solid rgba(255, 45, 59, .25);
  color: #ff2d3b;
  background: rgba(255, 45, 59, .05);
}

/* =========================
   LAYOUT
   ========================= */

.contact-body {
  max-width: 1400px;
  margin: auto;
  padding: 5rem 8vw;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 5rem;
}

/* =========================
   SECTION HEADERS
   ========================= */

.pd-section-tag {
  font-family: monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  color: #ff2d3b;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

/* =========================
   DESCRIPTION
   ========================= */

.contact-description {
  color: rgba(255,255,255,.7);
  line-height: 1.8;
}

/* =========================
   FORM
   ========================= */

.contact-form {
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* input group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.3rem;
}

.form-group label {
  font-family: monospace;
  font-size: .7rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}

/* inputs */
.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff;
  font-size: .95rem;
  outline: none;
  transition: all .25s ease;
}

/* focus */
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus,
.contact-form .form-group select:focus {
  border-color: rgba(255,45,59,.6);
  box-shadow: 0 0 0 3px rgba(255,45,59,.1);
}

/* textarea */
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* =========================
   SELECT — PREMIUM STYLE
   ========================= */

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 1rem 3rem 1rem 1.1rem;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);

  background: rgba(255,255,255,.03);
  color: #fff;

  font-size: .95rem;
  font-family: inherit;

  outline: none;
  cursor: pointer;

  transition: all .25s ease;

  /* custom arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, #ff2d3b 50%),
    linear-gradient(135deg, #ff2d3b 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);

  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;

  background-size:
    6px 6px,
    6px 6px,
    2.5em 2.5em;

  background-repeat: no-repeat;
}

/* hover */
.form-group select:hover {
  border-color: rgba(255,45,59,.35);
  background: rgba(255,255,255,.05);
}

/* focus */
.form-group select:focus {
  border-color: rgba(255,45,59,.6);
  box-shadow: 0 0 0 3px rgba(255,45,59,.12);
  background: rgba(255,255,255,.05);
}

/* option styling (limited but helps) */
.form-group select option {
  background: #0d0d0d;
  color: #fff;
}

/* disabled state (por si luego lo usas) */
.form-group select:disabled {
  opacity: .5;
  cursor: not-allowed;
}


/*Error validations*/

.field-error{
  color:#ff5f5f;
  font-size:.8rem;
  margin-top:6px;
  min-height:18px;
}

.input-error{
  border:1px solid #ff5f5f !important;
}

.contact-submit.loading{
  opacity:.6;
  pointer-events:none;
}

/* =========================
   BUTTON
   ========================= */

.contact-submit {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: monospace;
  letter-spacing: .15em;
  color: #fff;
  background: linear-gradient(135deg, #ff2d3b, #ff4d4d);
  display: flex;
  justify-content: center;
  gap: .8rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255,45,59,.25);
}

/* =========================
   ASIDE
   ========================= */

.contact-card {
  padding: 2rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 1rem;
  border-radius: 6px;
}

.contact-card-title {
  font-family: monospace;
  letter-spacing: .15em;
  margin-bottom: 1.5rem;
  color: #fff;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: rgba(255,255,255,.6);
}

.summary-row strong {
  color: #fff;
}

/* links */
.quick-links {
  display: flex;
  flex-direction: column;
}

.quick-links a {
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  color: #ff2d3b;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color .2s;
}

.quick-links a:hover {
  color: #fff;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1000px) {
  .contact-body {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}