*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,sans-serif;background:#10111a;color:#f8f0e5}.screen{display:none}.screen.active{display:block}.app-shell{min-height:100svh}.hero{position:relative;min-height:100svh;overflow:hidden;display:none;align-items:flex-end;padding:20px}.hero.active{display:flex}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.03) contrast(1.02)}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,20,.12),rgba(12,12,20,.78) 52%,#10111a 100%)}.hero-card{position:relative;width:100%;max-width:680px;margin:0 auto 8px;padding:26px 22px;border:1px solid rgba(255,255,255,.18);border-radius:30px;background:rgba(17,17,28,.72);backdrop-filter:blur(14px);box-shadow:0 18px 55px rgba(0,0,0,.45)}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:#f3c777;font-weight:800}.kicker.dark{color:#a77528}.hero h1{font-size:clamp(38px,12vw,72px);line-height:.9;margin:10px 0 18px;letter-spacing:-.06em}.welcomeText{font-size:15px;line-height:1.6;color:#fff4df}.welcomeText p{margin:0 0 12px}.main{padding:16px;max-width:840px;margin:0 auto}.topbar{position:sticky;top:0;z-index:10;margin:-16px -16px 14px;padding:14px 16px;background:rgba(246,238,225,.94);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;color:#1b1721;border-bottom:1px solid rgba(0,0,0,.06)}h2{margin:2px 0 0;font-size:24px;letter-spacing:-.04em}h3{margin:0 0 8px;font-size:21px;letter-spacing:-.03em}.card{background:#f7efe4;color:#201b24;border-radius:26px;padding:18px;margin:0 0 16px;border:1px solid rgba(120,82,33,.16);box-shadow:0 14px 45px rgba(0,0,0,.18)}.sectionHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}.pill{font-size:12px;font-weight:800;padding:7px 10px;border-radius:999px;background:#1f1b2a;color:#f7dca2;white-space:nowrap}.small{font-size:13px;color:#685f65;line-height:1.45}.identify.success{outline:2px solid #338f65}.primary,.ghost{border:0;border-radius:999px;padding:13px 18px;font:800 14px Montserrat;cursor:pointer;text-decoration:none;display:inline-block}.primary{background:linear-gradient(135deg,#f2c15f,#d98f2f);color:#211409;box-shadow:0 10px 22px rgba(157,90,20,.28)}.primary:disabled{opacity:.45;cursor:not-allowed}.primary.big{width:100%;font-size:16px;padding:16px 20px;margin-top:10px}.ghost{background:rgba(32,27,36,.08);color:#2b2430}.ghost.full{width:100%;margin-top:14px}select,input{width:100%;border:1px solid rgba(42,35,45,.16);background:#fffaf2;color:#1f1b2a;border-radius:16px;padding:14px 13px;font:600 15px Montserrat;outline:none}select:focus,input:focus{border-color:#d18b2b;box-shadow:0 0 0 4px rgba(209,139,43,.13)}.challenge{padding:14px 14px;border-radius:18px;background:#fff9ed;border:1px solid rgba(209,139,43,.2);margin-bottom:10px;line-height:1.35}.challenge b{color:#a36317}.peopleGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.person{background:#fffaf2;border:1px solid rgba(42,35,45,.10);border-radius:22px;padding:12px;text-align:center;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-shadow:0 8px 22px rgba(65,42,19,.08)}.avatar{width:112px;height:112px;border-radius:28px;object-fit:cover;object-position:center;display:block;margin-bottom:10px;background:#ead8c1;border:3px solid #f1d59a;box-shadow:0 8px 16px rgba(0,0,0,.14)}.personName{font-weight:800;font-size:13px;line-height:1.18;color:#1d1721}.alias{margin-top:5px;font-size:11px;font-weight:800;color:#9b631e;text-transform:uppercase;line-height:1.2}.answerRow{margin-bottom:13px}.answerRow label{display:block;font-size:13px;line-height:1.35;margin-bottom:7px;font-weight:800;color:#4b3d45}.notice{padding:13px;border-radius:16px;margin-top:12px;font-size:14px;line-height:1.4}.notice.hidden{display:none}.successMsg{background:#e9f8ed;color:#145b31}.errorMsg{background:#ffe9e9;color:#8d1d1d}.warnMsg{background:#fff2d7;color:#8d5611}@media (min-width:620px){.peopleGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar{width:128px;height:128px}.person{min-height:210px}.hero{align-items:center}.hero-card{margin:auto}}
.welcome-clean{
background:#f5f1ea;
min-height:100vh;
display:flex;
justify-content:center;
padding:24px 16px 40px;
}
.welcome-wrap{
width:100%;
max-width:680px;
display:flex;
flex-direction:column;
gap:24px;
}
.welcome-image-card{
background:#fff;
border:2px solid #d8c3a0;
border-radius:26px;
padding:14px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.welcome-image{
width:100%;
display:block;
border-radius:18px;
}
.welcomeText.clean{
background:#fff;
border-radius:24px;
padding:28px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
font-size:1.12rem;
line-height:1.7;
color:#1b1b1b;
}
.welcomeText.clean p{
margin:0 0 22px;
}
@media(max-width:768px){
.welcome-clean{
padding:12px 10px 32px;
}
.welcome-image-card{
padding:10px;
border-radius:22px;
}
.welcomeText.clean{
padding:22px;
font-size:1.02rem;
line-height:1.65;
}
.primary.big{
font-size:1.3rem;
padding:20px 28px;
border-radius:999px;
}
}

.welcome-title-block{
  width:100%;
  text-align:center;
  color:#171726;
  margin:-8px 0 -2px;
}
.welcome-names{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(2.05rem, 7vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:#141827;
}
.welcome-anniversary{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(2.15rem, 9vw, 4.4rem);
  line-height:1;
  letter-spacing:.035em;
  color:#b38332;
  text-transform:uppercase;
  margin:8px 0 6px;
}
.welcome-separator{
  height:2px;
  background:#b38332;
  width:94%;
  margin:12px auto 8px;
  opacity:.85;
}
.welcome-separator.strong{
  height:4px;
  margin:8px auto 0;
}
@media(max-width:768px){
  .welcome-wrap{gap:18px;}
  .welcome-title-block{margin:-4px 0 -2px;}
  .welcome-names{font-size:clamp(2rem, 8vw, 2.8rem);}
  .welcome-anniversary{font-size:clamp(2.05rem, 10vw, 3.25rem); letter-spacing:.025em;}
  .welcome-separator{width:96%; margin:10px auto 6px;}
}

/* FIX navegación portada/juego: la portada tenía display:flex aunque no estuviera activa */
.screen:not(.active){display:none !important;}
.welcome-clean.active{display:flex !important;}
.tableWrap{overflow-x:auto;margin-top:14px}.resultsTable{width:100%;border-collapse:collapse;font-size:13px}.resultsTable th,.resultsTable td{padding:10px;border-bottom:1px solid rgba(40,25,20,.12);text-align:left;vertical-align:top}.resultsTable th{background:#fff6e9;color:#2a1c2b;font-weight:800}.resultsTable .okRow{background:#e9fff1}.hidden{display:none!important}

/* Galería de Curiosidades */
.revealNotice{border:2px solid rgba(179,131,50,.35);background:linear-gradient(180deg,#fff7e8,#f7efe4)}
.pill.gold{background:#b38332;color:#fff8e8}
.secretsSection{background:#fff6e9}
.secretsGrid .person{min-height:250px;justify-content:flex-start}
.secretText{margin-top:10px;padding:10px 9px;border-radius:14px;background:#fff1d2;color:#4a3214;font-size:12px;font-weight:700;line-height:1.35;width:100%;border:1px solid rgba(179,131,50,.22)}
.secretBadge{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#b38332;margin-top:8px}
@media(max-width:768px){.secretsGrid .person{min-height:235px}.secretText{font-size:11.5px}}


/* Botón / tarjeta de revelación de curiosidades */
.secretRevealBox{
  margin: 18px auto 0;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,246,224,.98), rgba(255,255,255,.96));
  border: 1.5px solid rgba(198,145,48,.35);
  box-shadow: 0 16px 34px rgba(26,18,10,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 680px;
}
.secretRevealKicker{
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #b47a20;
  font-weight: 900;
  margin-bottom: 4px;
}
.secretRevealTitle{
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.12;
  font-weight: 900;
  color: #15111d;
}
.secretRevealSub{
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(21,17,29,.68);
  font-weight: 600;
}
.secretRevealCta{
  flex: 0 0 auto;
  text-decoration: none;
  color: #15111d;
  font-weight: 900;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd76a, #e99b22);
  box-shadow: 0 10px 22px rgba(220,145,28,.35);
  border: 1px solid rgba(127,80,8,.18);
}
.secretRevealCta:active{
  transform: translateY(1px);
}
@media (max-width: 640px){
  .secretRevealBox{
    margin: 16px 12px 0;
    padding: 15px;
    border-radius: 22px;
    align-items: stretch;
    flex-direction: column;
  }
  .secretRevealCta{
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 18px;
  }
}


/* Datos curiosos anónimos */
.anonymousSecretsCard{
  background: rgba(255,250,241,.98);
  border: 1px solid rgba(198,145,48,.20);
}
.anonymousSecretsList{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.anonymousSecretItem{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(42,31,20,.08);
  box-shadow: 0 8px 20px rgba(28,20,12,.05);
  font-weight: 700;
  line-height: 1.28;
  color: #2a2230;
}
.anonymousSecretNumber{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd76a, #e99b22);
  color: #17111c;
  font-weight: 900;
  font-size: 13px;
}
@media (max-width:640px){
  .anonymousSecretItem{
    grid-template-columns: 30px 1fr;
    padding: 11px;
    border-radius: 16px;
    font-size: 14px;
  }
  .anonymousSecretNumber{
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}


/* Corrección final: curiosidades bajo avatares y sin numeración */
.anonymousSecretsCard{
  margin-top: 22px;
}
.anonymousSecretsList{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.anonymousSecretItem{
  display: block !important;
  grid-template-columns: none !important;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(42,31,20,.08);
  box-shadow: 0 8px 20px rgba(28,20,12,.05);
  font-weight: 700;
  line-height: 1.34;
  color: #2a2230;
}
.anonymousSecretNumber{
  display: none !important;
}


/* Evita accesos duplicados heredados a la revelación */
#secretRevealBtn,
.curiosidadesRevealBtn_removed{
  display:none !important;
}

/* Acceso fijo móvil-seguro a galería */
#curiosidadesRevealBtn{
  margin: 18px auto;
}

/* Curiosidades anónimas persistentes */
.anonymousSecretsCard{
  margin-top: 22px;
  background: rgba(255,250,241,.98);
  border: 1px solid rgba(198,145,48,.20);
}
.anonymousSecretsList{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.anonymousSecretItem{
  display: block !important;
  grid-template-columns: none !important;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(42,31,20,.08);
  box-shadow: 0 8px 20px rgba(28,20,12,.05);
  font-weight: 700;
  line-height: 1.34;
  color: #2a2230;
}
.anonymousSecretNumber{
  display: none !important;
}


/* Aviso visual cuando se desbloquea la galería sin recargar */
.revealJustUnlocked{
  animation: revealPulse 1.2s ease-out 2;
}
@keyframes revealPulse{
  0%{ transform: scale(.98); box-shadow: 0 0 0 rgba(233,155,34,0); }
  50%{ transform: scale(1.015); box-shadow: 0 18px 44px rgba(233,155,34,.32); }
  100%{ transform: scale(1); }
}

/* Revelación definitiva segura */
#curiosidadesRevealBtn {
  margin: 18px auto;
}
.revealJustUnlocked{
  animation: revealPulse 1.2s ease-out 2;
}
@keyframes revealPulse{
  0%{ transform: scale(.98); box-shadow: 0 0 0 rgba(233,155,34,0); }
  50%{ transform: scale(1.015); box-shadow: 0 18px 44px rgba(233,155,34,.32); }
  100%{ transform: scale(1); }
}

/* Juego extra: casar curiosidades */
.curiosityMatchCard{
  margin-top: 22px;
  background: rgba(255,250,241,.98);
  border: 1px solid rgba(198,145,48,.22);
}
.matchBox{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.matchBox label{
  font-weight: 900;
  color: #20172a;
  font-size: 14px;
}
.matchBox select{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(42,31,20,.18);
  padding: 13px 12px;
  font-size: 15px;
  background: #fff;
  color: #20172a;
}
.secondaryBtn{
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff1b8, #e9a52e);
  color: #17111c;
  box-shadow: 0 10px 22px rgba(220,145,28,.22);
}
.matchResult{
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.matchResult.successMsg{
  background: rgba(218,246,226,.95);
  color: #195c2b;
  border: 1px solid rgba(34,139,67,.22);
}
.matchResult.errorMsg{
  background: rgba(255,230,230,.95);
  color: #8a1f1f;
  border: 1px solid rgba(180,45,45,.18);
}
.matchResult.warnMsg{
  background: rgba(255,246,210,.96);
  color: #6d4b00;
  border: 1px solid rgba(198,145,48,.24);
}
.matchResult.hidden{
  display: none;
}
@media (max-width:640px){
  .matchBox select{
    font-size: 14px;
  }
}