@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&display=swap");
/* ============================================================
   POKET — sistema v3 (referencia: reel.ai / ReelUp / Alfan Link)
   Claro · serif editorial (Fraunces) · Plus Jakarta · pill negro
   · acento amarillo · pastel cards · fotos reales · verde toggles
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;--card:#ffffff;--ink:#161513;--muted:#71706c;--line:#e9e6df;
  --yellow:#ffdf3f;--yellow2:#fff3b0;--green:#22c55e;--peach:#ffd9c2;--lilac:#e9e4fb;--pink:#ffd6ea;--mint:#d3f2df;
  --brown:#2b1511;--cream:#f7f6f2;--red:#ff4d2e;--grn:#0aa14a;--blu:#2f6bff;--pnk:#ff5ea8;--org:#ff9838;
  --ease:cubic-bezier(.32,.72,0,1);
  --serif:'Bricolage Grotesque',system-ui,sans-serif;--sans:'Plus Jakarta Sans',system-ui,sans-serif;
}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100dvh;overflow-x:clip;width:100%;line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}
img,svg,iframe{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--yellow);color:#161513}
main *,section *{min-width:0}

.serif{font-family:var(--serif);font-weight:520;letter-spacing:-.015em;line-height:1.06}
.muted{color:var(--muted)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* nav superior limpio (reel.ai) */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:14px 22px}
.nav .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.nav .logo i{width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px}
.nav .logo small{font-weight:500;color:var(--muted);font-size:13px}
.nav .links{display:flex;gap:4px;margin:0 auto}
.nav .links a{font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 13px;border-radius:99px;transition:.3s}
.nav .links a:hover{color:var(--ink);background:#efede7}
.nav .cta{display:flex;gap:10px;align-items:center}
@media(max-width:760px){.nav .links{display:none}}

/* botones pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;line-height:1;white-space:nowrap;
  padding:14px 24px;border-radius:99px;background:var(--ink);color:#fff;transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.btn svg{flex:0 0 auto;display:block}
.btn:hover{background:#000;box-shadow:0 10px 24px rgba(22,21,19,.18)}
.btn:active{background:#000}
.btn.line{background:transparent;color:var(--ink);border:1.5px solid #d6d3ca}
.btn.line:hover{background:#fff;border-color:var(--ink);box-shadow:0 6px 16px rgba(22,21,19,.08)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover{background:#ffe968}
.btn.sm{padding:9px 17px;font-size:13px}
.btn.block{width:100%;display:flex}

/* chips / eyebrow */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:99px;background:var(--yellow);color:var(--ink)}
.chip.ghost{background:#fff;border:1px solid var(--line);color:var(--muted)}
.chip.dark{background:var(--ink);color:#fff}
.stars{color:#111;letter-spacing:2px;font-size:12px;background:var(--pink);border-radius:99px;padding:6px 13px;font-weight:700}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(30,25,15,.04)}
.pastel{border:0}
.pastel.y{background:var(--yellow2)}.pastel.l{background:var(--lilac)}.pastel.p{background:var(--pink)}.pastel.m{background:var(--mint)}.pastel.pe{background:var(--peach)}

/* stat flotante (reel.ai) */
.stat{background:var(--yellow);border-radius:18px;padding:14px 18px;display:inline-flex;align-items:center;gap:12px;box-shadow:0 14px 30px rgba(30,25,15,.12)}
.stat b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.stat small{font-size:11px;font-weight:600;color:rgba(22,21,19,.65);line-height:1.3}

/* inputs (alfan: cajas grises redondeadas) */
.field{margin-bottom:18px}
.field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
/* casilla legal (términos/privacidad): texto normal en la fuente del sitio, NO el label en mayúsculas */
.tos{display:flex;align-items:flex-start;gap:11px;margin:16px 0}
.tos input[type=checkbox]{margin-top:1px;flex:0 0 auto;width:20px;height:20px;border-radius:6px;accent-color:var(--ink);cursor:pointer}
.tos label{font-family:var(--sans);font-size:13px;line-height:1.55;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted);margin:0;display:inline;cursor:pointer}
.tos a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.inp{width:100%;background:#f2f0ea;border:1.5px solid transparent;border-radius:13px;padding:13px 15px;font-size:14.5px;font-family:inherit;color:var(--ink);transition:.3s}
.inp::placeholder{color:#a9a79f}
.inp:focus{outline:0;background:#fff;border-color:var(--ink)}

/* toggle verde */
.sw{position:relative;width:42px;height:24px;flex:0 0 auto;display:inline-block}
.sw input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
.sw i{position:absolute;inset:0;background:#dcdad2;border-radius:99px;transition:.25s}
.sw i::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+i{background:var(--green)}
.sw input:checked+i::after{transform:translateX(18px)}

/* marquee negro (alfan) */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;padding:16px 0}
.marquee .track{display:inline-flex;align-items:center;animation:mq 30s linear infinite;will-change:transform}
.marquee span{font-size:14.5px;font-weight:600;padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marquee em{font-style:normal;color:var(--yellow)}
@keyframes mq{to{transform:translateX(-50%)}}

/* layout */
.wrap{max-width:1160px;margin:0 auto;padding-inline:22px}
.sec{padding-block:88px}
@media(max-width:768px){.sec{padding-block:56px}}
.center{text-align:center}
h1.serif,h2.serif{font-weight:520}
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* sección chocolate (ReelUp) */
.choco{background:var(--brown);color:var(--cream)}
.choco .muted{color:rgba(250,247,240,.62)}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:13px}

/* tabla admin */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--line);font-weight:800}
td{padding:13px 8px;border-bottom:1px solid #f0ede6}

/* avatar foto */
.face{border-radius:50%;object-fit:cover}

/* serif refinada global (referencia reel.ai) */
.serif,.pname,.mylinks,.pv h2,.bignum,.stats3 b,.tile b,.cardx h3,dialog h2,
.gcard h2,.gcard .n18,.tip h3,.sh h2,.feat h3,.choco .big,.tier .pr,.side h2,
h1,h2{font-family:'Bricolage Grotesque',system-ui,sans-serif!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.04}
.nav .logo,.top .logo,.side .logo,b,strong,.btn,.chip,.tabs button,.kind{font-family:var(--sans)!important}

/* más color (forma) */
.chip.red{background:var(--red);color:#fff}.chip.grn{background:var(--grn);color:#fff}
.chip.blu{background:var(--blu);color:#fff}.chip.pnk{background:var(--pnk);color:#fff}
.hl-red{color:var(--red)}.hl-grn{color:var(--grn)}.hl-blu{color:var(--blu)}.hl-pnk{color:var(--pnk)}
.mark-y{background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.mark-p{background:linear-gradient(transparent 62%,var(--pink) 62%)}
.mark-y,.mark-p{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}

/* ===================== OPTIMIZACIÓN MÓVIL (iOS Safari/Chrome + Android Chrome) ===================== */
@media(max-width:768px){
  /* más aire: títulos y textos dejan de sentirse "pegados" */
  .serif{line-height:1.14}
  h1.serif{line-height:1.08}
  h2.serif{line-height:1.1}
  /* separación vertical generosa entre secciones (padding-block: NO borra el gutter horizontal) */
  .sec{padding-block:60px}
  /* gutter lateral consistente y cómodo en todo el sitio (padding-inline: NO borra el vertical) */
  .wrap{padding-inline:20px}
  /* los resaltados no cortan los descendentes (la "y" de "ya", etc.) */
  .mark-y,.mark-p{padding:.04em .06em;line-height:1.35}
}
@media(max-width:600px){
  /* nav: el email decorativo compite por espacio y recorta "Crear gratis" -> fuera en móvil */
  .nav .in{gap:12px;padding:12px 18px}
  .nav .logo small{display:none}
  .nav .cta{gap:8px}
  .nav .cta .btn.sm{padding:9px 15px;font-size:12.5px}
}