/* Oscar Landing - Spanish lead-gen */

@keyframes oscarFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes oscarSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes oscarMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes oscarPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0; }
}

body { background: var(--bg-2); }

button { font-family: inherit; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Section animation on mount */
.os-fade-up { animation: oscarSlideUp 600ms var(--ease-out) both; }
.os-fade-up-d1 { animation: oscarSlideUp 600ms var(--ease-out) 80ms both; }
.os-fade-up-d2 { animation: oscarSlideUp 600ms var(--ease-out) 160ms both; }
.os-fade-up-d3 { animation: oscarSlideUp 600ms var(--ease-out) 240ms both; }

/* Generic interactive */
.os-link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--oscar-blue); font-weight: 600; text-decoration: none; }
.os-link-arrow:hover { color: var(--oscar-blue-500); text-decoration: none; }
.os-link-arrow:hover svg { transform: translateX(3px); }
.os-link-arrow svg { transition: transform 180ms var(--ease-out); }

/* Form fields */
.os-field {
  position: relative;
  display: block;
}
.os-field input,
.os-field select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 18px 16px 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--oscar-ink);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  box-sizing: border-box;
}
.os-field input::placeholder { color: transparent; }
.os-field input:focus,
.os-field select:focus {
  border-color: var(--oscar-blue);
}
.os-field label {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 14px;
  color: var(--oscar-ink-3);
  pointer-events: none;
  transition: all 160ms var(--ease-out);
  font-weight: 500;
}
.os-field input:focus + label,
.os-field input:not(:placeholder-shown) + label,
.os-field select:focus + label,
.os-field select.has-value + label {
  top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oscar-blue);
  font-weight: 600;
}
.os-field .err {
  color: var(--oscar-danger);
  font-size: 12px;
  margin-top: 6px;
  display: block;
  font-weight: 500;
}
.os-field input[aria-invalid="true"],
.os-field select[aria-invalid="true"] { border-color: var(--oscar-danger); }

/* Diagonal pattern overlay used in dark bands */
.os-pattern-stripes {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 12%, rgba(255,255,255,.04) 12.2%, rgba(255,255,255,.04) 12.4%, transparent 12.4%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.05) 38.2%, rgba(255,255,255,.05) 38.4%, transparent 38.4%),
    linear-gradient(115deg, transparent 64%, rgba(255,255,255,.04) 64.2%, rgba(255,255,255,.04) 64.4%, transparent 64.4%),
    linear-gradient(115deg, transparent 86%, rgba(255,255,255,.03) 86.2%, rgba(255,255,255,.03) 86.4%, transparent 86.4%);
}

/* Brand "short rule" */
.os-rule { width: 32px; height: 2px; background: var(--oscar-blue); display: inline-block; }
.os-rule-light { width: 32px; height: 2px; background: rgba(255,255,255,.45); display: inline-block; }

/* Hero photo */
.os-hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: saturate(0.78) brightness(0.92) contrast(1.05);
}
.os-hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(15,27,45,.92) 0%, rgba(30,58,95,.72) 38%, rgba(30,58,95,.35) 68%, rgba(15,27,45,.55) 100%);
}

/* Avatar ring */
.os-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1);
}

/* Star row */
.os-stars { display: inline-flex; gap: 2px; color: var(--oscar-blue); }

/* Counter pulse dot */
.os-live-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--oscar-success);
  display: inline-block;
}
.os-live-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--oscar-success); animation: oscarPulse 1800ms ease-out infinite;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Header */
  .os-header-inner { padding: 12px 20px !important; }
  .os-nav-links    { display: none !important; }

  /* How it works - switch right borders to bottom borders when stacked */
  .os-step-item { border-right: none !important; border-bottom: 1px solid var(--line-1) !important; }
  .os-step-item:last-child { border-bottom: none !important; }

  /* Hero */
  .os-hero-wrap  { padding: 16px 16px 32px !important; }
  .os-hero-grid  {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .os-hero-photo-img    { width: 100% !important; }
  .os-hero-photo-stripe { width: 100% !important; }
  .os-hero-left {
    padding: 48px 28px 40px !important;
    min-height: 340px;
  }
  .os-hero-form-cell { padding: 32px 28px !important; }

  /* Typography */
  .os-h1 { font-size: 42px !important; line-height: 1.05 !important; }
  .os-h2 { font-size: 30px !important; }

  /* Section padding */
  .os-section-pad { padding-left: 20px !important; padding-right: 20px !important; }

  /* Grids */
  .os-grid-3          { grid-template-columns: 1fr !important; }
  .os-grid-4          { grid-template-columns: repeat(2, 1fr) !important; }
  .os-testimonials-grid { grid-template-columns: 1fr !important; }
  .os-inv-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .os-cta-grid        { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Trust bar */
  .os-trust-divider { display: none !important; }

  /* Footer */
  .os-footer-mid { flex-wrap: wrap !important; gap: 12px !important; }
}

@media (max-width: 640px) {
  /* Header */
  .os-header-inner { padding: 10px 16px !important; gap: 12px !important; }

  /* Hero */
  .os-hero-wrap  { padding: 10px 10px 24px !important; }
  .os-hero-grid  { border-radius: 16px !important; }
  .os-hero-left  { padding: 36px 20px 32px !important; min-height: 280px; }
  .os-hero-form-cell { padding: 24px 20px !important; }

  /* Typography */
  .os-h1 { font-size: 34px !important; }
  .os-h2 { font-size: 26px !important; }

  /* Grids */
  .os-grid-4  { grid-template-columns: 1fr !important; }
  .os-inv-grid { grid-template-columns: 1fr !important; }

  /* Nav */
  .os-nav-phone { display: none !important; }

  /* Section vertical padding */
  .os-section-vert { padding-top: 56px !important; padding-bottom: 56px !important; }
}