/* ═══════════════════════════════════════════════════════════════
   Landing — Terminal Payway · Mutual de los Arroyos
   Mismos tokens de color que el formulario de adhesión.
   ═══════════════════════════════════════════════════════════════ */

.lp {
  --fondo:        #070042;   /* azul noche Payway/Mutual */
  --fondo-2:      #0d0a5c;
  --agua-100:     #d8f3fc;
  --agua-300:     #7fd8f5;
  --agua-500:     #00a9e0;   /* celeste Mutual */
  --agua-700:     #0087b3;
  --payway:       #1d2cf3;   /* azul Payway */
  --payway-oscuro:#141ecf;
  --acento:       #ff5a6e;   /* rojo/coral para el beneficio destacado */
  --blanco:       #ffffff;
  --texto:        #16172b;
  --texto-suave:  #ffffff;
  --borde:        #e6e8f5;
  --superficie:   #f7f8fd;
  --sombra: 0 20px 45px -18px rgba(7, 0, 66, .35);
  --radio: 18px;
  --radio-chico: 12px;

  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; display: block; }
.lp h1, .lp h2, .lp h3 { font-family: 'Source Serif 4', Georgia, serif; margin: 0 0 .5em; line-height: 1.15; color: var(--fondo); }
.lp p { margin: 0 0 1em; color: var(--texto-suave); }

.lp-contenedor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.lp-btn-primario {
  background: linear-gradient(135deg, var(--payway), var(--agua-500));
  color: var(--blanco);
  box-shadow: 0 14px 30px -10px rgba(29, 44, 243, .55);
}
.lp-btn-primario:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(29, 44, 243, .65); }
.lp-btn-fantasma { background: transparent; border-color: rgba(255,255,255,.4); color: var(--blanco); }
.lp-btn-fantasma:hover { background: rgba(255,255,255,.1); }
.lp-btn-header { padding: 11px 22px; font-size: .9rem; }
.lp-btn-grande { padding: 18px 36px; font-size: 1.05rem; }

/* ── Header ───────────────────────────────────────────────── */
.lp-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.lp-header-flex { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.lp-logos { display: flex; align-items: center; gap: 14px; }
.lp-logo-mutual { height: 34px; width: auto; }
.lp-logo-payway { height: 30px; width: auto; }
.lp-x { color: var(--texto-suave); font-size: 1.1rem; }

/* ── Hero ─────────────────────────────────────────────────── */
.lp-hero {
  background:
    radial-gradient(ellipse 900px 500px at 85% 15%, rgba(0,169,224,.35), transparent 60%),
    linear-gradient(160deg, var(--fondo) 0%, var(--fondo-2) 55%, var(--payway) 150%);
  color: var(--blanco);
  padding: 72px 0 90px;
  overflow: hidden;
}
.lp-hero-flex { display: flex; align-items: center; gap: 56px; }
.lp-hero-texto { flex: 1 1 480px; min-width: 0; }
.lp-hero-kicker {
  display: inline-block;
  color: var(--agua-300);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 14px;
}
.lp-hero h1 {
  color: var(--blanco);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 700;
  margin-bottom: 20px;
}
.lp-hero h1 span { color: var(--agua-300); }
.lp-hero-sub { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 52ch; margin-bottom: 28px; }
.lp-hero-sub strong { color: var(--blanco); }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.lp-hero-nota { color: rgba(255,255,255,.6); font-size: .86rem; margin: 0; }

.lp-hero-img { flex: 0 0 340px; position: relative; display: flex; justify-content: center; }
.lp-hero-glow {
  position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(0,169,224,.45), transparent 70%);
  filter: blur(10px);
}
.lp-terminal-img {
  position: relative;
  width: 260px;
  filter: drop-shadow(0 30px 45px rgba(0,0,0,.45));
}

/* ── Tira de beneficios ──────────────────────────────────── */
.lp-tira { background: var(--superficie); padding: 0; }
.lp-tira-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  transform: translateY(-38px);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.lp-tira-item {
  background: var(--blanco);
  padding: 26px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-right: 1px solid var(--borde);
}
.lp-tira-item:last-child { border-right: none; }
.lp-tira-item div { display: flex; flex-direction: column; }
.lp-tira-item strong { color: var(--fondo); font-size: .96rem; margin-bottom: 2px; }
.lp-tira-item span { color: var(--texto); font-size: .82rem; }
.lp-tira-icono {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--agua-100);
  color: var(--agua-700);
}
.lp-tira-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-tira-destacado {
  background: linear-gradient(135deg, var(--acento), #c81e3a);
  position: relative;
}
.lp-tira-destacado strong, .lp-tira-destacado span { color: var(--blanco); }
.lp-tira-destacado span { color: rgba(255,255,255,.9); }
.lp-tira-destacado .lp-tira-icono { background: rgba(255,255,255,.2); color: var(--blanco); }

/* ── Explicativo ─────────────────────────────────────────── */
.lp-explicativo { padding: 30px 0 80px; }
.lp-explicativo-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 52px;
  align-items: center;
}
.lp-eyebrow {
  color: var(--texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  margin-bottom: 10px;
}
.lp-explicativo h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.lp-explicativo p strong { color: var(--fondo); }
.lp-link-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--payway);
  font-weight: 700;
  text-decoration: none;
  margin-top: 6px;
}
.lp-link-flecha:hover { text-decoration: underline; }

.lp-explicativo-destaque {
  background: linear-gradient(160deg, var(--fondo), var(--fondo-2));
  border-radius: var(--radio);
  padding: 34px;
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.lp-badge-remunerada {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.lp-badge-porcentaje {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acento), #c81e3a);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
}
.lp-badge-remunerada strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.lp-badge-remunerada span { color: rgba(255,255,255,.78); font-size: .92rem; }
.lp-check-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-check-lista li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.88);
  font-size: .92rem;
}
.lp-check-lista li::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--agua-500);
}
.lp-check-lista li::after {
  content: '';
  position: absolute; left: 6px; top: 7px;
  width: 6px; height: 10px;
  border-right: 2px solid var(--fondo);
  border-bottom: 2px solid var(--fondo);
  transform: rotate(40deg);
}

/* ── Grilla de funciones ─────────────────────────────────── */
.lp-funciones { background: var(--superficie); padding: 80px 0; }
.lp-funciones-titulo {
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 44px;
}
.lp-funciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.lp-funcion-card {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 12px 30px -16px rgba(7,0,66,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lp-funcion-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.lp-funcion-card h3 { font-size: 1.05rem; padding: 18px 20px 0; color: var(--fondo); }
.lp-funcion-card p { padding: 8px 20px 22px; font-size: .88rem; margin: 0; }
.lp-funcion-img { height: 130px; background-size: cover; background-position: center; }
.lp-funcion-img--1 { background: linear-gradient(135deg, var(--acento), #ff8a6b); }
.lp-funcion-img--2 { background: linear-gradient(135deg, var(--payway), #6a4bff); }
.lp-funcion-img--3 { background: linear-gradient(135deg, var(--agua-500), var(--agua-700)); }
.lp-funcion-img--4 { background: linear-gradient(135deg, var(--fondo), var(--payway)); }

/* ── CTA final ────────────────────────────────────────────── */
.lp-cta-final { padding: 70px 0; }
.lp-cta-final-caja {
  background: linear-gradient(120deg, var(--fondo), var(--payway));
  border-radius: var(--radio);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: var(--blanco);
  box-shadow: var(--sombra);
  flex-wrap: wrap;
}
.lp-cta-final-caja h2 { color: var(--blanco); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.lp-cta-final-caja p { color: rgba(255,255,255,.82); margin: 0; max-width: 46ch; }

/* ── Footer ───────────────────────────────────────────────── */
.lp-footer { background: var(--fondo); padding: 40px 0; }
.lp-footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.lp-footer-logos { display: flex; align-items: center; gap: 18px; }
.lp-footer-logo-mutual { height: 26px; filter: brightness(0) invert(1); opacity: .9; }
.lp-footer-logo-payway { height: 22px; filter: brightness(0) invert(1); opacity: .9; }
.lp-footer-texto { color: rgba(255,255,255,.6); font-size: .84rem; margin: 0; }
.lp-footer-link { color: var(--agua-300); text-decoration: none; font-weight: 600; font-size: .88rem; }
.lp-footer-link:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .lp-hero-flex { flex-direction: column; text-align: center; }
  .lp-hero-sub { margin-left: auto; margin-right: auto; }
  .lp-hero-cta { justify-content: center; }
  .lp-hero-img { order: -1; flex: none; }
  .lp-tira-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-tira-item { border-right: 1px solid var(--borde); }
  .lp-tira-item:nth-child(2n) { border-right: none; }
  .lp-tira-item:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .lp-explicativo-grid { grid-template-columns: 1fr; }
  .lp-funciones-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .lp-header-flex { flex-wrap: wrap; gap: 10px; }
  .lp-hero { padding: 48px 0 70px; }
  .lp-tira-grid { grid-template-columns: 1fr; transform: translateY(-24px); }
  .lp-tira-item { border-right: none !important; border-top: 1px solid var(--borde); }
  .lp-tira-item:first-child { border-top: none; }
  .lp-funciones-grid { grid-template-columns: 1fr; }
  .lp-cta-final-caja { flex-direction: column; text-align: center; padding: 34px 26px; }
  .lp-footer-flex { flex-direction: column; text-align: center; }
}