/* ============================================================
   LA FAMILIA — la pantalla de los padres

   Misma paleta que el menú (tonos tierra: crema de papel, oro viejo, arena) y
   ahora también su decorado: una habitación de vestidor de la misma mano que
   los seis paisajes de categoría. Lo que no se trae es el pergamino ni el
   carrusel — aquí no hay nada que girar.

   Nada de esto comparte hoja con `juego-layout.css`: aquélla es la cáscara de
   un juego (título grande, botones de respuesta, lienzo) y aquí no hay nada
   de eso. Copiar sus variables para reusar tres colores habría atado esta
   página a los cambios de la otra sin ganar nada.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --crema:  #fdf4dc;   /* el papel de la ficha */
  --oro:    #fbd973;
  /* El marrón de las vigas del techo, que es lo que queda arriba del todo al
     recortar la habitación a la pantalla. Sirve de relleno mientras carga el
     dibujo y de color de la barra del navegador (<meta theme-color>). */
  --bg:     #5c3314;
  --text:   #3b2f16;
  --muted:  #8a7550;
  --linea:  #e6d5ab;
  --mal:    #a8442b;
  --bien:   #4a7c3f;
  --radio:  20px;
  --sombra: 0 10px 30px rgba(90, 68, 22, .18);
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  font-family: 'Nunito', 'Hiragino Sans', 'Meiryo', sans-serif;
  color: var(--text);
  background-color: var(--bg);
  /* ── LA HABITACIÓN ──────────────────────────────────────
     `cover` y centrada, al revés que los paisajes del menú, que van anclados
     abajo y a `100% auto`. Allí manda el suelo: son campos con cielo y si se
     recortan por abajo se pierde el horizonte. Aquí lo que importa es la pared
     del centro —donde se apoya el papel—, y una habitación aguanta que se le
     recorten los lados: en un móvil estrecho se pierden el armario y el arcón,
     pero la pared sigue ahí y la escena se entiende igual.

     `fixed` para que la habitación se quede quieta cuando el papel es más largo
     que la pantalla y hay que rodar: si se moviera con él parecería que la casa
     entera se desliza. */
  /* EL PAISAJE LO PONE LA VERTICAL. Al subir esta hoja al motor, un
     `url('../art/…')` de aquí pasa a pedir `/game_engine/art/…`, que no existe
     — y no da error: se queda el color de debajo y nadie lo nota. Cada vertical
     declara `--fondo-cuenta` en su página, con ruta ABSOLUTA porque dentro de
     una variable el navegador resuelve contra la hoja que la USA. */
  background-image: var(--fondo-cuenta, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%;
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
/* El fondo va TAMBIÉN en `html`: sin esto, al rodar más allá del final del
   documento (el rebote de iOS) asoma el blanco del lienzo por debajo. Es la
   misma razón por la que el menú lo pone en los dos sitios. */
html { background: var(--bg); }

/* ── VOLVER AL MENÚ ──────────────────────────────────────────
   El mismo sitio y el mismo tamaño que el botón de casa de los juegos (46 px
   arriba a la izquierda), para que la mano ya sepa dónde está. Lo que no lleva
   es la pulsación mantenida: ver el comentario del HTML. */
.volver {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 10;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--crema);
  color: var(--muted);
  box-shadow: 0 3px 10px rgba(90, 68, 22, .22);
  text-decoration: none;
  transition: transform .15s ease, color .15s ease;
}
.volver svg { width: 24px; height: 24px; display: block; }
.volver:hover { color: var(--text); }
.volver:active { transform: scale(.92); }

/* ── LA COLUMNA ──────────────────────────────────────────── */
main {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  /* El aire de arriba deja sitio al botón de volver en móvil, donde la ficha
     llega casi al borde. */
  /* Deja sitio al botón de volver, que es fijo, y al medallón que sobresale. */
  padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 18px
           max(28px, env(safe-area-inset-bottom));
}

/* ── EL PAPEL: UNA SOLA PIEZA ────────────────────────────
   Antes eran dos —el escudo suelto sobre el fondo y la ficha debajo—, y con la
   habitación detrás el título caía sobre las vigas del techo: marrón sobre
   marrón. Metiéndolo todo dentro del papel se lee siempre, y de paso queda una
   sola pieza flotando en la habitación en vez de tres cosas sueltas.

   La sombra es más larga y más oscura que la que tenía sobre el amarillo liso:
   el papel es crema y la pared también, así que lo único que los separa es que
   uno proyecta sombra sobre el otro. */
.panel {
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: 0 14px 40px rgba(60, 34, 10, .42);
  /* El hueco de arriba es para el medallón, que sube y monta sobre el borde. */
  padding: 62px 20px 22px;
}

/* ── EL ESCUDO ───────────────────────────────────────────── */
.crest { text-align: center; margin-bottom: 18px; }

.medallon {
  width: 92px;
  height: 92px;

  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  /* La misma pegatina que el medallón del menú (filo blanco del troquelado y
     una sombra que la despega), y no por capricho: es el MISMO objeto visto en
     dos sitios, y con dos marcos distintos parecería que no tienen nada que
     ver. Si se cambia uno, se cambia el otro. */
  border: 5px solid #fff;
  box-shadow: 0 4px 14px rgba(90, 68, 22, .26);
  display: block;
  /* A caballo del borde del papel: la mitad fuera, la mitad dentro.
     El número sale de DOS cosas y por eso no es la mitad de 92 a secas: hay que
     subir el relleno de arriba del panel (62) para llegar a su borde, y otros
     46 —media cara— para quedar montado. 62 + 46 = 108. Si cambia cualquiera
     de los dos, cambia esto.
     Va en el `margin` corto y no en un `margin-top` aparte: el corto viene
     después en la regla y le ponía el 0. */
  margin: -108px auto 14px;
}

h1 {
  font-family: 'Bree Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: .01em;
}
.lema {
  font-size: .9rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* ── CADA PASO ───────────────────────────────────────────
   Ya no llevan fondo ni sombra propios: son el contenido de `.panel`, y con su
   propia caja dentro de otra caja se veía un papel encima de otro papel. */
.ficha[hidden] { display: none; }

/* Y LO MISMO PARA TODO LO DEMÁS, QUE ES LA REGLA QUE FALTABA AQUÍ.

   `[hidden] { display: none }` lo trae el navegador en SU hoja, así que
   cualquier selector de clase de ésta le gana: basta con que una regla diga
   `display` para que el atributo deje de esconder nada. Esta hoja lo venía
   parcheando caso por caso —`.ficha[hidden]`, `.aviso[hidden]`,
   `.caras[hidden]`, `.confirma[hidden]`, `.nino .ok[hidden]`—, o sea cinco
   veces el mismo apaño y ninguna red para el sexto.

   El sexto llegó el 28 de agosto de 2026 y fue gordo: `gate.js` trae su CSS
   dentro y dice `.gate-veil { display: flex }`. Al cerrar la reja, su
   `hidden` no ocultaba nada — la capa se quedaba a pantalla completa, en
   `z-index: 1000` y con `opacity: 0`. Invisible, y tragándose TODOS los
   clics: ni los botones de la familia, ni los enlaces del pie, ni el de
   volver. En `report/` no pasaba, y por eso costó verlo: `informe.css` ya
   tiene esta línea desde que le pasó lo mismo con `.principal`.

   Las cinco de arriba se quedan. No estorban, y quitarlas sería tocar cinco
   sitios para no ganar nada. */
[hidden] { display: none !important; }

.explica { font-size: .98rem; margin-bottom: 18px; }
.explica strong { font-weight: 900; overflow-wrap: anywhere; }
.cargando { color: var(--muted); text-align: center; margin: 0; }

h2 {
  font-family: 'Bree Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.1rem;
  margin-top: 4px;
}

label {
  display: block;
  font-weight: 700;
  font-size: .86rem;
  color: var(--muted);
  margin: 14px 0 6px;
}

input[type="email"], input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
  /* 16px clavados: por debajo de eso, Safari de iOS hace zoom al enfocar el
     campo y deja la página descuadrada y sin manera evidente de volver. */
  font-size: 16px;
}
input:focus-visible, .volver:focus-visible, button:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

/* El código son cinco cifras y se leen de un vistazo: grandes y separadas.
   Se usa UN campo y no cinco cajitas — las cajitas se ven muy bien y se portan
   fatal: pegar el código desde el correo mete las cinco cifras en la primera,
   el borrado hacia atrás salta de caja de forma distinta en cada navegador y
   el autorrelleno de iOS no sabe repartirlas. */
#codigo {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .28em;
  /* La sangría compensa el espaciado de la última cifra, que si no arrastra el
     texto hacia la izquierda del centro. */
  text-indent: .28em;
  padding: 14px;
}

.fila { display: flex; gap: 8px; align-items: stretch; }
.fila input { flex: 1 1 auto; min-width: 0; }
.fila .secundario { flex: 0 0 auto; }

button { font: inherit; cursor: pointer; }

.principal, .secundario {
  border: none;
  border-radius: 12px;
  font-weight: 900;
  padding: 13px 18px;
  transition: transform .12s ease, filter .12s ease;
}
.principal {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: var(--oro);
  color: var(--text);
  font-size: 1.06rem;
  box-shadow: 0 4px 0 #e0bb4d;
}
.secundario {
  background: #f0e2be;
  color: var(--text);
  box-shadow: 0 3px 0 #ddcb9f;
}
.principal:active, .secundario:active { transform: translateY(2px); box-shadow: none; }
.principal[disabled], .secundario[disabled] {
  filter: grayscale(.45) opacity(.6);
  cursor: default;
  transform: none;
}

.enlace {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace:hover { color: var(--text); }
.enlace[disabled] { color: #b7a681; text-decoration: none; cursor: default; }

.letra-chica {
  margin-top: 16px;
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
}
.sin-margen { margin-top: 4px; text-align: left; }

/* El aviso ocupa sitio SIEMPRE que se enseña, y aparece encima del botón y no
   debajo: si saliera debajo, en el móvil quedaría fuera de la pantalla justo
   cuando el teclado está abierto, que es exactamente cuando hay que leerlo. */
.aviso {
  margin-top: 10px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--mal);
}
.aviso.bien { color: var(--bien); }
.aviso[hidden] { display: none; }

/* ── LOS NIÑOS ─────────────────────────────────────────────
   Rediseñado el 28 de agosto de 2026. Una fila por niño, que se lee de un
   vistazo y se toca de dos maneras:

       ┌───────────────────────────────────────────┐
       │  (cara)  Amane                       ✎    │
       └───────────────────────────────────────────┘

   La fila entera marca «que juegue éste»; el lápiz abre el editor con el
   nombre, las cinco caras y el quitar. Antes había cuatro cosas tocables aquí
   —radio, cara, campo de texto y ×— y tres eran invisibles hasta tocarlas.

   ── Y EL 29 DE AGOSTO DE 2026 SE FUE EL ✓ ──
   Había un círculo con una palomita a la derecha, segundo `<label>` del mismo
   radio: marcaba lo mismo que la fila. Sobraba, y en dos niveles. Como ACCIÓN
   no hacía nada que no hiciera ya la fila entera. Y como SEÑAL de cuál juega
   era la tercera: ya lo dicen el borde dorado grueso de `.nino.activo` y la
   cara, que es la única a todo color —las demás van en `grayscale(.45)`—.

   Lo que se pierde, dicho para que nadie lo redescubra: en una familia con
   hermanos, un aro vacío es lo que anuncia que HAY una elección, igual que en
   una lista de radios. Se aceptó a cambio de la fila limpia: el borde del que
   juega es grueso y dorado, y quien tiene dos hijos entra aquí sabiendo que
   viene a cambiar de niño.

   El nombre va en GRANDE y como texto, no dentro de un recuadro de formulario:
   esta pantalla se abre para saber quién juega mucho más a menudo que para
   cambiarle el nombre a nadie, y un nombre en una caja de input no se lee como
   un nombre, se lee como un dato pendiente de rellenar. */
.ninos { list-style: none; margin: 12px 0 4px; padding: 0; }

.nino {
  display: grid;
  /* Dos columnas desde que se fue el ✓: el nombre y el lápiz. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  background: #fffaf0;
  border: 2px solid var(--linea);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
  position: relative;
}
/* ── EL `<label>` DE LA FILA NO ES LA ETIQUETA DE UN CAMPO ──
   `.quien` es un label porque viste el radio, no porque rotule un input, y se
   estaba llevando el `margin: 14px 0 6px` de la regla `label` de arriba —la de
   «Tu correo» y «El código»—. Veinte píxeles por fila que no dibujaban nada: la
   caja medía 100px de alto para 56 de contenido, o sea que casi la mitad era
   aire de un formulario que aquí no hay. (Eran dos labels hasta que se retiró
   el ✓ ese mismo día; el otro se llevaba lo mismo.)

   Va con `>` a propósito: dentro de `.nino` está el editor, y el día que gane un
   campo con su etiqueta, ésa sí querrá el margen de arriba. */
.nino > label { margin: 0; }

.nino.activo { border-color: var(--oro); box-shadow: inset 0 0 0 2px var(--oro); }
/* Mientras se edita, la fila se despega del resto: es la que manda ahora. */
.nino.editando { box-shadow: 0 6px 18px rgba(90, 68, 22, .16); }

/* EL RADIO DE VERDAD, tapado pero NO quitado. `display:none` lo sacaría de la
   tabulación y del grupo de radios, así que dejaría la elección sin teclado.
   Se le quita el tamaño y se le deja el foco, que dibuja `.quien` — antes lo
   dibujaba el ✓, y al retirarlo el foco de teclado se habría quedado sin salir
   en ninguna parte: invisible, no ausente, que es la peor forma de romper una
   pantalla porque no se nota mirándola. */
.nino .radio-real {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Es un `<label>` del radio, y ocupa todo lo que no es el lápiz: tocar el
   nombre, la cara o el hueco de en medio marca al niño. Desde que se fue el ✓
   es el ÚNICO sitio donde se marca, así que su `1fr` no es cosmético. */
.nino .quien {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;              /* sin esto, un nombre largo desborda el grid */
  cursor: pointer;
  padding: 2px 0;
}

.nino .cara {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--linea);
  object-fit: cover;
  flex: none;
  /* Apagada mientras no es quien juega: la fila marcada tiene que ganar de un
     vistazo, y con dos o tres hermanos el borde solo no basta. */
  filter: grayscale(.45) opacity(.75);
  transition: filter .15s ease;
}
.nino.activo .cara { filter: none; border-color: var(--oro); }

.nino .nombre-visible {
  font-family: 'Bree Serif', Georgia, serif;
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: anywhere;   /* un nombre de 24 signos no puede romper la fila */
}
/* EL NOMBRE QUE NO ES SUYO TODAVÍA. Es el del personaje de su avatar —lo mismo
   que dice el cartel del menú— y va en gris para que se vea que está puesto de
   prestado. En negro sería mentir: parecería que alguien lo eligió. */
.nino .nombre-visible.sin-poner { color: var(--muted); font-style: italic; }

/* EL NOMBRE DEL QUE NO ESTÁ JUGANDO, APAGADO.
   Puesto el 29 de agosto de 2026, al retirar el ✓: hacía falta una señal MÁS de
   cuál es el que juega, y ésta es la que se lee sin saber nada —el nombre es lo
   único que un padre mira en esta lista—. Se suma al borde, que engorda, y a la
   cara, que es la única sin apagar.

   ── EL COLOR ESTÁ MEDIDO, NO ELEGIDO A OJO ──
   NO es `--muted` (#8a7550), que era lo natural y se queda en **4,26:1** sobre
   el fondo de la fila (#fffaf0): pasa AA para texto grande y este nombre no lo
   es —1,32rem son 21px y Bree Serif no tiene negrita, así que WCAG lo cuenta
   como texto normal y pide 4,5—. #84704c da **4,58:1**, y contra el nombre
   activo (#3b2f16, 12,58:1) se queda en **2,74:1**: bastante para que se vea la
   jerarquía de un vistazo. Un nombre es contenido, no un rótulo secundario; que
   esté apagado no puede querer decir que cueste leerlo.

   VA DESPUÉS DE `.sin-poner` a propósito. Las dos reglas tienen la misma
   especificidad (`:not()` cuenta como su argumento), así que gana la de abajo:
   un niño inactivo y sin nombre sale con ESTE gris y conserva la cursiva de
   aquélla. Color = no juega; cursiva = el nombre es prestado. Dos cosas
   distintas que se leen a la vez. */
.nino:not(.activo) .nombre-visible { color: #84704c; }

.nino .lapiz {
  border: none;
  background: none;
  color: var(--muted);
  width: 40px; height: 40px;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  transition: background .15s ease, color .15s ease;
}
.nino .lapiz svg { width: 100%; height: 100%; display: block; }
.nino .lapiz:hover { background: #f6ead0; color: var(--text); }
/* Abierto NO va en oro: el círculo del ✓ de al lado ya es oro, y dos discos
   dorados pegados compiten por decir 'este es el estado'. El lápiz sólo tiene
   que verse pulsado. */
.nino .lapiz[aria-expanded="true"] { background: #f0e0bd; color: var(--text); }

/* EL FOCO DEL RADIO, que hay que dibujar en alguna parte.
   El `<input>` está tapado (1px y `opacity: 0`) para no perderlo de la
   tabulación, así que su anillo de foco no se ve: lo pinta el `<label>` que lo
   viste. Hasta el 29 de agosto de 2026 era el ✓; ahora es `.quien`, que es la
   zona que se pulsa. Va con `~` porque los dos son hijos de `.nino`, y el radio
   se emite ANTES en `cuenta.js` — si algún día se reordena, esta regla deja de
   aplicar sin dar ningún error. */
.nino .radio-real:focus-visible ~ .quien {
  outline: 3px solid var(--oro);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ── EL EDITOR ─────────────────────────────────────────────
   Ocupa las tres columnas y empuja lo de abajo, en vez de flotar encima: un
   menú flotante hay que colocarlo a mano, se sale por el borde en un móvil
   estrecho y tapa justo lo que estás mirando. */
.nino .editor {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 2px dashed var(--linea);
}
.nino .editor[hidden] { display: none; }

.nino .campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nino .nombre {
  flex: 1 1 160px;
  font: inherit;
  font-size: 1.05rem;
  padding: 10px 12px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
.nino .nombre:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(251,217,115,.45); }
.nino .nombre::placeholder { color: #b7a681; font-weight: 400; font-style: italic; }
.nino .ok { font-size: .82rem; color: var(--bien); font-weight: 700; }
.nino .ok[hidden] { display: none; }

/* LAS CINCO CARAS. Ya no se despliegan por su cuenta desde la cara de la fila:
   viven aquí, que es el sitio donde se cambian las cosas de este niño. */
.nino .caras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.nino .caras .opcion {
  width: 46px; height: 46px;
  padding: 0;
  border: 2px solid var(--linea);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;
}
.nino .caras .opcion img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nino .caras .opcion:hover { transform: scale(1.08); border-color: var(--oro); }
.nino .caras .opcion:active { transform: scale(.94); }
.nino .caras .opcion.puesta { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(251,217,115,.5); }

/* QUITAR. Dentro del editor y con su palabra escrita, no una × en la fila: es
   raro y es destructivo, y una × al lado de un nombre es un accidente
   esperando a que alguien pase el dedo. */
.nino .quita {
  display: block;
  margin-top: 14px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .86rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.nino .quita:hover { color: var(--mal); }
.nino .quita[aria-expanded="true"] { color: var(--mal); font-weight: 700; }

.confirma {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fbeee8;
  border: 2px solid #eccdc2;
}
.confirma[hidden] { display: none; }
.confirma .dice { margin: 0 0 10px; font-size: .92rem; color: var(--text); }
.confirma .botonera { display: flex; gap: 8px; }
.confirma .botonera button { flex: 1 1 0; }

/* ── AÑADIR OTRO NIÑO ──────────────────────────────────────
   Un hueco de trazo discontinuo, del ancho de una fila de niño: dice «aquí
   cabe otro» con la forma, que es lo que antes decía un rótulo, un campo de
   texto y un botón ocupando sitio todo el rato para algo que se usa una vez.
   El campo aparece al pulsarlo. */
.mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 12px;
  font: inherit;
  font-weight: 900;
  font-size: 1rem;
  color: var(--muted);
  background: none;
  border: 2px dashed var(--linea);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mas:hover { border-color: var(--oro); color: var(--text); background: #fffaf0; }
.mas .cruz { font-size: 1.4rem; line-height: 1; font-weight: 400; }
.mas[hidden] { display: none; }

.mas-campo { display: flex; gap: 8px; margin-top: 4px; }
.mas-campo[hidden] { display: none; }
.mas-campo input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 12px 13px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
.mas-campo input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(251,217,115,.45); }
.mas-campo .secundario { flex: none; }

/* El botón que se lleva algo por delante va aparte y en rojo, para que no se
   confunda con el «No» al mirar de reojo. */
.peligro {
  border: none;
  border-radius: 12px;
  font-weight: 900;
  padding: 11px 14px;
  background: #c9553a;
  color: #fff;
  box-shadow: 0 3px 0 #a3402a;
  transition: transform .12s ease, filter .12s ease;
}
.peligro:active { transform: translateY(2px); box-shadow: none; }
.peligro[disabled] { filter: grayscale(.4) opacity(.7); cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .volver, .principal, .secundario, .nino .cara, .nino .lapiz,
  .mas, .nino .caras .opcion { transition: none; }
}