/* ============================================================
   memoria.css — las jugadas, el mapa de relaciones y las tarjetas de
   gol. Cada jugada es una entrada de diccionario: la letra grande en
   Righteous verde, el nombre y el mantra.
   ============================================================ */

.memoria { max-width: 64rem; }
.me-sec { margin-top: 2.2rem; }
.me-bajada { color: var(--crema-2); max-width: 46rem; margin-bottom: 1rem; }

.me-metodo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .8rem 1.4rem; }
.me-metodo-paso { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
.me-metodo-n { font-family: var(--f-display); font-style: normal; font-size: 1.6rem; color: var(--menta-texto); line-height: 1.1; text-align: right; }
.me-metodo-tit { font-weight: 600; }
.me-metodo-txt { color: var(--crema-2); font-size: .96rem; }

.me-gtarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; }
.me-gtarjeta { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--filete); border-radius: var(--radio); background: var(--hoja); color: var(--crema); transition: border-color .2s, transform .2s; }
.me-gtarjeta:hover { border-color: var(--linea); transform: translateY(-2px); color: var(--crema); }
.me-gletra { font-family: var(--f-display); font-size: 3.4rem; line-height: .9; color: var(--verde); text-align: center; }
.me-gtarjeta-txt { display: flex; flex-direction: column; min-width: 0; }
.me-gnombre { font-size: 1.25rem; font-weight: 500; }
.me-gtit { font-style: normal; color: var(--crema-2); font-size: .95rem; line-height: 1.35; }
.me-gsiglas { margin-top: .4rem; font-size: .85rem; color: var(--crema-3); font-variant-numeric: lining-nums; }

/* El mapa de relaciones. */
.me-mapa-wrap { overflow-x: auto; border: 1px solid var(--filete-2); border-radius: var(--radio); background: var(--hoja); }
.me-mapa { border-collapse: collapse; font-size: .9rem; min-width: 760px; width: 100%; }
.me-mapa th, .me-mapa td { padding: .22rem .3rem; }
.me-mapa-esq { text-align: left; letter-spacing: .12em; color: var(--crema-2); font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.me-mapa-tema { letter-spacing: .12em; color: var(--menta-texto); border-bottom: 1px solid var(--linea); font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.me-mapa-h { font-weight: 500; color: var(--crema-2); font-size: .82rem; height: 5.6rem; vertical-align: bottom; }
.me-mapa-h span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.me-mapa-grupo th { text-align: left; padding-top: .55rem; border-top: 1px solid var(--filete); }
.me-mapa-grupo a { color: var(--crema); font-weight: 600; }
.me-letra { font-family: var(--f-display); font-style: normal; color: var(--verde); margin-right: .45rem; font-size: 1.15rem; }
.me-mapa-fila { text-align: left; font-weight: 400; max-width: 22rem; }
.me-mapa-fila a { color: var(--crema); display: flex; gap: .5rem; align-items: baseline; }
.me-mapa-sigla { color: var(--azul); letter-spacing: .12em; white-space: nowrap; font-variant-numeric: lining-nums; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.me-mapa-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--crema-2); font-size: .85rem; }
.me-mapa-c { text-align: center; border-left: 1px solid var(--filete-2); }
.me-mapa-c.si { background: var(--menta-velo); }
.me-punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--verde); }
.me-leyenda { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: .3rem 1.2rem; font-size: .92rem; }
.me-leyenda-item { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.me-leyenda-c { letter-spacing: .12em; color: var(--verde); font-weight: 600; min-width: 3.5rem; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.me-leyenda-n { color: var(--crema-2); }

.me-paren-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: .7rem 1.2rem; }
.me-paren { padding: .6rem .8rem; border-left: 2px solid var(--linea); }
.me-paren-chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem; }
.me-paren-sep { color: var(--menta); font-style: normal; margin: 0 .2rem; }
.me-paren-txt { color: var(--crema-2); font-size: .95rem; }
.me-chip { color: var(--azul); border-color: color-mix(in srgb, var(--azul) 35%, transparent); }

.me-hoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 1rem 1.6rem; }
.me-hoja-grupo { border-top: 1px solid var(--linea); padding-top: .5rem; }
.me-hoja-cab { color: var(--crema); font-weight: 600; font-size: 1.1rem; }
.me-hoja-lista { list-style: none; margin: .3rem 0 0; padding: 0; }
.me-hoja-item + .me-hoja-item { border-top: 1px solid var(--filete-2); }
.me-hoja-nombre { letter-spacing: .12em; color: var(--verde); font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.me-hoja-tex { font-size: .95rem; }

/* ------------------------------------------------------------ una jugada */

.me-grupo { max-width: 50rem; }
.me-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: 1rem 0 1.4rem; }
.me-cab-letra { font-family: var(--f-display); font-size: 7rem; line-height: .8; color: var(--verde); }
.me-cab-nombre { font-family: var(--f-display); font-weight: 400; font-style: normal; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; }
.me-cab-tit { color: var(--crema-2); font-size: 1.08rem; margin-top: .3rem; }
.me-gnav { display: flex; flex-wrap: wrap; gap: .35rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linea); }
.me-gnav-a { font-size: .95rem; color: var(--crema-2); border: 1px solid var(--filete-2); border-radius: 0; padding: .05rem .7rem .12rem; }
.me-gnav-a b { font-family: var(--f-display); font-style: normal; color: var(--verde); margin-right: .2rem; }
.me-gnav-a.activa { border-color: var(--verde); color: var(--verde); background: var(--verde-velo); }

.me-mantra { padding: 1rem 1.2rem; border-left: 3px double var(--menta); background: var(--hoja); font-size: 1.1rem; }
.me-mantra .etq { color: var(--menta-texto); display: block; margin-bottom: .2rem; }
.me-mantra-txt { font-style: normal; }
.me-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.me-caja { padding: .8rem 1rem .9rem; border: 1px solid var(--filete-2); border-radius: var(--radio); background: var(--hoja); margin-top: 1rem; }
.me-dos .me-caja { margin-top: 0; }
.me-caja-etq { color: var(--azul); margin-bottom: .3rem; }
.me-caja-txt { font-size: .97rem; }
.me-lista, .me-esqueleto { margin: 0; padding-left: 1.2rem; font-size: .97rem; }
.me-lista li + li, .me-esqueleto li + li { margin-top: .3rem; }
.me-esqueleto li::marker { color: var(--menta-texto); }
.me-trampas .me-caja-etq { color: var(--alerta); }
.me-cadena .me-caja-txt { font-style: normal; }

.me-formulas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.me-formula { min-width: 0; padding: .7rem 1rem .8rem; border: 1px solid var(--filete-2); border-radius: var(--radio); background: var(--hoja); }
.me-formula-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.me-formula-nombre { font-weight: 600; }
.me-formula-cuando { font-size: .93rem; color: var(--crema-2); }
.me-formula-cuando .etq { color: var(--menta-texto); margin-right: .2rem; }

.me-goles-cab { display: flex; align-items: center; gap: 1rem; }
.me-goles-cab .h-seccion { flex: 1; }
.me-goles-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.gol { min-width: 0; padding: 1rem 1.15rem 1rem; border: 1px solid var(--filete); border-radius: var(--radio); background: var(--hoja); }
.gol-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; }
.gol-sigla { letter-spacing: .12em; font-weight: 600; color: var(--azul); font-variant-numeric: lining-nums; white-space: nowrap; font-family: var(--f-mono); text-transform: uppercase; font-size: .78em; }
.gol-cab-txt { min-width: 0; }
.gol-tit { font-size: 1.1rem; font-style: normal; font-weight: 400; line-height: 1.3; }
.gol-meta { color: var(--crema-3); }
.gol-destapar { display: none; padding: .2rem .8rem .26rem; font-size: .95rem; }
.gol-tapa { display: none; font-style: normal; color: var(--azul); margin-top: .5rem; }
.gol-cuerpo { margin-top: .6rem; }
.gol-fila { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; padding: .3rem 0; border-top: 1px solid var(--filete-2); }
.gol-etq { color: var(--menta-texto); }
.gol-lista, .gol-pasos { margin: 0; padding-left: 1.1rem; font-size: .97rem; }
.gol-pasos li::marker { color: var(--menta-texto); }
.gol-gol { padding: .3rem 0; border-top: 1px solid var(--filete-2); }
.gol-gol .gol-etq { color: var(--verde); }
.gol-ojo { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; padding: .3rem 0; border-top: 1px solid var(--filete-2); }
.gol-ojo .gol-etq { color: var(--alerta); }
.gol-ojo-txt { font-size: .96rem; }
.gol-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--filete-2); }
.gol-hs { display: flex; flex-wrap: wrap; gap: .3rem; }
.gol-h { letter-spacing: .12em; font-size: .7rem; color: var(--crema-2); border: 1px solid var(--filete-2); border-radius: 0; padding: 0 .5rem; font-family: var(--f-mono); text-transform: uppercase; }
.gol-ir { font-style: normal; font-size: .95rem; }

.me-goles.tapado .gol:not(.destapada) .gol-cuerpo,
.me-goles.tapado .gol:not(.destapada) .gol-pie { display: none; }
.me-goles.tapado .gol:not(.destapada) .gol-tapa { display: block; }
.me-goles.tapado .gol-destapar { display: inline-flex; }

@media (max-width: 700px) {
  .me-dos { grid-template-columns: minmax(0, 1fr); }
  .me-cab { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .me-cab-letra { font-size: 4.6rem; }
  .gol-cab { grid-template-columns: minmax(0, 1fr) auto; }
  .gol-sigla { grid-column: 1 / -1; }
  .gol-fila, .gol-ojo { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .me-hoja { grid-template-columns: minmax(0, 1fr); }
}

/* Ganchos. */
.me-cab-txt, .me-formula-tex { min-width: 0; }
.me-h2 { scroll-margin-top: calc(var(--cab-alto) + 30px); }
.me-tapar { white-space: nowrap; }
.cab-miga { display: block; }