/* ============================================================
   Flagy Nutri — peças próprias das páginas do produto.
   A paleta verde vem de nutri.css (gerado); aqui só o que o Varejo não tem:
   o celular com o app gravado, a fileira de celulares e a faixa "em breve".
   ============================================================ */

/* Celular com o app (vídeo ou print). O vídeo é 390x844, a tela do iPhone 13. */
/* A proporção 390x844 vale para a TELA, não para a moldura: com a borda incluída, a tela
   ficava com outra proporção e o vídeo era cortado nas laterais. A moldura só envolve a tela. */
.nutri-fone {
    position: relative; width: min(300px, 78vw); margin: 0 auto;
    border-radius: 44px; padding: 10px; background: #0b130e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 40px 80px rgba(0, 0, 0, .45), inset 0 0 0 2px #1e2b23;
}
.claro .nutri-fone { box-shadow: 0 0 0 2px rgba(0, 0, 0, .06), 0 30px 60px rgba(0, 51, 20, .22), inset 0 0 0 2px #1e2b23; }
.nutri-fone__tela { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 34px; overflow: hidden; background: #f2f6f3; }
.nutri-fone__tela img, .nutri-fone__tela video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sem a ilha do iPhone: ela cobria o topo do app (logo e placar), que é justamente o que mostramos. */
.nutri-fone .video { height: 100%; border-radius: 0; box-shadow: none; background: transparent; }
.nutri-fone .video__midia { height: 100%; object-fit: cover; }

/* Topo do produto: desktop grande saindo pela direita e o celular na frente. */
.vitrine .nutri-fone.vitrine__fone { position: absolute; left: -36px; bottom: -48px; width: 210px; z-index: 3; border-radius: 34px; padding: 7px; }
.vitrine .nutri-fone.vitrine__fone .nutri-fone__tela { border-radius: 27px; }
@media (max-width: 960px) {
    .vitrine .nutri-fone.vitrine__fone { position: relative; left: auto; bottom: auto; margin: -80px auto 0; }
}

/* Seção de recurso com celular no lugar da janela do navegador. */
.recurso__imagem--fone { display: flex; justify-content: center; }

/* Fileira de celulares (o app do paciente, tela por tela). */
.nutri-fones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-items: start; margin-top: 46px; }
.nutri-fones figure { margin: 0; text-align: center; }
.nutri-fones .nutri-fone { width: 100%; max-width: 240px; border-radius: 36px; padding: 8px; }
.nutri-fones .nutri-fone__tela { border-radius: 29px; }
.nutri-fones figcaption { margin-top: 16px; font-weight: 700; font-size: 15px; }
.nutri-fones figcaption small { display: block; font-weight: 500; font-size: 13.5px; color: var(--tinta-2); margin-top: 3px; }
.nutri-fones figure:nth-child(even) { margin-top: 38px; }
@media (max-width: 960px) {
    .nutri-fones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nutri-fones figure:nth-child(even) { margin-top: 0; }
}

/* Módulo com clipe de celular (página interna). */
.modulo-fone { display: flex; justify-content: center; }

/* "Em breve": o que está nos planos, dito com honestidade. */
.nutri-breve { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.nutri-breve span {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    border: 1px dashed var(--borda-forte); color: var(--tinta-2); font-weight: 600; font-size: 14.5px; background: var(--superficie);
}
.nutri-breve span em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--acento); }

/* Desconto: o cofrinho grande ao lado da regra. */
.nutri-regra { display: grid; gap: 12px; margin-top: 24px; }
.nutri-regra div { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.nutri-regra b { font-size: 22px; color: var(--acento); min-width: 92px; }
.nutri-regra span { color: var(--tinta-2); font-size: 15px; }

/* Marca própria: a página da loja do app da clínica (ilustração montada em HTML, sem marca de loja). */
.nutri-marca__fones { display: flex; justify-content: center; align-items: flex-start; gap: 26px; }
.nutri-marca__fones .nutri-fone { width: min(260px, 44vw); margin: 0; }
.nutri-marca__fones .nutri-fone:last-child { margin-top: 56px; }
.nutri-loja { height: 100%; background: #fff; color: #1d1d1f; padding: 30px 16px 0; font-size: 12px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.nutri-loja__busca { display: flex; align-items: center; gap: 8px; background: #f0f2f1; border-radius: 12px; padding: 9px 12px; color: #6b7280; font-size: 12.5px; }
.nutri-loja__app { display: flex; gap: 12px; align-items: center; }
.nutri-loja__app img { width: 68px; height: 68px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.nutri-loja__app strong { display: block; font-size: 16px; line-height: 1.2; color: #111; }
.nutri-loja__app small { display: block; color: #6b7280; font-size: 11.5px; margin-top: 2px; }
.nutri-loja__botao { display: block; text-align: center; background: #0F766E; color: #fff; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 9px 16px; }
.nutri-loja__info { display: flex; justify-content: space-between; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 9px 2px; color: #6b7280; font-size: 10.5px; text-align: center; }
.nutri-loja__info b { display: block; color: #111; font-size: 12px; }
.nutri-loja__prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.nutri-loja__prints img { width: 100%; border-radius: 9px; border: 1px solid #e5e7eb; aspect-ratio: 390 / 844; object-fit: cover; }
.nutri-loja__desc { color: #4b5563; font-size: 11.5px; line-height: 1.45; }
.nutri-marca__nota { margin-top: 18px; font-size: 14px; color: var(--tinta-3); }
@media (max-width: 560px) { .nutri-marca__fones .nutri-fone:last-child { display: none; } .nutri-marca__fones .nutri-fone { width: min(280px, 80vw); } }
.nutri-loja__app > div { flex: 1; min-width: 0; }
.nutri-loja__app small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A distância: três fotos (ilustrativas) abaixo do cartão. */
.nutri-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.nutri-galeria figure { margin: 0; border-radius: var(--raio-lg); overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); }
.nutri-galeria img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.nutri-galeria figcaption { padding: 16px 18px 18px; }
.nutri-galeria strong { display: block; font-size: 16px; margin-bottom: 4px; }
.nutri-galeria span { color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) { .nutri-galeria { grid-template-columns: 1fr; } }
.nutri-regra__titulo { margin: 22px 0 -10px; font-size: 14px; font-weight: 600; color: var(--tinta-3); }