/* miperfilconductual · mismo sistema visual de gonzaloaranda.com (capa FDE con celeste, 2026-10-27):
   Raleway 800 compacta en titulares y su cursiva como acento, DM Mono en etiquetas,
   negro #0B0D0E en barra, portada y pie; celeste #5FC4CF como acento y botón; #127C8A sobre blanco. */
:root{
  --negro:#0B0D0E;--negro-2:#16191B;--linea-osc:#2A2F32;
  --celeste:#5FC4CF;--celeste-osc:#127C8A;--celeste-claro:#E2F4F6;
  --arena:#8A7A5C;--arena-claro:#BFAE88;
  --papel:#F4F4F4;--linea:#E2E2E2;--gris:#555;--texto:#444;--gris-osc:#B9C2C4;
  --error:#A4262C;
  --display:"Raleway",-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --ancho:72rem;--gutter:max(20px,env(safe-area-inset-left,0px));
  --sec:clamp(3.5rem,7vw,6rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--texto);font-family:var(--display);font-weight:500;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;color:var(--negro);text-wrap:balance}
:focus-visible{outline:2px solid var(--celeste-osc);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tipografía */
.titular{font-weight:800;letter-spacing:-.045em;line-height:1.06}
.t-xl{font-size:clamp(2.5rem,6vw,4.4rem)}
.t-l{font-size:clamp(2rem,4.6vw,3.2rem)}
.t-m{font-size:clamp(1.55rem,3.2vw,2.2rem)}
.acento{font-style:italic;color:var(--celeste-osc)}
.oscuro .acento{color:var(--celeste)}
.etiqueta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--arena);margin-bottom:1.3rem}
.etiqueta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--celeste);flex:none}
.oscuro .etiqueta{color:var(--arena-claro)}
.lead{font-size:clamp(1.08rem,1.6vw,1.2rem);line-height:1.6}
.apagado{color:var(--gris)}
.oscuro .apagado{color:var(--gris-osc)}
.chico{font-size:.88rem}

/* Bandas */
.oscuro{background:var(--negro);color:#E6EBEC}
.oscuro h1,.oscuro h2,.oscuro h3{color:#fff}
.papel{background:var(--papel)}
.caja{max-width:var(--ancho);margin-inline:auto;padding:var(--sec) var(--gutter)}
.caja--angosta{max-width:46rem}
.caja--media{max-width:58rem}

/* Barra superior (igual al sitio) */
.barra{position:sticky;top:0;z-index:30;background:rgba(11,13,14,.97);color:#fff;border-bottom:1px solid var(--linea-osc)}
.barra__caja{max-width:var(--ancho);margin-inline:auto;padding:.85rem var(--gutter);display:flex;align-items:center;gap:1.2rem}
.marca{text-decoration:none;display:grid;line-height:1.05;margin-right:auto}
.marca__nombre{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;color:#fff}
.marca__sub{white-space:nowrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-osc);margin-top:.25rem}
.menu{display:flex;align-items:center;gap:1.1rem}
.menu a{font-size:.88rem;white-space:nowrap;text-decoration:none;color:var(--gris-osc);padding-block:.25rem;border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--celeste)}
.menu .btn{margin-left:.4rem;border-bottom:0}
.menu-boton{display:none;background:none;border:1px solid var(--linea-osc);color:#fff;border-radius:999px;padding:.45rem .9rem;font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media (max-width:900px){
  .menu-boton{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--negro);flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gutter) 1.2rem;border-bottom:1px solid var(--linea-osc)}
  .menu.abierto{display:flex}
  .menu a{padding:.85rem 0;border-bottom:1px solid var(--linea-osc);font-size:1rem}
  .menu .btn{margin:1rem 0 0;text-align:center}
}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 .95rem/1 var(--display);text-decoration:none;padding:1rem 1.5rem;border-radius:2px;border:2px solid var(--celeste);background:var(--celeste);color:var(--negro);cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px);background:var(--negro);border-color:var(--negro);color:#fff}
.oscuro .btn:hover{background:#fff;border-color:#fff;color:var(--negro)}
.btn--chico{padding:.7rem 1.1rem;font-size:.86rem}
.btn--linea{background:transparent;color:var(--negro);border-color:var(--negro)}
.btn--linea:hover{background:var(--negro);color:#fff}
.oscuro .btn--linea{color:#fff;border-color:#fff}
.oscuro .btn--linea:hover{background:#fff;color:var(--negro)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.enlace{font-weight:700;text-decoration:none;color:var(--negro);border-bottom:2px solid var(--celeste);padding-bottom:1px;background:none;border-top:0;border-inline:0;cursor:pointer;font:inherit;font-weight:700}
.oscuro .enlace{color:#fff}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.portada__texto{display:grid;gap:1.4rem}
@media (max-width:860px){.portada{grid-template-columns:1fr}}

/* Pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.pasos li{border-top:3px solid var(--celeste);padding-top:1.1rem;display:grid;gap:.45rem;align-content:start}
.pasos__num{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--arena)}
.pasos h3{font-weight:800;font-size:1.2rem;letter-spacing:-.025em;line-height:1.2}
@media (max-width:760px){.pasos{grid-template-columns:1fr}}

/* Formularios */
.form{display:grid;gap:1.1rem;background:#fff;color:var(--texto);padding:clamp(1.4rem,3vw,2.2rem);border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -24px rgba(0,0,0,.45)}
.form h2{font-weight:800;letter-spacing:-.035em;font-size:1.55rem;line-height:1.15}
.campo{display:grid;gap:.35rem}
.campo label{font-weight:700;font-size:.92rem;color:var(--negro)}
.campo .ayuda{font-size:.82rem;color:var(--gris)}
.campo input{font:500 1rem var(--display);padding:.8rem .9rem;border:1px solid #C9CFD1;border-radius:2px;background:#fff;color:var(--negro);width:100%}
.campo input:focus{border-color:var(--celeste-osc);outline:2px solid var(--celeste-claro)}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.dos-campos{grid-template-columns:1fr}}
.check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.9rem;line-height:1.45}
.check input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--celeste-osc)}
.aviso{font-size:.9rem;padding:.75rem .9rem;border-radius:2px;background:var(--celeste-claro);color:var(--negro)}
.aviso--error{background:#FBEAEA;color:var(--error)}
[hidden]{display:none!important}

/* Test */
.test-cabeza{display:grid;gap:.8rem;margin-bottom:1.6rem}
.progreso{height:6px;background:var(--linea);border-radius:999px;overflow:hidden}
.progreso span{display:block;height:100%;background:var(--celeste-osc);width:0;transition:width .25s ease}
.contador{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--arena)}
.bloque{border:1px solid var(--linea);border-radius:4px;overflow:hidden;background:#fff}
.frase{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1rem 1.1rem;border-top:1px solid var(--linea)}
.frase:first-child{border-top:0}
.frase__texto{font-size:1.06rem;color:var(--negro);font-weight:600;line-height:1.35}
.frase--mas{background:var(--celeste-claro)}
.frase--menos{background:var(--papel)}
.frase--menos .frase__texto{color:var(--gris)}
.elige{display:flex;gap:.45rem}
.elige button{font:700 .8rem var(--display);min-width:4.6rem;padding:.6rem .7rem;border-radius:2px;border:1.5px solid #C9CFD1;background:#fff;color:var(--gris);cursor:pointer}
.elige button:hover{border-color:var(--negro);color:var(--negro)}
.elige button[aria-pressed="true"].b-mas{background:var(--celeste-osc);border-color:var(--celeste-osc);color:#fff}
.elige button[aria-pressed="true"].b-menos{background:var(--negro);border-color:var(--negro);color:#fff}
@media (max-width:560px){.frase{grid-template-columns:1fr;gap:.6rem}.elige button{flex:1}}
.test-pie{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.instruccion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:1.4rem}
.instruccion p{font-size:.92rem;padding:.8rem .9rem;border-left:3px solid var(--celeste-osc);background:var(--papel)}
@media (max-width:560px){.instruccion{grid-template-columns:1fr}}

/* Test en dos pasos (2026-10-29): instrucciones con ejemplo y una pregunta a la vez */
.test-cabeza__fila{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.marca-mas,.marca-menos{display:inline-block;padding:0 .35em;border-radius:2px;font-style:normal}
.marca-mas{background:var(--celeste-osc);color:#fff}
.marca-menos{background:var(--negro);color:#fff}
/* Instrucciones en 3 pantallas (2026-10-29): una idea por pantalla, texto grande, mucho aire */
.guia{max-width:34rem;margin-inline:auto;min-height:min(70vh,36rem);display:flex;flex-direction:column;gap:1.6rem;padding-block:.5rem 1rem}
.guia__puntos{display:flex;gap:.45rem}
.guia__puntos span{width:2rem;height:4px;border-radius:2px;background:#D3D8DA;transition:background .2s ease}
.guia__puntos span.activo{background:var(--celeste-osc)}
.guia__paso{display:grid;gap:1.3rem;align-content:start;flex:1;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.guia__num{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--arena);text-transform:uppercase}
.guia__titulo{font-weight:800;letter-spacing:-.04em;line-height:1.12;font-size:clamp(1.9rem,6vw,2.6rem)}
.guia__texto{font-size:1.15rem;line-height:1.55;color:var(--negro)}
.guia__demo{display:grid;gap:.5rem}
.guia__demo .opcion{cursor:default;padding:.8rem 1rem;font-size:1rem}
.guia__demo .opcion:hover{transform:none;border-color:#D3D8DA}
.guia__demo .opcion--mas:hover{border-color:var(--celeste-osc)}
.guia__demo .opcion--menos:hover{border-color:var(--negro)}
.guia__acciones{display:flex;gap:.8rem}
.guia__acciones .btn{flex:1}
.guia__saltar{align-self:center}
.pregunta{display:grid;gap:.35rem;margin:.4rem 0 1.1rem}
.pregunta__paso{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--arena)}
.pregunta__texto{font-weight:800;letter-spacing:-.035em;line-height:1.2;font-size:clamp(1.45rem,3.4vw,2rem)}
.opciones{display:grid;gap:.6rem}
.opcion{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;font:600 1.06rem/1.35 var(--display);color:var(--negro);background:#fff;border:2px solid #D3D8DA;border-radius:4px;padding:1rem 1.15rem;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.opcion:hover:not([disabled]){border-color:var(--celeste-osc);transform:translateY(-1px)}
.opcion:active:not([disabled]){transform:none}
.opcion__marca{flex:none;font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.35rem .55rem;border-radius:2px}
.opcion--mas{background:var(--celeste-claro);border-color:var(--celeste-osc)}
.opcion--mas .opcion__marca{background:var(--celeste-osc);color:#fff}
.opcion--menos{background:#EDEFEF;border-color:var(--negro)}
.opcion--menos .opcion__marca{background:var(--negro);color:#fff}
.opcion[disabled]{cursor:default}
.opciones--listo .opcion:not(.opcion--mas):not(.opcion--menos){opacity:.5}
@media (max-width:560px){.opcion{flex-direction:column;align-items:flex-start;gap:.5rem}}

/* Resultado */
.res-cabeza{display:grid;gap:1rem}
.res-codigo{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--arena-claro)}
.mapa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:820px){.mapa{grid-template-columns:1fr}}
.mapa__circulo{max-width:24rem;width:100%;margin-inline:auto}
.barras{display:grid;gap:1rem}
.barra-estilo{display:grid;gap:.35rem}
.barra-estilo__fila{display:flex;justify-content:space-between;font-weight:700;color:var(--negro)}
.barra-estilo__fila span:last-child{font-family:var(--mono);font-weight:500;color:var(--celeste-osc)}
.barra-estilo__pista{height:12px;background:var(--papel);border-radius:2px;overflow:hidden}
.barra-estilo__pista span{display:block;height:100%;background:#C9CFD1}
.barra-estilo--principal .barra-estilo__pista span{background:var(--celeste-osc)}
.barra-estilo--secundario .barra-estilo__pista span{background:var(--celeste)}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tarjeta{background:var(--papel);padding:1.3rem;border-radius:2px;display:grid;gap:.45rem;align-content:start}
.tarjeta--acento{background:var(--celeste-claro)}
.tarjeta h3{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
@media (max-width:760px){.tarjetas{grid-template-columns:1fr}}
.lista{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.lugar{background:#fff;border-top:3px solid var(--celeste)}
.lugar p{color:var(--negro);line-height:1.5}
.personajes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.personaje{background:#fff;padding:clamp(1.2rem,2.5vw,1.8rem);border-radius:2px;display:grid;gap:.7rem;align-content:start}
.personaje h3{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.personaje__rasgo{font-weight:700;font-style:italic;color:var(--celeste-osc)}
.personaje__aprender{border-top:1px solid var(--linea);padding-top:.7rem;font-size:.95rem}
.personaje__aprender b{display:block;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;color:var(--arena);margin-bottom:.2rem}
@media (max-width:760px){.personajes{grid-template-columns:1fr}}
.fruto{background:var(--negro);color:#E6EBEC;padding:clamp(1.4rem,3vw,2.2rem);border-radius:2px;display:grid;gap:.8rem}
.fruto strong{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--celeste)}
.frase-destacada{font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:-.03em;line-height:1.25;color:var(--negro)}
.frase-destacada em{color:var(--celeste-osc);font-weight:800}
.enlace-personal{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.88rem}
.enlace-personal code{font-family:var(--mono);font-size:.78rem;background:var(--papel);padding:.35rem .5rem;border-radius:2px;word-break:break-all}

/* Pie (igual al sitio) */
.pie{background:var(--negro);color:#E6EBEC;border-top:1px solid var(--linea-osc)}
.pie__caja{max-width:var(--ancho);margin-inline:auto;padding:clamp(2.5rem,5vw,3.75rem) var(--gutter) 1.5rem;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.pie__nombre{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:#fff}
.pie p{color:#CFD5D7;font-size:.95rem;max-width:24rem}
.pie .pie__lema{font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--celeste);margin-top:.6rem}
.pie h4{margin:0 0 .9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-osc);font-weight:500}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie ul a{text-decoration:none;color:#E6EBEC;font-size:.95rem}
.pie ul a:hover{color:var(--celeste)}
.pie__base{max-width:var(--ancho);margin-inline:auto;padding:1.2rem var(--gutter) 2rem;border-top:1px solid var(--linea-osc);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--gris-osc)}
@media (max-width:760px){.pie__caja{grid-template-columns:1fr}}

.prosa{display:grid;gap:1rem;max-width:42rem}
.prosa h2{font-weight:800;letter-spacing:-.03em;font-size:1.3rem;margin-top:1rem}
.cargando{padding:4rem 0;text-align:center;color:var(--gris)}
@media print{.barra,.pie,.no-imprimir{display:none!important}}