/* Páginas de modalidad (Original, Escape, Ajedrez y Detective) en tablet y
   móvil. Mismos criterios que la portada: tarjetas horizontales compactas,
   listas imagen + texto y menos espacio heredado de escritorio. Todas las
   reglas están por debajo de 1000 px: escritorio no cambia. */

/* Catálogo: tarjetas horizontales compactas (imagen | contenido). */
@media (max-width:1000px){
  :is(.original-page,.escape-page,.chess-page) .cases{padding:36px 0 52px}
  :is(.original-page,.escape-page,.chess-page) .section-heading{margin-bottom:18px}
  :is(.original-page,.escape-page,.chess-page) .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  :is(.original-page,.escape-page,.chess-page) .case-card{grid-template-columns:38% minmax(0,1fr);grid-template-rows:none;align-items:start;padding:6px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-image{align-self:start;height:auto;aspect-ratio:1180/1333}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-image img{object-fit:contain}
  /* Escape y Detective: portadas apaisadas a todo el alto, recortadas por los
     lados sin deformarse. */
  :is(.original-page,.escape-page,.chess-page) .escape-case-card .case-image{align-self:stretch;height:auto;min-height:160px;aspect-ratio:auto}
  :is(.original-page,.escape-page,.chess-page) .escape-case-card .case-image img{position:absolute;inset:0;object-fit:cover;object-position:center}
  :is(.original-page,.escape-page,.chess-page) .chess-case-card .case-image{aspect-ratio:640/623}
  :is(.original-page,.escape-page,.chess-page) .chess-case-card .case-image img{object-fit:cover}
  :is(.original-page,.escape-page,.chess-page) .case-image span{top:6px;right:6px;padding:5px 8px;font-size:11px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info{align-self:stretch;padding:4px 4px 4px 12px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info h3{margin:2px 0 10px;font-size:21px;line-height:1.1}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info h3 br{display:none}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-level{margin:0 0 8px;font-size:13.5px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info p:not(.case-level){margin:0 0 12px;font-size:15px;line-height:1.4}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info .button.small{width:auto;margin-top:auto;min-height:42px;padding:10px 14px;gap:10px;font-size:15px;white-space:nowrap}
}
@media (max-width:620px){
  :is(.original-page,.escape-page,.chess-page) .case-grid{grid-template-columns:1fr;gap:12px}
}
@media (max-width:380px){
  :is(.original-page,.escape-page,.chess-page) .case-card{grid-template-columns:36% minmax(0,1fr)}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info{padding-left:10px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info h3{font-size:19px}
  :is(.original-page,.escape-page,.chess-page) .case-card .case-info .button.small{padding:10px 12px;font-size:14.5px;line-height:1.2;white-space:normal;text-align:left}
}

@media (max-width:720px){
  /* «¿Cómo jugar?»: lista compacta, ilustración a la izquierda y texto a la
     derecha; el número queda sobre la ilustración. */
  :is(.original-page,.escape-page,.chess-page) .how{padding:36px 0 42px}
  :is(.original-page,.escape-page,.chess-page) .how .section-title{margin-bottom:8px}
  :is(.original-page,.escape-page,.chess-page) .steps{gap:0}
  :is(.original-page,.escape-page,.chess-page) .steps article,
  :is(.original-page,.escape-page,.chess-page) .steps article:nth-child(2){display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-areas:"icon title" "icon text";column-gap:14px;align-items:center;min-height:0;padding:14px 0;text-align:left}
  :is(.original-page,.escape-page,.chess-page) .steps article:last-child{border-bottom:0}
  :is(.original-page,.escape-page,.chess-page) .steps b{position:absolute;top:10px;left:-4px;z-index:1;width:26px;height:26px;font-size:14px}
  :is(.original-page,.escape-page,.chess-page) .step-icon{grid-area:icon;width:80px;height:80px;margin:0}
  :is(.original-page,.escape-page,.chess-page) .steps h3{grid-area:title;align-self:end;justify-content:flex-start;min-height:0;margin:0 0 4px;font-size:20px}
  :is(.original-page,.escape-page,.chess-page) .steps p{grid-area:text;align-self:start;max-width:none;font-size:15.5px;line-height:1.4}
  /* Método de juego. */
  :is(.original-page,.escape-page,.chess-page) .grid-info-separator{margin:24px 4px 0}
  :is(.original-page,.escape-page,.chess-page) .grid-info{gap:14px;margin:26px 4px 0}
  :is(.original-page,.escape-page,.chess-page) .grid-info h3{font-size:28px}
  :is(.original-page,.escape-page,.chess-page) .grid-info p{font-size:17px}
  /* Ilustración del método de juego: centrada bajo el texto y a un tamaño
     legible. En Ajedrez, la textura del tablero se ajusta a la imagen. */
  :is(.original-page,.escape-page,.chess-page) .grid-info-preview{width:100%;justify-self:center;justify-content:center;transform:none}
  :is(.original-page,.escape-page,.chess-page) .grid-info-preview img{width:min(62vw,240px)}
  .chess-page .grid-info-preview{grid-template-columns:min(62vw,240px)}
  /* Reglas: bloque más compacto. */
  :is(.original-page,.escape-page,.chess-page) .clue-rules{margin-top:30px;padding:24px 16px 8px}
  :is(.original-page,.escape-page,.chess-page) .rules-heading{margin-bottom:10px}
  :is(.original-page,.escape-page,.chess-page) .clue-rules .rules-grid article{padding:14px 0}
  :is(.original-page,.escape-page,.chess-page) .rules-grid h3{margin-bottom:8px;font-size:22px}
  :is(.original-page,.escape-page,.chess-page) .clue-rules .rules-grid p{max-width:none;font-size:15.5px}
  /* Original: sus reglas tienen diagrama; diagrama a la izquierda y texto al lado. */
  .original-page .clue-rules .rules-grid article{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"img title" "img text";column-gap:14px;align-items:center;text-align:left}
  .original-page .clue-rules .rules-grid h3{grid-area:title;align-self:end;margin:0 0 4px}
  .original-page .clue-rules .rules-grid img,
  .original-page .clue-rules .rules-grid article:nth-child(2) img,
  .original-page .clue-rules .rules-grid article:nth-child(3) img{grid-area:img;width:84px;height:84px;margin:0}
  .original-page .clue-rules .rules-grid p{grid-area:text;align-self:start}
  /* Cierre y pie, como en la portada. */
  :is(.original-page,.escape-page,.chess-page) .closing{padding:30px 0 34px}
  :is(.original-page,.escape-page,.chess-page) .closing-paper{width:calc(100% - 20px);padding:64px 22px 92px}
  :is(.original-page,.escape-page,.chess-page) .closing-newsletter h2{text-wrap:balance}
  :is(.original-page,.escape-page,.chess-page) .newsletter-subscribe{min-height:46px;padding:12px 22px;font-size:17px}
  :is(.original-page,.escape-page,.chess-page) .footer a{display:inline-block;margin:-12px 0;padding:12px 0}
}