/* Kynerix landing page: the player's app's look (paper, bright inks, sticker outlines, hand-written notes). */
:root {
  --paper: #fdf6ea; --paper-2: #ffffff; --paper-3: #f7ead6; --grain: rgba(60, 40, 20, .05);
  --text: #2a1f3d; --muted: #6f6684; --edge: #2a1f3d; --soft-edge: rgba(42, 31, 61, .14);
  --coral: #ff6b5b; --sun: #ffc94a; --mint: #36cfa5; --violet: #7c5cff; --sky: #4cb3ff; --pink: #ff8fc7;
  --coral-soft: #ffe1dc; --sun-soft: #fff1c9; --mint-soft: #d5f7ec; --violet-soft: #e7e0ff; --pink-soft: #ffe3f1; --sky-soft: #dcefff;
  --night: #2a1f3d; --on-night: #fdf6ea;
  --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --radius: 22px; --pop: 3px 3px 0 var(--edge); --pop-big: 6px 6px 0 var(--edge);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17122a; --paper-2: #221a3a; --paper-3: #2c2350; --grain: rgba(255, 255, 255, .035);
    --text: #f8efe1; --muted: #b7accc; --edge: #0a0614; --soft-edge: rgba(248, 239, 225, .14);
    --coral-soft: #4a2633; --sun-soft: #4a3d1e; --mint-soft: #173f37; --violet-soft: #2f2560; --pink-soft: #4a2241; --sky-soft: #173a55;
    --night: #0f0b1d; --pop: 3px 3px 0 #05030b; --pop-big: 6px 6px 0 #05030b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17122a; --paper-2: #221a3a; --paper-3: #2c2350; --grain: rgba(255, 255, 255, .035);
  --text: #f8efe1; --muted: #b7accc; --edge: #0a0614; --soft-edge: rgba(248, 239, 225, .14);
  --coral-soft: #4a2633; --sun-soft: #4a3d1e; --mint-soft: #173f37; --violet-soft: #2f2560; --pink-soft: #4a2241; --sky-soft: #173a55;
  --night: #0f0b1d; --pop: 3px 3px 0 #05030b; --pop-big: 6px 6px 0 #05030b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; color: var(--text); font: 17px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: var(--paper); background-image: radial-gradient(var(--grain) 1px, transparent 1.2px); background-size: 14px 14px;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; font-family: var(--font-display); font-weight: 800; font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -.015em; }
h1 { font-size: clamp(44px, 7.4vw, 92px); margin-bottom: 22px; }
h2 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 18px; }
h3 { font-size: 26px; margin-bottom: 8px; }
p { margin: 0 0 14px; }
.hand { font: 700 clamp(24px, 2.6vw, 30px)/1.1 var(--font-hand); color: var(--coral); margin: 0 0 6px; transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 40em; }
.small { font-size: 14px; }
.faint { color: var(--muted); }
.center { text-align: center; display: block; margin-left: auto; margin-right: auto; }
.hand.center { transform-origin: center; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; padding: clamp(56px, 8vw, 110px) 0; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0 14px; }
.grid { display: grid; gap: 20px; }

/* Buttons, chips, tags: stickers with a hard shadow that press in. */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 2.5px solid var(--edge); border-radius: 999px; padding: 12px 22px; font-weight: 900; text-decoration: none; background: var(--paper-2); box-shadow: var(--pop); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--edge); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.btn.primary { background: var(--coral); color: #fff; }
.btn.ghost { background: transparent; }
.btn.big { font-size: 19px; padding: 16px 28px; }
.btn.sm { padding: 8px 16px; font-size: 15px; }
.chip { display: inline-block; border: 2.5px solid var(--edge); border-radius: 999px; padding: 8px 16px; font-weight: 800; text-decoration: none; box-shadow: var(--pop); background: var(--paper-2); }
.chip.coral { background: var(--coral-soft); } .chip.violet { background: var(--violet-soft); } .chip.sun { background: var(--sun-soft); } .chip.mint { background: var(--mint-soft); } .chip.pink { background: var(--pink-soft); } .chip.sky { background: var(--sky-soft); }
.tag { display: inline-block; border: 2px solid var(--edge); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: var(--paper-2); margin-bottom: 14px; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px max(16px, calc((100% - 1180px) / 2)); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--soft-edge); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 24px var(--font-display); text-decoration: none; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.brand img { width: 34px; height: 34px; }
.top-links { display: flex; gap: 22px; margin-left: auto; font-weight: 800; }
.top-links a { text-decoration: none; color: var(--muted); }
.top-links a:hover { color: var(--text); }

/* Hero */
.hero { width: min(1180px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 90px); }
.mark { position: relative; white-space: nowrap; color: var(--coral); }
.mark::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .2em; background: var(--sun); border-radius: 99px; z-index: -1; transform: rotate(-1.5deg); }
.hero-art { position: relative; min-height: 600px; display: grid; place-items: center; }

/* Phone and screen frames */
.phone { position: relative; width: min(300px, 74vw); aspect-ratio: 9 / 19.5; border: 3px solid var(--edge); border-radius: 42px; padding: 10px; background: var(--night); box-shadow: var(--pop-big); overflow: hidden; }
.phone > img, .phone > video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
/* The promo videos are 9:16: the frame takes their shape so no caption is cut. */
.phone:has(> video) { aspect-ratio: 9 / 16; }
.tilt-r { transform: rotate(3deg); }
.screen { margin-top: 30px; border: 3px solid var(--edge); border-radius: var(--radius); overflow: hidden; box-shadow: var(--pop-big); background: var(--night); aspect-ratio: 16 / 9; }
.screen > img, .screen > video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sticker { position: absolute; z-index: 2; filter: drop-shadow(3px 3px 0 var(--edge)); pointer-events: none; animation: bob 6s ease-in-out infinite; }
.s1 { width: 190px; left: -30px; bottom: 10px; }
.s2 { width: 150px; right: -20px; top: 0; animation-delay: -2s; }
.s3 { width: 110px; right: 10px; bottom: 30px; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(2deg); } }
.bubble { position: absolute; z-index: 3; max-width: 240px; background: var(--paper-2); border: 2.5px solid var(--edge); border-radius: 20px 20px 20px 6px; padding: 10px 14px; font-weight: 700; font-size: 15px; box-shadow: var(--pop); }
.bubble.b1 { left: -40px; top: 70px; transform: rotate(-3deg); }
.bubble.b2 { right: -10px; top: 330px; border-radius: 20px 20px 6px 20px; background: var(--violet); color: #fff; font-family: var(--font-hand); font-size: 22px; transform: rotate(2deg); }

/* Bands */
.band { background: var(--paper-3); border-block: 3px solid var(--edge); }
.band.dark { background: var(--night); color: var(--on-night); --muted: #cfc6e0; }
.band.dark .hand { color: var(--sun); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { position: relative; border: 3px solid var(--edge); border-radius: var(--radius); padding: 26px 24px 0; box-shadow: var(--pop-big); overflow: hidden; display: flex; flex-direction: column; }
.card p { color: var(--muted); }
.c-coral { background: var(--coral-soft); } .c-violet { background: var(--violet-soft); } .c-mint { background: var(--mint-soft); }
.num { display: grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--edge); border-radius: 14px; background: var(--paper-2); font: 800 24px var(--font-display); margin-bottom: 14px; box-shadow: var(--pop); transform: rotate(-4deg); }
.card .shot { margin: 10px auto 0; width: 82%; border: 3px solid var(--edge); border-bottom: 0; border-radius: 26px 26px 0 0; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

/* Use cases */
.uses { border-top: 3px solid var(--edge); background: var(--paper-3); }
.uses > .wrap:first-child { padding-bottom: 10px; }
.use-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.use { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.use.flip .use-text { order: 2; }
.use-art { position: relative; display: grid; place-items: center; min-height: 560px; }
.use-art::before { content: ''; position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%; border: 3px solid var(--edge); background: var(--blob); }
.use .phone { transform: rotate(-2.5deg); }
.use.flip .phone { transform: rotate(2.5deg); }
.t-coral { --blob: var(--coral); } .t-violet { --blob: var(--violet); } .t-sun { --blob: var(--sun); } .t-mint { --blob: var(--mint); } .t-pink { --blob: var(--pink); } .t-sky { --blob: var(--sky); }
.t-coral .tag { background: var(--coral-soft); } .t-violet .tag { background: var(--violet-soft); } .t-sun .tag { background: var(--sun-soft); } .t-mint .tag { background: var(--mint-soft); } .t-pink .tag { background: var(--pink-soft); } .t-sky .tag { background: var(--sky-soft); }
.use-text p { font-size: 19px; color: var(--muted); }
.u1 { width: 140px; left: 0; bottom: 30px; } .u2 { width: 170px; right: -10px; bottom: 10px; } .u3 { width: 120px; left: 10px; top: 40px; } .u4 { width: 110px; right: 10px; top: 50px; } .u5 { width: 110px; left: 10px; bottom: 40px; } .u6 { width: 150px; left: -10px; bottom: 20px; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 36px; font-weight: 700; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--edge); border-radius: 8px; background: var(--sun); color: #2a1f3d; font-size: 14px; font-weight: 900; }

/* Features */
.feats { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
.feat { border: 2.5px solid var(--edge); border-radius: var(--radius); background: var(--paper-2); padding: 20px 22px; box-shadow: var(--pop); display: grid; gap: 4px; }
.feat b { font: 800 21px var(--font-display); }
.feat span { color: var(--muted); }
.feat:nth-child(6n+1) { background: var(--coral-soft); } .feat:nth-child(6n+3) { background: var(--violet-soft); } .feat:nth-child(6n+5) { background: var(--mint-soft); }

/* Studio */
.studio { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.studio-shots { position: relative; padding-bottom: 70px; }
.browser { border: 3px solid var(--edge); border-radius: 14px; box-shadow: 6px 6px 0 #000; }
.browser.b2 { position: absolute; width: 70%; right: -20px; bottom: 0; transform: rotate(2deg); }

/* Prices */
.prices { grid-template-columns: repeat(3, 1fr); margin: 30px 0 22px; align-items: stretch; }
.price { position: relative; border: 3px solid var(--edge); border-radius: var(--radius); background: var(--paper-2); padding: 28px 24px; box-shadow: var(--pop-big); }
.price p { color: var(--muted); }
.price .amount { font: 800 48px var(--font-display); color: var(--text); margin: 6px 0 10px; }
.price .extra { margin: 16px 0 0; padding-top: 14px; border-top: 2px dashed var(--soft-edge); font-weight: 800; color: var(--violet); }
.price.pop { background: var(--sun-soft); transform: translateY(-10px); }
.price.pop .tag { position: absolute; top: -16px; right: 18px; background: var(--coral); color: #fff; }

/* Call to action */
.cta { position: relative; text-align: center; border: 3px solid var(--edge); border-radius: 34px; background: var(--violet); color: #fff; box-shadow: var(--pop-big); padding: 70px 24px; margin-bottom: 70px; overflow: hidden; }
.cta .lead { color: #efeaff; margin: 0 auto 26px; }
.cta .faint { color: #ddd3ff; margin-top: 16px; }
.cta .btn.primary { background: var(--sun); color: #2a1f3d; }
.c1 { width: 150px; left: 3%; bottom: -10px; } .c2 { width: 110px; right: 4%; top: 20px; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 30px 0 40px; border-top: 2px solid var(--soft-edge); }
.foot .brand { font-size: 20px; }

/* Tablet */
@media (max-width: 960px) {
  .top-links { display: none; }
  .top-actions { margin-left: auto; }
  .hero, .use, .studio { grid-template-columns: 1fr; }
  .hero-art { min-height: 560px; }
  .use.flip .use-text { order: 0; }
  .steps, .feats, .prices { grid-template-columns: 1fr 1fr; }
  .steps li:last-child, .prices .price:last-child { grid-column: 1 / -1; max-width: 520px; width: 100%; justify-self: center; }
  .price.pop { transform: none; }
}
/* Phone */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .steps, .feats, .prices { grid-template-columns: 1fr; }
  .hero-art { min-height: 520px; }
  .s1 { display: none; } .s2 { width: 105px; right: -4px; } .s3 { width: 80px; right: 6px; }
  .bubble.b1 { left: 0; top: 30px; max-width: 200px; font-size: 14px; }
  .bubble.b2 { right: 0; top: 300px; font-size: 20px; }
  .use-art { min-height: 520px; }
  .u1, .u2, .u3, .u4, .u5, .u6 { width: 96px; }
  .browser.b2 { right: -6px; }
  .cta { border-radius: 26px; padding: 56px 18px; }
  .c1 { width: 90px; } .c2 { width: 70px; }
  .foot { flex-direction: column; }
}
/* Enterprise and its contact form */
.enterprise { display: grid; grid-template-columns: 1.4fr .6fr; gap: 28px; align-items: center; margin-top: 34px; border: 3px solid var(--edge); border-radius: var(--radius); background: var(--night); color: var(--on-night); padding: 30px; box-shadow: var(--pop-big); --muted: #cfc6e0; }
.enterprise .tag { background: var(--sun); color: #2a1f3d; }
.enterprise p { color: var(--muted); }
.ent-cta { display: grid; gap: 14px; justify-items: start; }
.ent-cta .amount { font: 800 40px var(--font-display); color: var(--on-night); margin: 0; }
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 3px solid var(--edge); border-radius: var(--radius); background: var(--paper-2); padding: 24px; box-shadow: var(--pop-big); }
.contact-form label { display: grid; gap: 6px; font-weight: 800; font-size: 14px; min-width: 0; }
.contact-form .wide { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; font: 600 16px var(--font-ui); color: var(--text); background: var(--paper); border: 2px solid var(--edge); border-radius: 12px; padding: 10px 12px; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible, .btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.contact-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { margin: 0; font-weight: 700; }
.form-status.ok { color: var(--ok, #12a37b); }
.form-status.bad { color: var(--coral); }
@media (max-width: 960px) { .enterprise, .contact { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .contact-form { grid-template-columns: 1fr; padding: 18px; } .enterprise { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } html { scroll-behavior: auto; } }
.foot-links { display: flex; gap: 18px; font-weight: 800; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--text); }
.note-free { display: inline-block; margin: 8px 0 0; padding: 10px 14px; border: 2px dashed var(--mint); border-radius: 14px; background: var(--mint-soft); }
/* The legal pages (drafts): plain text, readable. */
.legal { max-width: 760px; }
.legal h1 { font: 800 clamp(34px, 5vw, 48px)/1.1 var(--font-display); margin: 8px 0 12px; }
.legal h2 { font: 800 24px/1.2 var(--font-display); margin: 34px 0 8px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal .draft { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--edge); background: var(--sun-soft); font-weight: 900; }

/* «Instalar la app»: no app stores, the app installs from here (install.js). As loud as «Crear mi historia». */
.top-actions { display: flex; align-items: center; gap: 10px; }
:where(button.btn) { cursor: pointer; font-family: inherit; color: inherit; line-height: inherit; }
.btn .i { flex-shrink: 0; }
.install-btn { background: var(--violet); color: #fff; }
.install-btn[data-state="open"] { background: var(--mint); color: #12352c; }
.top .install-btn { background: var(--violet-soft); color: var(--text); }
.top .install-btn[data-state="open"] { background: var(--mint-soft); }
.top .install-btn .i { width: 19px; height: 19px; }
.cta .install-btn { background: var(--paper-2); color: var(--text); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.install-line { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 800; }
.install-dot { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border: 2px solid var(--edge); border-radius: 8px; background: var(--mint); color: #12352c; font-size: 13px; font-weight: 900; }
/* The sheet with the steps (iPhone, Safari on a Mac, Firefox…): a bottom sheet on phones, a card on computers. */
.install-sheet { width: min(500px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 3px solid var(--edge); border-radius: 28px; background: var(--paper); color: var(--text); box-shadow: var(--pop-big); overflow: auto; }
.install-sheet::backdrop { background: rgba(42, 31, 61, .5); }
.sheet-body { position: relative; display: grid; gap: 12px; padding: 26px 22px 22px; }
.sheet-body h2 { font-size: clamp(28px, 6vw, 36px); margin: 0; padding-right: 40px; }
.sheet-body p { margin: 0; }
.sheet-body .hand { font-size: 24px; }
.sheet-lead { color: var(--muted); }
.sheet-note { padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--coral); background: var(--coral-soft); font-weight: 700; }
.sheet-close { position: absolute; z-index: 1; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 2.5px solid var(--edge); border-radius: 50%; background: var(--paper-2); color: var(--text); box-shadow: var(--pop); cursor: pointer; }
.sheet-close:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.install-steps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.install-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2.5px solid var(--edge); border-radius: 18px; background: var(--paper-2); box-shadow: var(--pop); }
.install-steps li:nth-child(2) { background: var(--violet-soft); } .install-steps li:nth-child(3) { background: var(--mint-soft); }
.install-n { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 2px solid var(--edge); border-radius: 50%; background: var(--sun); color: #2a1f3d; font-weight: 900; font-size: 15px; }
.install-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 2px solid var(--edge); border-radius: 12px; background: var(--paper); color: var(--text); }
.install-text { min-width: 0; }
.install-text b { display: block; line-height: 1.25; }
.install-text span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sheet-actions .btn { font-size: 17px; }
.sheet-status { color: var(--muted); font-weight: 700; }
.sheet-status:empty { display: none; }
html.sheet-open { overflow: hidden; }
@media (max-width: 620px) {
  /* The header: the brand, the install button as an icon, «Entrar». */
  .top { gap: 10px; }
  .top-actions { gap: 8px; }
  .top .install-btn.compact { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .top .install-btn.compact .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero .row .btn.big { flex: 1 1 100%; justify-content: center; }
  .install-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 26px 26px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sheet-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) { .brand { font-size: 21px; } .brand img { width: 30px; height: 30px; } }