/* Site v4 = site atual (style.css) + UMA mudança: no celular, os cards de serviço viram o mosaico do
   modelo novo (prévia v3), no lugar do carrossel de arcos. No computador, nada muda.
   Ordem no celular: Emagrecimento (largo) · Rosto | Pés · Corpo | Cabelo (alto, ao lado de Corpo e Detalhes) · Detalhes */
@media (max-width: 640px) {
  .portas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 190px;
    align-items: stretch;
    gap: 0.75rem;
    overflow: visible;
    scroll-snap-type: none;
    margin: 2rem 0 0;
    padding: 0;
  }
  .porta,
  .porta--1, .porta--2, .porta--3, .porta--4, .porta--5, .porta--6 {
    flex: none;
    height: auto;
    min-height: 0;
    align-self: stretch;
    border-radius: 16px;
    box-shadow: none;
    scroll-snap-align: none;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .porta:hover { transform: none; }
  .porta:hover img { transform: none; }
  .porta:active { transform: scale(0.97); }
  .porta::after { background: linear-gradient(180deg, rgba(40, 31, 32, 0) 45%, rgba(40, 31, 32, 0.62) 100%); }

  .porta--1 { order: 1; grid-column: span 2; }      /* Emagrecimento */
  .porta--3 { order: 2; }                            /* Rosto */
  .porta--5 { order: 3; }                            /* Pés */
  .porta--4 { order: 4; }                            /* Corpo */
  .porta--2 { order: 5; grid-row: span 2; }          /* Cabelo: ocupa o espaço ao lado de Detalhes */
  .porta--6 { order: 6; }                            /* Detalhes */

  .porta__rotulo {
    left: 1rem;
    right: 1rem;
    bottom: 0.9rem;
    align-items: flex-start;
    text-align: left;
    gap: 0.15rem;
  }
  .porta__rotulo em,
  .porta__rotulo .porta__nome-longo {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 1.3rem;
    text-shadow: none;
  }
  .porta--1 .porta__rotulo em { font-size: 1.8rem; }
  .porta__rotulo small { font-size: 0.78rem; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.95; }
  .porta__selo { align-self: flex-start; margin-bottom: 0.4rem; }
  .porta__marca { top: 0.8rem; left: 0.8rem; transform: none; }
}

/* Parceiros ECO em destaque: fundo espresso (o mesmo das faixas "O nosso princípio" e "Próximo passo") */
.convite-parceiros {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(248, 142, 111, 0.22), transparent 60%),
    var(--espresso);
  border-color: transparent;
  color: var(--nuvem);
}
.convite-parceiros .sobrelinha { color: var(--rose); }
.convite-parceiros h2 { color: var(--nuvem); }
.convite-parceiros h2 em { color: var(--coral); }
.convite-parceiros p:not(.sobrelinha) { color: rgba(252, 247, 244, 0.78); }
.convite-parceiros .botao--linha { background: var(--coral); border-color: var(--coral); color: var(--tinta); backdrop-filter: none; }
.convite-parceiros .botao--linha:hover { background: #F49F84; }

/* Link para o destaque "Depoimentos" do Instagram, abaixo dos 3 depoimentos */
.depos__mais { text-align: center; margin: 2.2rem 0 0; }