/* =========================================================
   CONTACT PAGE

   Usa los design tokens (:root) ya definidos en ../style.css —
   este archivo se carga DESPUÉS, así que --accent, --hairline,
   --font-ui, etc. ya existen.
   ========================================================= */

body.contact-page {
  overflow-y: auto;
  overflow-x: hidden;

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  text-align: center;
}

.contact-shell {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 640px;

  margin: 0 auto;

  padding: 88px 24px 56px;
}


/* ---------------------------------------------------------
   BACK PILL — mismo lenguaje visual que .fullscreen-button
   --------------------------------------------------------- */

.back-pill {
  position: fixed;

  top: 20px;
  left: 24px;

  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  height: 36px;

  padding: 0 14px 0 12px;

  border: 1px solid var(--hairline-strong);
  border-radius: 8px;

  background: rgba(8, 13, 18, 0.72);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 0 22px -6px var(--glow-soft);

  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);

  color: #cfeaf2;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;

  text-decoration: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.back-pill:hover {
  background: rgba(15, 26, 34, 0.86);
  border-color: rgba(120, 224, 245, 0.32);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 0 22px -4px var(--glow-mid);
}

.back-pill svg {
  flex-shrink: 0;
  color: var(--accent);
}


/* ---------------------------------------------------------
   HERO — traza de sismógrafo en loop infinito, como una
   señal en vivo. Dos copias del mismo trazo una al lado de
   la otra dentro de un contenedor el doble de ancho, que se
   desplaza -50% en bucle: al llegar a la mitad, la segunda
   copia ocupa el sitio exacto de la primera y no se nota el
   corte (mismo truco que un marquee infinito).
   --------------------------------------------------------- */

.contact-hero {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 40px;
}

.hero-trace {
  position: relative;

  width: 100%;
  max-width: 460px;
  height: 52px;

  margin-bottom: 26px;

  overflow: hidden;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.hero-trace-svg {
  width: 200%;
  height: 100%;
  display: block;

  animation: trace-scroll 9s linear infinite;
}

.hero-trace-svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter: drop-shadow(0 0 6px var(--glow-mid));
}

@keyframes trace-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trace-svg {
    animation: none;
  }
}

.eyebrow {
  color: var(--accent);

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-shadow: 0 0 12px var(--glow-mid);

  margin-bottom: 10px;
}

.contact-hero h1 {
  color: #eaf6fb;

  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;

  margin-bottom: 12px;
}

.hero-sub {
  max-width: 46ch;

  color: #93aab5;

  font-size: 14.5px;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   ABOUT — qué es Earthquake Tracker
   --------------------------------------------------------- */

.about-section {
  width: 100%;

  padding: 34px 8px 40px;

  margin-bottom: 44px;

  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.eyebrow-center {
  display: block;
}

.about-title {
  max-width: 30ch;

  margin: 0 auto 16px;

  color: #eaf6fb;

  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.about-copy {
  max-width: 54ch;

  margin: 0 auto 24px;

  color: #93aab5;

  font-size: 14px;
  line-height: 1.7;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 8px 10px;

  color: #7f97a3;

  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-strip strong {
  color: var(--accent);
  font-weight: 700;
}

.stat-dot {
  color: #1c3a46;
}


/* ---------------------------------------------------------
   FORM PANEL — mismo panel glass que .controls
   --------------------------------------------------------- */

.contact-main {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-form {
  position: relative;

  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 16px;

  padding: 26px;

  text-align: left;

  background: rgba(8, 13, 18, 0.86);

  border: 1px solid var(--hairline-strong);
  border-radius: 14px;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.35),
    0 0 30px -10px var(--glow-soft);

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.contact-form::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--glow-strong) 50%,
      transparent 100%
    );

  opacity: 0.7;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.field label {
  padding-left: 2px;

  color: #7f97a3;

  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;

  padding: 11px 12px;

  border: 1px solid rgba(120, 224, 245, 0.09);
  border-radius: 8px;

  outline: none;

  background: #0f1a22;

  color: #eaf6fb;

  font-family: var(--font-ui);
  font-size: 13.5px;

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.field input,
.field select {
  height: 42px;
}

.field textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.5;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 30px;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237f97a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;

  cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #5f7a86;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  background-color: #14232c;
  border-color: rgba(120, 224, 245, 0.16);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

/* Honeypot anti-spam: invisible para personas, visible para bots */
.field-hp {
  position: absolute;
  left: -9999px;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 46px;

  margin-top: 4px;

  border: none;
  border-radius: 8px;

  background: linear-gradient(135deg, var(--accent), #0891a8);

  color: #051216;

  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;

  cursor: pointer;

  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.submit-btn:hover {
  box-shadow: 0 0 20px -4px var(--glow-mid);
}

.submit-btn:active {
  transform: translateY(1px);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-status {
  min-height: 18px;

  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.form-status[data-state="ok"] {
  color: var(--accent-strong);
}

.form-status[data-state="error"] {
  color: var(--status-error);
}


/* ---------------------------------------------------------
   DIRECT LINE — alternativa por email, bajo el formulario
   --------------------------------------------------------- */

.direct-line {
  max-width: 44ch;

  margin-top: 22px;

  color: #7f97a3;

  font-size: 12.5px;
  line-height: 1.6;
}

.direct-line a.info-email {
  color: var(--accent-strong);

  font-family: var(--font-mono);
  font-weight: 600;

  text-decoration: none;
}

.direct-line a.info-email:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .contact-shell {
    padding: 76px 18px 40px;
  }

  .contact-hero h1 {
    font-size: 28px;
  }

  .about-title {
    font-size: 19px;
  }
}