/* Pantallas: inicio, reglas, ingreso, home, resultado, ranking, cuenta y canales. */

.hero-title{font-size:2.1rem;line-height:1.06;margin:0 0 10px;color:#fff;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-title .accent-row{display:flex;gap:6px;margin-top:14px}
/* Líneas de colores bajo el título: desactivadas (se usa la etiqueta .sync-pill) */
.accent-row{display:none !important}
.hero-sub{color:rgba(255,255,255,.92);font-size:.95rem;margin-bottom:20px;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.sponsor{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.sponsor small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.sponsor img{height:30px;object-fit:contain}

/* Landing de inicio */
.landing-wrap{min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 4px 30px}
.landing-logo{width:170px;height:170px;margin:0 auto 22px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.45));animation:logoFloat 3.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-11px) rotate(1.2deg)}}
.landing-wrap .btn{max-width:280px;margin-top:22px}

/* Reglas (3 slides) */
/* Reglas: sin card, sobre el degradado, texto blanco centrado */
.rules-shell{display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 150px);padding:8px 4px 24px;width:100%;max-width:460px;margin:0 auto}
.rules-logo{width:104px;height:104px;margin:6px auto 18px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));animation:logoFloat 3.7s ease-in-out infinite;transform-origin:50% 90%}
.rules-viewport{width:100%;overflow:hidden;transition:height .3s ease}
.rules-track{display:flex;align-items:flex-start;width:100%;transition:transform .35s ease;will-change:transform}
.rules-slide{flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;padding:6px 22px;text-align:center;color:#fff}
.rules-slide>*{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.rules-slide .rules-ico{font-size:2.6rem;display:block;margin-bottom:8px}
.rules-slide h2{font-size:1.6rem;color:#fff;margin-bottom:16px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.rules-slide p{font-size:.98rem;color:rgba(255,255,255,.94);margin-bottom:14px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.rules-slide p b{color:#fff}
.rules-badge{display:inline-block;background:rgba(255,255,255,0);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;padding:10px 10px;border-radius:99px;margin:2px 0 0;box-shadow:0 4px 14px rgba(0,0,0,0)}
.rules-cta-line{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;color:var(--lima)!important;margin-top:4px;background:var(--destacar);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rules-list{list-style:none;display:flex;flex-direction:column;gap:11px;text-align:left;max-width:360px;margin:0 auto;padding:0}
.rules-list li{font-size:.9rem;color:rgba(255,255,255,.94);line-height:1.42;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 14px;backdrop-filter:blur(6px)}
.rules-list li b{color:#fff;display:block;margin-bottom:2px}
/* Estado de cada día en "¿Qué toca cada día?" */
.rules-list li.dia-abrir{opacity:.6}
.rules-list li.dia-activo{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.rules-list li.dia-pendiente{border-color:rgba(255,214,107,.7)}
.rules-dots{display:flex;justify-content:center;gap:8px;margin:0 0 18px}
.rules-dots span{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.4);transition:background .2s,width .2s}
.rules-dots span.on{background:#fff;width:24px}
.rules-nav{display:flex;gap:10px;width:100%;padding:0 20px;max-width:420px;margin-top:40px}
.rules-nav .btn{flex:1}
.rules-nav .btn.ghost{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px)}
.me-strip{display:flex;align-items:center;gap:12px;margin-bottom:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:14px 18px;backdrop-filter:blur(8px)}
.me-strip .me-info{min-width:0}
.me-strip .who{font-size:.95rem;font-weight:700;color:#fff;font-family:'Poppins',sans-serif}
.me-strip .team-lbl{font-size:.78rem;color:rgba(255,255,255,.85)}
.me-strip .pts{margin-left:auto;text-align:right}
.me-strip .pts b{font-size:1.3rem;color:#fff;font-family:'Poppins',sans-serif}
.me-strip .pts small{display:block;font-size:.65rem;color:rgba(255,255,255,.8);letter-spacing:.1em;text-transform:uppercase}
.day-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;padding:0 4px}
.day-progress .lbl{font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.04em}
.dots{display:flex;gap:7px}
.dot-q{width:11px;height:11px;border-radius:99px;border:2px solid rgba(255,255,255,.55);background:transparent}
.dot-q.done{background:var(--destacar);border-color:var(--lima)}
.dot-q.now{border-color:#fff;background:rgba(255,255,255,.35)}

.wait-card{text-align:center;padding:34px 22px}
.wait-card .bell{font-size:2.5rem;display:block;margin-bottom:10px}
.wait-card h2{font-size:1.4rem;margin-bottom:8px;color:var(--azul)}
.wait-card p{color:var(--ink-soft);font-size:.92rem}
.pulse{display:inline-block;width:9px;height:9px;border-radius:99px;background:var(--aqua);margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-tag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);display:flex;align-items:center;margin-bottom:10px;font-family:'Poppins',sans-serif}
.fmt-tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:#E9E9FF;color:var(--petroleo);border-radius:99px;padding:5px 12px;margin-bottom:10px}
.fmt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.fmt-head .fmt-tag{margin-bottom:0}
.fmt-pts{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--petroleo);background:#E9E9FF;border-radius:99px;padding:5px 12px;white-space:nowrap;font-family:'Poppins',sans-serif}
.fmt-pts b{font-weight:800}
.inter{text-align:center;padding:28px 20px;animation:fadein .25s}
.inter .mark{width:64px;height:64px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;margin:0 auto 12px;font-family:'Poppins',sans-serif;font-weight:700}
.inter h2{font-size:1.45rem;color:var(--ink)}
.inter .pts-line{font-size:.95rem;margin-top:6px;color:var(--ink-soft)}
.inter .pts-line b{font-family:'Poppins',sans-serif;font-size:1.2rem;color:var(--azul)}
.inter .nextline{font-size:.8rem;color:var(--ink-soft);margin-top:14px}

.result-big{text-align:center;padding:34px 22px}
.result-big .mark{width:74px;height:74px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:2.1rem;color:#fff;margin:0 auto 14px}
.result-big h2{font-size:1.65rem;color:var(--azul)}
.result-big .pts-line{font-size:1rem;margin-top:8px;color:var(--ink-soft)}
.result-big .pts-line b{font-family:'Poppins',sans-serif;font-size:1.3rem;color:var(--azul)}
.notify-box{margin-top:18px;background:#E9E9FF;border:1px solid #C9C9FF;border-radius:14px;padding:14px 16px;font-size:.9rem;font-weight:500;display:flex;gap:10px;align-items:flex-start;text-align:left;color:var(--petroleo)}
.notify-box span{font-size:1.2rem}

.rk-title{font-size:1.5rem;margin-bottom:4px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.rk-sub{font-size:.85rem;color:rgba(255,255,255,.9);margin-bottom:16px}
.race{display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.race-row .head{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;margin-bottom:5px;color:var(--ink)}
.race-row .head .p{font-family:'Poppins',sans-serif;color:var(--azul)}
.race-row .trackline{display:flex;align-items:center;gap:6px}
.race-row .track{flex:1;height:26px;background:#F1F1F5;border-radius:99px;overflow:hidden}
.race-row .fill{height:100%;border-radius:99px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:.85rem;min-width:34px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.race-row .meta-flag{font-size:1.1rem}
.winner-banner{border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.winner-banner h2{font-size:1.55rem}
.winner-banner p{opacity:.92;font-size:.9rem;margin-top:4px}
.confetti{position:absolute;top:-10px;font-size:1.1rem;animation:fall 2.8s linear infinite}
@keyframes fall{to{transform:translateY(150px) rotate(300deg);opacity:0}}
.rk-note{font-size:.75rem;color:rgba(255,255,255,.85);margin-top:14px}
/* Tarjeta con la posición propia, siempre visible sobre el ranking */
.my-pos{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:14px 18px;margin-bottom:14px;backdrop-filter:blur(8px)}
.my-pos .rank-badge{min-width:56px;height:56px;border-radius:16px;background:var(--destacar);color:var(--marino);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.my-pos .rank-badge b{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.4rem}
.my-pos .rank-badge small{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;margin-top:2px;opacity:.8}
.my-pos .who{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:#fff}
.my-pos .sub{font-size:.78rem;color:rgba(255,255,255,.85);margin-top:2px}
.my-pos .pts{margin-left:auto;text-align:right}
.my-pos .pts b{font-family:'Poppins',sans-serif;font-size:1.3rem;color:#fff}
.my-pos .pts small{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.top-list{margin-top:24px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.top-list h3{font-size:1rem;margin-bottom:10px;color:var(--azul)}
.top-row .pos{width:24px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--ink-soft)}
.top-row .dot{width:10px;height:10px;border-radius:99px;flex-shrink:0}
.top-row .nm{flex:1;font-weight:600;color:var(--ink)}
.top-row .pt{font-weight:700;color:var(--azul);font-family:'Poppins',sans-serif}
/* ===== Login: el logo se asoma detrás del cuadro ===== */
.login-title{color:#fff;text-align:center;font-size:clamp(1.5rem,6vw,2rem);line-height:1.1;margin:8px 16px 0;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.login-stage{position:relative;padding-top:0;margin-top:96px}
.login-stage .card{position:relative;z-index:2}
/* ===== Pantalla Cuenta (dispositivos conectados) ===== */
#scr-cuenta .stat-grid{margin-bottom:4px}
#scr-cuenta .stat b{font-size:1.9rem}
.dev-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.dev-row:last-child{border-bottom:none}
.dev-ico{font-size:1.5rem;width:30px;text-align:center;flex-shrink:0}
.dev-name{font-weight:700;color:var(--ink);font-size:.92rem}
.dev-sub{font-size:.75rem;color:var(--ink-soft);margin-top:1px}
.dev-tag{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#E9E9FF;color:var(--petroleo);border-radius:99px;padding:4px 10px;white-space:nowrap}
.cuenta-tip{margin-top:14px;background:#fff;border:none;box-shadow:var(--shadow)}
.cuenta-tip b{color:var(--azul)}
#scr-cuenta .btn{margin-top:12px}
.cuenta-foot{font-size:.8rem;color:rgba(255,255,255,.85);line-height:1.45;margin-top:14px;text-align:center}
/* ===== Pantalla Hablemos (contacto Sync) ===== */
#scr-canales{padding:8px 18px 100px;overflow-y:auto}
.canales-shell{max-width:440px;margin:0 auto;text-align:center}
.chat-anim{width:120px;height:120px;margin:10px auto 6px;filter:drop-shadow(0 10px 22px rgba(96,233,109,.35))}
.chat-anim svg{width:100%;height:100%;display:block;animation:chatFloat 3s ease-in-out infinite}
@keyframes chatFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.05)}}
.chat-dots circle{animation:chatDot 1.2s ease-in-out infinite}
.chat-dots circle:nth-child(2){animation-delay:.15s}.chat-dots circle:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-6px);opacity:1}}
.chat-dots{transform-box:fill-box}
.canales-title{color:#fff;font-size:clamp(1.4rem,5.6vw,1.85rem);line-height:1.12;margin-bottom:10px}
.canales-lead{color:rgba(255,255,255,.9);font-size:.98rem;line-height:1.5;margin-bottom:22px}
.canales-lead b{color:var(--amarillo)}
.canales-card{background:rgba(255,255,255,.07);border:1px solid rgba(96,233,109,.45);border-radius:20px;padding:20px 16px;backdrop-filter:blur(6px);box-shadow:0 10px 34px rgba(0,0,0,.35)}
.canales-card-tag{display:inline-block;background:var(--destacar);color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.canales-line{display:flex;align-items:center;gap:14px;text-align:left;width:100%;margin:10px 0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:background .15s,transform .12s}
.canales-line:active{background:rgba(96,233,109,.25);transform:scale(.99)}
.canales-line-ico{font-size:1.6rem;line-height:1;flex-shrink:0}
.canales-line-txt{display:flex;flex-direction:column;line-height:1.25}
.canales-line-txt small{font-size:.74rem;color:rgba(255,255,255,.7);font-weight:500}
.canales-line-txt b{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:700;letter-spacing:.01em}
.canales-foot{color:rgba(255,255,255,.7);font-size:.85rem;line-height:1.45;margin-top:20px;font-style:italic}

/* ===== Mis respuestas (historial) ===== */
.hist-entry{margin:0 0 14px}
.hist-item{margin-bottom:12px;padding:18px}
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.hist-head .fmt-tag{margin-bottom:0}
.hist-pts{font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;color:var(--azul);white-space:nowrap}
.hist-q{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;line-height:1.35;color:var(--ink);margin-bottom:8px}
.hist-tu{font-size:.88rem;color:var(--ink-soft)}
.hist-tu b{color:var(--ink)}
.hist-ok{margin-top:10px;font-weight:700;font-size:.9rem;color:#1B7A4B}
.hist-dato{margin-top:10px;background:#EEEEFF;border-radius:12px;padding:10px 13px}
.hist-dato .lbl{display:block;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--azul);opacity:.8;margin-bottom:2px}
.hist-dato .val{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;line-height:1.35;color:var(--azul)}
.hist-nota{font-size:.78rem;color:var(--ink-soft);margin-top:8px}
.hist-cartas{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
.hist-cartas li{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.hist-cartas li.repasar{background:#F5F8FD}
.hist-cartas p{font-size:.88rem;line-height:1.35;color:var(--ink);margin-bottom:4px}
.hist-cartas small{display:block;font-size:.76rem;color:var(--ink-soft)}
.hist-cartas .hist-correcta{color:var(--azul);margin-top:2px}

/* ===== Resumen final y centro de cierre ===== */
.hist-pts.pend{opacity:.6}
.hist-resumen{margin-bottom:14px;padding:18px}
.hist-resumen-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hist-resumen .bex-inter-img{width:70px;height:70px;flex-shrink:0}
.hist-resumen .bocadillo{position:relative;background:#EEEEFF;border-radius:16px;padding:12px 14px;font-weight:600;font-size:.92rem;line-height:1.4;color:var(--azul)}
.hist-resumen .bocadillo::before{content:"";position:absolute;left:-7px;top:22px;border:8px solid transparent;border-right-color:#EEEEFF;border-left:0}
.final-hub{text-align:center}
.final-hub .live-tag{display:inline-flex;margin:4px auto 10px}
.hub-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btn.juego-extra{background:var(--destacar);color:var(--marino)}
.hub-desc{margin-top:-2px;text-align:center}

/* ===== Etiqueta inclinada estilo Sync ("Agencia de comunicaciones") ===== */
.sync-pill{display:inline-block;background:var(--lima);color:#000;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:1.05rem;line-height:1;padding:7px 16px 8px;border-radius:99px;transform:rotate(-3deg);margin:0 auto 18px;box-shadow:0 6px 18px rgba(96,233,109,.25)}
.sync-pill:empty{display:none}
.hero-title .hl{color:var(--lima)}
.landing-brand{height:26px;margin:0 auto 26px;display:block;opacity:.95}