/* Diagnóstico exprés. Comunes arriba; luego a · El hilo, b · El tablero, c · La conversación. */
.diag-env{width:min(100% - 2rem,760px);margin:0 auto;padding:2.2rem 0 2rem;position:relative;z-index:2}
.estilo-b .diag-env{width:min(100% - 2rem,1080px)}
.estilo-c .diag-env{width:min(100% - 2rem,620px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Selector de estilos (solo en ?estudio=1) */
.estudio{position:relative;z-index:40;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:.7rem 1rem;background:rgba(6,76,59,.94);backdrop-filter:blur(10px);font-size:.85rem;color:#CFF5DD}
.estudio a{color:#fff;text-decoration:none;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-family:var(--display);font-weight:600}
.estudio a.activo{background:#fff;color:var(--hondo)}

/* Portada */
.portada h1{font-size:clamp(2.1rem,6.6vw,3.4rem);font-weight:800;line-height:1.04;margin-bottom:1rem}
.portada-sub{font-size:1.1rem;color:var(--tenue);max-width:34rem}
.portada-preg{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:1.8rem 0 .8rem}
.perfiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.perfil{display:flex;align-items:center;gap:.75rem;text-align:left;padding:1rem 1.1rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);box-shadow:var(--sombra);font:600 .98rem/1.3 var(--display);color:var(--texto);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.perfil:hover{transform:translateY(-3px);border-color:var(--borde-vivo);box-shadow:0 20px 40px -22px rgba(0,96,200,.45)}
.perfil-emoji{font-size:1.6rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:12px;background:rgba(6,76,59,.07);flex:none}
.firma{display:flex;align-items:center;gap:.7rem;margin-top:1.8rem;font-size:.86rem;color:var(--tenue);line-height:1.45}
.firma img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
@media (max-width:520px){.perfiles{grid-template-columns:1fr}}

/* Pregunta */
.dpaso{animation:entra .45s cubic-bezier(.2,.8,.2,1)}
.paso-etq{font-family:var(--display);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-texto);font-weight:700;margin:0 0 .7rem}
.paso-preg{font-size:clamp(1.5rem,4.6vw,2.15rem);font-weight:800;margin-bottom:1.5rem;line-height:1.15}
.opciones{display:grid;gap:.65rem}
.opcion{display:flex;align-items:center;gap:.9rem;text-align:left;padding:1rem 1.15rem;border-radius:16px;border:1px solid var(--borde);background:rgba(255,255,255,.82);font:500 1.02rem/1.4 var(--cuerpo);color:var(--texto);cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.opcion:hover{transform:translateX(4px);border-color:var(--borde-vivo);background:#fff}
.opcion kbd{font:700 .78rem var(--display);width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:9px;background:rgba(6,76,59,.07);color:var(--hondo);flex:none}
.opcion.elegida{border-color:transparent;background:linear-gradient(135deg,var(--hondo),var(--hondo-2));color:#fff;box-shadow:0 14px 30px -14px rgba(0,96,200,.6)}
.opcion.elegida kbd{background:rgba(255,255,255,.18);color:#fff}
.paso-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem}
.paso-tecla{font-size:.78rem;color:var(--tenue-2)}
@media (hover:none){.paso-tecla{display:none}}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Resultado */
.res{margin-top:1.5rem;opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.res.visible{opacity:1;transform:none}
.res-etq{font-family:var(--display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#C2410C;font-weight:700;margin-bottom:.6rem}
.res-titulo{font-size:clamp(2rem,6.4vw,3.2rem);font-weight:800;line-height:1.05;margin-bottom:1rem}
.res-dolor{font-size:1.12rem;color:var(--tenue);max-width:40rem}
.res-nivel{display:flex;align-items:center;gap:1.1rem;margin:1.6rem 0 1.2rem;padding:1rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9)}
.res-nivel b{font:800 2.6rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.res-nivel b small{font-size:1rem;color:var(--tenue-2);-webkit-text-fill-color:var(--tenue-2)}
.res-nivel span{font-size:.95rem;color:var(--tenue)}
.res-nivel strong{color:var(--texto)}
.barras{display:grid;gap:.85rem;margin:1rem 0 1.6rem}
.barra-f{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;align-items:center}
.barra-nombre{font-size:.93rem;font-weight:600;font-family:var(--display);display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.barra-nombre{grid-column:1;grid-row:1}
.barra-pista{grid-column:1;grid-row:2}
.barra-f b{font:700 .9rem var(--display);color:var(--tenue);grid-column:2;grid-row:1 / span 2;align-self:end}
.barra-pista{height:12px;border-radius:99px;background:rgba(14,18,32,.07);overflow:hidden}
.barra-pista i{display:block;height:100%;width:calc(max(.04,var(--v)) * 100%);border-radius:99px;background:var(--grad);animation:llena 1.2s cubic-bezier(.2,.8,.2,1) both}
.es-fuga .barra-pista i{background:linear-gradient(90deg,#F97316,#E11D48)}
.marca{font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:99px}
.marca.fuga{background:rgba(225,29,72,.1);color:#BE123C}
.marca.fuerza{background:rgba(11,122,42,.1);color:var(--verde-texto)}
@keyframes llena{from{width:0}}
.res-cartas{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.res-carta{padding:1.2rem 1.25rem;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra)}
.res-carta small,.plan h3+.plan-sub{display:block}
.res-carta small{font:700 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue-2);margin-bottom:.5rem}
.res-carta p{margin:0;font-size:.98rem;line-height:1.55}
.res-carta.hoy{background:linear-gradient(135deg,var(--hondo),var(--hondo-2));color:#fff;border:0}
.res-carta.hoy small{color:#7CF29A}
.res-fuerza{margin:1.2rem 0 0;padding:.9rem 1.1rem;border-radius:14px;background:rgba(11,122,42,.07);font-size:.95rem}
@media (max-width:620px){.res-cartas{grid-template-columns:1fr}}

.plan{margin-top:1.8rem;padding:1.6rem;border-radius:var(--r-g);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra);position:relative;overflow:hidden}
.plan h3{font-size:1.35rem;margin-bottom:.3rem}
.plan-sub{color:var(--tenue);font-size:.93rem}
.plan-lista{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.plan-lista li{display:grid;grid-template-columns:4.2rem 1fr;gap:.6rem;padding:.7rem .9rem;border-radius:12px;background:rgba(6,76,59,.045);font-size:.95rem;line-height:1.45}
.plan-lista b{font:700 .8rem var(--display);color:var(--verde-texto);padding-top:.12rem}
.bloqueado .plan-velo{filter:blur(5px);opacity:.55;pointer-events:none;user-select:none;max-height:15rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.plan-llave{position:relative;margin:-5rem auto 0;max-width:24rem;padding:1.3rem;border-radius:20px;background:#fff;box-shadow:0 24px 50px -20px rgba(14,18,32,.35);display:grid;gap:.6rem;text-align:center}
.plan-llave p{margin:0 0 .3rem;font-size:.93rem;color:var(--tenue)}
.plan-llave p b{color:var(--texto)}
.plan-ya{font-size:.85rem;color:var(--tenue);margin-top:.2rem}
.btn-linkedin svg{width:20px;height:20px}

.res-cta{display:flex;gap:1.2rem;align-items:flex-start;margin-top:1.8rem;padding:1.6rem;border-radius:var(--r-g);background:linear-gradient(135deg,rgba(25,195,125,.12),rgba(47,140,255,.12));border:1px solid rgba(0,96,200,.18)}
.res-cta img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 4px #fff}
.res-cta h3{font-size:1.4rem;margin-bottom:.4rem}
.res-cta p{color:var(--tenue);font-size:.96rem}
.res-sigue{font-size:.85rem!important;margin:1rem 0 0}
.res-sigue a{color:var(--verde-texto)}
@media (max-width:560px){.res-cta{flex-direction:column}.res-cta img{width:72px;height:72px}}
.res-compartir{margin-top:1.6rem;text-align:center}
.res-compartir p{font-family:var(--display);font-weight:700}
.res-botones{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.res-cierre{margin:2rem auto 1rem;max-width:32rem;text-align:center;font-size:1rem;color:var(--tenue);font-style:italic}
.res-cierre span{font-style:normal;font-family:var(--display);font-weight:700;color:var(--texto)}

/* ══ a · El hilo ══ */
.hilo-progreso{width:100%;height:46px;margin-bottom:1.4rem;overflow:visible}
.hilo-enredado{fill:none;stroke:rgba(14,18,32,.18);stroke-width:3;stroke-linecap:round}
#hilo-recto{stroke-width:5;stroke-linecap:round}
.revela-hilo{text-align:center;padding:1rem 0;transition:transform .6s}
.revela-hilo svg{width:100%;height:auto;overflow:visible}
.revela-hilo path{fill:none;stroke:url(#rg);stroke-width:5;stroke-linecap:round;transition:stroke .5s}
.revela-hilo text{font:600 15px var(--display);fill:var(--tenue)}
.fila-hilo{transition:opacity .6s}
.revela-hilo:has(.es-fuga) .fila-hilo:not(.es-fuga){opacity:.35}
.fila-hilo.es-fuga path{stroke:#E11D48;stroke-width:6;animation:late 1.2s ease-in-out infinite}
.fila-hilo.es-fuga text{fill:#BE123C;font-weight:800}
@keyframes late{50%{stroke-width:9}}
.revela-leyenda{font:700 clamp(1.3rem,4vw,1.8rem)/1.2 var(--display);margin-bottom:1rem;min-height:2.2em}
.revela-hilo.arriba{transform:scale(.9);margin-bottom:-1rem}
.saltar{margin-top:.5rem}

/* ══ b · El tablero ══ */
.estilo-b .portada{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.tablero{border-radius:28px;padding:1.4rem;background:radial-gradient(120% 90% at 20% 0%,#0B6A50 0%,#064C3B 45%,#0A3F7A 100%);color:#fff;box-shadow:0 30px 70px -30px rgba(6,76,59,.6);position:relative;overflow:hidden}
.tablero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);pointer-events:none}
.tablero-nota{font-size:.85rem;color:rgba(255,255,255,.75);text-align:center;margin:.4rem 0 0}
.radar{width:100%;max-width:360px;display:block;margin:0 auto;overflow:visible;position:relative;z-index:1}
.radar .anillo{fill:none;stroke:rgba(255,255,255,.16)}
.radar .eje{stroke:rgba(255,255,255,.2)}
.radar .area{fill:url(#rad);stroke:#7CF29A;stroke-width:2;stroke-linejoin:round}
.radar .etq-radar{font:700 13px var(--display);fill:rgba(255,255,255,.7);text-anchor:middle;transition:fill .3s}
.radar .etq-radar.activo{fill:#7CF29A}
.radar .etq-radar.fuga{fill:#FF8A6B}
.radar .barrido{stroke:#7CF29A;stroke-width:2;opacity:0;transform-origin:160px 160px}
.escaneando .radar .barrido{opacity:.9;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.radar .punto-fuga{fill:#FF8A6B}
.radar .pulso{fill:none;stroke:#FF8A6B;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pulso 1.4s ease-out infinite}
@keyframes pulso{from{transform:scale(1);opacity:1}to{transform:scale(3.4);opacity:0}}
.tablero-juego{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start}
.tablero-juego .tablero{position:sticky;top:120px}
.tj-preg.entra{animation:entra .4s cubic-bezier(.2,.8,.2,1)}
.tj-cab{display:flex;justify-content:space-between;align-items:baseline}
.tj-num{font:800 2.4rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tj-num small{font-size:1rem}
.tj-avance{height:4px;border-radius:9px;background:rgba(14,18,32,.08);margin:.8rem 0 1.4rem;overflow:hidden}
.tj-avance i{display:block;height:100%;background:var(--grad);transition:width .4s}
.medidores{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem;position:relative;z-index:1}
.medidor{padding:.6rem .75rem;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:.4rem;font-size:.78rem;color:rgba(255,255,255,.8);transition:background .3s,border-color .3s}
.medidor b{font:800 1.15rem var(--display);color:#fff}
.medidor b small{font-size:.7rem;opacity:.6}
.medidor.activo{border-color:#7CF29A;background:rgba(124,242,154,.12)}
.medidor.sube b{animation:sube .5s}
.medidor.fuga{border-color:#FF8A6B;background:rgba(255,138,107,.16)}
@keyframes sube{40%{transform:scale(1.35);color:#7CF29A}}
.tj-calculo{text-align:center;padding:2rem 0}
.tj-total{font:800 clamp(4rem,14vw,6.5rem)/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.4rem 0}
.tj-total small{font-size:1.6rem}
#tj-msg{font-size:1.1rem;color:var(--tenue)}
#tj-msg b{color:#BE123C}
.tablero-juego.final{grid-template-columns:1fr .8fr}
@media (max-width:820px){
  .estilo-b .portada{grid-template-columns:1fr;gap:1.6rem}
  .tablero-portada{order:-1}
  .tablero-portada .radar{max-width:250px}
  .tablero-juego{grid-template-columns:1fr;gap:1rem}
  .tablero-juego .tablero{position:relative;top:0;order:-1;padding:1rem;display:grid;grid-template-columns:150px 1fr;gap:.8rem;align-items:center}
  .tablero-juego .radar{max-width:150px}
  .tablero-juego .radar .etq-radar{display:none}
  .tablero-juego .medidores{margin:0;grid-template-columns:1fr;gap:.3rem}
  .medidor{padding:.35rem .6rem}
}

/* ══ c · La conversación ══ */
.chat{border-radius:26px;overflow:hidden;background:#EFF6F2;box-shadow:var(--sombra);border:1px solid rgba(255,255,255,.9)}
.chat-cab{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;background:linear-gradient(135deg,var(--hondo),var(--hondo-2));color:#fff;position:sticky;top:58px;z-index:5}
.chat-cab img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.chat-cab div{display:grid;line-height:1.25}
.chat-cab b{font-family:var(--display);font-size:.98rem}
.chat-cab span{font-size:.78rem;color:#9FF0B8}
.chat-cab em{margin-left:auto;font-style:normal;font-size:.72rem;opacity:.75;text-align:right}
.chat-hilo{padding:1.2rem 1rem .5rem;display:flex;flex-direction:column;gap:.5rem;min-height:30vh;background-image:radial-gradient(rgba(6,76,59,.06) 1px,transparent 1px);background-size:18px 18px}
.burbuja{max-width:84%;padding:.7rem .95rem;border-radius:18px;font-size:.98rem;line-height:1.45;animation:burbuja .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 2px 4px rgba(14,18,32,.06)}
.burbuja.de-el{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.burbuja.de-mi{align-self:flex-end;background:#D3F5DE;border-bottom-right-radius:6px}
.visto{font-size:.7rem;color:#2F8CFF;margin-left:.5rem}
.escribiendo{display:flex;gap:4px;padding:.9rem 1rem}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--tenue-2);animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{30%{transform:translateY(-4px);opacity:1}0%,60%,100%{opacity:.4}}
@keyframes burbuja{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.chat-respuestas{display:grid;gap:.45rem;padding:.6rem 1rem 1.2rem}
.chat-respuestas:empty{padding:0}
.dchip{padding:.8rem 1rem;border-radius:16px;border:1px solid rgba(6,76,59,.2);background:#fff;color:var(--hondo);font:600 .95rem/1.35 var(--cuerpo);text-align:left;cursor:pointer;animation:burbuja .35s both;transition:background .2s,transform .2s}
.dchip:nth-child(2){animation-delay:.06s}.dchip:nth-child(3){animation-delay:.12s}.dchip:nth-child(4){animation-delay:.18s}
.dchip:hover{background:#E4F7EA;transform:translateX(3px)}
.tarjeta-chat{max-width:92%;width:100%;border:2px solid rgba(225,29,72,.25)}
.tarjeta-chat small{display:block;font:700 .72rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:#BE123C}
.tarjeta-chat strong{display:block;font:800 1.35rem/1.15 var(--display);margin:.3rem 0 .4rem}
.tarjeta-chat .barras{margin:.6rem 0 0;gap:.55rem}
.tarjeta-chat .barra-nombre{font-size:.8rem}
.estilo-c .res{margin-top:2rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:520px){.diag .volver{font-size:0}.diag .volver::before{content:'← Inicio';font-size:.88rem}}