/* Oito Posts en español (Feed Divino, Feed Sabroso, Feed Peludo): lo poco que se suma a /oito/comum/app.css y venda.css. */

/* celular del héroe sin ejemplos: un feed dibujado con las paletas de la marca */
.ig-tile{aspect-ratio:4/5;background:var(--tf);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px 9px}
.ig-tile b{display:block;width:44%;height:5px;border-radius:9px;background:var(--td);margin-bottom:3px}
.ig-tile i{display:block;height:6px;border-radius:9px;background:var(--tt);opacity:.85}
.ig-tile i+i{width:62%;opacity:.5}
.ig-tile:nth-child(3n+2){justify-content:center;align-items:center;text-align:center}
.ig-tile:nth-child(3n+2) b{width:56%;height:22px;border-radius:6px}
.ig-tile:nth-child(3n+2) i{width:70%}
.ig-tile:nth-child(3n){justify-content:flex-start}

/* teléfono con el código del país */
.tel{display:flex;align-items:stretch}
.tel span{display:grid;place-items:center;padding:0 14px;background:var(--claro);border:1.5px solid var(--linha);border-right:0;border-radius:14px 0 0 14px;font-weight:700;color:var(--tinta);min-width:62px}
.tel input{border-radius:0 14px 14px 0}
.chips.paises span{font-size:16px}

/* botón de suscripción con Hotmart */
.hotmart{display:grid;gap:4px;max-width:520px}
.hotmart .btn{width:100%}

/* términos */
.termos h3{margin-top:10px}

/* los radios escondidos de los chips no pueden ensanchar la página (app.css les da width:100%) */
.chips input{width:1px;height:1px}

/* banderas dibujadas (Windows no muestra los emojis de bandera) */
.bandera{display:inline-block;width:22px;height:15px;border-radius:3px;vertical-align:-2px;margin-right:7px;box-shadow:0 0 0 1px rgba(0,0,0,.14);flex:none}
.bandera.co{background:linear-gradient(#fcd116 0 50%,#003893 50% 75%,#ce1126 75%)}
.bandera.cl{background:radial-gradient(circle at 16.5% 25%,#fff 0 1.7px,transparent 2.2px),linear-gradient(90deg,#0039a6 0 33.4%,transparent 33.4%) top/100% 50% no-repeat,linear-gradient(#fff 0 50%,#d52b1e 50%)}

/* "US$ 39" ocupa más que "R$ 197": que no se parta en dos líneas */
.cartao-preco .valor,.oferta .valor{white-space:nowrap}
.cartao-preco .valor{font-size:clamp(60px,17vw,84px)}
@media (max-width:480px){.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.numeros b{font-size:26px;white-space:nowrap}.numeros span{font-size:13px;line-height:1.3}}
.salva-app .sa-ic{flex:none}