/* Oracle — el sistema visual del sitio. Una sola hoja para la portada y las páginas generadas. */

:root {
  --papel: #F2F4F1;
  --papel-2: #E7EBE6;
  --tinta: #141A1F;
  --tinta-2: #3B454D;
  --gris: #5A6670;
  --linea: #CDD4CE;
  --acento: #4338CA;
  --acento-suave: #E4E2FB;
  --sobre-acento: #FFFFFF;
  --rojo: #C2362B;
  --rojo-suave: #F7DEDA;
  --verde: #1E7F55;
  --verde-suave: #D8EFE3;
  --ambar: #A86A00;
  --ambar-suave: #F6E8C8;
  --codigo-fondo: #1B2229;
  --codigo-tinta: #E3E9E5;
  --codigo-clave: #B3AEFF;
  --codigo-texto: #8FD6AE;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --ancho-prosa: 68ch;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0E1215; --papel-2: #161C21; --tinta: #E4EAE6; --tinta-2: #B9C3BD; --gris: #8E9AA2;
    --linea: #2A3339; --acento: #A5A0FF; --acento-suave: #25234A; --sobre-acento: #0E1215; --rojo: #FF6F61; --rojo-suave: #3A1C19;
    --verde: #4FD192; --verde-suave: #14301F; --ambar: #F0B340; --ambar-suave: #33280F;
    --codigo-fondo: #151B20; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0E1215; --papel-2: #161C21; --tinta: #E4EAE6; --tinta-2: #B9C3BD; --gris: #8E9AA2;
  --linea: #2A3339; --acento: #A5A0FF; --acento-suave: #25234A; --sobre-acento: #0E1215; --rojo: #FF6F61; --rojo-suave: #3A1C19;
  --verde: #4FD192; --verde-suave: #14301F; --ambar: #F0B340; --ambar-suave: #33280F;
  --codigo-fondo: #151B20; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
code, pre { font-family: var(--mono); }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.01em; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel);
          padding: 8px 14px; z-index: 10; }
.saltar:focus { left: 8px; }

/* ---------------------------------------------------------------- barra */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 12px; padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px;
         color: var(--tinta); text-decoration: none; letter-spacing: -0.02em; }
.marca img { image-rendering: pixelated; }
.barra nav { display: flex; gap: clamp(14px, 3vw, 28px); flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.barra nav a { color: var(--tinta-2); text-decoration: none; }
.barra nav a:hover, .barra nav a[aria-current] { color: var(--acento); }

/* ---------------------------------------------------------------- etiquetas pixel */
.pixel { font-family: var(--pixel); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.lampara { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pixel); font-size: 12px;
           padding: 3px 8px; border-radius: 2px; }
.lampara.rojo { background: var(--rojo-suave); color: var(--rojo); }
.lampara.verde { background: var(--verde-suave); color: var(--verde); }
.lampara.ambar { background: var(--ambar-suave); color: var(--ambar); }

/* ---------------------------------------------------------------- documentación */
.doc-rejilla {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; gap: clamp(24px, 4vw, 56px);
  padding-inline: var(--gutter); padding-block: 32px 80px; max-width: 1400px; margin: 0 auto;
}
.menu { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; }
.menu summary { display: none; }
.menu ul, .en-esta-pagina ul { list-style: none; margin: 0 0 20px; padding: 0; }
.menu li a, .en-esta-pagina li a { display: block; padding: 5px 10px; border-radius: 4px; color: var(--tinta-2);
                                    text-decoration: none; font-size: 15px; line-height: 1.35; }
.menu li a:hover, .en-esta-pagina li a:hover { background: var(--papel-2); color: var(--tinta); }
.menu li a[aria-current] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.menu-grupo { font-family: var(--pixel); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
              color: var(--gris); margin: 0 0 6px 10px; }
.en-esta-pagina { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; }
.en-esta-pagina li.n3 a { padding-left: 22px; font-size: 14px; }

.prosa { font-family: var(--serif); font-size: 18px; line-height: 1.7; max-width: var(--ancho-prosa); min-width: 0; }
.prosa h1, .prosa h2, .prosa h3, .prosa h4 { font-family: var(--sans); position: relative; }
.prosa h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; margin: 0 0 24px; letter-spacing: -0.025em; }
.prosa h2 { font-size: 28px; font-weight: 700; margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--linea); }
.prosa h3 { font-size: 21px; font-weight: 700; margin: 36px 0 10px; }
.prosa h4 { font-size: 17px; font-weight: 700; margin: 28px 0 8px; }
.prosa .ancla { margin-left: 10px; color: var(--linea); text-decoration: none; font-weight: 400; opacity: 0; }
.prosa :is(h1, h2, h3, h4):hover .ancla, .prosa .ancla:focus { opacity: 1; color: var(--gris); }
.prosa p { margin: 0 0 18px; }
.prosa ul, .prosa ol { margin: 0 0 18px; padding-left: 26px; }
.prosa li { margin: 4px 0; }
.prosa li > ul, .prosa li > ol { margin: 6px 0; }
.prosa code { font-size: 0.84em; background: var(--papel-2); padding: 1px 5px; border-radius: 3px; }
.prosa pre { background: var(--codigo-fondo); color: var(--codigo-tinta); padding: 18px 20px; border-radius: 6px;
             overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.prosa pre code { background: none; padding: 0; font-size: inherit; }
.prosa pre[data-lenguaje="text"], .prosa pre.salida { white-space: pre-wrap; overflow-wrap: anywhere; }
.prosa pre[data-lenguaje]::before { content: attr(data-lenguaje); display: block; font-family: var(--pixel);
             font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8B97A0; margin-bottom: 8px; }
.c-kw { color: var(--codigo-clave); font-weight: 600; }
.c-txt { color: var(--codigo-texto); }
.prosa blockquote { margin: 0 0 20px; padding: 4px 0 4px 20px; border-left: 3px solid var(--acento); color: var(--tinta-2); }
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa hr { border: 0; border-top: 1px solid var(--linea); margin: 40px 0; }
.tabla { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--linea); border-radius: 6px; }
.prosa table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--linea); }
.prosa th { background: var(--papel-2); font-weight: 600; }
.prosa tr:last-child td { border-bottom: 0; }
.prosa .fuente { font-family: var(--sans); font-size: 14px; color: var(--gris); margin-top: 56px;
                 padding-top: 16px; border-top: 1px solid var(--linea); }
.imagen-faltante { color: var(--gris); font-style: italic; }

@media (max-width: 1100px) {
  .doc-rejilla { grid-template-columns: 210px minmax(0, 1fr); }
  .en-esta-pagina { display: none; }
}
@media (max-width: 760px) {
  .doc-rejilla { grid-template-columns: minmax(0, 1fr); padding-block: 16px 60px; }
  .menu { position: static; max-height: none; border: 1px solid var(--linea); border-radius: 6px; padding: 4px 8px; }
  .menu summary { display: block; cursor: pointer; font-weight: 600; padding: 8px 4px; }
  .menu:not([open]) nav { display: none; }
  .prosa { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- guía: archivos, salidas, preguntas */
.prosa pre { position: relative; }
.prosa pre.archivo { border-top: 3px solid var(--acento); }
.prosa pre.salida { background: var(--papel-2); color: var(--tinta); border: 1px solid var(--linea); }
.prosa pre.salida::before { color: var(--gris); }
.copiar { position: absolute; top: 10px; right: 10px; font: 600 12px var(--sans); padding: 5px 10px; border-radius: 4px;
          border: 1px solid #3A4650; background: #26303A; color: #E3E9E5; cursor: pointer; }
.copiar:hover { background: #33404C; }
.prosa details { margin: 0 0 20px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel-2); }
.prosa details > summary { cursor: pointer; padding: 12px 16px; font-family: var(--sans); font-weight: 600; color: var(--acento); }
.prosa details[open] > summary { border-bottom: 1px solid var(--linea); }
.prosa details > :not(summary) { margin-inline: 16px; }
.prosa details > :last-child { margin-bottom: 16px; }
.prosa details > summary + * { margin-top: 14px; }
.prosa .pregunta { font-family: var(--sans); font-size: 17px; background: var(--acento-suave); border-left: 3px solid var(--acento); padding: 12px 16px; border-radius: 0 6px 6px 0; }

/* ---------------------------------------------------------------- manual (tools/manual.py) */
.manual-rejilla { grid-template-columns: 230px minmax(0, 1fr); }
.manual-rejilla main { min-width: 0; max-width: 1060px; }
.menu .cuenta { float: right; font-family: var(--pixel); font-size: 10px; color: var(--gris); }
.menu li a { overflow-wrap: anywhere; }
.ceja { color: var(--acento); margin: 0 0 10px; }
.manual-cabeza { margin-bottom: 36px; }
.manual-cabeza h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 16px; }
.manual-cabeza p:not(.ceja) { font-family: var(--serif); font-size: 19px; max-width: 64ch; color: var(--tinta-2); margin: 0; }
.manual-cabeza code, .manual dd code { font-size: 0.86em; background: var(--papel-2); padding: 1px 5px; border-radius: 3px; }
.manual .tema { border: 2px solid var(--tinta); border-radius: 2px; margin: 0 0 28px; background: var(--papel);
                box-shadow: 4px 4px 0 var(--linea); scroll-margin-top: 84px; }
.manual .rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 20px;
                  background: var(--tinta); color: var(--papel); }
.manual .rotulo h2 { font-family: var(--pixel); font-weight: 400; font-size: 18px; letter-spacing: 0.04em;
                     margin: 0; overflow-wrap: anywhere; text-transform: uppercase; }
.manual .rotulo p { margin: 0; font-size: 14px; opacity: 0.85; }
.manual .rotulo code { font-size: 0.9em; background: color-mix(in srgb, var(--papel) 16%, transparent); padding: 1px 5px; border-radius: 3px; }
/* Sin hueco entre columnas: con `column-gap` la línea de cada fila se parte en dos trazos. */
.manual dl { margin: 0; display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); }
.manual dt { font-family: var(--mono); font-weight: 600; font-size: 14px; padding: 12px 18px 12px 20px;
             overflow-wrap: break-word; color: var(--acento); }
.manual dd { margin: 0; padding: 12px 20px 12px 0; overflow-wrap: anywhere; min-width: 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; }
.manual dt:not(:first-of-type), .manual dt:not(:first-of-type) + dd { border-top: 1px solid var(--linea); }
@media (max-width: 760px) {
  .manual-rejilla { grid-template-columns: minmax(0, 1fr); }
  .manual dl { grid-template-columns: minmax(0, 1fr); }
  .manual dt { padding-bottom: 2px; }
  .manual dd { padding: 0 20px 14px; border-top: 0 !important; }
}

/* ---------------------------------------------------------------- la guía como juego (assets/guia.js) */
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; vertical-align: middle; }
.juego:empty { display: none; }
.enlace-boton { background: none; border: 0; padding: 4px 0; color: var(--acento); font: 500 14px var(--sans);
                       text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* misiones */
.mision-cinta { display: flex; align-items: center; gap: 10px; margin: 64px 0 -44px; padding-top: 22px;
                border-top: 3px solid var(--tinta); color: var(--acento); }
.mision-cinta .mision-xp { margin-left: auto; color: var(--gris); }
.prosa h2.mision-h2 { border-top: 0; margin-top: 52px; padding-top: 0; }
.prosa .mision-objetivo { font-family: var(--sans); font-size: 16px; background: var(--papel-2); border: 2px solid var(--tinta);
                          box-shadow: 4px 4px 0 var(--linea); padding: 10px 14px; margin: 0 0 24px; }
.mision-objetivo strong { color: var(--acento); margin-right: 6px; }
.mision-fin { margin: 28px 0 8px; }
.mision-cumplida { font: 600 15px var(--sans); padding: 10px 16px; border: 2px solid var(--tinta); border-radius: 2px;
                   background: var(--acento); color: var(--sobre-acento); box-shadow: 4px 4px 0 var(--tinta); cursor: pointer; }
.mision-cumplida:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.mision-cumplida:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.mision-cumplida:disabled { background: var(--verde-suave); color: var(--verde); border-color: var(--verde); box-shadow: none; cursor: default; }
.prosa .pregunta .sprite { margin-right: 8px; }

/* predicciones y preguntas cerradas */
.prediccion, .minijuego { font-family: var(--sans); font-size: 16px; border: 2px solid var(--tinta); border-radius: 2px;
                          background: var(--papel); box-shadow: 5px 5px 0 var(--acento-suave); padding: 14px 16px; margin: 0 0 18px; }
.prediccion-titulo { color: var(--acento); margin: 0 0 6px; }
.prosa .prediccion-pregunta { font-weight: 600; margin: 0 0 12px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones.columna { flex-direction: column; align-items: stretch; }
.opcion { border: 2px solid currentColor; cursor: pointer; font-size: 13px; padding: 7px 12px; }
.opcion:disabled { cursor: default; opacity: 0.55; }
.opcion.correcta { opacity: 1; outline: 3px solid currentColor; outline-offset: 2px; }
.opcion.errada { opacity: 1; text-decoration: line-through; }
.opcion-larga { text-align: left; font: 15px var(--sans); padding: 10px 12px; border: 1px solid var(--linea); border-radius: 4px;
                background: var(--papel-2); color: var(--tinta); cursor: pointer; }
.opcion-larga code { white-space: pre-wrap; overflow-wrap: anywhere; }
.opcion-larga.correcta { border-color: var(--verde); background: var(--verde-suave); }
.opcion-larga.errada { border-color: var(--rojo); background: var(--rojo-suave); }
.prosa .prediccion-resultado { margin: 10px 0 0; min-height: 1em; }
.prosa pre.salida.velada { max-height: 7.5em; overflow: hidden; filter: blur(5px); user-select: none; pointer-events: none; }

/* minijuegos */
.etiqueta-mini { color: var(--gris); font-size: 10px; margin: 12px 0 4px; }
.prosa pre.regla-mini, .prosa pre.evidencia-mini, .prosa pre.veredicto-mini { font-size: 12.5px; padding: 10px 12px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.prosa pre.evidencia-mini { max-height: 11em; overflow-y: auto; }
.prosa pre.veredicto-mini { background: var(--papel-2); color: var(--tinta); border: 2px solid var(--linea); }
.prosa pre.veredicto-mini.verde { border-color: var(--verde); }
.prosa pre.veredicto-mini.rojo { border-color: var(--rojo); }
.prosa pre.veredicto-mini.ambar { border-color: var(--ambar); }
.nota-mini { font-size: 13px; color: var(--gris); margin: 12px 0 0 !important; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 0; }

.tablero-cuerpo { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 18px; align-items: start; }
.caza-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rejilla { display: grid; grid-template-columns: repeat(12, clamp(18px, 3.2vw, 24px)); gap: 2px; padding: 6px;
           background: var(--tinta); width: max-content; max-width: 100%; }
.celda { width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: #2F6FB0; cursor: pointer; }
.celda:hover { outline: 2px solid var(--papel); outline-offset: -2px; }
.celda.fuera { background: repeating-linear-gradient(45deg, #5B4636 0 3px, #6E5641 3px 6px); }
.celda.barco { background: #C9D2D8; box-shadow: inset -3px -3px 0 #7D8B95; }
.celda.fuera.barco { background: var(--rojo); box-shadow: inset -3px -3px 0 #7A1F18; }
.retos { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.retos li { display: flex; gap: 8px; align-items: baseline; color: var(--gris); }
.retos li.hecho { color: var(--verde); }

.casos-caza { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.casos-caza li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: 14px; }
.casos-caza input { width: 18px; height: 18px; accent-color: var(--acento); }
.casos-caza label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.casos-caza small { grid-column: 2; color: var(--gris); font-family: var(--mono); font-size: 11.5px; }
.marcador { margin: 0 0 8px; font-size: 13px; }
.marcador.rojo { color: var(--rojo); } .marcador.verde { color: var(--verde); }
.mutantes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.mutantes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 2px solid var(--linea); border-radius: 2px; background: var(--papel-2); }
.mutantes li.vivo { border-color: var(--rojo); }
.mutantes li.vivo .sprite { animation: saltito 0.9s steps(2) infinite; }
.mutantes li.muerto { opacity: 0.6; }
.mutantes li div { display: grid; gap: 3px; min-width: 0; }
.nombre-mutante { font-size: 10px; color: var(--tinta-2); overflow-wrap: anywhere; }
.mutantes code { font-size: 11.5px; overflow-wrap: anywhere; white-space: normal; }
.mutantes small { font-size: 12px; color: var(--gris); }
@keyframes saltito { 50% { transform: translateY(-3px); } }

.cierre { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 24px; }
.cierre-rango { font-family: var(--pixel); font-size: 28px; color: var(--acento); margin: 0 !important; }

/* bitácora y avisos */
.bitacora { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
            display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-family: var(--sans); }
.bitacora-pastilla { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--tinta);
                     border-radius: 2px; background: var(--papel); color: var(--tinta); box-shadow: 4px 4px 0 var(--acento); cursor: pointer; }
.bitacora-pastilla .pixel { font-size: 11px; }
.bitacora-panel { width: min(320px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 14px;
                  border: 2px solid var(--tinta); background: var(--papel); box-shadow: 6px 6px 0 var(--linea); }
.bitacora-titulo { color: var(--gris); font-size: 10px; margin: 12px 0 6px; }
.bitacora-titulo:first-child { margin-top: 0; }
.bitacora-rango { font-family: var(--pixel); font-size: 22px; color: var(--acento); margin: 0 0 8px; }
.barra-xp { height: 12px; border: 2px solid var(--tinta); background: var(--papel-2); }
.barra-xp span { display: block; height: 100%; background: var(--acento); transition: width 0.4s steps(8); }
.bitacora-sub { font-size: 12px; color: var(--gris); margin: 4px 0 0; }
.banderas { list-style: none; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 0; margin: 0; }
.banderas a { display: block; text-align: center; font-family: var(--pixel); font-size: 11px; padding: 5px 0; text-decoration: none;
              border: 2px solid var(--linea); color: var(--gris); }
.banderas li.hecha a { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.logros { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0; margin: 0 0 8px; font-size: 12px; }
.logros li { display: flex; align-items: center; gap: 6px; color: var(--gris); }
.logros li.tiene { color: var(--tinta); font-weight: 600; }
.avisos { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 30; display: grid; gap: 8px; pointer-events: none; }
.aviso { display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 10px 12px; font-family: var(--sans); font-size: 14px;
         background: var(--tinta); color: var(--papel); border: 2px solid var(--acento); box-shadow: 4px 4px 0 var(--acento);
         animation: entra 0.25s steps(4); }
.aviso div { display: grid; gap: 2px; }
.aviso strong { font-size: 11px; color: var(--acento-suave); }
.aviso.sale { opacity: 0; transition: opacity 0.6s; }
@keyframes entra { from { transform: translateX(24px); opacity: 0; } }

@media (max-width: 760px) {
  .tablero-cuerpo, .caza-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; }
  .mision-cinta { margin-bottom: -40px; }
}