/* ===== Proyecto Altoki · con el diseño de la marca (verde #42E842, negro, Inter + Fredoka) ===== */
:root {
  --bg: #0A0A0A;
  --bg-2: #121312;
  --line: rgba(255, 255, 255, .09);
  --text: #F5F6F5;
  --muted: #A3A8A4;
  --accent: #42E842;
  --accent-2: #5CF05C;
  --accent-ink: #04140a;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', sans-serif;
  --logo: 'Fredoka', 'Inter', sans-serif;
  --radius: 24px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; }
.btn { font-weight: 600; }
.btn:hover { --glow: rgba(66, 232, 66, .45); }
.btn.dark { --b: #0A0A0A; --c: #fff; }
.btn.ghost-dark { --b: transparent; --c: #0A0A0A; border: 1.5px solid rgba(10,10,10,.2); }
.btn.ghost-dark:hover { --b: rgba(10,10,10,.06); }
.nav-in { padding-left: 20px; }
.ak-word { display: inline-flex; align-items: center; gap: 8px; font-family: var(--logo); font-weight: 700; font-size: 23px; letter-spacing: -.01em; color: #fff; }
.ak-word b, .ak-logo b { color: var(--accent); font-weight: 700; }
.v-play { font-family: var(--font); }
.v:hover .v-play { background: var(--accent); color: var(--accent-ink); }
.v:hover .v-play i { background: #04140a; }
.v:hover .v-play i::before { border-left-color: var(--accent); }

.ak-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.ak-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ak-eyebrow.dark { color: #0A0A0A; }
.g-txt { color: var(--accent); }
.g-ink { color: #0B7A17; }

/* ---------- Hero ---------- */
.ak-hero { position: relative; padding: clamp(120px, 16vh, 170px) 0 clamp(50px, 7vw, 80px); overflow: hidden; isolation: isolate; }
.ak-hero::before { content: ""; position: absolute; z-index: -1; left: 62%; top: 42%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(66,232,66,.22), transparent 70%); }
.ak-dots { position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 26px 26px; mask: radial-gradient(ellipse at 60% 40%, #000, transparent 70%); -webkit-mask: radial-gradient(ellipse at 60% 40%, #000, transparent 70%); }
.ak-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.ak-hero-copy { display: grid; gap: 20px; justify-items: start; }
.ak-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: rgba(66,232,66,.1); color: var(--accent); font-size: 13px; font-weight: 600; }
.ak-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ak-logo { font-family: var(--logo); font-weight: 700; font-size: clamp(84px, 13vw, 176px); letter-spacing: -.02em; line-height: .9; color: #fff; }
.ak-tag { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; }
.ak-tag b { color: var(--accent); }
.ak-lead { color: var(--muted); font-size: 16.5px; max-width: 520px; }
.ak-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ak-cta .btn svg { width: 15px; height: 15px; }

.ak-phone-wrap { position: relative; justify-self: center; width: min(340px, 78vw); }
.ak-phone { position: relative; padding: 11px; border-radius: 50px; background: linear-gradient(160deg, #2a2c2a, #0c0d0c); box-shadow: 0 0 0 1.5px #3a3d3a inset, 0 50px 100px -30px rgba(66,232,66,.35), 0 30px 60px -20px rgba(0,0,0,.9); }
.ak-phone .v { border-radius: 40px; }
.ak-sticker { position: absolute; z-index: 3; width: 120px; height: auto; right: -46px; top: -40px; transform: rotate(10deg); filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(4deg) translateY(-10px); } }
.ak-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: #0B0C0B; font-size: 13px; font-weight: 600; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); white-space: nowrap; }
.ak-float .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; }
.ak-float .ok::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 5px; height: 9px; border: solid #04140a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ak-f1 { left: -60px; top: 34%; }
.ak-f2 { right: -40px; bottom: 16%; background: #121312; color: #fff; border: 1px solid var(--line); }
.ak-f2 b { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ak-sticker { animation: none; } }

.ak-deliv { list-style: none; margin: clamp(50px, 7vw, 80px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ak-deliv li { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); background: rgba(255,255,255,.02); }

@media (max-width: 880px) {
  .ak-hero-in { grid-template-columns: 1fr; }
  .ak-phone-wrap { margin-top: 20px; }
  .ak-f1 { left: -14px; }
  .ak-f2 { right: -10px; }
  .ak-sticker { right: -14px; width: 96px; }
}

/* ---------- Secciones ---------- */
.ak-sec h2 { font-size: clamp(34px, 5vw, 60px); }
.ak-light { background: #fff; color: #0B0C0B; }
.ak-light .sec-head p { color: #5F6661; }
.ak-light .ak-eyebrow { color: #0B7A17; }
.ak-soft { background: #F6F7F5; color: #0B0C0B; }
.ak-soft .sec-head p { color: #5F6661; }
.ak-soft .ak-eyebrow { color: #0B7A17; }

.ak-wide { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.ak-wide-side { display: grid; gap: 16px; }
@media (max-width: 820px) { .ak-wide { grid-template-columns: 1fr; } .ak-wide-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ak-wide-side { grid-template-columns: 1fr; } }

.ak-stories { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.ak-stories .sec-head { margin: 0; }
.ak-stories-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ak-stories-row .v:nth-child(2) { transform: translateY(-34px); }
.ak-stories-row .v { box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
@media (max-width: 900px) { .ak-stories { grid-template-columns: 1fr; } .ak-stories-row .v:nth-child(2) { transform: none; } }
@media (max-width: 520px) { .ak-stories-row { grid-template-columns: repeat(3, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .ak-stories-row .v { scroll-snap-align: center; } }

/* Navegador con la grabación de la web */
.browser { border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 60px 120px -40px rgba(66,232,66,.3), 0 40px 80px -30px rgba(0,0,0,.9); margin-bottom: 36px; }
.browser-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #1B1C1B; position: relative; }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3d3a; }
.browser-bar i:nth-child(1) { background: #ff5f57; } .browser-bar i:nth-child(2) { background: #febc2e; } .browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12.5px; color: #A3A8A4; padding: 4px 60px; border-radius: 8px; background: #0A0A0A; }
.browser video { width: 100%; aspect-ratio: 1440 / 847; object-fit: cover; background: #0A0A0A; }
@media (max-width: 520px) { .browser-bar span { padding: 4px 24px; } }

/* Pantallas de la app */
.ak-screens { display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 22px); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.ak-screens img { width: clamp(150px, 17vw, 230px); flex: none; border-radius: 28px; border: 6px solid #0A0A0A; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.ak-screens img:nth-child(odd) { transform: translateY(26px); }
@media (max-width: 900px) { .ak-screens { justify-content: flex-start; scroll-snap-type: x mandatory; padding-bottom: 30px; } .ak-screens img { scroll-snap-align: center; width: 52vw; } }

/* Posts */
.ak-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ak-posts img { width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 640px) { .ak-posts { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ak-posts img { border-radius: 12px; } }

/* Cierre */
.ak-end { padding-top: clamp(40px, 6vw, 80px); }
.ak-end-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--accent); color: #0A0A0A; border-radius: 32px; padding: clamp(32px, 5vw, 64px); overflow: hidden; margin-bottom: clamp(50px, 7vw, 90px); max-width: calc(var(--wrap) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); }
.ak-end-copy { display: grid; gap: 16px; justify-items: start; position: relative; z-index: 2; }
.ak-end h2 { font-size: clamp(32px, 4.4vw, 54px); }
.ak-end p { max-width: 460px; color: rgba(10,10,10,.72); font-weight: 500; }
.ak-end-mascot { width: clamp(150px, 20vw, 260px); flex: none; transform: rotate(-8deg); }
@media (max-width: 700px) { .ak-end-card { flex-direction: column; align-items: flex-start; } .ak-end-mascot { position: absolute; right: -30px; top: -20px; width: 130px; opacity: .9; } }