/* @cle-edit */
/* Mundial 2026 — CSS de campaña (Tabler Icons embebido + estilos propios).
   Fuente Figtree la sirve el theme via wp_head. Reglas footer{} eliminadas
   para no contaminar el footer de WP. */

/* Iconos Tabler: se sustituyeron por SVG inline en la template, por eso
   ya NO se incluye la webfont de Tabler (el @font-face apuntaba a assets
   inexistentes y rompía los iconos). */

/* ===== Estilos propios Mundial ===== */
/* Reset acotado a la landing para no contaminar el footer de WP (va fuera de
   #mundial-futbol). Se usa :where() para que la especificidad sea 0 (como el
   reset universal original) y NO gane a las clases del diseño. */
:where(#mundial-futbol),:where(#mundial-futbol) *,:where(#mundial-futbol) *::before,:where(#mundial-futbol) *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Figtree','Inter',system-ui,sans-serif;color:#1d1d1f;background:#fff;overflow-x:hidden;font-feature-settings:'ss01','cv11'}
:root{
  /* Football field (kept) */
  --g:#1a6b3a;--gd:#0d3d20;--gl:#2e9e58;
  /* Neutrals */
  --dark:#1d1d1f;--mid:#6e6e73;--light:#f5f5f7;--white:#fff;
  /* ── SESAME PALETTE ── */
  --sn:#11205e;          /* deep electric navy */
  --si-800:#1d33c4;      /* deep electric blue */
  --si-700:#2a47ec;      /* electric blue */
  --si-600:#3959ff;      /* electric blue base */
  --sv-500:#5b75ff;      /* light electric blue */
  --sv-400:#8097ff;      /* lighter electric blue */
  --st:#55e5bc;          /* sesame teal */
  --st-d:#0ec089;        /* sesame teal-deep */
  /* Sesame panoramic canvas — radial blue→violet */
  --bg-canvas:radial-gradient(120% 110% at 50% 50%,var(--sv-400) 0%,var(--si-700) 38%,var(--si-800) 70%,var(--sn) 100%);
  /* Faint blueprint grid */
  --bg-grid:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  /* Glass */
  --glass-fill:rgba(255,255,255,.10);
  --glass-fill-strong:rgba(255,255,255,.16);
  --glass-stroke:rgba(255,255,255,.22);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.35);
  --glass-shadow:0 24px 60px -20px rgba(15,18,60,.55);
  --glass-blur:saturate(160%) blur(18px);
}
h1,h2,h3,h4,.cd-msg,.cta-h{font-family:'Figtree',sans-serif;letter-spacing:-.025em}

/* ── NAV ── */
header{
  position:absolute;inset:0 0 auto;z-index:500;height:84px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:rgba(224,231,255,.9);
  backdrop-filter:saturate(200%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);transition:background .3s;
}
.logo img{height:50px;display:block}
.nav-cta{background:#2d5dff;color:#fff;padding:9px 22px;border-radius:50px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s,transform .15s;box-shadow:0 4px 14px -4px rgba(45,93,255,.5)}
.nav-cta:hover{background:#1f48d6;transform:scale(1.03)}

/* ── HERO (green field kept) ── */
.hero{
  min-height:100vh;background:linear-gradient(165deg,#0b2e17 0%,#1a6b3a 50%,#0f4a28 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:120px 24px 80px;text-align:center;
}
.field-svg{position:absolute;inset:0;opacity:.13;pointer-events:none}
.field-svg svg{width:100%;height:100%}
/* faint blueprint grid over the field — Sesame signature */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--bg-grid);background-size:120px 120px;
  opacity:.5;mix-blend-mode:overlay;
}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.cf{position:absolute;top:-20px;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}80%{opacity:.8}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb1{width:550px;height:550px;background:rgba(128,151,255,.22);top:-120px;right:-120px}
.orb2{width:450px;height:450px;background:rgba(85,229,188,.16);bottom:-80px;left:-80px}
/* Sesame glass capsules floating over the field */
.sc-float{position:absolute;background:var(--glass-fill-strong);border:1px solid var(--glass-stroke);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:18px;padding:11px 16px;box-shadow:var(--glass-shadow),var(--glass-inner);font-size:12px;font-weight:600;color:#fff;white-space:nowrap;animation:floatC 5s ease-in-out infinite;z-index:2;display:flex;align-items:center;gap:10px;letter-spacing:-.005em}
.sc-float.l{left:5%;bottom:30%;animation-delay:0s;display:none}
.sc-float.r{right:5%;bottom:38%;animation-delay:1.2s;display:none}
.sc-float .em{font-size:16px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid var(--glass-stroke);margin:0}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.hero-inner{position:relative;z-index:2;max-width:820px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(128,151,255,.18);border:1px solid rgba(216,209,255,.35);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:#e9e3ff;padding:7px 18px;border-radius:30px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;animation:fdD .7s ease both;box-shadow:var(--glass-inner)}
.hero-tag .dot{width:6px;height:6px;background:var(--sv-400);border-radius:50%;animation:blk 1.5s ease infinite;box-shadow:0 0 10px var(--sv-400)}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.2}}
h1.hero-h1{font-size:clamp(46px,8.4vw,104px);font-weight:800;line-height:.98;letter-spacing:-.045em;color:#fff;margin-bottom:18px;animation:fdU .8s .1s ease both}
h1.hero-h1 em{font-style:normal;font-weight:800;display:inline-block;padding-right:.12em;margin-right:-.12em;background:linear-gradient(90deg,#c8d2ff 0%,#90a6ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes shim{0%{background-position:0}100%{background-position:300%}}
.hero-sub{font-size:clamp(17px,2.8vw,24px);color:rgba(255,255,255,.72);font-weight:400;line-height:1.5;margin-bottom:40px;animation:fdU .8s .18s ease both;letter-spacing:-.005em}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--si-700) 0%,var(--sv-400) 100%);color:#fff;padding:17px 36px;border-radius:50px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 14px 40px -8px rgba(57,89,255,.55),0 4px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s,box-shadow .2s,filter .2s;animation:fdU .8s .26s ease both;letter-spacing:-.01em}
.hero-cta:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08);box-shadow:0 20px 50px -8px rgba(57,89,255,.7),0 6px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.3)}
.people-row{display:flex;align-items:flex-end;justify-content:center;margin-top:56px;animation:fdU .9s .35s ease both}
.person{display:flex;flex-direction:column;align-items:center;position:relative;margin-left:-12px}
.person:first-child{margin-left:0}
.person img{width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.3);object-fit:cover;transition:transform .3s}
.person:nth-child(3) img{width:100px;height:100px;border-color:rgba(255,255,255,.5)}
.person:hover img{transform:scale(1.1) translateY(-4px)}
.flag-bub{position:absolute;top:-16px;background:rgba(255,255,255,.95);border-radius:20px;padding:3px 8px;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.15);animation:flF 3s ease-in-out infinite}
.person:nth-child(1) .flag-bub{animation-delay:0s}
.person:nth-child(2) .flag-bub{animation-delay:.4s}
.person:nth-child(3) .flag-bub{animation-delay:.8s;font-size:22px;top:-20px}
.person:nth-child(4) .flag-bub{animation-delay:.6s}
.person:nth-child(5) .flag-bub{animation-delay:.2s}
@keyframes flF{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.35);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;animation:bob 2.5s ease infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
.scroll-hint svg{width:18px;height:18px}
@keyframes fdU{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fdD{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* ── COUNTDOWN — Sesame panoramic canvas ── */
.cd-sec{
  position:relative;overflow:hidden;
  background:var(--bg-canvas);
  padding:84px 24px;text-align:center;color:#fff;
}
.cd-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--bg-grid);background-size:120px 120px;
  opacity:.55;mix-blend-mode:overlay;
}
.cd-sec>*{position:relative;z-index:1}
.cd-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.cd-lbl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--st);box-shadow:0 0 12px var(--st)}
.cd-msg{font-size:clamp(22px,3.2vw,38px);font-weight:800;color:#fff;margin-bottom:44px;letter-spacing:-.03em;line-height:1.15}
.cd-msg span{color:rgba(255,255,255,.55)}
.cd-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cd-unit{
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-radius:24px;padding:24px 28px;min-width:104px;
  box-shadow:var(--glass-shadow),var(--glass-inner);
}
.cd-n{font-size:clamp(40px,6vw,64px);font-weight:800;line-height:1;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cd-u{font-size:10px;color:rgba(255,255,255,.6);font-weight:700;margin-top:8px;text-transform:uppercase;letter-spacing:.12em}

/* ── SECTION BASE ── */
section.blk{padding:100px 24px}
section.blk.alt{background:var(--light)}
.wrap{max-width:1080px;margin:0 auto}
.blk-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.blk-grid.flip{direction:rtl}
.blk-grid.flip>*{direction:ltr}
.blk-txt .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--si-700);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.blk-txt .lbl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--si-700)}
.blk-txt h2{font-size:clamp(28px,3.9vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.035em;color:var(--dark);margin-bottom:18px;text-wrap:balance}
.blk-txt p{font-size:17px;color:var(--mid);line-height:1.65;max-width:480px;text-wrap:pretty}

/* ── PHONE FRAME ── */
.phone{background:#1c1c1e;border-radius:40px;padding:9px;box-shadow:0 24px 60px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);position:relative;flex-shrink:0}
.phone::after{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:68px;height:20px;background:#1c1c1e;border-radius:0 0 12px 12px;z-index:10}
.phone .scr{background:#f0f7f3;border-radius:32px;overflow:hidden;display:flex;flex-direction:column}
.phone.lg{width:220px}.phone.lg .scr{height:456px}
.phone.md{width:190px}.phone.md .scr{height:393px}

/* ── APP UI ── */
.ah{background:linear-gradient(135deg,var(--si-800) 0%,var(--si-700) 55%,var(--sv-400) 100%);padding:26px 12px 10px;flex-shrink:0;position:relative;overflow:hidden}
.ah::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;opacity:.5;mix-blend-mode:overlay}
.ah>*{position:relative;z-index:1}
.ah.sn{background:var(--sn)}
.ah .top{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.ah .ic{width:24px;height:24px;background:rgba(255,255,255,.15);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;color:white;flex-shrink:0}
.ah .tt{font-size:11px;font-weight:800;color:white}
.ah .ss{font-size:8px;opacity:.65;color:white}
.ah .tabs{display:flex;background:rgba(0,0,0,.15);border-radius:8px;padding:2px;gap:1px}
.ah .tab{flex:1;text-align:center;padding:4px 1px;border-radius:6px;font-size:7px;font-weight:600;color:rgba(255,255,255,.5)}
.ah .tab.on{background:rgba(255,255,255,.2);color:white}
.ab{flex:1;padding:9px;background:#f0f7f3;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.ab.sb{background:#eef1f7}
.ac{background:white;border-radius:11px;padding:11px 12px;box-shadow:0 1px 5px rgba(0,0,0,.06)}
.ac-t{font-size:7.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.a-gbtn{background:linear-gradient(135deg,var(--gl),var(--g));color:white;border-radius:8px;padding:8px;text-align:center;font-size:9px;font-weight:700;margin-top:7px}
/* match row */
.m-row{display:flex;align-items:center;justify-content:space-around}
.m-team{text-align:center}
.m-flag{font-size:22px;display:block}
.m-name{font-size:7.5px;font-weight:600;color:#1e293b;margin-top:3px;display:block}
.m-vs{font-size:8px;font-weight:700;color:#94a3b8}
/* score boxes */
.s-row{display:flex;align-items:center;gap:5px;margin-top:8px}
.s-box{flex:1;height:28px;border:1.5px solid #e2e8f0;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#94a3b8}
.s-box.v{border-color:#2e9e58;color:#1a6b3a}
.s-dash{font-size:9px;font-weight:700;color:#94a3b8}
/* points row */
.pts-row{display:flex;gap:5px;margin-top:7px}
.pts-cell{flex:1;text-align:center;border-radius:8px;padding:7px 3px}
.pts-cell .n{font-size:16px;font-weight:900}
.pts-cell .l{font-size:7px;color:#94a3b8;margin-top:2px}
/* match list */
.ml-item{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f1f5f9}
.ml-item:last-child{border:none}
.ml-date{font-size:7px;color:#94a3b8;font-weight:600;width:48px;flex-shrink:0;line-height:1.3}
.ml-teams{flex:1;font-size:8px;font-weight:600;color:#1e293b}
.ml-badge{font-size:7px;font-weight:700;color:white;background:#2e9e58;border-radius:6px;padding:2px 6px;flex-shrink:0}
.ml-badge.far{background:#e2e8f0;color:#94a3b8}
/* rank rows */
.rk-podium{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:8px}
.rk-pod{display:flex;flex-direction:column;align-items:center;gap:4px}
.rk-av{border-radius:50%;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;flex-shrink:0}
.rk-av.big{width:34px;height:34px;font-size:13px}
.rk-av.sm{width:28px;height:28px}
.rk-pname{font-size:7px;font-weight:600;color:#1e293b;text-align:center;max-width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-pts{font-size:7px;color:#94a3b8}
.rk-pos{border-radius:8px;padding:6px 10px;font-size:10px;font-weight:900;color:white;width:100%;text-align:center}
.rk-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #f1f5f9}
.rk-row:last-child{border:none}
.rk-n{font-size:8px;font-weight:800;color:#94a3b8;width:14px}
.rk-rname{flex:1;font-size:8px;font-weight:600;color:#1e293b}
.rk-rpts{font-size:8px;font-weight:700;color:var(--g)}

/* ── PARTICIPATION AVATARS (block 1) ── */
.part-row{
  display:flex;align-items:center;gap:10px;
  background:#e8f5ec;border-radius:12px;padding:10px 13px;margin-top:10px;
}
.part-avatars{display:flex;flex-shrink:0}
.part-av{
  width:26px;height:26px;border-radius:50%;border:2px solid #e8f5ec;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:white;
}
.part-av+.part-av{margin-left:-8px}
.part-text{font-size:8px;color:#1a6b3a;font-weight:600;line-height:1.3}
.part-text strong{color:#0d3d20}

/* ── BLOCK 2: dual phone layout ── */
.dual-phones{
  display:flex;justify-content:center;align-items:flex-start;
  gap:14px;position:relative;padding-top:172px;
}
.bet-float{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:white;border-radius:16px;padding:13px 20px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  white-space:nowrap;z-index:10;
  border:1px solid rgba(0,0,0,.05);
  /* animacion propia que conserva el translateX(-50%) para que quede centrada */
  animation:floatBet 4s ease-in-out infinite;
}
@keyframes floatBet{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-10px) rotate(1deg)}}
.bf-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#ef4444;display:flex;align-items:center;gap:5px;margin-bottom:8px}
.bf-tag::before{content:'';width:6px;height:6px;background:#ef4444;border-radius:50%;animation:blk 1s ease infinite}
.bf-match{display:flex;align-items:center;gap:12px}
.bf-team{display:flex;flex-direction:column;align-items:center;gap:3px}
.bf-flag{font-size:24px}
.bf-tname{font-size:10px;font-weight:700;color:var(--dark)}
.bf-score{font-size:22px;font-weight:900;color:var(--dark)}
.bf-dash{color:#e2e8f0;font-weight:300}
.bf-bottom{font-size:9px;color:var(--mid);margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bf-hit{background:#e6f4ec;color:var(--g);font-size:9px;font-weight:700;padding:2px 8px;border-radius:8px}

/* ── BLOCK 3: ranking + prize cards ── */
.rank-visual{display:flex;gap:16px;align-items:flex-start;justify-content:center}
.prize-stack{display:flex;flex-direction:column;gap:10px;padding-top:30px;flex-shrink:0;width:188px}
.prize-pill{
  background:white;border-radius:14px;padding:14px 16px;
  box-shadow:0 3px 14px rgba(0,0,0,.08);
  transition:transform .2s;overflow:hidden;position:relative;
}
.prize-pill:hover{transform:translateX(4px)}
.pp-pos-tag{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;padding:3px 9px;border-radius:20px;
  margin-bottom:6px;letter-spacing:.04em;
}
.pp-pos-tag.green{background:#e6f4ec;color:#0d3d20}
.pp-pos-tag.gold{background:#fff3dc;color:#8a5a00}
.pp-pos-tag.purple{background:#f0ebff;color:#5b21b6}
.pp-prize-name{font-size:13px;font-weight:800;color:var(--dark);margin-bottom:1px}
.pp-medal{font-size:20px;position:absolute;right:14px;top:50%;transform:translateY(-50%)}

/* ── BLOCK 4: dual chat phones ── */
.dual-chat{display:flex;justify-content:center;align-items:flex-start;gap:14px}

/* chat screen (shared) */
.chat-scr{background:#fff;display:flex;flex-direction:column;height:100%}
/* group chat header - Sesame indigo→violet */
.chat-hd{background:linear-gradient(135deg,var(--si-800) 0%,var(--si-700) 55%,var(--sv-400) 100%);padding:24px 12px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;overflow:hidden}
.chat-hd::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;opacity:.5;mix-blend-mode:overlay}
.chat-hd>*{position:relative;z-index:1}
.chat-back{color:rgba(255,255,255,.6);font-size:12px;font-weight:600}
.chat-info{flex:1}
.chat-name{font-size:11px;font-weight:800;color:white}
.chat-members{font-size:8px;color:rgba(255,255,255,.55)}
.chat-more{font-size:14px;color:rgba(255,255,255,.5);letter-spacing:.05em}
.chat-body{flex:1;padding:10px 10px 6px;display:flex;flex-direction:column;gap:7px;overflow:hidden;background:#f0f3f8}
.chat-sys{text-align:center;font-size:8px;color:#94a3b8;background:rgba(0,0,0,.04);border-radius:10px;padding:4px 8px}
.chat-msg{display:flex;gap:6px;align-items:flex-start}
.chat-av{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;background:var(--sn)}
.chat-bub{background:white;border-radius:0 10px 10px 10px;padding:6px 9px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.chat-bn{font-size:8px;font-weight:700;color:var(--sn);margin-bottom:2px}
.chat-bt{font-size:9px;color:#334155}
/* my messages - light indigo (Sesame) */
.chat-msg.me .chat-bub{background:#e3e6ff;border-radius:10px 0 10px 10px;color:#1f2d52}
.chat-msg.me .chat-bt{color:#1f2d52}
.chat-msg.me{flex-direction:row-reverse}
.chat-joined{background:#eef0ff;border-radius:12px;padding:8px 11px;border:1px solid rgba(57,89,255,.28)}
.chat-joined-t{font-size:9px;font-weight:700;color:var(--sn)}
.chat-joined-s{font-size:8px;color:#6e6e73}
.chat-input{display:flex;align-items:center;gap:7px;padding:8px 10px;background:white;border-top:1px solid #eee;flex-shrink:0}
.chat-input-ph{flex:1;background:#f1f5f9;border-radius:20px;padding:6px 10px;font-size:9px;color:#94a3b8}
.chat-send{width:24px;height:24px;background:var(--sn);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:#fff}
/* 1:1 chat header */
.chat-hd-1on1{background:linear-gradient(135deg,var(--si-800) 0%,var(--si-700) 55%,var(--sv-400) 100%);padding:24px 12px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;overflow:hidden}
.chat-hd-1on1::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;opacity:.5;mix-blend-mode:overlay}
.chat-hd-1on1>*{position:relative;z-index:1}
.chat-av-lg{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:white;flex-shrink:0}
.chat-1on1-info{flex:1}
.chat-1on1-name{font-size:11px;font-weight:800;color:white}
.chat-1on1-status{font-size:8px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:4px}
.chat-1on1-status::before{content:'';width:5px;height:5px;background:#55e5bc;border-radius:50%;flex-shrink:0}

/* ── RECAP ── Sesame palette tints */
.recap{background:#fff;padding:100px 24px;text-align:center}
.recap .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--si-700);margin-bottom:14px}
.recap h2{font-size:clamp(28px,3.9vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.035em;color:var(--dark);text-wrap:balance}
.recap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:960px;margin:0 auto;
}
.recap-dots{display:none}
.rc{
  border-radius:24px;padding:44px 32px;text-align:left;
  transition:transform .3s,box-shadow .3s;
  border:1px solid rgba(31,45,82,.06);
  position:relative;overflow:hidden;
}
.rc::after{content:'';position:absolute;inset:auto -40px -40px auto;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.45);filter:blur(40px);opacity:.6;pointer-events:none}
.rc:hover{transform:translateY(-6px);box-shadow:0 20px 50px -20px rgba(31,45,82,.18)}
.rc.c1{background:#dfe6ff}                 /* blue-indigo */
.rc.c2{background:#e8e6ff}                 /* indigo */
.rc.c3{background:#f1e8fc}                 /* violet */
.rc.c4{background:#f5ecf7}                 /* mauve-violet */
.rc.c5{background:#e3ebfe}                 /* sky-indigo */
.rc.c6{background:#ece6fb}                 /* deep lilac */
.rc-icon{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;font-size:26px;position:relative;z-index:1;
}
.rc.c1 .rc-icon{background:rgba(57,89,255,.14);color:var(--si-700)}
.rc.c2 .rc-icon{background:rgba(57,89,255,.14);color:var(--si-700)}
.rc.c3 .rc-icon{background:rgba(128,151,255,.18);color:var(--sv-500)}
.rc.c4 .rc-icon{background:rgba(128,151,255,.18);color:var(--sv-500)}
.rc.c5 .rc-icon{background:rgba(57,89,255,.16);color:var(--si-600)}
.rc.c6 .rc-icon{background:rgba(57,89,255,.16);color:var(--si-600)}
.rc h3{font-size:18px;font-weight:800;color:var(--dark);line-height:1.25;letter-spacing:-.02em;position:relative;z-index:1}

/* ── FINAL CTA — Sesame panoramic canvas ── */
.cta-sec{
  background:var(--bg-canvas);
  padding:120px 24px;text-align:center;position:relative;overflow:hidden;color:#fff;
}
.cta-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--bg-grid);background-size:120px 120px;
  opacity:.55;mix-blend-mode:overlay;
}
/* (Soccer ball removed) */
/* Formulario de registro embebido en el CTA: tarjeta blanca para que el
   register-form (pensado para fondo claro) sea legible sobre el azul. */
.mundial-form-wrap{position:relative;z-index:1;max-width:560px;margin:8px auto 0;background:#fff;color:#1d1d1f;border-radius:24px;padding:36px 32px;text-align:left;box-shadow:0 30px 70px -25px rgba(15,18,60,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.mundial-form-wrap .form{max-width:none}
.cta-inner{position:relative;z-index:1}
.cta-pre{color:var(--st);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:30px;background:var(--glass-fill);border:1px solid var(--glass-stroke);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.cta-h{font-size:clamp(40px,6.4vw,76px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.02;margin-bottom:14px}
.cta-h em{font-style:normal;color:rgba(255,255,255,.55)}
.cta-s{font-size:19px;color:rgba(255,255,255,.7);margin:0 auto 44px;max-width:950px;letter-spacing:-.01em}
.btn-w{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--sn);padding:18px 40px;border-radius:50px;font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 18px 50px -10px rgba(15,18,60,.55),0 4px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:-.01em}
.btn-w:hover{transform:translateY(-3px);background:#f1f0ff;box-shadow:0 24px 60px -10px rgba(15,18,60,.7),0 8px 22px rgba(0,0,0,.22)}

/* ── FOOTER ── */




/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s ease}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-36px);transition:opacity .75s ease,transform .75s ease}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(36px);transition:opacity .75s ease,transform .75s ease}
.rv-r.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  header{padding:0 20px}
  .blk-grid,.blk-grid.flip{grid-template-columns:1fr;gap:48px;direction:ltr}
  section.blk{padding:70px 20px}
  .sc-float{display:none}
  .recap-grid{grid-template-columns:1fr 1fr}
  .rank-visual{flex-direction:column;align-items:center}
  .prize-stack{width:100%;flex-direction:row;flex-wrap:wrap;padding-top:0}
  .dual-phones,.dual-chat{gap:10px}
  
}
@media(max-width:540px){
  /* Cuenta atrás en 2x2 */
  .cd-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:300px;margin:0 auto}
  .cd-unit{min-width:0;width:auto;padding:18px 12px}
  .cd-msg{font-size:clamp(20px,6vw,28px)}
  /* Titular del hero: que no se corte */
  h1.hero-h1{font-size:clamp(34px,10.5vw,52px)}
  .person img{width:60px;height:60px}
  .person:nth-child(3) img{width:76px;height:76px}
  /* Mockups: apilar y centrar para que no desborden la pantalla */
  .dual-chat{flex-direction:column;align-items:center;padding-top:60px}
  /* dual-phones lleva la tarjeta flotante: holgura para que no pise el notch */
  .dual-phones{flex-direction:column;align-items:center;padding-top:150px}
  .blk .rv-r,.blk .rv-l{flex-direction:column !important;align-items:center !important;gap:24px !important}
  .blk .rv-r>div[style*="padding-top:100px"]{padding-top:0 !important}
  .blk{overflow-x:clip}
  .phone.md{width:220px}.phone.md .scr{height:456px}
}
/* ── "Por qué elegirla": slider horizontal con dots en móvil (patrón card-grid LMS) ── */
@media(max-width:767px){
  #recap-mundial .recap-grid{
    display:flex;grid-template-columns:none;max-width:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;margin:0 -24px;padding:4px 24px 8px;scrollbar-width:none;
  }
  #recap-mundial .recap-grid::-webkit-scrollbar{display:none}
  #recap-mundial .rc{flex:0 0 78%;scroll-snap-align:center;min-width:0;
    opacity:1 !important;transform:none !important;} /* evita que el reveal las deje invisibles en el slider */
  #recap-mundial .recap-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
  #recap-mundial .recap-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:#CBD5E1;transition:background .2s,transform .2s}
  #recap-mundial .recap-dot.active{background:#2d5dff;transform:scale(1.25)}
}

/* ── CTAs de sección (copys del doc "Revisión landing"). Todos -> #descarga ── */
.blk-cta{display:inline-flex;align-items:center;gap:8px;margin-top:30px;background:#2d5dff;color:#fff;padding:14px 28px;border-radius:50px;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 10px 30px -8px rgba(45,93,255,.5);transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:-.01em}
.blk-cta:hover{background:#1f48d6;transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(45,93,255,.6)}
.cd-cta{display:inline-flex;align-items:center;gap:8px;margin-top:34px;position:relative;z-index:1;background:#fff;color:var(--sn);padding:15px 32px;border-radius:50px;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 14px 40px -10px rgba(15,18,60,.5),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s,box-shadow .2s;letter-spacing:-.01em}
.cd-cta:hover{transform:translateY(-2px) scale(1.02)}