/* Pattrack landing — estilos globales + componentes propios.
 * El layout de secciones vive inline en index.html (importado del diseño).
 * Aquí: reset, fuente self-host, animaciones, foco, y el formulario de demo.
 */

/* ---- Inter Variable, self-host (sin Google Fonts CDN — CLAUDE.md §14) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

/* ---- Reset / base (del diseño original) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-off-white);
  color: var(--color-navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ---- Animaciones (referenciadas por el markup inline) ---- */
@keyframes patpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes patping  { 0% { transform: scale(.7); opacity: .6; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 180, 160, .45);
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- FAQ accordion ---- */
.faq-item.open .faq-chevron { transform: rotate(180deg); stroke: var(--color-teal-500); }

/* ---- Formulario de demo (sección CTA final, sobre fondo teal) ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field > span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy-900);
}
.field input,
.field select {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-navy-900);
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.field input::placeholder { color: var(--color-slate-400); }
.field input:focus,
.field select:focus { border-color: var(--color-teal-500); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--color-coral-600); }

.form-submit {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-teal-500);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 180, 160, .32);
  transition: background var(--duration-fast) var(--easing-standard);
}
.form-submit:hover { background: var(--color-teal-400); }
.form-submit:disabled { opacity: .6; cursor: progress; }

.form-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate-500);
  text-align: center;
}
.form-error {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-danger-700);
  text-align: center;
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Páginas legales (/privacy) ---- */
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
}
.legal-wrap h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--color-navy-900);
}
.legal-meta {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-slate-400);
}
.legal-wrap h2 {
  margin: 40px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-navy-900);
}
.legal-wrap p,
.legal-wrap li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-slate-500);
}
.legal-wrap p { margin: 14px 0 0; }
.legal-wrap ul { margin: 14px 0 0; padding-left: 22px; }
.legal-wrap li { margin: 7px 0 0; }
.legal-wrap a { color: var(--color-teal-700); font-weight: 600; }
.legal-wrap strong { color: var(--color-navy-900); }
.legal-card {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--color-teal-50);
  border: 1px solid var(--color-teal-100);
  border-radius: var(--radius-large);
}
.legal-card p { margin: 6px 0 0; }
.legal-card p:first-child { margin: 0; }