/* =============================================================
   APPROMOVE — creadores.html (streamers & creators)
   Loaded after styles.css and pixel.css. Flat pixel theme:
   no gradients/glows, radius <= 6px, VT323 for headings/labels.
   Prefix cz- (index.html uses cr- for its own creators section).
   ============================================================= */

.cz-page { padding: 92px 16px 64px; max-width: 1100px; margin: 0 auto; }
.cz-page section { padding: 0; }
.cz-page kbd {
    font-family: var(--px); font-size: 1.15rem; line-height: 1;
    background: var(--bg-card); color: var(--accent-txt);
    border: 1px solid var(--border); border-bottom-width: 3px;
    border-radius: 3px; padding: 1px 7px; white-space: nowrap;
}
.cz-page strong { color: var(--white); font-weight: 600; }

/* ---- hero ---- */
.cz-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 40px;
    align-items: center; margin: 0 auto 32px;
}
.cz-hero .tag { display: inline-block; margin-bottom: 14px; }
.cz-hero h1 { font-size: clamp(2.5rem, 6vw, 3.8rem); color: var(--white); margin: 0 0 14px; }
.cz-hero h1 em { font-style: normal; color: var(--accent-txt); }
.cz-hero p { color: var(--gray); font-size: 1.02rem; line-height: 1.6; margin: 0 0 10px; }
.cz-hero .cz-promise {
    font-family: var(--px); font-size: 1.45rem; line-height: 1.2; color: var(--orange); margin-top: 14px;
}

/* ---- index ---- */
.cz-index { margin: 0 auto 8px; }
.cz-index ol {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px;
}
.cz-index a {
    display: flex; align-items: center; gap: 8px; height: 100%;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
    padding: 8px 12px; color: var(--white); text-decoration: none;
    font-family: var(--px); font-size: 1.3rem; line-height: 1.1;
}
.cz-index a:hover, .cz-index a:focus-visible { border-color: var(--accent); color: var(--accent-txt); }
.cz-index .n { color: var(--gray-dim); min-width: 1.6em; }

/* ---- sections ---- */
.cz-sec { padding: 52px 0 0 !important; scroll-margin-top: 60px; }
.cz-sec > h2 {
    font-size: clamp(2.1rem, 4.5vw, 2.8rem); color: var(--white); margin: 0 0 10px;
    border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.cz-kicker {
    font-family: var(--px); font-size: 1.15rem; color: var(--accent-txt);
    letter-spacing: 0.08em; margin: 0 0 2px;
}
.cz-lead { color: var(--gray); line-height: 1.6; margin: 0 0 18px; max-width: 820px; }
.cz-note { color: var(--gray-dim); font-size: 0.88rem; line-height: 1.55; margin: 14px 0 0; }
.cz-text p { color: var(--gray); line-height: 1.6; margin: 0 0 12px; }
.cz-text .cz-note { color: var(--gray-dim); }

/* ---- animation frames ---- */
.cz-anim {
    margin: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 12px 8px;
}
.cz-anim svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cz-anim figcaption { color: var(--gray-dim); font-size: 0.85rem; margin-top: 6px; line-height: 1.4; }
.cz-anim text { font-family: var(--px); }
.cz-anim .ar { fill: var(--gray-dim); font-size: 16px; }

/* ---- advantages ---- */
.cz-adv {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.cz-adv li {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 16px;
}
.cz-adv li > svg, .cz-adv li > i { width: 26px; height: 26px; color: var(--accent-txt); display: block; margin-bottom: 8px; }
.cz-adv h3 { font-size: 1.6rem; color: var(--white); margin: 0 0 6px; line-height: 1; }
.cz-adv p { color: var(--gray); font-size: 0.92rem; line-height: 1.55; margin: 0; }

.cz-overlays {
    margin-top: 12px; padding: 16px 18px;
    border: 1px dashed var(--border); border-radius: 6px;
}
.cz-overlays h3 { font-size: 1.5rem; color: var(--white); margin: 0 0 6px; }
.cz-overlays p { color: var(--gray); font-size: 0.92rem; line-height: 1.55; margin: 0 0 8px; }
.cz-overlays ul { margin: 0; padding-left: 1.1em; color: var(--gray); font-size: 0.92rem; line-height: 1.7; columns: 2; column-gap: 32px; }
.cz-overlays li { break-inside: avoid; }

/* ---- content ideas ---- */
.cz-ideas {
    list-style: none; margin: 0; padding: 0; counter-reset: idea;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;
}
.cz-idea {
    counter-increment: idea; position: relative;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px 14px;
    display: flex; flex-direction: column;
}
.cz-idea::before {
    content: counter(idea, decimal-leading-zero);
    position: absolute; top: 8px; right: 10px;
    font-family: var(--px); font-size: 1.1rem; color: var(--gray-dim);
}
.cz-idea .cz-anim { background: #151515; padding: 8px; margin: 0 0 10px; }
.cz-idea h3 { font-size: 1.55rem; color: var(--white); margin: 0 0 6px; line-height: 1; }
.cz-idea p { color: var(--gray); font-size: 0.9rem; line-height: 1.5; margin: 0 0 8px; }
.cz-idea .cz-how {
    margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 0.86rem; color: var(--gray);
}
.cz-how b {
    font-family: var(--px); font-weight: 400; font-size: 1.1rem; color: var(--orange);
    letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px;
}
.cz-idea kbd { font-size: 1rem !important; padding: 0 5px !important; }

/* ---- split layouts ---- */
.cz-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: start;
}

/* OBS steps */
.cz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cz-steps li {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px;
}
.cz-steps .n { font-family: var(--px); font-size: 2.2rem; line-height: 1; color: var(--accent-txt); }
.cz-steps h3 { font-size: 1.5rem; color: var(--white); margin: 0 0 4px; line-height: 1.05; }
.cz-steps p { color: var(--gray); font-size: 0.92rem; line-height: 1.5; margin: 0; }

.cz-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.cz-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cz-table th {
    font-family: var(--px); font-weight: 400; font-size: 1.2rem; color: var(--gray-dim);
    text-align: left; letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--bg-card); padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.cz-table td { color: var(--gray); padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cz-table tr:last-child td { border-bottom: 0; }
.cz-table td:first-child { color: var(--white); }
.cz-table td:nth-child(2) { white-space: nowrap; }

/* virtual camera mini steps */
.cz-mini { margin: 4px 0 0; padding-left: 1.3em; color: var(--gray); line-height: 1.6; }
.cz-mini li { margin-bottom: 6px; }

/* presence states */
.cz-states { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cz-states li {
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--green);
    border-radius: 4px; padding: 8px 12px; color: var(--gray); font-size: 0.92rem; line-height: 1.45;
}
.cz-states b {
    display: block; font-family: var(--px); font-weight: 400; font-size: 1.2rem; color: var(--white);
}

/* ---- CTA ---- */
.cz-call {
    margin-top: 56px; text-align: center;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    padding: 28px 20px 24px !important;
}
.cz-call > h2 { border-bottom: 0; padding-bottom: 0; }
.cz-call > p { color: var(--gray); margin: 0 auto 10px; max-width: 620px; line-height: 1.6; }
.cz-mail { margin: 6px auto 14px !important; }
.cz-addr {
    display: inline-block; font-family: var(--px); font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1;
    color: var(--accent-txt); background: #121212; border: 1px solid var(--border); border-radius: 4px;
    padding: 6px 14px; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}
.cz-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cz-actions .btn-primary, .cz-actions .btn-ghost { min-width: 0; }
.cz-copied { min-height: 1.4em; color: var(--green) !important; font-size: 0.9rem; margin: 10px auto 0 !important; }
.cz-dl a { color: var(--accent-txt); font-family: var(--px); font-size: 1.3rem; text-decoration: none; }
.cz-dl a:hover { text-decoration: underline; }

/* ---- ES copies: styles.css gives them display:revert (inline for <span>) ---- */
body.lang-es .cz-states[data-lang="es"] { display: grid !important; }

/* ---- sprite animation (only while visible: .run set by IntersectionObserver) ---- */
.cz-anim { --d: 2.4s; }
.cz-anim .fA { opacity: 0; }                       /* still frame = action frame (fB) */
.cz-anim .q2, .cz-anim .q3, .cz-anim .q4 { opacity: 0; }   /* still frame = q1 */
.cz-anim .p1, .cz-anim .p2 { opacity: 0; }         /* still frame = p3 (BRB) */
.cz-anim .p12 { opacity: 0; }
.cz-anim .cz-cnt text { opacity: 0; }
.cz-anim .cz-cnt .c3 { opacity: 1; }
.cz-anim .cz-hp { transform-box: fill-box; transform-origin: left center; transform: scaleX(0.4); }
.cz-anim .cz-bar, .cz-anim .cz-race1, .cz-anim .cz-race2 { transform-box: fill-box; transform-origin: left center; }
.cz-anim .cz-race1 { transform: scaleX(0.8); }
.cz-anim .cz-race2 { transform: scaleX(0.7); }
.cz-anim .cz-mapdot { transform: translate(48px, -26px); }
.cz-anim .trail { stroke-dasharray: 60; stroke-dashoffset: 0; }

.cz-anim.run .fA { animation: czA var(--d) linear infinite; }
.cz-anim.run .fB { animation: czB var(--d) linear infinite; }
.cz-anim.cz-march { --d: 0.6s; }
.cz-anim.run .trail { animation: czDraw var(--d) linear infinite; }
.cz-anim.run .cz-cnt .c0 { animation: czC0 calc(var(--d) * 4) linear infinite; }
.cz-anim.run .cz-cnt .c1 { animation: czC1 calc(var(--d) * 4) linear infinite; }
.cz-anim.run .cz-cnt .c2 { animation: czC2 calc(var(--d) * 4) linear infinite; }
.cz-anim.run .cz-cnt .c3 { animation: czC3 calc(var(--d) * 4) linear infinite; }
.cz-anim.cz-march.run .cz-cnt text { animation-duration: 4.8s; }
.cz-anim.run .cz-hp { animation: czHp calc(var(--d) * 4) steps(1) infinite; }
.cz-anim.run .cz-bar { animation: czGrow 9.6s steps(8) infinite; }
.cz-anim.run .cz-race1 { animation: czGrow 6s steps(12) infinite; }
.cz-anim.run .cz-race2 { animation: czGrow 7.2s steps(12) infinite; }
.cz-anim.run .cz-mapdot { animation: czMap 6s steps(12) infinite; }
.cz-anim.run .cz-sway { animation: czSway 3.2s steps(1) infinite; }
.cz-anim.run .cz-cursor { animation: czCursor 3.2s steps(1) infinite; }
.cz-anim.cz-q { --q: 8s; }
.cz-anim.cz-q.run .q1 { animation: czQ1 var(--q) linear infinite; }
.cz-anim.cz-q.run .q2 { animation: czQ2 var(--q) linear infinite; }
.cz-anim.cz-q.run .q3 { animation: czQ3 var(--q) linear infinite; }
.cz-anim.cz-q.run .q4 { animation: czQ4 var(--q) linear infinite; }
.cz-anim.cz-p { --p: 5s; }
.cz-anim.cz-p.run .p1 { animation: czP1 var(--p) linear infinite; }
.cz-anim.cz-p.run .p2 { animation: czP2 var(--p) linear infinite; }
.cz-anim.cz-p.run .p3 { animation: czP3 var(--p) linear infinite; }
.cz-anim.cz-p.run .p12 { animation: czP12 var(--p) linear infinite; }

@keyframes czA { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes czB { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes czDraw { 0% { stroke-dashoffset: 60; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes czC0 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes czC1 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes czC2 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes czC3 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes czHp {
    0% { transform: scaleX(1); } 25% { transform: scaleX(0.75); }
    50% { transform: scaleX(0.5); } 75% { transform: scaleX(0.25); } 100% { transform: scaleX(1); }
}
@keyframes czGrow { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }
@keyframes czMap {
    0% { transform: translate(0, 0); } 30% { transform: translate(14px, 0); }
    55% { transform: translate(14px, -14px); } 75% { transform: translate(30px, -14px); }
    85% { transform: translate(30px, -26px); } 100% { transform: translate(48px, -26px); }
}
@keyframes czSway { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } }
@keyframes czCursor { 0% { transform: translate(0, 0); } 25% { transform: translate(-10px, 4px); } 50% { transform: translate(0, 0); } 75% { transform: translate(10px, 4px); } }
@keyframes czQ1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes czQ2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes czQ3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes czQ4 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes czP1 { 0%, 39.9% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes czP2 { 0%, 39.9% { opacity: 0; } 40%, 54.9% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes czP3 { 0%, 59.9% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes czP12 { 0%, 59.9% { opacity: 1; } 60%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .cz-anim *, .cz-anim.run * { animation: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
    .cz-hero, .cz-split { grid-template-columns: minmax(0, 1fr); }
    .cz-hero { text-align: center; }
    .cz-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cz-page { padding-top: 84px; }
    .cz-adv { grid-template-columns: minmax(0, 1fr); }
    .cz-ideas { grid-template-columns: minmax(0, 1fr); }
    .cz-index ol { grid-template-columns: minmax(0, 1fr); }
    .cz-overlays ul { columns: 1; }
    .cz-table { font-size: 0.86rem; }
    .cz-table th, .cz-table td { padding: 8px; }
    .cz-table td:nth-child(2) { white-space: normal; }
}