/* simedime · EL SISTEMA DE DISEÑO.
   Nada redondeado, sin sombras, sin degradados. El aire hace el trabajo.

   EL ORIGINAL ESTÁ EN sime-dime.html, la presentación. Ahí mandan los
   colores y las dos tipografías, y de ahí salen estos valores. Si alguna vez
   discrepan, manda la presentación y hay que corregir esto — no al revés.

   Corregido contra ella el 19/09/2026: el papel, la tinta y la línea estaban
   desviados de lo que decía la presentación, y la monoespaciada que usan los
   rótulos no se estaba cargando siquiera (salía la del sistema, distinta en
   cada ordenador). */

:root {
  /* Los cinco de la presentación, tal cual */
  --papel:  #FAF7F2;   /* fondo de página */
  --tinta:  #111214;   /* texto y bordes */
  --acento: #E1442A;
  --linea:  #E4DFD6;   /* separadores: fino y claro, sólo para separar */
  --gris:   #6E6E72;   /* texto secundario */

  --blanco: #FFFFFF;   /* fondo del panel */
  --gris2:  #3A3B40;   /* texto de cuerpo */
  --apagado:#8A867E;   /* los silencios, y el texto que aún no ha llegado */
  /* Para lo que está vacío y tiene que VERSE que está: la raya de un botón
     apagado, el círculo de una opción sin marcar, el compás que late. La
     línea de la presentación es demasiado clara para eso y desaparecía. */
  --hueco:  #C7C3BA;
  /* Verde: el único color que no estaba en las maquetas. Entra sólo como
     estado —«ésta ya ha contestado»— y nunca como adorno ni como fondo.
     Apagado a propósito, para que conviva con el acento sin pelearse. */
  --verde:  #1F6B4A;
  --acento2:#B33420;
  --crema:  #F6F4EF;   /* fondos de caja */
  --marca:  #FBD9D2;   /* frase marcada */
  --borde: 1.5px solid var(--tinta);
  /* SIN MARCO · 10/10/2026, pedido por María: «que respire todo más, quitar
     marco y fondo negro, más actual», y «fondo blanco, no crema». Lo que se
     dibuja alrededor de un campo, una fila o una caja pasa a ser una línea
     fina y clara; lo que se pulsa (botones, opciones) sigue con --borde. */
  --borde-fino: 1px solid var(--linea);
  --lectura: 1120px;   /* el ancho máximo del contenido */

  /* ── EL ANCHO · uno solo para TODAS las pantallas, home incluida ────────
     1120 px. El número sale de mirar dónde se ve:

       pantalla   margen a cada lado
       1280 px     80 px
       1440 px    160 px
       1512 px    196 px

     Siempre queda marco, que es lo que se pedía: ni el ancho de antes (900,
     que venía de una maqueta de 900×600 y se quedaba estrecho en el espejo,
     donde hay ocho textos largos) ni la pantalla entera.

     Por qué 1120 y no 1280, que es el ancho del deck de la presentación: en
     un portátil de 1280 —que son muchos— 1280 sería borde a borde y dejaría
     de leerse como un marco. 1120 se ve como marco en todas.

     Los renglones no se alargan al ensanchar: el texto tiene sus propios
     topes en caracteres (52ch la entradilla, 64ch la cita), no en píxeles. */
  --ancho: 1120px;

  /* 1280 × 738 DESDE EL 07/10/2026, pedido por María: «el canvas centrado,
     algo más grande, y fondo negro en el resto y en la portada». La misma
     proporción que el 1120 × 646 de antes. Lo de que en un portátil de 1280
     quede borde a borde se salva con el margen del body (16 px): el marco se
     encoge a lo que haya, y en alto también (ver --alto). */
  --ancho: 1280px;
  --alto: 738px;
  --fuera: #2B2C30;    /* lo de alrededor del lienzo */

  /* Las dos tipografías de la presentación. La mono es de los rótulos, los
     números y las etiquetas; la sans, de todo lo demás. */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  /* NEGRO ALREDEDOR Y EL LIENZO CENTRADO en los dos sentidos (07/10/2026).
     Grid y no flex, por lo de abajo: con una columna «minmax(0, 1fr)» el panel
     sí puede encogerse por debajo de su contenido. Si algo es más alto que la
     ventana, la fila crece y se baja como cualquier página: no se corta. */
  /* Un poco más gris que la tinta (María, 07/10/2026): el negro puro de
     alrededor pesaba más que el lienzo. */
  /* SIN MARCO DESDE EL 10/10/2026 (María): blanco de borde a borde, sin
     lienzo centrado ni gris alrededor. Retira el lienzo de 1280 × 738 del
     07/10; --ancho, --alto y --fuera se quedan sólo para lo que aún los lea. */
  background: var(--blanco);
  min-height: 100vh; min-height: 100svh;
  padding: 0;
  /* Nada de flex aquí: un hijo flexible no baja de su ancho de contenido y el
     panel se salía de la pantalla en el móvil. Centrar con margen es más terco. */
}
a { color: var(--acento); }
a:hover { color: var(--acento2); }

/* El panel. Un solo ancho para todas las pantallas, la portada incluida. */
.panel {
  width: 100%;
  min-width: 0;
  min-height: 100vh; min-height: 100svh;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
}

/* La cabecera, idéntica en las cuatro pantallas. */
.cabecera {
  min-height: 44px;
  width: 100%; max-width: calc(var(--lectura) + 120px); margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 22px clamp(18px, 5vw, 60px);
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cabecera .marca { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.cabecera .sujeto { font-size: 13px; color: var(--gris); }

/* ─── LA BANDA DEL MODO PRUEBAS ──────────────────────────────────────────
   Va arriba del todo, en acento y a todo el ancho, y no se puede cerrar.
   Es a propósito: lo que se está viendo son respuestas de VERDAD pero de
   otro día, y quien lo mire —en una demo, en una reunión— tiene que saberlo
   sin preguntar. Disimularlo sería justo lo que el proyecto no hace. */
.banda-pruebas {
  background: var(--acento); color: #FFFFFF;
  padding: 10px 22px; font-size: 12.5px; line-height: 1.45;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.banda-pruebas b {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}

/* ─── LOS CINCO PUNTOS ───────────────────────────────────────────────────
   Arriba de todas las pantallas del recorrido, con el paso actual marcado.
   Son cinco porque el recorrido tiene cinco paradas y no hay más: el espejo,
   ¿te reconoces?, la conclusión, dónde estás y el umbral.

   El nombre del paso sólo se enseña en el que toca. Los otros cuatro son un
   punto y nada más: decirlos todos sería otra lista que leer, y aquí lo que
   hace falta saber es «por dónde voy y cuánto queda», no los nombres. */
.pasos-puntos {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto; flex-shrink: 0;
}
.pasos-puntos .p {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hueco); flex-shrink: 0;
}
.pasos-puntos .p.hecho { background: var(--gris); }
.pasos-puntos .p.ahora { background: var(--acento); width: 9px; height: 9px; }
.pasos-puntos .nombre {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gris); margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .pasos-puntos .nombre { display: none; }
}

.cuerpo { padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; }
/* El contenido de cada pantalla: centrado, con un ancho de lectura y aire
   arriba. Crece hasta abajo para que el pie quede al fondo. */
.panel > .cuerpo {
  width: 100%; max-width: var(--lectura); margin: 0 auto; flex: 1 1 auto;
  padding: clamp(24px, 6vh, 72px) clamp(18px, 5vw, 60px) 40px;
}
.cuerpo.centrado { justify-content: center; gap: 22px; padding: 34px 40px; }

.antetitulo {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--acento); font-weight: 600;
}
.antetitulo.gris { color: var(--gris); }
h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 6px 0 0; }
h1.mediano { font-size: 29px; letter-spacing: -0.03em; line-height: 1.1; }
h1.grande { font-size: 36px; letter-spacing: -0.035em; line-height: 1.02; }
.entradilla { font-size: 14.5px; line-height: 1.5; color: var(--gris2); max-width: 52ch; }
.bajo { font-size: 13px; color: var(--gris); }
.etiqueta {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}

/* ─── BOCETOS ────────────────────────────────────────────────────────────
   Las pantallas del tramo de pago, portadas al sistema real para poder
   mirarlas a tamaño. No funcionan y no deben parecer que funcionan: por eso
   la banda de arriba. No se enlazan desde el producto. */
.banda-boceto {
  background: var(--tinta); color: var(--blanco);
  padding: 9px 22px; font-size: 12px; line-height: 1.4;
}
.banda-boceto b { font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* El asistente: gemas a la izquierda, conversación a la derecha */
.con-gemas { display: flex; align-items: stretch; min-height: 520px; }
.gemas {
  width: 216px; flex-shrink: 0; border-right: var(--borde);
  background: var(--crema); display: flex; flex-direction: column;
}
.gemas .quien { padding: 14px 16px; border-bottom: var(--borde); display: flex; flex-direction: column; gap: 3px; }
.gemas .quien b { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.gemas .quien span { font-size: 12px; color: var(--gris); }
.gemas .lista { padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.gema { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--apagado); }
.gema i { width: 9px; height: 9px; flex-shrink: 0; margin-top: 4px;
  border: 1.5px solid var(--hueco); box-sizing: border-box; font-style: normal; }
.gema.hecha { color: var(--tinta); }
.gema.hecha i { background: var(--tinta); border-color: var(--tinta); }
.gema.ahora { color: var(--tinta); font-weight: 600; }
.gema.ahora i { background: var(--acento); border-color: var(--acento); }

.charla { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.charla .donde { border-bottom: var(--borde); padding: 12px 20px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.charla .donde b { font-size: 14px; font-weight: 600; }
.charla .donde span { font-size: 12px; color: var(--gris); }
.charla .hilo { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.dice { max-width: 82%; font-size: 14px; line-height: 1.5; padding: 12px 14px; }
.dice.sime { border: var(--borde); background: var(--blanco); align-self: flex-start; }
.dice.ella { background: var(--crema); align-self: flex-end; color: var(--gris2); }
.opciones { display: flex; gap: 9px; align-self: flex-start; flex-wrap: wrap; }
.opciones span {
  border: var(--borde); min-height: 44px; display: flex; align-items: center;
  padding: 0 16px; font-size: 13.5px; font-weight: 600;
}
.opciones span.flojo { border-color: var(--linea); color: var(--gris); font-weight: 400; }
.escribir { border-top: var(--borde); padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.escribir .hueco { flex-grow: 1; font-size: 14px; color: var(--apagado); }
.escribir .boton { min-height: 40px; font-size: 13.5px; }

/* Las tareas: las gemas en cuadrícula y la cura al lado */
.con-cura { display: flex; align-items: stretch; }
.cuadricula { flex-grow: 1; padding: 26px 30px; min-width: 0; }
.rejilla-gemas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pieza { border: 1.5px solid var(--linea); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pieza .cuando { font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.pieza b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--apagado); }
.pieza span { font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.pieza.hecha { border-color: var(--tinta); background: var(--crema); }
.pieza.hecha b { color: var(--tinta); }
.pieza.ahora { border-color: var(--acento); border-width: 1.5px; }
.pieza.ahora .cuando { color: var(--acento); }
.pieza.ahora b { color: var(--tinta); }

.cura { width: 340px; flex-shrink: 0; border-left: var(--borde); background: var(--crema); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.tarea { display: flex; gap: 12px; align-items: flex-start; }
.tarea i { width: 18px; height: 18px; border: 1.5px solid var(--tinta); box-sizing: border-box; flex-shrink: 0; margin-top: 2px; font-style: normal; }
.tarea.hecha i { background: var(--tinta); }
.tarea b { font-size: 14.5px; font-weight: 600; display: block; }
.tarea span { font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.cura hr { border: 0; border-top: 1px solid var(--linea); margin: 0; }

@media (max-width: 860px) {
  .con-gemas, .con-cura { flex-direction: column; }
  .gemas, .cura { width: 100%; border-right: 0; border-left: 0; border-bottom: var(--borde); }
  .rejilla-gemas { grid-template-columns: 1fr; }
  .dice { max-width: 100%; }
}

/* La landing: la franja de abajo con los tres pasos */
.franja {
  border-top: var(--borde); background: var(--crema);
  padding: 20px 26px; display: flex; flex-direction: column; gap: 12px;
}
.franja .etiqueta { font-size: 10.5px; letter-spacing: 0.18em; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.paso { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.paso i {
  font-family: var(--mono); font-style: normal;
  font-size: 11px; color: var(--acento); font-weight: 600;
}
.paso b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.paso span { font-size: 12.5px; line-height: 1.45; color: var(--gris); }

/* El menú de la cabecera de la landing */
.menu { display: flex; gap: 20px; margin-left: auto; font-size: 12.5px; color: var(--gris); }
.menu a { color: var(--gris); text-decoration: none; }
.menu a:hover { color: var(--tinta); text-decoration: underline; }

/* El campo grande de la landing, con su botón pegado */
.campo-grande { display: flex; gap: 10px; align-items: stretch; max-width: 640px; flex-wrap: wrap; }
/* width:auto es imprescindible: la regla general de los campos les pone
   width:100%, y dentro de un flex eso empuja al botón a la línea de abajo. */
.campo-grande input { flex: 1 1 240px; width: auto; height: 54px; font-size: 16px; }
.campo-grande .boton { height: 54px; white-space: nowrap; }
h1.enorme { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; max-width: 15ch; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo .ayuda { font-size: 12.5px; color: var(--gris); }
input[type="text"], input[type="password"], input[type="email"], textarea {
  font-family: inherit; font-size: 15px; color: var(--tinta);
  border: var(--borde); background: var(--blanco);
  padding: 13px 14px; width: 100%; min-height: 52px;
}
textarea { min-height: 74px; line-height: 1.4; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -2px; }

/* El campo de contraseña, con su interruptor para verla.
   Sin icono de librería: el sistema no los usa. Una etiqueta mono en
   mayúsculas es lo que ya se usa para el texto de máquina. */
.campo-clave { position: relative; display: flex; }
.campo-clave input { padding-right: 96px; }
.ver-clave {
  position: absolute; right: 1.5px; top: 1.5px; bottom: 1.5px;
  border: 0; border-left: 1.5px solid var(--linea);
  background: var(--blanco); color: var(--gris);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 14px; cursor: pointer; min-width: 88px;
}
.ver-clave:hover { color: var(--tinta); background: var(--crema); }
.ver-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Botones */
.boton {
  font-family: inherit; font-size: 16px; font-weight: 600;
  background: var(--tinta); color: var(--blanco);
  border: var(--borde); min-height: 52px; padding: 0 28px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
}
.boton:hover { background: #000; }
/* Cuando el botón es un enlace, sin subrayado: es un botón, no una frase. */
a.boton { text-decoration: none; }
.boton[disabled] { background: var(--hueco); border-color: var(--hueco); cursor: not-allowed; }
/* Para los enlaces que hacen de botón: [disabled] no les vale. */
.boton.apagado { background: var(--hueco); border-color: var(--hueco); cursor: not-allowed; }
.boton.flojo { background: var(--blanco); color: var(--tinta); min-height: 44px; font-size: 14px; }
.fila { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Las tres opciones excluyentes de «¿te reconoces?» */
.opcion {
  border: var(--borde); background: var(--blanco); min-height: 56px;
  display: flex; align-items: center; padding: 0 18px;
  font-size: 16px; font-weight: 600; gap: 12px; cursor: pointer;
  width: 100%; text-align: left; font-family: inherit; color: var(--tinta);
}
.opcion .punto {
  width: 16px; height: 16px; border: var(--borde); border-radius: 50%; flex-shrink: 0;
}
.opcion[aria-checked="true"] { border-width: 2.5px; }
.opcion[aria-checked="true"] .punto { background: var(--tinta); }

/* Las filas del espejo: a todo el ancho, una debajo de otra. Las respuestas
   reales son largas —dos mil caracteres y pico— y en columna estrecha no hay
   quien las lea. Medido contra respuestas de verdad, no contra la maqueta. */
.filas { display: flex; flex-direction: column; gap: 12px; }

.casa { border: var(--borde); background: var(--blanco); }

/* Plegadas por defecto: ocho respuestas largas hacen una página de tres
   metros y el botón de seguir se queda en el sótano. Se abre la que interese.
   Va con <details>, así que funciona con teclado y sin JavaScript. */
.casa > summary {
  padding: 12px 14px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px;
}
.casa > summary::-webkit-details-marker { display: none; }
.casa[open] > summary { border-bottom: var(--borde); }
.casa > summary:hover { background: var(--crema); }
.casa > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; }
.casa .izq { display: flex; align-items: center; gap: 11px; min-width: 0; }
.casa .pliegue {
  font-family: var(--mono); font-size: 14px;
  color: var(--gris); width: 12px; flex-shrink: 0;
}
.casa[open] .pliegue::before { content: '–'; }
.casa:not([open]) .pliegue::before { content: '+'; }
.casa .quien { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.casa .cuerpo-casa { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.cuantas { font-family: var(--mono); font-size: 11px; color: var(--gris); }
.abrir-todas {
  align-self: flex-start; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1.5px solid var(--linea);
  color: var(--gris); cursor: pointer; padding: 2px 0;
}
.abrir-todas:hover { color: var(--tinta); border-color: var(--tinta); }

/* El estado, en mono como las etiquetas de máquina del sistema. */
.estado {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris); white-space: nowrap;
}
.estado.contesto { color: var(--verde); font-weight: 700; }
.estado.callada  { color: var(--apagado); }
.estado.fallo    { color: var(--acento); }

/* Un compás de espera que no es una ruedecita: tres rayas del sistema que
   laten por turnos mientras esa IA sigue pensando. */
.compas { display: inline-flex; gap: 3px; }
.compas i { width: 4px; height: 11px; background: var(--hueco); display: block; }
.compas i:nth-child(1) { animation: pensar 1.2s ease-in-out infinite; }
.compas i:nth-child(2) { animation: pensar 1.2s ease-in-out .2s infinite; }
.compas i:nth-child(3) { animation: pensar 1.2s ease-in-out .4s infinite; }
@keyframes pensar { 0%,100% { background: var(--hueco) } 50% { background: var(--tinta) } }
@media (prefers-reduced-motion: reduce) { .compas i { animation: none } }

.reloj-casa { font-family: var(--mono); font-size: 11px; color: var(--gris); }

/* Cada una de las dos formulaciones dentro de su casa */
.dicho-largo { display: flex; flex-direction: column; gap: 6px; }
.dicho-largo + .dicho-largo { border-top: 1px solid var(--linea); padding-top: 14px; }
.dicho-largo .texto { font-size: 14px; line-height: 1.55; color: var(--gris2); }

/* Las columnas del espejo (la maqueta original; se conserva por si vuelve) */
.columnas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.col { border: var(--borde); background: var(--blanco); display: flex; flex-direction: column; min-width: 0; }
.colcab {
  border-bottom: var(--borde); padding: 9px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.punto-estado { width: 9px; height: 9px; background: var(--hueco); border-radius: 50%; flex-shrink: 0; }
.punto-estado.listo { background: var(--tinta); }
.punto-estado.malo  { background: var(--acento); }
.punto-estado.esperando { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.colcuerpo { padding: 12px; font-size: 12.5px; line-height: 1.5; color: var(--gris2); flex-grow: 1; }
.formulacion { display: flex; flex-direction: column; gap: 5px; }
.formulacion + .formulacion { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 12px; }
.formulacion .de-que {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}
.texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.colcuerpo, .lateral .que, .afirmacion { min-width: 0; overflow-wrap: anywhere; }
.silencio { color: var(--apagado); font-style: italic; }
.fallo { color: var(--acento); }

/* La columna de la izquierda de «¿te reconoces?» */
.dos-columnas { display: flex; align-items: stretch; }
.lateral {
  width: 322px; flex-shrink: 0; border-right: var(--borde);
  background: var(--crema); display: flex; flex-direction: column;
}
.lateral .titulo { padding: 14px 16px; border-bottom: var(--borde); }
.lateral .lista { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 520px; }
.lateral .dicho { display: flex; flex-direction: column; gap: 5px; }
.lateral .quien { font-size: 11px; font-weight: 700; }
.lateral .que { font-size: 12px; line-height: 1.45; color: var(--gris2); }

/* El umbral: dos caminos, uno al lado del otro */
.dos-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.camino {
  border: var(--borde); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.camino b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* El camino que el diseño quiere que se elija va en acento, como la maqueta. */
.camino.elegido { border-color: var(--acento); }
.camino .boton { align-self: flex-start; margin-top: 4px; }
.camino form { margin-top: 4px; }
@media (max-width: 860px) { .dos-caminos { grid-template-columns: 1fr; } }

/* Los montones del análisis, plegados como las filas del espejo: cuatro
   cabeceras con su cuenta y sólo una abierta de entrada. El número va en
   mono pequeño y en gris: es un dato, no una nota. */
.monton-plegado { border: var(--borde); background: var(--blanco); }
.monton-plegado + .monton-plegado { margin-top: 10px; }
.monton-plegado > summary {
  padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; gap: 11px;
}
.monton-plegado > summary::-webkit-details-marker { display: none; }
.monton-plegado[open] > summary { border-bottom: var(--borde); }
.monton-plegado > summary:hover { background: var(--crema); }
.monton-plegado > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; }
.monton-plegado .pliegue {
  font-family: var(--mono); font-size: 14px;
  color: var(--gris); width: 12px; flex-shrink: 0;
}
.monton-plegado[open] .pliegue::before { content: '–'; }
.monton-plegado:not([open]) .pliegue::before { content: '+'; }
.monton-plegado .titulo {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}
.monton-plegado .cuenta {
  font-family: var(--mono);
  font-size: 11px; color: var(--apagado); margin-left: auto;
}
.monton-plegado .dentro { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.monton-plegado .dentro > .bajo:first-child { margin: 0 0 2px; }

/* Los montones del análisis */
.monton { display: flex; flex-direction: column; gap: 9px; }
.afirmacion {
  border: var(--borde); background: var(--blanco); padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: start;
}
.afirmacion b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; grid-column: 1; }
.afirmacion .porque { font-size: 12.5px; line-height: 1.45; color: var(--gris); grid-column: 1 / -1; }
/* Quién lo sostiene: siempre a la vista, a la derecha, pequeño y en gris.
   Cabe de sobra y no compite con la afirmación. */
.afirmacion .quien {
  grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px; line-height: 1.5; color: var(--gris);
}
@media (max-width: 640px) {
  .afirmacion { grid-template-columns: 1fr; }
  .afirmacion .quien { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; }
}
.afirmacion.callada { border-color: var(--linea); background: var(--crema); }


.afirmacion.callada b { color: var(--apagado); font-style: italic; font-weight: 400; }
.cita { border-left: 3px solid var(--acento); padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--gris2); max-width: 64ch; }
.pie { border-top: 1.5px solid #DEDAD1; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.aviso { border: 1.5px solid var(--acento); padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.oculto { display: none !important; }

/* Móvil: la pasada de verdad es el paso 10, pero esto no puede romperse. */
@media (max-width: 860px) {
  .columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-columnas { flex-direction: column; }
  .lateral { width: 100%; border-right: 0; border-bottom: var(--borde); }
  .lateral .lista { max-height: 260px; }
  .cuerpo, .cuerpo.centrado { padding: 20px 18px; }
  h1, h1.grande, h1.mediano { font-size: 26px; }
  h1.enorme { font-size: 32px; max-width: none; }
  .pasos { grid-template-columns: 1fr; gap: 16px; }
  .menu { display: none; }
  .franja { padding: 18px; }
  .cabecera { padding: 8px 18px; }
  .pie { flex-direction: column; align-items: flex-start; }
  .pie .boton { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .columnas { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LA TANDA DEL 21/09/2026 · el recuadro fijo, el bocadillo y los pasos
 *
 * Todo lo de aquí abajo lleva el prefijo «sm-», que es el que usan los
 * bocetos de María. No es manía: al juntar pantallas hubo choques con
 * «opciones», «opcion» y «campo», que ya existían arriba con otra pinta y
 * rompían la maqueta sin decir nada. Un prefijo propio lo hace imposible.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* El ámbar es color NUEVO y entra sólo como estado del semáforo: «a medias»
     o «por mirar». Nunca como fondo ni como adorno. No estaba en la
     presentación porque allí no hay semáforos. */
  --ambar: #E8A33D;
}

/* ─── EL RECUADRO FIJO ───────────────────────────────────────────────────
   1120 × 646. El alto es el de la portada en 16:9 (1120 / 16 * 9 = 630) más
   los 16 px que ocupa la cabecera de más en las pantallas del recorrido, y
   sale así para que todas las pantallas tengan EXACTAMENTE el mismo marco:
   se pasa de una a otra y el recuadro no se mueve ni un píxel.

   Lo que no cabe se desplaza DENTRO, no estira el recuadro. Por eso la
   cabecera no se encoge y el cuerpo es el que lleva el scroll.

   Sólo se fija cuando hay sitio: por debajo de 1000 px de ancho el alto pasa
   a ser libre, porque un recuadro de 646 px en un móvil deja el contenido
   dentro de una ventanita de la que no se sale. */
/* SIN RECUADRO DESDE EL 10/10/2026: ya no hay alto fijo ni scroll dentro.
   La página crece y se baja como cualquier página. Lo único que queda del
   bloque de antes es el pie pegado abajo cuando el espejo o la lectura se
   alargan: si no, «Seguir» se va a seis mil píxeles. */
.panel.sm-recuadro.sm-crece > .cuerpo > .sm-pie {
  position: sticky; bottom: 0; z-index: 2; background: var(--blanco);
}
.panel.sm-recuadro > .cuerpo { gap: 28px; }


/* ─── EL BOCADILLO · el semáforo de todo el sitio ────────────────────────
   Sustituye a las bolitas del espejo, la lectura y tu web. Es un círculo con
   la esquina de abajo a la izquierda en pico —o sea, un bocadillo— con borde
   negro y fondo blanco, y dentro un punto del color del estado.

   El color va DENTRO y no en el borde a propósito: así el bocadillo se lee
   igual en las cuatro filas y lo único que cambia de una a otra es el punto.
   Un borde de color competiría con el acento y con la línea del recuadro. */
.sm-bocadillo {
  width: 19px; height: 19px; flex-shrink: 0;
  border: 1.5px solid var(--tinta);
  background: var(--blanco);
  border-radius: 50% 50% 50% 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sm-bocadillo i { width: 8px; height: 8px; border-radius: 50%; background: var(--hueco); display: block; }
.sm-bocadillo.verde i { background: var(--verde); }
.sm-bocadillo.ambar i { background: var(--ambar); }
.sm-bocadillo.rojo  i { background: var(--acento); }
.sm-bocadillo.gris  i { background: var(--hueco); }
/* Mientras se espera. El mismo latido que el compás del espejo. */
.sm-bocadillo.late i { animation: latido 1.4s ease-in-out infinite; }

/* ─── LOS CINCO PASOS, AHORA NAVEGABLES ──────────────────────────────────
   Cinco cuadrados arriba a la derecha. Los andados son enlaces y vuelven
   atrás; el actual va en acento; los que faltan, apagados y SIN enlace —un
   enlace a una pantalla que todavía no tiene nada que enseñar lleva a una
   pantalla vacía, y eso parece una avería.

   No van en la landing ni en el umbral: la landing es el paso 1 y el umbral
   está fuera del recorrido. */
.sm-pasos { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; align-items: center; }
.sm-pasos .p {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--hueco); color: var(--hueco);
  background: var(--blanco);
  font-family: var(--mono); font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.sm-pasos a.p.hecho { border-color: var(--tinta); color: var(--tinta); }
.sm-pasos a.p.hecho:hover { background: var(--tinta); color: var(--blanco); }
.sm-pasos a.p:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sm-pasos .p.ahora { border-color: var(--acento); color: var(--blanco); background: var(--acento); }

/* ─── EL NOMBRE DE QUIEN SE BUSCA ────────────────────────────────────────
   Dentro de la caja, en acento, encima del titular. Nunca en la cabecera:
   en la cabecera es un dato de sistema y aquí es de quién estamos hablando. */
.sm-sujeto {
  margin: 0; color: var(--acento);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.sm-sujeto + h1 { margin-top: 5px; }

/* ─── DOS COLUMNAS CON LÍNEA ─────────────────────────────────────────────
   La línea es de las que separan, así que va en --linea y no en --tinta. */
.sm-dos { display: flex; align-items: stretch; gap: 0; min-height: 0; }
.sm-dos > .sm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sm-dos > .sm-col:first-child { padding-right: 36px; }
.sm-dos > .sm-col + .sm-col { border-left: 1.5px solid var(--linea); padding-left: 36px; }

/* ─── LA LECTURA · un parámetro por línea ────────────────────────────────
   Bocadillo · qué se pregunta · qué sale. El valor a la derecha y en negrita:
   es la respuesta, y es lo que se lee de un vistazo bajando la columna. */
.sm-lectura { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.sm-param {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--linea);
}
.sm-param .sm-bocadillo { align-self: center; }
.sm-param .sm-que { font-size: 15px; flex: 1 1 auto; min-width: 0; }
.sm-param .sm-valor {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  text-align: right; flex-shrink: 0; max-width: 46%;
}
.sm-param .sm-valor.sm-flojo { font-weight: 400; color: var(--gris); }

/* ─── TU WEB · cinco comprobaciones, cada una desplegable ────────────────
   La misma flecha de árbol que el espejo: derecha plegada, abajo abierta. */
.sm-chequeos { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.sm-chequeo { border-bottom: 1px solid var(--linea); }
.sm-chequeo > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 2px; cursor: pointer; list-style: none;
}
.sm-chequeo > summary::-webkit-details-marker { display: none; }
.sm-chequeo > summary:hover { background: var(--crema); }
.sm-chequeo > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; }
.sm-chequeo .sm-que { font-size: 15px; flex: 1 1 auto; min-width: 0; }
.sm-chequeo .sm-valor {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-align: right; flex-shrink: 0; max-width: 40%;
}
.sm-chequeo .sm-valor.sm-flojo { font-weight: 400; color: var(--gris); }
.sm-chequeo .sm-dentro {
  padding: 0 2px 16px 35px; display: flex; flex-direction: column; gap: 10px;
}
.sm-chequeo .sm-porque { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris); }

/* «Ver» y la flecha, juntos a la derecha del todo. Al abrirse, «Ocultar». */
.sm-ver {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gris); flex-shrink: 0;
}
details[open] > summary .sm-ver::before { content: 'Ocultar'; }
details:not([open]) > summary .sm-ver::before { content: 'Ver'; }
/* EN INGLÉS TAMBIÉN, y esto se escapó la primera vez: este texto no lo pinta
   el JS, lo pone el CSS con `content`, así que la traducción de las pantallas
   no lo alcanzaba. Se engancha al `lang` del <html>, que `ponIdioma()` ya
   cambia. Lo vio María en «tu web»: todo en inglés y el «Ver» en castellano. */
html[lang="en"] details[open] > summary .sm-ver::before { content: 'Hide'; }
html[lang="en"] details:not([open]) > summary .sm-ver::before { content: 'Show'; }
.sm-flecha {
  width: 9px; height: 9px; flex-shrink: 0; border-right: 1.5px solid var(--gris);
  border-bottom: 1.5px solid var(--gris); transition: transform .12s linear;
}
details:not([open]) > summary .sm-flecha { transform: rotate(-45deg); }
details[open] > summary .sm-flecha { transform: rotate(45deg); }

/* ─── LAS OPCIONES DE ¿TE RECONOCES?, EN LISTA Y SIN CAJAS ───────────────
   Clase propia: «.opcion» ya existe arriba con caja y borde, y era uno de
   los choques que rompían la maqueta. */
.sm-lista { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.sm-op {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 2px; border-bottom: 1px solid var(--linea);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.sm-op:hover { background: var(--crema); }
.sm-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-op .sm-marca {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--hueco); background: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center;
}
.sm-op .sm-marca::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.sm-op input:checked + .sm-marca { border-color: var(--tinta); border-width: 2px; }
.sm-op input:checked + .sm-marca::before { background: var(--acento); }
.sm-op input:focus-visible + .sm-marca { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ─── LOS CAMPOS DE REFERENCIAS ──────────────────────────────────────────
   Clase propia por lo mismo: «.campo» ya existe y es otra cosa. */
.sm-campos { display: flex; flex-direction: column; gap: 12px; }
.sm-campo { display: flex; flex-direction: column; gap: 5px; }
.sm-campo > span { font-size: 13px; font-weight: 600; }
.sm-campo input { width: 100%; }
.sm-fila-enlace { display: flex; gap: 6px; align-items: center; }
.sm-fila-enlace input { flex: 1 1 auto; min-width: 0; }
.sm-fila-enlace .sm-quitar {
  flex-shrink: 0; width: 34px; height: 38px; border: 1.5px solid var(--linea);
  background: var(--blanco); color: var(--gris); font-size: 16px; cursor: pointer; line-height: 1;
}
.sm-fila-enlace .sm-quitar:hover { border-color: var(--tinta); color: var(--tinta); }
.sm-mas {
  align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gris); border-bottom: 1.5px solid var(--hueco);
}
.sm-mas:hover { color: var(--tinta); border-color: var(--tinta); }

/* ─── EL UMBRAL · dos cajas de la misma altura ───────────────────────────
   Contenido centrado en vertical. La derecha entera en acento, con el texto
   blanco y el botón blanco. */
.sm-cajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.sm-caja {
  border: var(--borde); background: var(--blanco); padding: 24px 26px;
  display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 0;
}
.sm-caja h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.sm-caja p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gris2); }
.sm-caja .sm-boton { align-self: flex-start; margin-top: 4px; }
.sm-naranja { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.sm-naranja h2, .sm-naranja p { color: var(--blanco); }
.sm-naranja .sm-blanco {
  background: var(--blanco); color: var(--tinta); border: 1.5px solid var(--blanco);
}
.sm-naranja .sm-blanco:hover { background: var(--crema); border-color: var(--crema); color: var(--tinta); }

/* ─── LA NOTA PEQUEÑA, y el pie de cada pantalla ─────────────────────────
   El pie no lleva raya arriba en estas pantallas: el recuadro ya cierra. */
.sm-nota { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.sm-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

@media (max-width: 860px) {
  .sm-dos { flex-direction: column; }
  .sm-dos > .sm-col:first-child { padding-right: 0; padding-bottom: 22px; }
  .sm-dos > .sm-col + .sm-col { border-left: 0; border-top: 1.5px solid var(--linea); padding-left: 0; padding-top: 22px; }
  .sm-cajas { grid-template-columns: 1fr; }
  .panel.sm-recuadro > .cuerpo { padding: 20px 18px; }
  .sm-param, .sm-chequeo > summary { flex-wrap: wrap; }
  .sm-param .sm-valor, .sm-chequeo .sm-valor { max-width: none; text-align: left; }
  .sm-pie { flex-direction: column; align-items: flex-start; }
  .sm-pie .boton { width: 100%; justify-content: center; }
}

/* ─── LO QUE DICEN LAS IAS, CON SU FORMA · 22/09/2026 ─────────────────────
   Las casas contestan en markdown y hasta hoy se pintaba en crudo: asteriscos
   a la vista y un muro de cinco mil caracteres. Esto le da la forma que la IA
   quiso darle, sin cambiar ni una palabra.

   Todo sale de los tokens que ya había. Ni un color nuevo: lo que manda aquí
   es la jerarquía de tamaño y peso, no el color, porque estos textos van
   dentro de una fila y no pueden competir con el título de la pantalla.

   Y el pre-wrap se quita: ahora los saltos de línea los pone la estructura.
   Si se dejara, cada párrafo llevaría el hueco doble. */
.sm-md { white-space: normal; }
.sm-md > *:first-child { margin-top: 0; }
.sm-md > *:last-child { margin-bottom: 0; }
.sm-md p { margin: 0 0 10px; }
.sm-md strong { font-weight: 700; color: var(--tinta); }
.sm-md em { font-style: italic; }
.sm-md code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--crema); border: 1px solid var(--linea);
  padding: 1px 5px; overflow-wrap: anywhere;
}

/* Los títulos de dentro de una respuesta. El más grande es más pequeño que
   el h1 de la pantalla a propósito: esto es contenido de una fila. */
/* El aire de arriba es lo que separa una sección de la anterior, y mirando la
   pantalla con una respuesta de verdad se veía que 16 px no bastaban: los
   títulos se leían como una línea más en negrita. Y el salto de tamaño con el
   cuerpo (14 px) tenía que ser mayor por lo mismo. */
.sm-md .sm-md-titulo {
  margin: 20px 0 8px; font-weight: 700; color: var(--tinta);
  letter-spacing: -0.015em; line-height: 1.25;
}
.sm-md h4.sm-md-titulo { font-size: 17px; }
.sm-md h5.sm-md-titulo { font-size: 15px; }
.sm-md h6.sm-md-titulo { font-size: 13.5px; }
/* Un rótulo en mono para los títulos más hondos: a partir del cuarto nivel
   el tamaño ya no distingue nada, y la tipografía sí. */
.sm-md h6.sm-md-titulo { font-family: var(--mono); font-weight: 500;
  text-transform: none; color: var(--gris2); }

.sm-md .sm-md-lista { margin: 0 0 10px; padding-left: 20px; }
.sm-md .sm-md-lista li { margin: 0 0 5px; padding-left: 2px; }
.sm-md .sm-md-lista li::marker { color: var(--hueco); }
.sm-md ol.sm-md-lista li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--gris); }

/* Una cita dentro de una respuesta lleva la línea del sistema, no el acento:
   el acento es de lo que nosotras destacamos, no de lo que cita un modelo. */
.sm-md .sm-md-cita {
  margin: 0 0 10px; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--linea); color: var(--gris);
}
.sm-md hr { border: 0; border-top: 1px solid var(--linea); margin: 14px 0; }

/* Una tabla de una respuesta. Se puede desplazar a lo ancho ella sola: una
   tabla de cinco columnas no puede ensanchar la fila que la contiene. */
.sm-md .sm-md-tabla {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; margin: 0 0 12px; font-size: 13px;
}
.sm-md .sm-md-tabla th, .sm-md .sm-md-tabla td {
  border: 1px solid var(--linea); padding: 7px 12px; text-align: left;
  vertical-align: top;
}
.sm-md .sm-md-tabla th {
  background: var(--crema); font-weight: 600; color: var(--tinta);
  font-size: 12px; letter-spacing: 0.01em;
}

/* Un enlace que dijo la IA: se lee, y su dirección se ve. NO es clicable, y
   eso es a propósito — está contado en sime.js. */
.sm-md .sm-md-enlace { font-weight: 600; color: var(--tinta); }
.sm-md .sm-md-url { font-family: var(--mono); font-size: 0.82em; color: var(--gris);
  overflow-wrap: anywhere; }

/* ─── EL CONMUTADOR DE IDIOMA · 22/09/2026 ────────────────────────────────
   Dos letras en mono, arriba a la derecha, con la puesta en acento. Va en la
   cabecera, y en las pantallas del recorrido queda a la izquierda de los
   cinco pasos: el idioma es de toda la visita y los pasos son de dónde estás,
   así que no se mezclan. */
.sm-idiomas { display: flex; gap: 0; margin-left: auto; flex-shrink: 0; }
.cabecera .sm-pasos + .sm-idiomas { margin-left: 16px; }
.sm-idioma {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  padding: 3px 8px; min-height: 0; line-height: 1.5;
  background: transparent; color: var(--gris);
  border: 1px solid var(--linea); cursor: pointer;
}
.sm-idioma + .sm-idioma { border-left: 0; }
.sm-idioma:hover { color: var(--tinta); border-color: var(--hueco); }
.sm-idioma:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sm-idioma.sm-puesto {
  background: var(--acento); border-color: var(--acento); color: var(--blanco);
  font-weight: 500;
}
.sm-idioma.sm-puesto:hover { color: var(--blanco); border-color: var(--acento); }

/* ─── EL SALTADOR DE PANTALLAS · 07/10/2026 ───────────────────────────────
   Sólo para quien tiene el pase (ver pintaElSaltador en sime.js). Pequeño,
   en mono, fuera del lienzo: es una herramienta nuestra, no parte del
   producto, y no debe parecerlo. */
/* «simedime / Jump»: su cuenta, al lado de la marca (13/10/2026, María). */
.sm-barra-cuenta { font-size: 16px; color: var(--hueco); margin: 0 -6px; }
a.sm-tu-cuenta { font-size: 16px; font-weight: 500; color: var(--tinta);
  text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.sm-tu-cuenta:hover { color: var(--acento); text-decoration: underline !important; }
/* Dentro de su cuenta: sin raya y en naranja, como el paso en el que se está. */
a.sm-tu-cuenta[aria-current="page"], a.sm-tu-cuenta[aria-current="page"]:hover { color: var(--acento); text-decoration: none !important; cursor: default; }
.sm-saltador { position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sm-saltador > button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--tinta); color: #FFFFFF; border: 1px solid var(--gris2);
  padding: 6px 10px; cursor: pointer; opacity: .75;
}
.sm-saltador > button:hover, .sm-saltador > button[aria-expanded="true"] { opacity: 1; border-color: var(--acento); }
.sm-saltador nav {
  background: var(--tinta); border: 1px solid var(--gris2); padding: 8px 0;
  display: flex; flex-direction: column; min-width: 210px; max-height: 70vh; overflow-y: auto;
}
.sm-saltador nav[hidden] { display: none; }
.sm-saltador nav p { margin: 0 12px 6px; font-size: 11px; line-height: 1.4; color: #B9B9BD; max-width: 200px; }
.sm-saltador nav a {
  font-family: var(--mono); font-size: 11.5px; color: #FFFFFF; text-decoration: none; padding: 5px 12px;
}
.sm-saltador nav a:hover { background: var(--gris2); }
.sm-saltador nav a[aria-current="page"] { color: #F0894E; }
@media print { .sm-saltador { display: none; } }

/* ─── SIN MARCO · 10/10/2026 ─────────────────────────────────────────────
   Va al final a propósito: corrige reglas de arriba con la misma fuerza.
   Lo que rodea un campo, una fila o una caja pasa a línea fina y clara;
   lo que se pulsa (botones, opciones) sigue con su borde negro. */
.sm-pie { border-top: var(--borde-fino); padding-top: 22px; padding-bottom: 6px; }

/* Lo que se dibuja alrededor de un campo, una fila o una caja: línea fina. */
input[type="text"], input[type="password"], input[type="email"], textarea, select { border: var(--borde-fino); }
.sm-caja { border: var(--borde-fino); padding: 32px; }
.sm-caja.sm-naranja { border-color: var(--acento); }

/* SIN SUBRAYADO EN NINGUNA PANTALLA · 10/10/2026 (María: «sin el subrayado
   es en todas»). Ni los enlaces ni los botones que hacían de enlace (con su
   raya debajo). Se distinguen por el color y el rótulo en mono. */
a, a:hover, button { text-decoration: none !important; }
.sm-mas, .sm-abrir-todas { border-bottom: 0 !important; }
.sm-mas:hover, .sm-abrir-todas:hover { color: var(--tinta); }

/* EL BOTÓN, AL ALCANCE DE LA MIRADA · 11/10/2026 (María).
   El pie iba empujado al fondo de la ventana (margin-top: auto en una
   página que mide lo que la pantalla): con poco contenido, «Seguir» quedaba
   abajo del todo, lejos de lo que se acaba de leer. Ahora va detrás del
   contenido. Cuando la página es más larga que la ventana (espejo, lectura)
   sigue pegado abajo mientras se baja: la regla sticky de arriba no cambia. */
.panel > .cuerpo > .sm-pie { margin-top: 12px; }

/* EL BOCADILLO PENSANDO (sime.js, pensando()) · 11/10/2026.
   El bocadillo del logo en línea, y sus tres puntos encendiéndose en acento
   uno tras otro. Con «reducir movimiento», quietos: el reloj sigue contando. */
.sm-pensando { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; color: var(--gris); }
.sm-pensando svg { width: 46px; height: 46px; flex-shrink: 0; }
.sm-pensando path { fill: var(--blanco); stroke: var(--tinta); stroke-width: 4.5; }
.sm-pensando circle { fill: var(--hueco); animation: sm-punto 1.2s infinite ease-in-out; }
.sm-pensando circle:nth-of-type(2) { animation-delay: .2s; }
.sm-pensando circle:nth-of-type(3) { animation-delay: .4s; }
.sm-pensando-s { font-family: var(--mono); font-size: 12px; color: var(--gris); margin-left: 2px; }
@keyframes sm-punto { 0%, 60%, 100% { fill: var(--hueco); } 25% { fill: var(--acento); } }
@media (prefers-reduced-motion: reduce) {
  .sm-pensando circle { animation: none; fill: var(--acento); }
}

/* EL ICONO DELANTE DEL NOMBRE · 11/10/2026 (María). El bocadillo del favicon,
   en todas las cabeceras, la portada incluida. Se pone con CSS en un solo
   sitio: así lo llevan las dieciséis pantallas sin tocar ninguna. */
.marca { display: inline-flex; align-items: center; gap: .4em; }
.marca::before {
  content: ''; width: 1.15em; height: 1.15em; flex-shrink: 0;
  background: url(/favicon.svg) center / contain no-repeat;
}

/* Un campo que no se puede cambiar se ve como tal (el nombre fijo de una casa, 11/10/2026). */
input[readonly] { background: #F4F1EB; color: var(--gris); cursor: default; }

/* La confirmación de la primera búsqueda de una cuenta (la-landing, 11/10/2026). */
.sm-confirma { display: flex; flex-direction: column; gap: 12px; border: var(--borde-fino); padding: 24px; }
.sm-confirma[hidden] { display: none; }
.sm-confirma-que { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sm-confirma-botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }