/* FramePick — minimalista: blanco, tinta negra, píldoras grises y dorado Pro */
@import url("/assets/fonts/inter.css");

:root {
  --accent: #111114; --accent-ink: #fff;
  --gold: #d9a400; --gold-soft: #fff6d6;
  --ink: #111114; --muted: #7a7a82; --bg: #ffffff; --bg-2: #f2f2f4; --line: #e4e4e8;
  --radius: 24px; --radius-sm: 14px;
  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --placeholder: url("/apps/framepick/img/icon.png");
}
h1, h2 { letter-spacing: -.035em; font-weight: 800; }
h3 { letter-spacing: -.01em; }
.kicker { color: var(--muted); }
.feat .fi { background: var(--bg-2); color: var(--ink); }

/* Hero: tira de fotogramas */
.app-hero { position: relative; overflow: hidden; }
.app-hero .icon { box-shadow: 0 0 0 1px var(--line); }
.hero-visual .phone { width: 270px; transform: rotate(3deg); }
.strip {
  position: absolute; left: 50%; top: 50%; width: 140%; transform: translate(-50%, -50%) rotate(-8deg);
  display: flex; gap: 12px; padding: 16px 10px; background: #111114; border-radius: 12px; z-index: -1;
}
.strip::before, .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, #fff 10px 20px); opacity: .55;
}
.strip::before { top: 4px; } .strip::after { bottom: 4px; }
.strip span { flex: 1; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(135deg, #3a3a40, #1f1f24); }
.strip span.pick { background: #fff; outline: 3px solid var(--gold); position: relative; }
.strip span.pick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: #111; font-size: 20px; }

.pill-note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 18px; }
.crown { color: var(--gold); }

/* Planes */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; max-width: 860px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: #fff; }
.plan.pro { background: #111114; color: #fff; border-color: #111114; position: relative; overflow: hidden; }
.plan.pro::after { content: "♛"; position: absolute; right: 20px; top: 8px; font-size: 90px; color: var(--gold); opacity: .18; }
.plan h3 { font-size: 22px; display: flex; gap: 8px; align-items: center; }
.plan .price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 4px; }
.plan .price small { font-size: 15px; font-weight: 600; opacity: .7; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; font-weight: 900; }
.plan li.no { opacity: .45; }
.plan li.no::before { content: "–"; }
.plan.pro li::before { color: var(--gold); }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }

.big-quote { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; max-width: 22ch; }
.big-quote em { font-style: normal; color: var(--muted); }
.gallery { justify-content: center; }
@media (max-width: 900px) { .gallery { justify-content: flex-start; } }

/* Estado: próximamente */
.status-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 4px; background: #111114; color: #fff; font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 999px; }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: fp-pulse 1.8s infinite; }
@keyframes fp-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 0, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(217, 164, 0, 0); } }
.cta.soon { cursor: default; }
.cta.soon:hover { transform: none; }
.notify-link { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.notify-link + .pill-note { display: flex; }