/* Club Tinista (teléfono): misma paleta que la trivia de la tablet. Pensado para 15–30 años: rápido, vistoso y para compartir. */
:root { --rosa: #FF5FAE; --fucsia: #E8368F; --lila: #A98BFF; --oro: #E3C77E; --cielo: #6EC1E8; --noche: #0D0618; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--noche); }
body { min-height: 100svh; color: #fff; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 60% at 50% 0, #2a0f4d, #1B0B33 45%, var(--noche)) fixed; padding: 18px 18px 40px; }
button, a { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; text-decoration: none; }

.marca { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; }
.marca img { width: 30px; height: 30px; } .marca span { font-family: Sora; font-weight: 300; font-size: 17px; letter-spacing: .4em; margin-right: -.4em; }
.marca i { font-style: normal; color: var(--oro); font-family: Sora; font-weight: 300; margin: 0 2px; }
.marca img.ali { width: auto; height: 18px; } .marca img.ali.cuad { height: 26px; }

.vista { display: none; max-width: 520px; margin: 0 auto; animation: entra .4s; }
.vista.activa { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chip { display: inline-block; font-family: Sora; font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--cielo); padding: 7px 14px; border: 1px solid rgba(110,193,232,.45); border-radius: 99px; }
h1 { margin-top: 14px; font-family: Sora; font-weight: 800; font-size: 34px; line-height: 1.1; }
h1 b, h2 b { color: var(--rosa); }
h2 { margin-top: 14px; font-family: Sora; font-weight: 700; font-size: 26px; line-height: 1.2; }
.lead { margin: 10px 0 18px; color: rgba(255,255,255,.8); font-size: 16px; }
.tarjeta { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; margin-bottom: 12px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); transition: transform .2s; }
.tarjeta:active { transform: scale(.98); }
.tarjeta .emo { font-size: 36px; width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 18px; background: rgba(255,95,174,.18); }
.tarjeta.era .emo { background: rgba(169,139,255,.2); } .tarjeta.rev .emo { background: rgba(227,199,126,.2); }
.tarjeta.mar { background: linear-gradient(135deg, rgba(255,95,174,.28), rgba(169,139,255,.18)); border-color: rgba(255,95,174,.6); }
.tarjeta b { display: block; font-family: Sora; font-size: 18px; }
.tarjeta small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.78); }
.seguir { margin-top: 22px; display: grid; gap: 9px; }
.seguir p { font-size: 14px; color: rgba(255,255,255,.75); }
.seguir a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-weight: 800; font-size: 17px; }
.seguir a img { width: 28px; height: 28px; object-fit: contain; } .seguir a img.ancho { width: 56px; }
.seguir a small { margin-left: auto; color: #FF8CC6; font-weight: 700; font-size: 14px; }
footer { margin-top: 26px; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; }
footer b { color: var(--oro); }

.atras { font-size: 15px; color: rgba(255,255,255,.65); padding: 6px 0; }
.pasos { margin: 16px 0; padding-left: 22px; line-height: 1.5; font-size: 16px; color: rgba(255,255,255,.85); }
.pasos li { margin-bottom: 8px; } .pasos b { color: #fff; }
.zonas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zonas button { padding: 16px 8px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); font-weight: 800; font-size: 15px; }
.zonas button.si { background: rgba(255,95,174,.25); border-color: var(--rosa); }
.grande { display: block; width: 100%; margin-top: 18px; padding: 18px; border-radius: 99px; text-align: center; font-family: Sora; font-weight: 800; font-size: 18px;
  background: linear-gradient(135deg, #ff7cbf, var(--fucsia) 55%, #b12ad8); box-shadow: 0 14px 40px rgba(232,54,143,.45); }
.grande:disabled { opacity: .35; box-shadow: none; }
.grande.sec { background: rgba(255,255,255,.1); box-shadow: none; border: 1px solid rgba(255,255,255,.25); font-size: 16px; }
.nota { margin-top: 12px; text-align: center; font-size: 13px; color: rgba(255,255,255,.6); }
.nota b { color: var(--oro); }

/* Mar de corazones en vivo: pantalla completa, solo el corazón */
.mar-vivo { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; overflow: hidden; }
.corazon { width: 78vmin; height: auto; will-change: transform, opacity; }
.corazon path { fill: var(--c, #FF5FAE); }
.mar-txt { position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; font-family: Sora; font-weight: 700; font-size: 18px; color: rgba(255,255,255,.7); }
.cerrar { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 20px; }

/* Preguntas (era y revancha) */
.ops { margin-top: 18px; display: grid; gap: 10px; }
.ops button { width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); font-weight: 800; font-size: 17px; transition: transform .15s, background .2s; }
.ops button:active { transform: scale(.98); }
.ops button.bien { background: rgba(62,230,168,.25); border-color: #3EE6A8; }
.ops button.mal { background: rgba(255,92,108,.22); border-color: #FF5C6C; }
.barra { margin-top: 10px; height: 8px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--rosa), var(--lila)); transform-origin: left; }
.dato { margin-top: 14px; min-height: 40px; font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.4; }
.dato b { color: var(--rosa); }
#res-img { display: block; width: 100%; max-width: 360px; margin: 10px auto 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(255,95,174,.35); }