/* Estilos de la página de Contacto (page-contact.php). */
/* Reutiliza variables/clases (eyebrow, accent, section-head, wrap, btn) definidas en style.css. */

.contact-hero {
  padding:140px 0 60px;
}
.contact-hero .section-head {
  margin-bottom:40px;
}

.contact-video-frame {
  position:relative;
  width:100%;
  max-width:960px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-1);
}
.contact-video-frame iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.contact-form-section {
  padding:40px 0 110px;
}
.contact-grid {
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:start;
}
.contact-intro .eyebrow {
  margin-bottom:20px;
}
.contact-intro h2 {
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.15;
  margin-bottom:18px;
}
.contact-intro p {
  color:var(--ink-60);
  font-size:16px;
  line-height:1.7;
  max-width:420px;
}

.contact-card {
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px;
}
.contact-card h3 {
  font-size:22px;
  font-weight:800;
  margin-bottom:24px;
}

.contact-notice {
  border-radius:12px;
  padding:14px 18px;
  font-size:14px;
  font-weight:600;
  margin-bottom:24px;
}
.contact-notice--ok {
  background:rgba(46,163,242,.12);
  border:1px solid rgba(46,163,242,.35);
  color:var(--blue-light);
}
.contact-notice--error {
  background:rgba(255,81,0,.12);
  border:1px solid rgba(255,81,0,.4);
  color:var(--orange-2);
}

.contact-form {
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-field {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-field label {
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-60);
}
.contact-field input,
.contact-field textarea {
  font-family:inherit;
  font-size:15px;
  color:var(--white);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  transition:border-color .25s, background .25s;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline:none;
  border-color:var(--orange);
  background:rgba(255,255,255,.06);
}
.contact-field textarea {
  resize:vertical;
  min-height:110px;
}
.contact-form .btn {
  align-self:flex-start;
  margin-top:6px;
  border:0;
}

/* Honeypot: oculto para humanos, visible para bots que rellenan todos los campos. */
.contact-field-hp {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:900px) {
  .contact-hero {
    padding:100px 0 40px;
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:36px;
  }
  .contact-intro p {
    max-width:none;
  }
  .contact-card {
    padding:28px;
  }
}