:root{
  --carbon:#0B1017; --panel:#131B24; --panel2:#16212C; --linea:#25313D; --linea2:#31424F;
  --tinta:#EAF1F7; --suave:#8DA0B2; --tenue:#5F7286;
  --cian:#00B4E0; --cian2:#7DD4F0; --wa:#25D366; --waTinta:#06210F; --waTexto:#5FE39B;
  --waFondo:#122620; --waBorde:#1E5F4A;
  --halo:rgba(0,180,224,.10); --sombra:rgba(0,0,0,.6);
  --sombraCaja:0 10px 26px rgba(0,0,0,.35); --sombraFlota:0 12px 26px rgba(0,0,0,.55);
  --halo2:rgba(0,180,224,.14);
  --titular:'Poppins',system-ui,sans-serif; --texto:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace; --radio:14px;
}
/* ══ EL TEMA CLARO ════════════════════════════════════════════════════════
   ⭐ Y con el tema cambia TAMBIEN la armadura del personaje: sobre fondo
   oscuro va la blanca, sobre fondo claro la oscura. ⛔ Al reves, se pierde
   contra el fondo — que es lo que pasaba hoy: traje oscuro sobre carbon. */
/* ⚠️ Los valores estan MEDIDOS, no elegidos a ojo. El primer intento tenia dos
   fallos: el fondo y las cajas se diferenciaban en 1,08 —o sea, las cajas
   blancas no se veian— y tres colores de texto quedaban por debajo del minimo
   legible (4,5). Ahora todos pasan, y las cajas se separan por el borde y la
   sombra, que es como se hace en claro. */
html[data-tema=claro]{
  --carbon:#E7EDF3; --panel:#FFFFFF; --panel2:#F2F6FA; --linea:#D2DDE7; --linea2:#B4C5D3;
  --tinta:#0D1620; --suave:#41525F; --tenue:#5A6B7A;
  --cian:#0079A0; --cian2:#00647F; --wa:#0F7A41; --waTinta:#FFFFFF; --waTexto:#0C6E3A;
  --waFondo:#E4F6EC; --waBorde:#9CD4B7;
  --halo:rgba(0,121,160,.10); --sombra:rgba(15,40,60,.20);
  /* ⛔ En claro la sombra NO puede ser negra al 35 %: ensucia. Es azulada y sutil. */
  --sombraCaja:0 6px 20px rgba(20,50,75,.10); --sombraFlota:0 10px 24px rgba(20,50,75,.16);
  --halo2:rgba(0,121,160,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--carbon); color:var(--tinta);
  font:400 15px/1.6 var(--texto); -webkit-font-smoothing:antialiased;
  /* ⭐ Un resplandor muy tenue detrás de Nodite. ⛔ Nunca un plano cian solido:
     el personaje se convertiria en silueta. */
  background-image:radial-gradient(90% 60% at 22% 0%,var(--halo),transparent 60%);
}
p{margin:0}
a{color:inherit}

/* ══ La pantalla: una sola, y no se desplaza ══════════════════════════════ */
.pantalla{height:100dvh; display:flex; flex-direction:column; overflow:hidden}
.env{width:min(1240px,100%); margin:0 auto; padding:0 34px; flex:1;
  display:flex; flex-direction:column; min-height:0}

/* La reja de dos columnas. ⭐ Es lo que hace que quepa todo sin desplazarse:
   en una sola columna el relato caia fuera de la pantalla. */
.reja{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:38px; align-items:center; padding:26px 0 18px}
.izq,.der{min-width:0; display:flex; flex-direction:column; min-height:0}

/* La marca. ⛔ Ya no hay barra propia: vive dentro de la pantalla. */
.marca{background:none; border:0; cursor:pointer; color:inherit;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font:600 17px var(--titular); margin-bottom:20px; align-self:flex-start}

/* ⭐ NODITE, EN GRANDE Y A LA IZQUIERDA. El bocadillo nace de él, así que él va
   primero: es quien habla, no un adorno al lado del texto. */
.nodite{display:flex; align-items:center; gap:20px; margin-bottom:16px}
.fig{flex:0 0 auto; height:min(38vh,290px); width:auto;   /* ⛔ nunca por debajo de 72 px */
  filter:drop-shadow(0 16px 30px var(--sombra))}
.nodite .globo{align-self:center}
.nodite h1,.nodite h2{margin-bottom:2px}
.nodite p{margin-top:7px; font-size:.9rem; color:var(--suave)}
.nodite a{color:var(--cian2); text-decoration:none; border-bottom:1px dotted var(--linea2)}
.ayudita{display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--linea);
  font-size:.8rem; color:var(--tenue)}

/* ⭐ La entrada: en columna y centrada. La marca arriba y grande —antes se
   perdía—, la pregunta debajo, y Nodite diciendo lo que hay que entender. */
.entrada{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; margin:auto 0}
.marca--grande{font:700 27px var(--titular); gap:13px; margin-bottom:14px; align-self:center}
.marca--grande img{width:46px; height:46px}
.entrada h1{font-size:2.25rem; max-width:19ch}
.entrada h1 span{display:inline}
.entrada .nodite{margin:14px 0 4px; text-align:left}
.entrada .botones{justify-content:center}

/* La lista del globo: dos frases, no un párrafo. */
.globo .lista{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.globo .lista li{position:relative; padding-left:20px; font-size:.95rem; line-height:1.45}
.globo .lista li::before{content:''; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--cian)}
.globo .lista b{color:var(--cian2); font-weight:600}

/* ⛔ Aqui vivia `.reja.conversa` y `.marca--media`: la composicion vieja de
   elegir grupo —Nodite mediano a un lado y las opciones en columna aparte—.
   Se fue con la observacion 6 y no la usa ninguna pantalla. En git, en e29acfb. */

/* Cuando no hay opciones, la pantalla se centra: portada y salida directa. */
.reja.centro{grid-template-columns:minmax(0,860px); justify-content:center; text-align:left}
/* ⚠️ La de elegir grupo pide mas ancho: Nodite GRANDE y un globo con seis
   frases dentro no caben en 860 px sin estrujar el texto. */
.reja.menu{grid-template-columns:minmax(0,1090px)}
/* Dos pantallas piden mas sitio dentro del globo: el relato y la respuesta. */
.entrada--menu .globo--ancho{font-size:.9rem}
.reja.centro .der{display:none}
.globo{flex:1; position:relative; min-width:0; background:var(--panel);
  border:1px solid var(--linea); border-radius:var(--radio); padding:16px 19px;
  font-size:.93rem; box-shadow:var(--sombraCaja)}
.globo::before{content:''; position:absolute; left:-7px; bottom:20px; width:12px; height:12px;
  background:var(--panel); border-left:1px solid var(--linea); border-bottom:1px solid var(--linea);
  transform:rotate(45deg)}
.globo .cuenta{display:block; margin-top:9px; padding-top:8px;
  border-top:1px solid var(--linea); font-size:.79rem; color:var(--tenue)}

h1,h2{font-family:var(--titular); letter-spacing:-.015em; margin:0}
h1{font-size:2.05rem; line-height:1.12}
h1 span{color:var(--cian2); display:block}
h2{font-size:1.5rem; line-height:1.15}
h2 span{color:var(--cian2); display:block}
.apoyo{margin-top:11px; font-size:.9rem; color:var(--suave); max-width:52ch}
.apoyo b{color:var(--tinta); font-weight:600}

/* ══ ELEGIR GRUPO ═════════════════════════════════════════════════════════
   ⭐ Vuelve la estructura de la entrada: vertical, centrada, logo grande y
   Nodite GRANDE. ⛔ Se acabó la columna de opciones al lado — eso era un
   formulario con una ilustración de adorno. */
.entrada--menu{gap:0}
.entrada--menu h1{font-size:1.95rem; max-width:23ch}
/* ⭐ `--fig` es el alto del personaje, y hace falta como variable porque de el
   sale DONDE cae su boca — y ahi es donde tiene que nacer el globo. */
.entrada--menu{--fig:min(33vh,260px)}
/* ⚠️ `stretch`, ⛔ NUNCA `center`: con `center`, una columna mas alta que la
   fila se sale por arriba y por abajo en vez de limitarse —y al desplegar los
   doce pasos el globo se comia el boton de abajo—. Con `stretch`, la columna
   toma el alto de la fila y su contenido se centra dentro. */
.entrada--menu .nodite{margin:13px 0 0; gap:18px; align-items:stretch;
  width:100%; max-width:910px; text-align:left; min-height:0; flex:0 1 auto}
/* ⛔⛔ ANCHO FIJO, y esta es la causa que costo encontrar: las nueve poses NO
   miden lo mismo de ancho —van de 0,52 a 0,67 de proporcion, un 28 % de
   diferencia—. Con el ancho libre, cambiar de gesto movia el borde del globo
   unos pixeles, y un texto que iba justo saltaba de una linea a dos.
   ⭐ Se reserva el ancho de la pose MAS ancha: asi ninguna se recorta y el
   globo no se mueve jamas. */
.entrada--menu .fig{height:var(--fig); width:calc(var(--fig) * 0.67);
  object-fit:contain; align-self:center}
/* La columna de lo que Nodite dice: su titulo y su globo, uno sobre otro.
   ⭐ El titulo vive AQUI para quedar centrado sobre el globo. */
/* ⚠️ La cadena de `min-height:0` llega hasta el globo: sin ella, al desplegar
   los doce pasos el globo crecia por encima del pie y se lo comia. */
.entrada--menu{max-height:100%; min-height:0}
.entrada--menu .nodite{min-height:0}
.dice{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center}
.entrada--menu .globo{min-height:0; display:flex; flex-direction:column}
/* ⭐ Lo que se desplaza es el CONTENIDO, no el globo: asi el icono del teclado
   se queda anclado en su esquina en vez de irse con el desplazamiento. */
/* ⚠️ `scrollbar-gutter` reserva el hueco de la barra SIEMPRE. Sin el, la barra
   aparecia al enfocar una opcion, robaba ancho, y el texto de al lado saltaba
   de una linea a dos — que es justo lo que Anthony vio. */
.globo .cont{min-height:0; overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin;
  scrollbar-color:var(--linea2) transparent}
.globo .cont::-webkit-scrollbar{width:5px}
.globo .cont::-webkit-scrollbar-thumb{background:var(--linea2); border-radius:3px}
.dice > *{width:100%}
.dice .marca--grande{width:auto; margin-bottom:11px}
.entrada--menu h1{text-align:center; margin:0 0 11px; max-width:none}

/* ⚠️ El pico del globo NO va en el pie: va a la altura de la BOCA de Nodite,
   que es de donde sale lo que dice. ⛔ La altura NO se puede calcular en CSS
   —el globo y el personaje son hermanos de alturas distintas, y encima el
   titulo empuja el globo hacia abajo—, asi que la mide el guion y la deja
   aqui. El 50 % es el respaldo por si algo fallara. */
.globo--menu::before,.globo--relato::before{top:var(--pico,50%); bottom:auto}

/* ⭐⭐ EL CAMBIO DE FONDO: las seis opciones SON LO QUE NODITE DICE.
   Elegir una es contestarle a alguien, ⛔ no rellenar un campo. */
.globo--menu{padding:12px 14px 13px}
.menu{display:flex; flex-direction:column}
/* ⭐ Lo elegible, separado de lo que se cuenta: su linea, su aire y su propio
   fondo. Asi se ve de un vistazo donde termina lo que el dice y donde empieza
   lo que te toca a ti. */
.menu--aparte{margin-top:12px; padding-top:11px; border-top:1px solid var(--linea);
  gap:6px}
.menu--aparte .op--globo{background:var(--panel2); border:1px solid var(--linea)}
.menu--aparte .op--globo::before{display:none}
.menu--aparte .op--globo:hover{border-color:var(--linea2)}
.op--globo{background:none; border:0; border-radius:9px; box-shadow:none;
  padding:8px 11px; position:relative}
/* La línea que separa una frase de la siguiente. Se retira alrededor de la
   opción activa, para que el sombreado se lea limpio. */
.op--globo + .op--globo::before{content:''; position:absolute; left:11px; right:11px; top:0;
  height:1px; background:var(--linea); transition:opacity .15s}
.op--globo:hover,.op--globo.encima{background:var(--panel2)}
.op--globo.encima{box-shadow:0 0 0 1px var(--cian)}
.op--globo:hover::before,.op--globo.encima::before,
.op--globo:hover + .op--globo::before,.op--globo.encima + .op--globo::before{opacity:0}

/* ⌨️ LA AYUDA DEL TECLADO: aparece al entrar y SE RETIRA sola.
   ⛔ Nunca fija: una instrucción que se lee una vez y se queda para siempre
   deja de ser ayuda y pasa a ser ruido. ⭐ El icono SÍ se queda — para quien
   llegó tarde o quiere volver a mirarlo. Una ayuda que desaparece del todo no
   se puede recuperar. */
/* ⭐ En que pregunta vas, en la esquina del globo. ⛔ Antes era una linea de
   texto al pie —«son tres preguntas, ni una mas»— que decia lo mismo en cada
   pantalla y no decia lo unico que importa: por cual vas. */
.cuantas{position:absolute; top:9px; left:12px; z-index:2; display:inline-flex;
  align-items:baseline; gap:4px; padding:3px 9px; border-radius:999px;
  background:var(--panel2); border:1px solid var(--linea2);
  font:600 .82rem var(--titular); color:var(--cian2)}
.cuantas i{font:500 .66rem var(--mono); font-style:normal; color:var(--tenue)}
.globo--menu:has(.cuantas) .cont{padding-top:22px}
.kbd{position:absolute; top:9px; right:10px; z-index:2; line-height:0; cursor:pointer;
  background:none; border:1px solid var(--linea); border-radius:7px; padding:3px 5px;
  color:var(--tenue); transition:border-color .15s,color .15s}
.kbd:hover{border-color:var(--cian); color:var(--cian2)}
/* ⚠️ Y va FUERA del globo, al lado del icono. Dentro tapaba las dos primeras
   opciones: una ayuda que esconde justo aquello para lo que ayuda no sirve. */
.tip{position:absolute; top:4px; left:calc(100% + 13px); z-index:3; width:238px;
  background:var(--panel2); border:1px solid var(--linea2); border-radius:10px;
  padding:9px 12px; font-size:.78rem; line-height:1.45; color:var(--suave);
  box-shadow:var(--sombraFlota);
  opacity:0; transform:translateX(-6px); pointer-events:none;
  transition:opacity .3s,transform .3s}
.tip::before{content:''; position:absolute; left:-5px; top:13px; width:9px; height:9px;
  background:var(--panel2); border-left:1px solid var(--linea2);
  border-bottom:1px solid var(--linea2); transform:rotate(45deg)}
.tip.visible{opacity:1; transform:none}
/* Si a la derecha no cabe, baja debajo del globo. ⛔ Nunca encima de la lista. */
@media (max-width:1330px){
  .tip{left:auto; right:8px; top:calc(100% + 10px); transform:translateY(-6px)}
  .tip::before{left:auto; right:16px; top:-5px; transform:rotate(135deg)}
}
.tip b{color:var(--cian2); font-weight:600}
.tecla{display:inline-block; min-width:17px; text-align:center; padding:0 4px;
  border:1px solid var(--linea2); border-bottom-width:2px; border-radius:4px;
  font:500 .74rem var(--mono); color:var(--tinta)}

/* ⭐ EL RELATO, EN PREGUNTAS Y EN EL GLOBO. Antes eran cuatro párrafos grises
   siempre a la vista, sin caja: el bloque menos legible del sitio. En preguntas
   cada una da permiso a parar — se leen dos y se salta a la que interesa. */
.globo--relato{padding:14px 17px 15px}
.qa + .qa{margin-top:11px; padding-top:11px; border-top:1px solid var(--linea)}
.qa > b{display:block; font:600 .93rem var(--titular); color:var(--cian2); margin-bottom:3px}
.qa p{font-size:.87rem; line-height:1.55; color:var(--suave)}
.qa p b{color:var(--tinta); font-weight:600}
.qa a{color:var(--cian2); text-decoration:none; border-bottom:1px dotted var(--linea2)}
.qa a:hover{border-color:var(--cian)}

/* ⭐ El globo se renueva con un fundido corto: se lee como «Nodite se puso a
   contar», ⛔ no como un salto a otra pantalla. */
@keyframes dice{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.globo--menu,.globo--relato{animation:dice .28s ease-out}

/* Las acciones que NO son elegir un grupo. ⭐ Y las dos entran en el recorrido
   de las flechas: sin eso, quien navega sin ratón se queda encerrado. */
.secundarias{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 20px; margin-top:15px}
.llamada{background:none; cursor:pointer; color:var(--cian2);
  border:1px dashed var(--linea2); border-radius:999px; padding:8px 17px;
  font:500 .87rem var(--texto); transition:all .15s}
.llamada:hover{border-style:solid; border-color:var(--cian); background:var(--panel)}
/* ⛔ «Volver» era texto gris suelto y no parecia elegible: nadie lo usaba.
   Ahora tiene la misma pastilla que las demas acciones —se ve que se puede
   pulsar— y se distingue por el tono, no por parecer menos. */
.secundarias .atras{align-self:auto; color:var(--suave);
  border:1px solid var(--linea2); border-radius:999px; padding:8px 17px;
  font:500 .87rem var(--texto); transition:all .15s}
.secundarias .atras:hover{border-color:var(--cian); color:var(--tinta); background:var(--panel)}
.llamada.encima,.secundarias .atras.encima{color:var(--tinta); background:var(--panel2);
  border-style:solid; border-color:var(--cian); box-shadow:0 0 0 1px var(--cian)}

/* Las respuestas. */
.ops{display:flex; flex-direction:column; gap:6px; overflow-y:auto; min-height:0;
  padding:2px 2px 4px; scrollbar-width:thin; scrollbar-color:var(--linea) transparent}
.op{display:block; width:100%; text-align:left; cursor:pointer; color:var(--tinta);
  background:var(--panel); border:1px solid var(--linea); border-radius:12px;
  padding:9px 14px; font:500 .93rem/1.3 var(--texto);
  transition:border-color .15s,background .15s,transform .12s}
.op:hover{border-color:var(--cian); background:var(--panel2)}
.op:active{transform:scale(.995)}
/* ⭐ La opción sobre la que estás con el teclado. Sin esto, las flechas no
   sirven de nada: hay que VER dónde estás para poder pulsar Enter. */
.op.encima{border-color:var(--cian); background:var(--panel2);
  box-shadow:0 0 0 1px var(--cian), 0 6px 18px var(--halo2)}
.op small{display:block; font:400 .77rem/1.3 var(--texto); color:var(--suave); margin-top:2px}
/* ⭐ La salida directa: una opcion MAS, del mismo tamano. Se distingue por el
   color, ⛔ no por ser pequena — una opcion pequena se lee como «no me elijas». */
.op.wa{border-color:var(--waBorde); background:var(--waFondo); margin-top:4px}
.op.wa:hover{border-color:var(--wa)}
.op.wa::before{content:''; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--wa); margin-right:9px; vertical-align:middle}
.atras{align-self:flex-start; background:none; border:0; cursor:pointer; color:var(--tenue);
  font:400 .84rem var(--texto); padding:9px 0 0}
.atras:hover{color:var(--cian2)}

/* El pie. */
/* ══ El pie ═══════════════════════════════════════════════════════════════
   ⭐ Rehecho: la versión anterior era una tira de datos sueltos, todos con el
   mismo peso, y no se leía nada. Ahora cada cosa dice QUÉ es. */
.pie{border-top:1px solid var(--linea); padding:15px 0 17px; font-size:.79rem;
  color:var(--tenue)}
.pie .datos{display:flex; flex-wrap:wrap; gap:16px 34px; align-items:flex-start}
.pie .dato{display:flex; flex-direction:column; gap:2px}
.pie .rot{font:500 .64rem var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tenue)}
.pie .val{color:var(--tinta); font-size:.86rem; font-weight:500}
.pie .val a{text-decoration:none}
.pie .val a:hover{color:var(--cian2)}
.pie .libro{margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--linea2); border-radius:9px; padding:8px 13px; text-decoration:none;
  color:var(--suave); font-size:.79rem}
.pie .libro:hover{border-color:var(--cian); color:var(--tinta)}
.pie .libro span{width:15px; height:19px; border:1.5px solid var(--cian2); border-radius:2px;
  display:inline-block; position:relative}
.pie .libro span::after{content:''; position:absolute; left:3px; right:3px; top:4px; height:1.5px;
  background:var(--cian2); box-shadow:0 4px 0 var(--cian2), 0 8px 0 var(--cian2)}
.pie .val--wa a{display:inline-flex; align-items:center; gap:7px}
.pie .val--wa svg{color:var(--wa)}
.tema{margin-left:10px; align-self:center; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:none; border:1px solid var(--linea2); color:var(--suave); transition:all .15s}
.tema:hover{border-color:var(--cian); color:var(--cian2); background:var(--panel)}
.tema .sol{display:none}
html[data-tema=claro] .tema .sol{display:block}
html[data-tema=claro] .tema .luna{display:none}
.pie .redes{display:inline-flex; gap:6px; margin-right:6px}
.red{display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--linea); color:var(--tenue); transition:all .15s}
.red:hover{border-color:var(--cian); color:var(--cian2); background:var(--panel)}
.pie .suelen{margin-top:13px; padding-top:11px; border-top:1px solid var(--linea)}
/* ⭐ El rótulo en su propia línea, como los de los datos. ⛔ En la misma línea
   que el primer enlace parecía parte de la frase. */
.pie .suelen > .rot{display:block; margin-bottom:7px}
.pie .suelen .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:5px 22px}
.pie .suelen a{color:var(--suave); text-decoration:none; font-size:.76rem; line-height:1.4;
  position:relative; padding-left:12px; display:block}
/* La marca de lista: sin ella, tres columnas de texto se leen como un bloque. */
.pie .suelen a::before{content:''; position:absolute; left:0; top:.52em; width:4px; height:4px;
  border-radius:50%; background:var(--linea2)}
.pie .suelen a:hover{color:var(--cian2)}
.pie .suelen a:hover::before{background:var(--cian)}
@media (max-width:1100px){ .pie .suelen .cols{grid-template-columns:repeat(2,1fr)} }
.pie .legal{align-items:center; display:flex; flex-wrap:wrap; gap:5px 18px; margin-top:13px; padding-top:11px;
  border-top:1px solid var(--linea); font-size:.75rem}
.pie .legal a{color:var(--tenue); text-decoration:none}
.pie .legal a:hover{color:var(--cian2)}

/* ⭐ El personaje, en grande. Es lo primero que se ve al entrar. */
.figuron{display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:0; position:relative}
.figuron img{max-height:min(52vh,430px); width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 34px var(--sombra))}
.globo--suelto{max-width:min(340px,92%); margin-top:12px; font-size:.92rem; text-align:center}
.globo--suelto::before{left:50%; margin-left:-6px; top:-7px; bottom:auto;
  border:0; border-left:1px solid var(--linea); border-top:1px solid var(--linea)}

/* ⭐ Las dos salidas de la portada tambien son opciones del globo: el visitante
   elige contestandole a el. Se distinguen por el color, ⛔ nunca por el tamano. */
.op--ir{color:var(--cian2)}
/* ⛔ Era un verde palido que sobre fondo claro casi no se leia. Ahora es el
   verde de WhatsApp de verdad, y cada tema tiene el suyo. */
.op--wa2{color:var(--waTexto); text-decoration:none}
.op--wa2::before{content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--wa); margin-right:8px; vertical-align:middle}
.menu--aparte .op--wa2{border-color:var(--waBorde); background:var(--waFondo)}
.op--wa2:hover,.op--wa2.encima{background:var(--waFondo); border-color:var(--wa)}
.op--wa2.encima{box-shadow:0 0 0 1px var(--wa)}
/* Un enlace no es un boton: hay que devolverle la caja. */
a.op--globo{display:block; width:100%; text-align:left}

/* ══ La respuesta ═════════════════════════════════════════════════════════
   ⛔ Ya no tiene caja propia: vive DENTRO del globo, porque es Nodite quien te
   dice por donde empezar y no un panel que aparece al lado. */
.eyebrow{display:block; font:500 .7rem var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:7px}
.resp .frase{font-size:1.02rem; line-height:1.45; margin-bottom:13px}
.dicho{border-left:2px solid var(--linea2); padding-left:12px; margin-bottom:14px;
  font-size:.83rem; color:var(--tenue)}
.dicho b{display:block; color:var(--suave); font-weight:500}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  border:0; border-radius:12px; cursor:pointer; text-decoration:none;
  font:600 .97rem var(--texto); padding:13px 20px; background:var(--wa); color:var(--waTinta)}
.btn--wa2{background:var(--wa); color:var(--waTinta)}
.btn--linea{background:transparent; color:var(--suave); border:1px solid var(--linea)}
.btn--linea:hover{border-color:var(--linea2); color:var(--tinta); filter:none}
.btn:hover{filter:brightness(1.07)}
.nota{margin-top:8px; font-size:.78rem; color:var(--tenue)}
/* ⛔ Los modificadores VAN DESPUES de .btn: si van antes, .btn los pisa y los
   dos botones de la portada salen del mismo color. */
/* Dentro del globo el boton de WhatsApp se marca como todo lo demas. */
.globo .btn.encima{box-shadow:0 0 0 2px var(--tinta)}
.mas.encima{color:var(--tinta); box-shadow:0 0 0 1px var(--cian); border-radius:8px}

/* ⭐ Lo que el visitante conto, arriba y fijo: no se borra mientras decide. */
.tuyo{border-left:2px solid var(--cian); padding:2px 0 2px 11px; margin-bottom:12px;
  font-size:.83rem; color:var(--tenue)}
.tuyo b{display:block; color:var(--suave); font-weight:500; margin-bottom:1px}

/* Las cosas que se abren al llegarles la flecha. */
.abre .op--abre{padding-right:32px; position:relative}
.abre .op--abre::after{content:'▾'; position:absolute; right:12px; top:50%;
  transform:translateY(-50%); color:var(--tenue); transition:transform .2s}
.abre.abierto .op--abre::after{transform:translateY(-50%) rotate(180deg); color:var(--cian2)}
.abre .dentro{display:none; padding:2px 12px 10px}
.abre.abierto .dentro{display:block; animation:dice .24s ease-out}
.abre + .abre{margin-top:2px}
.promesa{margin-top:8px; font-size:.85rem; line-height:1.5; color:var(--tenue)}

/* ⭐ Los doce pasos, de uno en uno. ⛔ La lista de doce no cabia y no la leia
   nadie: habia que desplazarse por ella. */
.wiz{background:var(--panel2); border:1px solid var(--linea); border-radius:12px;
  padding:13px 15px 11px}
.wiz-cab{display:flex; align-items:baseline; gap:9px; margin-bottom:5px}
.wiz-cab i{font:600 .72rem var(--mono); font-style:normal; color:var(--cian2);
  border:1px solid var(--linea2); border-radius:6px; padding:2px 6px}
.wiz-cab b{font:600 .95rem var(--titular); color:var(--tinta)}
.wiz p{font-size:.87rem; line-height:1.5; color:var(--suave); min-height:2.6em}
.wiz-pie{display:flex; align-items:center; gap:12px; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--linea)}
.wiz-ir{background:none; border:1px solid var(--linea2); border-radius:8px; cursor:pointer;
  color:var(--suave); font-size:.9rem; line-height:1; padding:5px 10px; transition:all .15s}
.wiz-ir:hover:not([disabled]){border-color:var(--cian); color:var(--tinta)}
.wiz-ir[disabled]{opacity:.3; cursor:default}
.wiz-bolas{flex:1; display:flex; justify-content:center; gap:5px}
.wiz-bolas i{width:5px; height:5px; border-radius:50%; background:var(--linea2)}
.wiz-bolas i.hoy{background:var(--cian); transform:scale(1.4)}

/* La pestañita: se despliega AQUI. ⛔ Nunca manda a otra pagina a leer. */
.mas{width:100%; text-align:left; cursor:pointer; background:none; border:0;
  border-top:1px solid var(--linea); margin-top:14px; padding:12px 0 0;
  color:var(--cian2); font:500 .88rem var(--texto)}
.mas::after{content:' ▾'}
.mas[aria-expanded=true]::after{content:' ▴'}
.pasos{display:none; grid-template-columns:1fr 1fr; gap:7px 16px; margin-top:11px}
.pasos.abierto{display:grid}
.paso{display:grid; grid-template-columns:19px 1fr; gap:9px; font-size:.79rem; line-height:1.4}
.paso i{font:500 .7rem var(--mono); color:var(--cian2); font-style:normal; padding-top:2px}
.paso b{display:block; color:var(--tinta); font-weight:600}
.paso span{color:var(--tenue)}

/* ⚠️ Esto es la propuesta de ESCRITORIO. El telefono se trata aparte. */
@media (max-width:900px){
  .aviso{display:block}
  .pantalla{height:auto; overflow:visible}
  .reja{grid-template-columns:1fr; gap:24px}
  .relato{margin-top:16px}
  .pasos{grid-template-columns:1fr}
}
.aviso{display:none; background:#2A2410; border-bottom:1px solid #4A3F1C; color:#F2B134;
  font-size:.8rem; padding:9px 20px; text-align:center}