/* ¿Real o no? — la tarjeta del titular. */
.r-tarjeta {
  margin-top: 1.4rem; padding: 1.4rem 1.3rem 1.6rem;
  background: var(--papel-2); border-radius: 22px;
  box-shadow: 0 20px 40px -28px var(--sombra);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .25s var(--curva), box-shadow .2s var(--curva);
}
.r-tarjeta:active { cursor: grabbing; transition: none; }
.r-antes { margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.r-titular { font-size: clamp(1.6rem, 7.2vw, 2.3rem); line-height: 1.15; }
.r-titular:focus { outline: none; }
.r-titular:focus-visible { outline: 3px solid var(--teja); outline-offset: 6px; }
.r-tarjeta.tira-si { box-shadow: inset 0 0 0 3px var(--bien); }
.r-tarjeta.tira-no { box-shadow: inset 0 0 0 3px var(--mal); }
.r-tarjeta.es-real { box-shadow: inset 5px 0 0 var(--bien); }
.r-tarjeta.es-falso { box-shadow: inset 5px 0 0 var(--mal); }
.r-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.r-medio { font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--tinta-2); }
.r-h3 { font-family: var(--f-texto); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin: 2rem 0 .7rem; }
.r-consejos { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: .6rem; }
.r-consejos li { counter-increment: c; padding: .9rem 1rem .9rem 3rem; position: relative; background: var(--papel-2); border-radius: 14px; display: flex; flex-direction: column; gap: .15rem; }
.r-consejos li::before { content: counter(c); position: absolute; left: 1rem; top: .85rem; font-family: var(--f-titular); font-weight: 700; color: var(--teja); }
.r-consejos span { color: var(--tinta-2); font-size: .95rem; }