/* Ajustes de Bakano sobre la entrega de Andersson. Se carga después de home.css.
   Vive fuera de public/periodismo/ para sobrevivir a una entrega nueva: solo hay
   que volver a enlazarlo en public/periodismo/index.html. */

/* 1. Titular del juego: escala con el alto de la pantalla para no tapar a los personajes */
@media (min-width: 651px) {
  .bmhero__titulo { max-width: min(52vw, 700px, 96vh); }
  .masthead--juego { font-size: clamp(34px, min(7.2vw, 11vh), 116px); }
  .recorte { padding: clamp(12px, 2.2vh, 20px) 34px clamp(10px, 1.6vh, 14px) 30px; }
  .recorte__ruta { margin-bottom: clamp(6px, 1.3vh, 12px); }
  .recorte__cuerpo { margin-top: clamp(8px, 1.5vh, 14px); padding-top: clamp(7px, 1.4vh, 13px); }
  .bmhero__deck { font-size: clamp(14px, min(1.25vw, 2.2vh), 19px); max-width: 46ch; }
}
@media (min-width: 651px) and (max-height: 560px) {
  .bmhero__titulo { top: 14px; }
  .recorte__ruta { display: none; }
  .masthead--juego { font-size: clamp(34px, 10vh, 116px); }
  .bmhero__deck { max-width: 64ch; }
}

/* 2. Corcho: textura vectorial en mosaico; la foto se estiraba ~8x y se pixelaba */
.mesa { background: #b8874f url("corcho.svg") 0 0 / 420px repeat; }

/* 3. Expedientes más grandes y legibles */
@media (min-width: 1100px) {
  .mesa > .wrap { width: min(100% - 2 * var(--gutter), 2100px); }
}
.obj__cuerpo { padding: 26px 26px 22px; }
.obj h3 { font-size: clamp(26px, 2.4vw, 42px); }
.obj__sub { font-size: 18px; }
.obj p { font-size: 16.5px; line-height: 1.5; opacity: .92; }
/* el pie de la tarjeta comparte línea con el sticker: tope fijo, letra.js no lo agranda más */
.obj__abrir, .obj__exp { font-size: 18px !important; letter-spacing: .08em !important; line-height: 1.3 !important; }
.obj__cierre { padding-right: 58px; flex-wrap: wrap; row-gap: 6px; }
.obj .postit { font-size: 20px; max-width: 190px; }

/* 4. "¿Quieres que investiguemos algo?": luces, brillo y flecha */
.mesa__nos { position: relative; }
.cta { animation: cta-latido 2.4s ease-in-out infinite; }
.cta::before { content: ""; position: absolute; inset: -13px; border: 6px dotted #ffd873; border-radius: 8px; pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 200, 90, .9)); animation: cta-bombillos 1.2s ease-in-out infinite alternate; }
.mesa__nos::before { content: ""; position: absolute; z-index: 4; width: 170px; height: 128px; left: -178px; bottom: 20px;
  background: url("flecha.svg") center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); animation: cta-flecha 1.1s ease-in-out infinite alternate; }
.mesa__nos::after { content: "¡Cuéntanos tu caso!"; position: absolute; z-index: 4; left: -250px; bottom: 150px; white-space: nowrap;
  font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 700; font-size: 38px; line-height: 1; color: #ffd873;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7); transform: rotate(-7deg); pointer-events: none;
  animation: cta-flecha 1.1s ease-in-out infinite alternate; }

/* 5. La bajada "Cuatro gobiernos…" no se leía sobre el corcho */
.mesa__head > div > p { font-size: clamp(22px, 1.9vw, 27px) !important; line-height: 1.5; color: #fffaf1 !important; max-width: 56ch !important;
  padding: 14px 18px; background: rgba(28, 17, 6, .62); border-left: 4px solid #C8102E; text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important; }
.mesa__head .mono { font-size: 14px; color: #ffe2a8 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .8) !important; }

@media (max-width: 700px) {
  .mesa__nos::before, .mesa__nos::after { display: none; }
  .mesa__nos { margin-bottom: 30px; padding-inline: 4px; }
  .cta::before { inset: -9px; border-width: 5px; }
}
@keyframes cta-latido {
  0%, 100% { box-shadow: 0 14px 30px -16px rgba(120, 10, 20, .8), inset 0 0 0 2px rgba(255, 243, 228, .35), 0 0 0 0 rgba(255, 196, 84, 0); }
  50% { box-shadow: 0 14px 30px -16px rgba(120, 10, 20, .8), inset 0 0 0 2px rgba(255, 243, 228, .35), 0 0 34px 6px rgba(255, 196, 84, .55); }
}
@keyframes cta-bombillos { from { opacity: .45; } to { opacity: 1; } }
@keyframes cta-flecha { from { transform: translate(0, 0); } to { transform: translate(12px, -6px); } }