/* O cuidado no celular (segunda rodada): o retrato inteiro até a camisa, o texto no vermelho liso da foto e as
   seis regras em cartões de tópico (o recorte da mensagem real, o título e o texto de cada uma).
   Carrega só até 820 px (media no <link>) e por último. Todo seletor começa por .cuidado (M9). */
@media (max-width: 820px) {
  .cuidado {
    --cuid-recorte: 220px; /* altura do recorte da mensagem em cada cartão */
  }
  @media (min-height: 740px) {
    .cuidado {
      --cuid-recorte: 236px;
    }
  }
  @media (max-height: 600px) {
    .cuidado {
      --cuid-recorte: 204px;
    }
  }

  /* ---------- a foto: a Luana até a barra da camisa (1370 de 1934 px da imagem), de borda a borda ---------- */
  .cuidado .cuidado-foto {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 126.85vw;
    background: #691011; /* o vermelho liso medido na foto */
  }
  .cuidado .cuidado-foto img {
    inset: 0 0 auto 0;
    width: 100%;
    height: 126.85vw;
    object-fit: cover;
    object-position: 50% 0;
  }
  /* o degradê de 96 px esconde a linha reta onde a foto acaba */
  .cuidado .cuidado-foto::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(126.85vw - 96px);
    height: 96px;
    background: linear-gradient(rgba(105, 16, 17, 0), #691011);
    pointer-events: none;
  }
  .cuidado .cuidado-texto {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    z-index: 2;
    margin-top: -48px;
    padding: 0 var(--margem) 32px;
  }
  .cuidado .cuidado-texto .rot {
    color: rgba(255, 255, 255, 0.8);
  }
  .cuidado .cuidado-texto .lede {
    margin-top: 12px;
    max-width: none;
    color: rgba(255, 255, 255, 0.92);
  }

  /* ---------- sem JavaScript: a mensagem inteira e a lista, em página corrida ---------- */
  .cuidado .cuidado-corpo {
    padding-top: 32px;
    padding-bottom: 40px;
    gap: 24px;
  }
  .cuidado .cuidado-msgs {
    position: static;
    height: auto;
    overflow: visible;
    border-radius: 20px;
    background: var(--chat);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cuidado .cuidado-msgs-trilho {
    padding: 14px 12px;
    transform: none !important;
  }
  .cuidado .cuidado-lista {
    max-width: none;
  }
  .cuidado .cuidado-lista li b {
    font-size: 17px;
    line-height: 24px;
  }
  .cuidado .cuidado-lista li span {
    font-size: 16px;
    line-height: 24px;
  }

  /* ---------- com JavaScript: cada regra vira um cartão de tópico ---------- */
  /* a mensagem grande e a lista saem: cada cartão traz o trecho dela que a regra comenta */
  .cuidado.cartoes-cel .cuidado-msgs,
  .cuidado.cartoes-cel .cuidado-lista {
    display: none;
  }
  .cuidado .cuid-cartoes {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cuidado .cuid-cartao {
    padding: 14px;
    border-radius: 20px;
    background: #fbfbf8;
    box-shadow:
      0 1px 2px rgba(20, 21, 19, 0.04),
      0 16px 36px -20px rgba(20, 21, 19, 0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* o recorte: a mensagem real em zoom 1, só o trecho da regra, esmaecendo nas bordas */
  .cuidado .cuid-recorte {
    position: relative;
    height: var(--cuid-recorte);
    overflow: hidden;
    border-radius: 16px;
    background: var(--chat);
    font-family: var(--produto);
  }
  .cuidado .cuid-trilho {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: grid;
    gap: 6px;
    padding: 12px 10px;
    will-change: transform;
  }
  .cuidado .cuid-recorte::before,
  .cuidado .cuid-recorte::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 20px;
    pointer-events: none;
  }
  .cuidado .cuid-recorte::before {
    top: 0;
    background: linear-gradient(var(--chat), rgba(236, 233, 226, 0));
  }
  .cuidado .cuid-recorte::after {
    bottom: 0;
    background: linear-gradient(rgba(236, 233, 226, 0), var(--chat));
  }
  .cuidado .cuid-recorte .wa-msg,
  .cuidado .cuid-recorte .wa-botoes span {
    font-size: 16px;
    line-height: 23px;
  }
  .cuidado .cuid-recorte .wa-msg {
    max-width: none;
    padding-bottom: 12px;
  }
  .cuidado .cuid-recorte .wa-botoes {
    width: 100%;
  }
  /* o marca-texto verde que já existe no desktop: acende dentro do recorte */
  .cuidado .cuid-recorte mark {
    color: inherit;
    background: linear-gradient(rgba(90, 208, 172, 0.45), rgba(90, 208, 172, 0.45)) no-repeat 0 88% / 0% 42%;
    transition: background-size var(--t-desliza, 550ms) var(--sai, ease-out);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .cuidado .cuid-recorte mark.aceso {
    background-size: 100% 42%;
  }
  .cuidado .cuid-recorte mark.zera {
    transition: none;
  }
  .cuidado .cuid-cartao h3 {
    margin: 16px 0 0;
    font: 600 17px/24px var(--texto, 'Geist', system-ui, sans-serif);
    letter-spacing: 0;
    color: var(--tinta);
  }
  .cuidado .cuid-cartao p {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--apoio);
  }
}