/* ===== GoZip — shared design system (premium) ===== */
:root{
  /* semantic tokens */
  --bg:#0D0D0F;                       /* background */
  --surface:#161619;                  /* surface */
  --surface-elevated:#1E1E22;         /* surface-elevated */
  --text:#F5F2E8;                     /* text */
  --text-muted:rgba(245,242,232,.62); /* text-muted */
  --gold:#D4B038;
  --gold-light:#F5DE99;
  --gold-deep:#B8942A;
  --border:rgba(245,242,232,.10);
  --border-strong:rgba(245,242,232,.18);
  --success:#4ade80;                  /* Disponible ahora */
  --upcoming:#F5DE99;                 /* Próximamente */
  --development:#9aa0a6;              /* En desarrollo */
  --danger:#e0a0a0;                   /* danger */
  --shadow-sm:0 6px 24px rgba(0,0,0,.35);
  --shadow-md:0 22px 48px rgba(0,0,0,.42),0 0 0 1px rgba(212,176,56,.10);
  --radius-sm:12px; --radius:16px; --radius-lg:24px; --pill:999px;
  --maxw:1140px; --gutter:24px;
  --t-fast:.18s ease; --t-normal:.3s ease;
  /* typography — LOCAL stacks only (no external fonts) */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Baskerville,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* legacy aliases (kept so existing pages/components keep working) */
  --carbon:var(--bg); --graphite:var(--surface-elevated); --graphite2:var(--surface);
  --cream:var(--text); --muted:var(--text-muted); --line:var(--border);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.serif{font-family:var(--serif)}
.gold{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* focus visible (global, keyboard) */
:focus{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.btn:focus-visible,.lang-toggle:focus-visible,.navtoggle:focus-visible,.nav-trigger:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:3px;border-radius:8px}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(13,13,15,.72);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{font-family:var(--serif);font-weight:800;font-size:1.6rem;letter-spacing:.3px}
.logo .go{color:var(--text)} .logo .zip{color:var(--gold)}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks>a{font-size:.9rem;color:var(--text-muted);transition:color var(--t-fast)}
.navlinks>a:hover,.navlinks>a.current{color:var(--text)}
/* dropdown */
.nav-dd{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-muted);font-family:var(--sans);font-size:.9rem;cursor:pointer;padding:6px 2px;transition:color var(--t-fast)}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--text)}
.nav-trigger .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast)}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-1px)}
.nav-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:220px;background:var(--surface-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:8px;display:none;flex-direction:column;gap:2px}
.nav-menu.open{display:flex}
.nav-menu a{font-size:.9rem;color:var(--text-muted);padding:10px 12px;border-radius:10px;transition:background var(--t-fast),color var(--t-fast)}
.nav-menu a:hover,.nav-menu a:focus-visible{background:rgba(245,242,232,.06);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.92rem;padding:11px 22px;border-radius:var(--pill);transition:transform var(--t-fast),box-shadow var(--t-normal),background var(--t-fast);cursor:pointer;border:none;font-family:var(--sans);text-align:center}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1508;box-shadow:0 6px 24px rgba(212,176,56,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(212,176,56,.42)}
.btn-ghost{border:1px solid rgba(212,176,56,.45);color:var(--gold-light);background:transparent}
.btn-ghost:hover{background:rgba(212,176,56,.12)}
.btn-outline{border:1px solid var(--border-strong);color:var(--text);background:transparent}
.btn-outline:hover{border-color:rgba(212,176,56,.5);background:rgba(245,242,232,.04)}
.navtoggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;line-height:1;padding:6px 8px}
.lang-toggle{background:transparent;border:1px solid rgba(212,176,56,.45);color:var(--gold-light);font-family:var(--sans);font-size:.8rem;font-weight:700;padding:6px 13px;border-radius:var(--pill);cursor:pointer;letter-spacing:.06em;transition:background var(--t-fast)}
.lang-toggle:hover{background:rgba(212,176,56,.12)}

/* ---------- CHIPS (status) ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:var(--pill);border:1px solid transparent;text-transform:uppercase}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip-now{color:var(--success);background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.30)}
.chip-soon{color:var(--upcoming);background:rgba(212,176,56,.14);border-color:rgba(212,176,56,.32)}
.chip-dev{color:var(--development);background:rgba(154,160,166,.12);border-color:rgba(154,160,166,.28)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:96px 0 60px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(650px 420px at 78% 6%,rgba(212,176,56,.18),transparent 60%),
  radial-gradient(700px 500px at 8% 92%,rgba(212,176,56,.09),transparent 60%),
  linear-gradient(180deg,var(--surface-elevated),var(--bg) 70%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.04em;color:var(--gold-light);background:rgba(212,176,56,.10);border:1px solid rgba(212,176,56,.30);padding:7px 15px;border-radius:var(--pill);margin-bottom:26px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(74,222,128,.18)}
h1.hero-title{font-family:var(--serif);font-weight:800;font-size:clamp(2.05rem,6vw,4rem);line-height:1.07;letter-spacing:-.5px;overflow-wrap:break-word}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-sub{color:var(--text-muted);font-size:1.14rem;max-width:540px;margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-meta .m{display:flex;flex-direction:column}
.hero-meta .n{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--text)}
.hero-meta .l{font-size:.78rem;color:var(--text-muted);letter-spacing:.02em}

/* phone — GoZip app feed mockup */
.phone-stage{display:flex;justify-content:center;perspective:1400px}
.phone{position:relative;width:300px;height:620px;border-radius:46px;background:linear-gradient(160deg,#2a2a2e,#111113);padding:11px;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(212,176,56,.18);transform:rotateY(-14deg) rotateX(4deg)}
.phone-screen{width:100%;height:100%;border-radius:36px;background:#0b0b0d;overflow:hidden;position:relative;display:flex;flex-direction:column}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#000;border-radius:0 0 18px 18px;z-index:5}
.a-status{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 4px;font-size:.66rem;font-weight:700;color:var(--text)}
.a-status .batt{border:1px solid rgba(245,242,232,.45);border-radius:4px;padding:0 4px;font-size:.55rem;font-weight:600}
.a-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px}
.a-head .hbtn{width:33px;height:33px;border-radius:50%;background:rgba(245,242,232,.05);border:1px solid rgba(212,176,56,.25);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.a-head .a-title{font-family:var(--serif);font-weight:800;font-size:1.4rem}
.a-tabs{display:flex;gap:8px;padding:0 16px 12px}
.a-tab{font-size:.72rem;font-weight:600;padding:7px 16px;border-radius:var(--pill);border:1px solid rgba(245,242,232,.14);color:var(--text-muted)}
.a-tab.on{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1508;border-color:transparent}
.a-feed{flex:1;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:11px;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.post{background:rgba(245,242,232,.03);border:1px solid rgba(245,242,232,.08);border-radius:16px;padding:13px}
.post-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.p-av{width:37px;height:37px;border-radius:50%;flex:none;border:1.5px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:800;font-size:.62rem;line-height:.9;background:#111}
.p-name{font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:5px}
.vb{width:14px;height:14px;border-radius:50%;background:var(--gold);color:#1a1508;font-size:.6rem;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.p-handle{font-size:.62rem;color:var(--text-muted)}
.dots{color:var(--text-muted);font-size:1rem;letter-spacing:1px}
.p-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.p-tag{font-size:.6rem;font-weight:600;padding:4px 11px;border-radius:var(--pill);border:1px solid rgba(212,176,56,.4);color:var(--gold-light)}
.p-tag.t-rec{background:rgba(212,176,56,.16)}
.p-about{font-size:.62rem;color:var(--text-muted);background:rgba(245,242,232,.04);border:1px solid rgba(245,242,232,.07);border-radius:9px;padding:5px 10px;display:inline-block;margin-bottom:10px}
.p-about b{color:var(--gold);font-weight:600}
.p-text{font-size:.7rem;color:rgba(245,242,232,.82);line-height:1.55}
.p-text b{color:var(--text)}
.p-react{display:flex;gap:9px;margin-top:12px}
.p-react span{font-size:.62rem;color:var(--text-muted);display:flex;align-items:center;gap:5px;border:1px solid rgba(245,242,232,.08);border-radius:var(--pill);padding:4px 11px}
.a-nav{display:flex;align-items:flex-end;justify-content:space-around;padding:8px 0 14px;border-top:1px solid rgba(245,242,232,.08);background:rgba(13,13,15,.7)}
.a-nav .nv{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.56rem;color:var(--text-muted)}
.a-nav .nv.on{color:var(--gold)}
.a-nav .pub{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1508;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:300;margin-bottom:2px}

/* ---------- SECTION ---------- */
section{padding:88px 0}
.eyebrow{color:var(--gold);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.sec-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.14;letter-spacing:-.4px;max-width:720px}
.sec-lead{color:var(--text-muted);font-size:1.08rem;max-width:660px;margin-top:18px}
.center{text-align:center;margin:0 auto}
.center .sec-lead{margin-left:auto;margin-right:auto}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* cards grid (profiles / generic) */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.type{position:relative;background:linear-gradient(180deg,rgba(245,242,232,.05),rgba(245,242,232,.015));border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;transition:transform var(--t-normal),border-color var(--t-normal),box-shadow var(--t-normal);overflow:hidden}
.type:before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,rgba(212,176,56,.7),transparent);opacity:0;transition:opacity var(--t-normal)}
.type:hover{transform:translateY(-6px);border-color:rgba(212,176,56,.45);box-shadow:var(--shadow-md)}
.type:hover:before{opacity:1}
.type .ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.55rem;background:radial-gradient(circle at 32% 26%,rgba(212,176,56,.26),rgba(212,176,56,.05));border:1px solid rgba(212,176,56,.32);margin-bottom:20px;box-shadow:inset 0 1px 0 rgba(245,222,153,.15)}
.type h3{font-family:var(--serif);font-weight:600;font-size:1.32rem;margin-bottom:8px}
.type p{color:var(--text-muted);font-size:.96rem;line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.step{position:relative;padding-top:20px}
.step .num{font-family:var(--serif);font-weight:800;font-size:2.6rem;color:rgba(212,176,56,.28);line-height:1}
.step h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin:10px 0 8px}
.step p{color:var(--text-muted);font-size:.98rem}

/* available now — check list */
.nowgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.nowitem{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 18px}
.nowitem .ck{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
.nowitem span{font-size:.95rem;color:rgba(245,242,232,.9)}

/* upcoming — info cards with chip */
.soongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.soon{background:linear-gradient(180deg,rgba(245,242,232,.04),rgba(245,242,232,.01));border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px}
.soon .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.soon .ic{font-size:1.4rem}
.soon h3{font-family:var(--serif);font-weight:600;font-size:1.14rem;margin-bottom:6px}
.soon p{color:var(--text-muted);font-size:.92rem}

/* feature split */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat-list{display:flex;flex-direction:column;gap:26px;margin-top:14px}
.fitem{display:flex;gap:16px}
.fitem .fi{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(212,176,56,.12);border:1px solid rgba(212,176,56,.28);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.fitem h4{font-family:var(--serif);font-size:1.16rem;font-weight:600;margin-bottom:4px}
.fitem p{color:var(--text-muted);font-size:.96rem}
.feat-visual{background:linear-gradient(160deg,rgba(212,176,56,.10),rgba(245,242,232,.02));border:1px solid rgba(212,176,56,.22);border-radius:var(--radius-lg);padding:38px;position:relative;overflow:hidden}
.quote{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.45;color:var(--text)}
.quote-mark{font-family:var(--serif);font-size:4rem;color:var(--gold);line-height:.5;display:block;height:26px}
.quote-by{color:var(--gold-light);font-size:.9rem;margin-top:22px;letter-spacing:.02em}

/* safety */
.safety{background:linear-gradient(180deg,var(--surface),var(--bg));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.safegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.safe{background:rgba(13,13,15,.5);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px}
.safe .ic{font-size:1.5rem;display:block;margin-bottom:12px}
.safe h4{font-size:1.02rem;font-weight:600;margin-bottom:6px;font-family:var(--serif)}
.safe p{color:var(--text-muted);font-size:.88rem}
.pill{font-size:.58rem;padding:2px 8px;border-radius:var(--pill);font-weight:600;letter-spacing:.02em}
.pos{background:rgba(74,222,128,.14);color:#7ee2a4} .mix{background:rgba(212,176,56,.16);color:var(--gold-light)}

/* CTA */
.cta{position:relative;overflow:hidden}
.cta-inner{background:linear-gradient(135deg,rgba(212,176,56,.16),rgba(13,13,15,.4));border:1px solid rgba(212,176,56,.3);border-radius:28px;padding:64px 48px;text-align:center}
.cta h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.4px}
.cta p{color:var(--text-muted);font-size:1.1rem;max-width:520px;margin:16px auto 32px}
.store-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.appstore{display:inline-flex;align-items:center;gap:12px;background:#000;border:1px solid rgba(245,242,232,.22);border-radius:14px;padding:11px 20px;transition:border-color var(--t-fast),transform var(--t-fast)}
.appstore:hover{border-color:var(--gold);transform:translateY(-2px)}
.appstore .apple{font-size:1.8rem}
.appstore .s1{font-size:.62rem;color:var(--text-muted);letter-spacing:.02em}
.appstore .s2{font-size:1.05rem;font-weight:600;line-height:1.1}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{position:relative;padding:80px 0 56px;overflow:hidden;border-bottom:1px solid var(--border)}
.page-hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 400px at 80% 0%,rgba(212,176,56,.14),transparent 60%),
  linear-gradient(180deg,var(--surface-elevated),var(--bg));z-index:-1}
.page-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.5px;max-width:820px}
.page-hero .lead{color:var(--text-muted);font-size:1.14rem;max-width:640px;margin-top:20px}

/* ---------- BUSINESS PAGE ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.benefit{position:relative;background:linear-gradient(180deg,rgba(245,242,232,.05),rgba(245,242,232,.015));border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;transition:transform var(--t-normal),border-color var(--t-normal),box-shadow var(--t-normal);overflow:hidden}
.benefit:before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,rgba(212,176,56,.7),transparent);opacity:0;transition:opacity var(--t-normal)}
.benefit:hover{transform:translateY(-6px);border-color:rgba(212,176,56,.45);box-shadow:var(--shadow-md)}
.benefit:hover:before{opacity:1}
.benefit .ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:radial-gradient(circle at 32% 26%,rgba(212,176,56,.26),rgba(212,176,56,.05));border:1px solid rgba(212,176,56,.32);margin-bottom:20px;box-shadow:inset 0 1px 0 rgba(245,222,153,.15)}
.benefit h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;margin-bottom:6px}
.benefit p{color:var(--text-muted);font-size:.94rem}
.offer{background:linear-gradient(140deg,rgba(212,176,56,.16),rgba(13,13,15,.4));border:1px solid rgba(212,176,56,.34);border-radius:26px;padding:48px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.offer .tag15{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--gold-light);background:rgba(212,176,56,.14);border:1px solid rgba(212,176,56,.4);padding:7px 15px;border-radius:var(--pill);font-size:.82rem;margin-bottom:18px}
.offer h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15}
.offer p{color:rgba(245,242,232,.82);margin-top:16px;font-size:1.02rem}
.offer .fine{font-size:.78rem;color:var(--text-muted);margin-top:18px;line-height:1.5}
.offer-num{text-align:center}
.offer-num .big{font-family:var(--serif);font-weight:800;font-size:5.5rem;line-height:1;color:var(--gold)}
.offer-num .small{color:var(--gold-light);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;font-weight:600;margin-top:6px}
.notdo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.notdo .nd{display:flex;gap:13px;align-items:flex-start;background:rgba(13,13,15,.5);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.notdo .nd .x{color:var(--gold);font-weight:800;font-size:1.05rem;flex:none;margin-top:1px}
.notdo .nd p{color:rgba(245,242,232,.86);font-size:.95rem}

/* ---------- ARTICLE / LEGAL ---------- */
.article{max-width:800px;margin:0 auto;padding:72px 24px 88px}
.article .updated{color:var(--text-muted);font-size:.88rem;margin-bottom:8px}
.article .note{background:rgba(212,176,56,.08);border:1px solid rgba(212,176,56,.25);border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--gold-light);margin:24px 0 8px}
.article h2{font-family:var(--serif);color:var(--gold);font-size:1.35rem;font-weight:600;margin:38px 0 12px}
.article p{color:rgba(245,242,232,.86);margin-bottom:12px}
.article ul{list-style:none;margin:6px 0 12px}
.article li{color:rgba(245,242,232,.86);position:relative;padding-left:22px;margin-bottom:9px}
.article li:before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.article strong{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:52px auto 0;display:flex;flex-direction:column;gap:12px}
.qa{background:rgba(245,242,232,.03);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--serif);font-size:1.12rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";color:var(--gold);font-size:1.5rem;font-weight:300;transition:transform var(--t-fast);flex:none}
.qa[open] summary:after{transform:rotate(45deg)}
.qa .a{padding:0 24px 22px;color:var(--text-muted)}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.ccard{background:rgba(245,242,232,.03);border:1px solid var(--border);border-radius:var(--radius);padding:26px;text-align:center;transition:border-color var(--t-fast),transform var(--t-fast)}
.ccard:hover{border-color:rgba(212,176,56,.4);transform:translateY(-3px)}
.ccard .ic{font-size:1.5rem;display:block;margin-bottom:12px}
.ccard h4{font-family:var(--serif);font-size:1.1rem;margin-bottom:5px}
.ccard a{color:var(--gold-light);font-size:.92rem}

/* ---------- footer ---------- */
footer{padding:60px 0 40px;border-top:1px solid var(--border)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot-brand .logo{font-size:1.7rem;margin-bottom:12px;display:inline-block}
.foot-brand p{color:var(--text-muted);font-size:.9rem;max-width:280px}
.foot-col h5{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-col a{display:block;color:var(--text-muted);font-size:.92rem;margin-bottom:10px;transition:color var(--t-fast)}
.foot-col a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:48px;padding-top:26px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.82rem}
.motto{font-family:var(--serif);font-style:italic;color:var(--gold-light)}

/* ---------- HOME: negocios reforzado + crece con GoZip ---------- */
.bizgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.future-block{margin-top:26px;background:linear-gradient(140deg,rgba(212,176,56,.12),rgba(13,13,15,.4));border:1px solid rgba(212,176,56,.30);border-radius:var(--radius-lg);padding:28px 30px}
.future-block h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:12px 0 6px}
.future-block p{color:var(--text-muted);font-size:.96rem;max-width:840px}
.growgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.grow{display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(245,242,232,.05),rgba(245,242,232,.015));border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;transition:transform var(--t-normal),border-color var(--t-normal),box-shadow var(--t-normal)}
.grow:hover{transform:translateY(-6px);border-color:rgba(212,176,56,.45);box-shadow:var(--shadow-md)}
.grow .chip{align-self:flex-start}
.grow h3{font-family:var(--serif);font-weight:600;font-size:1.22rem}
.grow p{color:var(--text-muted);font-size:.93rem}
.grow .btn{margin-top:auto;align-self:flex-start}

/* ---------- BUSINESS: stylized QR (CSS only) ---------- */
.qrbox{width:160px;height:160px;margin:0 auto;border-radius:16px;background:#0b0b0d;border:1px solid rgba(212,176,56,.35);padding:14px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:4px}
.qrbox i{background:rgba(245,242,232,.85);border-radius:2px}
.qrbox i.g{background:var(--gold)}
.qrbox i.o{background:transparent}

/* ---------- reveal (progressive: visible by default, animated only with JS) ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .phone{transform:none;width:min(290px,84vw);height:600px}
  .phone-stage{perspective:none;max-width:100%}
  .types,.safegrid,.benefits,.nowgrid,.soongrid,.growgrid{grid-template-columns:repeat(2,1fr)}
  .steps,.feat,.foot-grid,.offer,.notdo,.contact-cards{grid-template-columns:1fr}
  .feat{gap:34px}
  .offer{padding:34px}
  .offer-num{display:none}
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(13,13,15,.98);border-bottom:1px solid var(--border);padding:18px 24px 24px;gap:6px;max-height:calc(100vh - 70px);overflow-y:auto}
  .navlinks.open>a{padding:12px 4px;font-size:1rem;min-height:44px;display:flex;align-items:center}
  .navlinks.open .btn{margin-top:8px;min-height:44px}
  .navlinks.open .lang-toggle{align-self:flex-start;min-height:44px}
  .navtoggle{display:block}
  /* dropdown → inline accordion on mobile */
  .nav-dd{width:100%}
  .nav-trigger{width:100%;justify-content:space-between;padding:12px 4px;font-size:1rem;min-height:44px}
  .nav-menu{position:static;display:none;min-width:0;background:transparent;border:none;box-shadow:none;padding:4px 0 4px 12px;border-left:2px solid var(--border)}
  .nav-menu.open{display:flex}
  .nav-menu a{min-height:40px;display:flex;align-items:center}
}
@media(max-width:560px){
  .types,.safegrid,.benefits,.nowgrid,.soongrid,.growgrid,.bizgrid{grid-template-columns:1fr}
  .cta-inner{padding:44px 26px}
  .hero-meta{gap:20px}
  .hero{padding:72px 0 48px}
}

/* Anti-flash de idioma: si hay preferencia EN guardada, el <head> marca gz-lang-pending
   y el body queda oculto hasta que app.js aplica el idioma. Failsafe: se muestra a los
   0.8s aunque el JS falle — la página nunca puede quedar en blanco. */
html.gz-lang-pending body{opacity:0;animation:gzLangShow 0s .8s forwards}
@keyframes gzLangShow{to{opacity:1}}

/* ===== PREMIUM-3 · Guía de la app ===== */
/* Estado activo del dropdown Producto (requerido por guia.html) */
.nav-trigger.current{color:var(--text)}
.nav-menu a.current{color:var(--gold-light)}

/* Navegación interna de la Guía */
.guide-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.guide-toc a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid var(--border-strong);border-radius:var(--pill);color:var(--text-muted);font-size:.9rem;transition:color var(--t-fast),border-color var(--t-fast)}
.guide-toc a:hover,.guide-toc a:focus-visible{color:var(--text);border-color:var(--gold)}

/* Slogan visible del hero de la Guía */
.guide-slogan{font-family:var(--serif);font-style:italic;color:var(--gold-light);font-size:1.08rem;margin-top:20px}

/* Callouts de la Guía */
.guide-callout{border:1px solid var(--border-strong);border-left:3px solid var(--gold);background:var(--surface);border-radius:14px;padding:18px 22px;margin-top:28px;max-width:820px}
.guide-callout p{margin:0;color:var(--text-muted)}

/* Nota pequeña de la Guía */
.guide-note{font-size:.85rem;color:var(--text-muted);margin-top:12px}

/* Barra inferior ilustrativa (Feed · + · Perfil) */
.guide-appbar{display:flex;align-items:flex-end;justify-content:center;gap:44px;max-width:340px;margin:34px auto 0;padding:16px 26px;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface)}
.guide-appbar .gi{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.74rem;color:var(--text-muted)}
.guide-appbar .gi.on{color:var(--gold)}
.guide-appbar .gplus{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1508;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:300}
.guide-appbar-note{text-align:center;font-size:.82rem;color:var(--text-muted);margin-top:12px}