/* ============================================================
   Noda! — Landing "rincón otaku acogedor".
   Base oscura de la app + calidez: mascota, screentone, washi-tape,
   stickers, notas a mano y copy de fan a fan.
   ============================================================ */
:root {
    --bg: #07070B;
    --surface: #111119;
    --surface-2: #171723;
    --text: #F5F5FA;
    --text-2: #A8A8BE;
    --text-muted: #6E6E85;

    --violet: #8B5CF6;
    --violet-deep: #6D28D9;
    --pink: #F472B6;
    --cyan: #22D3EE;
    --peach: #F8A97A;
    --mint: #34D399;

    --grad: linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%);
    --grad-soft: linear-gradient(135deg, rgba(139,92,246,.20), rgba(244,114,182,.14));

    --glass-bg: rgba(255, 255, 255, .045);
    --glass-brd: rgba(255, 255, 255, .09);

    --radius: 22px;
    --radius-sm: 14px;
    --maxw: 1180px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --nav-h: 68px;

    --hand: 'Caveat', cursive;

    --mascot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 150'><path d='M36 36 L42 10 L62 32 Z' fill='%23F472B6'/><path d='M104 36 L98 10 L78 32 Z' fill='%23F472B6'/><path d='M70 22 C42 22 28 48 28 80 C28 106 42 128 70 128 C98 128 112 106 112 80 C112 48 98 22 70 22 Z' fill='%238B5CF6'/><path d='M44 30 L47 17 L56 29 Z' fill='%23FBCFE8'/><path d='M96 30 L93 17 L84 29 Z' fill='%23FBCFE8'/><ellipse cx='70' cy='86' rx='34' ry='30' fill='%23ffffff' fill-opacity='0.12'/><ellipse cx='55' cy='82' rx='7.5' ry='10' fill='%2312121a'/><ellipse cx='85' cy='82' rx='7.5' ry='10' fill='%2312121a'/><circle cx='58' cy='78' r='2.6' fill='%23ffffff'/><circle cx='88' cy='78' r='2.6' fill='%23ffffff'/><ellipse cx='45' cy='95' rx='6.5' ry='4' fill='%23F472B6' fill-opacity='0.6'/><ellipse cx='95' cy='95' rx='6.5' ry='4' fill='%23F472B6' fill-opacity='0.6'/><path d='M63 93 Q70 100 77 93' fill='none' stroke='%2312121a' stroke-width='2.6' stroke-linecap='round'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
    background: var(--bg); color: var(--text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------------- Fondo: orbes cálidos + screentone ---------------- */
.bg-orbs { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: float 28s var(--ease) infinite alternate; }
.orb--violet { width: 46vw; height: 46vw; background: #8B5CF6; opacity: .5; top: -12vw; left: -8vw; }
.orb--pink   { width: 40vw; height: 40vw; background: #F472B6; opacity: .34; top: 28vw; right: -12vw; animation-duration: 34s; }
.orb--peach  { width: 34vw; height: 34vw; background: var(--peach); opacity: .16; top: 62vw; left: -6vw; animation-duration: 40s; }
.orb--cyan   { width: 32vw; height: 32vw; background: #22D3EE; opacity: .18; bottom: -12vw; right: 12vw; animation-duration: 44s; }
@keyframes float { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(4vw,5vw,0) scale(1.15); } }

/* Screentone: trama de puntos sutil, da textura "impresa" tipo manga */
.screentone { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
    background-size: 15px 15px; }
.dots { position: relative; }
.dots::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background-image: radial-gradient(rgba(244,114,182,.06) 1.2px, transparent 1.6px);
    background-size: 22px 22px; -webkit-mask: radial-gradient(ellipse at center, #000 40%, transparent 78%); mask: radial-gradient(ellipse at center, #000 40%, transparent 78%); }

/* ---------------- Mascota ---------------- */
.mascot { background: var(--mascot) center/contain no-repeat; display: inline-block; filter: drop-shadow(0 8px 22px rgba(139,92,246,.4)); }
.brand__mascot { width: 30px; height: 32px; background: var(--mascot) center/contain no-repeat; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }

/* ---------------- Nav ---------------- */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center;
    transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(7,7,11,.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--glass-brd); }
.nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; }
.brand__bang { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { color: var(--text-2); font-weight: 500; font-size: .95rem; transition: color .3s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links .nav__cta { color: #fff; }
.nav__burger { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Botones ---------------- */
.btn { display: inline-flex; align-items: center; gap: 10px; justify-content: center; font-weight: 700; font-size: 1rem;
    border-radius: 999px; cursor: pointer; padding: 14px 26px; border: 1px solid transparent; white-space: nowrap;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.btn .ic { width: 20px; height: 20px; }
.btn--sm { padding: 9px 18px; font-size: .9rem; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.btn--gradient { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -8px rgba(139,92,246,.5); }
.btn--gradient:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px -8px rgba(244,114,182,.55); }
.btn--ghost { background: var(--glass-bg); border-color: var(--glass-brd); color: var(--text); backdrop-filter: blur(8px); }
.btn--ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }

/* ---------------- Secciones ---------------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(66px, 10vw, 140px) 24px; }
.section__head { text-align: center; max-width: 660px; margin: 0 auto clamp(38px, 6vw, 64px); }
.eyebrow { display: inline-block; font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: var(--pink); margin-bottom: 6px; transform: rotate(-2deg); }
h1, h2, h3 { letter-spacing: -.025em; line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; }
.section__head p { color: var(--text-2); font-size: 1.08rem; margin-top: 14px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kao { color: var(--cyan); font-weight: 700; }
.glass { background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius);
    backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }

/* ---------------- Notas a mano (doodles) + stickers + washi-tape ---------------- */
.doodle { font-family: var(--hand); font-size: 1.35rem; font-weight: 700; color: var(--cyan); transform: rotate(-4deg); display: inline-block; white-space: nowrap; }
.doodle--hero { align-self: center; color: var(--peach); }
.doodle--card { margin-top: 12px; color: var(--pink); font-size: 1.2rem; }

.sticker { position: absolute; font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: #fff;
    background: var(--grad); padding: 8px 14px; border-radius: 12px; border: 3px solid #fff;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); transform: rotate(-8deg); z-index: 3; }

.tape { position: absolute; top: -12px; left: 26px; width: 78px; height: 26px; z-index: 2;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 6px, rgba(255,255,255,.10) 6px 12px);
    border-left: 1px dashed rgba(255,255,255,.25); border-right: 1px dashed rgba(255,255,255,.25);
    transform: rotate(-5deg); border-radius: 2px; }
.tape--pink { left: auto; right: 26px; transform: rotate(5deg);
    background: repeating-linear-gradient(45deg, rgba(244,114,182,.22) 0 6px, rgba(244,114,182,.12) 6px 12px); }

/* ---------------- Hero ---------------- */
.hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(46px, 8vw, 100px) 24px clamp(40px, 8vw, 90px);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hand); font-size: 1.25rem; font-weight: 700; color: var(--text-2);
    background: var(--glass-bg); border: 1px dashed var(--glass-brd); border-radius: 999px; padding: 6px 16px 6px 14px; margin-bottom: 22px; transform: rotate(-1deg); }
.pill__glow { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.hero__title { font-size: clamp(2.7rem, 6.6vw, 4.6rem); font-weight: 800; }
.hero__sub { color: var(--text-2); font-size: clamp(1.05rem, 1.8vw, 1.22rem); margin: 22px 0 32px; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Fans / prueba social */
.fans { display: flex; align-items: center; gap: 14px; margin-top: 32px; color: var(--text-2); font-size: .95rem; }
.fans b { color: var(--text); }
.fans__avatars { display: flex; }
.fans__avatars i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px;
    background: linear-gradient(135deg, hsl(var(--h), 70%, 62%), hsl(calc(var(--h) + 40), 70%, 55%)); }
.fans__avatars i:first-child { margin-left: 0; }
.online { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 600; }
.online__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 2s ease-in-out infinite; }

/* Teléfono + mascota asomándose */
.hero__phone { position: relative; display: flex; justify-content: center; }
.mascot--peek { position: absolute; width: 96px; height: 104px; top: -46px; right: 6%; z-index: 0; transform: rotate(10deg); animation: bob 5s ease-in-out infinite; }
.phone { position: relative; z-index: 1; width: min(300px, 78vw); aspect-ratio: 9 / 19; background: linear-gradient(160deg, #1b1b28, #0c0c14);
    border-radius: 42px; padding: 12px; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.03); animation: phoneFloat 7s ease-in-out infinite; }
@keyframes phoneFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
.phone__notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #05050a; border-radius: 0 0 14px 14px; z-index: 3; }
.phone__screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--bg); padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
/* Cuando el teléfono muestra una captura real, sin padding: la imagen llena la pantalla. */
.phone__screen--img { padding: 0; }
.phone__shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone__glow { position: absolute; inset: 8% 0 0; background: radial-gradient(circle at 50% 40%, rgba(139,92,246,.4), transparent 60%); filter: blur(50px); z-index: 0; }
.sticker--free { bottom: 8%; left: -6px; }

/* ---------------- Features ---------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.feature { position: relative; overflow: visible; padding: 32px 26px 28px; transition: transform .4s var(--ease), border-color .4s, background .4s; }
.feature:hover { transform: translateY(-6px) rotate(-.4deg); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.feature h3 { font-size: 1.28rem; font-weight: 700; margin: 18px 0 10px; }
.feature p { color: var(--text-2); font-size: .99rem; }
.feature__ic { width: 54px; height: 54px; border-radius: 16px; background: var(--grad-soft); border: 1px solid var(--glass-brd); position: relative; }
.feature__ic::after { content: ""; position: absolute; inset: 0; background: var(--grad); -webkit-mask: var(--m) center/27px no-repeat; mask: var(--m) center/27px no-repeat; }
.ic-tv::after     { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M17 2l-5 5-5-5"/></svg>'); }
.ic-people::after { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 6a3 3 0 0 1 0 5"/><path d="M18 20a5 5 0 0 0-3-4.6"/></svg>'); }
.ic-trophy::after { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v5a5 5 0 0 1-10 0z"/><path d="M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3"/><path d="M9 20h6M10 16h4l1 4H9z"/></svg>'); }
.ic-bell::after   { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>'); }
.ic-play::after   { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M10 8l6 4-6 4z" fill="black"/></svg>'); }
.ic-palette::after{ --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-1 1-2-.5-1.2.5-2 1.5-2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8z"/><circle cx="7.5" cy="12" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="14" cy="8" r="1"/></svg>'); }

/* ---------------- Posts (testimonios estilo club) ---------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: clamp(48px, 8vw, 92px); }
.post { padding: 22px 22px 18px; position: relative; }
.post__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.post__head b { font-size: .95rem; }
.post__head small { display: block; color: var(--text-muted); font-size: .78rem; }
.ava { width: 42px; height: 42px; border-radius: 50%; flex: none; background: linear-gradient(135deg, hsl(var(--h), 70%, 62%), hsl(calc(var(--h) + 40), 70%, 55%)); }
.post p { color: var(--text); font-size: 1.02rem; }
.post__foot { display: flex; gap: 16px; margin-top: 14px; color: var(--text-muted); font-size: .86rem; font-weight: 600; }

/* ---------------- Highlight (simulcast) ---------------- */
.highlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.highlight--rev .highlight__text { order: 2; }
.highlight h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.highlight p { color: var(--text-2); font-size: 1.06rem; margin: 16px 0 20px; }
.checks { list-style: none; display: grid; gap: 12px; margin-bottom: 16px; }
.checks li { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 500; }
.checks li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--grad); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>') center/13px no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>') center/13px no-repeat; }
.highlight__visual { position: relative; overflow: visible; padding: 26px; min-height: 240px; display: flex; align-items: center; justify-content: center; }

/* Showcase: captura ancha enmarcada (simulcast, reproductor, tarjeta) */
.showcase { position: relative; overflow: visible; padding: 14px; border-radius: var(--radius); }
.showcase img { width: 100%; border-radius: 14px; display: block;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
.showcase--card img { border-radius: 12px; }

/* ---------------- Galería de capturas (marcos de teléfono) ---------------- */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
    gap: 20px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.shot { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: transform .4s var(--ease); }
.shot:hover { transform: translateY(-8px) rotate(-.5deg); }
.shot__phone { width: 100%; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px;
    background: linear-gradient(160deg, #1b1b28, #0c0c14); border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.03); }
.shot__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; }
.shot figcaption { font-family: var(--hand); font-size: 1.15rem; font-weight: 700; color: var(--text-2);
    text-align: center; line-height: 1.3; max-width: 22ch; }

/* ---------------- Plataformas ---------------- */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.platform { position: relative; overflow: visible; text-align: center; padding: 34px 24px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .4s var(--ease), border-color .4s; }
.platform:hover { transform: translateY(-6px); }
.platform--ready { border-color: rgba(139,92,246,.4); background: linear-gradient(160deg, rgba(139,92,246,.12), rgba(244,114,182,.06)); box-shadow: 0 20px 50px -20px rgba(139,92,246,.5); }
.platform h3 { font-size: 1.3rem; font-weight: 700; }
.platform__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--grad-soft); border: 1px solid var(--glass-brd); position: relative; }
.platform__ic::after { content: ""; position: absolute; inset: 0; background: var(--grad); -webkit-mask: var(--m) center/30px no-repeat; mask: var(--m) center/30px no-repeat; }
.ic-android::after { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M6 10h12v7a1 1 0 0 1-1 1h-1v3h-2v-3h-4v3H8v-3H7a1 1 0 0 1-1-1z"/><path d="M3 11a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zM19 11a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0z"/><path d="M7 9a5 5 0 0 1 10 0z" fill="black"/><circle cx="9.5" cy="6.4" r=".8" fill="white"/><circle cx="14.5" cy="6.4" r=".8" fill="white"/></svg>'); }
.ic-windows::after { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><rect x="3" y="4" width="8" height="8" rx="1"/><rect x="13" y="4" width="8" height="8" rx="1"/><rect x="3" y="14" width="8" height="8" rx="1"/><rect x="13" y="14" width="8" height="8" rx="1"/></svg>'); }
.ic-tv::after { --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M8 21h8M12 17v4"/></svg>'); }
.platform__state { font-size: .82rem; font-weight: 700; color: var(--text-muted); background: var(--glass-bg); border: 1px solid var(--glass-brd); padding: 5px 14px; border-radius: 999px; }
.platform__state--on { color: var(--mint); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.platform__note { color: var(--text-muted); font-size: .8rem; }
.platform__soon { color: var(--text-2); font-size: .95rem; margin-top: 2px; }
.platform .btn { margin-top: 4px; }
.mascot--corner { position: absolute; width: 58px; height: 62px; right: -14px; top: -26px; transform: rotate(14deg); animation: bob 4.5s ease-in-out infinite; }

/* ---------------- Verificar (terminal cripto) ---------------- */
:root { --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; }
.term { max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 18px; }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--glass-brd); }
.term__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.14); }
.term__dot:nth-child(1) { background: #F472B6; } .term__dot:nth-child(2) { background: #F8A97A; } .term__dot:nth-child(3) { background: #34D399; }
.term__title { margin-left: 8px; font-family: var(--mono); font-size: .78rem; color: var(--text-muted); }
.term__body { padding: 26px 24px 30px; font-family: var(--mono);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
        rgba(7,7,11,.4); }
.term__line { color: var(--text-2); font-size: .95rem; line-height: 1.7; margin-bottom: 14px; }
.term__line b { color: var(--text); }
.term__prompt { color: var(--pink); font-weight: 700; margin-right: 8px; }
.term__hint { font-family: var(--mono); font-size: .8rem; color: var(--text-muted); margin-top: 12px; }
.term__inputrow, .term__coderow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.term__input {
    flex: 1; min-width: 200px; font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
    letter-spacing: .45em; text-transform: uppercase; text-align: center; color: var(--text);
    background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); border-radius: 12px;
    padding: 14px 10px 14px 18px; outline: none; caret-color: var(--pink);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.term__input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.term__input::placeholder { color: var(--text-muted); opacity: .5; }
.term__code {
    flex: 1; min-width: 200px; display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 700;
    letter-spacing: .45em; text-align: center; color: var(--mint);
    background: rgba(52,211,153,.07); border: 1px dashed rgba(52,211,153,.4); border-radius: 12px;
    padding: 14px 10px 14px 18px; text-shadow: 0 0 18px rgba(52,211,153,.5);
}
.term__line--ok { color: var(--mint); font-weight: 700; }
.term__line--err { color: #FB7185; font-weight: 700; }
.term__line--scan { color: var(--cyan); display: flex; align-items: center; gap: 12px; }
.term__spinner { width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid rgba(34,211,238,.25); border-top-color: var(--cyan); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.term__dots::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--glass-brd); margin-top: 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 54px 24px 34px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.footer__brand p { color: var(--text-2); margin-top: 12px; font-size: .95rem; max-width: 40ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.footer__links a { color: var(--text-2); font-size: .95rem; transition: color .3s var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 40px; color: var(--text-muted); font-size: .88rem; border-top: 1px solid rgba(255,255,255,.05); }

/* ---------------- Reveal ---------------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal--delay { transition-delay: .15s; }
.features .feature.reveal:nth-child(2), .posts .post.reveal:nth-child(2), .platforms .platform.reveal:nth-child(2) { transition-delay: .08s; }
.features .feature.reveal:nth-child(3), .posts .post.reveal:nth-child(3), .platforms .platform.reveal:nth-child(3) { transition-delay: .16s; }
.features .feature.reveal:nth-child(4) { transition-delay: .08s; }
.features .feature.reveal:nth-child(5) { transition-delay: .16s; }
.features .feature.reveal:nth-child(6) { transition-delay: .24s; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; text-align: center; padding-top: 36px; }
    .hero__sub { margin-left: auto; margin-right: auto; }
    .hero__actions, .fans { justify-content: center; }
    .hero__phone { order: -1; margin-bottom: 6px; }
    .mascot--peek { width: 78px; height: 84px; top: -34px; right: 12%; }
    .highlight, .highlight--rev { grid-template-columns: 1fr; }
    .highlight--rev .highlight__text { order: 0; }
    .checks { justify-items: start; max-width: 320px; margin: 0 auto 16px; }
    .doodle--hero { width: 100%; }
    /* Galería: de riel horizontal a dos columnas cómodas en móvil. */
    .gallery { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; overflow: visible; }
}
@media (max-width: 460px) {
    .gallery { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}
@media (max-width: 720px) {
    .nav__links { position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; gap: 6px; align-items: stretch;
        background: rgba(10,10,16,.97); backdrop-filter: blur(20px); padding: 18px 24px 26px; border-bottom: 1px solid var(--glass-brd);
        transform: translateY(-120%); transition: transform .4s var(--ease); z-index: 90; }
    .nav__links.open { transform: translateY(0); }
    .nav__links a { padding: 12px 4px; font-size: 1.05rem; }
    .nav__links .nav__cta { margin-top: 8px; }
    .nav__burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .orb, .phone, .pill__glow, .online__dot, .brand__mascot, .mascot--peek, .mascot--corner { animation: none !important; }
    .reveal { transition-duration: .01ms; }
    html { scroll-behavior: auto; }
}