/* Worklab School · páginas públicas (portada, entrar, precios, verificar, prueba).
   «La Plantilla, en escena»: foto de plantilla, cada persona es un punto, signo 3 × 3 como progreso.
   Marca 3.3: blanco, índigo y un verde (solo en el punto final). Guías = punto #2BD4A4 junto a una palabra.
   Prefijo gws-: solo estas páginas. */

:root{
  --gws-indigo:#2B3A67; --gws-indigo-2:#3A4A8C; --gws-indigo-suelo:#24315A;
  --gws-sobre-1:#FFFFFF; --gws-sobre-2:#DDE2F5; --gws-sobre-3:#C3CBE6;
  --gws-apagado:#4B5A8C; --gws-guias:#2BD4A4; --gws-verde:#8FAF2E;
  --gws-banda:#F3F4F9; --gws-filete:#E1E4EC; --gws-tarjeta:#FFFFFF;
  --gws-curva:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gws-indigo:#1B2547; --gws-indigo-2:#24305A; --gws-indigo-suelo:#141B36;
    --gws-apagado:#3A4675; --gws-verde:#A6C63F;
    --gws-banda:#141B33; --gws-filete:#2A3352; --gws-tarjeta:#19213D;
  }
}
:root[data-theme="dark"]{
  --gws-indigo:#1B2547; --gws-indigo-2:#24305A; --gws-indigo-suelo:#141B36;
  --gws-apagado:#3A4675; --gws-verde:#A6C63F;
  --gws-banda:#141B33; --gws-filete:#2A3352; --gws-tarjeta:#19213D;
}

/* ---------- Rótulos y piezas pequeñas ---------- */
.gws-rotulo{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--indigo); margin:0}
.gws-rotulo::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--gws-guias); flex:none}
.gws-escena .gws-rotulo,.gws-cifras .gws-rotulo,.gws-cab .gws-rotulo{color:var(--gws-sobre-2)}
.gws-punto{color:var(--gws-verde)}
.gws-boton{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px;
  border-radius:999px; font:inherit; font-size:16px; font-weight:700; text-decoration:none; border:1px solid transparent;
  transition:transform 160ms var(--gws-curva), background 160ms var(--gws-curva)}
.gws-boton:active{transform:translateY(1px)}
.gws-boton:focus-visible{outline:3px solid var(--gws-guias); outline-offset:3px}
.gws-boton-claro{background:#FFFFFF; color:#2B3A67}
.gws-boton-claro:hover{background:#E9ECF6}
.gws-boton-linea{color:#FFFFFF; border-color:rgba(255,255,255,.45)}
.gws-boton-linea:hover{border-color:#FFFFFF; background:rgba(255,255,255,.06)}
.gws-boton-indigo{background:#2B3A67; color:#FFFFFF}
.gws-boton-indigo:hover{background:#22305A}

/* ---------- Escena de portada: banda índigo a sangre con la foto de plantilla ---------- */
.gws-escena{position:relative; overflow:hidden; background:var(--gws-indigo); color:var(--gws-sobre-1); padding:56px 0 0}
.gws-escena::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 1.6px, transparent 2px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%); mask-image:linear-gradient(180deg,#000 0%,transparent 70%)}
.gws-escena .wrap{position:relative}
.gws-titular{font-size:clamp(40px,5.6vw,80px); line-height:.94; font-weight:800; letter-spacing:-.045em; color:#FFFFFF;
  margin:18px 0 0; max-width:11ch; text-wrap:balance}
.gws-promesa{font-size:clamp(18px,1.9vw,22px); line-height:1.45; color:var(--gws-sobre-2); max-width:44ch; margin:20px 0 0}
.gws-acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; align-items:center}
.gws-sello{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--gws-sobre-3); margin:18px 0 0}

/* La foto: una fila de personajes de pie sobre el suelo, de distintas alturas y oficios */
.gws-foto{position:relative; margin-top:20px; display:flex; justify-content:center; align-items:flex-end;
  padding:0 max(12px,2vw)}
.gws-foto::after{content:''; position:absolute; left:0; right:0; bottom:0; height:44px; background:var(--gws-indigo-suelo); z-index:0}
.gws-persona{position:relative; z-index:1; flex:0 0 auto; width:clamp(92px,9.6vw,150px); margin:0 calc(clamp(92px,9.6vw,150px) * -.2);
  aspect-ratio:300/525; margin-bottom:-2px}
.gws-persona img{display:block; width:100%; height:auto}
.gws-persona:nth-child(even){transform:translateY(-6px)}
.gws-persona.gws-atras{z-index:0; width:clamp(84px,8.6vw,134px); filter:saturate(.9)}
.gws-pie-foto{position:relative; z-index:2; background:var(--gws-indigo-suelo); padding:16px 0 22px}
.gws-pie-foto .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.gws-pie-foto p{margin:0; font-size:14px; color:var(--gws-sobre-2)}
.gws-pie-foto b{color:#FFFFFF}

/* Cada persona es un punto */
.gws-puntos{display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0}
.gws-puntos li{width:11px; height:11px; border-radius:50%; background:var(--gws-apagado);
  transition:background 320ms var(--gws-curva), transform 320ms var(--gws-curva)}
.gws-puntos li.gws-on{background:#C3CBE6}
.gws-puntos li.gws-fin{background:var(--gws-verde)}

/* ---------- Secciones de la portada ---------- */
.gws-sec{padding:88px 0}
.gws-sec + .gws-sec{padding-top:0}
.gws-sec-banda{background:var(--gws-banda)}
.gws-sec-banda + .gws-sec{padding-top:88px}
.gws-h2{font-size:clamp(34px,4.6vw,58px); line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--indigo); margin:14px 0 0; max-width:18ch; text-wrap:balance}
.gws-entradilla{font-size:18px; line-height:1.5; color:var(--ink-2); max-width:56ch; margin:16px 0 0}

/* Lista de espera, justo debajo de la escena */
.gws-espera{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center;
  border:1px solid var(--gws-filete); border-radius:18px; padding:40px; background:var(--gws-tarjeta)}
.gws-espera h2{font-size:clamp(28px,3.2vw,40px); line-height:1.04; letter-spacing:-.035em; margin:12px 0 0}
.gws-espera .gw-captacion{border-color:var(--gws-filete); border-radius:18px}
@media(max-width:880px){.gws-espera{grid-template-columns:1fr; gap:22px; padding:26px 22px}}

/* Cómo funciona: tres pasos, cada uno con el signo 3 × 3 que se va encendiendo */
.gws-tres{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:gwspaso}
.gws-paso{counter-increment:gwspaso; position:relative; border:1px solid var(--gws-filete); border-radius:18px; background:var(--gws-tarjeta); padding:28px 26px 26px}
.gws-paso-cab{display:flex; align-items:center; justify-content:space-between; gap:12px}
.gws-paso-n{font-size:64px; line-height:.8; font-weight:800; letter-spacing:-.05em; color:var(--indigo)}
.gws-paso-n::before{content:counter(gwspaso, decimal-leading-zero)}
.gws-signo{width:64px; height:64px; flex:none}
.gws-signo circle{fill:var(--gws-filete); transition:fill 320ms var(--gws-curva)}
.gws-signo circle.gws-on{fill:var(--indigo)}
.gws-signo circle.gws-fin{fill:var(--gws-verde)}
.gws-paso h3{font-size:22px; line-height:1.15; letter-spacing:-.02em; color:var(--indigo); margin:28px 0 0}
.gws-paso p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px; line-height:1.5}
.gws-flecha{display:none}
@media(max-width:880px){.gws-tres{grid-template-columns:1fr}}

/* Cursos: tarjetas con portada de su protagonista */
.gws-cursos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:44px}
.gws-curso{display:flex; flex-direction:column; border:1px solid var(--gws-filete); border-radius:18px; overflow:hidden; background:var(--gws-tarjeta)}
.gws-curso-portada{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px;
  height:250px; background:var(--gws-banda); padding:0 18px 0 28px; overflow:hidden}
.gws-curso-portada::before{content:''; position:absolute; right:-40px; top:-40px; width:260px; height:260px; pointer-events:none;
  background-image:radial-gradient(circle, var(--gws-filete) 4px, transparent 4.5px); background-size:30px 30px; opacity:.9}
.gws-curso-portada h3{position:relative; align-self:center; max-width:12ch; font-size:clamp(26px,2.7vw,34px); line-height:1; letter-spacing:-.035em; color:var(--indigo); margin:0 0 26px; text-wrap:balance}
.gws-curso-portada img{position:relative; display:block; width:230px; height:auto; margin:0 -34px -150px 0}
.gws-curso-cuerpo{display:flex; flex-direction:column; gap:12px; padding:22px 28px 26px; flex:1}
.gws-curso-meta{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin:0}
.gws-horas{font-size:15px; font-weight:800; color:var(--indigo)}
.gws-cita{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-3)}
.gws-curso-cuerpo p{color:var(--ink-2); margin:0; flex:1; line-height:1.5}
.gws-curso-quien{font-size:13px; color:var(--ink-3)}
.gws-enlace{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--indigo); text-decoration:none; margin-top:4px}
.gws-enlace::after{content:'→'; transition:transform 160ms var(--gws-curva)}
.gws-enlace:hover::after{transform:translateX(3px)}
.gws-enlace:hover{text-decoration:underline; text-underline-offset:4px}
@media(max-width:880px){.gws-cursos{grid-template-columns:1fr}}
@media(max-width:520px){.gws-curso-portada{height:200px; padding:0 8px 0 20px}.gws-curso-portada img{width:150px; margin:0 -24px -92px 0}.gws-curso-portada h3{font-size:24px}.gws-curso-cuerpo{padding:20px 20px 22px}}

/* La ventaja, contada con cifras grandes, en banda índigo */
.gws-cifras{background:var(--gws-indigo); color:var(--gws-sobre-1); padding:92px 0}
.gws-cifras .gws-h2{color:#FFFFFF}
.gws-cifras .gws-entradilla{color:var(--gws-sobre-2)}
.gws-cifras-rejilla{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:52px; border-top:1px solid rgba(255,255,255,.18)}
.gws-cifra{padding:30px 28px 6px 0}
.gws-cifra + .gws-cifra{padding-left:28px; border-left:1px solid rgba(255,255,255,.18)}
.gws-cifra-valor{display:block; font-size:clamp(64px,8vw,112px); line-height:.9; font-weight:800; letter-spacing:-.055em; color:#FFFFFF; font-variant-numeric:tabular-nums}
.gws-cifra-valor small{font-size:.42em; letter-spacing:-.02em; margin-left:4px}
.gws-cifra-codigo{display:block; font-family:'IBM Plex Mono',monospace; font-size:clamp(22px,2.4vw,30px); line-height:1.1; color:#FFFFFF;
  padding:22px 0 16px; letter-spacing:.02em; white-space:nowrap}
.gws-cifra h3{font-size:20px; color:#FFFFFF; margin:20px 0 0; letter-spacing:-.01em}
.gws-cifra p{color:var(--gws-sobre-2); margin:8px 0 0; font-size:15.5px; line-height:1.5}
.gws-cifra .gws-cita{display:block; color:var(--gws-sobre-3); margin-top:14px}
@media(max-width:880px){
  .gws-cifras-rejilla{grid-template-columns:1fr}
  .gws-cifra,.gws-cifra + .gws-cifra{padding:28px 0 22px; border-left:0; border-bottom:1px solid rgba(255,255,255,.18)}
}

/* Frente a la bonificada: dos columnas en vez de tabla */
.gws-frente{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:40px}
.gws-col{border:1px solid var(--gws-filete); border-radius:18px; padding:28px; background:var(--gws-tarjeta)}
.gws-col.gws-nuestra{border-color:var(--indigo); box-shadow:inset 0 0 0 1px var(--indigo)}
.gws-col h3{font-size:20px; color:var(--indigo); margin:0}
.gws-col dl{margin:18px 0 0; display:grid; gap:0}
.gws-col dt{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:14px; border-top:1px solid var(--gws-filete); margin-top:14px}
.gws-col dt:first-child{border-top:0; margin-top:0; padding-top:0}
.gws-col dd{margin:6px 0 0; color:var(--ink-1); font-size:15.5px; line-height:1.45}
.gws-col.gws-nuestra dd{font-weight:600}
@media(max-width:880px){.gws-frente{grid-template-columns:1fr}}

.gws-incluida{display:flex; gap:22px; align-items:center; margin-top:18px; border:1px solid var(--gws-filete); border-radius:18px; padding:22px 26px; background:var(--gws-banda)}
.gws-incluida img{width:64px; height:auto; flex:none}
.gws-incluida p{margin:0; color:var(--ink-1)}
.gws-incluida b{color:var(--indigo)}

/* ---------- Cabecera de las páginas interiores (precios, verificar, prueba) ---------- */
.gws-cab{position:relative; overflow:hidden; background:var(--gws-indigo); color:#FFFFFF; padding:56px 0 0}
.gws-cab .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:end}
.gws-cab-texto{padding-bottom:52px}
.gws-cab h1{color:#FFFFFF; font-size:clamp(38px,5.4vw,68px); line-height:.98; letter-spacing:-.045em; margin:16px 0 0; text-wrap:balance}
.gws-cab h1 .verde{color:#FFFFFF}
.gws-cab .lead{color:var(--gws-sobre-2); font-size:18px; max-width:46ch; margin-top:16px}
.gws-cab-foto{display:flex; justify-content:flex-end; align-items:flex-end; padding-right:2vw}
.gws-cab-foto .gws-persona{width:clamp(78px,8vw,124px); margin:0 calc(clamp(78px,8vw,124px) * -.2)}
.gws-cab::after{content:''; position:absolute; left:0; right:0; bottom:0; height:22px; background:var(--gws-indigo-suelo)}
.gws-cab-foto{position:relative; z-index:1}
@media(max-width:880px){
  .gws-cab .wrap{grid-template-columns:1fr; gap:0}
  .gws-cab-texto{padding-bottom:8px}
  .gws-cab-foto{justify-content:center; padding:18px 0 0}
  .gws-cab-foto .gws-persona{width:70px; margin:0 -12px}
  .gws-cab{padding-top:40px}
}

/* Tarjetas y piezas comunes de las interiores */
.gws-tarjeta{border:1px solid var(--gws-filete); border-radius:18px; background:var(--gws-tarjeta); padding:28px; box-shadow:none}

/* ---------- Movimiento: encender y ordenar, una vez ---------- */
.gws-anima .gws-persona{opacity:0; transform:translateY(26px)}
.gws-anima .gws-persona:nth-child(even){transform:translateY(20px)}
.gws-anima.gws-visto .gws-persona{opacity:1; transform:none; transition:opacity 320ms var(--gws-curva), transform 640ms var(--gws-curva);
  transition-delay:calc(var(--gws-i, 0) * 70ms)}
.gws-anima.gws-visto .gws-persona:nth-child(even){transform:translateY(-6px)}
.gws-cab-foto.gws-anima.gws-visto .gws-persona:nth-child(even){transform:none}
.gws-sube.gws-espera-js{opacity:0; transform:translateY(18px)}
.gws-sube.gws-espera-js.gws-visto{opacity:1; transform:none; transition:opacity 320ms var(--gws-curva), transform 640ms var(--gws-curva); transition-delay:calc(var(--gws-i, 0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  .gws-anima .gws-persona,.gws-sube{opacity:1 !important; transform:none !important; transition:none !important}
  .gws-anima .gws-persona:nth-child(even){transform:translateY(-6px) !important}
  .gws-cab-foto.gws-anima .gws-persona:nth-child(even){transform:none !important}
  .gws-puntos li,.gws-signo circle{transition:none !important}
  .gws-ficha{transform:rotate(2.5deg) !important}
}

/* ---------- Móvil ---------- */
@media(max-width:880px){
  .gws-escena{padding-top:48px}
  .gws-foto{margin-top:36px}
  .gws-persona{width:96px; margin:0 -17px}
  .gws-persona.gws-atras{width:88px}
  .gws-solo-ancho{display:none}
  .gws-sec{padding:64px 0}
  .gws-sec-banda + .gws-sec{padding-top:64px}
  .gws-cifras{padding:64px 0}
}
@media(max-width:520px){
  .gws-escena{padding-top:36px}
  .gws-titular{font-size:56px; margin-top:14px}
  .gws-promesa{font-size:17px; margin-top:16px}
  .gws-acciones{margin-top:22px; gap:10px}
  .gws-foto{margin-top:30px}
  .gws-persona{width:78px; margin:0 -14px}
  .gws-persona.gws-atras{width:72px}
  .gws-solo-medio{display:none}
  .gws-acciones .gws-boton{width:100%}
  .gws-paso{padding:22px 20px}
  .gws-col{padding:22px 20px}
  .gws-incluida{padding:18px; gap:14px}
}
.gws-cifras a.gws-enlace-claro,.gws-cab a.gws-enlace-claro{color:#FFFFFF !important; font-weight:700; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.5)}

/* Ficha de certificado junto al titular (solo en pantallas anchas) */
.gws-ficha{position:absolute; right:max(40px,6vw); top:96px; width:330px; transform:rotate(2.5deg); background:#FFFFFF; color:#121A33;
  border-radius:18px; padding:22px 24px 20px; box-shadow:0 24px 60px rgba(8,12,30,.35)}
.gws-ficha p{margin:0}
.gws-ficha-rot{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#646C84}
.gws-ficha-curso{font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:#2B3A67; margin-top:10px !important}
.gws-ficha-dato{font-size:14px; color:#46506B; margin-top:8px !important}
.gws-ficha-pie{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #E1E4EC; margin-top:16px !important; padding-top:12px}
.gws-ficha-pie .gws-cita{color:#46506B}
.gws-ficha-ok{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#56700F}
.gws-ficha-ok::before{content:''; width:9px; height:9px; border-radius:50%; background:#8FAF2E}
.gws-ficha.gws-sube.gws-espera-js{transform:rotate(2.5deg) translateY(18px)}
.gws-ficha.gws-sube.gws-espera-js.gws-visto{transform:rotate(2.5deg)}
@media(max-width:1099px){.gws-ficha{display:none}}

/* ---------- Interiores: tarjetas de marca (filete, radio 18, sin sombra) ---------- */
main.gws-int .card{border:1px solid var(--gws-filete); border-top-width:1px; border-radius:18px; box-shadow:none; background:var(--gws-tarjeta)}
main.gws-int .gws-cab + section{padding-top:48px}
main.gws-int .enlace{border-radius:18px; box-shadow:none}

/* Entrar: la caja sobre blanco y la plantilla esperando debajo */
.gws-entrar-sec{padding:64px 0 0; position:relative; overflow:hidden}
.gws-entrar .gwen-caja h1{font-size:clamp(40px,6vw,64px); letter-spacing:-.045em; line-height:.98}
.gws-entrar .gwen-boton{border-radius:999px; box-shadow:none; border-color:var(--gws-filete)}
.gws-entrar-foto{position:relative; margin-top:56px; background:linear-gradient(180deg, transparent 0, transparent calc(100% - 28px), var(--gws-banda) calc(100% - 28px))}
.gws-entrar-foto .gws-cab-foto{justify-content:center; padding:0}
.gws-entrar-foto .gws-persona{width:clamp(80px,9vw,120px); margin:0 calc(clamp(80px,9vw,120px) * -.18)}
body:has(.gws-entrar) > .pie{margin-top:0}

/* ---------- La plantilla responde: cada persona es un botón con su duda ---------- */
button.gws-persona{appearance:none; border:0; padding:0; background:none; cursor:pointer; font:inherit; color:inherit;
  transition:transform 320ms var(--gws-curva), filter 320ms var(--gws-curva)}
button.gws-persona:hover,button.gws-persona.gws-habla{transform:translateY(-16px) !important; z-index:3}
button.gws-persona:focus-visible{outline:none}
button.gws-persona:focus-visible img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--gws-guias))}
.gws-foto.gws-hay-voz button.gws-persona:not(.gws-habla){filter:saturate(.55) brightness(.68)}
.gws-bocadillo{position:absolute; z-index:5; bottom:calc(100% - 58px); left:50%; transform:translate(-50%,8px); opacity:0;
  width:max-content; max-width:min(320px,84vw); margin:0; padding:14px 18px 15px; border-radius:18px; background:#FFFFFF; color:#2B3A67;
  pointer-events:none; transition:opacity 220ms var(--gws-curva), transform 320ms var(--gws-curva), left 320ms var(--gws-curva)}
.gws-bocadillo.gws-ve{opacity:1; transform:translate(-50%,0)}
.gws-bocadillo::after{content:''; position:absolute; left:var(--gws-cola,50%); bottom:-7px; width:14px; height:14px; background:#FFFFFF;
  transform:translateX(-50%) rotate(45deg); border-radius:2px}
.gws-bocadillo b{display:block; font-size:clamp(18px,1.7vw,22px); line-height:1.15; font-weight:800; letter-spacing:-.02em}
.gws-bocadillo span{display:block; margin-top:6px; font-size:12.5px; font-weight:600; color:#646C84}
.gws-pista{color:var(--gws-sobre-3)}
.gws-puntos li.gws-marca{transform:scale(1.6); background:#FFFFFF}

/* ---------- Pruébalo en 30 segundos ---------- */
.gws-reto{padding:96px 0 40px}
.gws-reto-caja{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); margin-top:40px; border:1px solid var(--gws-filete);
  border-radius:18px; overflow:hidden; background:var(--gws-tarjeta)}
.gws-reto-quien{position:relative; display:flex; align-items:flex-end; justify-content:center; background:var(--gws-indigo); min-height:420px; overflow:hidden}
.gws-reto-quien::before{content:''; position:absolute; inset:0; opacity:.6;
  background-image:radial-gradient(circle, rgba(255,255,255,.09) 1.6px, transparent 2px); background-size:26px 26px}
.gws-reto-cara{position:relative; display:block; width:min(96%,470px); height:auto; transition:transform 320ms var(--gws-curva), opacity 200ms var(--gws-curva)}
.gws-reto-cara.gws-cambia{opacity:0; transform:translateY(12px)}
.gws-reto-tarjeta{padding:40px 44px 40px; display:flex; flex-direction:column; justify-content:center}
.gws-reto-paso{display:flex; align-items:center; gap:12px; margin:0; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.gws-reto-puntos{display:inline-flex; gap:6px}
.gws-reto-puntos i{width:10px; height:10px; border-radius:50%; background:var(--gws-filete); transition:background 320ms var(--gws-curva)}
.gws-reto-puntos i.gws-on{background:var(--indigo)}
.gws-reto-puntos i.gws-fin{background:var(--gws-verde)}
.gws-reto-voz{margin:22px 0 0; font-size:14px; color:var(--ink-3)}
.gws-reto-voz b{color:var(--ink-2)}
.gws-reto-pregunta{margin:8px 0 0; font-size:clamp(22px,2.4vw,30px); line-height:1.18; font-weight:600; letter-spacing:-.02em; color:#646C84; text-wrap:balance}
.gws-reto-opciones{display:grid; gap:10px; margin-top:24px}
.gws-reto-op{appearance:none; display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; font-size:16px; font-weight:600;
  color:var(--indigo); background:var(--gws-tarjeta); border:1px solid var(--gws-filete); border-radius:14px; padding:15px 18px; cursor:pointer;
  transition:border-color 160ms var(--gws-curva), transform 160ms var(--gws-curva), background 160ms var(--gws-curva)}
.gws-reto-op::before{content:attr(data-letra); flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--gws-filete); font-size:13px; font-weight:800}
.gws-reto-op:hover:not(:disabled){border-color:var(--indigo); transform:translateX(3px)}
.gws-reto-op:focus-visible{outline:3px solid var(--gws-guias); outline-offset:2px}
.gws-reto-op:disabled{cursor:default}
.gws-reto-op.gws-bien{border-color:var(--indigo); background:var(--gws-banda)}
.gws-reto-op.gws-bien::before{content:''; background:var(--gws-verde); border-color:var(--gws-verde)}
.gws-reto-op.gws-mal{opacity:.55; text-decoration:line-through; text-decoration-thickness:1px}
.gws-reto-op.gws-resto{opacity:.4}
.gws-reto-respuesta,.gws-reto-final{margin-top:26px; animation:gws-entra 320ms var(--gws-curva)}
.gws-reto-veredicto{margin:0; font-size:clamp(40px,5vw,64px); line-height:.95; font-weight:800; letter-spacing:-.045em; color:var(--indigo)}
.gws-reto-veredicto .gws-punto,.gws-reto-veredicto i{font-style:normal; color:var(--gws-verde)}
.gws-reto-explica{margin:12px 0 0; font-size:16.5px; line-height:1.5; color:var(--ink-2); max-width:52ch}
.gws-reto-cita{margin:12px 0 0}
.gws-reto-sigue{margin-top:20px}
.gws-boton-borde{color:var(--indigo); border-color:var(--gws-filete); background:transparent}
.gws-boton-borde:hover{border-color:var(--indigo)}
.gws-reto-final .gws-reto-veredicto{font-size:clamp(56px,7vw,96px)}
@keyframes gws-entra{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media(max-width:880px){
  .gws-reto{padding:64px 0 24px}
  .gws-reto-caja{grid-template-columns:1fr}
  .gws-reto-quien{min-height:0; height:230px}
  .gws-reto-cara{width:230px; margin-bottom:-40px}
  .gws-reto-tarjeta{padding:26px 22px 28px}
  .gws-bocadillo{bottom:calc(100% - 30px)}
}
@media (prefers-reduced-motion: reduce){
  button.gws-persona,.gws-bocadillo,.gws-reto-cara,.gws-reto-op{transition:none}
  .gws-reto-respuesta,.gws-reto-final{animation:none}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gws-reto-pregunta{color:#B9C0D6}
}
:root[data-theme="dark"] .gws-reto-pregunta{color:#B9C0D6}
button.gws-persona:hover,button.gws-persona.gws-habla,button.gws-persona:focus-visible{transition-delay:0s !important}