/* Bruna Pazinato · ajustes de celular */

@media (max-width: 760px){

  .brand{ font-size: .72rem; letter-spacing: .26em; }
  .burger__label{ font-size: .7rem; letter-spacing: .26em; }
  .menu__foot{ font-size: .68rem; letter-spacing: .24em; }

  .rotulo,
  .passagem__rotulo,
  .contato__linha,
  .campo__rotulo{ font-size: .7rem; letter-spacing: .22em; }

  .destaque__meta,
  .destaque__papel span,
  .filme__ano,
  .palco__ano,
  .palco__papel,
  .disco__tipo,
  .faixa__nota,
  .vitrine__nota,
  .showreel__som,
  .btn__texto,
  .btn__contagem{ font-size: .7rem; letter-spacing: .2em; }

  .disco__faixas{ font-size: .7rem; letter-spacing: .04em; }

  .destaque__credito,
  .destaque__critica cite,
  .critica cite,
  .rodape__direitos,
  .recado__pe{ font-size: .66rem; letter-spacing: .14em; }

  .destaque__sub{ font-size: .42em; }

  .visor__contador,
  .visor__credito,
  .visor__obra i{ font-size: .68rem; letter-spacing: .18em; }

  /* 2. área de toque */

  .brand{
    padding: .85rem 0;
    margin: -.85rem 0;
  }

  .burger{
    min-width: 48px;
    min-height: 48px;
  }

  .rodape__redes a,
  .disco__onde a{
    width: 44px;
    height: 44px;
  }

  .btn{
    min-height: 44px;
    padding-top: .55em;
    padding-bottom: .55em;
  }

  .passagem__link{
    padding: .35rem 0;
  }

  .vitrine__seta{
    min-width: 44px;
    min-height: 44px;
  }

  .campo__valor{
    min-height: 44px;
    padding-bottom: 1em;

    font-size: 1.15rem;
  }

  .campo__valor--area{
    min-height: 7em;
  }

  .recado__enviar{
    min-height: 44px;
    padding-top: .5em;
    padding-bottom: 1.2em;
  }

  .showreel__som{
    min-height: 44px;
    padding-top: .9em;
    padding-bottom: .9em;
  }

  /* 3. o nome no hero */

  .hero{ --name-size: clamp(2.4rem, 16.2vw, 6.6rem); }
}

/* o ritmo vertical no celular */

@media (max-width: 760px){

  .abertura{ min-height: clamp(380px, 62svh, 560px); }

  .destaques{ gap: 2.2rem; margin-bottom: 2rem; }
  .destaque{ gap: 1rem; }
  .cena{ padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .cena__cabeca{ margin-bottom: 1.4rem; }
  .destaque__titulo{ margin-top: .7rem; }
  .destaque__papel{ margin-top: .9rem; }
  .destaque__critica{ margin-top: 1rem; }

  .programa{ padding-top: 2.2rem; padding-bottom: 2.4rem; }
  .programa__coluna + .programa__coluna{ margin-top: 2rem; }

  .passagem{ padding-top: 2rem; padding-bottom: 2rem; }
}

@media (max-width: 760px){

  /* a assinatura do hero */

  .tagline{

    font-size: clamp(.8rem, 4.5vw, 1.04rem);
    letter-spacing: .2em;
  }

  /* o menu */
  .menu__nav{
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
  }

  .menu__rodape{ justify-content: center; gap: 1.6rem; }
  .menu__foot{ text-align: center; }

  /* os três atos, bem maiores */
  .ato-panel__name{ font-size: clamp(2.3rem, 11.4vw, 3.4rem); }

  .ato-panel__num{
    font-size: .72rem;
    letter-spacing: .3em;
  }

  .ato-panel__num::after{ width: 30px; margin-top: .8em; }

  .ato-panel__caption{ bottom: 26%; }

  /* título de página no eixo */
  .abertura{ text-align: center; }
  .abertura__frase{ margin-inline: auto; }

  /* os eps no eixo, e as faixas legíveis */
  .disco{ justify-items: center; text-align: center; }
  .disco__capa{ margin-inline: auto; }
  .disco__texto{ width: 100%; }

  .disco__faixas{
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
    font-size: .82rem;
    letter-spacing: .03em;
    line-height: 2.1;
  }

  .disco__onde{
    justify-self: center;
    justify-content: center;
    margin-left: 0;
  }

  /* a vitrine: painéis maiores e menos alongados */

  .vitrine:not(.vitrine--miuda){ --palco-largura: clamp(240px, 70vw, 300px); }

  .vitrine:not(.vitrine--miuda) .palco{
    height: auto;
    aspect-ratio: 5 / 7;
  }

  .vitrine__topo{ justify-content: center; gap: 2.4rem; }

  .vitrine__topo .vitrine__seta{
    width: 56px;
    height: 48px;
    color: var(--paper-70);
  }

  .vitrine__topo .vitrine__seta span{ width: 40px; height: 2px; }
  .vitrine__topo .vitrine__seta span::before,
  .vitrine__topo .vitrine__seta span::after{ width: 14px; height: 2px; }

  /* a passagem entre atos */
  .passagem{
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
  }

  .passagem__link--proximo{
    justify-self: end;
    text-align: right;
  }

  .passagem__link--proximo::after{
    content: "";
    display: block;
    width: 42px;
    height: 12px;
    margin: .9em 0 0 auto;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M1 6h36M31 1l6 5-6 5' fill='none' stroke='%23D14B32' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

@media (max-width: 760px){

  /* eyebrows e títulos, mais uma vez */
  .rotulo,
  .passagem__rotulo,
  .contato__linha,
  .campo__rotulo,
  .destaque__meta,
  .destaque__papel span,
  .filme__ano,
  .palco__ano,
  .palco__papel,
  .faixa__nota,
  .vitrine__nota,
  .showreel__som,
  .btn__texto,
  .btn__contagem,
  .disco__tipo,
  .ato-panel__num{ font-size: .82rem; letter-spacing: .24em; }

  .abertura__titulo{ font-size: clamp(2.9rem, 15.5vw, 5rem); }
  .cena__titulo{ font-size: clamp(2rem, 9vw, 2.8rem); }
  .programa__titulo{ font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .destaque__titulo{ font-size: clamp(2.4rem, 10.6vw, 3.2rem); }
  .destaque__papel{ font-size: 1.12rem; }
  .palco__obra{ font-size: 1.18rem; }
  .filme__marca{ font-size: 1.18rem; }
  .disco__nome{ font-size: clamp(1.5rem, 7vw, 2rem); }
  .passagem__nome{ font-size: 1.25rem; }
  .passagem__link--proximo .passagem__nome{ font-size: clamp(1.7rem, 7.6vw, 2.2rem); }

  /* as fotos dos atos com cor */
  .ato-panel__figure img{
    filter: contrast(1) saturate(1.12) brightness(.98);
  }

  .ato-panel__veil{
    background:
      linear-gradient(to top, rgba(11,11,12,.7) 0%, rgba(11,11,12,.3) 16%, rgba(11,11,12,0) 48%),

      radial-gradient(96% 34% at 50% 66%, rgba(11,11,12,.74), rgba(11,11,12,0) 74%);
  }

  .ato-panel__num,
  .ato-panel__name{
    text-shadow: 0 1px 14px rgba(11,11,12,.85), 0 1px 3px rgba(11,11,12,.7);
  }

  .ato-panel__num{ font-weight: 500; }

  .ato-panel__num::after{ box-shadow: 0 1px 6px rgba(11,11,12,.7); }

  /* as setas no meio da faixa clara */
  .vitrine__topo{ margin-bottom: 2.2rem; }
}

@media (max-width: 760px){

  .brand{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 760px){

  .hero{ padding-bottom: clamp(6rem, 16vh, 9rem); }

  .cue{
    display: block;

    top: 100%;
    bottom: auto;
    margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
    height: clamp(42px, 7vh, 64px);
  }
}

@media (max-width: 760px){

  .btn{ font-size: .7rem; }

  .recado__enviar{ font-size: .7rem; }

  .recado__pe a{
    display: inline-block;
    padding: .85rem .4rem;
    margin: -.85rem -.4rem;
  }
}