/* Vitrina: el estilo del afiche azul del simulacro (foco de luz, rayos suaves y puntos). */
.tricolor { height: 6px; background: linear-gradient(90deg, #FCD116 0 50%, #003893 50% 75%, #CE1126 75%); }
.barra { border-bottom: 0; }
.vitrina { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(ellipse 75% 70% at 72% 45%, #4A62D6 0%, #3248B4 40%, #2A3A9E 72%, #22318A 100%); }
.vitrina::before { content: ""; position: absolute; z-index: -1; left: 72%; top: 45%; width: 1800px; height: 1800px; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 48%); mask: radial-gradient(circle, #000 0 18%, transparent 48%); }
.vitrina::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.6px, transparent 2.2px); background-size: 26px 26px; }
.vitrina .eyebrow { color: #FFC530; }
.pildora { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 6px; border-radius: 999px; background: #FFC530; color: #11173F; font-size: 13px; font-weight: 800; letter-spacing: .08em; box-shadow: 0 4px 0 #C98A00; }
.pildora-venta { background: #E8702A; color: #11173F; box-shadow: 0 4px 0 #A9471A; }

/* Entrada */
.entrada { padding-block: 0; }
.entrada .vitrina { padding-block: clamp(30px, 5vw, 64px) clamp(36px, 5vw, 72px); }
.entrada-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.entrada .titulo-grande { color: #FFFFFF; font-size: clamp(36px, 5vw, 62px); text-shadow: 0 4px 0 rgba(7, 10, 34, .35); }
.entrada .titulo-grande span { color: #FFC530; }
.entrada .bajada { color: #DDE2FA; }
.pildoras { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.entrada .form-clave { margin-top: 26px; max-width: 520px; background: #FFFFFF; color: #141A3A; border: 0; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
.entrada .form-clave .campo input { background: #F5F6FB; border-color: #C7CCE2; color: #141A3A; }
.entrada .form-clave .campo input:focus { border-color: #3A4FB8; }
.entrada .form-clave .ayuda, .entrada .form-clave .campo-clave input::placeholder { color: #4A5275; }
.entrada .form-clave .btn-solido { background: #3A4FB8; color: #FFFFFF; }
.entrada .form-clave .btn-solido:hover { background: #2E3F99; }
.entrada .form-clave .aviso { color: #141A3A; }
:root[data-theme="dark"] .entrada .form-clave { background: #1A1E2E; color: #F1F3F9; }
:root[data-theme="dark"] .entrada .form-clave .campo input { background: #111421; border-color: #363D56; color: #F1F3F9; }
:root[data-theme="dark"] .entrada .form-clave .ayuda, :root[data-theme="dark"] .entrada .form-clave .campo-clave input::placeholder { color: #BAC0D4; }
:root[data-theme="dark"] .entrada .form-clave .aviso { color: #F1F3F9; }
:root[data-theme="dark"] .entrada .form-clave .btn-solido { background: #A9B7FF; color: #111421; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entrada .form-clave { background: #1A1E2E; color: #F1F3F9; }
  :root:not([data-theme="light"]) .entrada .form-clave .campo input { background: #111421; border-color: #363D56; color: #F1F3F9; }
  :root:not([data-theme="light"]) .entrada .form-clave .ayuda, :root:not([data-theme="light"]) .entrada .form-clave .campo-clave input::placeholder { color: #BAC0D4; }
  :root:not([data-theme="light"]) .entrada .form-clave .aviso { color: #F1F3F9; }
  :root:not([data-theme="light"]) .entrada .form-clave .btn-solido { background: #A9B7FF; color: #111421; }
}

/* Maqueta del examen en un celular: dibujada con código, no es una imagen generada. */
.maqueta { position: relative; height: 560px; max-width: 480px; margin-inline: auto; width: 100%; }
.maqueta .luz { position: absolute; left: 6%; right: 6%; top: 18%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 90, .42), transparent); filter: blur(8px); }
.celular { position: absolute; left: 60%; top: 20px; width: 260px; height: 520px; transform: translateX(-50%) rotate(-4deg); border-radius: 38px; padding: 12px; background: #0B0F2E;
  box-shadow: 0 0 0 3px #3A4FB8, 0 30px 60px rgba(0, 0, 0, .55); }
.pantalla-cel { height: 100%; border-radius: 28px; overflow: hidden; background: #F5F6FB; color: #141A3A; display: flex; flex-direction: column; }
.cel-nav { background: #11173F; color: #FFFFFF; padding: 16px 16px 10px; font-size: 13px; font-weight: 800; }
.cel-nav small { display: block; font-size: 13px; font-weight: 600; color: #FFC530; }
.cel-prog { height: 5px; background: #E0E3F0; }
.cel-prog span { display: block; width: 38%; height: 100%; background: #FFC530; }
.cel-cuerpo { padding: 14px 14px 0; display: grid; gap: 8px; }
.cel-comp { font-size: 13px; font-weight: 700; color: #3A4FB8; }
.cel-lineas { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E0E3F0; }
.cel-lineas i { display: block; height: 7px; border-radius: 4px; background: #D9DDEE; }
.cel-op { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E0E3F0; }
.cel-op b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C7CCE2; font-size: 13px; color: #3A4FB8; flex: none; }
.cel-op i { flex: 1; height: 7px; border-radius: 4px; background: #D9DDEE; }
.cel-op.marcada { border: 2px solid #3A4FB8; background: #EEF0FB; }
.cel-op.marcada b { background: #3A4FB8; border-color: #3A4FB8; color: #FFFFFF; }
.cel-boton { margin: 6px 14px 0; padding: 10px; border-radius: 10px; background: #3A4FB8; color: #FFFFFF; text-align: center; font-size: 13px; font-weight: 800; }
.ficha-resultado { position: absolute; right: 0; bottom: 56px; z-index: 3; width: 172px; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; color: #141A3A; transform: rotate(5deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.ficha-resultado small { display: block; font-size: 13px; font-weight: 700; color: #4A5275; }
.ficha-resultado strong { display: block; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #3A4FB8; margin-top: 4px; }
.ficha-resultado strong span { font-size: 18px; color: #4A5275; letter-spacing: 0; }
.ficha-resultado em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: #166B42; margin-top: 6px; }
.sello140 { position: absolute; left: 0; top: 64px; z-index: 3; width: 150px; height: 150px; transform: rotate(-10deg); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.sello140 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello140 .disco { position: absolute; inset: 13%; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #FFFFFF;
  background: radial-gradient(circle at 35% 28%, #FF6B6B, #D7263D 62%, #A3162B); }
.sello140 .disco::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .75); }
.sello140 b { display: block; font-size: 46px; line-height: .9; font-weight: 800; letter-spacing: -.03em; }
.sello140 i { display: block; font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .08em; margin-top: 2px; }
.ico3d { position: absolute; z-index: 2; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }

/* Pasos y llamado con la foto */
.debajo { padding-block: clamp(32px, 5vw, 60px) 10px; }
.debajo .pasos { margin-top: 0; }
.llamado { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 28px; padding: 18px 26px 0 0;
  border-radius: 24px; background: linear-gradient(120deg, #22318A, #3248B4); color: #FFFFFF; overflow: hidden; }
.llamado img { width: 158px; height: auto; max-width: none; margin: 0 0 0 6px; align-self: end; display: block; }
.llamado > div { padding-bottom: 18px; }
.llamado > .btn { margin-bottom: 18px; }
.llamado h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; }
.llamado p { color: #DDE2FA; margin-top: 8px; font-size: 15.5px; }
.llamado .pildora { margin-bottom: 10px; }
.llamado .btn { white-space: nowrap; }
.debajo .gratis { margin-top: 18px; text-align: center; }

/* Cabeceras en vitrina del tablero y del resultado */
.tablero, .resultado { padding-block: 0 clamp(28px, 5vw, 56px); }
.cabecera-vitrina { padding-block: clamp(26px, 4vw, 44px); }
.cabecera-vitrina .saludo, .cabecera-vitrina h1 { color: #FFFFFF; }
.cabecera-vitrina .cargo, .cabecera-vitrina .resultado-sub { color: #DDE2FA; }
.cabecera-vitrina .marcador { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; }
.cabecera-vitrina .marcador h2, .cabecera-vitrina .marcador p, .cabecera-vitrina .marcador .cifra small { color: #DDE2FA; }
.cabecera-vitrina .marcador .cifra { color: #FFC530; }
.cabecera-vitrina .retro-lista { background: #FFFFFF; color: #141A3A; border-left-color: #FFC530; }
.cabecera-vitrina .retro-lista p { color: #4A5275; }

@media (max-width: 900px) {
  .entrada-grid { grid-template-columns: minmax(0, 1fr); }
  .maqueta { height: 470px; transform: scale(.9); transform-origin: top center; margin-top: 10px; }
  .llamado { grid-template-columns: 124px minmax(0, 1fr); padding-right: 20px; }
  .llamado img { width: 128px; }
  .llamado .btn { grid-column: 1 / -1; margin: 0 20px 18px; white-space: normal; }
}
@media (max-width: 680px) {
  .entrada .form-clave { padding: 22px 18px; }
  .maqueta { display: none; }
  .llamado { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 16px 16px 0 0; }
  .llamado img { width: 104px; margin-left: 2px; }
  .llamado .btn { margin: 0 16px 16px; width: auto; }
}